Add shouldShow prop to BannerNotification [Fixes #1768]

ethereum · Nov 13, 2020 · fef7062 · fef7062
1 parent 9fbc056
commit fef7062
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/src/components/BannerNotification.js b/src/components/BannerNotification.js
@@ -5,6 +5,7 @@ import styled from "styled-components"
 // parent element should have `position: relative;`
 const Banner = styled.div`
   position: absolute;
+  display: ${(props) => (props.shouldShow ? `block` : `none`)};
   width: 100%;
   background-color: ${(props) => props.theme.colors.primary};
   color: ${(props) => props.theme.colors.background};
@@ -20,8 +21,12 @@ const Banner = styled.div`
   }
 `
 
-const BannerNotification = ({ children, className }) => {
-  return <Banner className={className}>{children}</Banner>
+const BannerNotification = ({ children, className, shouldShow }) => {
+  return (
+    <Banner shouldShow={shouldShow} className={className}>
+      {children}
+    </Banner>
+  )
 }
 
 export default BannerNotification
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -144,15 +144,13 @@ class Layout extends React.Component {
                 isDarkTheme={this.state.isDarkTheme}
                 path={path}
               />
-              {shouldShowBanner && (
-                <StyledBannerNotification>
-                  Staking has arrived! If you're looking to stake your ETH,{" "}
-                  <Link to="/eth2/deposit-contract/">
-                    confirm the deposit contract address
-                  </Link>
-                  .
-                </StyledBannerNotification>
-              )}
+              <StyledBannerNotification shouldShow={shouldShowBanner}>
+                Staking has arrived! If you're looking to stake your ETH,{" "}
+                <Link to="/eth2/deposit-contract/">
+                  confirm the deposit contract address
+                </Link>
+                .
+              </StyledBannerNotification>
               <MainContainer
                 shouldShowBanner={shouldShowBanner}
                 shouldShowSubNav={shouldShowSubNav}

diff --git a/src/templates/docs.js b/src/templates/docs.js
@@ -199,12 +199,10 @@ const DocsPage = ({ data, pageContext }) => {
         title={mdx.frontmatter.title}
         description={mdx.frontmatter.description}
       />
-      {isPageIncomplete && (
-        <BannerNotification>
-          This page is incomplete. If you’re an expert on the topic, please edit
-          this page and sprinkle it with your wisdom.
-        </BannerNotification>
-      )}
+      <BannerNotification shouldShow={isPageIncomplete}>
+        This page is incomplete. If you’re an expert on the topic, please edit
+        this page and sprinkle it with your wisdom.
+      </BannerNotification>
       <ContentContainer isPageIncomplete={isPageIncomplete}>
         <H1 id="top">{mdx.frontmatter.title}</H1>
         <Contributors gitCommits={gitCommits} editPath={absoluteEditPath} />