feat: add crosslink banner to carbon platform on homepage (#3185)

* feat: add crosslink banner to carbon platform on homepage

* fix: remove calc from sass

* Update Banner.module.scss

* Update Banner.module.scss

* Update Banner.js

* Update Banner.module.scss

* Update Banner.js

* Update src/components/Banner/Banner.js

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

src/components/Banner/Banner.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+
+import {
+  banner,
+  bannerText,
+  bannerHeading,
+  bannerDetails,
+  buttonBanner,
+} from './Banner.module.scss';
+
+const Banner = () => {
+  return (
+    <div aria-label="banner" className={banner}>
+      <p className={bannerText}>
+        <strong className={bannerHeading}>
+          A new web experience is coming!
+        </strong>
+        <span className={bannerDetails}>
+          The v1 Carbon platform is now available in public beta.
+        </span>
+      </p>
+      <Button
+        href="https://next.carbondesignsystem.com"
+        className={buttonBanner}
+        kind="ghost"
+        renderIcon={ArrowRight}>
+        Try the Carbon Platform
+      </Button>
+    </div>
+  );
+};
+
+export default Banner;

src/components/Banner/Banner.module.scss

@@ -0,0 +1,56 @@
+// position header, left nav and content with banner
+.banner + :global(.cds--header),
+.banner + header + nav + div[class*='leftNavWrapper'],
+.banner + header + nav + div + span + div + #main-content {
+  top: rem(48px);
+}
+
+// banner styles
+.banner {
+  position: fixed;
+  top: 0;
+  z-index: 99999;
+  display: flex;
+  width: 100%;
+  height: rem(48px);
+  justify-content: space-between;
+
+  background: $blue-70;
+  color: $text-on-color;
+}
+
+.banner-text {
+  display: none;
+
+  @include breakpoint('md') {
+    @include type-style('body-short-01');
+
+    display: block;
+    padding: rem(15px) 0 0 $spacing-05;
+  }
+}
+
+.banner-details {
+  display: none;
+
+  @include breakpoint('lg') {
+    display: inline;
+    padding-left: $spacing-03;
+  }
+}
+
+// override carbon button styles
+.banner :global(.cds--btn--ghost).button-banner {
+  width: 100%;
+  max-width: 100%;
+  color: $text-on-color;
+
+  @include breakpoint('md') {
+    width: auto;
+  }
+
+  &:hover {
+    background: $blue-70-hover;
+    color: $text-on-color;
+  }
+}

src/components/Banner/index.js

@@ -0,0 +1,3 @@
+import Banner from './Banner';
+
+export default Banner;

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

@@ -7,6 +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 'gatsby-theme-carbon/src/styles/index.scss';
 import { layout } from '../../styles/Layout.module.scss';
@@ -43,6 +44,7 @@ const Layout = ({
         pageDescription={pageDescription}
         pageKeywords={pageKeywords}
       />
+      {homepage && <Banner />}
       <Header />
       <Switcher />
       <LeftNav homepage={homepage} is404Page={is404} theme={theme} />