Upgrade global styles (#1418)

* website: bump packages for global style upgrades

* website: backfill missing type styles

* website: upgrade security page to use markdown-page

* website: upgrade g-container to g-grid-container

* website: upgrade community page

* website: hide alert-banner on mobile

* website: fix mismatched border colour on downloads page

* website: fix incorrect className

* website: bump to fix issue with typography on OpenAPI pages

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="/docs">
             <a>Docs</a>

website/components/footer/style.css

@@ -3,7 +3,7 @@
   flex-shrink: 0;
   display: flex;
 
-  & .g-container {
+  & .g-grid-container {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;

website/components/merch-desktop-client/merch-desktop-client.module.css

@@ -1,6 +1,6 @@
 .container {
   width: 100%;
-  border: 1px solid var(--gray-6);
+  border: 1px solid var(--gray-5);
   display: flex;
   justify-content: center;
   min-height: 193px;

website/components/openapi-page/index.jsx

@@ -79,7 +79,7 @@ function OpenApiPage({
               <h1 className={`${styles.pageHeading} g-type-display-2`}>
                 {info.title}
               </h1>
-              <p className={`${styles.landingPlaceholder} g-type-body-long`}>
+              <p className={`${styles.landingPlaceholder} g-type-long-body`}>
                 Select a service from the sidebar.
               </p>
             </>

website/content/security.mdx

@@ -0,0 +1,23 @@
+---
+layout: index
+page_title: Security
+description: >-
+  Boundary takes security very seriously. Please responsibly disclose any security
+  vulnerabilities found and we'll handle it quickly.
+---
+
+# Security
+
+We understand that many users place a high level of trust in HashiCorp and
+the tools we build. We apply best practices and focus on security to make
+sure we can maintain the trust of the community.
+
+We deeply appreciate any effort to disclose vulnerabilities responsibly.
+
+If you would like to report a vulnerability, please see the
+[HashiCorp security page](https://www.hashicorp.com/security),
+which has the proper email to communicate with as well as our PGP key.
+
+If you aren't reporting a security sensitive vulnerability, please
+open an issue on the standard [GitHub](https://github.com/hashicorp/boundary)
+repository.

website/package.json

@@ -5,22 +5,23 @@
   "author": "HashiCorp",
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "9.0.9",
-    "@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-banner": "^6.1.2",
+    "@hashicorp/react-alert-banner": "6.2.0",
     "@hashicorp/react-button": "^5.2.1",
     "@hashicorp/react-consent-manager": "^6.0.0",
-    "@hashicorp/react-content": "^7.0.2",
-    "@hashicorp/react-docs-page": "^13.5.1",
+    "@hashicorp/react-content": "8.0.1",
+    "@hashicorp/react-docs-page": "14.0.1",
     "@hashicorp/react-enterprise-alert": "^5.0.1",
     "@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-product-downloads-page": "^2.3.1",
+    "@hashicorp/react-markdown-page": "1.4.2",
+    "@hashicorp/react-product-downloads-page": "2.3.2",
     "@hashicorp/react-product-features-list": "^4.1.2",
     "@hashicorp/react-section-header": "^5.0.3",
     "@hashicorp/react-subnav": "^8.4.0",

website/pages/404.jsx

@@ -17,7 +17,7 @@ export default function NotFound() {
 
   return (
     <div id="p-404" className="g-grid-container">
-      <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

@@ -38,7 +38,7 @@ export default function App({ Component, pageProps }) {
         <meta name="og:description" property="og:title" content={description} />
       </HashiHead>
       {ALERT_BANNER_ACTIVE && (
-        <AlertBanner {...alertBannerData} product="boundary" />
+        <AlertBanner {...alertBannerData} product="boundary" hideOnMobile />
       )}
       <HashiStackMenu />
       <ProductSubnav />

website/pages/community/index.jsx

@@ -1,10 +1,11 @@
 import VerticalTextBlockList from '@hashicorp/react-vertical-text-block-list'
 import SectionHeader from '@hashicorp/react-section-header'
 import Head from 'next/head'
+import s from './style.module.css'
 
 export default function CommunityPage() {
   return (
-    <div id="p-community">
+    <div className={s.root}>
       <Head>
         <title key="title">Community | Boundary 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-bottom: 72px;
+  margin-top: 72px;
+
+  & :global(.g-section-header) {
+    margin-bottom: 100px;
+  }
+}

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/security/index.jsx

@@ -1,37 +1,10 @@
-import styles from './styles.module.css'
+import MarkdownPage from '@hashicorp/react-markdown-page'
+import generateStaticProps from '@hashicorp/react-markdown-page/server'
 
-export default function SecurityPage() {
-  return (
-    <div className={styles.securityPage}>
-      <div className="g-container">
-        <div className={styles.longformWrapper}>
-          <h2>Security</h2>
-          <p>
-            We understand that many users place a high level of trust in
-            HashiCorp and the tools we build. We apply best practices and focus
-            on security to make sure we can maintain the trust of the community.
-          </p>
-          <p>
-            We deeply appreciate any effort to disclose vulnerabilities
-            responsibly.
-          </p>
-          <p>
-            If you would like to report a vulnerability, please see the{' '}
-            <a href="https://www.hashicorp.com/security">
-              HashiCorp security page
-            </a>{' '}
-            which has the proper email to communicate with as well as our PGP
-            key.
-          </p>
-          <p>
-            {' '}
-            If you aren&apos;t reporting a security sensitive vulnerability,
-            please open an issue on the standard{' '}
-            <a href="https://github.com/hashicorp/boundary">GitHub</a>{' '}
-            repository.
-          </p>
-        </div>
-      </div>
-    </div>
-  )
+export default function SecurityPage(staticProps) {
+  return <MarkdownPage {...staticProps} />
 }
+
+export const getStaticProps = generateStaticProps({
+  pagePath: 'content/security.mdx',
+})

website/pages/security/styles.module.css

@@ -1,15 +0,0 @@
-.securityPage {
-  & .longformWrapper {
-    @media (min-width: 800px) {
-      margin-top: 80px;
-      margin-bottom: 80px;
-      max-width: 70%;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    & a {
-      color: var(--boundary);
-    }
-  }
-}

website/pages/style.css

@@ -1,16 +1,12 @@
 /* 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';
 
 @import '~@hashicorp/react-hero/style.css';
 @import '~@hashicorp/react-button/styles/index.css';
 @import '~@hashicorp/react-consent-manager/style.css';
 @import '~@hashicorp/react-toggle/style.css';
 @import '~@hashicorp/react-vertical-text-block-list/style.css';
-@import '~@hashicorp/react-docs-page/style.css';
 @import '~@hashicorp/react-search/style.css';
-@import '~@hashicorp/react-content/style.css';
 @import '~@hashicorp/react-subnav/style.css';
 @import '~@hashicorp/react-tabs/style.css';
 @import '~@hashicorp/react-enterprise-alert/style.css';
@@ -22,7 +18,6 @@
 @import '../components/footer/style.css';
 
 /* Local Pages */
-@import './community/style.css';
 @import './home/style.css';
 
 /* Print Styles */