Homepage Hero Upgrade w/ Alert (#10377)

* updating hero with ecs info

* updates to hero

* Include back the Basic Hero styles

The basic hero is still used on the use case pages

* Revert the tsconfig changes

Nothing in the scope of this PR requires these changes!

* Remove the old Carousel CSS file

This is no longer needed as we're using the @hashicorp/react-hero
which comes with all the styling required for this carousel to work.

* Rename ConsulHero -> HomepageHero imports/exports

This will help prevent any confusion for future devs here -- this is a
convention we have that helps us from having to trace every import,
which helps us find the source of the component without actually having
to look at the import.

* Pin the deps

These were previously pinned to the exact version; including ^ will
allow minor & patch updates to sneak in, which normally shouldn't cause
an issue but we tend to be more conservative on dep upgrades.

* Revert unneeded changes to the document file

* Revert changes to app.js file

Not needed in the scope of this PR!

* Hard pin react-alert

* Remove unneeded css

Co-authored-by: Brandon Romano <brandon@hashicorp.com>

website/components/homepage-hero/carousel.css

@@ -1,111 +0,0 @@
-.carousel {
-  & .videos {
-    position: relative;
-  }
-
-  & .video-wrapper {
-    height: 0;
-    opacity: 0;
-    overflow: hidden;
-    position: relative;
-    transform: translateX(-60px);
-    line-height: 0;
-    box-shadow: 0 14.3254px 14.3254px rgba(37, 41, 55, 0.16);
-
-    &.is-active {
-      opacity: 1;
-      padding-top: calc((100% * 0.63569) + 28px);
-      transform: translateX(0);
-      transition: opacity 0.5s, transform 0.5s;
-      transition-timing-function: ease-out;
-    }
-
-    &.is-deactivating {
-      opacity: 0;
-      transform: translateX(90px);
-      transition-timing-function: ease-in;
-    }
-  }
-
-  & .bar {
-    align-items: center;
-    background: #0e1016;
-    border-radius: 4px 4px 0 0;
-    display: flex;
-    height: 28px;
-    padding: 0 12px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-
-    & span {
-      background: #252937;
-      border-radius: 50%;
-      display: block;
-      height: 9px;
-      margin-right: 7px;
-      width: 9px;
-    }
-  }
-
-  & .video {
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    top: 28px;
-    right: 0;
-  }
-
-  & video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-  }
-
-  & .controls {
-    display: flex;
-    padding: 28px 20px 0;
-
-    @media (max-width: 1119px) {
-      padding: 37px 0 0;
-    }
-  }
-
-  & .control {
-    cursor: pointer;
-    text-align: left;
-    width: 100%;
-
-    &:hover .control-hover {
-      transform: translateY(-4px);
-    }
-
-    & + .control {
-      margin-left: 24px;
-    }
-
-    & .control-hover {
-      transition: 0.3s ease-in-out;
-      transition-property: transform;
-    }
-  }
-
-  & .progress-bar {
-    background-color: var(--gray-2);
-    height: 2px;
-    margin-top: 4px;
-    position: relative;
-    width: 100%;
-
-    & span {
-      background: var(--white);
-      display: block;
-      height: 2px;
-      position: absolute;
-      transition: width linear 0.2s;
-      width: 0;
-    }
-  }
-}

website/components/homepage-hero/index.jsx

@@ -0,0 +1,59 @@
+import s from './style.module.css'
+import Hero from '@hashicorp/react-hero'
+
+export default function HomepageHero({
+  title,
+  description,
+  links,
+  uiVideo,
+  cliVideo,
+  alert,
+  image,
+}) {
+  return (
+    <div className={s.consulHero}>
+      <Hero
+        data={{
+          product: 'consul',
+          alert: alert ? { ...alert, tagColor: 'consul-pink' } : null,
+          title: title,
+          description: description,
+          buttons: links,
+          backgroundTheme: 'light',
+          centered: false,
+          image: image ? { ...image } : null,
+          videos: [
+            ...(uiVideo
+              ? [
+                  {
+                    name: uiVideo.name ?? 'UI',
+                    playbackRate: uiVideo.playbackRate,
+                    src: [
+                      {
+                        srcType: uiVideo.srcType,
+                        url: uiVideo.url,
+                      },
+                    ],
+                  },
+                ]
+              : []),
+            ...(cliVideo
+              ? [
+                  {
+                    name: cliVideo.name ?? 'CLI',
+                    playbackRate: cliVideo.playbackRate,
+                    src: [
+                      {
+                        srcType: cliVideo.srcType,
+                        url: cliVideo.url,
+                      },
+                    ],
+                  },
+                ]
+              : []),
+          ],
+        }}
+      />
+    </div>
+  )
+}

website/components/homepage-hero/index.tsx

@@ -1,19 +0,0 @@
-import TextSplit from '@hashicorp/react-text-split'
-import VideoCarousel from '@hashicorp/react-hero/carousel'
-import s from './style.module.css'
-
-export default function HomepageHero({ title, description, links, videos }) {
-  return (
-    <div className={s.homepageHero}>
-      <TextSplit
-        product="consul"
-        heading={title}
-        content={description}
-        links={links}
-        linkStyle="buttons"
-      >
-        <VideoCarousel videos={videos} />
-      </TextSplit>
-    </div>
-  )
-}

website/components/homepage-hero/style.module.css

