Upgrade global styles (#10692)

* website: upgrade global-styles packages

* website: move community page to CSS modules

* website: replace g-container with g-grid-container

* website: hide alert-banner on mobile

* website: backfill missing global type styles

* website: fix code font-size in download custom content

* website: bump to latest patched dependencies

website/components/callout-blade/index.jsx

@@ -7,7 +7,7 @@ export default function CalloutBlade({ title, callouts }) {
   return (
     <div className={styles.calloutBlade}>
       <div className={styles.contentWrapper}>
-        <h3>{title}</h3>
+        <h3 className="g-type-display-3">{title}</h3>
         <ul
           className={classNames(styles.callouts, {
             [styles.twoUp]: callouts.length % 3 !== 0,
@@ -21,7 +21,9 @@ export default function CalloutBlade({ title, callouts }) {
                   <InlineSvg src={callout.icon} className={styles.icon} />
                   <div className={styles.flexWrapper}>
                     <div className={styles.infoWrapper}>
-                      {callout.title && <h5>{callout.title}</h5>}
+                      {callout.title && (
+                        <h5 className="g-type-display-5">{callout.title}</h5>
+                      )}
                       <p>{callout.description}</p>
                     </div>
                     <div className={styles.linkWrapper}>

website/components/cloud-offerings-list/index.jsx

@@ -12,7 +12,7 @@ export default function CloudOfferingsList({ offerings }) {
           >
             <img src={offering.image} alt={offering.title} />
             <span className="g-type-label-strong">{offering.eyebrow}</span>
-            <h4>{offering.title}</h4>
+            <h4 className="g-type-display-4">{offering.title}</h4>
             <p>{offering.description}</p>
             <Button
               title={offering.link.text}

website/components/cta-hero/index.jsx

@@ -24,7 +24,7 @@ function CTA({ title, description, link }) {
   return (
     <div className={s.cta}>
       <InlineSvg className={s.stackIcon} src={ConsulStack} />
-      <h3>{title}</h3>
+      <h3 className="g-type-display-3">{title}</h3>
       <p className={s.description}>{description}</p>
       <Button
         title={link.text}

website/components/footer/index.jsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 export default function Footer({ openConsentManager }) {
   return (
     <footer className="g-footer">
-      <div className="g-container">
+      <div className="g-grid-container">
         <div className="left">
           <Link href="/intro">
             <a>Intro</a>

website/components/footer/style.css

@@ -4,7 +4,7 @@
   display: flex;
   border-top: 1px solid var(--gray-5);
 
-  & .g-container {
+  & .g-grid-container {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;

website/components/hcp-callout-section/index.jsx

@@ -13,12 +13,12 @@ export default function HcpCalloutSection({
   return (
     <div className={styles.hcpCalloutSection} id={id}>
       <div className={styles.header}>
-        <h2>{header}</h2>
+        <h2 className="g-type-display-2">{header}</h2>
       </div>
 
       <div className={styles.content}>
         <div className={styles.info}>
-          <h1>{title}</h1>
+          <h1 className="g-type-display-1">{title}</h1>
           <span className={styles.chin}>{chin}</span>
           <p className={styles.description}>{description}</p>
           <div className={styles.links}>

website/components/static-dynamic-diagram/style.module.css

@@ -14,5 +14,6 @@
   color: var(--gray-2);
 }
 .heading {
+  composes: g-type-display-2 from global;
   margin: 0;
 }

website/package.json

@@ -4,30 +4,30 @@
   "version": "0.0.1",
   "author": "HashiCorp",
   "dependencies": {
-    "@hashicorp/mktg-global-styles": "^3.1.0",
+    "@hashicorp/mktg-global-styles": "4.0.0",
     "@hashicorp/mktg-logos": "^1.2.0",
     "@hashicorp/platform-code-highlighting": "^0.1.1",
     "@hashicorp/platform-runtime-error-monitoring": "^0.1.0",
     "@hashicorp/platform-util": "^0.1.0",
     "@hashicorp/react-alert": "^5.0.1",
-    "@hashicorp/react-alert-banner": "^6.1.2",
+    "@hashicorp/react-alert-banner": "6.2.0",
     "@hashicorp/react-button": "^5.2.1",
     "@hashicorp/react-call-to-action": "^3.1.2",
     "@hashicorp/react-callouts": "^7.1.2",
     "@hashicorp/react-code-block": "^4.1.4",
     "@hashicorp/react-consent-manager": "6.0.0",
-    "@hashicorp/react-content": "^7.0.2",
+    "@hashicorp/react-content": "8.0.1",
-    "@hashicorp/react-docs-page": "^13.5.1",
+    "@hashicorp/react-docs-page": "14.0.1",
     "@hashicorp/react-enterprise-alert": "^5.0.1",
     "@hashicorp/react-featured-slider": "^4.1.2",
     "@hashicorp/react-hashi-stack-menu": "^2.0.6",
     "@hashicorp/react-head": "^3.1.1",
-    "@hashicorp/react-hero": "^7.3.2",
+    "@hashicorp/react-hero": "7.3.3",
     "@hashicorp/react-image": "^4.0.2",
     "@hashicorp/react-inline-svg": "^6.0.2",
     "@hashicorp/react-learn-callout": "^1.1.2",
-    "@hashicorp/react-markdown-page": "^1.3.1",
+    "@hashicorp/react-markdown-page": "1.4.2",
-    "@hashicorp/react-product-downloads-page": "^2.3.1",
+    "@hashicorp/react-product-downloads-page": "2.4.0",
     "@hashicorp/react-product-features-list": "^4.1.2",
     "@hashicorp/react-section-header": "^5.0.3",
     "@hashicorp/react-stepped-feature-list": "^4.0.2",

website/pages/404.jsx

@@ -17,7 +17,7 @@ export default function NotFound() {
 
   return (
     <div id="p-404">
-      <h1>Page Not Found</h1>
+      <h1 className="g-type-display-1">Page Not Found</h1>
       <p>
         We&lsquo;re sorry but we can&lsquo;t find the page you&lsquo;re looking
         for.

website/pages/_app.js

@@ -39,7 +39,7 @@ export default function App({ Component, pageProps }) {
         />
       </HashiHead>
       {ALERT_BANNER_ACTIVE && (
-        <AlertBanner {...alertBannerData} product="consul" />
+        <AlertBanner {...alertBannerData} product="consul" hideOnMobile />
       )}
       <HashiStackMenu />
       <ProductSubnav />

website/pages/community/index.jsx

@@ -2,10 +2,11 @@ import VerticalTextBlockList from '@hashicorp/react-vertical-text-block-list'
 import SectionHeader from '@hashicorp/react-section-header'
 import Head from 'next/head'
 import { productSlug } from 'data/metadata'
+import s from './style.module.css'
 
 export default function CommunityPage() {
   return (
-    <div id="p-community">
+    <div className={s.root}>
       <Head>
         <title key="title">Community | Consul by HashiCorp</title>
       </Head>

website/pages/community/style.css

@@ -1,8 +0,0 @@
-#p-community {
-  max-width: var(--site-max-width);
-  margin: 72px auto;
-
-  & .g-section-header {
-    margin-bottom: 100px;
-  }
-}

website/pages/community/style.module.css

@@ -0,0 +1,9 @@
+.root {
+  composes: g-grid-container from global;
+  margin-top: 72px;
+  margin-bottom: 72px;
+
+  & :global(.g-section-header) {
+    margin-bottom: 100px;
+  }
+}

website/pages/downloads/style.module.css

@@ -8,6 +8,10 @@
   border-radius: 3px;
   margin: 24px 0;
 
+  & code {
+    font-size: 0.8125rem;
+  }
+
   & :first-child {
     margin-top: 0;
   }

website/pages/print.css

@@ -70,7 +70,7 @@
 
 @media print {
   /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
-  .g-container {
+  .g-grid-container {
     /*
     * A “measure” is the number of characters in a line of text.
     * Long lines fatique readers as they find the start of a new line of text.

website/pages/style.css

@@ -1,7 +1,5 @@
 /* Global Component Styles */
 @import '~@hashicorp/mktg-global-styles/style.css';
-@import '~@hashicorp/mktg-global-styles/_temporary-to-remove/layout.css';
-@import '~@hashicorp/mktg-global-styles/_temporary-to-remove/tables.css';
 
 :root {
   --highlight-color: var(--consul-link);
@@ -15,8 +13,6 @@
 @import '~@hashicorp/react-callouts/style.css';
 @import '~@hashicorp/react-call-to-action/style.css';
 @import '~@hashicorp/react-consent-manager/style.css';
-@import '~@hashicorp/react-content/style.css';
-@import '~@hashicorp/react-docs-page/style.css';
 @import '~@hashicorp/react-enterprise-alert/style.css';
 @import '~@hashicorp/react-featured-slider/style.css';
 @import '~@hashicorp/react-learn-callout/style.css';
@@ -39,7 +35,6 @@
 @import '../components/use-cases-layout/style.css';
 
 /* Local Pages */
-@import './community/style.css';
 @import './home/style.css';
 
 /* Print Styles */