Skip to content

2020 Community survey banner #3289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Oct 1, 2020
Merged

2020 Community survey banner #3289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
7917e9c
Adding survey banner for community
rachelnabors Sep 28, 2020
6f5d7d7
fixing up a kludge for the banner, making the graphic look less like …
rachelnabors Sep 29, 2020
9978fcb
updating banner start date
rachelnabors Sep 29, 2020
d9498e7
make the banner smaller
rachelnabors Sep 29, 2020
998bf74
Close as a button
rachelnabors Sep 29, 2020
d0cbb1f
fixes
gaearon Sep 29, 2020
3dddae8
Remove the arrow
gaearon Sep 29, 2020
e6c9660
Updating image sizes, making the arrow do a little slide
rachelnabors Sep 29, 2020
6bb6bb4
Revert "Remove the arrow"
gaearon Sep 29, 2020
0094e1e
Remove extra space
gaearon Sep 29, 2020
7de20e9
Legibility tweaks
gaearon Sep 29, 2020
a51ec6b
resolving conflict
rachelnabors Sep 29, 2020
1c7c146
Fixing border radius
rachelnabors Sep 29, 2020
fc1abe9
Making close button a real button
rachelnabors Sep 29, 2020
5097278
Remove trailing space, plz don't re-add, Prettier
rachelnabors Sep 29, 2020
572543e
Centering that banner
rachelnabors Sep 30, 2020
352e3cd
Modified Survey header styles
Sep 30, 2020
7c638fe
Inline Banner content at the usage site
gaearon Oct 1, 2020
1eec972
Fix flash by using CSS variables
gaearon Oct 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions gatsby-browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

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

// Import global styles
require('normalize.css');
Expand All @@ -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}) => (
<BannerContextManager>{element}</BannerContextManager>
);
184 changes: 170 additions & 14 deletions src/components/Banner/Banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div
css={{
height: banner.normalHeight,
fontSize: 20,
padding: 20,
textAlign: 'center',

display: 'var(--banner-display)',
height: 'var(--banner-height-normal)',
fontSize: 18,
[media.lessThan('large')]: {
fontSize: 16,
},
[media.lessThan('small')]: {
height: banner.smallHeight,
height: 'var(--banner-height-small)',
fontSize: 14,
},
}}>
{banner.content(dismiss)}
<div
css={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
}}>
<a
css={{
display: 'flex',
marginRight: '1rem',
[media.lessThan('medium')]: {
display: 'none',
},
}}
{...linkProps}>
<svg
xmlns="http://www.w3.org/2000/svg"
css={{
width: 'auto',
height: 35,
}}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 134 58">
<g>
<path
fill={colors.white}
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"
/>

<rect
transform="rotate(-5 37.25019073486327,27.62502670288089)"
height="18"
width="18"
y="18.62503"
x="25.7502"
fill="#ccc"
/>
<rect
transform="rotate(-5 66.00012207031251,28.125024795532198)"
height="18"
width="18"
y="19.37502"
x="56.00012"
fill="#ccc"
/>
<rect
transform="rotate(-5 91.75005340576159,25.875030517578093)"
height="18"
width="18"
y="19"
x="85.00004"
fill="#ccc"
/>

<g transform="translate(0,58) scale(0.10000000149011612,-0.10000000149011612) ">
<path
fill={colors.white}
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"
/>
<path
fill={colors.text}
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"
/>
<path
fill={colors.text}
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"
/>
<path
fill={colors.text}
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"
/>
</g>
</g>
</svg>
</a>

<span
css={{
display: 'flex',
[media.lessThan('small')]: {
flexDirection: 'column',
lineHeight: 1.5,
},
}}>
<span
css={{
marginRight: '0.5rem',
}}>
We want to hear from you!
</span>

<a
css={{
color: '#ddd',
transition: 'color 200ms ease-out',
':hover': {
color: colors.white,
},
}}
{...linkProps}
target="_blank"
rel="noopener">
<span css={{color: colors.brand}}>
Take our 2020 Community Survey!
</span>
<ExternalLinkSvg
cssProps={{
verticalAlign: -2,
display: 'inline-block',
marginLeft: '0.5rem',
color: 'inherit',
}}
/>
</a>
</span>

<div css={{display: 'flex', justifyContent: 'flex-end', flexGrow: 1}}>
<button
css={{
background: 'transparent',
padding: '0.25rem 0.5rem',
borderRadius: '0.25rem',
border: 0,
backgroundColor: 'hsl(222, 14%, 30%)',
color: '#ddd',
cursor: 'pointer',
transition: 'color 200ms ease-out',
':hover': {
color: colors.white,
},
marginLeft: '2rem',
fontSize: fonts.small.fontSize,
}}
onClick={() => {
// See html.js
window.__dismissBanner();
}}>
<svg
xmlns="http://www.w3.org/2000/svg"
css={{
width: 10,
height: 10,
}}
viewBox="0 0 5.8 5.8"
alt="close">
<path
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"
fill="currentColor"></path>
</svg>
</button>
</div>
</div>
</div>
);
}
14 changes: 0 additions & 14 deletions src/components/Banner/BannerContext.js
View file
Open in desktop

This file was deleted.

106 changes: 0 additions & 106 deletions src/components/Banner/BannerContextManager.js
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/components/Banner/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,5 @@
*/

import Banner from './Banner';
import BannerContext from './BannerContext';
import BannerContextManager from './BannerContextManager';

export default Banner;
export {BannerContext, BannerContextManager};
19 changes: 16 additions & 3 deletions src/components/LayoutHeader/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,15 @@ import navHeader from '../../../content/headerNav.yml';

import logoSvg from 'icons/logo.svg';

const ContainerWrapper = ({children}) => (
<div
css={{
backgroundColor: 'hsl(222, 14%, 10%)',
}}>
{children}
</div>
);

const Header = ({location}: {location: Location}) => (
<header
css={{
Expand All @@ -34,6 +43,13 @@ const Header = ({location}: {location: Location}) => (
display: 'none',
},
}}>
<ContainerWrapper>
<Container>
<div style={{position: 'relative'}}>
<Banner />
</div>
</Container>
</ContainerWrapper>
<Container>
<div
css={{
Expand Down Expand Up @@ -243,9 +259,6 @@ const Header = ({location}: {location: Location}) => (
</div>
</div>
</Container>
<Container>
<Banner />
</Container>
</header>
);

Expand Down
Loading