fix: add boxshadows to SM article teasers, add transition to snippet

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;
@@ -72,13 +73,25 @@ const Link = styled(link)`
       background-color: ${({ theme }) => theme.color('black')};
     }
   }
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    ${bounceUpAnimation(true, 10, 2, true)};
 
+  ${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 {
     ${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 +101,6 @@ const Link = styled(link)`
     }
 
     &:hover {
-      ${InnerWrapper} {
-        ${defaultBoxShadow(true)}
-      }
-
       ${Image} img {
         ${({ isNewsTeaser }) => css`
           ${imageZoom({ zoomed: true, finalScale: (isNewsTeaser ? 1.04 : 1) })}

src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -246,6 +246,14 @@ it('renders article teaser correctly', () => {
       background-color: #E52630;
     }
 
+    .c2 .c3 {
+      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%;
@@ -365,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);
@@ -382,10 +397,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 +406,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 +786,14 @@ it('renders press realese correctly', () => {
       background-color: #E52630;
     }
 
+    .c2 .c3 {
+      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%;
@@ -895,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);
@@ -912,10 +934,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 +943,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);