feat(header): add survey banner (carbon-design-system#4591)

Author: tay1orjones

src/components/Banner/Banner.js

@@ -5,7 +5,7 @@ import { ArrowRight } from '@carbon/react/icons';
 import {
   banner,
   bannerText,
-  bannerHeading,
+  // bannerHeading,
   bannerDetails,
   buttonBanner,
 } from './Banner.module.scss';
@@ -14,19 +14,20 @@ const Banner = () => {
   return (
     <div aria-label="banner" className={banner}>
       <p className={bannerText}>
-        <strong className={bannerHeading}>
-          A new web experience is coming!
-        </strong>
+        {/* <strong className={bannerHeading}>
+          This is the bolded text
+        </strong> */}
         <span className={bannerDetails}>
-          The v1 Carbon platform is now available in public beta.
+          Help improve the Carbon website experience by taking our two minute
+          survey.
         </span>
       </p>
       <Button
-        href="https://next.carbondesignsystem.com"
+        href="https://your.feedback.ibm.com/jfe/form/SV_eQVJIwXK3hlrdhc"
         className={buttonBanner}
         kind="ghost"
         renderIcon={ArrowRight}>
-        Try the Carbon Platform
+        Take the survey
       </Button>
     </div>
   );

src/components/Banner/Banner.module.scss

@@ -1,5 +1,5 @@
 // position header, left nav and content with banner
-.banner + :global(.cds--header),
+.banner + :global(header.cds--header),
 .banner + header + nav + div[class*='leftNavWrapper'],
 .banner + header + nav + div + span + div + #main-content {
   top: rem(48px);

src/gatsby-theme-carbon/components/Layout.js

@@ -7,7 +7,7 @@ import Header from 'gatsby-theme-carbon/src/components/Header';
 import { Switcher } from 'gatsby-theme-carbon/src/components/Switcher';
 import Footer from 'gatsby-theme-carbon/src/components/Footer';
 import Container from 'gatsby-theme-carbon/src/components/Container';
-// import Banner from '../../components/Banner';
+import Banner from '../../components/Banner';
 
 import 'gatsby-theme-carbon/src/styles/index.scss';
 import { layout } from '../../styles/Layout.module.scss';
@@ -44,7 +44,7 @@ const Layout = ({
         pageDescription={pageDescription}
         pageKeywords={pageKeywords}
       />
-      {/* {homepage && <Banner />} */}
+      {homepage && <Banner />}
       <Header />
       <Switcher />
       <LeftNav homepage={homepage} is404Page={is404} theme={theme} />