diff --git a/gatsby-browser.js b/gatsby-browser.js index 913da8da604..a6d4cffe455 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -8,7 +8,6 @@ const React = require('react'); const ReactDOM = require('react-dom'); -const {BannerContextManager} = require('components/Banner'); // Import global styles require('normalize.css'); @@ -23,7 +22,3 @@ 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}) => ( - {element} -); diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index 1c8c8190ead..9c7b2ed68a0 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/Banner/Banner.js @@ -6,28 +6,184 @@ */ // $FlowFixMe Update Flow -import React, {useContext} from 'react'; -import BannerContext from './BannerContext'; -import {media} from 'theme'; +import React from 'react'; +import {colors, fonts, media} from 'theme'; +import ExternalLinkSvg from 'templates/components/ExternalLinkSvg'; + +const linkProps = { + href: 'https://www.surveymonkey.co.uk/r/673TZ7T', + target: '_blank', + rel: 'noopener', +}; export default function Banner() { - const {banner, dismiss} = useContext(BannerContext); - if (banner === null) { - return null; - } return (
- {banner.content(dismiss)} +
+ + + + + + + + + + + + + + + + + + + + + + We want to hear from you! + + + + + Take our 2020 Community Survey! + + + + + +
+ +
+
); } diff --git a/src/components/Banner/BannerContext.js b/src/components/Banner/BannerContext.js deleted file mode 100644 index daa4a2c7cc8..00000000000 --- a/src/components/Banner/BannerContext.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * 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() {}, -}); diff --git a/src/components/Banner/BannerContextManager.js b/src/components/Banner/BannerContextManager.js deleted file mode 100644 index 962a23cc9a7..00000000000 --- a/src/components/Banner/BannerContextManager.js +++ /dev/null @@ -1,106 +0,0 @@ -/** - * 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; -let snoozeStartDate = null; -const today = new Date(); - -function addTimes(date, days) { - const time = new Date(date); - time.setDate(time.getDate() + days); - return time; -} - -// Example usage: -// activeBanner = { -// storageId: 'react_banner_XX', -// normalHeight: 60, -// smallHeight: 80, -// campaignStartDate: '2020-09-20Z', // the Z is for UTC -// campaignEndDate: '2020-10-31Z', // the Z is for UTC -// snoozeForDays: 7, -// content: dismiss => ( -//
-// Test -//
-// ), -// }; - -if (activeBanner) { - try { - if (localStorage[activeBanner.storageId]) { - snoozeStartDate = new Date( - parseInt(localStorage.getItem(activeBanner.storageId), 10), - ); - } - } catch (err) { - // Ignore. - } - - try { - // If it's too early or long past the campaign, don't show the banner: - if ( - today < new Date(activeBanner.campaignStartDate) || - today > new Date(activeBanner.campaignEndDate) - ) { - activeBanner = null; - // If we're in the campaign window, but the snooze has been set and it hasn't expired: - } else if ( - snoozeStartDate && - addTimes(snoozeStartDate, activeBanner.snoozeForDays) >= today - ) { - 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, Date.now().toString()); - } catch (err) { - // Ignore. - } - // Don't show for next navigations within the session. - activeBanner = null; - // Hide immediately. - setBannerContext({ - banner: null, - dismiss() {}, - }); - }, - }); - } - }, []); - - return ( - - {children} - - ); -} diff --git a/src/components/Banner/index.js b/src/components/Banner/index.js index 2371d99a1e3..3e286dd7418 100644 --- a/src/components/Banner/index.js +++ b/src/components/Banner/index.js @@ -5,8 +5,5 @@ */ import Banner from './Banner'; -import BannerContext from './BannerContext'; -import BannerContextManager from './BannerContextManager'; export default Banner; -export {BannerContext, BannerContextManager}; diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index 7dfb93449a1..82fa2c888be 100644 --- a/src/components/LayoutHeader/Header.js +++ b/src/components/LayoutHeader/Header.js @@ -20,6 +20,15 @@ import navHeader from '../../../content/headerNav.yml'; import logoSvg from 'icons/logo.svg'; +const ContainerWrapper = ({children}) => ( +
+ {children} +
+); + const Header = ({location}: {location: Location}) => (
( display: 'none', }, }}> + + +
+ +
+ +
(
- - -
); diff --git a/src/components/MarkdownHeader/MarkdownHeader.js b/src/components/MarkdownHeader/MarkdownHeader.js index 38ba716fca3..0ddc20cc8f8 100644 --- a/src/components/MarkdownHeader/MarkdownHeader.js +++ b/src/components/MarkdownHeader/MarkdownHeader.js @@ -7,31 +7,29 @@ import Flex from 'components/Flex'; // $FlowFixMe Update Flow -import React, {useContext} from 'react'; -import {BannerContext} from 'components/Banner'; +import React from 'react'; import {colors, fonts, media} from 'theme'; const MarkdownHeader = ({title}: {title: string}) => { - const {banner} = useContext(BannerContext); return (

