Upgrade global styles (#12470)

* website: upgrade global-style dependencies * website: use hideOnMobile for alert banner * website: remove deprecated --site-max-width on community page * website: replace g-container with g-grid-container * website: backfill missing heading styles * website: remove duplicative not-found page folder * website: use new download page for vmware utility * website: replace fake vmware utility logo with plain text * website: bump to downloads-page pre-release to prove out * website: bump to product-downloads stable release * website: bump to patched content component * website: add comment on vmware download page config * chore(website): use new interface on vmware downloads page
2021-08-27 15:28:49 -04:00 · 2021-08-27 15:28:49 -04:00 · 1382832b9d
commit 1382832b9d
parent b5b3894901
15 changed files with 632 additions and 571 deletions
--- a/website/components/footer/index.jsx
+++ b/website/components/footer/index.jsx
@ -4,7 +4,7 @@ import Link from 'next/link'
 export default function Footer({ openConsentManager }) {
  return (
    <footer className={s.root}>
-      <div className="g-container">
+      <div className="g-grid-container">
        <Link href="/intro">
          <a>Intro</a>
        </Link>
--- a/website/components/footer/style.module.css
+++ b/website/components/footer/style.module.css
@ -3,7 +3,7 @@
  flex-shrink: 0;
  display: flex;

-  & :global(.g-container) {
+  & :global(.g-grid-container) {
    display: flex;
    flex-wrap: wrap;
  }
--- a/website/components/temporary_text-split/style.module.css
+++ b/website/components/temporary_text-split/style.module.css
@ -25,6 +25,7 @@
 }

 .headline {
+  composes: g-type-display-2 from global;
  margin: 20px 0 10px 0;
 }

--- a/website/package-lock.json
+++ b/website/package-lock.json
--- a/website/package.json
+++ b/website/package.json
@ -4,21 +4,21 @@
  "version": "1.0.0",
  "author": "HashiCorp",
  "dependencies": {
-    "@hashicorp/mktg-global-styles": "^3.1.0",
+    "@hashicorp/mktg-global-styles": "4.0.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-code-block": "^4.1.4",
    "@hashicorp/react-consent-manager": "6.0.0",
-    "@hashicorp/react-docs-page": "^13.5.1",
+    "@hashicorp/react-docs-page": "14.0.1",
    "@hashicorp/react-hashi-stack-menu": "^2.0.6",
    "@hashicorp/react-head": "^3.1.1",
    "@hashicorp/react-inline-svg": "^6.0.2",
    "@hashicorp/react-product-downloader": "^4.1.5",
-    "@hashicorp/react-product-downloads-page": "^2.3.1",
-    "@hashicorp/react-search": "^5.1.1",
+    "@hashicorp/react-product-downloads-page": "^2.5.0",
+    "@hashicorp/react-search": "5.1.2",
    "@hashicorp/react-section-header": "^5.0.3",
    "@hashicorp/react-subnav": "^8.4.0",
    "@hashicorp/react-tabs": "^6.0.1",
--- a/website/pages/404.jsx
+++ b/website/pages/404.jsx
@ -1,2 +1,33 @@
-import NotFound from './not-found'
-export default NotFound
+import s from './404.module.css'
+import Link from 'next/link'
+import { useEffect } from 'react'
+
+export default function NotFound() {
+  useEffect(() => {
+    if (
+      typeof window !== 'undefined' &&
+      typeof window?.analytics?.track === 'function' &&
+      typeof window?.document?.referrer === 'string' &&
+      typeof window?.location?.href === 'string'
+    )
+      window.analytics.track(window.location.href, {
+        category: '404 Response',
+        label: window.document.referrer || 'No Referrer',
+      })
+  }, [])
+
+  return (
+    <div className={s.root}>
+      <h1 className={s.heading}>Page Not Found</h1>
+      <p>
+        We&lsquo;re sorry but we can&lsquo;t find the page you&lsquo;re looking
+        for.
+      </p>
+      <p>
+        <Link href="/">
+          <a>Back to Home</a>
+        </Link>
+      </p>
+    </div>
+  )
+}
--- a/website/pages/not-found/style.module.css
+++ b/website/pages/not-found/style.module.css
@ -13,24 +13,11 @@
    padding-inline: 24px;
  }

-  & h1 {
-    font-size: 1.5rem;
-    letter-spacing: -0.004em;
-    line-height: 1.375em;
-
-    @media (--medium-up) {
-      font-size: 1.75rem;
-      line-height: 1.321em;
-    }
-
-    @media (--large) {
-      font-size: 2rem;
-      letter-spacing: -0.006em;
-      line-height: 1.313em;
-    }
-  }
-
  & a {
    color: var(--highlight-color);
  }
 }
+
+.heading {
+  composes: g-type-display-3 from global;
+}
--- a/website/pages/_app.js
+++ b/website/pages/_app.js
@ -35,7 +35,7 @@ export default function App({ Component, pageProps }) {
        icon={[{ href: '/favicon.ico' }]}
      />
      {ALERT_BANNER_ACTIVE && (
-        <AlertBanner {...alertBannerData} product="vagrant" />
+        <AlertBanner {...alertBannerData} product="vagrant" hideOnMobile />
      )}
      <HashiStackMenu />
      <ProductSubnav />
--- a/website/pages/community/style.module.css
+++ b/website/pages/community/style.module.css
@ -1,6 +1,7 @@
 .root {
-  max-width: var(--site-max-width);
-  margin: 72px auto;
+  composes: g-grid-container from global;
+  margin-top: 72px;
+  margin-bottom: 72px;

  & :global(.g-section-header) {
    margin-bottom: 100px;
--- a/website/pages/not-found/index.jsx
+++ b/website/pages/not-found/index.jsx
@ -1,33 +0,0 @@
-import s from './style.module.css'
-import Link from 'next/link'
-import { useEffect } from 'react'
-
-export default function NotFound() {
-  useEffect(() => {
-    if (
-      typeof window !== 'undefined' &&
-      typeof window?.analytics?.track === 'function' &&
-      typeof window?.document?.referrer === 'string' &&
-      typeof window?.location?.href === 'string'
-    )
-      window.analytics.track(window.location.href, {
-        category: '404 Response',
-        label: window.document.referrer || 'No Referrer',
-      })
-  }, [])
-
-  return (
-    <div className={s.root}>
-      <h1>Page Not Found</h1>
-      <p>
-        We&lsquo;re sorry but we can&lsquo;t find the page you&lsquo;re looking
-        for.
-      </p>
-      <p>
-        <Link href="/">
-          <a>Back to Home</a>
-        </Link>
-      </p>
-    </div>
-  )
-}
--- a/website/pages/print.css
+++ b/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.
--- a/website/pages/security/index.jsx
+++ b/website/pages/security/index.jsx
@ -14,7 +14,7 @@ export default function SecurityPage() {
        />
      </Head>
      <main className={s.root}>
-        <h1>Security</h1>
+        <h1 className="g-type-display-1">Security</h1>
        <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
--- a/website/pages/style.css
+++ b/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(--vagrant);
@ -10,8 +8,6 @@
@import '~@hashicorp/react-alert-banner/style.css';
@import '~@hashicorp/react-button/styles/index.css';
@import '~@hashicorp/react-consent-manager/style.css';
-@import '~@hashicorp/react-content/style.css';
-@import '~@hashicorp/react-docs-page/style.css';
@import '~@hashicorp/react-search/style.css';
@import '~@hashicorp/react-subnav/style.css';
@import '~@hashicorp/react-tabs/style.css';
--- a/website/pages/vmware/downloads/index.jsx
+++ b/website/pages/vmware/downloads/index.jsx
@ -1,42 +1,51 @@
 import s from './style.module.css'
-import { VMWARE_UTILITY_VERSION } from 'data/version.json'
-import ProductDownloader from '@hashicorp/react-product-downloader'
+import { VMWARE_UTILITY_VERSION } from 'data/version'
+import ProductDownloadsPage from '@hashicorp/react-product-downloads-page'
+import { generateStaticProps } from '@hashicorp/react-product-downloads-page/server'
 import Head from 'next/head'
 import HashiHead from '@hashicorp/react-head'

-export default function DownloadsPage({ releaseData }) {
+export default function DownloadsPage(staticProps) {
  return (
-    <div className={s.root}>
+    <>
+      <ProductDownloadsPage
+        pageTitle="Download Vagrant vmware Utility"
+        getStartedDescription="Follow step-by-step tutorials on the essentials of Vagrant VMWare Utility."
+        getStartedLinks={[
+          {
+            label: 'Installation Instructions',
+            href:
+              'https://www.vagrantup.com/docs/providers/vmware/installation',
+          },
+          {
+            label: 'Community Resources',
+            href: 'https://www.vagrantup.com/community',
+          },
+          {
+            label: 'View all Vagrant tutorials',
+            href: 'https://learn.hashicorp.com/vagrant',
+          },
+        ]}
+        logo={<p className={s.notALogo}>Vagrant vmware Utility</p>}
+        tutorialLink={{
+          href: 'https://learn.hashicorp.com/vagrant',
+          label: 'View Tutorials at HashiCorp Learn',
+        }}
+        showPackageManagers={false}
+        {...staticProps}
+      />
+      {/* Override default ProductDownloader title */}
      <HashiHead
        is={Head}
        title="VMware Utility Downloads | Vagrant by HashiCorp"
      />
-      <ProductDownloader
-        product="Vagrant VMware Utility"
-        baseProduct="Vagrant"
-        version={VMWARE_UTILITY_VERSION}
-        releaseData={releaseData}
-        changelog={false}
-      />
-    </div>
+    </>
  )
 }

 export async function getStaticProps() {
-  return fetch(
-    `https://releases.hashicorp.com/vagrant-vmware-utility/${VMWARE_UTILITY_VERSION}/index.json`
-  )
-    .then((res) => res.json())
-    .then((releaseData) => ({ props: { releaseData } }))
-    .catch(() => {
-      throw new Error(
-        `--------------------------------------------------------
-        Unable to resolve version ${VMWARE_UTILITY_VERSION} on releases.hashicorp.com from link
-        <https://releases.hashicorp.com/vagrant-vmware-utility/${VMWARE_UTILITY_VERSION}/index.json>. Usually this
-        means that the specified version has not yet been released. The downloads page
-        version can only be updated after the new version has been released, to ensure
-        that it works for all users.
-        ----------------------------------------------------------`
-      )
-    })
+  return await generateStaticProps({
+    product: 'vagrant-vmware-utility',
+    latestVersion: VMWARE_UTILITY_VERSION,
+  })
 }
--- a/website/pages/vmware/downloads/style.module.css
+++ b/website/pages/vmware/downloads/style.module.css
@ -1,5 +1,4 @@
-.root {
-  composes: g-grid-container from global;
-  margin-top: 72px;
-  margin-bottom: 72px;
+.notALogo {
+  composes: g-type-body-x-strong from global;
+  font-size: 1rem;
 }