Skip to content

Commit aef8fb3

Browse files
rachelnaborsgaearonBrian Vaughn
authored
2020 Community survey banner (reactjs#3289)
* Adding survey banner for community * fixing up a kludge for the banner, making the graphic look less like swearing * updating banner start date * make the banner smaller * Close as a button * fixes * Remove the arrow * Updating image sizes, making the arrow do a little slide * Revert "Remove the arrow" This reverts commit 3dddae8. * Remove extra space * Legibility tweaks * Fixing border radius * Making close button a real button * Remove trailing space, plz don't re-add, Prettier * Centering that banner * Modified Survey header styles * Inline Banner content at the usage site * Fix flash by using CSS variables Co-authored-by: Dan Abramov <[email protected]> Co-authored-by: Brian Vaughn <[email protected]>
1 parent 773500c commit aef8fb3

File tree

12 files changed

+295
-170
lines changed

12 files changed

+295
-170
lines changed

‎gatsby-browser.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88

99
const React = require('react');
1010
const ReactDOM = require('react-dom');
11-
const {BannerContextManager} = require('components/Banner');
1211

1312
// Import global styles
1413
require('normalize.css');
@@ -23,7 +22,3 @@ window.ReactDOM = ReactDOM;
2322
// A stub function is needed because gatsby won't load this file otherwise
2423
// (https://github.com/gatsbyjs/gatsby/issues/6759)
2524
exports.onClientEntry = () => {};
26-
27-
exports.wrapRootElement = ({element}) => (
28-
<BannerContextManager>{element}</BannerContextManager>
29-
);

‎src/components/Banner/Banner.js

Lines changed: 170 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,184 @@
66
*/
77

88
// $FlowFixMe Update Flow
9-
import React, {useContext} from 'react';
10-
import BannerContext from './BannerContext';
11-
import {media} from 'theme';
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://www.surveymonkey.co.uk/r/673TZ7T',
15+
target: '_blank',
16+
rel: 'noopener',
17+
};
1218