{title} diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js index daae170f529..ab1f3af3aa0 100644 --- a/src/components/MarkdownPage/MarkdownPage.js +++ b/src/components/MarkdownPage/MarkdownPage.js @@ -10,8 +10,7 @@ import Flex from 'components/Flex'; import MarkdownHeader from 'components/MarkdownHeader'; import NavigationFooter from 'templates/components/NavigationFooter'; // $FlowFixMe Update Flow -import React, {useContext} from 'react'; -import {BannerContext} from 'components/Banner'; +import React from 'react'; import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar'; import TitleAndMetaTags from 'components/TitleAndMetaTags'; import FeedbackForm from 'components/FeedbackForm'; @@ -19,7 +18,7 @@ import findSectionForPath from 'utils/findSectionForPath'; import toCommaSeparatedList from 'utils/toCommaSeparatedList'; import {sharedStyles} from 'theme'; import createCanonicalUrl from 'utils/createCanonicalUrl'; -import {colors} from 'theme'; +import {colors, media} from 'theme'; import type {Node} from 'types'; @@ -58,7 +57,6 @@ const MarkdownPage = ({ sectionList, titlePostfix = '', }: Props) => { - const {banner} = useContext(BannerContext); const hasAuthors = authors.length > 0; const titlePrefix = markdownRemark.frontmatter.title || ''; @@ -77,7 +75,10 @@ const MarkdownPage = ({ position: 'relative', zIndex: 0, '& h1, & h2, & h3, & h4, & h5, & h6': { - scrollMarginTop: banner ? banner.normalHeight : 0, + scrollMarginTop: 'var(--banner-height-normal)', + [media.lessThan('small')]: { + scrollMarginTop: 'var(--banner-height-small)', + }, }, }}> { - static contextType = BannerContext; - constructor(props: Props) { super(props); @@ -45,9 +42,8 @@ class StickyResponsiveSidebar extends Component { render() { const {open} = this.state; - const {banner} = this.context; const smallScreenSidebarStyles = { - top: banner ? banner.smallHeight : 0, + top: 'var(--banner-height-small)', left: 0, bottom: 0, right: 0, @@ -121,18 +117,18 @@ class StickyResponsiveSidebar extends Component { transition: 'transform 0.5s ease', }} css={{ - marginTop: 60 + (banner ? banner.normalHeight : 0), + marginTop: 'calc(60px + var(--banner-height-normal))', [media.size('xsmall')]: { marginTop: 40, }, [media.between('small', 'medium')]: { - marginTop: 20 + (banner ? banner.normalHeight : 0), + marginTop: 'calc(20px + var(--banner-height-normal))', }, [media.between('medium', 'large')]: { - marginTop: 50 + (banner ? banner.normalHeight : 0), + marginTop: 'calc(50px + var(--banner-height-normal))', }, [media.greaterThan('small')]: { diff --git a/src/html.js b/src/html.js index 9683e820904..7e7834d69e8 100644 --- a/src/html.js +++ b/src/html.js @@ -41,6 +41,94 @@ export default class HTML extends React.Component { {this.props.headComponents} +