chore: remove alert banner (carbon-design-system#1968)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
jnm2377 · Nov 10, 2020 · d3d929d · d3d929d
1 parent fa4fe52
commit d3d929d
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "update-browserslist": "npx browserslist-ga"
   },
   "engines": {
-    "node": "10.x || 12.x || 13.x"
+    "node": ">=10"
   },
   "browserslist": [
     "last 1 edge version",

diff --git a/src/gatsby-theme-carbon/components/Layout.js b/src/gatsby-theme-carbon/components/Layout.js
@@ -1,25 +1,17 @@
 /* eslint-disable global-require */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable import/no-unresolved */
-import React, { useLayoutEffect, useEffect, useState } from 'react';
+import React, { useLayoutEffect } from 'react';
 
 import LeftNav from 'gatsby-theme-carbon/src/components/LeftNav';
 import Meta from 'gatsby-theme-carbon/src/components/Meta';
 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 { Close20 } from '@carbon/icons-react';
-import { Button } from 'carbon-components-react';
 
 import 'gatsby-theme-carbon/src/styles/index.scss';
-import {
-  layout,
-  layoutNoBanner,
-  banner,
-  bannerClose,
-  fullName,
-} from '../../styles/Layout.module.scss';
+import { layout } from '../../styles/Layout.module.scss';
 
 const Layout = ({
   children,
@@ -32,7 +24,6 @@ const Layout = ({
   tabs,
 }) => {
   const is404 = children.key === null;
-  const [isBannerVisible, setBannerVisibility] = useState(true);
 
   useLayoutEffect(() => {
     const scroll = require('smooth-scroll')('a[href*="#"]', {
@@ -46,40 +37,14 @@ const Layout = ({
     return scroll.destroy;
   }, [tabs]);
 
-  useEffect(() => {
-    if (localStorage.getItem('isBannerVisible'))
-      setBannerVisibility(localStorage.getItem('isBannerVisible') === 'true');
-  }, [setBannerVisibility]);
-
-  const handleBannerClose = () => {
-    localStorage.setItem('isBannerVisible', false);
-    setBannerVisibility(false);
-  };
-
   return (
-    <div className={isBannerVisible ? layout : layoutNoBanner}>
+    <div className={layout}>
       <Meta
         titleType={titleType}
         pageTitle={pageTitle}
         pageDescription={pageDescription}
         pageKeywords={pageKeywords}
       />
-      {isBannerVisible ? (
-        <div className={banner} role="contentinfo">
-          <span>
-            Make your choice<span className={fullName}>, America</span>.&nbsp;
-            <a href="https://www.vote.org">vote.org</a>
-          </span>
-          <Button
-            className={bannerClose}
-            hasIconOnly
-            renderIcon={Close20}
-            onClick={handleBannerClose}
-            iconDescription="Close the banner"
-          />
-        </div>
-      ) : null}
-
       <Header />
       <Switcher />
       <LeftNav homepage={homepage} is404Page={is404} theme={theme} />

diff --git a/src/styles/Layout.module.scss b/src/styles/Layout.module.scss
@@ -1,25 +1,4 @@
 .layout :global {
-  .bx--header {
-    top: 2rem;
-  }
-  [class*='leftNavWrapper'] {
-    top: 2rem;
-  }
-  [class*='Switcher-module--nav'] {
-    top: 5rem;
-  }
-  [class*='PageTabs-module--tabs-container'] {
-    top: 5rem;
-  }
-  [class*='filter-row'] {
-    top: 9rem;
-  }
-  .color-token-table .bx--sticky-container-visible {
-    top: 9rem;
-  }
-}
-
-.layout-no-banner :global {
   .bx--header {
     top: 0;
   }
@@ -44,38 +23,3 @@
     top: 4rem;
   }
 }
-
-.banner {
-  @include carbon--type-style('heading-01');
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: z('floating');
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 32px;
-  padding-left: $spacing-05;
-  color: $text-04;
-  background: $ibm-color__cyan-80;
-}
-
-.banner-close,
-.banner-close:hover {
-  background: $ibm-color__cyan-80;
-}
-
-.full-name {
-  display: none;
-}
-
-@include carbon--breakpoint('md') {
-  .full-name {
-    display: inline;
-  }
-}
-
-.banner a {
-  color: $text-04;
-  @include carbon--type-style('body-short-01');
-}