@@ -1,66 +1,4 @@
-.homepageHero {
+.consulHero {
-  & :global(.g-text-split) :global(.g-grid-container) {
-    @media (width < 1120px) {
-      flex-direction: column-reverse;
-    }
-
-    & > div {
-      @media (768px < width < 1120px) {
-        width: 40em;
-      }
-
-      &:last-child {
-        @media (width < 1120px) {
-          margin-bottom: 64px;
-          text-align: center;
-        }
-
-        & p {
-          @media (width < 1120px) {
-            margin: 16px auto;
-          }
-        }
-      }
-    }
-
-    /**
-         * HACK:
-         * Overrides the H2 with styling from
-         * our global g-type-display-1 class.
-         *
-         * This was because there's no way to
-         * override the heading in <TextSplit />
-         * with the designed h1 styling.
-         *
-         * TODO:
-         * Address this at the component
-         * level or revert to just using h2
-         * as is default.
-         */
-    & h2 {
-      font-size: 2.125rem;
-      letter-spacing: -0.008em;
-      line-height: 1.265em;
-
-      @media (--medium-up) {
-        font-size: 2.625rem;
-        letter-spacing: -0.01em;
-        line-height: 1.19em;
-      }
-
-      @media (--large) {
-        font-size: 3.125rem;
-        line-height: 1.2em;
-      }
-    }
-
-    & p {
-      max-width: 440px;
-      font-size: 1.25rem;
-      line-height: 1.55em;
-    }
-  }
-
   /* Customize the branding  */
   & :global(.carousel .controls .control) {
     color: var(--gray-2);
@@ -71,8 +9,10 @@
       }
     }
   }
-  & :global(.video-wrapper.is-active) {
+  & :global(.g-hero .carousel) {
-    /* Padding % modifier differs slightly from react-hero to accommodate video heights  */
+    & :global(.video-wrapper.is-active) {
-    padding-top: calc((100% * 0.57) + 28px);
+      /* Padding % modifier differs slightly from react-hero to accommodate video heights  */
+      padding-top: calc((100% * 0.57) + 28px); /* !important; */
+    }
   }
 }

website/package.json

@@ -7,6 +7,7 @@
     "@hashicorp/mktg-global-styles": "3.0.1",
     "@hashicorp/mktg-logos": "1.0.2",
     "@hashicorp/nextjs-scripts": "18.1.0",
+    "@hashicorp/react-alert": "5.0.0",
     "@hashicorp/react-alert-banner": "6.1.1",
     "@hashicorp/react-button": "5.0.1",
     "@hashicorp/react-call-to-action": "3.0.1",
@@ -16,7 +17,7 @@
     "@hashicorp/react-featured-slider": "4.0.0",
     "@hashicorp/react-hashi-stack-menu": "2.0.3",
     "@hashicorp/react-head": "3.0.2",
-    "@hashicorp/react-hero": "7.1.1",
+    "@hashicorp/react-hero": "7.2.1",
     "@hashicorp/react-image": "4.0.1",
     "@hashicorp/react-inline-svg": "6.0.1",
     "@hashicorp/react-learn-callout": "^1.0.2",

website/pages/home/index.jsx

@@ -13,45 +13,38 @@ export default function HomePage({ serviceMeshIngressGatewayCode }) {
   return (
     <div className="p-home">
       <HomepageHero
+        alert={{
+          url: 'https://www.consul.io/docs/ecs',
+          text: 'Consul service mesh now available on ECS',
+          tag: 'Tech Preview',
+        }}
         title="Service Mesh for any runtime or cloud"
         description="Consul automates networking for simple and secure application delivery."
         links={[
           {
-            type: 'none',
+            external: false,
-            text: 'Try HCP Consul',
+            title: 'Try HCP Consul',
             url:
               'https://portal.cloud.hashicorp.com/sign-up?utm_source=docs&utm_content=consul_hero',
           },
           {
-            type: 'none',
+            external: false,
-            text: 'Download',
+            title: 'Download',
             url: '/downloads',
           },
         ]}
-        videos={[
+        uiVideo={{
-          {
+          name: 'UI',
-            name: 'UI',
+          playbackRate: 2,
-            playbackRate: 2,
+          srcType: 'mp4',
-            src: [
+          url: 'https://www.datocms-assets.com/2885/1621637919-consul-ui.mp4',
-              {
+        }}
-                srcType: 'mp4',
+        cliVideo={{
-                url:
+          name: 'CLI',
-                  'https://www.datocms-assets.com/2885/1621637919-consul-ui.mp4',
+          playbackRate: 2,
-              },
+          srcType: 'mp4',
-            ],
+          url: 'https://www.datocms-assets.com/2885/1621637930-consul-cli.mp4',
-          },
+        }}
-          {
-            name: 'CLI',
-            playbackRate: 2,
-            src: [
-              {
-                srcType: 'mp4',
-                url:
-                  'https://www.datocms-assets.com/2885/1621637930-consul-cli.mp4',
-              },
-            ],
-          },
-        ]}
       />
       <StaticDynamicDiagram
         heading="Service-based networking for dynamic infrastructure"

website/pages/style.css

@@ -10,6 +10,8 @@
 }
 
 @import '~@hashicorp/react-alert-banner/style.css';
+@import '~@hashicorp/react-alert/style.css';
+@import '~@hashicorp/react-hero/style.css';
 @import '~@hashicorp/react-button/styles/index.css';
 @import '~@hashicorp/react-callouts/style.css';
 @import '~@hashicorp/react-call-to-action/style.css';
@@ -35,7 +37,6 @@
 @import '../components/cloud-offerings-list/style.css';
 @import '../components/enterprise-comparison/style.css';
 @import '../components/footer/style.css';
-@import '../components/homepage-hero/carousel.css';
 @import '../components/mini-cta/style.css';
 @import '../components/use-cases-layout/style.css';