From 0291b55cf89b04c1c57252c2ccce225f2fc76d0e Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Tue, 29 Jun 2021 09:33:22 +0100 Subject: [PATCH 01/11] feat: header design --- src/components/Atoms/Logo/Logo.js | 2 +- src/components/Atoms/Logo/Logo.md | 2 +- src/components/Molecules/Logos/Logos.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Atoms/Logo/Logo.js b/src/components/Atoms/Logo/Logo.js index a300020b3..bb7aa3e87 100644 --- a/src/components/Atoms/Logo/Logo.js +++ b/src/components/Atoms/Logo/Logo.js @@ -47,7 +47,7 @@ const themeSwitcher = theme => { const Logo = ({ rotate, sizeSm, sizeMd, campaign }) => ( - + { + ``` # Sport Relief Logo diff --git a/src/components/Molecules/Logos/Logos.js b/src/components/Molecules/Logos/Logos.js index a931e5daf..704a7903a 100644 --- a/src/components/Molecules/Logos/Logos.js +++ b/src/components/Molecules/Logos/Logos.js @@ -45,7 +45,7 @@ const Logos = ({ campaign }) => { return ( - + ); }; From ab1688853d92dd4a01f78e1f2b2d26159e5b2889 Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Tue, 29 Jun 2021 14:04:56 +0100 Subject: [PATCH 02/11] feat: new icons update snaps and Icon --- src/components/Atoms/Logo/Logo.test.js | 12 +- src/components/Atoms/SocialIcons/Icon/Icon.js | 18 +- .../__snapshots__/SocialIcons.test.js.snap | 147 ++++++- .../HeaderEsuWithIcon.test.js.snap | 386 ++++++++++++------ .../Molecules/ShareButton/ShareButton.test.js | 43 +- .../Footer/__snapshots__/Footer.test.js.snap | 345 +++++++++------- src/components/Organisms/Header/Header.md | 22 +- .../Organisms/Header/assets/pay-in.svg | 3 + .../Organisms/Header/assets/search.svg | 3 + .../Organisms/Header/assets/shop.svg | 3 + 10 files changed, 664 insertions(+), 318 deletions(-) create mode 100644 src/components/Organisms/Header/assets/pay-in.svg create mode 100644 src/components/Organisms/Header/assets/search.svg create mode 100644 src/components/Organisms/Header/assets/shop.svg diff --git a/src/components/Atoms/Logo/Logo.test.js b/src/components/Atoms/Logo/Logo.test.js index 3a240b857..a2b47a338 100644 --- a/src/components/Atoms/Logo/Logo.test.js +++ b/src/components/Atoms/Logo/Logo.test.js @@ -1,9 +1,9 @@ -import React from 'react'; -import 'jest-styled-components'; -import renderWithTheme from '../../../hoc/shallowWithTheme'; -import Logo from './Logo'; +import React from "react"; +import "jest-styled-components"; +import renderWithTheme from "../../../hoc/shallowWithTheme"; +import Logo from "./Logo"; -it('renders correctly', () => { +it("renders correctly", () => { const tree = renderWithTheme().toJSON(); expect(tree).toMatchInlineSnapshot(` @@ -32,7 +32,7 @@ it('renders correctly', () => {
Comic Relief logo size}; &:hover, &:focus { @@ -24,13 +27,14 @@ const HelperText = styled.span` `; const Icon = ({ - href, target, icon, brand, title, ...restProps + href, target, icon, brand, title, size, ...restProps }) => ( @@ -38,6 +42,9 @@ const Icon = ({ {title !== 'Sign up for emails' && ( (opens in new window) )} + + {title} + ); @@ -46,7 +53,12 @@ Icon.propTypes = { href: PropTypes.string.isRequired, target: PropTypes.string.isRequired, icon: PropTypes.string.isRequired, - title: PropTypes.string.isRequired + title: PropTypes.string.isRequired, + size: PropTypes.string +}; + +Icon.defaultProps = { + size: 'auto' }; export default Icon; diff --git a/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap b/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap index 2c3e4d6cb..650b60e4a 100644 --- a/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap +++ b/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap @@ -1,13 +1,28 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders correctly with Comic Relief links 1`] = ` +.c5 { + color: #000000; + text-transform: inherit; + line-height: normal; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + .c2 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - display: block; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; + width: auto; } .c2:hover, @@ -83,6 +98,7 @@ exports[`renders correctly with Comic Relief links 1`] = ` data-test="header-esu-icon" href="https://www.facebook.com/comicrelief" rel="noopener noreferrer" + size="auto" target="_blank" title="Check out our Facebook page" > @@ -96,6 +112,13 @@ exports[`renders correctly with Comic Relief links 1`] = ` > (opens in new window) + + Check out our Facebook page +
  • @@ -119,6 +143,13 @@ exports[`renders correctly with Comic Relief links 1`] = ` > (opens in new window) + + Check out our Twitter account +
  • @@ -142,6 +174,13 @@ exports[`renders correctly with Comic Relief links 1`] = ` > (opens in new window) + + Check out our YouTube channel +
  • @@ -165,19 +205,41 @@ exports[`renders correctly with Comic Relief links 1`] = ` > (opens in new window) + + Check out our Instagram account +
    • `; exports[`renders correctly with Red Nose Day links and self target 1`] = ` +.c5 { + color: #000000; + text-transform: inherit; + line-height: normal; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + .c2 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - display: block; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; + width: auto; } .c2:hover, @@ -253,6 +315,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = ` data-test="header-esu-icon" href="https://www.facebook.com/rednoseday" rel="noopener noreferrer" + size="auto" target="_self" title="Check out our Facebook page" > @@ -266,6 +329,13 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = ` > (opens in new window) + + Check out our Facebook page +
  • @@ -289,6 +360,13 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = ` > (opens in new window) + + Check out our Twitter account +
  • @@ -312,6 +391,13 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = ` > (opens in new window) + + Check out our YouTube channel +
  • @@ -335,19 +422,41 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = ` > (opens in new window) + + Check out our Instagram account +
    • `; exports[`renders correctly with Sport Relief links 1`] = ` +.c5 { + color: #000000; + text-transform: inherit; + line-height: normal; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + .c2 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - display: block; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; + width: auto; } .c2:hover, @@ -423,6 +532,7 @@ exports[`renders correctly with Sport Relief links 1`] = ` data-test="header-esu-icon" href="https://www.facebook.com/sportrelief" rel="noopener noreferrer" + size="auto" target="_blank" title="Check out our Facebook page" > @@ -436,6 +546,13 @@ exports[`renders correctly with Sport Relief links 1`] = ` > (opens in new window) + + Check out our Facebook page +
  • @@ -459,6 +577,13 @@ exports[`renders correctly with Sport Relief links 1`] = ` > (opens in new window) + + Check out our Twitter account +
  • @@ -482,6 +608,13 @@ exports[`renders correctly with Sport Relief links 1`] = ` > (opens in new window) + + Check out our YouTube channel +
  • @@ -505,6 +639,13 @@ exports[`renders correctly with Sport Relief links 1`] = ` > (opens in new window) + + Check out our Instagram account +
    • diff --git a/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap b/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap index 3e802c754..6833bd341 100644 --- a/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap +++ b/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap @@ -1,7 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders correctly with error message 1`] = ` -.c6 { +.c3 { + color: #000000; + text-transform: inherit; + line-height: normal; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + +.c7 { font-size: 3rem; line-height: 3rem; text-transform: uppercase; @@ -13,7 +20,7 @@ exports[`renders correctly with error message 1`] = ` letter-spacing: 0.03rem; } -.c13 { +.c14 { font-size: 1rem; line-height: 1rem; text-transform: inherit; @@ -21,7 +28,7 @@ exports[`renders correctly with error message 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c17 { +.c18 { color: #E52630; text-transform: inherit; font-weight: bold; @@ -29,7 +36,7 @@ exports[`renders correctly with error message 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c11 { +.c12 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -42,7 +49,7 @@ exports[`renders correctly with error message 1`] = ` width: 100%; } -.c14 { +.c15 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -57,7 +64,7 @@ exports[`renders correctly with error message 1`] = ` width: 1px; } -.c18 { +.c19 { display: inline-block; padding: 1.5rem 1rem 1rem; width: 100%; @@ -68,7 +75,7 @@ exports[`renders correctly with error message 1`] = ` font-weight: bold; } -.c18:before { +.c19:before { position: relative; content: ''; top: 1px; @@ -81,7 +88,7 @@ exports[`renders correctly with error message 1`] = ` color: #E52630; } -.c16 { +.c17 { position: relative; box-sizing: border-box; width: 100%; @@ -101,16 +108,16 @@ exports[`renders correctly with error message 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c16:focus { +.c17:focus { border: 1px solid #666; } -.c15 { +.c16 { position: relative; font-size: 1.25rem; } -.c9 { +.c10 { text-align: left; } @@ -118,9 +125,17 @@ exports[`renders correctly with error message 1`] = ` -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - display: block; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; + width: auto; } .c1:hover, @@ -132,7 +147,7 @@ exports[`renders correctly with error message 1`] = ` width: 100%; } -.c23 { +.c24 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -147,7 +162,7 @@ exports[`renders correctly with error message 1`] = ` width: 1px; } -.c4 { +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -160,7 +175,7 @@ exports[`renders correctly with error message 1`] = ` background-color: #2C0230; } -.c8 { +.c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -168,17 +183,17 @@ exports[`renders correctly with error message 1`] = ` margin-bottom: 1rem; } -.c19 { +.c20 { margin-top: 1rem; } -.c19 input { +.c20 input { text-align: center; width: 100%; font-size: 1rem; } -.c21 { +.c22 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -189,17 +204,17 @@ exports[`renders correctly with error message 1`] = ` margin-top: 1rem; } -.c21 p { +.c22 p { font-size: 1rem; line-height: 2rem; } -.c21 p a { +.c22 p a { font-size: 1rem; color: #FFFFFF; } -.c10 { +.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -210,15 +225,15 @@ exports[`renders correctly with error message 1`] = ` margin: 1rem 0; } -.c12 { +.c13 { width: 100%; } -.c7 { +.c8 { margin-bottom: 1.5rem; } -.c20 { +.c21 { width: 100%; color: #FFFFFF; font-size: 1rem; @@ -230,9 +245,9 @@ exports[`renders correctly with error message 1`] = ` border-radius: 100px; } -.c20:active, -.c20:focus, -.c20:hover { +.c21:active, +.c21:focus, +.c21:hover { background-color: #961D35; } @@ -242,7 +257,7 @@ exports[`renders correctly with error message 1`] = ` display: inline-block; } -.c3 { +.c4 { position: fixed; width: 100%; height: 100%; @@ -265,11 +280,11 @@ exports[`renders correctly with error message 1`] = ` align-items: flex-start; } -.c3 div[aria-modal='true'] { +.c4 div[aria-modal='true'] { padding: 2rem; } -.c22 { +.c23 { position: absolute; top: 0; right: 0; @@ -278,29 +293,29 @@ exports[`renders correctly with error message 1`] = ` margin-left: 0; } -.c5 { +.c6 { width: 100%; } -.c5 input { +.c6 input { font-size: 1rem; } @media (min-width:740px) { - .c16 { + .c17 { max-width: 290px; } } @media (min-width:740px) { - .c19 input { + .c20 input { font-size: 1.25rem; max-width: 180px; } } @media (min-width:1024px) { - .c20 { + .c21 { width: auto; padding: 1rem 2rem; margin: 0 auto 2rem; @@ -308,19 +323,19 @@ exports[`renders correctly with error message 1`] = ` } @media (min-width:740px) { - .c22 { + .c23 { margin: 4rem 0 0; right: 25%; } } @media (min-width:740px) { - .c5 { + .c6 { margin-top: 4rem; width: 50%; } - .c5 input { + .c6 input { font-size: 1.25rem; } } @@ -338,6 +353,7 @@ exports[`renders correctly with error message 1`] = ` onClick={[Function]} rel="noopener noreferrer" role="button" + size="auto" tabIndex="0" target="_self" title="Sign up for emails" @@ -347,26 +363,33 @@ exports[`renders correctly with error message 1`] = ` className="c2" src="mock.asset" /> + + Sign up for emails +

    Stay in the know!

    Get regular email updates and info on what we're up to!

    ", @@ -375,15 +398,15 @@ exports[`renders correctly with error message 1`] = ` />
    Our Privacy Policy describes how we handle and protect your information.

    If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.

    ", @@ -448,12 +471,13 @@ exports[`renders correctly with error message 1`] = `
    (opens in new window) + + Close email sign-up +
    @@ -475,13 +506,28 @@ exports[`renders correctly with error message 1`] = ` `; exports[`renders correctly with modal closed 1`] = ` +.c3 { + color: #000000; + text-transform: inherit; + line-height: normal; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + .c1 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - display: block; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; + width: auto; } .c1:hover, @@ -512,6 +558,7 @@ exports[`renders correctly with modal closed 1`] = ` onClick={[Function]} rel="noopener noreferrer" role="button" + size="auto" tabIndex="0" target="_self" title="Sign up for emails" @@ -521,13 +568,27 @@ exports[`renders correctly with modal closed 1`] = ` className="c2" src="mock.asset" /> + + Sign up for emails +
    `; exports[`renders correctly with modal open 1`] = ` -.c6 { +.c3 { + color: #000000; + text-transform: inherit; + line-height: normal; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + +.c7 { font-size: 3rem; line-height: 3rem; text-transform: uppercase; @@ -539,7 +600,7 @@ exports[`renders correctly with modal open 1`] = ` letter-spacing: 0.03rem; } -.c13 { +.c14 { font-size: 1rem; line-height: 1rem; text-transform: inherit; @@ -547,7 +608,7 @@ exports[`renders correctly with modal open 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c11 { +.c12 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -560,7 +621,7 @@ exports[`renders correctly with modal open 1`] = ` width: 100%; } -.c14 { +.c15 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -575,7 +636,7 @@ exports[`renders correctly with modal open 1`] = ` width: 1px; } -.c16 { +.c17 { position: relative; box-sizing: border-box; width: 100%; @@ -595,16 +656,16 @@ exports[`renders correctly with modal open 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c16:focus { +.c17:focus { border: 1px solid #666; } -.c15 { +.c16 { position: relative; font-size: 1.25rem; } -.c9 { +.c10 { text-align: left; } @@ -612,9 +673,17 @@ exports[`renders correctly with modal open 1`] = ` -webkit-text-decoration: none; text-decoration: none; cursor: pointer; - display: block; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; + width: auto; } .c1:hover, @@ -626,7 +695,7 @@ exports[`renders correctly with modal open 1`] = ` width: 100%; } -.c21 { +.c22 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -641,7 +710,7 @@ exports[`renders correctly with modal open 1`] = ` width: 1px; } -.c4 { +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -654,7 +723,7 @@ exports[`renders correctly with modal open 1`] = ` background-color: #2C0230; } -.c8 { +.c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -662,17 +731,17 @@ exports[`renders correctly with modal open 1`] = ` margin-bottom: 1rem; } -.c17 { +.c18 { margin-top: 1rem; } -.c17 input { +.c18 input { text-align: center; width: 100%; font-size: 1rem; } -.c19 { +.c20 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -683,17 +752,17 @@ exports[`renders correctly with modal open 1`] = ` margin-top: 1rem; } -.c19 p { +.c20 p { font-size: 1rem; line-height: 2rem; } -.c19 p a { +.c20 p a { font-size: 1rem; color: #FFFFFF; } -.c10 { +.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -704,15 +773,15 @@ exports[`renders correctly with modal open 1`] = ` margin: 1rem 0; } -.c12 { +.c13 { width: 100%; } -.c7 { +.c8 { margin-bottom: 1.5rem; } -.c18 { +.c19 { width: 100%; color: #FFFFFF; font-size: 1rem; @@ -724,9 +793,9 @@ exports[`renders correctly with modal open 1`] = ` border-radius: 100px; } -.c18:active, -.c18:focus, -.c18:hover { +.c19:active, +.c19:focus, +.c19:hover { background-color: #961D35; } @@ -736,7 +805,7 @@ exports[`renders correctly with modal open 1`] = ` display: inline-block; } -.c3 { +.c4 { position: fixed; width: 100%; height: 100%; @@ -759,11 +828,11 @@ exports[`renders correctly with modal open 1`] = ` align-items: flex-start; } -.c3 div[aria-modal='true'] { +.c4 div[aria-modal='true'] { padding: 2rem; } -.c20 { +.c21 { position: absolute; top: 0; right: 0; @@ -772,29 +841,29 @@ exports[`renders correctly with modal open 1`] = ` margin-left: 0; } -.c5 { +.c6 { width: 100%; } -.c5 input { +.c6 input { font-size: 1rem; } @media (min-width:740px) { - .c16 { + .c17 { max-width: 290px; } } @media (min-width:740px) { - .c17 input { + .c18 input { font-size: 1.25rem; max-width: 180px; } } @media (min-width:1024px) { - .c18 { + .c19 { width: auto; padding: 1rem 2rem; margin: 0 auto 2rem; @@ -802,19 +871,19 @@ exports[`renders correctly with modal open 1`] = ` } @media (min-width:740px) { - .c20 { + .c21 { margin: 4rem 0 0; right: 25%; } } @media (min-width:740px) { - .c5 { + .c6 { margin-top: 4rem; width: 50%; } - .c5 input { + .c6 input { font-size: 1.25rem; } } @@ -832,6 +901,7 @@ exports[`renders correctly with modal open 1`] = ` onClick={[Function]} rel="noopener noreferrer" role="button" + size="auto" tabIndex="0" target="_self" title="Sign up for emails" @@ -841,26 +911,33 @@ exports[`renders correctly with modal open 1`] = ` className="c2" src="mock.asset" /> + + Sign up for emails +

    Stay in the know!

    Get regular email updates and info on what we're up to!

    ", @@ -869,15 +946,15 @@ exports[`renders correctly with modal open 1`] = ` />

    diff --git a/src/components/Organisms/Header/Header.md b/src/components/Organisms/Header/Header.md index 4e6c0aa0f..230667e2a 100644 --- a/src/components/Organisms/Header/Header.md +++ b/src/components/Organisms/Header/Header.md @@ -42,7 +42,7 @@ import Link from '../../Atoms/Link/Link'; import data from './data/data'; import Link from '../../Atoms/Link/Link'; import HeaderEsuWithIcon from '../../Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon'; -import searchIcon from './assets/icon--search.svg'; +import searchIcon from './assets/search.svg'; import Icon from '../../Atoms/SocialIcons/Icon/Icon'; import RichText from '../../Atoms/RichText/RichText'; @@ -71,10 +71,6 @@ const [success, setSuccess] = React.useState(false); rotate="true" metaIcons={ <> - - Donate - -

    -
    +
    - setSuccess(!success)} - /> + + Donate + } />; diff --git a/src/components/Organisms/Header/assets/pay-in.svg b/src/components/Organisms/Header/assets/pay-in.svg new file mode 100644 index 000000000..ecc8ba5d8 --- /dev/null +++ b/src/components/Organisms/Header/assets/pay-in.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Organisms/Header/assets/search.svg b/src/components/Organisms/Header/assets/search.svg new file mode 100644 index 000000000..e4f68e9a5 --- /dev/null +++ b/src/components/Organisms/Header/assets/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Organisms/Header/assets/shop.svg b/src/components/Organisms/Header/assets/shop.svg new file mode 100644 index 000000000..da648432a --- /dev/null +++ b/src/components/Organisms/Header/assets/shop.svg @@ -0,0 +1,3 @@ + + + From 9859fcd3afb1f927bbcb8b0dd6bceab0bbf3fba1 Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Tue, 29 Jun 2021 14:20:16 +0100 Subject: [PATCH 03/11] update icon width --- src/components/Atoms/SocialIcons/Icon/Icon.js | 5 ++--- src/components/Organisms/Header/Header.md | 2 +- src/components/Organisms/Header/Header.style.js | 1 - 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/Atoms/SocialIcons/Icon/Icon.js b/src/components/Atoms/SocialIcons/Icon/Icon.js index 67810c1d1..6438084a0 100755 --- a/src/components/Atoms/SocialIcons/Icon/Icon.js +++ b/src/components/Atoms/SocialIcons/Icon/Icon.js @@ -10,7 +10,6 @@ const StyledLink = styled.a` display: flex; align-items: center; transition: opacity 0.2s; - width: ${({ size }) => size}; &:hover, &:focus { @@ -20,6 +19,7 @@ const StyledLink = styled.a` const StyledImage = styled.img` width: 100%; + width: ${({ size }) => size}; `; const HelperText = styled.span` @@ -34,11 +34,10 @@ const Icon = ({ target={`_${target}`} {...restProps} title={title} - size={size} rel="noopener noreferrer" data-test="header-esu-icon" > - + {title !== 'Sign up for emails' && ( (opens in new window) )} diff --git a/src/components/Organisms/Header/Header.md b/src/components/Organisms/Header/Header.md index 230667e2a..bf90bd4b6 100644 --- a/src/components/Organisms/Header/Header.md +++ b/src/components/Organisms/Header/Header.md @@ -80,7 +80,7 @@ const [success, setSuccess] = React.useState(false); href="/search" brand="comicrelief" tabIndex="0" - size="25px" + size="35px" />
    diff --git a/src/components/Organisms/Header/Header.style.js b/src/components/Organisms/Header/Header.style.js index 2cd88254d..862257905 100644 --- a/src/components/Organisms/Header/Header.style.js +++ b/src/components/Organisms/Header/Header.style.js @@ -67,7 +67,6 @@ const MetaIcons = styled.div` img { padding: 5px; height: inherit; - width: inherit; } } } From 43313bff3117afff08a7098483a2575fa3871ed7 Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Tue, 29 Jun 2021 15:01:51 +0100 Subject: [PATCH 04/11] update meta margins --- src/components/Atoms/SocialIcons/Icon/Icon.js | 2 ++ src/components/Organisms/Header/Header.style.js | 17 ----------------- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/components/Atoms/SocialIcons/Icon/Icon.js b/src/components/Atoms/SocialIcons/Icon/Icon.js index 6438084a0..217edbba7 100755 --- a/src/components/Atoms/SocialIcons/Icon/Icon.js +++ b/src/components/Atoms/SocialIcons/Icon/Icon.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import hideVisually from '../../../../theme/shared/hideVisually'; +import spacing from '../../../../theme/shared/spacing'; import Text from '../../Text/Text'; const StyledLink = styled.a` @@ -20,6 +21,7 @@ const StyledLink = styled.a` const StyledImage = styled.img` width: 100%; width: ${({ size }) => size}; + margin-right: ${spacing('sm')}; `; const HelperText = styled.span` diff --git a/src/components/Organisms/Header/Header.style.js b/src/components/Organisms/Header/Header.style.js index 862257905..a1ea354b8 100644 --- a/src/components/Organisms/Header/Header.style.js +++ b/src/components/Organisms/Header/Header.style.js @@ -54,23 +54,6 @@ const MetaIcons = styled.div` display: flex; align-items: center; - > div { - height: 35px; - width: auto; - display: inline-block; - - > a { - height: inherit; - width: inherit; - margin-left: ${({ theme }) => theme.fontSize('xxs')}; - - img { - padding: 5px; - height: inherit; - } - } - } - @media ${({ theme }) => theme.breakpoint('nav')} { position: relative; display: flex; From ab148e6d5606c345c1e9103d58b5d7a2cb1d9af8 Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Thu, 1 Jul 2021 10:24:00 +0100 Subject: [PATCH 05/11] add hide label --- src/components/Atoms/SocialIcons/Icon/Icon.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Atoms/SocialIcons/Icon/Icon.js b/src/components/Atoms/SocialIcons/Icon/Icon.js index 217edbba7..f1900c6fc 100755 --- a/src/components/Atoms/SocialIcons/Icon/Icon.js +++ b/src/components/Atoms/SocialIcons/Icon/Icon.js @@ -29,7 +29,7 @@ const HelperText = styled.span` `; const Icon = ({ - href, target, icon, brand, title, size, ...restProps + href, target, icon, brand, title, size, hideLabel, ...restProps }) => ( {title !== 'Sign up for emails' && ( (opens in new window) )} - - {title} - + {hideLabel ? ( + + {title} + + ) : null} ); @@ -55,10 +58,12 @@ Icon.propTypes = { target: PropTypes.string.isRequired, icon: PropTypes.string.isRequired, title: PropTypes.string.isRequired, + hideLabel: PropTypes.bool, size: PropTypes.string }; Icon.defaultProps = { + hideLabel: true, size: 'auto' }; From 03244c296f17c39592a4479def0709e18780e148 Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Thu, 1 Jul 2021 10:34:46 +0100 Subject: [PATCH 06/11] update hidelabel --- src/components/Atoms/SocialIcons/Icon/Icon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Atoms/SocialIcons/Icon/Icon.js b/src/components/Atoms/SocialIcons/Icon/Icon.js index f1900c6fc..906a18672 100755 --- a/src/components/Atoms/SocialIcons/Icon/Icon.js +++ b/src/components/Atoms/SocialIcons/Icon/Icon.js @@ -44,7 +44,7 @@ const Icon = ({ {title !== 'Sign up for emails' && ( (opens in new window) )} - {hideLabel ? ( + {!hideLabel ? ( {title} From 5b11f1750f7b7148696e87a1a7e738292091932a Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Fri, 2 Jul 2021 10:35:52 +0100 Subject: [PATCH 07/11] update nav layout --- .../__snapshots__/SocialIcons.test.js.snap | 138 +------ .../HeaderEsuWithIcon.test.js.snap | 365 +++++++----------- .../Molecules/ShareButton/ShareButton.test.js | 28 +- .../Footer/__snapshots__/Footer.test.js.snap | 340 ++++++++-------- .../Organisms/Header/Header.style.js | 1 - .../Organisms/Header/Nav/Nav.style.js | 1 + 6 files changed, 322 insertions(+), 551 deletions(-) diff --git a/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap b/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap index 650b60e4a..fd23d3c94 100644 --- a/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap +++ b/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders correctly with Comic Relief links 1`] = ` -.c5 { - color: #000000; - text-transform: inherit; - line-height: normal; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - .c2 { -webkit-text-decoration: none; text-decoration: none; @@ -22,7 +15,6 @@ exports[`renders correctly with Comic Relief links 1`] = ` align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; - width: auto; } .c2:hover, @@ -32,6 +24,8 @@ exports[`renders correctly with Comic Relief links 1`] = ` .c3 { width: 100%; + width: auto; + margin-right: 0.5rem; } .c4 { @@ -98,13 +92,13 @@ exports[`renders correctly with Comic Relief links 1`] = ` data-test="header-esu-icon" href="https://www.facebook.com/comicrelief" rel="noopener noreferrer" - size="auto" target="_blank" title="Check out our Facebook page" > facebook (opens in new window) - - Check out our Facebook page -
  • twitter (opens in new window) - - Check out our Twitter account -
  • youtube (opens in new window) - - Check out our YouTube channel -
  • instagram (opens in new window) - - Check out our Instagram account -
    • `; exports[`renders correctly with Red Nose Day links and self target 1`] = ` -.c5 { - color: #000000; - text-transform: inherit; - line-height: normal; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - .c2 { -webkit-text-decoration: none; text-decoration: none; @@ -239,7 +198,6 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = ` align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; - width: auto; } .c2:hover, @@ -249,6 +207,8 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = ` .c3 { width: 100%; + width: auto; + margin-right: 0.5rem; } .c4 { @@ -315,13 +275,13 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = ` data-test="header-esu-icon" href="https://www.facebook.com/rednoseday" rel="noopener noreferrer" - size="auto" target="_self" title="Check out our Facebook page" > facebook (opens in new window) - - Check out our Facebook page -
  • twitter (opens in new window) - - Check out our Twitter account -
  • youtube (opens in new window) - - Check out our YouTube channel -
  • instagram (opens in new window) - - Check out our Instagram account -
    • `; exports[`renders correctly with Sport Relief links 1`] = ` -.c5 { - color: #000000; - text-transform: inherit; - line-height: normal; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - .c2 { -webkit-text-decoration: none; text-decoration: none; @@ -456,7 +381,6 @@ exports[`renders correctly with Sport Relief links 1`] = ` align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; - width: auto; } .c2:hover, @@ -466,6 +390,8 @@ exports[`renders correctly with Sport Relief links 1`] = ` .c3 { width: 100%; + width: auto; + margin-right: 0.5rem; } .c4 { @@ -532,13 +458,13 @@ exports[`renders correctly with Sport Relief links 1`] = ` data-test="header-esu-icon" href="https://www.facebook.com/sportrelief" rel="noopener noreferrer" - size="auto" target="_blank" title="Check out our Facebook page" > facebook (opens in new window) - - Check out our Facebook page -
  • twitter (opens in new window) - - Check out our Twitter account -
  • youtube (opens in new window) - - Check out our YouTube channel -
  • instagram (opens in new window) - - Check out our Instagram account -
    • diff --git a/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap b/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap index 6833bd341..2e51a993e 100644 --- a/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap +++ b/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap @@ -1,14 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders correctly with error message 1`] = ` -.c3 { - color: #000000; - text-transform: inherit; - line-height: normal; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - -.c7 { +.c6 { font-size: 3rem; line-height: 3rem; text-transform: uppercase; @@ -20,7 +13,7 @@ exports[`renders correctly with error message 1`] = ` letter-spacing: 0.03rem; } -.c14 { +.c13 { font-size: 1rem; line-height: 1rem; text-transform: inherit; @@ -28,7 +21,7 @@ exports[`renders correctly with error message 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c18 { +.c17 { color: #E52630; text-transform: inherit; font-weight: bold; @@ -36,7 +29,7 @@ exports[`renders correctly with error message 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c12 { +.c11 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -49,7 +42,7 @@ exports[`renders correctly with error message 1`] = ` width: 100%; } -.c15 { +.c14 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -64,7 +57,7 @@ exports[`renders correctly with error message 1`] = ` width: 1px; } -.c19 { +.c18 { display: inline-block; padding: 1.5rem 1rem 1rem; width: 100%; @@ -75,7 +68,7 @@ exports[`renders correctly with error message 1`] = ` font-weight: bold; } -.c19:before { +.c18:before { position: relative; content: ''; top: 1px; @@ -88,7 +81,7 @@ exports[`renders correctly with error message 1`] = ` color: #E52630; } -.c17 { +.c16 { position: relative; box-sizing: border-box; width: 100%; @@ -108,16 +101,16 @@ exports[`renders correctly with error message 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c17:focus { +.c16:focus { border: 1px solid #666; } -.c16 { +.c15 { position: relative; font-size: 1.25rem; } -.c10 { +.c9 { text-align: left; } @@ -135,7 +128,6 @@ exports[`renders correctly with error message 1`] = ` align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; - width: auto; } .c1:hover, @@ -145,9 +137,11 @@ exports[`renders correctly with error message 1`] = ` .c2 { width: 100%; + width: auto; + margin-right: 0.5rem; } -.c24 { +.c23 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -162,7 +156,7 @@ exports[`renders correctly with error message 1`] = ` width: 1px; } -.c5 { +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -175,7 +169,7 @@ exports[`renders correctly with error message 1`] = ` background-color: #2C0230; } -.c9 { +.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -183,17 +177,17 @@ exports[`renders correctly with error message 1`] = ` margin-bottom: 1rem; } -.c20 { +.c19 { margin-top: 1rem; } -.c20 input { +.c19 input { text-align: center; width: 100%; font-size: 1rem; } -.c22 { +.c21 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -204,17 +198,17 @@ exports[`renders correctly with error message 1`] = ` margin-top: 1rem; } -.c22 p { +.c21 p { font-size: 1rem; line-height: 2rem; } -.c22 p a { +.c21 p a { font-size: 1rem; color: #FFFFFF; } -.c11 { +.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -225,15 +219,15 @@ exports[`renders correctly with error message 1`] = ` margin: 1rem 0; } -.c13 { +.c12 { width: 100%; } -.c8 { +.c7 { margin-bottom: 1.5rem; } -.c21 { +.c20 { width: 100%; color: #FFFFFF; font-size: 1rem; @@ -245,9 +239,9 @@ exports[`renders correctly with error message 1`] = ` border-radius: 100px; } -.c21:active, -.c21:focus, -.c21:hover { +.c20:active, +.c20:focus, +.c20:hover { background-color: #961D35; } @@ -257,7 +251,7 @@ exports[`renders correctly with error message 1`] = ` display: inline-block; } -.c4 { +.c3 { position: fixed; width: 100%; height: 100%; @@ -280,11 +274,11 @@ exports[`renders correctly with error message 1`] = ` align-items: flex-start; } -.c4 div[aria-modal='true'] { +.c3 div[aria-modal='true'] { padding: 2rem; } -.c23 { +.c22 { position: absolute; top: 0; right: 0; @@ -293,29 +287,29 @@ exports[`renders correctly with error message 1`] = ` margin-left: 0; } -.c6 { +.c5 { width: 100%; } -.c6 input { +.c5 input { font-size: 1rem; } @media (min-width:740px) { - .c17 { + .c16 { max-width: 290px; } } @media (min-width:740px) { - .c20 input { + .c19 input { font-size: 1.25rem; max-width: 180px; } } @media (min-width:1024px) { - .c21 { + .c20 { width: auto; padding: 1rem 2rem; margin: 0 auto 2rem; @@ -323,19 +317,19 @@ exports[`renders correctly with error message 1`] = ` } @media (min-width:740px) { - .c23 { + .c22 { margin: 4rem 0 0; right: 25%; } } @media (min-width:740px) { - .c6 { + .c5 { margin-top: 4rem; width: 50%; } - .c6 input { + .c5 input { font-size: 1.25rem; } } @@ -353,7 +347,6 @@ exports[`renders correctly with error message 1`] = ` onClick={[Function]} rel="noopener noreferrer" role="button" - size="auto" tabIndex="0" target="_self" title="Sign up for emails" @@ -361,35 +354,29 @@ exports[`renders correctly with error message 1`] = ` Sign up for emails - - Sign up for emails -

    Stay in the know!

    Get regular email updates and info on what we're up to!

    ", @@ -398,15 +385,15 @@ exports[`renders correctly with error message 1`] = ` />
    Our Privacy Policy describes how we handle and protect your information.

    If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.

    ", @@ -471,13 +458,12 @@ exports[`renders correctly with error message 1`] = `
    (opens in new window) - - Close email sign-up -
    @@ -506,13 +486,6 @@ exports[`renders correctly with error message 1`] = ` `; exports[`renders correctly with modal closed 1`] = ` -.c3 { - color: #000000; - text-transform: inherit; - line-height: normal; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - .c1 { -webkit-text-decoration: none; text-decoration: none; @@ -527,7 +500,6 @@ exports[`renders correctly with modal closed 1`] = ` align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; - width: auto; } .c1:hover, @@ -537,6 +509,8 @@ exports[`renders correctly with modal closed 1`] = ` .c2 { width: 100%; + width: auto; + margin-right: 0.5rem; } .c0 { @@ -558,7 +532,6 @@ exports[`renders correctly with modal closed 1`] = ` onClick={[Function]} rel="noopener noreferrer" role="button" - size="auto" tabIndex="0" target="_self" title="Sign up for emails" @@ -566,29 +539,16 @@ exports[`renders correctly with modal closed 1`] = ` Sign up for emails - - Sign up for emails -
    `; exports[`renders correctly with modal open 1`] = ` -.c3 { - color: #000000; - text-transform: inherit; - line-height: normal; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - -.c7 { +.c6 { font-size: 3rem; line-height: 3rem; text-transform: uppercase; @@ -600,7 +560,7 @@ exports[`renders correctly with modal open 1`] = ` letter-spacing: 0.03rem; } -.c14 { +.c13 { font-size: 1rem; line-height: 1rem; text-transform: inherit; @@ -608,7 +568,7 @@ exports[`renders correctly with modal open 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c12 { +.c11 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -621,7 +581,7 @@ exports[`renders correctly with modal open 1`] = ` width: 100%; } -.c15 { +.c14 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -636,7 +596,7 @@ exports[`renders correctly with modal open 1`] = ` width: 1px; } -.c17 { +.c16 { position: relative; box-sizing: border-box; width: 100%; @@ -656,16 +616,16 @@ exports[`renders correctly with modal open 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c17:focus { +.c16:focus { border: 1px solid #666; } -.c16 { +.c15 { position: relative; font-size: 1.25rem; } -.c10 { +.c9 { text-align: left; } @@ -683,7 +643,6 @@ exports[`renders correctly with modal open 1`] = ` align-items: center; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; - width: auto; } .c1:hover, @@ -693,9 +652,11 @@ exports[`renders correctly with modal open 1`] = ` .c2 { width: 100%; + width: auto; + margin-right: 0.5rem; } -.c22 { +.c21 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -710,7 +671,7 @@ exports[`renders correctly with modal open 1`] = ` width: 1px; } -.c5 { +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -723,7 +684,7 @@ exports[`renders correctly with modal open 1`] = ` background-color: #2C0230; } -.c9 { +.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -731,17 +692,17 @@ exports[`renders correctly with modal open 1`] = ` margin-bottom: 1rem; } -.c18 { +.c17 { margin-top: 1rem; } -.c18 input { +.c17 input { text-align: center; width: 100%; font-size: 1rem; } -.c20 { +.c19 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -752,17 +713,17 @@ exports[`renders correctly with modal open 1`] = ` margin-top: 1rem; } -.c20 p { +.c19 p { font-size: 1rem; line-height: 2rem; } -.c20 p a { +.c19 p a { font-size: 1rem; color: #FFFFFF; } -.c11 { +.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -773,15 +734,15 @@ exports[`renders correctly with modal open 1`] = ` margin: 1rem 0; } -.c13 { +.c12 { width: 100%; } -.c8 { +.c7 { margin-bottom: 1.5rem; } -.c19 { +.c18 { width: 100%; color: #FFFFFF; font-size: 1rem; @@ -793,9 +754,9 @@ exports[`renders correctly with modal open 1`] = ` border-radius: 100px; } -.c19:active, -.c19:focus, -.c19:hover { +.c18:active, +.c18:focus, +.c18:hover { background-color: #961D35; } @@ -805,7 +766,7 @@ exports[`renders correctly with modal open 1`] = ` display: inline-block; } -.c4 { +.c3 { position: fixed; width: 100%; height: 100%; @@ -828,11 +789,11 @@ exports[`renders correctly with modal open 1`] = ` align-items: flex-start; } -.c4 div[aria-modal='true'] { +.c3 div[aria-modal='true'] { padding: 2rem; } -.c21 { +.c20 { position: absolute; top: 0; right: 0; @@ -841,29 +802,29 @@ exports[`renders correctly with modal open 1`] = ` margin-left: 0; } -.c6 { +.c5 { width: 100%; } -.c6 input { +.c5 input { font-size: 1rem; } @media (min-width:740px) { - .c17 { + .c16 { max-width: 290px; } } @media (min-width:740px) { - .c18 input { + .c17 input { font-size: 1.25rem; max-width: 180px; } } @media (min-width:1024px) { - .c19 { + .c18 { width: auto; padding: 1rem 2rem; margin: 0 auto 2rem; @@ -871,19 +832,19 @@ exports[`renders correctly with modal open 1`] = ` } @media (min-width:740px) { - .c21 { + .c20 { margin: 4rem 0 0; right: 25%; } } @media (min-width:740px) { - .c6 { + .c5 { margin-top: 4rem; width: 50%; } - .c6 input { + .c5 input { font-size: 1.25rem; } } @@ -901,7 +862,6 @@ exports[`renders correctly with modal open 1`] = ` onClick={[Function]} rel="noopener noreferrer" role="button" - size="auto" tabIndex="0" target="_self" title="Sign up for emails" @@ -909,35 +869,29 @@ exports[`renders correctly with modal open 1`] = ` Sign up for emails - - Sign up for emails -

    Stay in the know!

    Get regular email updates and info on what we're up to!

    ", @@ -946,15 +900,15 @@ exports[`renders correctly with modal open 1`] = ` />

    diff --git a/src/components/Organisms/Header/Header.style.js b/src/components/Organisms/Header/Header.style.js index a1ea354b8..0727bdedc 100644 --- a/src/components/Organisms/Header/Header.style.js +++ b/src/components/Organisms/Header/Header.style.js @@ -32,7 +32,6 @@ const InnerWrapper = styled.div` const Brand = styled.div` ${zIndex('high')}; - margin-right: auto; display: flex; align-items: center; a { diff --git a/src/components/Organisms/Header/Nav/Nav.style.js b/src/components/Organisms/Header/Nav/Nav.style.js index 6497a6873..292da1172 100644 --- a/src/components/Organisms/Header/Nav/Nav.style.js +++ b/src/components/Organisms/Header/Nav/Nav.style.js @@ -46,6 +46,7 @@ const Nav = styled.nav` margin: 0 10px; width: auto; height: 100%; + margin-right: auto; } > h2 { ${hideVisually}; From a9078b01c75b81bc51c672e5e749ae9f318a71f1 Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Fri, 2 Jul 2021 11:07:23 +0100 Subject: [PATCH 08/11] fix mob layout --- src/components/Organisms/Header/Header.style.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Organisms/Header/Header.style.js b/src/components/Organisms/Header/Header.style.js index 0727bdedc..d73cc692e 100644 --- a/src/components/Organisms/Header/Header.style.js +++ b/src/components/Organisms/Header/Header.style.js @@ -46,6 +46,9 @@ const Brand = styled.div` border: 0; } } + @media ${({ theme }) => theme.breakpoint('nav')} { + margin-right: auto; + } `; const MetaIcons = styled.div` From 0172e8e0ab0f0036167be2478648ff580555f1a4 Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Fri, 2 Jul 2021 13:16:57 +0100 Subject: [PATCH 09/11] fix mobile response --- src/components/Organisms/Header/Header.style.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Organisms/Header/Header.style.js b/src/components/Organisms/Header/Header.style.js index d73cc692e..7d46088fc 100644 --- a/src/components/Organisms/Header/Header.style.js +++ b/src/components/Organisms/Header/Header.style.js @@ -34,6 +34,7 @@ const Brand = styled.div` ${zIndex('high')}; display: flex; align-items: center; + margin-right: auto; a { border: 0; color: transparent; @@ -47,7 +48,7 @@ const Brand = styled.div` } } @media ${({ theme }) => theme.breakpoint('nav')} { - margin-right: auto; + margin-right: 0; } `; From e0eb9fa7319837022fd155263a0ab00194f37929 Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Wed, 21 Jul 2021 10:48:01 +0100 Subject: [PATCH 10/11] update --- src/components/Molecules/Logos/Logos.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Molecules/Logos/Logos.js b/src/components/Molecules/Logos/Logos.js index 704a7903a..19d862eb3 100644 --- a/src/components/Molecules/Logos/Logos.js +++ b/src/components/Molecules/Logos/Logos.js @@ -25,7 +25,6 @@ const Logos = ({ campaign }) => { { if (campaign === 'Sport Relief') { return ( - + ); } return ( - + ); }; From e6ee9ccb57b39fe967d0a03316ee315bd6d233d4 Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Wed, 21 Jul 2021 12:30:58 +0100 Subject: [PATCH 11/11] fix rotate prop --- src/components/Molecules/Logos/Logos.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Molecules/Logos/Logos.js b/src/components/Molecules/Logos/Logos.js index 19d862eb3..d48719c9e 100644 --- a/src/components/Molecules/Logos/Logos.js +++ b/src/components/Molecules/Logos/Logos.js @@ -8,7 +8,7 @@ const Logos = ({ campaign }) => { return ( <> - + @@ -21,7 +21,7 @@ const Logos = ({ campaign }) => { return ( <> - +