Add generic banner infrastructure (#3274)

Author: gaearon

gatsby-browser.js

@@ -8,6 +8,7 @@
 
 const React = require('react');
 const ReactDOM = require('react-dom');
+const {BannerContextManager} = require('components/Banner');
 
 // Import global styles
 require('normalize.css');
@@ -22,3 +23,7 @@ window.ReactDOM = ReactDOM;
 // A stub function is needed because gatsby won't load this file otherwise
 // (https://github.com/gatsbyjs/gatsby/issues/6759)
 exports.onClientEntry = () => {};
+
+exports.wrapRootElement = ({element}) => (
+  <BannerContextManager>{element}</BannerContextManager>
+);

src/components/Banner/Banner.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+// $FlowFixMe Update Flow
+import React, {useContext} from 'react';
+import BannerContext from './BannerContext';
+import {media} from 'theme';
+
+export default function Banner() {
+  const {banner, dismiss} = useContext(BannerContext);
+  if (banner === null) {
+    return null;
+  }
+  return (
+    <div
+      css={{
+        height: banner.normalHeight,
+        fontSize: 20,
+        padding: 20,
+        textAlign: 'center',
+
+        [media.lessThan('small')]: {
+          height: banner.smallHeight,
+        },
+      }}>
+      {banner.content(dismiss)}
+    </div>
+  );
+}

src/components/Banner/BannerContext.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+import React from 'react';
+
+// $FlowFixMe Update Flow
+export default React.createContext({
+  banner: null,
+  dismiss() {},
+});

src/components/Banner/BannerContextManager.js

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+// $FlowFixMe Update Flow
+import React, {useState, useLayoutEffect} from 'react';
+import BannerContext from './BannerContext';
+
+let activeBanner = null;
+
+// Example usage:
+// activeBanner = {
+//   storageId: 'dismiss_banner_blm',
+//   normalHeight: 60,
+//   smallHeight: 80,
+//   content: dismiss => (
+//     <div>
+//       <a href="test">Test</a> <button onClick={dismiss}>close</button>
+//     </div>
+//   ),
+// };
+
+if (activeBanner) {
+  try {
+    if (localStorage.getItem(activeBanner.storageId)) {
+      activeBanner = null;
+    }
+  } catch (err) {
+    // Ignore.
+  }
+}
+
+type Props = {
+  children: mixed,
+};
+
+export default function BannerContextManager({children}: Props) {
+  const [bannerContext, setBannerContext] = useState({
+    banner: null,
+    dismiss() {},
+  });
+
+  // Apply after hydration.
+  useLayoutEffect(() => {
+    if (activeBanner) {
+      let banner = activeBanner;
+      setBannerContext({
+        banner,
+        dismiss: () => {
+          try {
+            localStorage.setItem(banner.storageId, 'true');
+          } catch (err) {
+            // Ignore.
+          }
+          // Don't show for next navigations within the session.
+          activeBanner = null;
+          // Hide immediately.
+          setBannerContext({
+            banner: null,
+            dismiss() {},
+          });
+        },
+      });
+    }
+  }, []);
+
+  return (
+    <BannerContext.Provider value={bannerContext}>
+      {children}
+    </BannerContext.Provider>
+  );
+}

src/components/Banner/index.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * @emails react-core
+ */
+
+import Banner from './Banner';
+import BannerContext from './BannerContext';
+import BannerContextManager from './BannerContextManager';
+
+export default Banner;
+export {BannerContext, BannerContextManager};

src/components/LayoutHeader/Header.js

@@ -5,6 +5,7 @@
  * @flow
  */
 
+import Banner from 'components/Banner';
 import Container from 'components/Container';
 import HeaderLink from './HeaderLink';
 import {Link} from 'gatsby';
@@ -242,6 +243,9 @@ const Header = ({location}: {location: Location}) => (
         </div>
       </div>
     </Container>
+    <Container>
+      <Banner />
+    </Container>
   </header>
 );
 

src/components/MarkdownHeader/MarkdownHeader.js

@@ -6,29 +6,38 @@
  */
 
 import Flex from 'components/Flex';
-import React from 'react';
+// $FlowFixMe Update Flow
+import React, {useContext} from 'react';
+import {BannerContext} from 'components/Banner';
 import {colors, fonts, media} from 'theme';
 
-const MarkdownHeader = ({title}: {title: string}) => (
-  <Flex type="header" halign="space-between" valign="baseline">
-    <h1
-      css={{
-        color: colors.dark,
-        marginBottom: 0,
-        marginTop: 40,
-        ...fonts.header,
+const MarkdownHeader = ({title}: {title: string}) => {
+  const {banner} = useContext(BannerContext);
+  return (
+    <Flex type="header" halign="space-between" valign="baseline">
+      <h1
+        css={{
+          color: colors.dark,
+          marginBottom: 0,
+          marginTop: 40 + (banner ? banner.normalHeight : 0),
+          ...fonts.header,
 
-        [media.size('medium')]: {
-          marginTop: 60,
-        },
+          [media.lessThan('small')]: {
+            marginTop: 40 + (banner ? banner.smallHeight : 0),
+          },
 
-        [media.greaterThan('large')]: {
-          marginTop: 80,
-        },
-      }}>
-      {title}
-    </h1>
-  </Flex>
-);
+          [media.size('medium')]: {
+            marginTop: 60 + (banner ? banner.normalHeight : 0),
+          },
+
+          [media.greaterThan('large')]: {
+            marginTop: 80 + (banner ? banner.normalHeight : 0),
+          },
+        }}>
+        {title}
+      </h1>
+    </Flex>
+  );
+};
 
 export default MarkdownHeader;

src/components/MarkdownPage/MarkdownPage.js

@@ -9,7 +9,9 @@ import Container from 'components/Container';
 import Flex from 'components/Flex';
 import MarkdownHeader from 'components/MarkdownHeader';
 import NavigationFooter from 'templates/components/NavigationFooter';
-import React from 'react';
+// $FlowFixMe Update Flow
+import React, {useContext} from 'react';
+import {BannerContext} from 'components/Banner';
 import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import FeedbackForm from 'components/FeedbackForm';
@@ -56,6 +58,7 @@ const MarkdownPage = ({
   sectionList,
   titlePostfix = '',
 }: Props) => {
+  const {banner} = useContext(BannerContext);
   const hasAuthors = authors.length > 0;
   const titlePrefix = markdownRemark.frontmatter.title || '';
 
@@ -73,6 +76,9 @@ const MarkdownPage = ({
         flex: '1 0 auto',
         position: 'relative',
         zIndex: 0,
+        '& h1, & h2, & h3, & h4, & h5, & h6': {
+          scrollMarginTop: banner ? banner.normalHeight : 0,
+        },
       }}>
       <TitleAndMetaTags
         ogDescription={ogDescription}

src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -7,6 +7,7 @@
 
 import Container from 'components/Container';
 import React, {Component} from 'react';
+import {BannerContext} from 'components/Banner';
 import Sidebar from 'templates/components/Sidebar';
 import {colors, media} from 'theme';
 import ChevronSvg from 'templates/components/ChevronSvg';
@@ -24,6 +25,8 @@ type Props = {
 };
 
 class StickyResponsiveSidebar extends Component<Props, State> {
+  static contextType = BannerContext;
+
   constructor(props: Props) {
     super(props);
 
@@ -42,8 +45,9 @@ class StickyResponsiveSidebar extends Component<Props, State> {
 
   render() {
     const {open} = this.state;
+    const {banner} = this.context;
     const smallScreenSidebarStyles = {
-      top: 0,
+      top: banner ? banner.smallHeight : 0,
       left: 0,
       bottom: 0,
       right: 0,
@@ -117,18 +121,18 @@ class StickyResponsiveSidebar extends Component<Props, State> {
               transition: 'transform 0.5s ease',
             }}
             css={{
-              marginTop: 60,
+              marginTop: 60 + (banner ? banner.normalHeight : 0),
 
               [media.size('xsmall')]: {
                 marginTop: 40,
               },
 
               [media.between('small', 'medium')]: {
-                marginTop: 0,
+                marginTop: 20 + (banner ? banner.normalHeight : 0),
               },
 
               [media.between('medium', 'large')]: {
-                marginTop: 50,
+                marginTop: 50 + (banner ? banner.normalHeight : 0),
               },
 
               [media.greaterThan('small')]: {

src/pages/index.js

@@ -4,6 +4,7 @@
  * @emails react-core
  */
 
+import {BannerContext} from 'components/Banner';
 import ButtonLink from 'components/ButtonLink';
 import Container from 'components/Container';
 import Flex from 'components/Flex';
@@ -20,6 +21,8 @@ import {babelURL} from 'site-constants';
 import logoWhiteSvg from 'icons/logo-white.svg';
 
 class Home extends Component {
+  static contextType = BannerContext;
+
   state = {
     babelLoaded: false,
   };
@@ -40,6 +43,7 @@ class Home extends Component {
   render() {
     const {babelLoaded} = this.state;
     const {data, location} = this.props;
+    const {banner} = this.context;
     const {codeExamples, examples, marketing} = data;
 
     const code = codeExamples.edges.reduce((lookup, {node}) => {
@@ -53,7 +57,11 @@ class Home extends Component {
           title="React – A JavaScript library for building user interfaces"
           canonicalUrl={createCanonicalUrl('/')}
         />
-        <div css={{width: '100%'}}>
+        <div
+          css={{
+            width: '100%',
+            marginTop: banner ? banner.normalHeight : 0,
+          }}>
           <header
             css={{
               backgroundColor: colors.dark,