From e92dea9df0325a462ad5072e2637b28213608233 Mon Sep 17 00:00:00 2001 From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com> Date: Thu, 5 Mar 2026 11:56:51 +0000 Subject: [PATCH 1/3] Creates a shared Banner styles file, as Donate and Email banners have so much duplicated style code --- .../Organisms/DonateBanner/DonateBanner.js | 6 +- .../DonateBanner/DonateBanner.style.js | 98 +--- .../Organisms/DonateBanner/Form/Form.js | 5 +- .../__snapshots__/DonateBanner.test.js.snap | 464 ++++++++--------- .../EmailBanner/EmailBanner.style.js | 107 +--- .../__snapshots__/EmailBanner.test.js.snap | 484 +++++++++--------- .../Organisms/shared/Banner.styles.js | 108 ++++ 7 files changed, 602 insertions(+), 670 deletions(-) create mode 100644 src/components/Organisms/shared/Banner.styles.js diff --git a/src/components/Organisms/DonateBanner/DonateBanner.js b/src/components/Organisms/DonateBanner/DonateBanner.js index 678931858..e017390a4 100644 --- a/src/components/Organisms/DonateBanner/DonateBanner.js +++ b/src/components/Organisms/DonateBanner/DonateBanner.js @@ -112,14 +112,14 @@ const DonateBanner = ({ )} {shouldShowTitleSection && ( - + {showCopy && ( <> diff --git a/src/components/Organisms/DonateBanner/DonateBanner.style.js b/src/components/Organisms/DonateBanner/DonateBanner.style.js index 2a0003c15..2a834a58f 100644 --- a/src/components/Organisms/DonateBanner/DonateBanner.style.js +++ b/src/components/Organisms/DonateBanner/DonateBanner.style.js @@ -7,20 +7,15 @@ import zIndex from '../../../theme/shared/zIndex'; import defaultBoxShadow from '../../../theme/shared/boxShadows'; import { playPauseReveal } from '../../../theme/shared/animations'; -const Container = styled.div` - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: auto; - background-color: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)}; - width: 100%; - padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('md')} ${paddingBelow} ${spacing('md')}`}; - @media ${({ theme }) => theme.allBreakpoints('M')} { - padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('l')} ${paddingBelow} ${spacing('l')}`}; - } -`; +import { + Container, + Wrapper, + TitleWrapperOuter, + TitleWrapperInner, + FormWrapper, + Error, + FormFieldset +} from '../shared/Banner.styles'; const InnerContainer = styled.div` position: relative; @@ -44,74 +39,6 @@ const InnerContainer = styled.div` ${playPauseReveal} `; -const Wrapper = styled.div` - position: relative; - text-align: center; - align-items: center; - display: block; - width: 100%; - max-width: 1216px; - margin-left: auto; - margin-right: auto; - - ${({ hasTopImage, shouldShowTitleSection }) => hasTopImage && !shouldShowTitleSection && css` - padding: 0; - `} - - ${({ noTitlesAtAll }) => noTitlesAtAll === true && css` - justify-content: center; - `}; - - - @media ${({ theme }) => theme.allBreakpoints('L')} { - display: flex; - padding: ${spacing('l')}; - gap: ${spacing('l')}; - flex-direction: row; - } -`; - -const TitleWrapperOuter = styled.div` - width: 100%; - display: flex; - font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)}; - padding-bottom: ${spacing('l')}; - @media ${({ theme }) => theme.allBreakpoints('L')} { - flex: 1 1 0; - width: auto; - padding: 0; - align-items: center; - order: ${({ donateOrientation }) => (donateOrientation === 'left' ? 2 : 1)}; - } -`; - -const TitleWrapperInner = styled.div` - position: relative; - text-align: left; -`; - -const FormWrapper = styled.div` - position: relative; - font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)}; - @media ${({ theme }) => theme.allBreakpoints('L')} { - flex: 1 1 0; - min-width: 0; - width: auto; - display: flex; - justify-content: ${({ donateOrientation }) => ( - donateOrientation === 'left' ? 'flex-start' : 'flex-end' - )}; - order: ${({ donateOrientation }) => (donateOrientation === 'left' ? 1 : 2)}; - } -`; - -const Error = styled(Text)` - color: ${({ theme }) => theme.color('red')}; - font-size: ${({ theme }) => theme.fontSize('s')}; - font-weight: 500; - margin-top: ${spacing('l')}; -`; - const Form = styled.form` position: relative; width: 100%; @@ -210,13 +137,6 @@ const MoneyBuys = styled.div` } `; -const FormFieldset = styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; -`; - const Label = styled(Text)` margin-bottom: ${spacing('sm')}; `; diff --git a/src/components/Organisms/DonateBanner/Form/Form.js b/src/components/Organisms/DonateBanner/Form/Form.js index 607231535..16282906a 100644 --- a/src/components/Organisms/DonateBanner/Form/Form.js +++ b/src/components/Organisms/DonateBanner/Form/Form.js @@ -200,10 +200,7 @@ const Signup = ({ const titleTag = donateWidgetIsTextOnly ? 'h1' : 'p'; return ( - +
theme.color(pageBackgroundColour)}; - width: 100%; - padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('md')} ${paddingBelow} ${spacing('md')}`}; - @media ${({ theme }) => theme.allBreakpoints('M')} { - padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('l')} ${paddingBelow} ${spacing('l')}`}; - } -`; +import { + Container, + Wrapper, + TitleWrapperOuter, + TitleWrapperInner, + FormWrapper, + Error, + FormFieldset +} from '../shared/Banner.styles'; const InnerContainer = styled.div` position: relative; @@ -30,86 +25,17 @@ const InnerContainer = styled.div` width: 100%; box-sizing: border-box; @media ${({ theme }) => theme.allBreakpoints('L')} { - padding: ${spacing('l')} clamp(${spacing('l')}, 3%, ${spacing('xxl')}); min-height: 700px; display: flex; flex-direction: column; justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; } - @media ${({ theme }) => theme.allBreakpoints('XL')} { - padding-left: ${spacing('xxl')}; - padding-right: ${spacing('xxl')}; - } - max-width: 1500px; - margin-left: auto; - margin-right: auto; - - ${playPauseReveal} -`; - -const Wrapper = styled.div` - position: relative; - text-align: center; - align-items: center; - display: block; - width: 100%; - - ${({ hasTopImage, showTitleSection }) => hasTopImage && !showTitleSection && css` - padding: 0; - `} - - ${({ noTitlesAtAll }) => noTitlesAtAll === true && css` - justify-content: center; - `}; - - @media ${({ theme }) => theme.allBreakpoints('L')} { - display: flex; - max-width: 1216px; - gap: ${spacing('l')}; - flex-direction: row; - } -`; -const TitleWrapperOuter = styled.div` - width: 100%; - display: flex; - font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)}; - padding-bottom: ${spacing('l')}; - @media ${({ theme }) => theme.allBreakpoints('L')} { - flex: 1 1 0; - width: auto; - padding: 0; - align-items: center; - order: ${({ orientation }) => (orientation === 'left' ? 2 : 1)}; - } -`; -const TitleWrapperInner = styled.div` - position: relative; - text-align: left; - ${({ $copyColor, theme }) => $copyColor && `color: ${theme.color($copyColor)};`} -`; - -const FormWrapper = styled.div` - position: relative; - font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)}; - @media ${({ theme }) => theme.allBreakpoints('L')} { - flex: 1 1 0; - min-width: 0; - width: auto; - display: flex; - justify-content: ${({ orientation }) => ( - orientation === 'left' ? 'flex-start' : 'flex-end' - )}; - order: ${({ orientation }) => (orientation === 'left' ? 1 : 2)}; - } -`; - -const Error = styled(Text)` - color: ${({ theme }) => theme.color('red')}; - font-size: ${({ theme }) => theme.fontSize('s')}; - font-weight: 500; - margin-top: ${spacing('l')}; + ${playPauseReveal} `; const Form = styled.form` @@ -165,13 +91,6 @@ const PrimaryTitleText = styled(Text)` font-family: ${({ theme, $emailWidgetIsTextOnly }) => theme.fontFamilies(($emailWidgetIsTextOnly ? 'Anton' : 'Montserrat'))}; `; -const FormFieldset = styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; -`; - const NameWrapper = styled.div` display: flex; flex-direction: column; diff --git a/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap b/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap index a99d3fc3d..b5a968ef6 100644 --- a/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap +++ b/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap @@ -198,6 +198,43 @@ exports[`Image banner left orientation renders correctly 1`] = ` padding: 2rem 1rem 2rem 1rem; } +.c2 { + position: relative; + text-align: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: block; + width: 100%; + max-width: 1216px; + margin-left: auto; + margin-right: auto; +} + +.c3 { + position: relative; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + .c1 { position: relative; background-color: #FFFFFF; @@ -206,9 +243,6 @@ exports[`Image banner left orientation renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - max-width: 1500px; - margin-left: auto; - margin-right: auto; } .c1:hover button[data-play-pause], @@ -218,22 +252,6 @@ exports[`Image banner left orientation renders correctly 1`] = ` transition-delay: 0s; } -.c2 { - position: relative; - text-align: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: block; - width: 100%; -} - -.c3 { - position: relative; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - .c4 { position: relative; width: 100%; @@ -273,24 +291,6 @@ exports[`Image banner left orientation renders correctly 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - .c11 { display: -webkit-box; display: -webkit-flex; @@ -420,38 +420,13 @@ exports[`Image banner left orientation renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - padding: 2rem clamp(2rem,3%,8rem); - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - } -} - -@media (min-width:1440px) { - .c1 { - padding-left: 8rem; - padding-right: 8rem; - } -} - @media (min-width:1024px) { .c2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - max-width: 1216px; + padding: 2rem; gap: 2rem; -webkit-flex-direction: row; -ms-flex-direction: row; @@ -480,6 +455,26 @@ exports[`Image banner left orientation renders correctly 1`] = ` } } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:740px) { .c4 { width: 100%; @@ -938,6 +933,43 @@ exports[`Image banner renders correctly 1`] = ` padding: 0rem 1rem 2rem 1rem; } +.c2 { + position: relative; + text-align: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: block; + width: 100%; + max-width: 1216px; + margin-left: auto; + margin-right: auto; +} + +.c3 { + position: relative; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + .c1 { position: relative; background-color: #FFFFFF; @@ -946,9 +978,6 @@ exports[`Image banner renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - max-width: 1500px; - margin-left: auto; - margin-right: auto; } .c1:hover button[data-play-pause], @@ -958,22 +987,6 @@ exports[`Image banner renders correctly 1`] = ` transition-delay: 0s; } -.c2 { - position: relative; - text-align: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: block; - width: 100%; -} - -.c3 { - position: relative; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - .c4 { position: relative; width: 100%; @@ -1013,24 +1026,6 @@ exports[`Image banner renders correctly 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; } -.c10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - .c11 { display: -webkit-box; display: -webkit-flex; @@ -1160,38 +1155,13 @@ exports[`Image banner renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - padding: 2rem clamp(2rem,3%,8rem); - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - } -} - -@media (min-width:1440px) { - .c1 { - padding-left: 8rem; - padding-right: 8rem; - } -} - @media (min-width:1024px) { .c2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - max-width: 1216px; + padding: 2rem; gap: 2rem; -webkit-flex-direction: row; -ms-flex-direction: row; @@ -1220,6 +1190,26 @@ exports[`Image banner renders correctly 1`] = ` } } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:740px) { .c4 { width: 100%; @@ -1678,6 +1668,43 @@ exports[`Text-only email widget renders correctly 1`] = ` padding: 2rem 1rem 2rem 1rem; } +.c2 { + position: relative; + text-align: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: block; + width: 100%; + max-width: 1216px; + margin-left: auto; + margin-right: auto; +} + +.c3 { + position: relative; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + .c1 { position: relative; background-color: #FFFFFF; @@ -1686,9 +1713,6 @@ exports[`Text-only email widget renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - max-width: 1500px; - margin-left: auto; - margin-right: auto; } .c1:hover button[data-play-pause], @@ -1698,22 +1722,6 @@ exports[`Text-only email widget renders correctly 1`] = ` transition-delay: 0s; } -.c2 { - position: relative; - text-align: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: block; - width: 100%; -} - -.c3 { - position: relative; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - .c4 { position: relative; width: 100%; @@ -1753,24 +1761,6 @@ exports[`Text-only email widget renders correctly 1`] = ` font-family: 'Anton',Impact,sans-serif; } -.c10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - .c11 { display: -webkit-box; display: -webkit-flex; @@ -1900,38 +1890,13 @@ exports[`Text-only email widget renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - padding: 2rem clamp(2rem,3%,8rem); - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - } -} - -@media (min-width:1440px) { - .c1 { - padding-left: 8rem; - padding-right: 8rem; - } -} - @media (min-width:1024px) { .c2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - max-width: 1216px; + padding: 2rem; gap: 2rem; -webkit-flex-direction: row; -ms-flex-direction: row; @@ -1960,6 +1925,26 @@ exports[`Text-only email widget renders correctly 1`] = ` } } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:740px) { .c4 { width: 100%; @@ -2418,6 +2403,43 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` padding: 2rem 1rem 2rem 1rem; } +.c2 { + position: relative; + text-align: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: block; + width: 100%; + max-width: 1216px; + margin-left: auto; + margin-right: auto; +} + +.c3 { + position: relative; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + .c1 { position: relative; background-color: #2C0230; @@ -2426,9 +2448,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - max-width: 1500px; - margin-left: auto; - margin-right: auto; } .c1:hover button[data-play-pause], @@ -2438,22 +2457,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` transition-delay: 0s; } -.c2 { - position: relative; - text-align: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: block; - width: 100%; -} - -.c3 { - position: relative; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - .c4 { position: relative; width: 100%; @@ -2493,24 +2496,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` font-family: 'Anton',Impact,sans-serif; } -.c10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - .c11 { display: -webkit-box; display: -webkit-flex; @@ -2640,38 +2625,13 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - padding: 2rem clamp(2rem,3%,8rem); - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - } -} - -@media (min-width:1440px) { - .c1 { - padding-left: 8rem; - padding-right: 8rem; - } -} - @media (min-width:1024px) { .c2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - max-width: 1216px; + padding: 2rem; gap: 2rem; -webkit-flex-direction: row; -ms-flex-direction: row; @@ -2700,6 +2660,26 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` } } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:740px) { .c4 { width: 100%; diff --git a/src/components/Organisms/shared/Banner.styles.js b/src/components/Organisms/shared/Banner.styles.js new file mode 100644 index 000000000..3ba241085 --- /dev/null +++ b/src/components/Organisms/shared/Banner.styles.js @@ -0,0 +1,108 @@ +import styled, { css } from 'styled-components'; + +import Text from '../../Atoms/Text/Text'; +import spacing from '../../../theme/shared/spacing'; + +/** + * Shared banner styles, currently used by EmailBanner and DonateBanner. + */ + +const Container = styled.div` + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: auto; + background-color: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)}; + width: 100%; + padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('md')} ${paddingBelow} ${spacing('md')}`}; + @media ${({ theme }) => theme.allBreakpoints('M')} { + padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('l')} ${paddingBelow} ${spacing('l')}`}; + } +`; + +const Wrapper = styled.div` + position: relative; + text-align: center; + align-items: center; + display: block; + width: 100%; + max-width: 1216px; + margin-left: auto; + margin-right: auto; + + ${({ hasTopImage, showTitleSection }) => hasTopImage && !showTitleSection && css` + padding: 0; + `} + + ${({ noTitlesAtAll }) => noTitlesAtAll === true && css` + justify-content: center; + `} + + @media ${({ theme }) => theme.allBreakpoints('L')} { + display: flex; + padding: ${spacing('l')}; + gap: ${spacing('l')}; + flex-direction: row; + } +`; + +const TitleWrapperOuter = styled.div` + width: 100%; + display: flex; + font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)}; + padding-bottom: ${spacing('l')}; + @media ${({ theme }) => theme.allBreakpoints('L')} { + flex: 1 1 0; + width: auto; + padding: 0; + align-items: center; + order: ${({ orientation }) => (orientation === 'left' ? 2 : 1)}; + } +`; + +const TitleWrapperInner = styled.div` + position: relative; + text-align: left; + ${({ $copyColor, theme }) => $copyColor && `color: ${theme.color($copyColor)};`} +`; + +const FormWrapper = styled.div` + position: relative; + font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)}; + @media ${({ theme }) => theme.allBreakpoints('L')} { + flex: 1 1 0; + min-width: 0; + width: auto; + display: flex; + justify-content: ${({ orientation }) => ( + orientation === 'left' ? 'flex-start' : 'flex-end' + )}; + order: ${({ orientation }) => (orientation === 'left' ? 1 : 2)}; + } +`; + +const Error = styled(Text)` + color: ${({ theme }) => theme.color('red')}; + font-size: ${({ theme }) => theme.fontSize('s')}; + font-weight: 500; + margin-top: ${spacing('l')}; +`; + +const FormFieldset = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +`; + +export { + Container, + Wrapper, + TitleWrapperOuter, + TitleWrapperInner, + FormWrapper, + Error, + FormFieldset +}; From 4f437a201e1b64b0664f3fd5d6136f547883a2eb Mon Sep 17 00:00:00 2001 From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com> Date: Thu, 5 Mar 2026 12:17:47 +0000 Subject: [PATCH 2/3] Moves another shared styled component, InnerContainer --- .../DonateBanner/DonateBanner.style.js | 24 +- .../__snapshots__/DonateBanner.test.js.snap | 312 +++++++++--------- .../EmailBanner/EmailBanner.style.js | 24 +- .../__snapshots__/EmailBanner.test.js.snap | 300 ++++++++--------- .../Organisms/shared/Banner.styles.js | 26 ++ 5 files changed, 336 insertions(+), 350 deletions(-) diff --git a/src/components/Organisms/DonateBanner/DonateBanner.style.js b/src/components/Organisms/DonateBanner/DonateBanner.style.js index 2a834a58f..94574e1b8 100644 --- a/src/components/Organisms/DonateBanner/DonateBanner.style.js +++ b/src/components/Organisms/DonateBanner/DonateBanner.style.js @@ -5,10 +5,10 @@ import Text from '../../Atoms/Text/Text'; import spacing from '../../../theme/shared/spacing'; import zIndex from '../../../theme/shared/zIndex'; import defaultBoxShadow from '../../../theme/shared/boxShadows'; -import { playPauseReveal } from '../../../theme/shared/animations'; import { Container, + InnerContainer, Wrapper, TitleWrapperOuter, TitleWrapperInner, @@ -17,28 +17,6 @@ import { FormFieldset } from '../shared/Banner.styles'; -const InnerContainer = styled.div` - position: relative; - background-color: ${({ theme, componentBackgroundColour }) => theme.color(componentBackgroundColour)}; - border-radius: 1rem; - overflow: hidden; - padding: none; - width: 100%; - box-sizing: border-box; - ${defaultBoxShadow()} - - @media ${({ theme }) => theme.allBreakpoints('L')} { - min-height: 700px; - display: flex; - flex-direction: column; - justify-content: center; - max-width: 1500px; - margin-left: auto; - margin-right: auto; - - ${playPauseReveal} -`; - const Form = styled.form` position: relative; width: 100%; diff --git a/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap b/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap index 82949f82e..1523aff61 100644 --- a/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap +++ b/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap @@ -165,6 +165,24 @@ exports[`Monthly donation renders correctly 1`] = ` padding: 0rem 1rem 2rem 1rem; } +.c1 { + position: relative; + background-color: #FFFFFF; + border-radius: 1rem; + overflow: hidden; + padding: none; + width: 100%; + box-sizing: border-box; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; +} + +.c1:hover button[data-play-pause], +.c1:focus-within button[data-play-pause] { + opacity: 0.8; + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + .c2 { position: relative; text-align: center; @@ -202,17 +220,6 @@ exports[`Monthly donation renders correctly 1`] = ` justify-content: flex-start; } -.c1 { - position: relative; - background-color: #FFFFFF; - border-radius: 1rem; - overflow: hidden; - padding: none; - width: 100%; - box-sizing: border-box; - box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -} - .c4 { position: relative; width: 100%; @@ -514,6 +521,26 @@ exports[`Monthly donation renders correctly 1`] = ` } } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:1024px) { .c2 { display: -webkit-box; @@ -549,33 +576,6 @@ exports[`Monthly donation renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 1500px; - margin-left: auto; - margin-right: auto; - } - - .c1:hover button[data-play-pause], - .c1:focus-within button[data-play-pause] { - opacity: 0.8; - -webkit-transition-delay: 0s; - transition-delay: 0s; - } -} - @media (min-width:740px) { .c4 { width: 100%; @@ -1039,6 +1039,24 @@ exports[`Single donation renders correctly 1`] = ` padding: 2rem 1rem 2rem 1rem; } +.c1 { + position: relative; + background-color: #FFFFFF; + border-radius: 1rem; + overflow: hidden; + padding: none; + width: 100%; + box-sizing: border-box; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; +} + +.c1:hover button[data-play-pause], +.c1:focus-within button[data-play-pause] { + opacity: 0.8; + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + .c2 { position: relative; text-align: center; @@ -1076,17 +1094,6 @@ exports[`Single donation renders correctly 1`] = ` justify-content: flex-start; } -.c1 { - position: relative; - background-color: #FFFFFF; - border-radius: 1rem; - overflow: hidden; - padding: none; - width: 100%; - box-sizing: border-box; - box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -} - .c4 { position: relative; width: 100%; @@ -1317,6 +1324,26 @@ exports[`Single donation renders correctly 1`] = ` } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:1024px) { .c2 { display: -webkit-box; @@ -1356,33 +1383,6 @@ exports[`Single donation renders correctly 1`] = ` } -@media (min-width:1024px) { - .c1 { - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 1500px; - margin-left: auto; - margin-right: auto; - } - - .c1:hover button[data-play-pause], - .c1:focus-within button[data-play-pause] { - opacity: 0.8; - -webkit-transition-delay: 0s; - transition-delay: 0s; - } -} - @media (min-width:740px) { .c4 { width: 100%; @@ -1849,6 +1849,24 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` padding: 0rem 1rem 0rem 1rem; } +.c1 { + position: relative; + background-color: #FFFFFF; + border-radius: 1rem; + overflow: hidden; + padding: none; + width: 100%; + box-sizing: border-box; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; +} + +.c1:hover button[data-play-pause], +.c1:focus-within button[data-play-pause] { + opacity: 0.8; + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + .c2 { position: relative; text-align: center; @@ -1886,17 +1904,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` justify-content: flex-start; } -.c1 { - position: relative; - background-color: #FFFFFF; - border-radius: 1rem; - overflow: hidden; - padding: none; - width: 100%; - box-sizing: border-box; - box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -} - .c4 { position: relative; width: 100%; @@ -2072,6 +2079,26 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` } } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:1024px) { .c2 { display: -webkit-box; @@ -2107,33 +2134,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 1500px; - margin-left: auto; - margin-right: auto; - } - - .c1:hover button[data-play-pause], - .c1:focus-within button[data-play-pause] { - opacity: 0.8; - -webkit-transition-delay: 0s; - transition-delay: 0s; - } -} - @media (min-width:740px) { .c4 { width: 100%; @@ -2541,6 +2541,24 @@ exports[`Text-only donate widget renders correctly 1`] = ` padding: 2rem 1rem 2rem 1rem; } +.c1 { + position: relative; + background-color: #2C0230; + border-radius: 1rem; + overflow: hidden; + padding: none; + width: 100%; + box-sizing: border-box; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; +} + +.c1:hover button[data-play-pause], +.c1:focus-within button[data-play-pause] { + opacity: 0.8; + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + .c2 { position: relative; text-align: center; @@ -2578,17 +2596,6 @@ exports[`Text-only donate widget renders correctly 1`] = ` justify-content: flex-start; } -.c1 { - position: relative; - background-color: #2C0230; - border-radius: 1rem; - overflow: hidden; - padding: none; - width: 100%; - box-sizing: border-box; - box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -} - .c4 { position: relative; width: 100%; @@ -3027,6 +3034,30 @@ exports[`Text-only donate widget renders correctly 1`] = ` } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + +@media (min-width:1024px) { + +} + @media (min-width:1024px) { .c2 { display: -webkit-box; @@ -3062,37 +3093,6 @@ exports[`Text-only donate widget renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 1500px; - margin-left: auto; - margin-right: auto; - } - - .c1:hover button[data-play-pause], - .c1:focus-within button[data-play-pause] { - opacity: 0.8; - -webkit-transition-delay: 0s; - transition-delay: 0s; - } -} - -@media (min-width:1024px) { - -} - @media (min-width:740px) { .c4 { width: 100%; diff --git a/src/components/Organisms/EmailBanner/EmailBanner.style.js b/src/components/Organisms/EmailBanner/EmailBanner.style.js index e67f9e65f..70f76fab5 100644 --- a/src/components/Organisms/EmailBanner/EmailBanner.style.js +++ b/src/components/Organisms/EmailBanner/EmailBanner.style.js @@ -4,10 +4,10 @@ import fontHelper from '../../../theme/crTheme/fontHelper'; import Text from '../../Atoms/Text/Text'; import spacing from '../../../theme/shared/spacing'; import defaultBoxShadow from '../../../theme/shared/boxShadows'; -import { playPauseReveal } from '../../../theme/shared/animations'; import { Container, + InnerContainer, Wrapper, TitleWrapperOuter, TitleWrapperInner, @@ -16,28 +16,6 @@ import { FormFieldset } from '../shared/Banner.styles'; -const InnerContainer = styled.div` - position: relative; - background-color: ${({ theme, componentBackgroundColour }) => theme.color(componentBackgroundColour)}; - border-radius: 1rem; - overflow: hidden; - padding: none; - width: 100%; - box-sizing: border-box; - @media ${({ theme }) => theme.allBreakpoints('L')} { - min-height: 700px; - display: flex; - flex-direction: column; - justify-content: center; - max-width: 1500px; - margin-left: auto; - margin-right: auto; - } - - - ${playPauseReveal} -`; - const Form = styled.form` position: relative; width: 100%; diff --git a/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap b/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap index b5a968ef6..f096c8953 100644 --- a/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap +++ b/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap @@ -198,6 +198,24 @@ exports[`Image banner left orientation renders correctly 1`] = ` padding: 2rem 1rem 2rem 1rem; } +.c1 { + position: relative; + background-color: #FFFFFF; + border-radius: 1rem; + overflow: hidden; + padding: none; + width: 100%; + box-sizing: border-box; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; +} + +.c1:hover button[data-play-pause], +.c1:focus-within button[data-play-pause] { + opacity: 0.8; + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + .c2 { position: relative; text-align: center; @@ -235,23 +253,6 @@ exports[`Image banner left orientation renders correctly 1`] = ` justify-content: flex-start; } -.c1 { - position: relative; - background-color: #FFFFFF; - border-radius: 1rem; - overflow: hidden; - padding: none; - width: 100%; - box-sizing: border-box; -} - -.c1:hover button[data-play-pause], -.c1:focus-within button[data-play-pause] { - opacity: 0.8; - -webkit-transition-delay: 0s; - transition-delay: 0s; -} - .c4 { position: relative; width: 100%; @@ -420,6 +421,26 @@ exports[`Image banner left orientation renders correctly 1`] = ` } } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:1024px) { .c2 { display: -webkit-box; @@ -455,26 +476,6 @@ exports[`Image banner left orientation renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 1500px; - margin-left: auto; - margin-right: auto; - } -} - @media (min-width:740px) { .c4 { width: 100%; @@ -933,6 +934,24 @@ exports[`Image banner renders correctly 1`] = ` padding: 0rem 1rem 2rem 1rem; } +.c1 { + position: relative; + background-color: #FFFFFF; + border-radius: 1rem; + overflow: hidden; + padding: none; + width: 100%; + box-sizing: border-box; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; +} + +.c1:hover button[data-play-pause], +.c1:focus-within button[data-play-pause] { + opacity: 0.8; + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + .c2 { position: relative; text-align: center; @@ -970,23 +989,6 @@ exports[`Image banner renders correctly 1`] = ` justify-content: flex-start; } -.c1 { - position: relative; - background-color: #FFFFFF; - border-radius: 1rem; - overflow: hidden; - padding: none; - width: 100%; - box-sizing: border-box; -} - -.c1:hover button[data-play-pause], -.c1:focus-within button[data-play-pause] { - opacity: 0.8; - -webkit-transition-delay: 0s; - transition-delay: 0s; -} - .c4 { position: relative; width: 100%; @@ -1155,6 +1157,26 @@ exports[`Image banner renders correctly 1`] = ` } } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:1024px) { .c2 { display: -webkit-box; @@ -1190,26 +1212,6 @@ exports[`Image banner renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 1500px; - margin-left: auto; - margin-right: auto; - } -} - @media (min-width:740px) { .c4 { width: 100%; @@ -1668,6 +1670,24 @@ exports[`Text-only email widget renders correctly 1`] = ` padding: 2rem 1rem 2rem 1rem; } +.c1 { + position: relative; + background-color: #FFFFFF; + border-radius: 1rem; + overflow: hidden; + padding: none; + width: 100%; + box-sizing: border-box; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; +} + +.c1:hover button[data-play-pause], +.c1:focus-within button[data-play-pause] { + opacity: 0.8; + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + .c2 { position: relative; text-align: center; @@ -1705,23 +1725,6 @@ exports[`Text-only email widget renders correctly 1`] = ` justify-content: flex-start; } -.c1 { - position: relative; - background-color: #FFFFFF; - border-radius: 1rem; - overflow: hidden; - padding: none; - width: 100%; - box-sizing: border-box; -} - -.c1:hover button[data-play-pause], -.c1:focus-within button[data-play-pause] { - opacity: 0.8; - -webkit-transition-delay: 0s; - transition-delay: 0s; -} - .c4 { position: relative; width: 100%; @@ -1890,6 +1893,26 @@ exports[`Text-only email widget renders correctly 1`] = ` } } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:1024px) { .c2 { display: -webkit-box; @@ -1925,26 +1948,6 @@ exports[`Text-only email widget renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 1500px; - margin-left: auto; - margin-right: auto; - } -} - @media (min-width:740px) { .c4 { width: 100%; @@ -2403,6 +2406,24 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` padding: 2rem 1rem 2rem 1rem; } +.c1 { + position: relative; + background-color: #2C0230; + border-radius: 1rem; + overflow: hidden; + padding: none; + width: 100%; + box-sizing: border-box; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; +} + +.c1:hover button[data-play-pause], +.c1:focus-within button[data-play-pause] { + opacity: 0.8; + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + .c2 { position: relative; text-align: center; @@ -2440,23 +2461,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` justify-content: flex-start; } -.c1 { - position: relative; - background-color: #2C0230; - border-radius: 1rem; - overflow: hidden; - padding: none; - width: 100%; - box-sizing: border-box; -} - -.c1:hover button[data-play-pause], -.c1:focus-within button[data-play-pause] { - opacity: 0.8; - -webkit-transition-delay: 0s; - transition-delay: 0s; -} - .c4 { position: relative; width: 100%; @@ -2625,6 +2629,26 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` } } +@media (min-width:1024px) { + .c1 { + min-height: 700px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } +} + @media (min-width:1024px) { .c2 { display: -webkit-box; @@ -2660,26 +2684,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` } } -@media (min-width:1024px) { - .c1 { - min-height: 700px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 1500px; - margin-left: auto; - margin-right: auto; - } -} - @media (min-width:740px) { .c4 { width: 100%; diff --git a/src/components/Organisms/shared/Banner.styles.js b/src/components/Organisms/shared/Banner.styles.js index 3ba241085..f1a89349a 100644 --- a/src/components/Organisms/shared/Banner.styles.js +++ b/src/components/Organisms/shared/Banner.styles.js @@ -2,6 +2,8 @@ import styled, { css } from 'styled-components'; import Text from '../../Atoms/Text/Text'; import spacing from '../../../theme/shared/spacing'; +import defaultBoxShadow from '../../../theme/shared/boxShadows'; +import { playPauseReveal } from '../../../theme/shared/animations'; /** * Shared banner styles, currently used by EmailBanner and DonateBanner. @@ -22,6 +24,29 @@ const Container = styled.div` } `; +const InnerContainer = styled.div` + position: relative; + background-color: ${({ theme, componentBackgroundColour }) => theme.color(componentBackgroundColour)}; + border-radius: 1rem; + overflow: hidden; + padding: none; + width: 100%; + box-sizing: border-box; + ${defaultBoxShadow()} + + @media ${({ theme }) => theme.allBreakpoints('L')} { + min-height: 700px; + display: flex; + flex-direction: column; + justify-content: center; + max-width: 1500px; + margin-left: auto; + margin-right: auto; + } + + ${playPauseReveal} +`; + const Wrapper = styled.div` position: relative; text-align: center; @@ -99,6 +124,7 @@ const FormFieldset = styled.div` export { Container, + InnerContainer, Wrapper, TitleWrapperOuter, TitleWrapperInner, From c957a8b57aa58ed1161a9afc41d2d3f8e0ff199e Mon Sep 17 00:00:00 2001 From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com> Date: Thu, 5 Mar 2026 13:03:59 +0000 Subject: [PATCH 3/3] Corrects the orientation prop - makes it transient, and removes it being drilled where unnecessary --- .../Organisms/DonateBanner/DonateBanner.js | 3 +-- src/components/Organisms/DonateBanner/Form/Form.js | 3 +-- .../__snapshots__/DonateBanner.test.js.snap | 8 -------- src/components/Organisms/EmailBanner/EmailBanner.js | 3 +-- src/components/Organisms/EmailBanner/Form/Form.js | 6 +----- .../__snapshots__/EmailBanner.test.js.snap | 12 ------------ src/components/Organisms/shared/Banner.styles.js | 8 ++++---- 7 files changed, 8 insertions(+), 35 deletions(-) diff --git a/src/components/Organisms/DonateBanner/DonateBanner.js b/src/components/Organisms/DonateBanner/DonateBanner.js index e017390a4..e3c576554 100644 --- a/src/components/Organisms/DonateBanner/DonateBanner.js +++ b/src/components/Organisms/DonateBanner/DonateBanner.js @@ -112,14 +112,13 @@ const DonateBanner = ({ )} {shouldShowTitleSection && ( - + {showCopy && ( <> diff --git a/src/components/Organisms/DonateBanner/Form/Form.js b/src/components/Organisms/DonateBanner/Form/Form.js index 16282906a..0e580b884 100644 --- a/src/components/Organisms/DonateBanner/Form/Form.js +++ b/src/components/Organisms/DonateBanner/Form/Form.js @@ -200,9 +200,8 @@ const Signup = ({ const titleTag = donateWidgetIsTextOnly ? 'h1' : 'p'; return ( - + submitDonation( diff --git a/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap b/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap index 1523aff61..2a486ac1d 100644 --- a/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap +++ b/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap @@ -654,11 +654,9 @@ exports[`Monthly donation renders correctly 1`] = `
{showTitleSection && ( - + {title && ( + {isSubmitSuccessful && }
(orientation === 'left' ? 2 : 1)}; + order: ${({ $orientation }) => ($orientation === 'left' ? 2 : 1)}; } `; @@ -101,10 +101,10 @@ const FormWrapper = styled.div` min-width: 0; width: auto; display: flex; - justify-content: ${({ orientation }) => ( - orientation === 'left' ? 'flex-start' : 'flex-end' + justify-content: ${({ $orientation }) => ( + $orientation === 'left' ? 'flex-start' : 'flex-end' )}; - order: ${({ orientation }) => (orientation === 'left' ? 1 : 2)}; + order: ${({ $orientation }) => ($orientation === 'left' ? 1 : 2)}; } `;