Skip to content

Commit d90fd21

Browse files
dmitryvinn-fbrickhanlonii
dmitryvinn-fb
and
rickhanlonii
authored
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 <[email protected]>
1 parent 6c95de9 commit d90fd21

File tree

11 files changed

+199
-56
lines changed

11 files changed

+199
-56
lines changed

‎beta/src/components/Layout/Page.tsx

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,35 @@ import {Nav} from './Nav';
88
import {RouteItem, SidebarContext} from './useRouteMeta';
99
import {Sidebar} from './Sidebar';
1010
import {Footer} from './Footer';
11+
import SocialBanner from '../SocialBanner';
1112
interface PageProps {
1213
children: React.ReactNode;
1314
routeTree: RouteItem;
1415
}
1516

1617
export function Page({routeTree, children}: PageProps) {
1718
return (
18-
<MenuProvider>
19-
<SidebarContext.Provider value={routeTree}>
20-
<div className="h-auto lg:h-screen flex flex-row">
21-
<div className="no-bg-scrollbar h-auto lg:h-full lg:overflow-y-scroll fixed flex flex-row lg:flex-col py-0 top-0 left-0 right-0 lg:max-w-xs w-full shadow lg:shadow-none z-50">
22-
<Nav />
23-
<Sidebar />
24-
</div>
19+
<>
20+
<SocialBanner />
21+
<MenuProvider>
22+
<SidebarContext.Provider value={routeTree}>
23+
<div className="h-auto lg:h-screen flex flex-row">
24+
<div className="no-bg-scrollbar h-auto lg:h-full lg:overflow-y-scroll fixed flex flex-row lg:flex-col py-0 top-16 sm:top-10 left-0 right-0 lg:max-w-xs w-full shadow lg:shadow-none z-50">
25+
<Nav />
26+
<Sidebar />
27+
</div>
2528

26-
<div className="flex flex-1 w-full h-full self-stretch">
27-
<div className="w-full min-w-0">
28-
<main className="flex flex-1 self-stretch flex-col items-end justify-around">
29-
{children}
30-
<Footer />
31-
</main>
29+
<div className="flex flex-1 w-full h-full self-stretch">
30+
<div className="w-full min-w-0">
31+
<main className="flex flex-1 self-stretch flex-col items-end justify-around">
32+
{children}
33+
<Footer />
34+
</main>
35+
</div>
3236
</div>
3337
</div>
34-
</div>
35-
</SidebarContext.Provider>
36-
</MenuProvider>
38+
</SidebarContext.Provider>
39+
</MenuProvider>
40+
</>
3741
);
3842
}

‎beta/src/components/SocialBanner.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
*/
5+
6+
import React from 'react';
7+
import {ExternalLink} from './ExternalLink';
8+
9+
// TODO: Unify with the old site settings.
10+
// Turning this off also requires changing the Page top value to pull up the sidebar.
11+
const bannerText = 'Support Ukraine 🇺🇦';
12+
const bannerLink = 'https://opensource.fb.com/support-ukraine';
13+
const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine.';
14+
15+
export default function SocialBanner() {
16+
return (
17+
<div className="w-full bg-gray-100 dark:bg-gray-700 sticky py-2 h-16 sm:h-10 sm:py-0 flex items-center justify-center flex-col sm:flex-row">
18+
{bannerText}
19+
<ExternalLink
20+
className="ml-0 sm:ml-1 text-link dark:text-link-dark hover:underline"
21+
href={bannerLink}>
22+
{bannerLinkText}
23+
</ExternalLink>
24+
</div>
25+
);
26+
}

‎src/components/LayoutHeader/Header.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
* @flow
66
*/
77

