From d90fd21fdbedb075a4cc196c16156b534daf14a4 Mon Sep 17 00:00:00 2001 From: Dmitry Vinnik | Meta <77028195+dmitryvinn-fb@users.noreply.github.com> Date: Wed, 2 Mar 2022 08:07:19 -0800 Subject: [PATCH] docs: Adding Social Banner in Support of Ukraine (#4397) * Adding Social Banner with Support for Ukraine * Changing spacing the social banner * Fixing lint errors * Remove external link icon from social banner * Add banner for beta site * Add todo * Fix centering on mobile in old site Co-authored-by: Rick Hanlon --- beta/src/components/Layout/Page.tsx | 36 +++++---- beta/src/components/SocialBanner.tsx | 26 +++++++ src/components/LayoutHeader/Header.js | 6 +- .../MarkdownHeader/MarkdownHeader.js | 12 ++- src/components/MarkdownPage/MarkdownPage.js | 6 +- src/components/SocialBanner/SocialBanner.js | 77 +++++++++++++++++++ .../{Banner => SocialBanner}/index.js | 4 +- .../StickyResponsiveSidebar.js | 12 ++- .../SurveyBanner.js} | 10 +-- src/components/SurveyBanner/index.js | 9 +++ src/html.js | 57 +++++++++----- 11 files changed, 199 insertions(+), 56 deletions(-) create mode 100644 beta/src/components/SocialBanner.tsx create mode 100644 src/components/SocialBanner/SocialBanner.js rename src/components/{Banner => SocialBanner}/index.js (54%) rename src/components/{Banner/Banner.js => SurveyBanner/SurveyBanner.js} (96%) create mode 100644 src/components/SurveyBanner/index.js diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx index 2f8ad2f4..e3f9a722 100644 --- a/beta/src/components/Layout/Page.tsx +++ b/beta/src/components/Layout/Page.tsx @@ -8,6 +8,7 @@ import {Nav} from './Nav'; import {RouteItem, SidebarContext} from './useRouteMeta'; import {Sidebar} from './Sidebar'; import {Footer} from './Footer'; +import SocialBanner from '../SocialBanner'; interface PageProps { children: React.ReactNode; routeTree: RouteItem; @@ -15,24 +16,27 @@ interface PageProps { export function Page({routeTree, children}: PageProps) { return ( - - -
-
-
+ <> + + + +
+
+
-
-
-
- {children} -
-
+
+
+
+ {children} +
+
+
-
- - + + + ); } diff --git a/beta/src/components/SocialBanner.tsx b/beta/src/components/SocialBanner.tsx new file mode 100644 index 00000000..b0da4a6b --- /dev/null +++ b/beta/src/components/SocialBanner.tsx @@ -0,0 +1,26 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + */ + +import React from 'react'; +import {ExternalLink} from './ExternalLink'; + +// TODO: Unify with the old site settings. +// Turning this off also requires changing the Page top value to pull up the sidebar. +const bannerText = 'Support Ukraine πŸ‡ΊπŸ‡¦'; +const bannerLink = 'https://opensource.fb.com/support-ukraine'; +const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine.'; + +export default function SocialBanner() { + return ( +
+ {bannerText} + + {bannerLinkText} + +
+ ); +} diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index 82fa2c88..64573ba0 100644 --- a/src/components/LayoutHeader/Header.js +++ b/src/components/LayoutHeader/Header.js @@ -5,7 +5,8 @@ * @flow */ -import Banner from 'components/Banner'; +import SurveyBanner from 'components/SurveyBanner'; +import SocialBanner from 'components/SocialBanner'; import Container from 'components/Container'; import HeaderLink from './HeaderLink'; import {Link} from 'gatsby'; @@ -46,7 +47,8 @@ const Header = ({location}: {location: Location}) => (
- + +
diff --git a/src/components/MarkdownHeader/MarkdownHeader.js b/src/components/MarkdownHeader/MarkdownHeader.js index 0ddc20cc..1c684005 100644 --- a/src/components/MarkdownHeader/MarkdownHeader.js +++ b/src/components/MarkdownHeader/MarkdownHeader.js @@ -17,19 +17,23 @@ const MarkdownHeader = ({title}: {title: string}) => { css={{ color: colors.dark, marginBottom: 0, - marginTop: 'calc(40px + var(--banner-height-normal))', + marginTop: + 'calc(40px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))', ...fonts.header, [media.lessThan('small')]: { - marginTop: 'calc(40px + var(--banner-height-small))', + marginTop: + 'calc(40px + var(--survey-banner-height-small) + var(--social-banner-height-small))', }, [media.size('medium')]: { - marginTop: 'calc(60px + var(--banner-height-normal))', + marginTop: + 'calc(60px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))', }, [media.greaterThan('large')]: { - marginTop: 'calc(80px + var(--banner-height-normal))', + marginTop: + 'calc(80px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))', }, }}> {title} diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js index e297284c..56767421 100644 --- a/src/components/MarkdownPage/MarkdownPage.js +++ b/src/components/MarkdownPage/MarkdownPage.js @@ -75,9 +75,11 @@ const MarkdownPage = ({ position: 'relative', zIndex: 0, '& h1, & h2, & h3, & h4, & h5, & h6': { - scrollMarginTop: 'var(--banner-height-normal)', + scrollMarginTop: + 'calc(var(--survey-banner-height-normal) + var(--social-banner-height-normal))', [media.lessThan('small')]: { - scrollMarginTop: 'var(--banner-height-small)', + scrollMarginTop: + 'calc(var(--survey-banner-height-small) + var(--social-banner-height-small))', }, }, }}> diff --git a/src/components/SocialBanner/SocialBanner.js b/src/components/SocialBanner/SocialBanner.js new file mode 100644 index 00000000..9b3b5e31 --- /dev/null +++ b/src/components/SocialBanner/SocialBanner.js @@ -0,0 +1,77 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * @emails react-core + * @flow + */ + +// $FlowFixMe Update Flow +import React from 'react'; +import {colors, fonts, media} from 'theme'; +import ExternalLinkSvg from 'templates/components/ExternalLinkSvg'; + +const linkProps = { + href: 'https://opensource.fb.com/support-ukraine', + target: '_blank', + rel: 'noopener', +}; + +const bannerText = 'Support Ukraine πŸ‡ΊπŸ‡¦ '; +const bannerLink = 'Help Provide Humanitarian Aid to Ukraine.'; + +export default function SocialBanner() { + return ( +
+
+ + + {bannerText} + + + + {bannerLink} + + +
+
+ ); +} diff --git a/src/components/Banner/index.js b/src/components/SocialBanner/index.js similarity index 54% rename from src/components/Banner/index.js rename to src/components/SocialBanner/index.js index 3e286dd7..f1cb9778 100644 --- a/src/components/Banner/index.js +++ b/src/components/SocialBanner/index.js @@ -4,6 +4,6 @@ * @emails react-core */ -import Banner from './Banner'; +import SocialBanner from './SocialBanner'; -export default Banner; +export default SocialBanner; diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js index 93cea504..8fe30646 100644 --- a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js +++ b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js @@ -43,7 +43,8 @@ class StickyResponsiveSidebar extends Component { render() { const {open} = this.state; const smallScreenSidebarStyles = { - top: 'var(--banner-height-small)', + top: + 'calc(var(--survey-banner-height-small) + var(--social-banner-height-small))', left: 0, bottom: 0, right: 0, @@ -117,18 +118,21 @@ class StickyResponsiveSidebar extends Component { transition: 'transform 0.5s ease', }} css={{ - marginTop: 'calc(60px + var(--banner-height-normal))', + marginTop: + 'calc(60px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))', [media.size('xsmall')]: { marginTop: 40, }, [media.between('small', 'medium')]: { - marginTop: 'calc(20px + var(--banner-height-normal))', + marginTop: + 'calc(20px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))', }, [media.between('medium', 'large')]: { - marginTop: 'calc(50px + var(--banner-height-normal))', + marginTop: + 'calc(50px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))', }, [media.greaterThan('small')]: { diff --git a/src/components/Banner/Banner.js b/src/components/SurveyBanner/SurveyBanner.js similarity index 96% rename from src/components/Banner/Banner.js rename to src/components/SurveyBanner/SurveyBanner.js index 1b2cce6e..ee871afa 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/SurveyBanner/SurveyBanner.js @@ -16,18 +16,18 @@ const linkProps = { rel: 'noopener', }; -export default function Banner() { +export default function SurveyBanner() { return (
@@ -167,7 +167,7 @@ export default function Banner() { }} onClick={() => { // See html.js - window.__dismissBanner(); + window.__dismissSurveyBanner(); }}> { so it needs to stay compatible with older browsers. */ - var activeBanner = null; + var activeSurveyBanner = null; + var socialBanner = null; var snoozeStartDate = null; var today = new Date(); @@ -61,7 +62,7 @@ export default class HTML extends React.Component { return time; } - activeBanner = { + activeSurveyBanner = { storageId: 'reactjs_banner_2021survey', normalHeight: 50, smallHeight: 75, @@ -70,11 +71,11 @@ export default class HTML extends React.Component { snoozeForDays: 7, }; - if (activeBanner) { + if (activeSurveyBanner) { try { - if (localStorage[activeBanner.storageId]) { + if (localStorage[activeSurveyBanner.storageId]) { snoozeStartDate = new Date( - parseInt(localStorage.getItem(activeBanner.storageId), 10), + parseInt(localStorage.getItem(activeSurveyBanner.storageId), 10), ); } } catch (err) { @@ -84,44 +85,58 @@ export default class HTML extends React.Component { 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) + today < new Date(activeSurveyBanner.campaignStartDate) || + today > new Date(activeSurveyBanner.campaignEndDate) ) { - activeBanner = null; + activeSurveyBanner = 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 + addTimes(snoozeStartDate, activeSurveyBanner.snoozeForDays) >= today ) { - activeBanner = null; + activeSurveyBanner = null; } } catch (err) { // Ignore. } } + activeSocialBanner = { + normalHeight: 50, + smallHeight: 75 + }; + function updateStyles() { - if (activeBanner) { - document.documentElement.style.setProperty('--banner-display', 'block'); - document.documentElement.style.setProperty('--banner-height-normal', activeBanner.normalHeight + 'px'); - document.documentElement.style.setProperty('--banner-height-small', activeBanner.smallHeight + 'px'); + if (activeSurveyBanner) { + document.documentElement.style.setProperty('--survey-banner-display', 'block'); + document.documentElement.style.setProperty('--survey-banner-height-normal', activeSurveyBanner.normalHeight + 'px'); + document.documentElement.style.setProperty('--survey-banner-height-small', activeSurveyBanner.smallHeight + 'px'); + } else { + document.documentElement.style.setProperty('--survey-banner-display', 'none'); + document.documentElement.style.setProperty('--survey-banner-height-normal', '0px'); + document.documentElement.style.setProperty('--survey-banner-height-small', '0px'); + } + if (activeSocialBanner) { + document.documentElement.style.setProperty('--social-banner-display', 'block'); + document.documentElement.style.setProperty('--social-banner-height-normal', activeSocialBanner.normalHeight + 'px'); + document.documentElement.style.setProperty('--social-banner-height-small', activeSocialBanner.smallHeight + 'px'); } else { - document.documentElement.style.setProperty('--banner-display', 'none'); - document.documentElement.style.setProperty('--banner-height-normal', '0px'); - document.documentElement.style.setProperty('--banner-height-small', '0px'); + document.documentElement.style.setProperty('--social-banner-display', 'none'); + document.documentElement.style.setProperty('--social-banner-height-normal', '0px'); + document.documentElement.style.setProperty('--social-banner-height-small', '0px'); } } updateStyles(); - window.__dismissBanner = function() { - if (activeBanner) { + window.__dismissSurveyBanner = function() { + if (activeSurveyBanner) { try { - localStorage.setItem(activeBanner.storageId, Date.now().toString()); + localStorage.setItem(activeSurveyBanner.storageId, Date.now().toString()); } catch (err) { // Ignore. } // Don't show for next navigations within the session. - activeBanner = null; + activeSurveyBanner = null; updateStyles(); } };