1319
export default function Banner() {
14-
const {banner, dismiss} = useContext(BannerContext);
15-
if (banner === null) {
16-
return null;
17-
}
1820
return (
1921
<div
2022
css={{
21-
height: banner.normalHeight,
22-
fontSize: 20,
23-
padding: 20,
24-
textAlign: 'center',
25-
23+
display: 'var(--banner-display)',
24+
height: 'var(--banner-height-normal)',
25+
fontSize: 18,
26+
[media.lessThan('large')]: {
27+
fontSize: 16,
28+
},
2629
[media.lessThan('small')]: {
27-
height: banner.smallHeight,
30+
height: 'var(--banner-height-small)',
31+
fontSize: 14,
2832
},
2933
}}>
30-
{banner.content(dismiss)}
34+
<div
35+
css={{
36+
display: 'flex',
37+
justifyContent: 'center',
38+
alignItems: 'center',
39+
height: '100%',
40+
}}>
41+
<a
42+
css={{
43+
display: 'flex',
44+
marginRight: '1rem',
45+
[media.lessThan('medium')]: {
46+
display: 'none',
47+
},
48+
}}
49+
{...linkProps}>
50+
<svg
51+
xmlns="http://www.w3.org/2000/svg"
52+
css={{
53+
width: 'auto',
54+
height: 35,
55+
}}
56+
preserveAspectRatio="xMidYMid meet"
57+
viewBox="0 0 134 58">
58+
<g>
59+
<path
60+
fill={colors.white}
61+
d="m60.25002,1.61335l32.24974,1.38664l25.24993,5.24999l10.99997,7.99998l3.74999,8.24998l-1.5,8.24998l-6.24998,5.24999l-10.49997,5.24999l-8.99998,2.24999l0.25,2.99999l4.99999,3.74999c0.00018,0.11336 8.50016,3.11335 8.50016,3.11335c0,0 -11.49997,0.5 -11.50015,0.38664c0.00018,0.11336 -13.24979,-1.38664 -13.24996,-1.5c0.00018,0.11336 -4.49981,-2.63663 -4.49999,-2.74999c0.00018,0.11336 -2.74981,-1.63664 -2.74999,-1.75c0.00018,0.11336 -7.9998,1.36336 -7.99998,1.25c0.00018,0.11336 -25.24976,1.61336 -25.24993,1.5c0.00018,0.11336 -21.99976,-1.38664 -21.99994,-1.5c0.00018,0.11336 -17.74978,-3.38663 -17.74995,-3.49999c0.00018,0.11336 -9.7498,-6.38662 -9.74997,-6.49998c0.00018,0.11336 -3.24982,-6.38662 -3.24999,-6.49998c0.00018,0.11336 2.00017,-9.88662 1.99999,-9.99997c0.00018,0.11336 7.75016,-9.38662 7.74998,-9.49997c0.00018,0.11336 19.75012,-9.38662 19.74995,-9.49997c0.00018,0.11336 23.50012,-4.13663 23.49994,-4.24999"
62+
/>
63+
64+
<rect
65+
transform="rotate(-5 37.25019073486327,27.62502670288089)"
66+
height="18"
67+
width="18"
68+
y="18.62503"
69+
x="25.7502"
70+
fill="#ccc"
71+
/>
72+
<rect
73+
transform="rotate(-5 66.00012207031251,28.125024795532198)"
74+
height="18"
75+
width="18"
76+
y="19.37502"
77+
x="56.00012"
78+
fill="#ccc"
79+
/>
80+
<rect
81+
transform="rotate(-5 91.75005340576159,25.875030517578093)"
82+
height="18"
83+
width="18"
84+
y="19"
85+
x="85.00004"
86+
fill="#ccc"
87+
/>
88+
89+
<g transform="translate(0,58) scale(0.10000000149011612,-0.10000000149011612) ">
90+
<path
91+
fill={colors.white}
92+
d="m570,574c-14,-2 -65,-9 -115,-15c-139,-18 -275,-69 -356,-134c-75,-60 -115,-163 -88,-226c41,-99 236,-151 564,-150c122,1 210,6 246,14c51,13 57,12 67,-4c28,-44 237,-67 326,-35l40,14l-45,6c-86,13 -100,18 -130,44c-29,24 -30,27 -13,34c18,8 18,8 0,5c-53,-6 -4,-72 69,-93c49,-14 49,-14 -51,-9c-117,7 -159,16 -189,45c-18,17 -26,18 -56,9c-18,-5 -114,-13 -211,-16c-165,-5 -197,-3 -363,23c-207,34 -284,116 -224,241c57,119 236,203 479,225c197,18 545,-20 671,-74c110,-47 157,-153 104,-234c-14,-22 -97,-73 -150,-92c-16,-6 -23,-11 -15,-11c25,-2 133,54 162,84c59,59 56,147 -9,211c-33,34 -97,68 -146,79c-124,27 -166,35 -257,44c-124,12 -275,19 -310,15z"
93+
/>
94+
<path
95+
fill={colors.text}
96+
d="m377.00009,403.25c-1,-10 -16,-47 -34,-82l-33,-63l-21,36c-24,40 -29,42 -56,21c-21,-16 -18,-22 43,-90l33,-38l19,24c10,13 35,49 56,79c20,30 48,67 62,82c13,15 23,30 20,32c-2,2 -23,7 -46,11c-38,6 -43,4 -43,-12z"
97+
/>
98+
<path
99+
fill={colors.text}
100+
d="m674.7493,403c-1,-10 -16,-47 -34,-82l-33,-63l-21,36c-24,40 -29,42 -56,21c-21,-16 -18,-22 43,-90l33,-38l19,24c10,13 35,49 56,79c20,30 48,67 62,82c13,15 23,30 20,32c-2,2 -23,7 -46,11c-38,6 -43,4 -43,-12z"
101+
/>
102+
<path
103+
fill={colors.text}
104+
d="m965.49854,402.99999c-1,-10 -16,-47 -34,-82l-33,-63l-21,36c-24,40 -29,42 -56,21c-21,-16 -18,-22 43,-90l33,-38l19,24c10,13 35,49 56,79c20,30 48,67 62,82c13,15 23,30 20,32c-2,2 -23,7 -46,11c-38,6 -43,4 -43,-12z"
105+
/>
106+
</g>
107+
</g>
108+
</svg>
109+
</a>
110+
111+
<span
112+
css={{
113+
display: 'flex',
114+
[media.lessThan('small')]: {
115+
flexDirection: 'column',
116+
lineHeight: 1.5,
117+
},
118+
}}>
119+
<span
120+
css={{
121+
marginRight: '0.5rem',
122+
}}>
123+
We want to hear from you!
124+
</span>
125+
126+
<a
127+
css={{
128+
color: '#ddd',
129+
transition: 'color 200ms ease-out',
130+
':hover': {
131+
color: colors.white,
132+
},
133+
}}
134+
{...linkProps}
135+
target="_blank"
136+
rel="noopener">
137+
<span css={{color: colors.brand}}>
138+
Take our 2020 Community Survey!
139+
</span>
140+
<ExternalLinkSvg
141+
cssProps={{
142+
verticalAlign: -2,
143+
display: 'inline-block',
144+
marginLeft: '0.5rem',
145+
color: 'inherit',
146+
}}
147+
/>
148+
</a>
149+
</span>
150+
151+
<div css={{display: 'flex', justifyContent: 'flex-end', flexGrow: 1}}>
152+
<button
153+
css={{
154+
background: 'transparent',
155+
padding: '0.25rem 0.5rem',
156+
borderRadius: '0.25rem',
157+
border: 0,
158+
backgroundColor: 'hsl(222, 14%, 30%)',
159+
color: '#ddd',
160+
cursor: 'pointer',
161+
transition: 'color 200ms ease-out',
162+
':hover': {
163+
color: colors.white,
164+
},
165+
marginLeft: '2rem',
166+
fontSize: fonts.small.fontSize,
167+
}}
168+
onClick={() => {
169+
// See html.js
170+
window.__dismissBanner();
171+
}}>
172+
<svg
173+
xmlns="http://www.w3.org/2000/svg"
174+
css={{
175+
width: 10,
176+
height: 10,
177+
}}
178+
viewBox="0 0 5.8 5.8"
179+
alt="close">
180+
<path
181+
d="M5.8 5.16L3.54 2.9 5.8.65 5.16 0 2.9 2.26.65 0 0 .65 2.26 2.9 0 5.16l.65.64L2.9 3.54 5.16 5.8l.64-.64z"
182+
fill="currentColor"></path>
183+
</svg>
184+
</button>
185+
</div>
186+
</div>
31187
</div>
32188
);
33189
}