8-
import Banner from 'components/Banner';
8+
import SurveyBanner from 'components/SurveyBanner';
9+
import SocialBanner from 'components/SocialBanner';
910
import Container from 'components/Container';
1011
import HeaderLink from './HeaderLink';
1112
import {Link} from 'gatsby';
@@ -46,7 +47,8 @@ const Header = ({location}: {location: Location}) => (
4647
<ContainerWrapper>
4748
<Container>
4849
<div style={{position: 'relative'}}>
49-
<Banner />
50+
<SurveyBanner />
51+
<SocialBanner />
5052
</div>
5153
</Container>
5254
</ContainerWrapper>

‎src/components/MarkdownHeader/MarkdownHeader.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,23 @@ const MarkdownHeader = ({title}: {title: string}) => {
1717
css={{
1818
color: colors.dark,
1919
marginBottom: 0,
20-
marginTop: 'calc(40px + var(--banner-height-normal))',
20+
marginTop:
21+
'calc(40px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
2122
...fonts.header,
2223

2324
[media.lessThan('small')]: {
24-
marginTop: 'calc(40px + var(--banner-height-small))',
25+
marginTop:
26+
'calc(40px + var(--survey-banner-height-small) + var(--social-banner-height-small))',
2527
},
2628

2729
[media.size('medium')]: {
28-
marginTop: 'calc(60px + var(--banner-height-normal))',
30+
marginTop:
31+
'calc(60px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
2932
},
3033

3134
[media.greaterThan('large')]: {
32-
marginTop: 'calc(80px + var(--banner-height-normal))',
35+
marginTop:
36+
'calc(80px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
3337
},
3438
}}>
3539
{title}

‎src/components/MarkdownPage/MarkdownPage.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,11 @@ const MarkdownPage = ({
7575
position: 'relative',
7676
zIndex: 0,
7777
'& h1, & h2, & h3, & h4, & h5, & h6': {
78-
scrollMarginTop: 'var(--banner-height-normal)',
78+
scrollMarginTop:
79+
'calc(var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
7980
[media.lessThan('small')]: {
80-
scrollMarginTop: 'var(--banner-height-small)',
81+
scrollMarginTop:
82+
'calc(var(--survey-banner-height-small) + var(--social-banner-height-small))',
8183
},
8284
},
8385
}}>

‎src/components/SocialBanner/SocialBanner.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* @emails react-core
5+
* @flow
6+
*/
7+
8+
// $FlowFixMe Update Flow
9+
import React from 'react';
10+
import {colors, fonts, media} from 'theme';
11+
import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
12+
13+
const linkProps = {
14+
href: 'https://opensource.fb.com/support-ukraine',
15+
target: '_blank',
16+
rel: 'noopener',
17+
};
18+
19+
const bannerText = 'Support Ukraine 🇺🇦 ';
20+
const bannerLink = 'Help Provide Humanitarian Aid to Ukraine.';
21+
22+
export default function SocialBanner() {
23+
return (
24+
<div
25+
css={{
26+
display: 'var(--social-banner-display)',
27+
height: 'var(--social-banner-height-normal)',
28+
fontSize: 18,
29+
[media.lessThan('large')]: {
30+
fontSize: 16,
31+
},
32+
[media.lessThan('small')]: {
33+
height: 'var(--social-banner-height-small)',
34+
fontSize: 14,
35+
},
36+
}}>
37+
<div
38+
css={{
39+
display: 'flex',
40+
justifyContent: 'center',
41+
alignItems: 'center',
42+
height: '100%',
43+
}}>
44+
<span
45+
css={{
46+
display: 'flex',
47+
[media.lessThan('small')]: {
48+
flexDirection: 'column',
49+
lineHeight: 1.5,
50+
textAlign: 'center',
51+
},
52+
}}>
53+
<span
54+
css={{
55+
marginRight: '0.5rem',
56+
}}>
57+
{bannerText}
58+
</span>
59+
60+
<a
61+
css={{
62+
color: '#ddd',
63+
transition: 'color 200ms ease-out',
64+
':hover': {
65+
color: colors.white,
66+
},
67+
}}
68+
{...linkProps}
69+
target="_blank"
70+
rel="noopener">
71+
<span css={{color: colors.brand}}>{bannerLink}</span>
72+
</a>
73+
</span>
74+
</div>
75+
</div>
76+
);
77+
}

‎src/components/Banner/index.js renamed to ‎src/components/SocialBanner/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
* @emails react-core
55
*/
66

7-
import Banner from './Banner';
7+
import SocialBanner from './SocialBanner';
88

9-
export default Banner;
9+
export default SocialBanner;

‎src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ class StickyResponsiveSidebar extends Component<Props, State> {
4343
render() {
4444
const {open} = this.state;
4545
const smallScreenSidebarStyles = {
46-
top: 'var(--banner-height-small)',
46+
top:
47+
'calc(var(--survey-banner-height-small) + var(--social-banner-height-small))',
4748
left: 0,
4849
bottom: 0,
4950
right: 0,
@@ -117,18 +118,21 @@ class StickyResponsiveSidebar extends Component<Props, State> {
117118
transition: 'transform 0.5s ease',
118119
}}
119120
css={{
120-
marginTop: 'calc(60px + var(--banner-height-normal))',
121+
marginTop:
122+
'calc(60px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
121123

122124
[media.size('xsmall')]: {
123125
marginTop: 40,
124126
},
125127

126128
[media.between('small', 'medium')]: {
127-
marginTop: 'calc(20px + var(--banner-height-normal))',
129+
marginTop:
130+
'calc(20px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
128131
},
129132

130133
[media.between('medium', 'large')]: {
131-
marginTop: 'calc(50px + var(--banner-height-normal))',
134+
marginTop:
135+
'calc(50px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
132136
},
133137

134138
[media.greaterThan('small')]: {

‎src/components/Banner/Banner.js renamed to ‎src/components/SurveyBanner/SurveyBanner.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,18 @@ const linkProps = {
1616
rel: 'noopener',
1717
};
1818

19-
export default function Banner() {
19+
export default function SurveyBanner() {
2020
return (
2121
<div
2222
css={{
23-
display: 'var(--banner-display)',
24-
height: 'var(--banner-height-normal)',
23+
display: 'var(--survey-banner-display)',
24+
height: 'var(--survey-banner-height-normal)',
2525
fontSize: 18,
2626
[media.lessThan('large')]: {
2727
fontSize: 16,
2828
},
2929
[media.lessThan('small')]: {
30-
height: 'var(--banner-height-small)',
30+
height: 'var(--survey-banner-height-small)',
3131
fontSize: 14,
3232
},
3333
}}>
@@ -167,7 +167,7 @@ export default function Banner() {
167167
}}
168168
onClick={() => {
169169
// See html.js
170-
window.__dismissBanner();
170+
window.__dismissSurveyBanner();
171171
}}>
172172
<svg
173173
xmlns="http://www.w3.org/2000/svg"

‎src/components/SurveyBanner/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* @emails react-core
5+
*/
6+
7+
import SurveyBanner from './SurveyBanner';
8+
9+
export default SurveyBanner;

0 commit comments

Comments
 (0)