From 95e16beac7f446c1dabdf39a88dab1b0824bcbdc Mon Sep 17 00:00:00 2001 From: AndyEPhipps Date: Mon, 18 May 2026 17:03:30 +0100 Subject: [PATCH 1/4] fix: add boxshadows to SM article teasers, add transition to snippet --- .../__snapshots__/Accordion.test.js.snap | 2 + .../ArticleTeaser/ArticleTeaser.style.js | 18 +++++---- .../ArticleTeaser/ArticleTeaser.test.js | 36 +++++++++-------- .../__snapshots__/CTAMultiCard.test.js.snap | 40 +++++++++---------- .../__snapshots__/CTASingleCard.test.js.snap | 4 ++ .../Card/__snapshots__/Card.test.js.snap | 6 +++ .../CardDs/__snapshots__/CardDs.test.js.snap | 8 ++++ .../Molecules/Descriptor/Descriptor.test.js | 2 + .../__snapshots__/HeroBanner.test.js.snap | 16 ++++++++ .../__snapshots__/QuoteSlice.test.js.snap | 4 ++ .../SingleMessageDs.test.js.snap | 4 ++ .../Donate/__snapshots__/Donate.test.js.snap | 20 ++++++++++ .../__snapshots__/DonateBanner.test.js.snap | 16 ++++++++ .../__snapshots__/EmailBanner.test.js.snap | 16 ++++++++ .../RichtextCarousel/RichtextCarousel.test.js | 4 ++ .../__snapshots__/WYMDCarousel.test.js.snap | 4 ++ src/theme/shared/boxShadows.js | 1 + 17 files changed, 157 insertions(+), 44 deletions(-) diff --git a/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap b/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap index cf95463b4..ed0db7b1b 100644 --- a/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap +++ b/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap @@ -120,6 +120,8 @@ exports[`renders correctly 1`] = ` .c0 { border-radius: 1rem; background: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js index 3e8afab96..411121f71 100644 --- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js +++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js @@ -72,13 +72,19 @@ const Link = styled(link)` background-color: ${({ theme }) => theme.color('black')}; } } - - @media ${({ theme }) => theme.allBreakpoints('M')} { - ${bounceUpAnimation(true, 10, 2, true)}; + ${InnerWrapper}{ + ${defaultBoxShadow()} + } + + &:hover { ${InnerWrapper} { - ${defaultBoxShadow()} + ${defaultBoxShadow(true)} } + } + + @media ${({ theme }) => theme.allBreakpoints('M')} { + ${bounceUpAnimation(true, 10, 2, true)}; ${Image} img { // Only set up imageZoom pre-zoom defaults when we actually need them: @@ -88,10 +94,6 @@ const Link = styled(link)` } &:hover { - ${InnerWrapper} { - ${defaultBoxShadow(true)} - } - ${Image} img { ${({ isNewsTeaser }) => css` ${imageZoom({ zoomed: true, finalScale: (isNewsTeaser ? 1.04 : 1) })} diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js index 0857eea2d..08470d8ba 100644 --- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js +++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js @@ -246,6 +246,16 @@ it('renders article teaser correctly', () => { background-color: #E52630; } + .c2 .c3 { + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; + } + + .c2:hover .c3 { + box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem; + } + .c0 { width: 100%; height: 100%; @@ -382,10 +392,6 @@ it('renders article teaser correctly', () => { transform: translateY(-10px); } - .c2 .c3 { - box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; - } - .c2 .c7 img { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); @@ -395,10 +401,6 @@ it('renders article teaser correctly', () => { transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16); } - .c2:hover .c3 { - box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem; - } - .c2:hover .c7 img { -webkit-transform: scale(1.04); -ms-transform: scale(1.04); @@ -779,6 +781,16 @@ it('renders press realese correctly', () => { background-color: #E52630; } + .c2 .c3 { + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; + } + + .c2:hover .c3 { + box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem; + } + .c0 { width: 100%; height: 100%; @@ -912,10 +924,6 @@ it('renders press realese correctly', () => { transform: translateY(-10px); } - .c2 .c3 { - box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; - } - .c2 .c7 img { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); @@ -925,10 +933,6 @@ it('renders press realese correctly', () => { transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16); } - .c2:hover .c3 { - box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem; - } - .c2:hover .c7 img { -webkit-transform: scale(1); -ms-transform: scale(1); diff --git a/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap b/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap index 77a90edac..c87e0fbd8 100644 --- a/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +++ b/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap @@ -17,7 +17,7 @@ exports[`handles data structure correctly 1`] = ` className="CTACardstyle__CardWrapper-sc-si8xx1-4 hxglwr" >
{ display: flex; background-color: #FFFFFF; border-radius: 1rem; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } diff --git a/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap b/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap index 63508695f..d7a66f32e 100644 --- a/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap +++ b/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap @@ -116,6 +116,8 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = ` border-radius: 1rem; padding: 2rem; color: #000000; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; background-color: #FFFFFF; } @@ -178,6 +180,8 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = ` max-width: 1500px; border-radius: 1rem; overflow: hidden; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; height: 75vh; min-height: 600px; @@ -445,6 +449,8 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = ` border-radius: 1rem; padding: 2rem; color: #000000; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; background-color: #FFFFFF; } @@ -507,6 +513,8 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = ` max-width: 1500px; border-radius: 1rem; overflow: hidden; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; height: auto; min-height: 450px; @@ -756,6 +764,8 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = ` border-radius: 1rem; padding: 3rem 2rem; color: #000000; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; background-color: #2C0230; text-align: center; @@ -826,6 +836,8 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = ` max-width: 1500px; border-radius: 1rem; overflow: hidden; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1045,6 +1057,8 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = ` border-radius: 1rem; padding: 2rem; color: #000000; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; background-color: #FFFFFF; } @@ -1127,6 +1141,8 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = ` max-width: 1500px; border-radius: 1rem; overflow: hidden; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; height: 75vh; min-height: 600px; diff --git a/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap b/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap index cfb2800b0..80023a394 100644 --- a/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap +++ b/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap @@ -141,6 +141,8 @@ exports[`renders a Quote Slice with basic props 1`] = ` max-height: 750px; max-width: 1500px; border-radius: 1rem; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -347,6 +349,8 @@ exports[`renders an empty Quote Slice with no options set 1`] = ` max-height: 750px; max-width: 1500px; border-radius: 1rem; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } diff --git a/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap b/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap index 58961892e..eb24806fa 100644 --- a/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap +++ b/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap @@ -157,6 +157,8 @@ exports[`renders correctly 1`] = ` .c2 img { border-radius: 1rem; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -187,6 +189,8 @@ exports[`renders correctly 1`] = ` -ms-flex-direction: column; flex-direction: column; border-radius: 1rem; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; background: #FFFFFF; padding-bottom: calc(2rem + 1.5rem); diff --git a/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap b/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap index b95a11478..34cadb29f 100644 --- a/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +++ b/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap @@ -227,6 +227,8 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; border-radius: 0.5rem; margin-top: 1rem; @@ -337,6 +339,8 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend text-decoration: none; border-radius: 2rem; border: none; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -webkit-appearance: none; -moz-appearance: none; @@ -1074,6 +1078,8 @@ exports[`Monthly donation renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; border-radius: 0.5rem; margin-top: 1rem; @@ -1188,6 +1194,8 @@ exports[`Monthly donation renders correctly 1`] = ` text-decoration: none; border-radius: 2rem; border: none; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -webkit-appearance: none; -moz-appearance: none; @@ -1854,6 +1862,8 @@ exports[`Single donation renders correctly 1`] = ` font-family: 'Anton',Impact,sans-serif; font-weight: normal; border-radius: 0.5rem; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; height: auto; } @@ -1880,6 +1890,8 @@ exports[`Single donation renders correctly 1`] = ` font-family: 'Anton',Impact,sans-serif; font-weight: normal; border-radius: 0.5rem; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; height: auto; background-color: #2042AD; @@ -1959,6 +1971,8 @@ exports[`Single donation renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; border-radius: 0.5rem; margin-top: 1rem; @@ -2100,6 +2114,8 @@ exports[`Single donation renders correctly 1`] = ` text-decoration: none; border-radius: 2rem; border: none; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -webkit-appearance: none; -moz-appearance: none; @@ -2792,6 +2808,8 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; border-radius: 0.5rem; margin-top: 1rem; @@ -2902,6 +2920,8 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` text-decoration: none; border-radius: 2rem; border: none; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -webkit-appearance: none; -moz-appearance: none; diff --git a/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap b/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap index 0af6dbee7..188541f3b 100644 --- a/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap +++ b/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap @@ -181,6 +181,8 @@ exports[`Monthly donation renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -232,6 +234,8 @@ exports[`Monthly donation renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; margin-left: auto; margin-right: auto; @@ -1082,6 +1086,8 @@ exports[`Single donation renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1133,6 +1139,8 @@ exports[`Single donation renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; margin-left: auto; margin-right: auto; @@ -1919,6 +1927,8 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1970,6 +1980,8 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; margin-left: auto; margin-right: auto; @@ -2543,6 +2555,8 @@ exports[`Text-only donate widget renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -2594,6 +2608,8 @@ exports[`Text-only donate widget renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; margin-left: auto; margin-right: auto; diff --git a/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap b/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap index 4bdb63d1f..97ff9fb56 100644 --- a/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap +++ b/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap @@ -214,6 +214,8 @@ exports[`Image banner left orientation renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -265,6 +267,8 @@ exports[`Image banner left orientation renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; text-align: left; margin-left: auto; @@ -977,6 +981,8 @@ exports[`Image banner renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1028,6 +1034,8 @@ exports[`Image banner renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; text-align: left; margin-left: auto; @@ -1740,6 +1748,8 @@ exports[`Text-only email widget renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1791,6 +1801,8 @@ exports[`Text-only email widget renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; text-align: left; margin-left: auto; @@ -2503,6 +2515,8 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -2554,6 +2568,8 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; text-align: left; margin-left: auto; diff --git a/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js b/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js index 8e4afc4e9..f91e6de5d 100644 --- a/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js +++ b/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js @@ -25,6 +25,8 @@ it('renders default padding version correctly', () => { padding: 2.5rem 2rem 3.5rem; margin: 0 auto; border-radius: 20px; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -302,6 +304,8 @@ it('renders custom padding + background colour version correctly', () => { padding: 2.5rem 2rem 3.5rem; margin: 0 auto; border-radius: 20px; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } diff --git a/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap b/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap index 2c6f1380d..45bcbe9b0 100644 --- a/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap +++ b/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap @@ -502,6 +502,8 @@ exports[`renders the customised padding version correctly: padding: 2rem; margin: 0 auto; border-radius: 20px; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1846,6 +1848,8 @@ exports[`renders the default padding version correctly: padding: 2rem; margin: 0 auto; border-radius: 20px; + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } diff --git a/src/theme/shared/boxShadows.js b/src/theme/shared/boxShadows.js index bddc72095..c97d1b42e 100644 --- a/src/theme/shared/boxShadows.js +++ b/src/theme/shared/boxShadows.js @@ -11,6 +11,7 @@ import { css } from 'styled-components'; * @returns {css} template literal */ const defaultBoxShadow = (hovered = false) => css` + ${!hovered && 'transition: box-shadow 0.3s;'} box-shadow: rgba(0, 0, 0, ${hovered ? 0.25 : 0.15}) 0px 0px 1rem; `; From 25f44d3ee68d39eee8d764f4771b3856b081b4b6 Mon Sep 17 00:00:00 2001 From: AndyEPhipps Date: Mon, 18 May 2026 18:03:20 +0100 Subject: [PATCH 2/4] Unbork things --- .../__snapshots__/Accordion.test.js.snap | 2 - .../ArticleTeaser/ArticleTeaser.style.js | 7 ++++ .../ArticleTeaser/ArticleTeaser.test.js | 18 +++++++-- .../__snapshots__/CTAMultiCard.test.js.snap | 40 +++++++++---------- .../__snapshots__/CTASingleCard.test.js.snap | 4 -- .../Card/__snapshots__/Card.test.js.snap | 6 --- .../CardDs/__snapshots__/CardDs.test.js.snap | 8 ---- .../Molecules/Descriptor/Descriptor.test.js | 2 - .../__snapshots__/HeroBanner.test.js.snap | 16 -------- .../__snapshots__/QuoteSlice.test.js.snap | 4 -- .../SingleMessageDs.test.js.snap | 4 -- .../Donate/__snapshots__/Donate.test.js.snap | 20 ---------- .../__snapshots__/DonateBanner.test.js.snap | 16 -------- .../__snapshots__/EmailBanner.test.js.snap | 16 -------- .../RichtextCarousel/RichtextCarousel.test.js | 4 -- .../__snapshots__/WYMDCarousel.test.js.snap | 4 -- src/theme/shared/animations.js | 2 +- src/theme/shared/boxShadows.js | 1 - 18 files changed, 42 insertions(+), 132 deletions(-) diff --git a/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap b/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap index ed0db7b1b..cf95463b4 100644 --- a/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap +++ b/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap @@ -120,8 +120,6 @@ exports[`renders correctly 1`] = ` .c0 { border-radius: 1rem; background: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js index 411121f71..f20e1640d 100644 --- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js +++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js @@ -7,6 +7,7 @@ import link from '../../Atoms/Link/Link'; import { bounceUpAnimation, imageZoom } from '../../../theme/shared/animations'; import { CtaTextUnderline, CtaIconWrapper } from '../shared/ctaText/ctaText.style'; import { ArrowIconWrapper } from '../shared/ctaArrow/CtaArrowCircle.style'; +import { breakpointValues } from '../../../theme/shared/allBreakpoints'; const Image = styled(Picture)` display: flex; @@ -75,6 +76,12 @@ const Link = styled(link)` ${InnerWrapper}{ ${defaultBoxShadow()} + + @media (max-width: ${breakpointValues.M - 1}px) { + // Can at least add this to breakpoints where we're not doing the bounceUp transition + // contained within a media query to stop its increased specificity from overriding bounceUp's own rules: + transition: box-shadow 0.3s; + } } &:hover { diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js index 08470d8ba..44deb29ba 100644 --- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js +++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js @@ -247,8 +247,6 @@ it('renders article teaser correctly', () => { } .c2 .c3 { - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -375,6 +373,13 @@ it('renders article teaser correctly', () => { } } + @media (max-width:739px) { + .c2 .c3 { + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; + } + } + @media (min-width:740px) { .c2 > div { -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35); @@ -782,8 +787,6 @@ it('renders press realese correctly', () => { } .c2 .c3 { - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -907,6 +910,13 @@ it('renders press realese correctly', () => { } } + @media (max-width:739px) { + .c2 .c3 { + -webkit-transition: box-shadow 0.3s; + transition: box-shadow 0.3s; + } + } + @media (min-width:740px) { .c2 > div { -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35); diff --git a/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap b/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap index c87e0fbd8..77a90edac 100644 --- a/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +++ b/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap @@ -17,7 +17,7 @@ exports[`handles data structure correctly 1`] = ` className="CTACardstyle__CardWrapper-sc-si8xx1-4 hxglwr" >
{ display: flex; background-color: #FFFFFF; border-radius: 1rem; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } diff --git a/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap b/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap index d7a66f32e..63508695f 100644 --- a/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap +++ b/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap @@ -116,8 +116,6 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = ` border-radius: 1rem; padding: 2rem; color: #000000; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; background-color: #FFFFFF; } @@ -180,8 +178,6 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = ` max-width: 1500px; border-radius: 1rem; overflow: hidden; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; height: 75vh; min-height: 600px; @@ -449,8 +445,6 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = ` border-radius: 1rem; padding: 2rem; color: #000000; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; background-color: #FFFFFF; } @@ -513,8 +507,6 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = ` max-width: 1500px; border-radius: 1rem; overflow: hidden; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; height: auto; min-height: 450px; @@ -764,8 +756,6 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = ` border-radius: 1rem; padding: 3rem 2rem; color: #000000; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; background-color: #2C0230; text-align: center; @@ -836,8 +826,6 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = ` max-width: 1500px; border-radius: 1rem; overflow: hidden; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1057,8 +1045,6 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = ` border-radius: 1rem; padding: 2rem; color: #000000; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; background-color: #FFFFFF; } @@ -1141,8 +1127,6 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = ` max-width: 1500px; border-radius: 1rem; overflow: hidden; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; height: 75vh; min-height: 600px; diff --git a/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap b/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap index 80023a394..cfb2800b0 100644 --- a/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap +++ b/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap @@ -141,8 +141,6 @@ exports[`renders a Quote Slice with basic props 1`] = ` max-height: 750px; max-width: 1500px; border-radius: 1rem; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -349,8 +347,6 @@ exports[`renders an empty Quote Slice with no options set 1`] = ` max-height: 750px; max-width: 1500px; border-radius: 1rem; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } diff --git a/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap b/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap index eb24806fa..58961892e 100644 --- a/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap +++ b/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap @@ -157,8 +157,6 @@ exports[`renders correctly 1`] = ` .c2 img { border-radius: 1rem; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -189,8 +187,6 @@ exports[`renders correctly 1`] = ` -ms-flex-direction: column; flex-direction: column; border-radius: 1rem; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; background: #FFFFFF; padding-bottom: calc(2rem + 1.5rem); diff --git a/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap b/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap index 34cadb29f..b95a11478 100644 --- a/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +++ b/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap @@ -227,8 +227,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; border-radius: 0.5rem; margin-top: 1rem; @@ -339,8 +337,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend text-decoration: none; border-radius: 2rem; border: none; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -webkit-appearance: none; -moz-appearance: none; @@ -1078,8 +1074,6 @@ exports[`Monthly donation renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; border-radius: 0.5rem; margin-top: 1rem; @@ -1194,8 +1188,6 @@ exports[`Monthly donation renders correctly 1`] = ` text-decoration: none; border-radius: 2rem; border: none; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -webkit-appearance: none; -moz-appearance: none; @@ -1862,8 +1854,6 @@ exports[`Single donation renders correctly 1`] = ` font-family: 'Anton',Impact,sans-serif; font-weight: normal; border-radius: 0.5rem; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; height: auto; } @@ -1890,8 +1880,6 @@ exports[`Single donation renders correctly 1`] = ` font-family: 'Anton',Impact,sans-serif; font-weight: normal; border-radius: 0.5rem; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; height: auto; background-color: #2042AD; @@ -1971,8 +1959,6 @@ exports[`Single donation renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; border-radius: 0.5rem; margin-top: 1rem; @@ -2114,8 +2100,6 @@ exports[`Single donation renders correctly 1`] = ` text-decoration: none; border-radius: 2rem; border: none; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -webkit-appearance: none; -moz-appearance: none; @@ -2808,8 +2792,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; border-radius: 0.5rem; margin-top: 1rem; @@ -2920,8 +2902,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` text-decoration: none; border-radius: 2rem; border: none; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; -webkit-appearance: none; -moz-appearance: none; diff --git a/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap b/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap index 188541f3b..0af6dbee7 100644 --- a/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap +++ b/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap @@ -181,8 +181,6 @@ exports[`Monthly donation renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -234,8 +232,6 @@ exports[`Monthly donation renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; margin-left: auto; margin-right: auto; @@ -1086,8 +1082,6 @@ exports[`Single donation renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1139,8 +1133,6 @@ exports[`Single donation renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; margin-left: auto; margin-right: auto; @@ -1927,8 +1919,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1980,8 +1970,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; margin-left: auto; margin-right: auto; @@ -2555,8 +2543,6 @@ exports[`Text-only donate widget renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -2608,8 +2594,6 @@ exports[`Text-only donate widget renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; margin-left: auto; margin-right: auto; diff --git a/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap b/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap index 97ff9fb56..4bdb63d1f 100644 --- a/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap +++ b/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap @@ -214,8 +214,6 @@ exports[`Image banner left orientation renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -267,8 +265,6 @@ exports[`Image banner left orientation renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; text-align: left; margin-left: auto; @@ -981,8 +977,6 @@ exports[`Image banner renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1034,8 +1028,6 @@ exports[`Image banner renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; text-align: left; margin-left: auto; @@ -1748,8 +1740,6 @@ exports[`Text-only email widget renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1801,8 +1791,6 @@ exports[`Text-only email widget renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; text-align: left; margin-left: auto; @@ -2515,8 +2503,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` padding: none; width: 100%; box-sizing: border-box; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -2568,8 +2554,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = ` position: relative; width: 100%; background-color: #FFFFFF; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; text-align: left; margin-left: auto; diff --git a/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js b/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js index f91e6de5d..8e4afc4e9 100644 --- a/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js +++ b/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js @@ -25,8 +25,6 @@ it('renders default padding version correctly', () => { padding: 2.5rem 2rem 3.5rem; margin: 0 auto; border-radius: 20px; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -304,8 +302,6 @@ it('renders custom padding + background colour version correctly', () => { padding: 2.5rem 2rem 3.5rem; margin: 0 auto; border-radius: 20px; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } diff --git a/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap b/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap index 45bcbe9b0..2c6f1380d 100644 --- a/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap +++ b/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap @@ -502,8 +502,6 @@ exports[`renders the customised padding version correctly: padding: 2rem; margin: 0 auto; border-radius: 20px; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } @@ -1848,8 +1846,6 @@ exports[`renders the default padding version correctly: padding: 2rem; margin: 0 auto; border-radius: 20px; - -webkit-transition: box-shadow 0.3s; - transition: box-shadow 0.3s; box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } diff --git a/src/theme/shared/animations.js b/src/theme/shared/animations.js index f2b707fd6..a38ea69ed 100644 --- a/src/theme/shared/animations.js +++ b/src/theme/shared/animations.js @@ -170,7 +170,7 @@ const bounceUpAnimation = (animateScale, const overshoot = 1.55 + (bounceIntensity * 0.4); const duration = 0.2 + (bounceIntensity * 0.1); - // The Hero Banner and ArticleTeaser requires us to apply the transform inside + // The Hero Banner requires us to apply the transform inside // the anchor, in order to address the 'infinity bounce' bug if (targetChild) { return css` diff --git a/src/theme/shared/boxShadows.js b/src/theme/shared/boxShadows.js index c97d1b42e..bddc72095 100644 --- a/src/theme/shared/boxShadows.js +++ b/src/theme/shared/boxShadows.js @@ -11,7 +11,6 @@ import { css } from 'styled-components'; * @returns {css} template literal */ const defaultBoxShadow = (hovered = false) => css` - ${!hovered && 'transition: box-shadow 0.3s;'} box-shadow: rgba(0, 0, 0, ${hovered ? 0.25 : 0.15}) 0px 0px 1rem; `; From cc251b05fed717823c141ef7a341b4791262bb93 Mon Sep 17 00:00:00 2001 From: AndyEPhipps Date: Mon, 18 May 2026 18:05:08 +0100 Subject: [PATCH 3/4] Formatting --- src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js index f20e1640d..5209d3e95 100644 --- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js +++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js @@ -78,8 +78,8 @@ const Link = styled(link)` ${defaultBoxShadow()} @media (max-width: ${breakpointValues.M - 1}px) { - // Can at least add this to breakpoints where we're not doing the bounceUp transition - // contained within a media query to stop its increased specificity from overriding bounceUp's own rules: + // Can at least add this to breakpoints where we're not doing the bounceUp transition, contained + // within a media query to stop its increased specificity from overriding bounceUp's own rules: transition: box-shadow 0.3s; } } From b4097d87cd6e20c82d406795df13e072d0c171a1 Mon Sep 17 00:00:00 2001 From: AndyEPhipps Date: Mon, 18 May 2026 18:06:24 +0100 Subject: [PATCH 4/4] Readd comment --- src/theme/shared/animations.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/shared/animations.js b/src/theme/shared/animations.js index a38ea69ed..f2b707fd6 100644 --- a/src/theme/shared/animations.js +++ b/src/theme/shared/animations.js @@ -170,7 +170,7 @@ const bounceUpAnimation = (animateScale, const overshoot = 1.55 + (bounceIntensity * 0.4); const duration = 0.2 + (bounceIntensity * 0.1); - // The Hero Banner requires us to apply the transform inside + // The Hero Banner and ArticleTeaser requires us to apply the transform inside // the anchor, in order to address the 'infinity bounce' bug if (targetChild) { return css`