‎src/components/Banner/BannerContext.js

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/Banner/BannerContextManager.js

Lines changed: 0 additions & 106 deletions
This file was deleted.

‎src/components/Banner/index.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,5 @@
55
*/
66

77
import Banner from './Banner';
8-
import BannerContext from './BannerContext';
9-
import BannerContextManager from './BannerContextManager';
108

119
export default Banner;
12-
export {BannerContext, BannerContextManager};

‎src/components/LayoutHeader/Header.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,15 @@ import navHeader from '../../../content/headerNav.yml';
2020

2121
import logoSvg from 'icons/logo.svg';
2222

23+
const ContainerWrapper = ({children}) => (
24+
<div
25+
css={{
26+
backgroundColor: 'hsl(222, 14%, 10%)',
27+
}}>
28+
{children}
29+
</div>
30+
);
31+
2332
const Header = ({location}: {location: Location}) => (
2433
<header
2534
css={{
@@ -34,6 +43,13 @@ const Header = ({location}: {location: Location}) => (
3443
display: 'none',
3544
},
3645
}}>
46+
<ContainerWrapper>
47+
<Container>
48+
<div style={{position: 'relative'}}>
49+
<Banner />
50+
</div>
51+
</Container>
52+
</ContainerWrapper>
3753
<Container>
3854
<div
3955
css={{
@@ -243,9 +259,6 @@ const Header = ({location}: {location: Location}) => (
243259
</div>
244260
</div>
245261
</Container>
246-
<Container>
247-
<Banner />
248-
</Container>
249262
</header>
250263
);
251264

0 commit comments

Comments
 (0)