diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.js
index 6d34511db..6632b5a5d 100644
--- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.js
+++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.js
@@ -4,7 +4,7 @@ import SRLogo from './assets/SRlogo.svg';
import CRLogo from './assets/CRlogo.svg';
import RNDLogo from './assets/RNDlogo.svg';
import {
- Wrapper, Link, ImageWrapper, CopyWrapper, Title, Date, Time, Image, CtaWrapper
+ OuterWrapper, InnerWrapper, Link, ImageWrapper, CopyWrapper, Title, Date, Time, Image, CtaWrapper
} from './ArticleTeaser.style';
import altCtaUnderline from '../../../theme/shared/assets/alt_cta_underline.svg';
@@ -44,55 +44,57 @@ const ArticleTeaser = ({
const thisCampaignLogo = !isNewsTeaser && handleCampaignLogo(category);
return (
-
+
-
-
- {date && (
-
- {date}
-
- )}
-
- {title}
-
- {time && (
-
- {time}
-
- )}
-
-
- Read more
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {date && (
+
+ {date}
+
+ )}
+
+ {title}
+
+ {time && (
+
+ {time}
+
+ )}
+
+
+ Read more
+
+
+
+
+
+
+
+
+
+
-
+
);
};
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js
index 213898261..3e8afab96 100644
--- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js
+++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js
@@ -13,6 +13,23 @@ const Image = styled(Picture)`
overflow: hidden;
`;
+const InnerWrapper = styled.div`
+ display: flex;
+ width: 100%;
+ border-radius: 1rem;
+ overflow: hidden;
+ background-color: ${({ theme }) => theme.color('white')};
+ flex-direction: ${({ isNewsTeaser }) => (!isNewsTeaser ? 'row' : 'column')};
+
+ @media ${({ theme }) => theme.allBreakpoints('M')} {
+ flex-direction: row;
+ }
+
+ @media ${({ theme }) => theme.allBreakpoints('L')} {
+ flex-direction: ${({ isNewsTeaser }) => isNewsTeaser && 'column'};
+ }
+`;
+
const CtaWrapper = styled.div`
width: 100%;
height: auto;
@@ -38,18 +55,14 @@ const CtaWrapper = styled.div`
}
`;
-const Wrapper = styled.article`
- width: 100%;
- height: 100%;
+const Link = styled(link)`
+ padding: 0;
display: flex;
- background-color: ${({ theme }) => theme.color('white')};
- border-radius: 1rem;
- overflow: hidden;
- ${defaultBoxShadow()}
-
- &:hover {
- ${defaultBoxShadow(true)}
- }
+ height: 100%;
+ align-items: ${({ isNewsTeaser }) => (!isNewsTeaser) && 'center'};
+ text-decoration: none;
+ color: inherit;
+ width: 100%;
${ArrowIconWrapper} {
background-color: ${({ theme }) => theme.color('red')};
@@ -59,9 +72,13 @@ const Wrapper = styled.article`
background-color: ${({ theme }) => theme.color('black')};
}
}
-
+
@media ${({ theme }) => theme.allBreakpoints('M')} {
- ${bounceUpAnimation(true, 10, 2)};
+ ${bounceUpAnimation(true, 10, 2, true)};
+
+ ${InnerWrapper} {
+ ${defaultBoxShadow()}
+ }
${Image} img {
// Only set up imageZoom pre-zoom defaults when we actually need them:
@@ -71,6 +88,10 @@ const Wrapper = styled.article`
}
&:hover {
+ ${InnerWrapper} {
+ ${defaultBoxShadow(true)}
+ }
+
${Image} img {
${({ isNewsTeaser }) => css`
${imageZoom({ zoomed: true, finalScale: (isNewsTeaser ? 1.04 : 1) })}
@@ -95,23 +116,10 @@ const Wrapper = styled.article`
}
`;
-const Link = styled(link)`
- padding: 0;
- display: flex;
- height: 100%;
- flex-direction: ${({ isNewsTeaser }) => (!isNewsTeaser ? 'row' : 'column')};
- align-items: ${({ isNewsTeaser }) => (!isNewsTeaser) && 'center'};
- text-decoration: none;
- color: inherit;
+const OuterWrapper = styled.article`
width: 100%;
-
- @media ${({ theme }) => theme.allBreakpoints('M')} {
- flex-direction: row;
- }
-
- @media ${({ theme }) => theme.allBreakpoints('L')} {
- flex-direction: ${({ isNewsTeaser }) => isNewsTeaser && 'column'};
- }
+ height: 100%;
+ display: flex;
`;
const ImageWrapper = styled.div`
@@ -168,5 +176,5 @@ const Time = styled(Text)`
`;
export {
- Wrapper, Link, ImageWrapper, CopyWrapper, Title, Date, Time, Image, CtaWrapper
+ OuterWrapper, InnerWrapper, Link, ImageWrapper, CopyWrapper, Title, Date, Time, Image, CtaWrapper
};
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
index f6d2a5feb..0857eea2d 100644
--- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
+++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
@@ -19,7 +19,7 @@ it('renders article teaser correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c9 {
+ .c11 {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
@@ -31,18 +31,18 @@ it('renders article teaser correctly', () => {
line-height: 1.25rem;
}
- .c9 {
+ .c11 {
font-size: 0.75rem;
line-height: normal;
font-weight: bold;
}
- .c9 span {
+ .c11 span {
font-size: inherit;
line-height: inherit;
}
- .c11 {
+ .c13 {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
@@ -54,12 +54,12 @@ it('renders article teaser correctly', () => {
line-height: 1.25rem;
}
- .c11 span {
+ .c13 span {
font-size: inherit;
line-height: inherit;
}
- .c15 {
+ .c17 {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
@@ -71,19 +71,19 @@ it('renders article teaser correctly', () => {
line-height: 1.25rem;
}
- .c15 span {
+ .c17 span {
font-size: inherit;
line-height: inherit;
}
- .c4 {
+ .c6 {
display: block;
width: 100%;
height: auto;
position: relative;
}
- .c7 {
+ .c9 {
width: 100%;
height: auto;
display: block;
@@ -104,13 +104,13 @@ it('renders article teaser correctly', () => {
text-decoration: none;
}
- .c24 {
+ .c26 {
display: inline-block;
color: #FFFFFF;
fill: currentColor;
}
- .c23 {
+ .c25 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -134,7 +134,7 @@ it('renders article teaser correctly', () => {
transform-origin: center;
}
- .c22 {
+ .c24 {
width: 32px;
height: 32px;
border-radius: 50%;
@@ -157,7 +157,7 @@ it('renders article teaser correctly', () => {
overflow: hidden;
}
- .c18 {
+ .c20 {
height: 4px;
width: 100%;
position: absolute;
@@ -168,7 +168,7 @@ it('renders article teaser correctly', () => {
opacity: 0;
}
- .c20 {
+ .c22 {
height: 2rem;
position: absolute;
top: 50%;
@@ -179,11 +179,11 @@ it('renders article teaser correctly', () => {
content: "";
}
- .c16 {
+ .c18 {
position: relative;
}
- .c6 {
+ .c8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -191,7 +191,21 @@ it('renders article teaser correctly', () => {
overflow: hidden;
}
- .c14 {
+ .c4 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+ border-radius: 1rem;
+ overflow: hidden;
+ background-color: #FFFFFF;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+
+ .c16 {
width: 100%;
height: auto;
position: relative;
@@ -199,7 +213,7 @@ it('renders article teaser correctly', () => {
padding: 2rem 2.5rem 0 0;
}
- .c14 .c19 {
+ .c16 .c21 {
-webkit-transform: none;
-ms-transform: none;
transform: none;
@@ -207,7 +221,7 @@ it('renders article teaser correctly', () => {
bottom: -8px;
}
- .c14 span {
+ .c16 span {
font-weight: bold;
font-size: 1rem;
-webkit-transition: color 0.15s 0.1s;
@@ -215,44 +229,33 @@ it('renders article teaser correctly', () => {
color: #E52630;
}
- .c0 {
- width: 100%;
- height: 100%;
+ .c2 {
+ padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- background-color: #FFFFFF;
- border-radius: 1rem;
- overflow: hidden;
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
- }
-
- .c0:hover {
- box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+ height: 100%;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: inherit;
+ width: 100%;
}
- .c0 .c21 {
+ .c2 .c23 {
background-color: #E52630;
}
- .c2 {
- padding: 0;
+ .c0 {
+ width: 100%;
+ height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- height: 100%;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: inherit;
- width: 100%;
}
- .c3 {
+ .c5 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -268,7 +271,7 @@ it('renders article teaser correctly', () => {
position: relative;
}
- .c8 {
+ .c10 {
padding: 2rem;
height: 100%;
display: -webkit-box;
@@ -281,65 +284,81 @@ it('renders article teaser correctly', () => {
width: 100%;
}
- .c12 {
+ .c14 {
margin: 0;
}
- .c10 {
+ .c12 {
display: block;
margin-bottom: 1rem;
}
@media (min-width:740px) {
- .c9 {
+ .c11 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:1024px) {
- .c9 {
+ .c11 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media (min-width:740px) {
- .c11 {
+ .c13 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:1024px) {
- .c11 {
+ .c13 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media (min-width:740px) {
- .c15 {
+ .c17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:1024px) {
- .c15 {
+ .c17 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
+ @media (min-width:740px) {
+ .c4 {
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
+ }
+
+ @media (min-width:1024px) {
+ .c4 {
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+ }
+
@media (min-width:1024px) {
- .c14 span {
+ .c16 span {
color: #000000;
}
}
@media (min-width:1024px) {
- .c0 .c21 {
+ .c2 .c23 {
-webkit-transition: background-color 0.15s 0.1s;
transition: background-color 0.15s 0.1s;
background-color: #000000;
@@ -347,7 +366,7 @@ it('renders article teaser correctly', () => {
}
@media (min-width:740px) {
- .c0 {
+ .c2 > div {
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
-webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
@@ -356,14 +375,18 @@ it('renders article teaser correctly', () => {
transform-origin: center;
}
- .c0:hover,
- .c0:focus {
+ .c2:hover > div,
+ .c2:focus > div {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
- .c0 .c5 img {
+ .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);
transform: scale(1.02);
@@ -372,61 +395,49 @@ it('renders article teaser correctly', () => {
transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
}
- .c0:hover .c5 img {
+ .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);
transform: scale(1.04);
}
- .c0:hover .c21 {
+ .c2:hover .c23 {
background-color: #E52630;
}
- .c0:hover .c17 {
+ .c2:hover .c19 {
opacity: 1;
}
- .c0:hover .c13 span {
+ .c2:hover .c15 span {
color: #E52630;
}
}
@media (min-width:740px) {
- .c2 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- }
- }
-
- @media (min-width:1024px) {
- .c2 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- }
- }
-
- @media (min-width:740px) {
- .c3 {
+ .c5 {
width: 45%;
}
}
@media (min-width:1024px) {
- .c3 {
+ .c5 {
width: 100%;
}
}
@media (min-width:740px) {
- .c8 {
+ .c10 {
width: 55%;
}
}
@media (min-width:1024px) {
- .c8 {
+ .c10 {
width: 100%;
}
}
@@ -441,76 +452,80 @@ it('renders article teaser correctly', () => {
type="standard"
>
-
+ >
+
+
-
-
-
- 01 July 2019
-
-
- News article
-
- Read more
-
+
+ News article
+
+
+ Read more
+
@@ -932,76 +958,80 @@ it('renders press realese correctly', () => {
type="standard"
>
-
+ >
+
+
-
-
-
- 01 July 2019
-
-
- Press Release
-
- Read more
-
+
+ Press Release
+
+
+ Read more
+
+ >
+ 
+ >
+