+ toggleGroup(group.label)}>
+ {group.label}
+ ▾
+
+ {openGroups[group.label] && group.items.map(item => (
+ handleSelect(item)}
+ >
+ {item.name}
+
+ ))}
+
+ ))}
+ {selected.name}
+
+ {example}
+
+
-
-```
-
-With full controls.
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-const video480 = require('./big-buck-bunny-480p-30sec.mp4');
-
-
-
-```
-
-With play/pause button (hover to reveal).
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-const video480 = require('./big-buck-bunny-480p-30sec.mp4');
-
-
-
-```
-
-Play once (no loop).
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-const video480 = require('./big-buck-bunny-480p-30sec.mp4');
-
-
-
-```
-
-Responsive: 1080p above M breakpoint (740px), 480p below. Resize the browser to see the switch.
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-const video480 = require('./thetestdatacom_480p_example.mp4');
-const video1080 = require('./big-buck-bunny-1080p-30sec.mp4');
-
-
-
-```
diff --git a/src/components/Atoms/AmbientVideo/AmbientVideoExample.jsx b/src/components/Atoms/AmbientVideo/AmbientVideoExample.jsx
new file mode 100644
index 000000000..0ea50d37b
--- /dev/null
+++ b/src/components/Atoms/AmbientVideo/AmbientVideoExample.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import AmbientVideo from './AmbientVideo';
+import { defaultData } from '../../../data/data';
+import video480 from './big-buck-bunny-480p-30sec.mp4';
+import video1080 from './big-buck-bunny-1080p-30sec.mp4';
+import videoMobile from './thetestdatacom_480p_example.mp4';
+
+const ExampleContainer = styled.div`
+ width: 100%;
+ max-width: ${({ $maxWidth }) => $maxWidth || '600px'};
+ aspect-ratio: ${({ $aspectRatio }) => $aspectRatio || '16 / 9'};
+ overflow: hidden;
+`;
+
+export default function AmbientVideoExample() {
+ return (
+ <>
+ A muted, full-width ambient video component using the HTML5 video element. Ideal for background or decorative video.
+ +Default (loop, no controls)
+With full controls
+With play/pause button (hover to reveal)
+Play once (no loop)
+Responsive: 1080p above M breakpoint (740px), 480p below. Resize the browser to see the switch
+Primary
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
Secondary
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
Teritary
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```js
-
-```
-
-```js
-
-```
\ No newline at end of file
diff --git a/src/components/Atoms/Button/Button.style.js b/src/components/Atoms/Button/Button.style.js
index d789dbce9..9091a041e 100644
--- a/src/components/Atoms/Button/Button.style.js
+++ b/src/components/Atoms/Button/Button.style.js
@@ -19,18 +19,18 @@ const StyledButton = styled.button`
text-decoration: none;
}
- ${({ color, theme, buttonType }) => (theme.buttonColors(color, buttonType))};
+ ${({ $color, theme, $buttonType }) => (theme.buttonColors($color, $buttonType))};
${({ theme }) => css`${fontHelper(theme, 'button')}`}
-
+
@media ${({ theme }) => theme.allBreakpoints('M')} {
- width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+ width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
}
@media ${({ theme }) => theme.allBreakpoints('L')} {
// I don't *believe* this needs to be reinstated, but leaving in
// place for now, just to avoid breaking anything downstream...
- width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+ width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
}
`;
diff --git a/src/components/Atoms/Button/Button.test.js b/src/components/Atoms/Button/Button.test.js
index 282e00785..4023da9db 100644
--- a/src/components/Atoms/Button/Button.test.js
+++ b/src/components/Atoms/Button/Button.test.js
@@ -9,93 +9,77 @@ it('renders a standard styled link correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c0 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- position: relative;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- height: 2.5rem;
- width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border: none;
- cursor: pointer;
- padding: 0.6rem 1rem;
- border-radius: 0.5rem;
- background-color: #E52630;
- color: #FFFFFF;
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 700;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
+.c0 {
+ display: inline-flex;
+ position: relative;
+ text-decoration: none;
+ transition: all 0.2s;
+ height: 2.5rem;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ border: none;
+ cursor: pointer;
+ padding: 0.6rem 1rem;
+ border-radius: 0.5rem;
+ background-color: #E52630;
+ color: #FFFFFF;
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 700;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
- .c0 > a {
- -webkit-text-decoration: none;
- text-decoration: none;
- }
+.c0 >a {
+ text-decoration: none;
+}
- .c0:hover,
- .c0:focus,
- .c0:focus-within,
- .c0:focus-visible {
- background-color: #890B11;
- outline-offset: 3px;
- }
+.c0:hover,
+.c0:focus,
+.c0:focus-within,
+.c0:focus-visible {
+ background-color: #890B11;
+ outline-offset: 3px;
+}
- .c0:disabled {
- cursor: not-allowed;
- opacity: 0.5;
- }
+.c0:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
- @media (min-width:740px) {
- .c0 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
+@media (min-width: 740px) {
+ .c0 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
- @media (min-width:1024px) {
- .c0 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
- }
+@media (min-width: 1024px) {
+ .c0 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
- @media (min-width:740px) {
- .c0 {
- width: auto;
- }
- }
+@media (min-width: 740px) {
+ .c0 {
+ width: auto;
+ }
+}
- @media (min-width:1024px) {
- .c0 {
- width: auto;
- }
- }
+@media (min-width: 1024px) {
+ .c0 {
+ width: auto;
+ }
+}
-
- `);
+
+`);
});
diff --git a/src/components/Atoms/Button/ButtonExample.jsx b/src/components/Atoms/Button/ButtonExample.jsx
new file mode 100644
index 000000000..5f878eaf6
--- /dev/null
+++ b/src/components/Atoms/Button/ButtonExample.jsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import styled from 'styled-components';
+import Button from './Button';
+import buttonTypes from '../../../theme/crTheme/buttonTypes';
+
+const ExampleContainer = styled.div`
+ background-color: ${({ $bg }) => $bg || '#ddd'};
+ padding: 15px;
+ margin-bottom: 10px;
+ border-radius: 5px;
+`;
+
+export default function ButtonExample() {
+ return (
+ <>
+ Primary
+ ++
Secondary
+ ++
Tertiary
+ ++
Other
+ +Children are an optional prop. Example to demonstrate the ButtonWithStates will work even with no children provided:
+ ++ + + + ); +} diff --git a/src/components/Atoms/Link/Link.js b/src/components/Atoms/Link/Link.js index 0eaa92a5f..8bbcf32b1 100755 --- a/src/components/Atoms/Link/Link.js +++ b/src/components/Atoms/Link/Link.js @@ -58,15 +58,15 @@ const Link = ({
-
;
-```
-
-```js
-
-import buttonTypes from '../../../theme/crTheme/buttonTypes';
-
-
-
- Link standard
-
-
-
- }
- >
- Link standard icon
-
-
-
-
- Link standard white
-
-
-
-
-```
-
-
-## Iconography
-```js
-import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from '../Icons/index';
-
-
-
- Link as button
-
-
-
-
- Link as button
-
-
-
-
- Link as button
-
-
-
-
-
-
- Link as button (secondary)
-
-
-
-
- Link as button (secondary)
-
-
-
-
- Link as button (secondary)
-
-
-
-
-
- Link as button (tertiary)
-
-
-
-
- Link as button (tertiary)
-
-
-
-
- Link as button (tertiary)
-
-
-
-
-
-
-
-
- Link as full-width red button
-
-
-
-
;
-```
diff --git a/src/components/Atoms/Link/Link.style.js b/src/components/Atoms/Link/Link.style.js
index 134b1a2e9..9d36a700b 100644
--- a/src/components/Atoms/Link/Link.style.js
+++ b/src/components/Atoms/Link/Link.style.js
@@ -17,27 +17,27 @@ const buttonStyle = () => css`
padding: 0.6rem 1rem;
border-radius: 0.5rem;
- ${({ $color, theme, buttonType }) => (theme.buttonColors($color, buttonType))};
+ ${({ $color, theme, $buttonType }) => (theme.buttonColors($color, $buttonType))};
${({ theme }) => css` ${fontHelper(theme, 'button')}`}
// Override with mobile-specific colours where available:
- ${({ mobileColour, theme, buttonType }) => (mobileColour ? theme.buttonColors(mobileColour, buttonType) : null)};
+ ${({ $mobileColour, theme, $buttonType }) => ($mobileColour ? theme.buttonColors($mobileColour, $buttonType) : null)};
@media ${({ theme }) => theme.allBreakpoints('M')} {
- width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+ width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
}
@media ${({ theme }) => theme.allBreakpoints('L')} {
// I don't *believe* this needs to be reinstated, but leaving in
// place for now, just to avoid breaking anything downstream...
- width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+ width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
// Reinstate standard colours for desktop where appropriate:
${({
- mobileColour, theme, buttonType, $color
+ $mobileColour, theme, $buttonType, $color
}) => (
- mobileColour && theme.buttonColors($color, buttonType)
+ $mobileColour && theme.buttonColors($color, $buttonType)
)};
}
`;
@@ -48,6 +48,7 @@ const linkStyle = () => css`
${({ type, theme }) => (type
? theme.linkStyles(type)
: theme.linkStyles('standard'))};
+ ${({ $color, theme }) => $color && css`color: ${theme.color($color)};`}
`;
export const IconWrapper = styled.span`
@@ -79,7 +80,7 @@ export const IconWrapper = styled.span`
const StyledLink = styled.a`
${props => (props.type === 'button' ? buttonStyle : linkStyle)}
- ${({ iconFirst }) => iconFirst
+ ${({ $iconFirst }) => $iconFirst
&& css`
flex-direction: row-reverse;
span[type="button"] {
diff --git a/src/components/Atoms/Link/Link.test.js b/src/components/Atoms/Link/Link.test.js
index b416e9e90..f23daa3f4 100644
--- a/src/components/Atoms/Link/Link.test.js
+++ b/src/components/Atoms/Link/Link.test.js
@@ -12,29 +12,29 @@ it('renders a standard styled link correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c0 {
- position: relative;
- display: inline;
- color: #000000;
- font-weight: normal;
- }
+.c0 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
- .c0:hover,
- .c0:focus {
- color: #000000;
- -webkit-text-decoration: none;
- text-decoration: none;
- }
+.c0:hover,
+.c0:focus {
+ color: #000000;
+ text-decoration: none;
+}
-
- A standard link
-
- `);
+
+ A standard link
+
+`);
});
it('renders a button with an icon', () => {
@@ -50,84 +50,81 @@ it('renders a button with an icon', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c1 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- margin-left: 1rem;
- -webkit-align-self: center;
- -ms-flex-item-align: center;
- align-self: center;
- right: 1.5rem;
- position: absolute;
- right: -2rem;
- top: 0;
- bottom: 0;
- }
+.c2 {
+ fill: #FFFFFF;
+}
- .c0 {
- position: relative;
- display: inline;
- color: #000000;
- font-weight: normal;
- }
+.c1 {
+ display: inline-flex;
+ margin-left: 1rem;
+ align-self: center;
+ right: 1.5rem;
+ position: absolute;
+ right: -2rem;
+ top: 0;
+ bottom: 0;
+}
- .c0:hover,
- .c0:focus {
- color: #000000;
- -webkit-text-decoration: none;
- text-decoration: none;
- }
+.c0 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
- .c2 {
- fill: #FFFFFF;
- }
+.c0:hover,
+.c0:focus {
+ color: #000000;
+ text-decoration: none;
+}
- @media (min-width:740px) {
- .c1 {
- width: auto;
- right: auto;
- position: relative;
- position: absolute;
- right: -2rem;
- top: 0;
- bottom: 0;
- }
- }
+@media (min-width: 1024px) {
+ .c2 {
+ fill: #FFFFFF;
+ }
+}
- @media (min-width:1024px) {
- .c2 {
- fill: #FFFFFF;
- }
- }
+@media (min-width: 740px) {
+ .c1 {
+ width: auto;
+ right: auto;
+ position: relative;
+ position: absolute;
+ right: -2rem;
+ top: 0;
+ bottom: 0;
+ }
+}
-
+ Internal link
+
+
- `);
+
- }
- >
- Internal link, 'blue' with red icon on tablet and mobile
-
-
-
-
- }
- >
- External link (black on mobile, blue on desktop)
-
-
-
-
- }
- >
- Download link (blue mobile-tablet icon, white desktop icon)
-
-
-
-
- }
- >
- Favourite link (blue mobile-tablet icon, white desktop icon)
-
-
-
-
- }
- >
- Chevron Up (blue mobile-tablet icon, white desktop icon)
-
-
-
-
- }
- >
- Chevron Down (blue mobile-tablet icon, white desktop icon)
-
-
-
-
- }
- >
- Chevron Left (blue mobile-tablet icon, white desktop icon)
-
-
-
-
- }
- >
- Chevron Right (blue mobile-tablet icon, white desktop icon)
-
-
-
-
- }
- >
- Arrow Left (blue mobile-tablet icon, white desktop icon)
-
-
-
-
- }
- >
- At Sign (blue mobile-tablet icon, white desktop icon)
-
-
-Standard links
+ +Link as Buttons
+ +Link as Secondary
+ +Link as Tertiary
+ +Iconography
+ +
- 
-
- `);
-});
diff --git a/src/components/Atoms/LogoNav2026/LogoNav2026.test.js b/src/components/Atoms/LogoNav2026/LogoNav2026.test.js
index cff93ec77..aca9c4e75 100644
--- a/src/components/Atoms/LogoNav2026/LogoNav2026.test.js
+++ b/src/components/Atoms/LogoNav2026/LogoNav2026.test.js
@@ -8,16 +8,13 @@ it('renders correctly', () => {
expect(tree).toMatchInlineSnapshot(`
.c0 img {
- -webkit-animation: jaJSCW 0.4s ease-in-out forwards;
- animation: jaJSCW 0.4s ease-in-out forwards;
- -webkit-animation-name: blCpAO;
- animation-name: blCpAO;
+ animation: k0 0.4s ease-in-out forwards;
+ animation-name: k1;
}
.c0:hover img,
.c0:focus img {
- -webkit-animation: jaJSCW 0.4s ease-in-out forwards;
- animation: jaJSCW 0.4s ease-in-out forwards;
+ animation: k0 0.4s ease-in-out forwards;
}
.c1 {
@@ -39,13 +36,13 @@ it('renders correctly', () => {
display: none;
}
- @media (min-width:320px) {
+ @media (min-width: 320px) {
.c2 {
display: none;
}
}
- @media (min-width:320px) {
+ @media (min-width: 320px) {
.c3 {
display: block;
width: 132px;
@@ -53,14 +50,14 @@ it('renders correctly', () => {
}
}
- @media (min-width:740px) {
+ @media (min-width: 740px) {
.c3 {
width: 162px;
height: 25px;
}
}
- @media (min-width:1024px) {
+ @media (min-width: 1024px) {
.c3 {
width: 162px;
min-width: 162px;
@@ -68,6 +65,42 @@ it('renders correctly', () => {
}
}
+ @keyframes k0 {
+ from {
+ transform: scale3d(1,1,1);
+ }
+
+ 30% {
+ transform: scale3d(1.04,1.04,1.04);
+ }
+
+ 60% {
+ transform: scale3d(1.03,1.03,1.03);
+ }
+
+ to {
+ transform: scale3d(1.04,1.04,1.04);
+ }
+ }
+
+ @keyframes k1 {
+ from {
+ transform: scale3d(1.03,1.03,1.03);
+ }
+
+ 30% {
+ transform: scale3d(0.99,0.99,0.99);
+ }
+
+ 60% {
+ transform: scale3d(1.01,1.01,1.01);
+ }
+
+ to {
+ transform: scale3d(1,1,1);
+ }
+ }
+
props.sizeSm};
- transform: ${props => (props.rotate ? 'rotate(-14deg)' : 'inherit')};
+ width: ${props => props.$sizeSm};
+ transform: ${props => (props.$rotate ? 'rotate(-14deg)' : 'inherit')};
vertical-align: bottom; // height fix
@media ${({ theme }) => theme.allBreakpoints('Nav')} {
- width: ${props => props.sizeMd};
+ width: ${props => props.$sizeMd};
}
`;
@@ -44,7 +44,7 @@ const themeSwitcher = theme => {
const Logo = ({
rotate = false, sizeSm = '51px', sizeMd = '70px', campaign = 'Comic Relief'
}) => (
-
+
+
+`);
+});
diff --git a/src/components/Atoms/Logos/LogoExample.jsx b/src/components/Atoms/Logos/LogoExample.jsx
new file mode 100644
index 000000000..f8f14250d
--- /dev/null
+++ b/src/components/Atoms/Logos/LogoExample.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import Logo from './Logo';
+import styled from 'styled-components';
+import LogoNav2026 from '../LogoNav2026/_LogoNav2026';
+
+const Wrapper = styled.div`
+ margin: 50px;
+`;
+
+export default function LogoExample() {
+ return (
+ <>
+ Comic Relief Logo
+Sport Relief Logo
+Sport Relief Game On Logo
+Logo for Nav 2026 rebuild
+Minimalist
+Full size
+Custom style
+Custom labels
+
- 
-
- `);
+
-
+
+
+`);
});
-it("renders correctly with custom props", () => {
+it('renders correctly with custom props', () => {
const tree = renderWithTheme(
+
-
-
- `);
+
-
+
+
+`);
});
diff --git a/src/components/Atoms/Picture/PictureExample.jsx b/src/components/Atoms/Picture/PictureExample.jsx
new file mode 100644
index 000000000..38f94a1ed
--- /dev/null
+++ b/src/components/Atoms/Picture/PictureExample.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import Picture from './Picture';
+import { defaultData } from '../../../data/data';
+
+export default function PictureExample() {
+ return (
+ <>
+
+Picture
+Custom Size
+Single image
+Here's some copyMore copy",
}
-
-
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap b/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap
index f5ca90718..2946cce29 100644
--- a/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap
+++ b/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap
@@ -2,12 +2,10 @@
exports[`renders correctly with Comic Relief links 1`] = `
.c2 {
- -webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
display: block;
position: relative;
- -webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
@@ -21,32 +19,19 @@ exports[`renders correctly with Comic Relief links 1`] = `
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-wrap: nowrap;
- -ms-flex-wrap: nowrap;
flex-wrap: nowrap;
gap: 0;
list-style-type: none;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
+ justify-content: center;
margin: 0 auto 0 0;
padding: 0;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
.c1 {
width: 48px;
height: auto;
- -webkit-flex: 0 0 48px;
- -ms-flex: 0 0 48px;
flex: 0 0 48px;
margin-right: 1.5rem;
}
@@ -55,17 +40,14 @@ exports[`renders correctly with Comic Relief links 1`] = `
width: auto;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-box-pack: start;
- -webkit-justify-content: start;
- -ms-flex-pack: start;
justify-content: start;
margin: 0 auto 0 0;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
margin-right: 1.5rem;
}
@@ -151,12 +133,10 @@ exports[`renders correctly with Comic Relief links 1`] = `
exports[`renders correctly with Red Nose Day links and self target 1`] = `
.c2 {
- -webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
display: block;
position: relative;
- -webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
@@ -170,32 +150,19 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-wrap: nowrap;
- -ms-flex-wrap: nowrap;
flex-wrap: nowrap;
gap: 0;
list-style-type: none;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
+ justify-content: center;
margin: 0 auto 0 0;
padding: 0;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
.c1 {
width: 48px;
height: auto;
- -webkit-flex: 0 0 48px;
- -ms-flex: 0 0 48px;
flex: 0 0 48px;
margin-right: 1.5rem;
}
@@ -204,17 +171,14 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
width: auto;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-box-pack: start;
- -webkit-justify-content: start;
- -ms-flex-pack: start;
justify-content: start;
margin: 0 auto 0 0;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
margin-right: 1.5rem;
}
@@ -300,12 +264,10 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
exports[`renders correctly with Sport Relief links 1`] = `
.c2 {
- -webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
display: block;
position: relative;
- -webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
@@ -319,32 +281,19 @@ exports[`renders correctly with Sport Relief links 1`] = `
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-wrap: nowrap;
- -ms-flex-wrap: nowrap;
flex-wrap: nowrap;
gap: 0;
list-style-type: none;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
+ justify-content: center;
margin: 0 auto 0 0;
padding: 0;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
.c1 {
width: 48px;
height: auto;
- -webkit-flex: 0 0 48px;
- -ms-flex: 0 0 48px;
flex: 0 0 48px;
margin-right: 1.5rem;
}
@@ -353,17 +302,14 @@ exports[`renders correctly with Sport Relief links 1`] = `
width: auto;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-box-pack: start;
- -webkit-justify-content: start;
- -ms-flex-pack: start;
justify-content: start;
margin: 0 auto 0 0;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
margin-right: 1.5rem;
}
diff --git a/src/components/Atoms/Text/Text.md b/src/components/Atoms/Text/Text.md
deleted file mode 100644
index 8c8733f73..000000000
--- a/src/components/Atoms/Text/Text.md
+++ /dev/null
@@ -1,169 +0,0 @@
-```js
-import fontConfig from '../../../theme/crTheme/fontConfig';
-
-<>
-
+
+
+ H1
+
+
+
+
+
+
+
+
+ H2
+
+
+
+
+
+
+
+ H3
+
+
+
+
+
+
+
+ H4
+
+
+
+
+
+
+
+ P (body)
+
+
+
+
+
+
+
+
+
+ H5
+
+
+
+
+
+
+
+ H6
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Atoms/Text/__snapshots__/Text.test.js.snap b/src/components/Atoms/Text/__snapshots__/Text.test.js.snap
index d087db840..ebc34caba 100644
--- a/src/components/Atoms/Text/__snapshots__/Text.test.js.snap
+++ b/src/components/Atoms/Text/__snapshots__/Text.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders heavy heading correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.5rem;
@@ -22,14 +19,14 @@ exports[`renders heavy heading correctly 1`] = `
line-height: inherit;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
font-size: 1.375rem;
line-height: 1.625rem;
@@ -48,9 +45,6 @@ exports[`renders high heading correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.5rem;
@@ -65,14 +59,14 @@ exports[`renders high heading correctly 1`] = `
line-height: inherit;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
font-size: 1.375rem;
line-height: 1.625rem;
@@ -91,9 +85,6 @@ exports[`renders large heading correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.5rem;
@@ -109,14 +100,14 @@ exports[`renders large heading correctly 1`] = `
line-height: inherit;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
font-size: 1.375rem;
line-height: 1.625rem;
@@ -135,9 +126,6 @@ exports[`renders xl paragraph with Anton font correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -154,14 +142,14 @@ exports[`renders xl paragraph with Anton font correctly 1`] = `
line-height: inherit;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
font-size: 1.125rem;
line-height: 1.375rem;
@@ -180,9 +168,6 @@ exports[`renders xl yellow paragraph correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -199,14 +184,14 @@ exports[`renders xl yellow paragraph correctly 1`] = `
line-height: inherit;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
font-size: 1.125rem;
line-height: 1.375rem;
diff --git a/src/components/Atoms/TextArea/TextArea.js b/src/components/Atoms/TextArea/TextArea.js
index e53d84f1c..c87049771 100644
--- a/src/components/Atoms/TextArea/TextArea.js
+++ b/src/components/Atoms/TextArea/TextArea.js
@@ -6,7 +6,7 @@ import spacing from '../../../theme/shared/spacing';
import Label from '../Label/Label';
import ErrorText from '../ErrorText/ErrorText';
-const StyledTextArea = styled.textarea`${({ theme, error }) => css`
+const StyledTextArea = styled.textarea`${({ theme, $error }) => css`
box-sizing: border-box;
width: 100%;
margin: 0;
@@ -15,7 +15,7 @@ const StyledTextArea = styled.textarea`${({ theme, error }) => css`
background-color: ${theme.color('grey_light')};
border: 1px solid;
border-radius: 0.5rem;
- border-color: ${error ? theme.color('red') : theme.color('grey_medium')};
+ border-color: ${$error ? theme.color('red') : theme.color('grey_medium')};
box-shadow: none;
appearance: none;
color: ${theme.color('black')};
@@ -45,7 +45,7 @@ const TextArea = React.forwardRef(({
{...rest}
placeholder={placeholder}
rows={rows}
- error={!!errorMsg}
+ $error={!!errorMsg}
id={id}
aria-describedby={id}
ref={ref}
diff --git a/src/components/Atoms/TextArea/TextArea.md b/src/components/Atoms/TextArea/TextArea.md
deleted file mode 100644
index c50ed7fa6..000000000
--- a/src/components/Atoms/TextArea/TextArea.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# TextArea Field
-
-```js
-
+
{
- setValue(e.currentTarget.value);
- setOptions(value.trim().length > 2 ? dummyOptions : []);
- }}
- onSelect={(value, index) => {
- alert(`Selected [${value}] at index [${index}]`);
- setValue('');
- setOptions([]);
- }}
- id="input-with-dropdown"
- name="query"
- label="Text input with dropdown"
- dropdownInstruction="Choose one from the list below..."
-/>;
-```
diff --git a/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js b/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js
index d2e4ad0bf..d43f6070c 100644
--- a/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js
+++ b/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js
@@ -16,7 +16,7 @@ const Dropdown = styled.div`
max-height: 300px;
overflow: auto;
background-color: ${({ theme }) => theme.color('white')};
- border: ${({ hideBorder }) => (hideBorder ? 'none' : '1px solid')};
+ border: ${({ $hideBorder }) => ($hideBorder ? 'none' : '1px solid')};
margin-top: -1px;
width: 100%;
diff --git a/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdownExample.jsx b/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdownExample.jsx
new file mode 100644
index 000000000..531efab78
--- /dev/null
+++ b/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdownExample.jsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import TextInputWithDropdown from './TextInputWithDropdown';
+
+const dummyOptions = [
+ 'Option 1',
+ 'Another option',
+ 'And another',
+ 'Click me',
+ 'No, click me',
+];
+
+export default function TextInputWithDropdownExample() {
+ const [value, setValue] = useState('');
+ const [options, setOptions] = useState([]);
+
+ return (
+ {
+ setValue(e.currentTarget.value);
+ setOptions(e.currentTarget.value.trim().length > 2 ? dummyOptions : []);
+ }}
+ onSelect={(selectedValue, index) => {
+ alert(`Selected [${selectedValue}] at index [${index}]`);
+ setValue('');
+ setOptions([]);
+ }}
+ id="input-with-dropdown"
+ name="query"
+ label="Text input with dropdown"
+ dropdownInstruction="Choose one from the list below..."
+ />
+ );
+}
diff --git a/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap b/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
index f583cb4f9..232c9744e 100644
--- a/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
+++ b/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders correctly with no value and no options 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -21,12 +18,7 @@ exports[`renders correctly with no value and no options 1`] = `
.c1 {
width: 100%;
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
color: #000000;
}
@@ -36,9 +28,6 @@ exports[`renders correctly with no value and no options 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -49,9 +38,6 @@ exports[`renders correctly with no value and no options 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -60,17 +46,8 @@ exports[`renders correctly with no value and no options 1`] = `
.c5 {
position: relative;
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -84,8 +61,6 @@ exports[`renders correctly with no value and no options 1`] = `
border: 1px solid;
border-color: #969598;
box-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
appearance: none;
color: #000000;
border-radius: 0.5rem;
@@ -102,56 +77,48 @@ exports[`renders correctly with no value and no options 1`] = `
position: relative;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c2 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c3 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c3 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
font-size: 1.25rem;
line-height: 1.25rem;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:1024px) {
-
-}
-
`;
@@ -200,9 +164,6 @@ exports[`renders correctly with value and no options 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -216,12 +177,7 @@ exports[`renders correctly with value and no options 1`] = `
.c1 {
width: 100%;
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
color: #000000;
}
@@ -231,9 +187,6 @@ exports[`renders correctly with value and no options 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -244,9 +197,6 @@ exports[`renders correctly with value and no options 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -255,17 +205,8 @@ exports[`renders correctly with value and no options 1`] = `
.c5 {
position: relative;
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -279,8 +220,6 @@ exports[`renders correctly with value and no options 1`] = `
border: 1px solid;
border-color: #969598;
box-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
appearance: none;
color: #000000;
border-radius: 0.5rem;
@@ -297,56 +236,48 @@ exports[`renders correctly with value and no options 1`] = `
position: relative;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c2 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c3 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c3 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
font-size: 1.25rem;
line-height: 1.25rem;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:1024px) {
-
-}
-
Here's some copyMore copy",
- }
- }
- />
- `);
+ }
+/>
+`);
});
diff --git a/src/components/Atoms/RichText/RichTextExample.jsx b/src/components/Atoms/RichText/RichTextExample.jsx
new file mode 100644
index 000000000..6334dbe99
--- /dev/null
+++ b/src/components/Atoms/RichText/RichTextExample.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import RichText from './RichText';
+
+export default function RichTextExample() {
+ return (
+ {title}
)}
diff --git a/src/components/Atoms/SocialIcons/SocialIcons.js b/src/components/Atoms/SocialIcons/SocialIcons.js
index 21362c391..1e71011bc 100755
--- a/src/components/Atoms/SocialIcons/SocialIcons.js
+++ b/src/components/Atoms/SocialIcons/SocialIcons.js
@@ -8,28 +8,28 @@ import spacing from '../../../theme/shared/spacing';
const StyledList = styled.ul`
display: flex;
- flex-wrap: ${({ newStyle }) => (newStyle ? 'wrap' : 'nowrap')};
- gap: ${({ newStyle }) => (newStyle ? `${spacing('l')}` : '0')};
+ flex-wrap: ${({ $newStyle }) => ($newStyle ? 'wrap' : 'nowrap')};
+ gap: ${({ $newStyle }) => ($newStyle ? `${spacing('l')}` : '0')};
list-style-type: none;
- justify-content: ${newStyle => (newStyle ? 'flex-start' : 'center')};
- margin: ${({ newStyle }) => (newStyle ? `${spacing('lg')} 0` : '0 auto 0 0')};
+ justify-content: ${({ $newStyle }) => ($newStyle ? 'flex-start' : 'center')};
+ margin: ${({ $newStyle }) => ($newStyle ? `${spacing('lg')} 0` : '0 auto 0 0')};
padding: 0;
align-items: center;
@media ${({ theme }) => theme.breakpoints2026('M')} {
justify-content: start;
- margin: ${({ newStyle }) => (newStyle ? `${spacing('sm')} 0` : '0 auto 0 0')};
+ margin: ${({ $newStyle }) => ($newStyle ? `${spacing('sm')} 0` : '0 auto 0 0')};
}
`;
const StyledItem = styled.li`
- width: ${({ newStyle }) => (newStyle ? '54px' : '48px')};
- height: ${({ newStyle }) => (newStyle ? '54px' : 'auto')};
- flex: 0 0 ${({ newStyle }) => (newStyle ? '54px' : '48px')};
- margin-right: ${({ newStyle }) => (newStyle ? '0' : spacing('m'))};
+ width: ${({ $newStyle }) => ($newStyle ? '54px' : '48px')};
+ height: ${({ $newStyle }) => ($newStyle ? '54px' : 'auto')};
+ flex: 0 0 ${({ $newStyle }) => ($newStyle ? '54px' : '48px')};
+ margin-right: ${({ $newStyle }) => ($newStyle ? '0' : spacing('m'))};
@media ${({ theme }) => theme.breakpoints2026('M')} {
- margin-right: ${({ newStyle }) => (newStyle ? 0 : spacing('m'))};
+ margin-right: ${({ $newStyle }) => ($newStyle ? 0 : spacing('m'))};
}
`;
@@ -79,7 +79,7 @@ const SocialIcons = ({
: ['facebook', 'instagram', 'twitter', 'youtube'];
return (
-
+
{brandsToShow
.filter(brand => shouldShowIcon(brand))
.map(brand => {
@@ -92,7 +92,7 @@ const SocialIcons = ({
return null;
}
return (
-
+
-
-```
-
-### Red Nose Day
-```js
-DROPDOWN MENU
- - -DROPDOWN MENU
- - -DROPDOWN MENU - hide arrow / just one option
- -``` diff --git a/src/components/Atoms/Select/SelectExample.jsx b/src/components/Atoms/Select/SelectExample.jsx new file mode 100644 index 000000000..a126f0855 --- /dev/null +++ b/src/components/Atoms/Select/SelectExample.jsx @@ -0,0 +1,48 @@ +import React from 'react'; +import Select from './Select'; + +export default function SelectExample() { + return ( + <> +DROPDOWN MENU
+ + +DROPDOWN MENU with error
+ + +DROPDOWN MENU - hide arrow / just one option
+ + + ); +} diff --git a/src/components/Atoms/Select/__snapshots__/Select.test.js.snap b/src/components/Atoms/Select/__snapshots__/Select.test.js.snap index 5b243e437..ad87a7373 100644 --- a/src/components/Atoms/Select/__snapshots__/Select.test.js.snap +++ b/src/components/Atoms/Select/__snapshots__/Select.test.js.snap @@ -5,9 +5,6 @@ exports[`renders correctly 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; font-weight: 400; text-transform: inherit; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; letter-spacing: 0; font-size: 1rem; line-height: 1.25rem; @@ -21,12 +18,7 @@ exports[`renders correctly 1`] = ` .c0 { width: 100%; position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; color: #000000; } @@ -36,9 +28,6 @@ exports[`renders correctly 1`] = ` font-family: 'Montserrat',Helvetica,Arial,sans-serif; font-weight: 400; text-transform: inherit; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; letter-spacing: 0; font-size: 1rem; line-height: 1.25rem; @@ -60,8 +49,6 @@ exports[`renders correctly 1`] = ` border: 1px solid; border-color: #969598; box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; appearance: none; color: #000000; border-radius: 0.5rem; @@ -72,35 +59,35 @@ exports[`renders correctly 1`] = ` border: 1px solid #666; } -@media (min-width:740px) { +@media (min-width: 740px) { .c1 { font-size: 1rem; line-height: 1.25rem; } } -@media (min-width:1024px) { +@media (min-width: 1024px) { .c1 { font-size: 1.125rem; line-height: 1.375rem; } } -@media (min-width:740px) { +@media (min-width: 740px) { .c2 { font-size: 1rem; line-height: 1.25rem; } } -@media (min-width:1024px) { +@media (min-width: 1024px) { .c2 { font-size: 1rem; line-height: 1.25rem; } } -@media (min-width:740px) { +@media (min-width: 740px) { .c3 { max-width: 290px; } @@ -112,7 +99,7 @@ exports[`renders correctly 1`] = ` - `; diff --git a/src/components/Atoms/SocialIcons/Icon/Icon.js b/src/components/Atoms/SocialIcons/Icon/Icon.js index 5de6642df..f047f4449 100755 --- a/src/components/Atoms/SocialIcons/Icon/Icon.js +++ b/src/components/Atoms/SocialIcons/Icon/Icon.js @@ -22,7 +22,7 @@ const StyledLink = styled.a` } // 'isHeader' is only set and passed in Header2025, so the pre-existing Header isn't affected: - ${({ isHeader }) => isHeader && css` + ${({ $isHeader }) => $isHeader && css` overflow: hidden; padding-right: 0px; transition: padding-right ${RevealTextSpeed}s cubic-bezier(0.5, 1.5, 0.5, 0.75); @@ -69,7 +69,7 @@ const StyledLink = styled.a` // New style is rounded square buttons with dark grey background, and animation. // When we've moved fully to the new design, // this prop and the old styles can be removed. - ${({ newStyle }) => newStyle && css` + ${({ $newStyle }) => $newStyle && css` background-color: ${({ theme }) => theme.color('grey_4')}; border-radius: 0.5rem; padding: 0.5rem; @@ -112,7 +112,7 @@ const RevealText = styled(Text)` const StyledImage = styled.img` width: 100%; - ${({ invertColor }) => invertColor && css` + ${({ $invertColor }) => $invertColor && css` filter: brightness(0) invert(1); `} `; @@ -132,10 +132,10 @@ const Icon = ({ title={title} rel="noopener noreferrer" data-test={`${isHeader ? 'header' : 'icon'}-${kebabCase(id)}`} - isHeader={isHeader} - newStyle={newStyle} + $isHeader={isHeader} + $newStyle={newStyle} > -
-
-```
-
-### Sport Relief with self target
-```js
-
-
-```
diff --git a/src/components/Atoms/SocialIcons/SocialIconsExample.jsx b/src/components/Atoms/SocialIcons/SocialIconsExample.jsx
new file mode 100644
index 000000000..3867ab125
--- /dev/null
+++ b/src/components/Atoms/SocialIcons/SocialIconsExample.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import SocialIcons from './SocialIcons';
+import Wrapper from '../../../demos/Wrapper';
+
+export default function SocialIconsExample() {
+ return (
+ <>
+ Comic Relief
+Red Nose Day
+Sport Relief with self target
+
-
- H1
-
-
- family: {fontConfig['h1'].family} -
- mobileColor: blue
-
- font size (S / M / L breakpoints): {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight} -
-
-
- H2
-
-
- family: {fontConfig['h2'].family} -
- mobileColor: green
-
- font size (S / M / L breakpoints): {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight} -
-
-
- H3
-
-
- family: {fontConfig['h3'].family} -
- mobileColor: red
-
- font size (S / M / L breakpoints): {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight} -
-
-
- H4
-
-
- family: {fontConfig['span'].family} -
-
- font size (S / M / L breakpoints): {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight} -
-
-
- P (body)
-
-
- family: {fontConfig['p'].family} -
-
- font size (S / M / L breakpoints): {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight} -
-
-
- Tags to be phased out:
-
-
-
- H5
-
-
- family: {fontConfig['h5'].family} -
-
- font size (S / M / L breakpoints): {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight} -
-
-
- H6
-
-
- family: {fontConfig['h6'].family}
-
- font size (S / M / L breakpoints): {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight} -
-
-
- - font size (S / M / L breakpoints): {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight} -
- font size (S / M / L breakpoints): {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight} -
- font size (S / M / L breakpoints): {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight} -
- font size (S / M / L breakpoints): {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight} -
- font size (S / M / L breakpoints): {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight} -
- font size (S / M / L breakpoints): {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight} -
- font size (S / M / L breakpoints): {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight} -
-
- Context styles:
-
-
-
-
-```
diff --git a/src/components/Atoms/Text/TextExample.jsx b/src/components/Atoms/Text/TextExample.jsx
new file mode 100644
index 000000000..eac2dbb97
--- /dev/null
+++ b/src/components/Atoms/Text/TextExample.jsx
@@ -0,0 +1,161 @@
+import React from 'react';
+import styled from 'styled-components';
+import Text from './Text';
+import fontConfig from '../../../theme/crTheme/fontConfig';
+
+const Wrapper = styled.div`
+ padding: 1rem;
+ background: lightblue;
+ margin-top: 1rem;
+ border-radius: 5px;
+`;
+
+ const Section = styled.div`
+ margin-bottom: 50px;
+ `;
+
+export default function TextExample() {
+ return (
+ <>
+
-
-
- First paragraph
-Second paragraph
-Third and final paragraph
-
-
-
- Only child P
-
-
-
- Only child H1
-
-
-
- First child H1
-Second child H1
-
-
-
- h1
-Paragraph
-Paragraph
-Paragraph, last child
-
-
-
- A preceding paragraph
-A preceding paragraph
-H1 with an added margin-top as it follows a p tag
-Proceeding paragraph
-Paragraph, last child
-
-
-
- A preceding paragraph
-A preceding paragraph
-H2 with an added margin-top as it follows a p tag
-Proceeding paragraph
-Paragraph, last child
-Basic Text Elements:
+ +family: {fontConfig['h1'].family}
+mobileColor: blue
+font size (S / M / L breakpoints): {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize}
+line height (S / M / L breakpoints): {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight}
+family: {fontConfig['h2'].family}
+mobileColor: green
+font size (S / M / L breakpoints): {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize}
+line height (S / M / L breakpoints): {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight}
+family: {fontConfig['h3'].family}
+mobileColor: red
+font size (S / M / L breakpoints): {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize}
+line height (S / M / L breakpoints): {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight}
+family: {fontConfig['span'].family}
+font size (S / M / L breakpoints): {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize}
+line height (S / M / L breakpoints): {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight}
+family: {fontConfig['p'].family}
+font size (S / M / L breakpoints): {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize}
+line height (S / M / L breakpoints): {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight}
+Text Elements to be phased out:
+ +family: {fontConfig['h5'].family}
+font size (S / M / L breakpoints): {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize}
+line height (S / M / L breakpoints): {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight}
+family: {fontConfig['h6'].family}
+font size (S / M / L breakpoints): {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize}
+line height (S / M / L breakpoints): {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight}
+Text Elements in situ / context.
+ +First paragraph
+Second paragraph
+Third and final paragraph
+Only child paragraph
+h1 Only child
+h1 First child
+h1 Second child
+h1
+Paragraph
+Paragraph
+Paragraph, last child
+A preceding paragraph
+A preceding paragraph
+H1 with an added margin-top as it follows a p tag
+Proceeding paragraph
+Paragraph, last child
+A preceding paragraph
+A preceding paragraph
+H2 with an added margin-top as it follows a p tag
+Proceeding paragraph
+Paragraph, last child
+Long copy/Message field
- - -Long copy/Message field
- -``` diff --git a/src/components/Atoms/TextArea/TextArea.test.js b/src/components/Atoms/TextArea/TextArea.test.js index 7e804bdc8..4db8163b2 100644 --- a/src/components/Atoms/TextArea/TextArea.test.js +++ b/src/components/Atoms/TextArea/TextArea.test.js @@ -16,137 +16,111 @@ it('renders correctly', () => { ).toJSON(); expect(tree).toMatchInlineSnapshot(` - .c1 { - font-family: 'Montserrat',Helvetica,Arial,sans-serif; - font-weight: 400; - text-transform: inherit; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - font-size: 1rem; - line-height: 1.25rem; - } - - .c1 span { - font-size: inherit; - line-height: inherit; - } - - .c0 { - width: 100%; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - color: #000000; - } - - .c2 { - margin-bottom: 0.5rem; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; - font-weight: 400; - text-transform: inherit; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - font-size: 1rem; - line-height: 1.25rem; - } - - .c3 { - box-sizing: border-box; - width: 100%; - margin: 0; - padding: 1rem 1.5rem; - font-size: 1.25rem; - background-color: #F4F3F5; - border: 1px solid; - border-radius: 0.5rem; - border-color: #E1E2E3; - box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - color: #000000; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; - resize: vertical; - } - - .c3:focus { - border: 1px solid #666; - } - - .c3:focus::-webkit-input-placeholder { - visibility: hidden; - } - - .c3:focus::-moz-placeholder { - visibility: hidden; - } - - .c3:focus:-ms-input-placeholder { - visibility: hidden; - } - - .c3:focus::placeholder { - visibility: hidden; - } - - @media (min-width:740px) { - .c1 { - font-size: 1rem; - line-height: 1.25rem; - } - } - - @media (min-width:1024px) { - .c1 { - font-size: 1.125rem; - line-height: 1.375rem; +.c1 { + font-family: 'Montserrat',Helvetica,Arial,sans-serif; + font-weight: 400; + text-transform: inherit; + letter-spacing: 0; + font-size: 1rem; + line-height: 1.25rem; +} + +.c1 span { + font-size: inherit; + line-height: inherit; +} + +.c0 { + width: 100%; + position: relative; + display: flex; + flex-direction: column; + color: #000000; +} + +.c2 { + margin-bottom: 0.5rem; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; + font-weight: 400; + text-transform: inherit; + letter-spacing: 0; + font-size: 1rem; + line-height: 1.25rem; +} + +.c3 { + box-sizing: border-box; + width: 100%; + margin: 0; + padding: 1rem 1.5rem; + font-size: 1.25rem; + background-color: #F4F3F5; + border: 1px solid; + border-radius: 0.5rem; + border-color: #E1E2E3; + box-shadow: none; + appearance: none; + color: #000000; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; + resize: vertical; +} + +.c3:focus { + border: 1px solid #666; +} + +.c3:focus::placeholder { + visibility: hidden; +} + +@media (min-width: 740px) { + .c1 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width: 1024px) { + .c1 { + font-size: 1.125rem; + line-height: 1.375rem; + } +} + +@media (min-width: 740px) { + .c2 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width: 1024px) { + .c2 { + font-size: 1rem; + line-height: 1.25rem; + } +} + + - `); + /> + + +`); }); diff --git a/src/components/Atoms/TextArea/TextAreaExample.jsx b/src/components/Atoms/TextArea/TextAreaExample.jsx new file mode 100644 index 000000000..7d2782756 --- /dev/null +++ b/src/components/Atoms/TextArea/TextAreaExample.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import TextArea from './TextArea'; + +export default function TextAreaExample() { + return ( + <> +Long copy/Message field
+ + +Long copy/Message field with error
+ + + ); +} diff --git a/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js b/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js index c03e8a530..f08a99254 100644 --- a/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js +++ b/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js @@ -151,6 +151,7 @@ const Options = React.forwardRef(({ activeOption, closeDropdown, resetActiveOption, + hideBorder, ...rest }, ref) => { // Reset 'activeOption' when the list is unfocused. @@ -166,7 +167,7 @@ const Options = React.forwardRef(({ }; return ( -
-
-
@@ -187,10 +153,8 @@ exports[`renders correctly with no value and no options 1`] = `
type="text"
value=""
/>
-
-
-
`;
@@ -395,9 +323,6 @@ exports[`renders correctly with value and options 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -411,12 +336,7 @@ exports[`renders correctly with value and options 1`] = `
.c1 {
width: 100%;
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
color: #000000;
}
@@ -426,9 +346,6 @@ exports[`renders correctly with value and options 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -439,9 +356,6 @@ exports[`renders correctly with value and options 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -450,17 +364,8 @@ exports[`renders correctly with value and options 1`] = `
.c5 {
position: relative;
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -474,8 +379,6 @@ exports[`renders correctly with value and options 1`] = `
border: 1px solid;
border-color: #969598;
box-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
appearance: none;
color: #000000;
border-radius: 0.5rem;
@@ -525,57 +428,49 @@ exports[`renders correctly with value and options 1`] = `
background-color: #F4F3F5;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c2 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c3 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c3 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
font-size: 1.25rem;
line-height: 1.25rem;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:1024px) {
-
-}
-
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
max-width: 500px;
}
@@ -592,7 +487,7 @@ exports[`renders correctly with value and options 1`] = `
-
@@ -382,10 +312,8 @@ exports[`renders correctly with value and no options 1`] = `
type="text"
value="bikes"
/>
-
@@ -616,10 +510,8 @@ exports[`renders correctly with value and options 1`] = `
type="text"
value="c"
/>
-
-
div {
+ animation-name: ${ChevronKeyframes};
+ animation-duration: 0.4s;
+ }
}
padding: ${spacing('l')};
@@ -43,7 +47,7 @@ const Icon = styled.div`
const MenuGroupIcon = styled.img`
height: 24px;
- transform: ${({ isOpen }) => (isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
+ transform: ${({ $isOpen }) => ($isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
transition: transform 0.15s ease-in-out;
`;
@@ -70,14 +74,14 @@ const Copy = styled.div`
padding: 0 ${spacing('lg')};
}
- ${({ isOpen, contentBottomPadding }) => (isOpen && css`
+ ${({ $isOpen, $contentBottomPadding }) => ($isOpen && css`
height: auto;
visibility: visible;
transition: all 0.2s cubic-bezier(0.21, 1.7, 0.83, 0.68) 0s;
- padding: 0 ${spacing('l')} ${contentBottomPadding || spacing('l')};
+ padding: 0 ${spacing('l')} ${$contentBottomPadding || spacing('l')};
@media ${({ theme }) => theme.allBreakpoints('M')} {
- padding: 0 ${spacing('l')} ${contentBottomPadding || spacing('l')};
+ padding: 0 ${spacing('l')} ${$contentBottomPadding || spacing('l')};
}
`)}
`;
@@ -97,15 +101,15 @@ const Accordion = ({
return (
-
diff --git a/src/components/Molecules/Accordion/Accordion.md b/src/components/Molecules/Accordion/Accordion.md
deleted file mode 100644
index a73f4cef0..000000000
--- a/src/components/Molecules/Accordion/Accordion.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Accordion
-
-```js
-import Text from '../../Atoms/Text/Text';
-
-
- I am the title
-
- }
- >
- Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information
-
-```
-
-```js
-import Text from '../../Atoms/Text/Text';
-
-
- I am the title
-
- }
- >
-
- Customised bottom padding here!
-
-
- A plain anchor link, made to resemble a Link component.
-
-
-```
-
-```js
-import Text from '../../Atoms/Text/Text';
-
-
- I am a title with an overridden text type and weight, to 'p' 700 which is the new donate preference
-
- }
- >
-
- lorem ipsum
-
-```
diff --git a/src/components/Molecules/Accordion/AccordionExample.jsx b/src/components/Molecules/Accordion/AccordionExample.jsx
new file mode 100644
index 000000000..4b85c975c
--- /dev/null
+++ b/src/components/Molecules/Accordion/AccordionExample.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+import Accordion from './Accordion';
+import Text from '../../Atoms/Text/Text';
+
+const Wrapper = styled.div`
+ margin: 50px 0;
+`;
+
+export default function AccordionExample() {
+ return (
+ <>
+
+
+ I am the title
+ }
+ >
+
+ Name, surname, email and billing address We need these to process your payment,
+ create a receipt and send it to you. Establishment information We use this information
+ to understand which institutions raise money for us.
+
+
+
+
+
+ I am the title}
+ >
+ Customised bottom padding here!
+
+ A plain anchor link, made to resemble a Link component.
+
+
+
+
+
+
+ I am a title with an overridden text type and weight, to 'p' 700 which is the new donate preference
+
+ }
+ >
+
+ lorem ipsum
+
+
+
+ );
+}
diff --git a/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap b/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap
index cf95463b4..35b21846c 100644
--- a/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap
+++ b/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -22,9 +19,6 @@ exports[`renders correctly 1`] = `
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.5rem;
line-height: 1.5rem;
@@ -44,9 +38,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -63,24 +54,14 @@ exports[`renders correctly 1`] = `
}
.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
justify-content: space-between;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
width: 100%;
background: none;
border: none;
color: inherit;
-webkit-appearance: none;
- -webkit-transition: bottom 0.1s linear;
transition: bottom 0.1s linear;
cursor: pointer;
text-align: left;
@@ -93,27 +74,21 @@ exports[`renders correctly 1`] = `
outline: none;
}
+.c1:focus >div,
+.c1:hover >div {
+ animation-name: k0;
+ animation-duration: 0.4s;
+}
+
.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-content: center;
- -ms-flex-line-pack: center;
align-content: center;
}
.c7 {
height: 24px;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
transform: rotate(0deg);
- -webkit-transition: -webkit-transform 0.15s ease-in-out;
- -webkit-transition: transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out;
}
@@ -135,7 +110,6 @@ exports[`renders correctly 1`] = `
overflow: hidden;
height: 0;
visibility: none;
- -webkit-transition: all 0.2s cubic-bezier(0,0,0.25,0.82);
transition: all 0.2s cubic-bezier(0,0,0.25,0.82);
padding: 0 2rem;
}
@@ -144,54 +118,68 @@ exports[`renders correctly 1`] = `
margin-bottom: 0;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c2 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
font-size: 1.875rem;
line-height: 1.875rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
font-size: 2rem;
line-height: 2rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c9 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c9 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
padding: 0 3rem;
}
}
+@keyframes k0 {
+ 0% {
+ margin-top: 0rem;
+ }
+
+ 50% {
+ margin-top: 0.5rem;
+ }
+
+ 100% {
+ margin-top: 0rem;
+ }
+}
+
theme.allBreakpoints('M')} {
+ margin-bottom: ${spacing('m')};
+ }
+`;
+
+const ExampleWrapper = styled.div`
+ display: flex;
+ padding: 4rem 0;
+ background: #E1E2E3;
+ justify-content: space-around;
+`;
+
+const Section = styled.div`
+ margin: 50px 0
+`;
+
+export default function SingleMessageDsExample() {
+ return (
+ <>
+
+
+
+
+ Heading Line 1 Heading Line 2
+
+
+ Whatever you've got planned, the Sport Relief shop has everything you need
+ to get you looking your best while you're raising some cash. Also
+ available in Sainsbury's stores and online and in selected Argos stores.
+
+
+
+
+
+
+
+
+
+ Heading Line 1 Heading Line 2
+
+
+ Whatever you've got planned, the Sport Relief shop has everything you need
+ to get you looking your best while you're raising some cash. Also
+ available in Sainsbury's stores and online and in selected Argos stores.
+
+
+
+
+
+
+
+
+
+ Heading Line 1 Heading Line 2
+
+
+ Whatever you've got planned, the Sport Relief shop has everything you need
+ to get you looking your best while you're raising some cash. Also
+ available in Sainsbury's stores and online and in selected Argos stores.
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap b/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap
index 58961892e..bdcc7e8ca 100644
--- a/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap
+++ b/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -30,9 +27,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -48,51 +42,21 @@ exports[`renders correctly 1`] = `
line-height: inherit;
}
-.c3 {
- display: block;
- width: 100%;
- height: auto;
- position: relative;
-}
-
-.c4 {
- width: 100%;
- height: auto;
- display: block;
- object-fit: cover;
-}
-
.c12 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
margin-left: 1rem;
- -webkit-align-self: center;
- -ms-flex-item-align: center;
align-self: center;
right: 1.5rem;
}
.c11 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
- -webkit-text-decoration: none;
text-decoration: none;
- -webkit-transition: all 0.2s;
transition: all 0.2s;
height: 2.5rem;
width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border: none;
cursor: pointer;
@@ -103,9 +67,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -124,30 +85,33 @@ exports[`renders correctly 1`] = `
opacity: 0.5;
}
+.c3 {
+ display: block;
+ width: 100%;
+ height: auto;
+ position: relative;
+}
+
+.c4 {
+ width: 100%;
+ height: auto;
+ display: block;
+ object-fit: cover;
+}
+
.c13 {
fill: #FFFFFF;
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: space-around;
- -webkit-justify-content: space-around;
- -ms-flex-pack: space-around;
justify-content: space-around;
background: inherit;
}
.c7 {
- -webkit-letter-spacing: 0.03em;
- -moz-letter-spacing: 0.03em;
- -ms-letter-spacing: 0.03em;
letter-spacing: 0.03em;
}
@@ -179,12 +143,7 @@ exports[`renders correctly 1`] = `
height: auto;
padding: 1.5rem;
z-index: 1;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
border-radius: 1rem;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
@@ -197,35 +156,35 @@ exports[`renders correctly 1`] = `
right: 1.5rem;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c12 {
width: auto;
right: auto;
@@ -233,87 +192,67 @@ exports[`renders correctly 1`] = `
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c11 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c11 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c11 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c11 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c13 {
fill: #FFFFFF;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
height: 448px;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
margin: 0;
height: 448px;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
flex-shrink: 0;
- -webkit-flex-basis: 50%;
- -ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
min-height: 448px;
height: auto;
width: calc(50% + 1.5rem);
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
flex-shrink: 0;
- -webkit-flex-basis: calc(50% + 1.5rem);
- -ms-flex-preferred-size: calc(50% + 1.5rem);
flex-basis: calc(50% + 1.5rem);
padding: 2rem;
padding-bottom: calc(2rem + 1.5rem);
@@ -321,7 +260,7 @@ exports[`renders correctly 1`] = `
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c5 {
padding: calc(1.5rem * 2);
padding-bottom: calc(1.5rem * 3);
@@ -331,6 +270,7 @@ exports[`renders correctly 1`] = `
![Happy man going to work]()
`;
diff --git a/src/components/Molecules/VideoBanner/VideoBanner.md b/src/components/Molecules/VideoBanner/VideoBanner.md
deleted file mode 100644
index 95ed6cbfe..000000000
--- a/src/components/Molecules/VideoBanner/VideoBanner.md
+++ /dev/null
@@ -1,26 +0,0 @@
-Default Video Banner (autoplay, no loop, no poster re-show)
-```js
-import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
-const src =
- 'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
-
-
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Organisms/CookieBanner/CookieBanner.md b/src/components/Organisms/CookieBanner/CookieBanner.md
deleted file mode 100644
index aa254f270..000000000
--- a/src/components/Organisms/CookieBanner/CookieBanner.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Cookie banner
-
-```js
- {
- e.preventDefault();
- console.log('User accept');
- }}
- denyCookie={e => {
- e.preventDefault();
- console.log('User does not accept cookies');
- }}
- cookiePolicyUrl="https://www.comicrelief.com/cookies-policy"
-/>
-```
diff --git a/src/components/Organisms/CookieBanner/CookieBanner.test.js b/src/components/Organisms/CookieBanner/CookieBanner.test.js
index c3c9fbdaa..381ef9453 100644
--- a/src/components/Organisms/CookieBanner/CookieBanner.test.js
+++ b/src/components/Organisms/CookieBanner/CookieBanner.test.js
@@ -19,225 +19,203 @@ it('renders correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c1 {
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 400;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c1 {
- color: #FFFFFF;
- }
-
- .c1 span {
- font-size: inherit;
- line-height: inherit;
- }
-
- .c3 {
- position: relative;
- display: inline;
- color: #FFFFFF;
- font-weight: normal;
- }
-
- .c3:hover,
- .c3:focus {
- color: #FFFFFF;
- -webkit-text-decoration: none;
- text-decoration: none;
- }
-
- .c5 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- position: relative;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- height: 2.5rem;
- width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border: none;
- cursor: pointer;
- padding: 0.6rem 1rem;
- border-radius: 0.5rem;
- background-color: #FFFFFF;
- color: #000000;
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 700;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c5:hover,
- .c5:focus,
- .c5:focus-within,
- .c5:focus-visible {
- background-color: #E1E2E3;
- outline-offset: 3px;
- }
-
- .c5:disabled {
- cursor: not-allowed;
- opacity: 0.5;
- }
-
- .c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: relative;
- padding: 1rem;
- background: #2C0230;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- z-index: 3;
- }
-
- .c2 {
- line-height: 1.5;
- margin: 0;
- }
-
- .c2:first-of-type {
- margin-bottom: 0.5rem;
- }
-
- .c6 {
- padding: 0.5rem 1rem;
- display: block;
- margin-bottom: 10px;
- }
-
- .c4 {
- color: #FFFFFF;
- padding: 0 0.25rem 1px;
- border-bottom: 2px solid;
- }
-
- @media (min-width:740px) {
- .c1 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .c1 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
- }
-
- @media (min-width:740px) {
- .c5 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .c5 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
- }
-
- @media (min-width:740px) {
- .c5 {
- width: auto;
- }
- }
-
- @media (min-width:1024px) {
- .c5 {
- width: auto;
- }
- }
-
- @media (min-width:740px) {
- .c2 {
- width: 75%;
- margin: 0 auto;
- }
-
- .c2:first-of-type {
- margin-bottom: 1rem;
- }
- }
-
- @media (min-width:740px) {
- .c6 {
- margin: 0 0.25rem 0 0;
- display: inline-block;
- }
- }
-
-
+ . We also use optional cookies for marketing purposes:
+
+
+`);
});
diff --git a/src/components/Organisms/CookieBanner/CookieBannerExample.jsx b/src/components/Organisms/CookieBanner/CookieBannerExample.jsx
new file mode 100644
index 000000000..47a636882
--- /dev/null
+++ b/src/components/Organisms/CookieBanner/CookieBannerExample.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import CookieBanner from './CookieBanner';
+
+export default function CookieBannerExample() {
+ return (
+ {
+ e.preventDefault();
+ console.log('User accept');
+ }}
+ denyCookie={e => {
+ e.preventDefault();
+ console.log('User does not accept cookies');
+ }}
+ cookiePolicyUrl="https://www.comicrelief.com/cookies-policy"
+ />
+ );
+}
diff --git a/src/components/Organisms/Donate/Donate.js b/src/components/Organisms/Donate/Donate.js
index e240de833..369c8ebf4 100644
--- a/src/components/Organisms/Donate/Donate.js
+++ b/src/components/Organisms/Donate/Donate.js
@@ -87,8 +87,8 @@ const Donate = ({
return (
@@ -107,7 +107,7 @@ const Donate = ({
{isDesktop && images ? (
+
{/* Only render if there is SOME title copy; otherwise,
we need to the space to centre-align the form */}
{ !noTitlesAtAll && (
-
+
{showCopy && (
<>
diff --git a/src/components/Organisms/Donate/Donate.md b/src/components/Organisms/Donate/Donate.md
deleted file mode 100644
index 4445aee2d..000000000
--- a/src/components/Organisms/Donate/Donate.md
+++ /dev/null
@@ -1,628 +0,0 @@
-# Donate
-
-## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button and 'no top padding' option
-
-```js
-import data from './dev-data/data';
-const mobilePictures = require('../../../styleguide/data/data').mobileImages;
-const desktopPictures = require('../../../styleguide/data/data').defaultData;
-
-
-
@@ -206,6 +194,7 @@ exports[`renders correctly 1`] = `
>
-
-
-
+
+
+
+
-
+
{date && (
{date}
)}
{title}
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.md b/src/components/Molecules/ArticleTeaser/ArticleTeaser.md
deleted file mode 100644
index c53307c35..000000000
--- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.md
+++ /dev/null
@@ -1,127 +0,0 @@
-### Article teaser
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-
-<>
- <span> Recreating XS-M breakpoints layout in CRcom (somewhat)</span>
- <div style={{ display: 'flex', background: '#E1E2E3', maxWidth: '1023px', marginBottom: '2rem', flexFlow: 'wrap', justifyContent: 'space-between' }}>
- <div style={{ margin: '1rem', width: 'calc(100% - 2rem)' }}>
- <ArticleTeaser
- href="/test"
- images={defaultData.newsImage}
- imageLow={defaultData.imageLow}
- date=" 01 July 2019"
- title="News article"
- alt="Image's description"
- />
- </div>
-
- <div style={{ margin: '1rem', width: 'calc(100% - 2rem)' }}>
- <ArticleTeaser
- href="/test"
- images={defaultData.images}
- imageLow={defaultData.imageLow}
- title="Article teaser w/no date; used for Prizes, loads, loads, loads, loads, loads, loads, loads, loads, loads, LOADS more copy to mess with the heights a bit"
- alt="Image's description"
- />
- </div>
-
- <div style={{ margin: '1rem', width: 'calc(100% - 2rem)' }}>
- <ArticleTeaser
- href="/test"
- images={defaultData.images}
- imageLow={defaultData.imageLow}
- title="Article teaser w/no date; used for Prizes"
- alt="Image's description"
- />
- </div>
- </div>
-
- <span> Recreating L+ breakpoints layout in CRcom (somewhat)</span>
- <div style={{ display: 'flex', background: '#E1E2E3', maxWidth: '100%', marginBottom: '2rem', flexFlow: 'wrap', justifyContent: 'space-between' }}>
- <div style={{ margin: '1rem', width: 'calc(33.3% - 2rem)' }}>
- <ArticleTeaser
- href="/test"
- images={defaultData.images}
- imageLow={defaultData.imageLow}
- date=" 01 July 2019"
- title="News article"
- alt="Image's description"
- />
- </div>
-
- <div style={{ margin: '1rem', width: 'calc(33.3% - 2rem)' }}>
- <ArticleTeaser
- href="/test"
- images={defaultData.images}
- imageLow={defaultData.imageLow}
- title="Article teaser w/no date; used for Prizes, loads, loads, loads, loads, loads, loads, loads, loads, loads, LOADS more copy to mess with the heights a bit"
- alt="Image's description"
- />
- </div>
-
- <div style={{ margin: '1rem', width: 'calc(33.3% - 2rem)' }}>
- <ArticleTeaser
- href="/test"
- images={defaultData.images}
- imageLow={defaultData.imageLow}
- title="Article teaser w/no date; used for Prizes"
- alt="Image's description"
- />
- </div>
- </div>
-</>
-```
-
-### Article teaser: Press release
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;<div>
-
- <div style={{ width: '100%', padding: '1rem'}}>
- <ArticleTeaser
- href="/test"
- category=""
- date=" 01 July 2019"
- title="Press Release"
- alt="Image's description"
- logoSize="80px"
- />
- </div>
-
-
- <div style={{ width: '100%', padding: '1rem'}}>
- <ArticleTeaser
- href="/test"
- category=""
- title="Press Release w/no date"
- alt="Image's description"
- logoSize="80px"
- />
- </div>
-
- <div style={{ width: '100%', padding: '1rem'}}>
- <ArticleTeaser
- href="/test"
- category="Red Nose Day"
- title="Red Nose Day Press Release"
- date=" 01 July 2019"
- alt="Image's description"
- logoSize="80px"
- />
- </div>
-
- <div style={{ width: '100%', padding: '1rem'}}>
- <ArticleTeaser
- href="/test"
- category="Sport Relief"
- title="Sport Relief Press Release"
- date=" 01 July 2019"
- alt="Image's description"
- logoSize="80px"
- />
- </div>
-
-</div>
-```
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js
index 6ca93619a..1b8d7849f 100644
--- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js
+++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js
@@ -20,14 +20,14 @@ const InnerWrapper = styled.div`
border-radius: 1rem;
overflow: hidden;
background-color: ${({ theme }) => theme.color('white')};
- flex-direction: ${({ isNewsTeaser }) => (!isNewsTeaser ? 'row' : 'column')};
+ flex-direction: ${({ $isNewsTeaser }) => (!$isNewsTeaser ? 'row' : 'column')};
@media ${({ theme }) => theme.allBreakpoints('M')} {
flex-direction: row;
}
@media ${({ theme }) => theme.allBreakpoints('L')} {
- flex-direction: ${({ isNewsTeaser }) => isNewsTeaser && 'column'};
+ flex-direction: ${({ $isNewsTeaser }) => $isNewsTeaser && 'column'};
}
`;
@@ -63,7 +63,7 @@ const Link = styled(link)`
padding: 0;
display: flex;
height: 100%;
- align-items: ${({ isNewsTeaser }) => (!isNewsTeaser) && 'center'};
+ align-items: ${({ $isNewsTeaser }) => (!$isNewsTeaser) && 'center'};
text-decoration: none;
color: inherit;
width: 100%;
@@ -98,15 +98,15 @@ const Link = styled(link)`
${Image} img {
// Only set up imageZoom pre-zoom defaults when we actually need them:
- ${({ isNewsTeaser }) => css`
- ${imageZoom({ initialScale: (isNewsTeaser ? 1.02 : 0.9) })}
+ ${({ $isNewsTeaser }) => css`
+ ${imageZoom({ initialScale: ($isNewsTeaser ? 1.02 : 0.9) })}
`}
}
-
+
&:hover {
${Image} img {
- ${({ isNewsTeaser }) => css`
- ${imageZoom({ zoomed: true, finalScale: (isNewsTeaser ? 1.04 : 1) })}
+ ${({ $isNewsTeaser }) => css`
+ ${imageZoom({ zoomed: true, finalScale: ($isNewsTeaser ? 1.04 : 1) })}
`}
}
@@ -140,11 +140,11 @@ const ImageWrapper = styled.div`
justify-content: center;
position: relative;
- ${({ isNewsTeaser }) => (!isNewsTeaser) && css`
+ ${({ $isNewsTeaser }) => (!$isNewsTeaser) && css`
padding: 1rem 0px 1rem 2rem;
`};
- ${({ isNewsTeaser }) => isNewsTeaser && css`
+ ${({ $isNewsTeaser }) => $isNewsTeaser && css`
@media ${({ theme }) => theme.allBreakpoints('M')} {
width: 45%;
}
@@ -162,11 +162,11 @@ const CopyWrapper = styled.div`
flex-direction: column;
width: 100%;
- ${({ isNewsTeaser }) => isNewsTeaser && css`
+ ${({ $isNewsTeaser }) => $isNewsTeaser && css`
@media ${({ theme }) => theme.allBreakpoints('M')} {
width: 55%;
}
-
+
@media ${({ theme }) => theme.allBreakpoints('L')} {
width: 100%;
}
@@ -174,7 +174,7 @@ const CopyWrapper = styled.div`
`;
const Title = styled(Text)`
- margin: ${({ time }) => (time ? `0 0 ${spacing('md')}` : '0')};
+ margin: ${({ $time }) => ($time ? `0 0 ${spacing('md')}` : '0')};
`;
const Date = styled(Text)`
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
index 0c1d58695..0de7ca3f7 100644
--- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
+++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import 'jest-styled-components';
import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
import ArticleTeaser from './ArticleTeaser';
-import { defaultData } from '../../../styleguide/data/data';
+import { defaultData } from '../../../data/data';
it('renders article teaser correctly', () => {
const tree = renderWithTheme(
<ArticleTeaser
@@ -19,541 +19,441 @@ it('renders article teaser correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c11 {
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 400;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c11 {
- font-size: 0.75rem;
- line-height: normal;
- font-weight: bold;
- }
-
- .c11 span {
- font-size: inherit;
- line-height: inherit;
- }
-
- .c13 {
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 700;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c13 span {
- font-size: inherit;
- line-height: inherit;
- }
-
- .c17 {
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 400;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c17 span {
- font-size: inherit;
- line-height: inherit;
- }
-
- .c6 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
- }
-
- .c9 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
- }
-
- .c1 {
- position: relative;
- display: inline;
- color: #000000;
- font-weight: normal;
- }
-
- .c1:hover,
- .c1:focus {
- color: #000000;
- -webkit-text-decoration: none;
- text-decoration: none;
- }
-
- .c26 {
- display: inline-block;
- color: #FFFFFF;
- fill: currentColor;
- }
-
- .c25 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
- -webkit-transform-origin: center;
- -ms-transform-origin: center;
- transform-origin: center;
- }
-
- .c24 {
- width: 32px;
- height: 32px;
- border-radius: 50%;
- background: #E52630;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- overflow: hidden;
- }
-
- .c20 {
- height: 4px;
- width: 100%;
- position: absolute;
- left: 0;
- bottom: -5px;
- -webkit-transition: opacity 0.15s 0.1s;
- transition: opacity 0.15s 0.1s;
- opacity: 0;
- }
-
- .c22 {
- height: 2rem;
- position: absolute;
- top: 50%;
- right: 0;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- content: "";
- }
-
- .c18 {
- position: relative;
- }
-
- .c8 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- overflow: hidden;
- }
-
- .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;
- margin-top: auto;
- padding: 2rem 0 0 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- }
-
- .c16 .c21 {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
- top: auto;
- }
-
- .c16 span {
- font-weight: bold;
- font-size: 1rem;
- -webkit-transition: color 0.15s 0.1s;
- transition: color 0.15s 0.1s;
- color: #E52630;
- }
-
- .c2 {
- padding: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- height: 100%;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: inherit;
- width: 100%;
- }
-
- .c2 .c23 {
- 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%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- }
-
- .c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- position: relative;
- }
-
- .c10 {
- padding: 2rem;
- height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- width: 100%;
- }
-
- .c14 {
- margin: 0;
- }
-
- .c12 {
- display: block;
- margin-bottom: 1rem;
- }
-
- @media (min-width:740px) {
- .c11 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .c11 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
- }
-
- @media (min-width:740px) {
- .c13 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .c13 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
- }
-
- @media (min-width:740px) {
- .c17 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .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) {
- .c16 span {
- color: #000000;
- }
- }
-
- @media (min-width:1024px) {
- .c2 .c23 {
- -webkit-transition: background-color 0.15s 0.1s;
- transition: background-color 0.15s 0.1s;
- background-color: #000000;
- }
- }
-
- @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);
- -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);
- -webkit-transform-origin: center;
- -ms-transform-origin: center;
- transform-origin: center;
- }
-
- .c2:hover > div,
- .c2:focus > div {
- -webkit-transform: translateY(-10px);
- -ms-transform: translateY(-10px);
- transform: translateY(-10px);
- }
-
- .c2 .c7 img {
- -webkit-transform: scale(1.02);
- -ms-transform: scale(1.02);
- transform: scale(1.02);
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- }
-
- .c2:hover .c7 img {
- -webkit-transform: scale(1.04);
- -ms-transform: scale(1.04);
- transform: scale(1.04);
- }
-
- .c2:hover .c23 {
- background-color: #E52630;
- }
-
- .c2:hover .c19 {
- opacity: 1;
- }
-
- .c2:hover .c15 span {
- color: #E52630;
- }
- }
-
- @media (min-width:740px) {
- .c5 {
- width: 45%;
- }
- }
-
- @media (min-width:1024px) {
- .c5 {
- width: 100%;
- }
- }
-
- @media (min-width:740px) {
- .c10 {
- width: 55%;
- }
- }
-
- @media (min-width:1024px) {
- .c10 {
- width: 100%;
- }
- }
-
- <article
- className="c0"
+.c11 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c11 {
+ font-size: 0.75rem;
+ line-height: normal;
+ font-weight: bold;
+}
+
+.c11 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c13 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 700;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c13 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c17 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c17 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c1 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c1:hover,
+.c1:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
+.c6 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c9 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
+.c20 {
+ height: 4px;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ transition: opacity 0.15s 0.1s;
+ opacity: 0;
+}
+
+.c22 {
+ height: 2rem;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ content: "";
+}
+
+.c18 {
+ position: relative;
+}
+
+.c25 {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+ transform: scale(1);
+ transform-origin: center;
+}
+
+.c24 {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: #E52630;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ overflow: hidden;
+}
+
+.c8 {
+ display: flex;
+ overflow: hidden;
+}
+
+.c4 {
+ display: flex;
+ width: 100%;
+ border-radius: 1rem;
+ overflow: hidden;
+ background-color: #FFFFFF;
+ flex-direction: column;
+}
+
+.c16 {
+ width: 100%;
+ height: auto;
+ position: relative;
+ margin-top: auto;
+ padding: 2rem 0 0 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: row;
+}
+
+.c16 .c21 {
+ transform: none;
+ top: auto;
+}
+
+.c16 span {
+ font-weight: bold;
+ font-size: 1rem;
+ transition: color 0.15s 0.1s;
+ color: #E52630;
+}
+
+.c2 {
+ padding: 0;
+ display: flex;
+ height: 100%;
+ text-decoration: none;
+ color: inherit;
+ width: 100%;
+}
+
+.c2 .c23 {
+ 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%;
+ display: flex;
+}
+
+.c5 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+}
+
+.c10 {
+ padding: 2rem;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+.c14 {
+ margin: 0;
+}
+
+.c12 {
+ display: block;
+ margin-bottom: 1rem;
+}
+
+.c26 {
+ display: inline-block;
+ color: #FFFFFF;
+ fill: currentColor;
+}
+
+@media (min-width: 740px) {
+ .c11 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c11 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c13 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c13 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c17 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c17 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c4 {
+ flex-direction: row;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c4 {
+ flex-direction: column;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c16 span {
+ color: #000000;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c2 .c23 {
+ transition: background-color 0.15s 0.1s;
+ background-color: #000000;
+ }
+}
+
+@media (max-width:739px) {
+ .c2 .c3 {
+ transition: box-shadow 0.3s;
+ }
+}
+
+@media (min-width: 740px) {
+ .c2 >div {
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+ transform-origin: center;
+ }
+
+ .c2:hover >div,
+ .c2:focus >div {
+ transform: translateY(-10px);
+ }
+
+ .c2 .c7 img {
+ transform: scale(1.02);
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+ }
+
+ .c2:hover .c7 img {
+ transform: scale(1.04);
+ }
+
+ .c2:hover .c23 {
+ background-color: #E52630;
+ }
+
+ .c2:hover .c19 {
+ opacity: 1;
+ }
+
+ .c2:hover .c15 span {
+ color: #E52630;
+ }
+}
+
+@media (min-width: 740px) {
+ .c5 {
+ width: 45%;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c5 {
+ width: 100%;
+ }
+}
+
+@media (min-width: 740px) {
+ .c10 {
+ width: 55%;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c10 {
+ width: 100%;
+ }
+}
+
+<article
+ className="c0"
+>
+ <a
+ category={null}
+ className="c1 c2"
+ href="/test"
+ target="_self"
+ type="standard"
+ >
+ <div
+ className="c3 c4"
>
- <a
- className="c1 c2"
- href="/test"
- target="_self"
- type="standard"
+ <div
+ className="c5"
>
<div
- className="c3 c4"
+ className="c6 c7 c8"
>
- <div
- className="c5"
+ <img
+ alt="Image's description"
+ className="c9 lazyload"
+ data-lowsrc={null}
+ data-sizes="auto"
+ data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
+ data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+ height="100%"
+ src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+ width="100%"
+ />
+ </div>
+ </div>
+ <div
+ className="c10"
+ >
+ <span
+ className="c11 c12"
+ >
+ 01 July 2019
+ </span>
+ <h4
+ className="c13 c14"
+ >
+ News article
+ </h4>
+ <div
+ className="c15 c16"
+ >
+ <span
+ className="c17 c18"
>
- <div
- className="c6 c7 c8"
- height="100%"
- width="100%"
- >
- <img
- alt="Image's description"
- className="c9 lazyload"
- data-lowsrc={null}
- data-sizes="auto"
- data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
- data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
- height="100%"
- src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
- width="100%"
- />
- </div>
- </div>
+ Read more
+ <img
+ alt="Read more"
+ className="c19 c20"
+ src="mock.asset"
+ />
+ </span>
<div
- className="c10"
+ className="c21 c22"
>
- <span
- className="c11 c12"
- >
- 01 July 2019
- </span>
- <h4
- className="c13 c14"
- >
- News article
- </h4>
<div
- className="c15 c16"
+ className="c23 c24"
>
<span
- className="c17 c18"
- >
- Read more
- <img
- alt="Read more"
- className="c19 c20"
- src="mock.asset"
- />
- </span>
- <div
- className="c21 c22"
+ className="c25"
>
- <div
- className="c23 c24"
+ <svg
+ className="c26"
+ fill="none"
+ height="15"
+ viewBox="0 0 15 15"
+ width="15"
+ xmlns="http://www.w3.org/2000/svg"
>
- <span
- className="c25"
- >
- <svg
- className="c26"
- fill="none"
- height="15"
- viewBox="0 0 15 15"
- width="15"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
- fill="currentColor"
- />
- </svg>
- </span>
- </div>
- </div>
+ <path
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
+ fill="currentColor"
+ />
+ </svg>
+ </span>
</div>
</div>
</div>
- </a>
- </article>
- `);
+ </div>
+ </div>
+ </a>
+</article>
+`);
});
it('renders press realese correctly', () => {
@@ -569,516 +469,411 @@ it('renders press realese correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c11 {
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 400;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c11 {
- font-size: 0.75rem;
- line-height: normal;
- font-weight: bold;
- }
-
- .c11 span {
- font-size: inherit;
- line-height: inherit;
- }
-
- .c13 {
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 700;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c13 span {
- font-size: inherit;
- line-height: inherit;
- }
-
- .c17 {
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 400;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c17 span {
- font-size: inherit;
- line-height: inherit;
- }
-
- .c6 {
- display: block;
- width: 80px;
- height: auto;
- position: relative;
- }
-
- .c9 {
- width: 80px;
- height: auto;
- display: block;
- object-fit: cover;
- }
-
- .c1 {
- position: relative;
- display: inline;
- color: #000000;
- font-weight: normal;
- }
-
- .c1:hover,
- .c1:focus {
- color: #000000;
- -webkit-text-decoration: none;
- text-decoration: none;
- }
-
- .c26 {
- display: inline-block;
- color: #FFFFFF;
- fill: currentColor;
- }
-
- .c25 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
- -webkit-transform-origin: center;
- -ms-transform-origin: center;
- transform-origin: center;
- }
-
- .c24 {
- width: 32px;
- height: 32px;
- border-radius: 50%;
- background: #E52630;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- overflow: hidden;
- }
-
- .c20 {
- height: 4px;
- width: 100%;
- position: absolute;
- left: 0;
- bottom: -5px;
- -webkit-transition: opacity 0.15s 0.1s;
- transition: opacity 0.15s 0.1s;
- opacity: 0;
- }
-
- .c22 {
- height: 2rem;
- position: absolute;
- top: 50%;
- right: 0;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- content: "";
- }
-
- .c18 {
- position: relative;
- }
-
- .c8 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- overflow: hidden;
- }
-
- .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: row;
- -ms-flex-direction: row;
- flex-direction: row;
- }
-
- .c16 {
- width: 100%;
- height: auto;
- position: relative;
- margin-top: auto;
- padding: 2rem 0 0 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- }
-
- .c16 .c21 {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
- top: auto;
- }
-
- .c16 span {
- font-weight: bold;
- font-size: 1rem;
- -webkit-transition: color 0.15s 0.1s;
- transition: color 0.15s 0.1s;
- color: #E52630;
- }
-
- .c2 {
- padding: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- height: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: inherit;
- width: 100%;
- }
-
- .c2 .c23 {
- 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%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- }
-
- .c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- position: relative;
- padding: 1rem 0px 1rem 2rem;
- }
-
- .c10 {
- padding: 2rem;
- height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- width: 100%;
- }
-
- .c14 {
- margin: 0;
- }
-
- .c12 {
- display: block;
- margin-bottom: 1rem;
- }
-
- @media (min-width:740px) {
- .c11 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .c11 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
- }
-
- @media (min-width:740px) {
- .c13 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .c13 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
- }
-
- @media (min-width:740px) {
- .c17 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .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) {
-
- }
-
- @media (min-width:1024px) {
- .c16 span {
- color: #000000;
- }
- }
-
- @media (min-width:1024px) {
- .c2 .c23 {
- -webkit-transition: background-color 0.15s 0.1s;
- transition: background-color 0.15s 0.1s;
- background-color: #000000;
- }
- }
-
- @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);
- -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);
- -webkit-transform-origin: center;
- -ms-transform-origin: center;
- transform-origin: center;
- }
-
- .c2:hover > div,
- .c2:focus > div {
- -webkit-transform: translateY(-10px);
- -ms-transform: translateY(-10px);
- transform: translateY(-10px);
- }
-
- .c2 .c7 img {
- -webkit-transform: scale(0.9);
- -ms-transform: scale(0.9);
- transform: scale(0.9);
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- }
-
- .c2:hover .c7 img {
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
- }
-
- .c2:hover .c23 {
- background-color: #E52630;
- }
-
- .c2:hover .c19 {
- opacity: 1;
- }
-
- .c2:hover .c15 span {
- color: #E52630;
- }
- }
-
- <article
- className="c0"
+.c11 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c11 {
+ font-size: 0.75rem;
+ line-height: normal;
+ font-weight: bold;
+}
+
+.c11 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c13 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 700;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c13 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c17 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c17 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c1 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c1:hover,
+.c1:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
+.c6 {
+ display: block;
+ width: 80px;
+ height: auto;
+ position: relative;
+}
+
+.c9 {
+ width: 80px;
+ height: auto;
+ display: block;
+ object-fit: cover;
+}
+
+.c20 {
+ height: 4px;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ transition: opacity 0.15s 0.1s;
+ opacity: 0;
+}
+
+.c22 {
+ height: 2rem;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ content: "";
+}
+
+.c18 {
+ position: relative;
+}
+
+.c25 {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+ transform: scale(1);
+ transform-origin: center;
+}
+
+.c24 {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: #E52630;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ overflow: hidden;
+}
+
+.c8 {
+ display: flex;
+ overflow: hidden;
+}
+
+.c4 {
+ display: flex;
+ width: 100%;
+ border-radius: 1rem;
+ overflow: hidden;
+ background-color: #FFFFFF;
+ flex-direction: row;
+}
+
+.c16 {
+ width: 100%;
+ height: auto;
+ position: relative;
+ margin-top: auto;
+ padding: 2rem 0 0 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: row;
+}
+
+.c16 .c21 {
+ transform: none;
+ top: auto;
+}
+
+.c16 span {
+ font-weight: bold;
+ font-size: 1rem;
+ transition: color 0.15s 0.1s;
+ color: #E52630;
+}
+
+.c2 {
+ padding: 0;
+ display: flex;
+ height: 100%;
+ align-items: center;
+ text-decoration: none;
+ color: inherit;
+ width: 100%;
+}
+
+.c2 .c23 {
+ 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%;
+ display: flex;
+}
+
+.c5 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ padding: 1rem 0px 1rem 2rem;
+}
+
+.c10 {
+ padding: 2rem;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+.c14 {
+ margin: 0;
+}
+
+.c12 {
+ display: block;
+ margin-bottom: 1rem;
+}
+
+.c26 {
+ display: inline-block;
+ color: #FFFFFF;
+ fill: currentColor;
+}
+
+@media (min-width: 740px) {
+ .c11 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c11 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c13 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c13 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c17 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c17 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c4 {
+ flex-direction: row;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c16 span {
+ color: #000000;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c2 .c23 {
+ transition: background-color 0.15s 0.1s;
+ background-color: #000000;
+ }
+}
+
+@media (max-width:739px) {
+ .c2 .c3 {
+ transition: box-shadow 0.3s;
+ }
+}
+
+@media (min-width: 740px) {
+ .c2 >div {
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+ transform-origin: center;
+ }
+
+ .c2:hover >div,
+ .c2:focus >div {
+ transform: translateY(-10px);
+ }
+
+ .c2 .c7 img {
+ transform: scale(0.9);
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+ }
+
+ .c2:hover .c7 img {
+ transform: scale(1);
+ }
+
+ .c2:hover .c23 {
+ background-color: #E52630;
+ }
+
+ .c2:hover .c19 {
+ opacity: 1;
+ }
+
+ .c2:hover .c15 span {
+ color: #E52630;
+ }
+}
+
+<article
+ className="c0"
+>
+ <a
+ category=""
+ className="c1 c2"
+ href="/test"
+ target="_self"
+ type="standard"
+ >
+ <div
+ className="c3 c4"
>
- <a
- className="c1 c2"
- href="/test"
- target="_self"
- type="standard"
+ <div
+ className="c5"
>
<div
- className="c3 c4"
+ className="c6 c7 c8"
>
- <div
- className="c5"
+ <img
+ alt="Image's description"
+ className="c9 lazyload"
+ data-lowsrc="mock.asset"
+ data-sizes="auto"
+ data-src="mock.asset"
+ data-srcset="mock.asset"
+ height="auto"
+ src="mock.asset"
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+ width="80px"
+ />
+ </div>
+ </div>
+ <div
+ className="c10"
+ >
+ <span
+ className="c11 c12"
+ >
+ 01 July 2019
+ </span>
+ <h4
+ className="c13 c14"
+ >
+ Press Release
+ </h4>
+ <div
+ className="c15 c16"
+ >
+ <span
+ className="c17 c18"
>
- <div
- className="c6 c7 c8"
- height="auto"
- width="80px"
- >
- <img
- alt="Image's description"
- className="c9 lazyload"
- data-lowsrc="mock.asset"
- data-sizes="auto"
- data-src="mock.asset"
- data-srcset="mock.asset"
- height="auto"
- src="mock.asset"
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
- width="80px"
- />
- </div>
- </div>
+ Read more
+ <img
+ alt="Read more"
+ className="c19 c20"
+ src="mock.asset"
+ />
+ </span>
<div
- className="c10"
+ className="c21 c22"
>
- <span
- className="c11 c12"
- >
- 01 July 2019
- </span>
- <h4
- className="c13 c14"
- >
- Press Release
- </h4>
<div
- className="c15 c16"
+ className="c23 c24"
>
<span
- className="c17 c18"
- >
- Read more
- <img
- alt="Read more"
- className="c19 c20"
- src="mock.asset"
- />
- </span>
- <div
- className="c21 c22"
+ className="c25"
>
- <div
- className="c23 c24"
+ <svg
+ className="c26"
+ fill="none"
+ height="15"
+ viewBox="0 0 15 15"
+ width="15"
+ xmlns="http://www.w3.org/2000/svg"
>
- <span
- className="c25"
- >
- <svg
- className="c26"
- fill="none"
- height="15"
- viewBox="0 0 15 15"
- width="15"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
- fill="currentColor"
- />
- </svg>
- </span>
- </div>
- </div>
+ <path
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
+ fill="currentColor"
+ />
+ </svg>
+ </span>
</div>
</div>
</div>
- </a>
- </article>
- `);
+ </div>
+ </div>
+ </a>
+</article>
+`);
});
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaserExample.jsx b/src/components/Molecules/ArticleTeaser/ArticleTeaserExample.jsx
new file mode 100644
index 000000000..5cde9d845
--- /dev/null
+++ b/src/components/Molecules/ArticleTeaser/ArticleTeaserExample.jsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import ArticleTeaser from './ArticleTeaser';
+import { defaultData } from '../../../data/data';
+
+export default function ArticleTeaserExample() {
+ return (
+ <>
+ <h3>Article teaser</h3>
+
+ <span> Recreating XS-M breakpoints layout in CRcom (somewhat)</span>
+ <div style={{ display: 'flex', background: '#E1E2E3', maxWidth: '1023px', marginBottom: '2rem', flexFlow: 'wrap', justifyContent: 'space-between' }}>
+ <div style={{ margin: '1rem', width: 'calc(100% - 2rem)' }}>
+ <ArticleTeaser
+ href="/test"
+ images={defaultData.images}
+ imageLow={defaultData.imageLow}
+ date=" 01 July 2019"
+ title="News article"
+ alt="Image's description"
+ />
+ </div>
+
+ <div style={{ margin: '1rem', width: 'calc(100% - 2rem)' }}>
+ <ArticleTeaser
+ href="/test"
+ images={defaultData.images}
+ imageLow={defaultData.imageLow}
+ title="Article teaser w/no date; used for Prizes, loads, loads, loads, loads, loads, loads, loads, loads, loads, LOADS more copy to mess with the heights a bit"
+ alt="Image's description"
+ />
+ </div>
+
+ <div style={{ margin: '1rem', width: 'calc(100% - 2rem)' }}>
+ <ArticleTeaser
+ href="/test"
+ images={defaultData.images}
+ imageLow={defaultData.imageLow}
+ title="Article teaser w/no date; used for Prizes"
+ alt="Image's description"
+ />
+ </div>
+ </div>
+
+ <span> Recreating L+ breakpoints layout in CRcom (somewhat)</span>
+ <div style={{ display: 'flex', background: '#E1E2E3', maxWidth: '100%', marginBottom: '2rem', flexFlow: 'wrap', justifyContent: 'space-between' }}>
+ <div style={{ margin: '1rem', width: 'calc(33.3% - 2rem)' }}>
+ <ArticleTeaser
+ href="/test"
+ images={defaultData.images}
+ imageLow={defaultData.imageLow}
+ date=" 01 July 2019"
+ title="News article"
+ alt="Image's description"
+ />
+ </div>
+
+ <div style={{ margin: '1rem', width: 'calc(33.3% - 2rem)' }}>
+ <ArticleTeaser
+ href="/test"
+ images={defaultData.images}
+ imageLow={defaultData.imageLow}
+ title="Article teaser w/no date; used for Prizes, loads, loads, loads, loads, loads, loads, loads, loads, loads, LOADS more copy to mess with the heights a bit"
+ alt="Image's description"
+ />
+ </div>
+
+ <div style={{ margin: '1rem', width: 'calc(33.3% - 2rem)' }}>
+ <ArticleTeaser
+ href="/test"
+ images={defaultData.images}
+ imageLow={defaultData.imageLow}
+ title="Article teaser w/no date; used for Prizes"
+ alt="Image's description"
+ />
+ </div>
+ </div>
+
+ <h3>Article teaser: Press release</h3>
+
+ <div style={{ width: '100%', padding: '1rem' }}>
+ <ArticleTeaser
+ href="/test"
+ category=""
+ date=" 01 July 2019"
+ title="Press Release"
+ alt="Image's description"
+ logoSize="80px"
+ />
+ </div>
+
+ <div style={{ width: '100%', padding: '1rem' }}>
+ <ArticleTeaser
+ href="/test"
+ category=""
+ title="Press Release w/no date"
+ alt="Image's description"
+ logoSize="80px"
+ />
+ </div>
+
+ <div style={{ width: '100%', padding: '1rem' }}>
+ <ArticleTeaser
+ href="/test"
+ category="Red Nose Day"
+ title="Red Nose Day Press Release"
+ date=" 01 July 2019"
+ alt="Image's description"
+ logoSize="80px"
+ />
+ </div>
+
+ <div style={{ width: '100%', padding: '1rem' }}>
+ <ArticleTeaser
+ href="/test"
+ category="Sport Relief"
+ title="Sport Relief Press Release"
+ date=" 01 July 2019"
+ alt="Image's description"
+ logoSize="80px"
+ />
+ </div>
+ </>
+ );
+}
diff --git a/src/components/Molecules/Banner/Banner.md b/src/components/Molecules/Banner/Banner.md
deleted file mode 100644
index caf53369d..000000000
--- a/src/components/Molecules/Banner/Banner.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Banner
-
-``` js
-import Text from '../../Atoms/Text/Text';
-
-<Banner backgroundColor='purple_dark' >
- <Text tag="p" color='white' size='m'>
- Mental health issues affect 1 in 4 of us in the UK.
- Join now and with your help we can provide vital support for people like Jordan.
- You know what to do.
- </Text>
-</Banner>
-```
diff --git a/src/components/Molecules/Banner/BannerExample.jsx b/src/components/Molecules/Banner/BannerExample.jsx
new file mode 100644
index 000000000..1d9386df7
--- /dev/null
+++ b/src/components/Molecules/Banner/BannerExample.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import Banner from './Banner';
+import Text from '../../Atoms/Text/Text';
+
+export default function BannerExample() {
+ return (
+ <Banner backgroundColor="purple_dark">
+ <Text tag="p" color="white" size="m">
+ Mental health issues affect 1 in 4 of us in the UK.
+ Join now and with your help we can provide vital support for people like Jordan.
+ You know what to do.
+ </Text>
+ </Banner>
+ );
+}
diff --git a/src/components/Molecules/Banner/__snapshots__/Banner.test.js.snap b/src/components/Molecules/Banner/__snapshots__/Banner.test.js.snap
index 7d94bc9fb..06226e7eb 100644
--- a/src/components/Molecules/Banner/__snapshots__/Banner.test.js.snap
+++ b/src/components/Molecules/Banner/__snapshots__/Banner.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -35,33 +32,34 @@ exports[`renders correctly 1`] = `
max-width: 1440px;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c2 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
padding: 4rem 2rem;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c1 {
padding: 4rem 4rem;
}
}
<div
+ backgroundColor="purple_dark"
className="c0"
>
<div
diff --git a/src/components/Molecules/Box/Box.js b/src/components/Molecules/Box/Box.js
index 41b2fbac3..986bcf160 100644
--- a/src/components/Molecules/Box/Box.js
+++ b/src/components/Molecules/Box/Box.js
@@ -22,7 +22,7 @@ const Image = styled.div`
height: auto;
flex-basis: calc(100% / 3);
img {
- border-radius: ${props => (props.squaredCorners ? '0' : '1rem')};
+ border-radius: ${props => (props.$squaredCorners ? '0' : '1rem')};
overflow: hidden;
}
`;
@@ -55,7 +55,7 @@ const Box = ({
}) => (
<Container {...rest}>
{imageLow ? (
- <Image squaredCorners={squaredCorners}>
+ <Image $squaredCorners={squaredCorners}>
<Picture
alt={imageAltText}
imageLow={imageLow}
diff --git a/src/components/Molecules/Box/Box.md b/src/components/Molecules/Box/Box.md
deleted file mode 100644
index 77b3c87e1..000000000
--- a/src/components/Molecules/Box/Box.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Box
-
-## Flexible container only (‘invisible’ to user)
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-<div style={{ display: 'flex', background: '#E1E2E3' }}>
- <div style={{ width: '50%', margin: '1rem' }}>
- <Box imageLow={defaultData.image} images={defaultData.images} height="auto">
- <Text tag="h3" family="Anton" color="black" size="xl" uppercase>
- Title
- </Text>
- <Text tag="p">Text body copy description</Text>
- </Box>
- </div>
- <div style={{ width: '50%', margin: '1rem' }}>
- <Box imageLow={defaultData.image} images={defaultData.images} height="auto">
- <Text tag="h3" family="Anton" color="black" size="xl" uppercase>
- Title
- </Text>
- <Text tag="p">Text body copy description</Text>
- </Box>
- </div>
-</div>;
-```
-
-### Box no body
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-<Box imageLow={defaultData.image} images={defaultData.image} />;
-```
diff --git a/src/components/Molecules/Box/Box.test.js b/src/components/Molecules/Box/Box.test.js
index 07a903923..e666ecd72 100644
--- a/src/components/Molecules/Box/Box.test.js
+++ b/src/components/Molecules/Box/Box.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import 'jest-styled-components';
import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
import Box from './Box';
-import { defaultData } from '../../../styleguide/data/data';
+import { defaultData } from '../../../data/data';
it('renders correctly', () => {
const tree = renderWithTheme(
<Box imageLow={defaultData.image} images={defaultData.image}>
diff --git a/src/components/Molecules/Box/BoxExample.jsx b/src/components/Molecules/Box/BoxExample.jsx
new file mode 100644
index 000000000..2a0187b55
--- /dev/null
+++ b/src/components/Molecules/Box/BoxExample.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+import Box from './Box';
+import Text from '../../Atoms/Text/Text';
+import { defaultData } from '../../../data/data';
+
+const ExampleWrapper = styled.div`
+ width: 50%;
+ margin: 1rem;
+`;
+
+export default function BoxExample() {
+ return (
+ <>
+ <h3>Flexible container only (‘invisible’ to user)</h3>
+
+ <div style={{ display: 'flex', background: '#E1E2E3' }}>
+
+ <ExampleWrapper>
+ <Box imageLow={defaultData.image} images={defaultData.images} height="auto">
+ <Text tag="h3" family="Anton" color="black" size="xl" uppercase>Title</Text>
+ <Text tag="p">Text body copy description</Text>
+ </Box>
+ </ExampleWrapper>
+
+ <ExampleWrapper>
+ <Box imageLow={defaultData.image} images={defaultData.images} height="auto">
+ <Text tag="h3" family="Anton" color="black" size="xl" uppercase>Title</Text>
+ <Text tag="p">Text body copy description</Text>
+ </Box>
+ </ExampleWrapper>
+
+ </div>
+
+ <h3>Box no body</h3>
+ <Box imageLow={defaultData.image} images={defaultData.image} />
+ </>
+ );
+}
diff --git a/src/components/Molecules/Box/__snapshots__/Box.test.js.snap b/src/components/Molecules/Box/__snapshots__/Box.test.js.snap
index aca9f63fa..6483610c5 100644
--- a/src/components/Molecules/Box/__snapshots__/Box.test.js.snap
+++ b/src/components/Molecules/Box/__snapshots__/Box.test.js.snap
@@ -16,21 +16,14 @@ exports[`renders correctly 1`] = `
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
height: 100%;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
}
.c1 {
height: auto;
- -webkit-flex-basis: calc(100% / 3);
- -ms-flex-preferred-size: calc(100% / 3);
flex-basis: calc(100% / 3);
}
@@ -41,55 +34,33 @@ exports[`renders correctly 1`] = `
.c4 {
padding: 2rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
flex-shrink: 0;
- -webkit-flex-basis: calc(200% / 3);
- -ms-flex-preferred-size: calc(200% / 3);
flex-basis: calc(200% / 3);
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c4 {
- -webkit-box-pack: normal;
- -webkit-justify-content: normal;
- -ms-flex-pack: normal;
justify-content: normal;
}
}
@@ -102,8 +73,7 @@ exports[`renders correctly 1`] = `
>
<div
className="c2 lazyload"
- height="auto"
- width="100%"
+ squaredCorners={false}
>
<img
alt=""
@@ -134,68 +104,41 @@ exports[`renders correctly 1`] = `
exports[`renders correctly with no image 1`] = `
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
height: 100%;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
}
.c1 {
padding: 2rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
flex-grow: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
flex-shrink: 0;
- -webkit-flex-basis: calc(200% / 3);
- -ms-flex-preferred-size: calc(200% / 3);
flex-basis: calc(200% / 3);
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c1 {
- -webkit-box-pack: normal;
- -webkit-justify-content: normal;
- -ms-flex-pack: normal;
justify-content: normal;
}
}
diff --git a/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js b/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js
index bc1439d30..44e40f976 100644
--- a/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js
+++ b/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js
@@ -53,15 +53,15 @@ const CTAMultiCard = ({ data }) => {
return (
<CardsQueryWrapper>
<CardsSection
- backgroundColor={cardsBackground}
- paddingAbove={paddingAbove}
- paddingBelow={paddingBelow}
+ $backgroundColor={cardsBackground}
+ $paddingAbove={paddingAbove}
+ $paddingBelow={paddingBelow}
>
<CardsInner>
<CardsContainer
- columns={columns}
- isCarousel={carouselOfCards}
- useSplideCarousel={useSplideCarousel}
+ $columns={columns}
+ $isCarousel={carouselOfCards}
+ $useSplideCarousel={useSplideCarousel}
>
{useSplideCarousel ? (
<Splide
diff --git a/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md b/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md
deleted file mode 100644
index a89da8370..000000000
--- a/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md
+++ /dev/null
@@ -1,230 +0,0 @@
-# CTAMultiCard
-## Multi-card component that handles mapping through cards array internally
-
-The component expects pre-rendered content to be passed in the `body` field of each card. The frontend should handle rich text rendering before passing data to this component.
-
-**Note:** The frontend is responsible for processing image data, link targets, and background colors. Each card object should include the following processed fields:
-- `fallback`: The fallback image src from `image.gatsbyImageData.images.fallback.src`
-- `imageLow`: The placeholder image from `image.gatsbyImageData.placeholder.fallback`
-- `images`: The srcSet from `image.gatsbyImageData.images.sources[0].srcSet`
-- `bgColour`: The processed background color (snake_case format)
-- `description`: The image description from `image.description`
-- `target`: The link target ('self' for internal links, 'blank' for external)
-- `external`: The rel attribute ('noopener' for external links, null for internal)
-
-### CTAMultiCard: Desktop Grid View (3 columns), carousel when in mobile view
-
-**NB: In mobile view, this example displays as a carousel. This example also demonstrates no vertical padding via `paddingAbove` / `paddingBelow` set to `0rem`, so it will sit flush to the surrounding container.**
-
-```js
-import CTAMultiCard from './CTAMultiCard';
-import Text from '../../../Atoms/Text/Text';
-import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
-const exampleData = require('./example_data.json');
-
-// Map cards to include pre-rendered body content and processed image/link data
-const cardsWithRenderedBody = exampleData.cards.map(card => ({
- ...card,
- body: (
- <Text tag="p">
- {card.body}
- </Text>
- ),
- fallback: challengeExampleImage,
- imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
- images: `${challengeExampleImage} 678w`,
- bgColour: "white",
- description: "",
- target: "self",
- external: null
-}));
-
-const cardsFour = [
- ...cardsWithRenderedBody,
- {
- ...cardsWithRenderedBody[0],
- id: 'example-4th-card',
- title: 'Fourth card',
- linkLabel: "quite a long link label text here long text isn't it",
- body: (
- <Text tag="p">
- Fourth card (added for layout testing)
- </Text>
- )
- }
-];
-
-const data = {
- ...exampleData,
- cards: cardsFour,
- layout: "3 columns",
- carouselOfCards: true,
- backgroundColour: "grey_medium",
- paddingAbove: '0rem',
- paddingBelow: '0rem'
-};
-
-<div style={{ background: '#E1E2E3', width: '100%' }}>
- <CTAMultiCard data={data} />
-</div>;
-```
-
-### CTAMultiCard: Carousel with just 2 cards (2 columns layout)
-
-```js
-import CTAMultiCard from './CTAMultiCard';
-import Text from '../../../Atoms/Text/Text';
-import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
-const exampleData = require('./example_data.json');
-
-// Map cards to include pre-rendered body content and processed image/link data
-const cardsWithRenderedBody = exampleData.cards.map(card => ({
- ...card,
- body: (
- <Text tag="p">
- {card.body}
- </Text>
- ),
- fallback: challengeExampleImage,
- imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
- images: `${challengeExampleImage} 678w`,
- bgColour: "white",
- description: "",
- target: "self",
- external: null
-}));
-
-const cardsTwo = cardsWithRenderedBody.slice(0, 2);
-
-const dataTwoCards = {
- ...exampleData,
- cards: cardsTwo,
- layout: "2 columns",
- carouselOfCards: true,
- backgroundColour: "grey_medium",
- paddingAbove: '0rem',
- paddingBelow: '0rem'
-};
-
-<div style={{ background: '#E1E2E3', width: '100%' }}>
- <CTAMultiCard data={dataTwoCards} />
-</div>;
-```
-
-### CTAMultiCard: Desktop Grid View (2 columns) with large padding
-
-**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a carousel. This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**
-
-```js
-import CTAMultiCard from './CTAMultiCard';
-import Text from '../../../Atoms/Text/Text';
-import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
-const exampleData = require('./example_data.json');
-
-// Map cards to include pre-rendered body content and processed image/link data
-const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
- ...card,
- body: index === 1 ? (
- <>
- <Text tag="p">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </Text>
- <Text tag="p">
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
- </Text>
- <Text tag="p">
- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
- </Text>
- </>
- ) : (
- <Text tag="p">
- {card.body}
- </Text>
- ),
- fallback: challengeExampleImage,
- imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
- images: `${challengeExampleImage} 678w`,
- bgColour: "white",
- description: "",
- target: "self",
- external: null
-}));
-
-const dataWithLongText = {
- ...exampleData,
- layout: "2 columns",
- carouselOfCards: true,
- backgroundColour: "Transparent",
- cards: cardsWithRenderedBody,
- paddingAbove: '4rem',
- paddingBelow: '4rem'
-};
-
-<div style={{ background: '#E1E2E3', width: '100%' }}>
- <CTAMultiCard data={dataWithLongText} />
-</div>;
-```
-
-### CTAMultiCard: Wrap behaviour (3 columns)
-
-```js
-import CTAMultiCard from './CTAMultiCard';
-import Text from '../../../Atoms/Text/Text';
-import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
-const exampleData = require('./example_data.json');
-
-const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
- ...card,
- id: `wrap-example-${index}`,
- body: (
- <Text tag="p">
- Short body text
- </Text>
- ),
- fallback: challengeExampleImage,
- imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
- images: `${challengeExampleImage} 678w`,
- bgColour: "white",
- description: "",
- target: "self",
- external: null
-}));
-
-const cardsFive = [
- ...cardsWithRenderedBody,
- {
- ...cardsWithRenderedBody[0],
- id: 'wrap-example-3',
- title: 'Fourth card',
- body: (
- <Text tag="p">
- Short body text (4)
- </Text>
- )
- },
- {
- ...cardsWithRenderedBody[1],
- id: 'wrap-example-4',
- title: 'Fifth card',
- body: (
- <Text tag="p">
- Short body text (5)
- </Text>
- )
- }
-];
-
-const dataWrapExample = {
- ...exampleData,
- layout: "3 columns",
- carouselOfCards: true,
- backgroundColour: "rnd_26_light_pink",
- cards: cardsFive,
- paddingAbove: '2rem',
- paddingBelow: '2rem'
-};
-
-<div style={{ background: '#E1E2E3', width: '100%' }}>
- <CTAMultiCard data={dataWrapExample} />
-</div>;
-```
diff --git a/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js b/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js
index 2fe918d1b..8e7ee5264 100644
--- a/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js
+++ b/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js
@@ -13,9 +13,9 @@ export const CardsQueryWrapper = styled.div`
export const CardsSection = styled.div`
width: 100%;
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
- padding-top: ${({ paddingAbove }) => paddingAbove};
- padding-bottom: ${({ paddingBelow }) => paddingBelow};
+ background: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)};
+ padding-top: ${({ $paddingAbove }) => $paddingAbove};
+ padding-bottom: ${({ $paddingBelow }) => $paddingBelow};
padding-inline: 1rem;
@media ${({ theme }) => theme.breakpoints2026('M')} {
padding-inline: 2rem;
@@ -51,7 +51,7 @@ const CardsContainer = styled.div`
}
/* Ensure 2-column layout behaves itself at L+. Applies when Splide is not active. */
- ${({ columns, useSplideCarousel }) => !useSplideCarousel && columns === 2 && css`
+ ${({ $columns, $useSplideCarousel }) => !$useSplideCarousel && $columns === 2 && css`
@media (min-width: ${breakpointValues.L}px) {
display: grid;
grid-template-columns: repeat(2, minmax(443px, 560px));
@@ -73,9 +73,9 @@ const CardsContainer = styled.div`
`}
// Carousel mode - horizontal scroll container (M and below)
- ${({ isCarousel }) => isCarousel && css`
+ ${({ $isCarousel }) => $isCarousel && css`
@media (max-width: ${breakpointValues.L - 1}px) {
- ${({ useSplideCarousel }) => (useSplideCarousel ? css`
+ ${({ $useSplideCarousel }) => ($useSplideCarousel ? css`
display: block;
cursor: grab;
width: 100%;
diff --git a/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.test.js b/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.test.js
index 870d5e4b3..376ae42c9 100644
--- a/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.test.js
+++ b/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.test.js
@@ -1,4 +1,5 @@
import React from 'react';
+import 'jest-styled-components';
import renderWithTheme from '../../../../../tests/hoc/shallowWithTheme';
import CTAMultiCard from './CTAMultiCard';
import exampleData from './example_data.json';
diff --git a/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCardExample.jsx b/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCardExample.jsx
new file mode 100644
index 000000000..ec58bbfa7
--- /dev/null
+++ b/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCardExample.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import CTAMultiCard from './CTAMultiCard';
+
+const ExampleWrapper = styled.div`
+ background: #E1E2E3;
+ width: 100%;
+`;
+import Text from '../../../Atoms/Text/Text';
+import ctaMultiCardExampleData from './example_data.json';
+import challengeExampleImage from '../../../../assets/challenge-1.jpg';
+
+const imageLow = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z';
+
+function makeCards(cards) {
+ return cards.map(card => ({
+ ...card,
+ body: <Text tag="p">{card.body}</Text>,
+ fallback: challengeExampleImage,
+ imageLow,
+ images: `${challengeExampleImage} 678w`,
+ bgColour: 'white',
+ description: '',
+ target: 'self',
+ external: null,
+ }));
+}
+
+export default function CTAMultiCardExample() {
+ const cardsWithBody = makeCards(ctaMultiCardExampleData.cards);
+
+ const cardsFour = [
+ ...cardsWithBody,
+ {
+ ...cardsWithBody[0],
+ id: 'example-4th-card',
+ title: 'Fourth card',
+ linkLabel: "quite a long link label text here",
+ body: <Text tag="p">Fourth card (added for layout testing)</Text>,
+ },
+ ];
+
+ const data3col = {
+ ...ctaMultiCardExampleData,
+ cards: cardsFour,
+ layout: '3 columns',
+ carouselOfCards: true,
+ backgroundColour: 'grey_medium',
+ paddingAbove: '0rem',
+ paddingBelow: '0rem',
+ };
+
+ const cardsTwo = cardsWithBody.slice(0, 2);
+ const data2col = {
+ ...ctaMultiCardExampleData,
+ cards: cardsTwo,
+ layout: '2 columns',
+ carouselOfCards: true,
+ backgroundColour: 'grey_medium',
+ paddingAbove: '0rem',
+ paddingBelow: '0rem',
+ };
+
+ return (
+ <>
+ <h3>Desktop Grid (3 columns), carousel on mobile</h3>
+ <ExampleWrapper>
+ <CTAMultiCard data={data3col} />
+ </ExampleWrapper>
+
+ <h3>2 cards (2 columns)</h3>
+ <ExampleWrapper>
+ <CTAMultiCard data={data2col} />
+ </ExampleWrapper>
+ </>
+ );
+}
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..fc012a466 100644
--- a/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap
+++ b/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap
@@ -1,39 +1,409 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`handles data structure correctly 1`] = `
+.c13 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c13 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c5 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c5:hover,
+.c5:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
+.c9 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c10 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
+.c23 {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+ transform: scale(1);
+ transform-origin: center;
+}
+
+.c21 {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: #E52630;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ overflow: hidden;
+}
+
+.c19 {
+ padding-left: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.c24 {
+ display: inline-block;
+ color: #FFFFFF;
+ fill: currentColor;
+}
+
+.c8 {
+ width: 100%;
+ overflow: hidden;
+ flex-shrink: 0;
+ background: transparent;
+ border-radius: 1rem 1rem 0 0;
+}
+
+.c8 img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ display: block;
+}
+
+.c16 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+ color: #E52630;
+ font-weight: bold;
+ text-decoration: none;
+ position: relative;
+ display: inline-block;
+}
+
+.c18 {
+ height: 4px;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ transition: opacity 0.15s 0.1s;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.c6 {
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ width: 100%;
+ flex: 1 1 auto;
+ background: transparent;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+ text-decoration: none;
+ overflow: hidden;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+.c6 img {
+ transform: scale(1);
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+}
+
+.c26 {
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ width: 100%;
+ flex: 1 1 auto;
+ background: transparent;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+ text-decoration: none;
+ overflow: hidden;
+ cursor: default;
+ box-sizing: border-box;
+}
+
+.c4 {
+ width: auto;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: stretch;
+ border-radius: 1rem;
+}
+
+.c25 {
+ width: auto;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: stretch;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
+
+.c11 {
+ width: 100%;
+ background: #FFFFFF;
+ display: flex;
+ flex-direction: column;
+ padding: 2rem;
+ flex: 1;
+ min-height: 0;
+ border-radius: 0 0 1rem 1rem;
+}
+
+.c12 {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+
+.c14 {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: auto;
+ padding-top: 2rem;
+}
+
+.c0 {
+ container-type: inline-size;
+ container-name: cta-multi-card;
+ width: 100%;
+}
+
+.c1 {
+ width: 100%;
+ background: #FFFFFF;
+ padding-inline: 1rem;
+}
+
+.c2 {
+ width: 100%;
+ max-width: 1152px;
+ margin: 0 auto;
+}
+
+.c3 {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 1rem;
+}
+
+@media (min-width: 740px) {
+ .c13 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c13 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ background: #222222;
+ }
+}
+
+@media (min-width: 740px) {
+ .c16 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c16 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c16 {
+ color: #222222;
+ }
+}
+
+@media (min-width: 740px) {
+ .c6 {
+ transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
+ transform-origin: center;
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+ }
+
+ .c6:hover,
+ .c6:focus {
+ transform: translateY(-10px);
+ }
+
+ .c6:hover {
+ box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+ }
+
+ .c6:hover .c7 img {
+ transform: scale(1.06);
+ }
+
+ .c6:hover .c15 {
+ text-decoration: none;
+ }
+
+ .c6:hover .c17 {
+ opacity: 1;
+ }
+
+ .c6:hover .c20 .c22 {
+ transform: scale(1.2);
+ }
+}
+
+@media (max-width:739px) {
+ .c4 {
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ }
+}
+
+@media (min-width:740px) and (max-width:1023px) {
+ .c4 {
+ align-self: stretch;
+ flex: 0 0 100%;
+ max-width: 309px;
+ }
+}
+
+@media (min-width:1024px) {
+ .c4 {
+ flex: 0 1 auto;
+ width: clamp(261px,calc((100% - 4rem) / 3),363px);
+ align-self: stretch;
+ }
+}
+
+@media (max-width:739px) {
+ .c25 {
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ }
+}
+
+@media (min-width:740px) and (max-width:1023px) {
+ .c25 {
+ align-self: stretch;
+ flex: 0 0 100%;
+ max-width: 309px;
+ }
+}
+
+@media (min-width:1024px) {
+ .c25 {
+ flex: 0 1 auto;
+ width: clamp(261px,calc((100% - 4rem) / 3),363px);
+ align-self: stretch;
+ }
+}
+
+@media (min-width: 740px) {
+ .c1 {
+ padding-inline: 2rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c1 {
+ padding-inline: 4rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c3 {
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: stretch;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c3 {
+ column-gap: 2rem;
+ row-gap: 2rem;
+ }
+}
+
<div
- className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
+ className="c0"
>
<div
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 kCDlNQ"
+ className="c1"
>
<div
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
+ className="c2"
>
<div
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 gAuYUa"
+ className="c3"
>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 hxglwr"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -46,13 +416,13 @@ exports[`handles data structure correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -61,30 +431,30 @@ exports[`handles data structure correctly 1`] = `
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
test go
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -104,22 +474,20 @@ exports[`handles data structure correctly 1`] = `
</a>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 nEnLi"
+ className="c25"
>
<div
- className="CTACardstyle__CardLink-sc-si8xx1-3 geBvAi"
+ className="c26"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -132,13 +500,13 @@ exports[`handles data structure correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -150,26 +518,24 @@ exports[`handles data structure correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 hxglwr"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -182,13 +548,13 @@ exports[`handles data structure correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -197,30 +563,30 @@ exports[`handles data structure correctly 1`] = `
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
test go
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -240,52 +606,52 @@ exports[`handles data structure correctly 1`] = `
</a>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 hxglwr"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test-no-image"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
Load of text here
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
View card
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -311,39 +677,435 @@ exports[`handles data structure correctly 1`] = `
`;
exports[`renders 2 columns layout correctly 1`] = `
+.c13 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c13 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c5 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c5:hover,
+.c5:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
+.c9 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c10 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
+.c23 {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+ transform: scale(1);
+ transform-origin: center;
+}
+
+.c21 {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: #E52630;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ overflow: hidden;
+}
+
+.c19 {
+ padding-left: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.c24 {
+ display: inline-block;
+ color: #FFFFFF;
+ fill: currentColor;
+}
+
+.c8 {
+ width: 100%;
+ overflow: hidden;
+ flex-shrink: 0;
+ background: transparent;
+ border-radius: 1rem 1rem 0 0;
+}
+
+.c8 img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ display: block;
+}
+
+.c16 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+ color: #E52630;
+ font-weight: bold;
+ text-decoration: none;
+ position: relative;
+ display: inline-block;
+}
+
+.c18 {
+ height: 4px;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ transition: opacity 0.15s 0.1s;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.c6 {
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ width: 100%;
+ flex: 1 1 auto;
+ background: transparent;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+ text-decoration: none;
+ overflow: hidden;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+.c6 img {
+ transform: scale(1);
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+}
+
+.c26 {
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ width: 100%;
+ flex: 1 1 auto;
+ background: transparent;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+ text-decoration: none;
+ overflow: hidden;
+ cursor: default;
+ box-sizing: border-box;
+}
+
+.c4 {
+ width: auto;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: stretch;
+ border-radius: 1rem;
+}
+
+.c25 {
+ width: auto;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: stretch;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
+
+.c11 {
+ width: 100%;
+ background: #FFFFFF;
+ display: flex;
+ flex-direction: column;
+ padding: 2rem;
+ flex: 1;
+ min-height: 0;
+ border-radius: 0 0 1rem 1rem;
+}
+
+.c12 {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+
+.c14 {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: auto;
+ padding-top: 2rem;
+}
+
+.c0 {
+ container-type: inline-size;
+ container-name: cta-multi-card;
+ width: 100%;
+}
+
+.c1 {
+ width: 100%;
+ background: transparent;
+ padding-inline: 1rem;
+}
+
+.c2 {
+ width: 100%;
+ max-width: 1152px;
+ margin: 0 auto;
+}
+
+.c3 {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 1rem;
+}
+
+@media (min-width: 740px) {
+ .c13 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c13 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ background: #222222;
+ }
+}
+
+@media (min-width: 740px) {
+ .c16 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c16 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c16 {
+ color: #222222;
+ }
+}
+
+@media (min-width: 740px) {
+ .c6 {
+ transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
+ transform-origin: center;
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+ }
+
+ .c6:hover,
+ .c6:focus {
+ transform: translateY(-10px);
+ }
+
+ .c6:hover {
+ box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+ }
+
+ .c6:hover .c7 img {
+ transform: scale(1.06);
+ }
+
+ .c6:hover .c15 {
+ text-decoration: none;
+ }
+
+ .c6:hover .c17 {
+ opacity: 1;
+ }
+
+ .c6:hover .c20 .c22 {
+ transform: scale(1.2);
+ }
+}
+
+@media (max-width:1023px) {
+ .c4 {
+ scroll-snap-align: start;
+ flex: 0 0 309px;
+ width: 309px;
+ flex-shrink: 0;
+ }
+}
+
+@media (min-width:1024px) {
+ .c4 {
+ flex: 0 1 auto;
+ width: 100%;
+ align-self: stretch;
+ }
+}
+
+@media (max-width:1023px) {
+ .c25 {
+ scroll-snap-align: start;
+ flex: 0 0 309px;
+ width: 309px;
+ flex-shrink: 0;
+ }
+}
+
+@media (min-width:1024px) {
+ .c25 {
+ flex: 0 1 auto;
+ width: 100%;
+ align-self: stretch;
+ }
+}
+
+@media (min-width: 740px) {
+ .c1 {
+ padding-inline: 2rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c1 {
+ padding-inline: 4rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c3 {
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: stretch;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c3 {
+ column-gap: 2rem;
+ row-gap: 2rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c3 {
+ display: grid;
+ grid-template-columns: repeat(2,minmax(443px,560px));
+ justify-content: center;
+ align-items: stretch;
+ column-gap: 2rem;
+ row-gap: 2rem;
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ }
+
+ .c3>*:last-child:nth-child(odd) {
+ grid-column: 1/-1;
+ justify-self: center;
+ width: min(100%,560px);
+ }
+}
+
+@media (max-width:1023px) {
+ .c3 {
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ width: 100%;
+ max-width: 100%;
+ overflow-x: auto;
+ overflow-y: visible;
+ -webkit-overflow-scrolling: touch;
+ scroll-snap-type: x mandatory;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ }
+
+ .c3::-webkit-scrollbar {
+ display: none;
+ }
+}
+
<div
- className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
+ className="c0"
>
<div
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
+ className="c1"
>
<div
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
+ className="c2"
>
<div
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 jrSYsC"
+ className="c3"
>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 dPhdyR"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -356,13 +1118,13 @@ exports[`renders 2 columns layout correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -371,30 +1133,30 @@ exports[`renders 2 columns layout correctly 1`] = `
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
test go
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -414,22 +1176,20 @@ exports[`renders 2 columns layout correctly 1`] = `
</a>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 cdJZAM"
+ className="c25"
>
<div
- className="CTACardstyle__CardLink-sc-si8xx1-3 geBvAi"
+ className="c26"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -442,13 +1202,13 @@ exports[`renders 2 columns layout correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -460,26 +1220,24 @@ exports[`renders 2 columns layout correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 dPhdyR"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -492,13 +1250,13 @@ exports[`renders 2 columns layout correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -507,30 +1265,30 @@ exports[`renders 2 columns layout correctly 1`] = `
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
test go
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -550,52 +1308,52 @@ exports[`renders 2 columns layout correctly 1`] = `
</a>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 dPhdyR"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test-no-image"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
Load of text here
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
View card
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -621,39 +1379,415 @@ exports[`renders 2 columns layout correctly 1`] = `
`;
exports[`renders carousel mode correctly 1`] = `
+.c13 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c13 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c5 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c5:hover,
+.c5:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
+.c9 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c10 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
+.c23 {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+ transform: scale(1);
+ transform-origin: center;
+}
+
+.c21 {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: #E52630;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ overflow: hidden;
+}
+
+.c19 {
+ padding-left: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.c24 {
+ display: inline-block;
+ color: #FFFFFF;
+ fill: currentColor;
+}
+
+.c8 {
+ width: 100%;
+ overflow: hidden;
+ flex-shrink: 0;
+ background: transparent;
+ border-radius: 1rem 1rem 0 0;
+}
+
+.c8 img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ display: block;
+}
+
+.c16 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+ color: #E52630;
+ font-weight: bold;
+ text-decoration: none;
+ position: relative;
+ display: inline-block;
+}
+
+.c18 {
+ height: 4px;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ transition: opacity 0.15s 0.1s;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.c6 {
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ width: 100%;
+ flex: 1 1 auto;
+ background: transparent;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+ text-decoration: none;
+ overflow: hidden;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+.c6 img {
+ transform: scale(1);
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+}
+
+.c26 {
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ width: 100%;
+ flex: 1 1 auto;
+ background: transparent;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+ text-decoration: none;
+ overflow: hidden;
+ cursor: default;
+ box-sizing: border-box;
+}
+
+.c4 {
+ width: auto;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: stretch;
+ border-radius: 1rem;
+}
+
+.c25 {
+ width: auto;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: stretch;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
+
+.c11 {
+ width: 100%;
+ background: #FFFFFF;
+ display: flex;
+ flex-direction: column;
+ padding: 2rem;
+ flex: 1;
+ min-height: 0;
+ border-radius: 0 0 1rem 1rem;
+}
+
+.c12 {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+
+.c14 {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: auto;
+ padding-top: 2rem;
+}
+
+.c0 {
+ container-type: inline-size;
+ container-name: cta-multi-card;
+ width: 100%;
+}
+
+.c1 {
+ width: 100%;
+ background: transparent;
+ padding-inline: 1rem;
+}
+
+.c2 {
+ width: 100%;
+ max-width: 1152px;
+ margin: 0 auto;
+}
+
+.c3 {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 1rem;
+}
+
+@media (min-width: 740px) {
+ .c13 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c13 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ background: #222222;
+ }
+}
+
+@media (min-width: 740px) {
+ .c16 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c16 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c16 {
+ color: #222222;
+ }
+}
+
+@media (min-width: 740px) {
+ .c6 {
+ transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
+ transform-origin: center;
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+ }
+
+ .c6:hover,
+ .c6:focus {
+ transform: translateY(-10px);
+ }
+
+ .c6:hover {
+ box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+ }
+
+ .c6:hover .c7 img {
+ transform: scale(1.06);
+ }
+
+ .c6:hover .c15 {
+ text-decoration: none;
+ }
+
+ .c6:hover .c17 {
+ opacity: 1;
+ }
+
+ .c6:hover .c20 .c22 {
+ transform: scale(1.2);
+ }
+}
+
+@media (max-width:1023px) {
+ .c4 {
+ scroll-snap-align: start;
+ flex: 0 0 309px;
+ width: 309px;
+ flex-shrink: 0;
+ }
+}
+
+@media (min-width:1024px) {
+ .c4 {
+ flex: 0 1 auto;
+ width: clamp(261px,calc((100% - 4rem) / 3),363px);
+ align-self: stretch;
+ }
+}
+
+@media (max-width:1023px) {
+ .c25 {
+ scroll-snap-align: start;
+ flex: 0 0 309px;
+ width: 309px;
+ flex-shrink: 0;
+ }
+}
+
+@media (min-width:1024px) {
+ .c25 {
+ flex: 0 1 auto;
+ width: clamp(261px,calc((100% - 4rem) / 3),363px);
+ align-self: stretch;
+ }
+}
+
+@media (min-width: 740px) {
+ .c1 {
+ padding-inline: 2rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c1 {
+ padding-inline: 4rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c3 {
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: stretch;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c3 {
+ column-gap: 2rem;
+ row-gap: 2rem;
+ }
+}
+
+@media (max-width:1023px) {
+ .c3 {
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ width: 100%;
+ max-width: 100%;
+ overflow-x: auto;
+ overflow-y: visible;
+ -webkit-overflow-scrolling: touch;
+ scroll-snap-type: x mandatory;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ }
+
+ .c3::-webkit-scrollbar {
+ display: none;
+ }
+}
+
<div
- className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
+ className="c0"
>
<div
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
+ className="c1"
>
<div
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
+ className="c2"
>
<div
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
+ className="c3"
>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 anAmi"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -666,13 +1800,13 @@ exports[`renders carousel mode correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -681,30 +1815,30 @@ exports[`renders carousel mode correctly 1`] = `
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
test go
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -724,22 +1858,20 @@ exports[`renders carousel mode correctly 1`] = `
</a>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 fOlVWn"
+ className="c25"
>
<div
- className="CTACardstyle__CardLink-sc-si8xx1-3 geBvAi"
+ className="c26"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -752,13 +1884,13 @@ exports[`renders carousel mode correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -770,26 +1902,24 @@ exports[`renders carousel mode correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 anAmi"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -802,13 +1932,13 @@ exports[`renders carousel mode correctly 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -817,30 +1947,30 @@ exports[`renders carousel mode correctly 1`] = `
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
test go
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -860,52 +1990,52 @@ exports[`renders carousel mode correctly 1`] = `
</a>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 anAmi"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test-no-image"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
Load of text here
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
View card
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -931,39 +2061,415 @@ exports[`renders carousel mode correctly 1`] = `
`;
exports[`renders correctly with data prop 1`] = `
+.c13 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c13 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c5 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c5:hover,
+.c5:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
+.c9 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c10 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
+.c23 {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+ transform: scale(1);
+ transform-origin: center;
+}
+
+.c21 {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: #E52630;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ overflow: hidden;
+}
+
+.c19 {
+ padding-left: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.c24 {
+ display: inline-block;
+ color: #FFFFFF;
+ fill: currentColor;
+}
+
+.c8 {
+ width: 100%;
+ overflow: hidden;
+ flex-shrink: 0;
+ background: transparent;
+ border-radius: 1rem 1rem 0 0;
+}
+
+.c8 img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ display: block;
+}
+
+.c16 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+ color: #E52630;
+ font-weight: bold;
+ text-decoration: none;
+ position: relative;
+ display: inline-block;
+}
+
+.c18 {
+ height: 4px;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ transition: opacity 0.15s 0.1s;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.c6 {
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ width: 100%;
+ flex: 1 1 auto;
+ background: transparent;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+ text-decoration: none;
+ overflow: hidden;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+.c6 img {
+ transform: scale(1);
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+}
+
+.c26 {
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ width: 100%;
+ flex: 1 1 auto;
+ background: transparent;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+ text-decoration: none;
+ overflow: hidden;
+ cursor: default;
+ box-sizing: border-box;
+}
+
+.c4 {
+ width: auto;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: stretch;
+ border-radius: 1rem;
+}
+
+.c25 {
+ width: auto;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: stretch;
+ border-radius: 1rem;
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
+
+.c11 {
+ width: 100%;
+ background: #FFFFFF;
+ display: flex;
+ flex-direction: column;
+ padding: 2rem;
+ flex: 1;
+ min-height: 0;
+ border-radius: 0 0 1rem 1rem;
+}
+
+.c12 {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+
+.c14 {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: auto;
+ padding-top: 2rem;
+}
+
+.c0 {
+ container-type: inline-size;
+ container-name: cta-multi-card;
+ width: 100%;
+}
+
+.c1 {
+ width: 100%;
+ background: transparent;
+ padding-inline: 1rem;
+}
+
+.c2 {
+ width: 100%;
+ max-width: 1152px;
+ margin: 0 auto;
+}
+
+.c3 {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 1rem;
+}
+
+@media (min-width: 740px) {
+ .c13 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c13 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ background: #222222;
+ }
+}
+
+@media (min-width: 740px) {
+ .c16 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c16 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c16 {
+ color: #222222;
+ }
+}
+
+@media (min-width: 740px) {
+ .c6 {
+ transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
+ transform-origin: center;
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+ }
+
+ .c6:hover,
+ .c6:focus {
+ transform: translateY(-10px);
+ }
+
+ .c6:hover {
+ box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+ }
+
+ .c6:hover .c7 img {
+ transform: scale(1.06);
+ }
+
+ .c6:hover .c15 {
+ text-decoration: none;
+ }
+
+ .c6:hover .c17 {
+ opacity: 1;
+ }
+
+ .c6:hover .c20 .c22 {
+ transform: scale(1.2);
+ }
+}
+
+@media (max-width:1023px) {
+ .c4 {
+ scroll-snap-align: start;
+ flex: 0 0 309px;
+ width: 309px;
+ flex-shrink: 0;
+ }
+}
+
+@media (min-width:1024px) {
+ .c4 {
+ flex: 0 1 auto;
+ width: clamp(261px,calc((100% - 4rem) / 3),363px);
+ align-self: stretch;
+ }
+}
+
+@media (max-width:1023px) {
+ .c25 {
+ scroll-snap-align: start;
+ flex: 0 0 309px;
+ width: 309px;
+ flex-shrink: 0;
+ }
+}
+
+@media (min-width:1024px) {
+ .c25 {
+ flex: 0 1 auto;
+ width: clamp(261px,calc((100% - 4rem) / 3),363px);
+ align-self: stretch;
+ }
+}
+
+@media (min-width: 740px) {
+ .c1 {
+ padding-inline: 2rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c1 {
+ padding-inline: 4rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c3 {
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: stretch;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c3 {
+ column-gap: 2rem;
+ row-gap: 2rem;
+ }
+}
+
+@media (max-width:1023px) {
+ .c3 {
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ width: 100%;
+ max-width: 100%;
+ overflow-x: auto;
+ overflow-y: visible;
+ -webkit-overflow-scrolling: touch;
+ scroll-snap-type: x mandatory;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ }
+
+ .c3::-webkit-scrollbar {
+ display: none;
+ }
+}
+
<div
- className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
+ className="c0"
>
<div
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
+ className="c1"
>
<div
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
+ className="c2"
>
<div
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
+ className="c3"
>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 anAmi"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -976,13 +2482,13 @@ exports[`renders correctly with data prop 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -991,30 +2497,30 @@ exports[`renders correctly with data prop 1`] = `
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
test go
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -1034,22 +2540,20 @@ exports[`renders correctly with data prop 1`] = `
</a>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 fOlVWn"
+ className="c25"
>
<div
- className="CTACardstyle__CardLink-sc-si8xx1-3 geBvAi"
+ className="c26"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -1062,13 +2566,13 @@ exports[`renders correctly with data prop 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -1080,26 +2584,24 @@ exports[`renders correctly with data prop 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 anAmi"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__ImageWrapper-sc-si8xx1-0 etphrL"
+ className="c7 c8"
>
<div
- className="Picture__Wrapper-sc-1x3z81z-0 eioWif lazyload"
- height="100%"
- width="100%"
+ className="c9 lazyload"
>
<img
alt=""
- className="Picture__Image-sc-1x3z81z-1 cFGEzv lazyload"
+ className="c10 lazyload"
data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
data-sizes="auto"
data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
@@ -1112,13 +2614,13 @@ exports[`renders correctly with data prop 1`] = `
</div>
</div>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
<strong>
Load
@@ -1127,30 +2629,30 @@ exports[`renders correctly with data prop 1`] = `
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
test go
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
@@ -1170,52 +2672,52 @@ exports[`renders correctly with data prop 1`] = `
</a>
</div>
<div
- className="CTACardstyle__CardWrapper-sc-si8xx1-4 anAmi"
+ className="c4"
>
<a
- className="Linkstyle__StyledLink-sc-t360tr-1 iydhqO CTACardstyle__CardLink-sc-si8xx1-3 udrPq"
+ className="c5 c6"
href="/test-no-image"
rel={null}
target="_self"
type="standard"
>
<div
- className="CTACardstyle__CopyAndLinkSection-sc-si8xx1-5 bmuAep"
+ className="c11"
>
<div
- className="CTACardstyle__Copy-sc-si8xx1-6 csgKNf"
+ className="c12"
>
<p
- className="Text__BaseText-sc-1snl0ya-0 ffxkcd"
+ className="c13"
>
Load of text here
</p>
</div>
<div
- className="CTACardstyle__CTA-sc-si8xx1-8 eluKFv"
+ className="c14"
>
<span
- className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
+ className="c15 c16"
>
View card
<img
alt=""
aria-hidden="true"
- className="CTACardstyle__CTATextUnderline-sc-si8xx1-2 jSsByL"
+ className="c17 c18"
src="mock.asset"
/>
</span>
<div
- className="CtaArrowCirclestyle__ArrowIconOuter-sc-1eai4ad-2 hRwDxh"
+ className="c19"
>
<div
- className="CtaArrowCirclestyle__ArrowIconWrapper-sc-1eai4ad-1 dlHKrX"
+ className="c20 c21"
>
<span
- className="CtaArrowCirclestyle__ArrowIconInner-sc-1eai4ad-0 jXJGXA"
+ className="c22 c23"
>
<svg
- className="ArrowIcon__StyledArrowIcon-sc-1iwl330-0 hLeEyo"
+ className="c24"
fill="none"
height="15"
viewBox="0 0 15 15"
diff --git a/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.js b/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.js
index 902aa71c3..d6c6f0d3b 100644
--- a/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.js
+++ b/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.js
@@ -32,9 +32,9 @@ const CTASingleCard = ({ data }) => {
return (
<SingleCardWrapper
- paddingAbove={paddingAbove}
- paddingBelow={paddingBelow}
- backgroundColor={sectionBackgroundColour}
+ $paddingAbove={paddingAbove}
+ $paddingBelow={paddingBelow}
+ $backgroundColor={sectionBackgroundColour}
>
<SingleCardInner>
<CTACard
diff --git a/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.md b/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.md
deleted file mode 100644
index af3cd37a0..000000000
--- a/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.md
+++ /dev/null
@@ -1,124 +0,0 @@
-# CTASingleCard
-## Single full-width card component
-
-This component displays a single card, full-width across the page. It looks and behaves like the single cards from CTAMultiCard, but is always displayed as a single full-width card with no grid layout or carousel functionality.
-
-The component expects pre-rendered content to be passed in the `body` field of the card. The frontend should handle rich text rendering before passing data to this component.
-
-### Props
-
-`CTASingleCard` takes a single required prop:
-
-- `data`: an object containing:
- - `card`: the processed card object (see below)
- - `backgroundColour`: background colour for the full-width section (e.g. `"grey_medium"`, `"Transparent"`)
- - `paddingAbove`: CSS value for top padding (e.g. `"1rem"`, `"32px"`)
- - `paddingBelow`: CSS value for bottom padding (e.g. `"2rem"`, `"32px"`)
-
-**Note:** The frontend is responsible for processing image data and link targets. The card object should include the following processed fields:
-- `fallback`: The fallback image src from `image.gatsbyImageData.images.fallback.src`
-- `imageLow`: The placeholder image from `image.gatsbyImageData.placeholder.fallback`
-- `images`: The srcSet from `image.gatsbyImageData.images.sources[0].srcSet`
-- `description`: The image description from `image.description`
-- `target`: The link target ('self' for internal links, 'blank' for external)
-- `external`: The rel attribute ('noopener' for external links, null for internal)
-
-### CTASingleCard: Basic Example
-
-```js
-import CTASingleCard from './CTASingleCard';
-import Text from '../../../Atoms/Text/Text';
-
-const exampleCard = {
- id: 'single-card-1',
- label: 'Example Label',
- body: (
- <Text tag="p">
- <strong>Single Card</strong> content here
- </Text>
- ),
- link: "/test",
- linkLabel: "Learn more",
- fallback: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg",
- imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
- images: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w",
- description: "Example image",
- target: "self",
- external: null
-};
-
-<div style={{ background: '#E1E2E3' }}>
- <CTASingleCard data={{ card: exampleCard, backgroundColour: 'Transparent', paddingAbove: '1rem', paddingBelow: '2rem' }} />
-</div>;
-```
-
-### CTASingleCard: With Background Colour
-
-```js
-import CTASingleCard from './CTASingleCard';
-import Text from '../../../Atoms/Text/Text';
-
-const exampleCard = {
- id: 'single-card-2',
- label: 'Example Label',
- body: (
- <Text tag="p">
- Single card
- </Text>
- ),
- link: "/test",
- linkLabel: "Learn more",
- fallback: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg",
- imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
- images: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w",
- description: "Example image",
- target: "self",
- external: null
-};
-
-<div style={{ background: '#E1E2E3' }}>
- <CTASingleCard data={{ card: exampleCard, backgroundColour: 'grey_medium', paddingAbove: '1rem', paddingBelow: '2rem' }} />
-</div>;
-```
-
-### CTASingleCard: With Long Text
-
-**NB: This example contains a lot of lorem ipsum text to demonstrate that the card will grow in height to accommodate longer content. The image proportion remains constant (1/3 width on desktop), while the card height adjusts based on the text content.**
-
-```js
-import CTASingleCard from './CTASingleCard';
-import Text from '../../../Atoms/Text/Text';
-
-const exampleCardWithLongText = {
- id: 'single-card-long-text',
- label: 'Example Label',
- body: (
- <>
- <Text tag="p">
- Single card with background colour set on the full-width section
- </Text>
- <Text tag="p">
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
- </Text>
- <Text tag="p">
- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
- </Text>
- <Text tag="p">
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
- </Text>
- </>
- ),
- link: "/test",
- linkLabel: "Learn more",
- fallback: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg",
- imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
- images: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w",
- description: "Example image",
- target: "self",
- external: null
-};
-
-<div style={{ background: '#E1E2E3' }}>
- <CTASingleCard data={{ card: exampleCardWithLongText, backgroundColour: 'rnd_26_light_pink', paddingAbove: '4rem', paddingBelow: '4rem' }} />
-</div>;
-```
diff --git a/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.style.js b/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.style.js
index bb4df8885..b50312aea 100644
--- a/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.style.js
+++ b/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.style.js
@@ -1,8 +1,8 @@
import styled from 'styled-components';
export const SingleCardSection = styled.div`
- padding-top: ${({ paddingAbove }) => paddingAbove};
- padding-bottom: ${({ paddingBelow }) => paddingBelow};
+ padding-top: ${({ $paddingAbove }) => $paddingAbove};
+ padding-bottom: ${({ $paddingBelow }) => $paddingBelow};
padding-inline: 1rem;
@media ${({ theme }) => theme.breakpoints2026('M')} {
padding-inline: 2rem;
@@ -11,7 +11,7 @@ export const SingleCardSection = styled.div`
padding-inline: 4rem;
}
width: 100%;
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+ background: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)};
`;
export const SingleCardInner = styled.div`
diff --git a/src/components/Molecules/CTA/CTASingleCard/CTASingleCardExample.jsx b/src/components/Molecules/CTA/CTASingleCard/CTASingleCardExample.jsx
new file mode 100644
index 000000000..435d57e90
--- /dev/null
+++ b/src/components/Molecules/CTA/CTASingleCard/CTASingleCardExample.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+import CTASingleCard from './CTASingleCard';
+
+const ExampleWrapper = styled.div`
+ background: #E1E2E3;
+`;
+import Text from '../../../Atoms/Text/Text';
+
+const fallback = 'https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg';
+const imageLow = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z';
+const images = 'https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w';
+
+const baseCard = {
+ link: '/test',
+ linkLabel: 'Learn more',
+ fallback,
+ imageLow,
+ images,
+ description: 'Example image',
+ target: 'self',
+ external: null,
+};
+
+export default function CTASingleCardExample() {
+ return (
+ <>
+ <h3>Basic</h3>
+ <ExampleWrapper>
+ <CTASingleCard data={{
+ card: { ...baseCard, id: 'single-card-1', label: 'Example Label', body: <Text tag="p"><strong>Single Card</strong> content here</Text> },
+ backgroundColour: 'Transparent',
+ paddingAbove: '1rem',
+ paddingBelow: '2rem',
+ }} />
+ </ExampleWrapper>
+
+ <h3>With background colour</h3>
+ <ExampleWrapper>
+ <CTASingleCard data={{
+ card: { ...baseCard, id: 'single-card-2', label: 'Example Label', body: <Text tag="p">Single card</Text> },
+ backgroundColour: 'grey_medium',
+ paddingAbove: '1rem',
+ paddingBelow: '2rem',
+ }} />
+ </ExampleWrapper>
+ </>
+ );
+}
diff --git a/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap b/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap
index c93fc1dff..8c8534225 100644
--- a/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap
+++ b/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders correctly with data prop 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -18,61 +15,40 @@ exports[`renders correctly with data prop 1`] = `
line-height: inherit;
}
-.c7 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-}
-
-.c8 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
-}
-
.c3 {
position: relative;
display: inline;
color: #000000;
font-weight: normal;
+ color: #E52630;
}
.c3:hover,
.c3:focus {
color: #000000;
- -webkit-text-decoration: none;
text-decoration: none;
}
-.c23 {
- display: inline-block;
- color: #FFFFFF;
- fill: currentColor;
+.c7 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c8 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
}
.c22 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
transform: scale(1);
- -webkit-transform-origin: center;
- -ms-transform-origin: center;
transform-origin: center;
}
@@ -81,45 +57,29 @@ exports[`renders correctly with data prop 1`] = `
height: 32px;
border-radius: 50%;
background: #E52630;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
flex-shrink: 0;
overflow: hidden;
}
.c18 {
padding-left: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
}
+.c23 {
+ display: inline-block;
+ color: #FFFFFF;
+ fill: currentColor;
+}
+
.c6 {
width: 100%;
overflow: hidden;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
flex-shrink: 0;
background: transparent;
border-radius: 1rem 1rem 0 0;
@@ -136,15 +96,11 @@ exports[`renders correctly with data prop 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
color: #E52630;
font-weight: bold;
- -webkit-text-decoration: none;
text-decoration: none;
position: relative;
display: inline-block;
@@ -156,29 +112,20 @@ exports[`renders correctly with data prop 1`] = `
position: absolute;
left: 0;
bottom: -5px;
- -webkit-transition: opacity 0.15s 0.1s;
transition: opacity 0.15s 0.1s;
opacity: 0;
pointer-events: none;
}
.c4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
width: 100%;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
flex: 1 1 auto;
background: transparent;
border-radius: 1rem;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
- -webkit-text-decoration: none;
text-decoration: none;
overflow: hidden;
cursor: pointer;
@@ -186,28 +133,15 @@ exports[`renders correctly with data prop 1`] = `
}
.c4 img {
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
transform: scale(1);
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
}
.c2 {
width: auto;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
flex-shrink: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-align-self: stretch;
- -ms-flex-item-align: stretch;
align-self: stretch;
border-radius: 1rem;
width: 100%;
@@ -217,31 +151,17 @@ exports[`renders correctly with data prop 1`] = `
.c9 {
width: 100%;
background: #FFFFFF;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
padding: 2rem;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
min-height: 0;
border-radius: 0 0 1rem 1rem;
}
.c10 {
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
min-height: 0;
}
@@ -255,20 +175,9 @@ exports[`renders correctly with data prop 1`] = `
.c13 {
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
justify-content: space-between;
margin-top: auto;
padding-top: 2rem;
@@ -283,23 +192,20 @@ exports[`renders correctly with data prop 1`] = `
}
.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
width: 100%;
max-width: 1152px;
margin: 0 auto;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c12 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c12 {
font-size: 1.125rem;
line-height: 1.375rem;
@@ -312,52 +218,47 @@ exports[`renders correctly with data prop 1`] = `
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
width: calc(100% / 3);
min-width: 292px;
max-width: 309px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
flex-shrink: 0;
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
flex-grow: 0;
height: 100%;
border-radius: 1rem 0 0 1rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
min-width: 355px;
max-width: 362px;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c6 {
min-width: 363px;
max-width: 363px;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 img {
height: 100%;
object-fit: cover;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c15 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c15 {
font-size: 1.125rem;
line-height: 1.375rem;
@@ -370,42 +271,29 @@ exports[`renders correctly with data prop 1`] = `
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
align-items: stretch;
min-height: calc(219px - 4rem);
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
min-height: 272px;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
- -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
- -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
- -webkit-transform-origin: center;
- -ms-transform-origin: center;
transform-origin: center;
- -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);
}
.c4:hover,
.c4:focus {
- -webkit-transform: translateY(-10px);
- -ms-transform: translateY(-10px);
transform: translateY(-10px);
}
@@ -414,13 +302,10 @@ exports[`renders correctly with data prop 1`] = `
}
.c4:hover .c5 img {
- -webkit-transform: scale(1.06);
- -ms-transform: scale(1.06);
transform: scale(1.06);
}
.c4:hover .c14 {
- -webkit-text-decoration: none;
text-decoration: none;
}
@@ -429,64 +314,56 @@ exports[`renders correctly with data prop 1`] = `
}
.c4:hover .c19 .c21 {
- -webkit-transform: scale(1.2);
- -ms-transform: scale(1.2);
transform: scale(1.2);
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
- -webkit-flex-basis: 100%;
- -ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
height: auto;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c2 {
- -webkit-flex-basis: 100%;
- -ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
height: auto;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c9 {
width: calc(200% / 3);
min-width: 384px;
max-width: 650px;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
border-radius: 0 1rem 1rem 0;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c9 {
min-width: 541px;
max-width: 790px;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c9 {
width: 789px;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
padding-inline: 2rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
padding-inline: 4rem;
}
@@ -513,8 +390,6 @@ exports[`renders correctly with data prop 1`] = `
>
<div
className="c7 lazyload"
- height="100%"
- width="100%"
>
<img
alt="Example image"
@@ -602,9 +477,6 @@ exports[`renders correctly without image 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -620,42 +492,21 @@ exports[`renders correctly without image 1`] = `
display: inline;
color: #000000;
font-weight: normal;
+ color: #E52630;
}
.c3:hover,
.c3:focus {
color: #000000;
- -webkit-text-decoration: none;
text-decoration: none;
}
-.c19 {
- display: inline-block;
- color: #FFFFFF;
- fill: currentColor;
-}
-
.c18 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
transform: scale(1);
- -webkit-transform-origin: center;
- -ms-transform-origin: center;
transform-origin: center;
}
@@ -664,53 +515,35 @@ exports[`renders correctly without image 1`] = `
height: 32px;
border-radius: 50%;
background: #E52630;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
flex-shrink: 0;
overflow: hidden;
}
.c14 {
padding-left: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
}
+.c19 {
+ display: inline-block;
+ color: #FFFFFF;
+ fill: currentColor;
+}
+
.c11 {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
color: #E52630;
font-weight: bold;
- -webkit-text-decoration: none;
text-decoration: none;
position: relative;
display: inline-block;
@@ -722,29 +555,20 @@ exports[`renders correctly without image 1`] = `
position: absolute;
left: 0;
bottom: -5px;
- -webkit-transition: opacity 0.15s 0.1s;
transition: opacity 0.15s 0.1s;
opacity: 0;
pointer-events: none;
}
.c4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
width: 100%;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
flex: 1 1 auto;
background: transparent;
border-radius: 1rem;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
- -webkit-text-decoration: none;
text-decoration: none;
overflow: hidden;
cursor: pointer;
@@ -752,28 +576,15 @@ exports[`renders correctly without image 1`] = `
}
.c4 img {
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
transform: scale(1);
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
- -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
}
.c2 {
width: auto;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
flex-shrink: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-align-self: stretch;
- -ms-flex-item-align: stretch;
align-self: stretch;
border-radius: 1rem;
width: 100%;
@@ -783,31 +594,17 @@ exports[`renders correctly without image 1`] = `
.c5 {
width: 100%;
background: #FFFFFF;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
padding: 2rem;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
min-height: 0;
border-radius: 0 0 1rem 1rem;
}
.c6 {
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
min-height: 0;
}
@@ -821,20 +618,9 @@ exports[`renders correctly without image 1`] = `
.c9 {
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
justify-content: space-between;
margin-top: auto;
padding-top: 2rem;
@@ -849,23 +635,20 @@ exports[`renders correctly without image 1`] = `
}
.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
width: 100%;
max-width: 1152px;
margin: 0 auto;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.125rem;
line-height: 1.375rem;
@@ -878,14 +661,14 @@ exports[`renders correctly without image 1`] = `
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c11 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c11 {
font-size: 1.125rem;
line-height: 1.375rem;
@@ -898,42 +681,29 @@ exports[`renders correctly without image 1`] = `
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
align-items: stretch;
min-height: calc(219px - 4rem);
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
min-height: 272px;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
- -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
- -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
- -webkit-transform-origin: center;
- -ms-transform-origin: center;
transform-origin: center;
- -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);
}
.c4:hover,
.c4:focus {
- -webkit-transform: translateY(-10px);
- -ms-transform: translateY(-10px);
transform: translateY(-10px);
}
@@ -942,7 +712,6 @@ exports[`renders correctly without image 1`] = `
}
.c4:hover .c10 {
- -webkit-text-decoration: none;
text-decoration: none;
}
@@ -951,64 +720,56 @@ exports[`renders correctly without image 1`] = `
}
.c4:hover .c15 .c17 {
- -webkit-transform: scale(1.2);
- -ms-transform: scale(1.2);
transform: scale(1.2);
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
- -webkit-flex-basis: 100%;
- -ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
height: auto;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c2 {
- -webkit-flex-basis: 100%;
- -ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
height: auto;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
width: calc(200% / 3);
min-width: 384px;
max-width: 650px;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
border-radius: 0 1rem 1rem 0;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c5 {
min-width: 541px;
max-width: 790px;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c5 {
width: 789px;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
padding-inline: 2rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
padding-inline: 4rem;
}
diff --git a/src/components/Molecules/CTA/shared/CTACard.js b/src/components/Molecules/CTA/shared/CTACard.js
index c43e98931..0f9f4de42 100644
--- a/src/components/Molecules/CTA/shared/CTACard.js
+++ b/src/components/Molecules/CTA/shared/CTACard.js
@@ -48,20 +48,20 @@ const CTACard = ({
return (
<CardWrapper
key={id}
- isCarousel={isCarousel}
- isFullWidth={effectiveIsFullWidth}
- columns={columns}
- hasLink={hasLink}
+ $isCarousel={isCarousel}
+ $isFullWidth={effectiveIsFullWidth}
+ $columns={columns}
+ $hasLink={hasLink}
>
<CardLink
as={hasLink ? Link : 'div'}
{...(hasLink ? { href: link, target, rel: external } : {})}
- isCarousel={isCarousel}
- isSingleCard={isSingleCard}
- isInteractive={hasLink}
+ $isCarousel={isCarousel}
+ $isSingleCard={isSingleCard}
+ $isInteractive={hasLink}
>
{imageLow && (
- <ImageWrapper isSingleCard={isSingleCard}>
+ <ImageWrapper $isSingleCard={isSingleCard}>
<Picture
alt={description}
imageLow={imageLow}
@@ -73,7 +73,7 @@ const CTACard = ({
/>
</ImageWrapper>
)}
- <CopyAndLinkSection isSingleCard={isSingleCard}>
+ <CopyAndLinkSection $isSingleCard={isSingleCard}>
<Copy>
{isSingleCard && label && (
<CardLabel>
diff --git a/src/components/Molecules/CTA/shared/CTACard.style.js b/src/components/Molecules/CTA/shared/CTACard.style.js
index 8a9858504..caf197236 100644
--- a/src/components/Molecules/CTA/shared/CTACard.style.js
+++ b/src/components/Molecules/CTA/shared/CTACard.style.js
@@ -13,7 +13,7 @@ const ImageWrapper = styled.div`
border-radius: 1rem 1rem 0 0;
// Side-by-side layout: fixed proportion for image (1/3 width) with min/max constraints
- ${({ isSingleCard }) => isSingleCard && css`
+ ${({ $isSingleCard }) => $isSingleCard && css`
@media ${({ theme }) => theme.breakpoints2026('M')} {
width: calc(100% / 3);
min-width: 292px;
@@ -42,7 +42,7 @@ const ImageWrapper = styled.div`
display: block;
// Side-by-side layout: image should fill height on desktop
- ${({ isSingleCard }) => isSingleCard && css`
+ ${({ $isSingleCard }) => $isSingleCard && css`
@media ${({ theme }) => theme.breakpoints2026('M')} {
height: 100%;
object-fit: cover;
@@ -87,11 +87,11 @@ const CardLink = styled.a`
${defaultBoxShadow()}
text-decoration: none;
overflow: hidden;
- cursor: ${({ isInteractive }) => (isInteractive ? 'pointer' : 'default')};
+ cursor: ${({ $isInteractive }) => ($isInteractive ? 'pointer' : 'default')};
box-sizing: border-box;
// Side-by-side layout for single card desktop view
- ${({ isSingleCard }) => isSingleCard && css`
+ ${({ $isSingleCard }) => $isSingleCard && css`
@media ${({ theme }) => theme.breakpoints2026('M')} {
flex-direction: row;
align-items: stretch;
@@ -104,7 +104,7 @@ const CardLink = styled.a`
}
`}
- ${({ isInteractive }) => isInteractive && css`
+ ${({ $isInteractive }) => $isInteractive && css`
img {
${imageZoom({ initialScale: 1 })}
}
@@ -155,12 +155,12 @@ const CardWrapper = styled.div`
align-self: stretch;
border-radius: 1rem;
- ${({ hasLink }) => (!hasLink && css`
+ ${({ $hasLink }) => (!$hasLink && css`
${defaultBoxShadow()}
`)}
// Full width mode - always full width, no constraints
- ${({ isFullWidth }) => isFullWidth && css`
+ ${({ $isFullWidth }) => $isFullWidth && css`
width: 100%;
max-width: 100%;
@@ -178,7 +178,7 @@ const CardWrapper = styled.div`
`}
// Carousel mode - fixed card width in horizontal scroll (L and below)
- ${({ isCarousel, isFullWidth }) => isCarousel && !isFullWidth && css`
+ ${({ $isCarousel, $isFullWidth }) => $isCarousel && !$isFullWidth && css`
@media (max-width: ${breakpointValues.L - 1}px) {
scroll-snap-align: start;
flex: 0 0 309px;
@@ -188,7 +188,7 @@ const CardWrapper = styled.div`
`}
// Below L: max-width rules vary by layout
- ${({ isCarousel, isFullWidth }) => !isCarousel && !isFullWidth && css`
+ ${({ $isCarousel, $isFullWidth }) => !$isCarousel && !$isFullWidth && css`
/* Below M: stacked cards, keep them centred */
@media (max-width: ${breakpointValues.M - 1}px) {
/* In mobile stack view we want cards to fill the container width */
@@ -199,7 +199,7 @@ const CardWrapper = styled.div`
@media (min-width: ${breakpointValues.M}px) and (max-width: ${breakpointValues.L - 1}px) {
align-self: stretch;
- ${({ columns }) => (columns === 3
+ ${({ $columns }) => ($columns === 3
? css`
flex: 0 0 100%;
max-width: 309px;
@@ -215,7 +215,7 @@ const CardWrapper = styled.div`
* This matches the 3-col behaviour (1-per-row, centered), and avoids
* the nightmare of "full width column" cards
*/
- ${({ columns }) => columns === 2 && css`
+ ${({ $columns }) => $columns === 2 && css`
@container cta-multi-card (max-width: 705px) {
flex: 0 0 100%;
width: min(100%, 345px);
@@ -226,10 +226,10 @@ const CardWrapper = styled.div`
}
`}
- ${({ isFullWidth }) => !isFullWidth && css`
+ ${({ $isFullWidth }) => !$isFullWidth && css`
@media (min-width: ${breakpointValues.L}px) {
- ${({ columns }) => (
- columns === 3
+ ${({ $columns }) => (
+ $columns === 3
? css`
flex: 0 1 auto;
width: clamp(261px, calc((100% - 4rem) / 3), 363px);
@@ -259,7 +259,7 @@ const CopyAndLinkSection = styled.div`
border-radius: 0 0 1rem 1rem;
// Side-by-side layout: text section takes remaining width (2/3) with min/max constraints
- ${({ isSingleCard }) => isSingleCard && css`
+ ${({ $isSingleCard }) => $isSingleCard && css`
@media ${({ theme }) => theme.breakpoints2026('M')} {
width: calc(200% / 3);
min-width: 384px;
diff --git a/src/components/Molecules/CTA/shared/_ArrowIcon.js b/src/components/Molecules/CTA/shared/_ArrowIcon.js
new file mode 100644
index 000000000..eb444666d
--- /dev/null
+++ b/src/components/Molecules/CTA/shared/_ArrowIcon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledArrowIcon = styled.svg`
+ display: inline-block;
+ color: ${({ theme }) => theme.color('white')};
+ fill: currentColor;
+`;
+
+const ArrowIcon = () => (
+ <StyledArrowIcon
+ width="15"
+ height="13"
+ viewBox="0 0 15 13"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z" fill="currentColor" />
+ </StyledArrowIcon>
+);
+
+export default ArrowIcon;
diff --git a/src/components/Molecules/Card/Card.js b/src/components/Molecules/Card/Card.js
index cfaa42b55..dc7c4169a 100644
--- a/src/components/Molecules/Card/Card.js
+++ b/src/components/Molecules/Card/Card.js
@@ -18,10 +18,10 @@ const Card = ({
...rest
}) => (
<Container
- backgroundColor={backgroundColor}
- squaredCorners={squaredCorners}
- smallBreakpointRowLayout={smallBreakpointRowLayout}
- mediumBreakpointRowLayout={mediumBreakpointRowLayout}
+ $backgroundColor={backgroundColor}
+ $squaredCorners={squaredCorners}
+ $smallBreakpointRowLayout={smallBreakpointRowLayout}
+ $mediumBreakpointRowLayout={mediumBreakpointRowLayout}
{...rest}
>
{imageLow ? (
@@ -42,8 +42,8 @@ const Card = ({
{children
? (
<Copy
- smallBreakpointRowLayout={smallBreakpointRowLayout}
- mediumBreakpointRowLayout={mediumBreakpointRowLayout}
+ $smallBreakpointRowLayout={smallBreakpointRowLayout}
+ $mediumBreakpointRowLayout={mediumBreakpointRowLayout}
>
{children}
</Copy>
diff --git a/src/components/Molecules/Card/Card.md b/src/components/Molecules/Card/Card.md
deleted file mode 100644
index 20b596555..000000000
--- a/src/components/Molecules/Card/Card.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# Card
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-
-<div style={{backgroundColor: 'lightblue', padding: '2rem'}}>
- <Card
- imageLow={defaultData.image}
- images={defaultData.images}
- backgroundColor="blue"
- height="auto"
- >
- <Text tag="h3" size="xl">
- Title
- </Text>
- <Text tag="p">
- Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year.
- </Text>
- </Card>
-</div>
-```
-
-### Card - row layout on small breakpoint only
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-
-<div style={{backgroundColor: 'lightblue', padding: '2rem'}}>
- <Card
- imageLow={defaultData.image}
- images={defaultData.images}
- backgroundColor="red"
- height="auto"
- smallBreakpointRowLayout={true}
- mediumBreakpointRowLayout={false}
- >
- <Text tag="h3" size="xl">
- Row layout on small breakpoint only
- </Text>
- <Text tag="p">
- Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
- </Text>
- </Card>
-</div>
-```
-
-### Card - row layout on medium breakpoint only
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-
-<div style={{backgroundColor: 'lightblue', padding: '2rem'}}>
- <Card
- imageLow={defaultData.image}
- images={defaultData.images}
- backgroundColor="orange"
- height="auto"
- smallBreakpointRowLayout={false}
- mediumBreakpointRowLayout={true}
- >
- <Text tag="h3" size="xl">
- Row layout on medium breakpoint only
- </Text>
- <Text tag="p">
- Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
- </Text>
- </Card>
-</div>
-```
-
-### Card - row layout on small and medium breakpoints
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-
-<div style={{backgroundColor: 'lightblue', padding: '2rem'}}>
- <Card
- imageLow={defaultData.image}
- images={defaultData.images}
- backgroundColor="purple"
- height="auto"
- smallBreakpointRowLayout={true}
- mediumBreakpointRowLayout={true}
- >
- <Text tag="h3" size="xl">
- Row layout on small and medium breakpoints
- </Text>
- <Text tag="p">
- Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
- </Text>
- </Card>
-</div>
-```
-
-### Card no body
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-
-<div style={{backgroundColor: 'lightblue', padding: '2rem'}}>
- <Card
- imageLow={defaultData.image}
- images={defaultData.image}
- />
-</div>
-```
diff --git a/src/components/Molecules/Card/Card.style.js b/src/components/Molecules/Card/Card.style.js
index 46195be6d..66f1933b7 100644
--- a/src/components/Molecules/Card/Card.style.js
+++ b/src/components/Molecules/Card/Card.style.js
@@ -6,29 +6,29 @@ const Container = styled.div`
position: relative;
display: flex;
height: 100%;
- border-radius: ${props => (props.squaredCorners ? '0' : `${spacing('md')}`)};
+ border-radius: ${props => (props.$squaredCorners ? '0' : `${spacing('md')}`)};
overflow: hidden;
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+ background: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)};
/* Check for Cards/smallBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
@media ${({ theme }) => theme.allBreakpoints('S')} {
- flex-direction: ${props => ((props.smallBreakpointRowLayout === true) ? 'row' : 'column')};
- background: ${({ theme, backgroundColor, smallBreakpointRowLayout }) => ((smallBreakpointRowLayout === true) ? 'transparent' : theme.color(backgroundColor))};
- ${({ smallBreakpointRowLayout }) => ((smallBreakpointRowLayout !== true) && defaultBoxShadow())};
+ flex-direction: ${props => ((props.$smallBreakpointRowLayout === true) ? 'row' : 'column')};
+ background: ${({ theme, $backgroundColor, $smallBreakpointRowLayout }) => (($smallBreakpointRowLayout === true) ? 'transparent' : theme.color($backgroundColor))};
+ ${({ $smallBreakpointRowLayout }) => (($smallBreakpointRowLayout !== true) && defaultBoxShadow())};
}
/* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
@media ${({ theme }) => theme.allBreakpoints('M')} {
- flex-direction: ${props => ((props.mediumBreakpointRowLayout === true) ? 'row' : 'column')};
- background: ${({ theme, backgroundColor, mediumBreakpointRowLayout }) => ((mediumBreakpointRowLayout === true) ? 'transparent' : theme.color(backgroundColor))};
+ flex-direction: ${props => ((props.$mediumBreakpointRowLayout === true) ? 'row' : 'column')};
+ background: ${({ theme, $backgroundColor, $mediumBreakpointRowLayout }) => (($mediumBreakpointRowLayout === true) ? 'transparent' : theme.color($backgroundColor))};
// Reset any box-shadow potentially set above:
- ${({ mediumBreakpointRowLayout }) => ((mediumBreakpointRowLayout !== true) ? defaultBoxShadow() : css`box-shadow: none;`)};
+ ${({ $mediumBreakpointRowLayout }) => (($mediumBreakpointRowLayout !== true) ? defaultBoxShadow() : css`box-shadow: none;`)};
}
/* Set desktop and upwards to normal vertical layout */
@media ${({ theme }) => theme.allBreakpoints('L')} {
flex-direction: column;
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+ background: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)};
// Ensure this breakpoint always uses box-shadows, regardless of any rowLayout config above:
${defaultBoxShadow()}
}
@@ -44,7 +44,7 @@ const Copy = styled.div`
padding: ${spacing('l')};
/* Check for Cards/smallBreakpointRowLayout prop coming from the CMS, adjust text spacing */
- ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout === true) && css`
+ ${({ $smallBreakpointRowLayout }) => ($smallBreakpointRowLayout === true) && css`
@media ${({ theme }) => theme.allBreakpoints('S')} {
padding: ${spacing('sm')};
h1 {
@@ -61,7 +61,7 @@ const Copy = styled.div`
`}
/* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS, adjust text spacing */
- ${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout === true) && css`
+ ${({ $mediumBreakpointRowLayout }) => ($mediumBreakpointRowLayout === true) && css`
@media ${({ theme }) => theme.allBreakpoints('M')} {
padding: ${spacing('sm')};
h1 {
diff --git a/src/components/Molecules/Card/Card.test.js b/src/components/Molecules/Card/Card.test.js
index f9a30ffd1..612afefcd 100644
--- a/src/components/Molecules/Card/Card.test.js
+++ b/src/components/Molecules/Card/Card.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import 'jest-styled-components';
import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
import Card from './Card';
-import { defaultData } from '../../../styleguide/data/data';
+import { defaultData } from '../../../data/data';
it('renders correctly', () => {
const tree = renderWithTheme(
<Card image={defaultData.image} images={defaultData.image} backgroundColor="yellow">
diff --git a/src/components/Molecules/Card/CardExample.jsx b/src/components/Molecules/Card/CardExample.jsx
new file mode 100644
index 000000000..22538c163
--- /dev/null
+++ b/src/components/Molecules/Card/CardExample.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import styled from 'styled-components';
+import Card from './Card';
+import Text from '../../Atoms/Text/Text';
+import { defaultData } from '../../../data/data';
+
+const ExampleWrapper = styled.div`
+ background-color: lightblue;
+ padding: 10px;
+`;
+
+export default function CardExample() {
+ return (
+ <>
+ <h3>Default</h3>
+ <ExampleWrapper>
+ <Card
+ imageLow={defaultData.image}
+ images={defaultData.images}
+ backgroundColor="blue"
+ height="auto"
+ >
+ <Text tag="h3" size="xl">Title</Text>
+ <Text tag="p">
+ Your donations make a very real difference to people in the UK and around the world,
+ whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other
+ time of year.
+ </Text>
+ </Card>
+ </ExampleWrapper>
+
+ <h3>Card - row layout on small breakpoint only</h3>
+ <ExampleWrapper>
+ <Card
+ imageLow={defaultData.image}
+ images={defaultData.images}
+ backgroundColor="red"
+ height="auto"
+ smallBreakpointRowLayout
+ mediumBreakpointRowLayout={false}
+ >
+ <Text tag="h3" size="xl">Row layout on small breakpoint only</Text>
+ <Text tag="p">
+ Your donations make a very real difference to people in the UK and around the world.
+ </Text>
+ </Card>
+ </ExampleWrapper>
+
+ <h3>Card - row layout on medium breakpoint only</h3>
+ <ExampleWrapper>
+ <Card
+ imageLow={defaultData.image}
+ images={defaultData.images}
+ backgroundColor="orange"
+ height="auto"
+ smallBreakpointRowLayout={false}
+ mediumBreakpointRowLayout
+ >
+ <Text tag="h3" size="xl">Row layout on medium breakpoint only</Text>
+ <Text tag="p">
+ Your donations make a very real difference to people in the UK and around the world.
+ </Text>
+ </Card>
+ </ExampleWrapper>
+
+ <h3>Card - row layout on small and medium breakpoints</h3>
+ <ExampleWrapper>
+ <Card
+ imageLow={defaultData.image}
+ images={defaultData.images}
+ backgroundColor="purple"
+ height="auto"
+ smallBreakpointRowLayout
+ mediumBreakpointRowLayout
+ >
+ <Text tag="h3" size="xl">Row layout on small and medium breakpoints</Text>
+ <Text tag="p">
+ Your donations make a very real difference to people in the UK and around the world.
+ </Text>
+ </Card>
+ </ExampleWrapper>
+
+ <h3>Card - no body</h3>
+ <ExampleWrapper>
+ <Card imageLow={defaultData.image} images={defaultData.image} />
+ </ExampleWrapper>
+ </>
+ );
+}
diff --git a/src/components/Molecules/Card/__snapshots__/Card.test.js.snap b/src/components/Molecules/Card/__snapshots__/Card.test.js.snap
index 1cb7e3c3a..2effb8a14 100644
--- a/src/components/Molecules/Card/__snapshots__/Card.test.js.snap
+++ b/src/components/Molecules/Card/__snapshots__/Card.test.js.snap
@@ -3,9 +3,6 @@
exports[`renders correctly 1`] = `
.c0 {
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
height: 100%;
border-radius: 1rem;
@@ -14,47 +11,36 @@ exports[`renders correctly 1`] = `
}
.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
padding: 2rem;
}
-@media (min-width:0px) {
+@media (min-width: 0px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #FFE400;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #FFE400;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #FFE400;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c1 {
padding: 2rem;
}
@@ -83,9 +69,6 @@ exports[`renders correctly 1`] = `
exports[`renders correctly 2`] = `
.c0 {
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
height: 100%;
border-radius: 1rem;
@@ -94,47 +77,36 @@ exports[`renders correctly 2`] = `
}
.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
padding: 2rem;
}
-@media (min-width:0px) {
+@media (min-width: 0px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #FFE400;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #FFE400;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #FFE400;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c1 {
padding: 2rem;
}
@@ -146,6 +118,8 @@ exports[`renders correctly 2`] = `
<div
className="c0"
+ mediumBreakpointLayout="Row"
+ smallBreakpointLayout="Row"
>
<div
className="c1"
@@ -177,9 +151,6 @@ exports[`renders correctly with no body 1`] = `
.c0 {
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
height: 100%;
border-radius: 1rem;
@@ -191,30 +162,24 @@ exports[`renders correctly with no body 1`] = `
height: auto;
}
-@media (min-width:0px) {
+@media (min-width: 0px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #FFE400;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #FFE400;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #FFE400;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
@@ -229,8 +194,6 @@ exports[`renders correctly with no body 1`] = `
>
<div
className="c2 lazyload"
- height="100%"
- width="100%"
>
<img
alt=""
diff --git a/src/components/Molecules/CardDs/CardDs.js b/src/components/Molecules/CardDs/CardDs.js
index 84aceb018..ee1aee8a9 100644
--- a/src/components/Molecules/CardDs/CardDs.js
+++ b/src/components/Molecules/CardDs/CardDs.js
@@ -24,8 +24,7 @@ const CardDs = ({
}) => {
const Media = (
<Image
- hasLink={link}
- isCarousel={isCarousel}
+ $isCarousel={isCarousel}
>
<Picture
alt={imageAltText}
@@ -43,7 +42,7 @@ const CardDs = ({
if (imageLow && link) {
return (
<MediaLink
- isCarousel={isCarousel}
+ $isCarousel={isCarousel}
aria-hidden="true"
tabIndex="-1"
href={link}
@@ -65,22 +64,22 @@ const CardDs = ({
return (
<Container
- isCarousel={isCarousel}
+ $isCarousel={isCarousel}
{...rest}
>
{hasMedia()}
<Copy
- isCarousel={isCarousel}
- hasImage={imageLow}
- hasLink={link}
- backgroundColor={backgroundColor}
+ $isCarousel={isCarousel}
+ $hasImage={imageLow}
+ $hasLink={link}
+ $backgroundColor={backgroundColor}
>
{children}
</Copy>
{link && (
<CTA
- hasImage={imageLow}
- isCarousel={isCarousel}
+ $hasImage={imageLow}
+ $isCarousel={isCarousel}
>
<Link
rel={external}
diff --git a/src/components/Molecules/CardDs/CardDs.md b/src/components/Molecules/CardDs/CardDs.md
deleted file mode 100644
index bfd76af4c..000000000
--- a/src/components/Molecules/CardDs/CardDs.md
+++ /dev/null
@@ -1,167 +0,0 @@
-# CardDs
-## Image and CTA are clickable and links user through to full content. Note that this component can now be considered legacy, as it is superseded by CTAMultiCard.
-
-### CardDs: Image, Text & Link
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import { Internal } from '../../Atoms/Icons/index';
-
-<div
- style={{
- display: 'flex',
- padding: '2rem 0',
- background: '#E1E2E3',
- justifyContent: 'space-around'
- }}
->
- <CardDs
- target="_blank"
- link="/home"
- linkLabel="Find out more"
- imageLow={defaultData.image}
- images={defaultData.images}
- imageAltText="Happy man going to work"
- backgroundColor="white"
- height="auto"
- icon={<Internal colour="white" />}
- >
- <Text tag="h3" color="purple" size="xl">
- EDINBURGH MARATHON
- </Text>
- <Text size="m" weight="bold">
- 24 May 2026
- </Text>
- <Text tag="p" size="m" weight="bold" style={{marginTop: "1rem"}}>
- Marathon
- </Text>
- <Text tag="p" size="m">
- Voted the fastest marathon in the UK, Edinburgh Marathon is perfect for first-timers and those seeking a personal best whilst soaking in the picturesque views of the East Lothian coastline.
- </Text>
- <Text tag="p" size="m">
- Registration fee: £39
- </Text>
- <Text tag="p" size="m">
- Sponsorship pledge: £500
- </Text>
- </CardDs>
-</div>;
-```
-
-
-### CardDs: Text & Link
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import { Download } from '../../Atoms/Icons/index';
-
-<div
- style={{
- display: 'flex',
- padding: '2rem 0',
- background: '#E1E2E3',
- justifyContent: 'space-around'
- }}
->
- <CardDs
- target="blank"
- link="/home"
- linkLabel="Find out more"
- backgroundColor="white"
- height="auto"
- icon={<Download colour="white" />}
- >
- <Text tag="h3" color="purple" size="xl">
- Title
- </Text>
- <Text tag="p">Text body copy description</Text>
- </CardDs>
-</div>;
-```
-
-### CardDs: Text only
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-<div
- style={{
- display: 'flex',
- padding: '2rem 0',
- background: '#E1E2E3',
- justifyContent: 'space-around'
- }}
->
- <CardDs backgroundColor="white" height="auto">
- <Text tag="h3" color="purple" size="xl">
- Title
- </Text>
- <Text tag="p">Text body copy description</Text>
- </CardDs>
-</div>;
-```
-
-### CardDs: Image & Text, No Link
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import { Internal } from '../../Atoms/Icons/index';
-
-<div
- style={{
- display: 'flex',
- padding: '2rem 0',
- background: '#E1E2E3',
- justifyContent: 'space-around'
- }}
->
- <CardDs
- target="_blank"
- imageLow={defaultData.image}
- images={defaultData.images}
- imageAltText="Happy man going to work"
- backgroundColor="white"
- height="auto"
- icon={<Internal colour="white" />}
- >
- <Text tag="h3" color="purple" size="xl">
- Title
- </Text>
- <Text tag="p">Text body copy description</Text>
- </CardDs>
-</div>;
-```
-
-
-### CardDs: Only column view for use in CardsCarousel
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import { Internal } from '../../Atoms/Icons/index';
-
-<div
- style={{
- display: 'flex',
- padding: '2rem 0',
- background: '#E1E2E3',
- justifyContent: 'space-around'
- }}
->
- <CardDs
- target="_blank"
- link="/home"
- linkLabel="Find out more"
- imageLow={defaultData.image}
- images={defaultData.images}
- imageAltText="Happy man going to work"
- backgroundColor="white"
- height="auto"
- icon={<Internal colour="white" />}
- isCarousel={true}
- >
- <Text tag="h3" color="purple" size="xl">
- Only Column view
- </Text>
- <Text tag="p">Text body copy description</Text>
- </CardDs>
-</div>;
-```
diff --git a/src/components/Molecules/CardDs/CardDs.style.js b/src/components/Molecules/CardDs/CardDs.style.js
index b6e6ea3b0..2fb227a87 100644
--- a/src/components/Molecules/CardDs/CardDs.style.js
+++ b/src/components/Molecules/CardDs/CardDs.style.js
@@ -8,9 +8,9 @@ const Container = styled.div`
flex-direction: column;
height: 100%;
width: 100%;
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+ background: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)};
- ${({ isCarousel, theme }) => !isCarousel && css`
+ ${({ $isCarousel, theme }) => !$isCarousel && css`
@media ${theme.allBreakpoints('M')} {
flex-direction: row;
}
@@ -25,7 +25,7 @@ const Image = styled.div`
height: auto;
margin: 0 0 0 1.5rem;
- ${({ isCarousel, theme }) => !isCarousel && css`
+ ${({ $isCarousel, theme }) => !$isCarousel && css`
@media ${theme.allBreakpoints('M')} {
margin: 0 -1.5rem 0 1.5rem;
}
@@ -40,7 +40,7 @@ const Image = styled.div`
const MediaLink = styled.a`
width: 100%;
- ${({ isCarousel, theme }) => !isCarousel && css`
+ ${({ $isCarousel, theme }) => !$isCarousel && css`
@media ${theme.allBreakpoints('M')} {
width: calc(50% + 6rem);
}
@@ -53,12 +53,12 @@ const MediaLink = styled.a`
const Copy = styled.div`
padding: 2rem;
- ${({ hasLink }) => hasLink && 'padding-bottom: 4rem'};
+ ${({ $hasLink }) => $hasLink && 'padding-bottom: 4rem'};
display: flex;
flex-direction: column;
border-radius: 1rem;
${defaultBoxShadow()}
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+ background: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)};
margin: 0 1.5rem 0 0;
@media ${({ theme }) => theme.allBreakpoints('XL')} {
@@ -67,11 +67,11 @@ const Copy = styled.div`
${zIndex('low')};
- ${({ hasImage, isCarousel, theme }) => hasImage && css`
+ ${({ $hasImage, $isCarousel, theme }) => $hasImage && css`
margin-top: -3rem;
min-height: 10rem;
- ${!isCarousel && css`
+ ${!$isCarousel && css`
@media ${theme.allBreakpoints('M')} {
margin: 1.5rem 0 -1.5rem -1.5rem;
width: calc(50% + 6rem);
@@ -96,10 +96,10 @@ const CTA = styled.div`
right: 2rem;
}
- ${({ isCarousel, theme }) => !isCarousel && css`
+ ${({ $isCarousel, theme }) => !$isCarousel && css`
@media ${theme.allBreakpoints('M')} {
bottom: -3rem;
- ${({ hasImage }) => !hasImage && 'bottom: -1.5rem;'};
+ ${({ $hasImage }) => !$hasImage && 'bottom: -1.5rem;'};
}
`};
`;
diff --git a/src/components/Molecules/CardDs/CardDs.test.js b/src/components/Molecules/CardDs/CardDs.test.js
index ab0969a0b..fa9735484 100644
--- a/src/components/Molecules/CardDs/CardDs.test.js
+++ b/src/components/Molecules/CardDs/CardDs.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import 'jest-styled-components';
import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
import CardDs from './CardDs';
-import { defaultData } from '../../../styleguide/data/data';import { Internal } from '../../Atoms/Icons/index';
+import { defaultData } from '../../../data/data';import { Internal } from '../../Atoms/Icons/index';
it('renders correctly', () => {
const tree = renderWithTheme(
diff --git a/src/components/Molecules/CardDs/CardDsExample.jsx b/src/components/Molecules/CardDs/CardDsExample.jsx
new file mode 100644
index 000000000..d5a381e5e
--- /dev/null
+++ b/src/components/Molecules/CardDs/CardDsExample.jsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import styled from 'styled-components';
+import CardDs from './CardDs';
+import Text from '../../Atoms/Text/Text';
+import { Internal, Download } from '../../Atoms/Icons/index';
+import { defaultData } from '../../../data/data';
+
+const ExampleWrapper = styled.div`
+ display: flex;
+ padding: 2rem 0;
+ background: #E1E2E3;
+ justify-content: space-around;
+`;
+
+export default function CardDsExample() {
+ return (
+ <>
+ <h3>CardDs: Image, Text & Link</h3>
+ <ExampleWrapper>
+ <CardDs
+ target="_blank"
+ link="/home"
+ linkLabel="Find out more"
+ imageLow={defaultData.image}
+ images={defaultData.images}
+ imageAltText="Happy man going to work"
+ backgroundColor="white"
+ height="auto"
+ icon={<Internal colour="white" />}
+ >
+ <Text tag="h3" color="purple" size="xl">
+ EDINBURGH MARATHON
+ </Text>
+ <Text size="m" weight="bold">
+ 24 May 2026
+ </Text>
+ <Text tag="p" size="m" weight="bold" style={{marginTop: "1rem"}}>
+ Marathon
+ </Text>
+ <Text tag="p" size="m">
+ Voted the fastest marathon in the UK, Edinburgh Marathon is perfect for first-timers and those seeking a personal best whilst soaking in the picturesque views of the East Lothian coastline.
+ </Text>
+ <Text tag="p" size="m">
+ Registration fee: £39
+ </Text>
+ <Text tag="p" size="m">
+ Sponsorship pledge: £500
+ </Text>
+ </CardDs>
+ </ExampleWrapper>
+
+ <h3>CardDs: Text & Link</h3>
+ <ExampleWrapper>
+ <CardDs
+ target="blank"
+ link="/home"
+ linkLabel="Find out more"
+ backgroundColor="white"
+ height="auto"
+ icon={<Download colour="white" />}
+ >
+ <Text tag="h3" color="purple" size="xl">
+ Title
+ </Text>
+ <Text tag="p">Text body copy description</Text>
+ </CardDs>
+ </ExampleWrapper>
+
+ <h3>CardDs: Text only</h3>
+ <ExampleWrapper>
+ <CardDs backgroundColor="white" height="auto">
+ <Text tag="h3" color="purple" size="xl">
+ Title
+ </Text>
+ <Text tag="p">Text body copy description</Text>
+ </CardDs>
+ </ExampleWrapper>
+
+ <h3>CardDs: Image & Text, No Link</h3>
+ <ExampleWrapper>
+ <CardDs
+ target="_blank"
+ imageLow={defaultData.image}
+ images={defaultData.images}
+ imageAltText="Happy man going to work"
+ backgroundColor="white"
+ height="auto"
+ icon={<Internal colour="white" />}
+ >
+ <Text tag="h3" color="purple" size="xl">
+ Title
+ </Text>
+ <Text tag="p">Text body copy description</Text>
+ </CardDs>
+ </ExampleWrapper>
+
+ <h3>CardDs: Only column view for use in CardsCarousel</h3>
+ <ExampleWrapper>
+ <CardDs
+ target="_blank"
+ link="/home"
+ linkLabel="Find out more"
+ imageLow={defaultData.image}
+ images={defaultData.images}
+ imageAltText="Happy man going to work"
+ backgroundColor="white"
+ height="auto"
+ icon={<Internal colour="white" />}
+ isCarousel={true}
+ >
+ <Text tag="h3" color="purple" size="xl">
+ Only Column view
+ </Text>
+ <Text tag="p">Text body copy description</Text>
+ </CardDs>
+ </ExampleWrapper>
+ </>
+ );
+}
diff --git a/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap b/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap
index 102e29c0a..e56c79afe 100644
--- a/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap
+++ b/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap
@@ -1,51 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders Column view correctly 1`] = `
-.c3 {
- display: block;
- width: 100%;
- height: auto;
- position: relative;
-}
-
-.c4 {
- width: 100%;
- height: auto;
- display: block;
- object-fit: cover;
+.c9 {
+ fill: #FFFFFF;
}
.c8 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
margin-left: 1rem;
- -webkit-align-self: center;
- -ms-flex-item-align: center;
align-self: center;
right: 1.5rem;
}
.c7 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
- -webkit-text-decoration: none;
text-decoration: none;
- -webkit-transition: all 0.2s;
transition: all 0.2s;
height: 2.5rem;
width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border: none;
cursor: pointer;
@@ -56,9 +30,6 @@ exports[`renders Column view correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -77,18 +48,23 @@ exports[`renders Column view correctly 1`] = `
opacity: 0.5;
}
-.c9 {
- fill: #FFFFFF;
+.c3 {
+ display: block;
+ width: 100%;
+ height: auto;
+ position: relative;
+}
+
+.c4 {
+ width: 100%;
+ height: auto;
+ display: block;
+ object-fit: cover;
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
height: 100%;
width: 100%;
@@ -112,12 +88,7 @@ exports[`renders Column view correctly 1`] = `
.c5 {
padding: 2rem;
padding-bottom: 4rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
border-radius: 1rem;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
@@ -135,7 +106,13 @@ exports[`renders Column view correctly 1`] = `
z-index: 2;
}
-@media (min-width:740px) {
+@media (min-width: 1024px) {
+ .c9 {
+ fill: #FFFFFF;
+ }
+}
+
+@media (min-width: 740px) {
.c8 {
width: auto;
right: auto;
@@ -143,66 +120,58 @@ exports[`renders Column view correctly 1`] = `
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
width: auto;
}
}
-@media (min-width:1024px) {
- .c9 {
- fill: #FFFFFF;
- }
-}
-
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c1 {
width: 100%;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c5 {
height: 100%;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c5 {
margin: -3rem 0 -1.5rem 0;
width: 100%;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
right: 2rem;
}
@@ -224,8 +193,6 @@ exports[`renders Column view correctly 1`] = `
>
<div
className="c3 lazyload"
- height="auto"
- width="100%"
>
<img
alt="Happy man going to work"
@@ -265,8 +232,10 @@ exports[`renders Column view correctly 1`] = `
>
<svg
className="c9"
+ colour="white"
fill="#FFFFFF"
height={20}
+ mobileColour={null}
viewBox="0 0 15 15"
width={20}
xmlns="http://www.w3.org/2000/svg"
@@ -282,51 +251,25 @@ exports[`renders Column view correctly 1`] = `
`;
exports[`renders correctly 1`] = `
-.c3 {
- display: block;
- width: 100%;
- height: auto;
- position: relative;
-}
-
-.c4 {
- width: 100%;
- height: auto;
- display: block;
- object-fit: cover;
+.c9 {
+ fill: #FFFFFF;
}
.c8 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
margin-left: 1rem;
- -webkit-align-self: center;
- -ms-flex-item-align: center;
align-self: center;
right: 1.5rem;
}
.c7 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
- -webkit-text-decoration: none;
text-decoration: none;
- -webkit-transition: all 0.2s;
transition: all 0.2s;
height: 2.5rem;
width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border: none;
cursor: pointer;
@@ -337,9 +280,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -358,18 +298,23 @@ exports[`renders correctly 1`] = `
opacity: 0.5;
}
-.c9 {
- fill: #FFFFFF;
+.c3 {
+ display: block;
+ width: 100%;
+ height: auto;
+ position: relative;
+}
+
+.c4 {
+ width: 100%;
+ height: auto;
+ display: block;
+ object-fit: cover;
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
height: 100%;
width: 100%;
@@ -393,12 +338,7 @@ exports[`renders correctly 1`] = `
.c5 {
padding: 2rem;
padding-bottom: 4rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
border-radius: 1rem;
box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
@@ -416,7 +356,13 @@ exports[`renders correctly 1`] = `
z-index: 2;
}
-@media (min-width:740px) {
+@media (min-width: 1024px) {
+ .c9 {
+ fill: #FFFFFF;
+ }
+}
+
+@media (min-width: 740px) {
.c8 {
width: auto;
right: auto;
@@ -424,99 +370,89 @@ exports[`renders correctly 1`] = `
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
width: auto;
}
}
-@media (min-width:1024px) {
- .c9 {
- fill: #FFFFFF;
- }
-}
-
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c0 {
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
margin: 0 -1.5rem 0 1.5rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
width: calc(50% + 6rem);
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c1 {
width: 100%;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c5 {
height: 100%;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
margin: 1.5rem 0 -1.5rem -1.5rem;
width: calc(50% + 6rem);
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c5 {
margin: -3rem 0 -1.5rem 0;
width: 100%;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
right: 2rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
bottom: -3rem;
}
@@ -538,8 +474,6 @@ exports[`renders correctly 1`] = `
>
<div
className="c3 lazyload"
- height="auto"
- width="100%"
>
<img
alt=""
@@ -579,8 +513,10 @@ exports[`renders correctly 1`] = `
>
<svg
className="c9"
+ colour="white"
fill="#FFFFFF"
height={20}
+ mobileColour={null}
viewBox="0 0 15 15"
width={20}
xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Molecules/Chip/Chip.js b/src/components/Molecules/Chip/Chip.js
index 5e184fe24..9513b873a 100644
--- a/src/components/Molecules/Chip/Chip.js
+++ b/src/components/Molecules/Chip/Chip.js
@@ -11,7 +11,7 @@ const Chip = ({
onChange={handleToggle}
type="checkbox"
value={category}
- color={color}
+ $color={color}
checked={checked}
/>
<span />
diff --git a/src/components/Molecules/Chip/Chip.md b/src/components/Molecules/Chip/Chip.md
deleted file mode 100644
index ec546d0bd..000000000
--- a/src/components/Molecules/Chip/Chip.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Chip
-
-```js
-const [checked, setChecked] = React.useState(false);
-const handleToggle = e => {
- setChecked(!checked);
-};
-
-<Chip
- category="Gender Justice"
- handleToggle={handleToggle}
- checked={checked}
-/>;
-```
diff --git a/src/components/Molecules/Chip/Chip.style.js b/src/components/Molecules/Chip/Chip.style.js
index 51322d0c6..4d892fbfb 100644
--- a/src/components/Molecules/Chip/Chip.style.js
+++ b/src/components/Molecules/Chip/Chip.style.js
@@ -72,7 +72,7 @@ const Overlay = styled.span`
right: 0;
bottom: 0;
${zIndex('low')};
- :hover {
+ &:hover {
background: ${({ theme }) => theme.color('grey_medium')};
}
`;
@@ -99,15 +99,15 @@ const CheckInput = styled.input`
float: left;
${zIndex('medium')};
}
- :checked ~ span {
+ &:checked ~ span {
background-size: 24px;
- background-color: ${({ theme, color }) => theme.color(color)};
+ background-color: ${({ theme, $color }) => theme.color($color)};
}
- :focus + span {
+ &:focus + span {
border-color: ${({ theme }) => theme.color('grey_for_forms')};
border-width: 3px;
}
- :focus + span {
+ &:focus + span {
border-color: ${({ theme }) => theme.color('grey_for_forms')};
border-width: 3px;
}
@@ -123,11 +123,11 @@ const ClearButton = styled.button`
padding-left: 3rem;
position: relative;
height: 48px;
- :focus {
+ &:focus {
border-color: ${({ theme }) => theme.color('grey_for_forms')};
}
- :before {
+ &:before {
content: '';
background: url(${clear}) no-repeat center;
width: 20px;
diff --git a/src/components/Molecules/Chip/Chip.test.js b/src/components/Molecules/Chip/Chip.test.js
index 578016e95..025711463 100644
--- a/src/components/Molecules/Chip/Chip.test.js
+++ b/src/components/Molecules/Chip/Chip.test.js
@@ -1,116 +1,107 @@
-import React from "react";
-import "jest-styled-components";
-import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
-import Chip from "./Chip";
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import Chip from './Chip';
-it("renders article teaser correctly", () => {
+it('renders article teaser correctly', () => {
const handleToggle = (e) => e.target.value;
const tree = renderWithTheme(
<Chip category="Gender Justice" handleToggle={handleToggle} />
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- width: auto;
- height: 48px;
- border-radius: 2rem;
- background-color: #d5d5d5;
- margin: 0.5rem 0.5rem 0 0;
- padding: 4px;
- padding-right: 1rem;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- position: relative;
- }
+.c0 {
+ display: flex;
+ align-items: center;
+ width: auto;
+ height: 48px;
+ border-radius: 2rem;
+ background-color: #d5d5d5;
+ margin: 0.5rem 0.5rem 0 0;
+ padding: 4px;
+ padding-right: 1rem;
+ flex: 0 0 auto;
+ position: relative;
+}
- .c2 {
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- opacity: 0.2;
- border-radius: 2rem;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: 1;
- }
+.c2 {
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ opacity: 0.2;
+ border-radius: 2rem;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1;
+}
- .c2:hover {
- background: #E1E2E3;
- }
+.c2:hover {
+ background: #E1E2E3;
+}
- .c1 {
- display: block;
- box-sizing: border-box;
- opacity: 0;
- position: absolute;
- left: 0px;
- width: 40px;
- height: 40px;
- margin: 0;
- border: 1px solid #666;
- }
+.c1 {
+ display: block;
+ box-sizing: border-box;
+ opacity: 0;
+ position: absolute;
+ left: 0px;
+ width: 40px;
+ height: 40px;
+ margin: 0;
+ border: 1px solid #666;
+}
- .c1 + span {
- background: url(mock.asset) no-repeat center;
- background-size: 24px;
- margin-right: 1rem;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background-color: #969598;
- float: left;
- z-index: 2;
- }
+.c1 +span {
+ background: url(mock.asset) no-repeat center;
+ background-size: 24px;
+ margin-right: 1rem;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background-color: #969598;
+ float: left;
+ z-index: 2;
+}
- .c1:checked ~ span {
- background-size: 24px;
- background-color: #6F3AAB;
- }
+.c1:checked~span {
+ background-size: 24px;
+ background-color: #6F3AAB;
+}
- .c1:focus + span {
- border-color: #666;
- border-width: 3px;
- }
+.c1:focus+span {
+ border-color: #666;
+ border-width: 3px;
+}
- .c1:focus + span {
- border-color: #666;
- border-width: 3px;
- }
+.c1:focus+span {
+ border-color: #666;
+ border-width: 3px;
+}
- @media (min-width:740px) {
- .c0 {
- margin: 1rem 1rem 0 0;
- }
- }
+@media (min-width: 740px) {
+ .c0 {
+ margin: 1rem 1rem 0 0;
+ }
+}
- <label
- className="c0"
- >
- <input
- checked={false}
- className="c1"
- color="purple"
- onChange={[Function]}
- type="checkbox"
- value="Gender Justice"
- />
- <span />
- <span
- className="c2"
- />
- Gender Justice
- </label>
- `);
+<label
+ className="c0"
+>
+ <input
+ checked={false}
+ className="c1"
+ onChange={[Function]}
+ type="checkbox"
+ value="Gender Justice"
+ />
+ <span />
+ <span
+ className="c2"
+ />
+ Gender Justice
+</label>
+`);
});
diff --git a/src/components/Molecules/Chip/ChipExample.jsx b/src/components/Molecules/Chip/ChipExample.jsx
new file mode 100644
index 000000000..f797646eb
--- /dev/null
+++ b/src/components/Molecules/Chip/ChipExample.jsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import Chip from './Chip';
+
+export default function ChipExample() {
+ const [checked, setChecked] = useState(false);
+ const handleToggle = e => {
+ setChecked(!checked);
+ };
+
+ return (
+ <Chip
+ category="Gender Justice"
+ handleToggle={handleToggle}
+ checked={checked}
+ />
+ );
+}
diff --git a/src/components/Molecules/Countdown/Countdown.md b/src/components/Molecules/Countdown/Countdown.md
deleted file mode 100644
index 351d2c522..000000000
--- a/src/components/Molecules/Countdown/Countdown.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Limit is 365 days
-
-```js
-import Text from '../../Atoms/Text/Text';
-const intro = <Text tag="h2" size="xl">Hello</Text>;
-const end = <Text tag="h2" size="xl">Bye</Text>;
-
-<Countdown endDate="Jan 16, 2026 10:30:00" endMessage={end} introMessage={intro}/>
-```
\ No newline at end of file
diff --git a/src/components/Molecules/Countdown/CountdownExample.jsx b/src/components/Molecules/Countdown/CountdownExample.jsx
new file mode 100644
index 000000000..5522b8d5a
--- /dev/null
+++ b/src/components/Molecules/Countdown/CountdownExample.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Countdown from './Countdown';
+import Text from '../../Atoms/Text/Text';
+
+export default function CountdownExample() {
+ const intro = <Text tag="h2" size="xl">Hello</Text>;
+ const end = <Text tag="h2" size="xl">Bye</Text>;
+
+ return (
+ <Countdown
+ endDate="Dec 25, 2026 10:30:00"
+ endMessage={end}
+ introMessage={intro}
+ />
+ );
+}
diff --git a/src/components/Molecules/Descriptor/Descriptor.md b/src/components/Molecules/Descriptor/Descriptor.md
deleted file mode 100644
index 87a6c4d76..000000000
--- a/src/components/Molecules/Descriptor/Descriptor.md
+++ /dev/null
@@ -1,29 +0,0 @@
-### Descriptor Component
-
-```js
-const tags = ['Tag1', 'tag2', 'tag3', 'tag4'];
-const categories = ['How we Fund', 'Children Survive & Thrive'];
-<Descriptor title="Title" date="15/06/2020" tags={tags} categories={categories}>
- Description go here...
- <br />
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
- incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
- nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
- eu fugiat nulla pariatur.
-</Descriptor>;
-```
-
-```js
-const tags = ['Tag1', 'tag2', 'tag3', 'tag4'];
-const categories = ['Environment', 'Social Tech', 'Sport for Change'];
-<Descriptor title="Title" date="15/06/2020" tags={tags} categories={categories}>
- Description go here...
- <br />
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
- incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
- nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
- eu fugiat nulla pariatur.
-</Descriptor>;
-```
diff --git a/src/components/Molecules/Descriptor/Descriptor.test.js b/src/components/Molecules/Descriptor/Descriptor.test.js
index 0a8e1ab3d..7496cd80d 100644
--- a/src/components/Molecules/Descriptor/Descriptor.test.js
+++ b/src/components/Molecules/Descriptor/Descriptor.test.js
@@ -28,9 +28,6 @@ it('renders article teaser correctly', () => {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -53,9 +50,6 @@ it('renders article teaser correctly', () => {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.5rem;
@@ -70,9 +64,6 @@ it('renders article teaser correctly', () => {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -95,9 +86,6 @@ it('renders article teaser correctly', () => {
position: relative;
width: 100%;
height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
background-color: #FFFFFF;
border-radius: 1rem;
@@ -107,12 +95,7 @@ it('renders article teaser correctly', () => {
.c1 {
padding: 2rem;
height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
@@ -127,9 +110,6 @@ it('renders article teaser correctly', () => {
}
.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: absolute;
top: 0;
@@ -154,12 +134,7 @@ it('renders article teaser correctly', () => {
.c9 {
margin: 0 0 1rem 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@@ -186,42 +161,42 @@ it('renders article teaser correctly', () => {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
}
- @media (min-width:740px) {
+ @media (min-width: 740px) {
.c3 {
font-size: 1rem;
line-height: 1.25rem;
}
}
- @media (min-width:1024px) {
+ @media (min-width: 1024px) {
.c3 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
- @media (min-width:740px) {
+ @media (min-width: 740px) {
.c7 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
- @media (min-width:1024px) {
+ @media (min-width: 1024px) {
.c7 {
font-size: 1.375rem;
line-height: 1.625rem;
}
}
- @media (min-width:740px) {
+ @media (min-width: 740px) {
.c10 {
font-size: 1rem;
line-height: 1.25rem;
}
}
- @media (min-width:1024px) {
+ @media (min-width: 1024px) {
.c10 {
font-size: 1.125rem;
line-height: 1.375rem;
diff --git a/src/components/Molecules/Descriptor/DescriptorExample.jsx b/src/components/Molecules/Descriptor/DescriptorExample.jsx
new file mode 100644
index 000000000..a5d6a1517
--- /dev/null
+++ b/src/components/Molecules/Descriptor/DescriptorExample.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import Descriptor from './Descriptor';
+
+const loremIpsum = `Description go here...
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+eu fugiat nulla pariatur.`;
+
+export default function DescriptorExample() {
+ return (
+ <>
+ <Descriptor
+ title="Title"
+ date="15/06/2020"
+ tags={['Tag1', 'tag2', 'tag3', 'tag4']}
+ categories={['How we Fund', 'Children Survive & Thrive']}
+ >
+ {loremIpsum}
+ </Descriptor>
+
+ <Descriptor
+ title="Title"
+ date="15/06/2020"
+ tags={['Tag1', 'tag2', 'tag3', 'tag4']}
+ categories={['Environment', 'Social Tech', 'Sport for Change']}
+ >
+ {loremIpsum}
+ </Descriptor>
+ </>
+ );
+}
diff --git a/src/components/Molecules/DoubleCopy/DoubleCopy.md b/src/components/Molecules/DoubleCopy/DoubleCopy.md
deleted file mode 100644
index 55f1aebaf..000000000
--- a/src/components/Molecules/DoubleCopy/DoubleCopy.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Copy Copy Single Message
-
-```js
-import RichText from '../../Atoms/RichText/RichText';
-
-<DoubleCopy
- leftCopy={
- <RichText
- markup={`<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> `}
- />
- }
- rightCopy={
- <RichText
- markup={`<h1> Right Copy </h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> `}
- />
- }
-/>;
-```
diff --git a/src/components/Molecules/DoubleCopy/DoubleCopy.test.js b/src/components/Molecules/DoubleCopy/DoubleCopy.test.js
index 8905c7dc1..c02d4b0bf 100644
--- a/src/components/Molecules/DoubleCopy/DoubleCopy.test.js
+++ b/src/components/Molecules/DoubleCopy/DoubleCopy.test.js
@@ -6,7 +6,8 @@ import DoubleCopy from './DoubleCopy';
import RichText from '../../Atoms/RichText/RichText';
it('renders correctly', () => {
- const content = '<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>';
+ const content =
+ '<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>';
const tree = renderWithTheme(
<DoubleCopy
leftCopy={<RichText markup={content} />}
@@ -15,58 +16,52 @@ it('renders correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c2 {
- text-align: left;
- }
+.c2 {
+ text-align: left;
+}
- .c0 {
- width: 100%;
- }
+.c0 {
+ width: 100%;
+}
- .c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- padding: 4rem;
- }
+.c1 {
+ display: flex;
+ padding: 4rem;
+}
- @media (min-width:740px) {
- .c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- }
- }
+@media (min-width: 740px) {
+ .c0 {
+ display: flex;
+ }
+}
- <section
- className="c0"
- >
- <div
- className="c1"
- >
- <div
- className="c2"
- dangerouslySetInnerHTML={
- Object {
- "__html": "<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
- }
- }
- />
- </div>
- <div
- className="c1"
- >
- <div
- className="c2"
- dangerouslySetInnerHTML={
- Object {
- "__html": "<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
- }
- }
- />
- </div>
- </section>
- `);
+<section
+ className="c0"
+>
+ <div
+ className="c1"
+ >
+ <div
+ className="c2"
+ dangerouslySetInnerHTML={
+ {
+ "__html": "<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
+ }
+ }
+ />
+ </div>
+ <div
+ className="c1"
+ >
+ <div
+ className="c2"
+ dangerouslySetInnerHTML={
+ {
+ "__html": "<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
+ }
+ }
+ />
+ </div>
+</section>
+`);
});
diff --git a/src/components/Molecules/DoubleCopy/DoubleCopyExample.jsx b/src/components/Molecules/DoubleCopy/DoubleCopyExample.jsx
new file mode 100644
index 000000000..3fbdf79c9
--- /dev/null
+++ b/src/components/Molecules/DoubleCopy/DoubleCopyExample.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import DoubleCopy from './DoubleCopy';
+import RichText from '../../Atoms/RichText/RichText';
+
+export default function DoubleCopyExample() {
+ return (
+ <DoubleCopy
+ leftCopy={
+ <RichText
+ markup="<h1>Left Copy</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
+ />
+ }
+ rightCopy={
+ <RichText
+ markup="<h1>Right Copy</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
+ />
+ }
+ />
+ );
+}
diff --git a/src/components/Molecules/EmailSignUp/EmailSignUp.js b/src/components/Molecules/EmailSignUp/EmailSignUp.js
index 10fc1c493..08510b942 100644
--- a/src/components/Molecules/EmailSignUp/EmailSignUp.js
+++ b/src/components/Molecules/EmailSignUp/EmailSignUp.js
@@ -23,7 +23,7 @@ const EmailSignUp = ({ formContext, ...rest }) => {
Subscribe to our newsletter
</StyledLabel>
</LabelWrapper>
- <FormWrapper error={!!errorMsg}>
+ <FormWrapper $error={!!errorMsg}>
<InputWrapper>
<StyledEmailInput
name="email"
diff --git a/src/components/Molecules/EmailSignUp/EmailSignUp.style.js b/src/components/Molecules/EmailSignUp/EmailSignUp.style.js
index b5578ee37..28f6704c3 100644
--- a/src/components/Molecules/EmailSignUp/EmailSignUp.style.js
+++ b/src/components/Molecules/EmailSignUp/EmailSignUp.style.js
@@ -35,7 +35,7 @@ export const FormWrapper = styled.div`
@media ${({ theme }) => theme.breakpoints2026('M')} {
flex-direction: row;
align-items: center;
- ${({ error }) => error && `
+ ${({ $error }) => $error && `
align-items: flex-start;
`}
}
diff --git a/src/components/Molecules/EmailSignUp/EmailSignUpExample.jsx b/src/components/Molecules/EmailSignUp/EmailSignUpExample.jsx
new file mode 100644
index 000000000..7bfbe86b0
--- /dev/null
+++ b/src/components/Molecules/EmailSignUp/EmailSignUpExample.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import styled from 'styled-components';
+import EmailSignUp from './EmailSignUp';
+import Text from '../../Atoms/Text/Text';
+
+const DarkWrapper = styled.div`
+ background: ${({ theme }) => theme.color('deep_violet_dark')};
+ padding: 2rem;
+ border-radius: 5px;
+ margin-bottom: 1rem;
+`;
+
+const validationSchema = yup.object({
+ email: yup.string().email('Please enter a valid email address').required('Email is required'),
+});
+
+export default function EmailSignUpExample() {
+ const formMethods = useForm({
+ mode: 'onBlur',
+ resolver: yupResolver(validationSchema),
+ });
+ const { handleSubmit } = formMethods;
+
+ // eslint-disable-next-line no-console
+ const onSubmit = (data) => console.log('Submitted:', data);
+
+ return (
+ <>
+ <Text tag="p">
+ The EmailSignUp molecule is a presentational sub-component; consuming applications must
+ supply their own react-hook-form context and form element.
+ </Text>
+
+ <DarkWrapper>
+ <FormProvider {...formMethods}>
+ <form onSubmit={handleSubmit(onSubmit)} noValidate>
+ <EmailSignUp formContext={formMethods} />
+ </form>
+ </FormProvider>
+ </DarkWrapper>
+ </>
+ );
+}
diff --git a/src/components/Molecules/HeroBanner/HeroBanner.js b/src/components/Molecules/HeroBanner/HeroBanner.js
index 93a517087..f69771c2c 100644
--- a/src/components/Molecules/HeroBanner/HeroBanner.js
+++ b/src/components/Molecules/HeroBanner/HeroBanner.js
@@ -51,14 +51,14 @@ const HeroBanner = ({
const copySection = (
<Copy
- variant={variant}
- copyColour={copyColour}
- textBannerCopyBackgroundColour={textBannerCopyBackgroundColour}
+ $variant={variant}
+ $copyColour={copyColour}
+ $textBannerCopyBackgroundColour={textBannerCopyBackgroundColour}
>
{children}
{(hasCTA) && (
- <CTAWrapper variant={variant}>
+ <CTAWrapper $variant={variant}>
{(variant !== variants.TEXT_BANNER) ? (
<>
<CtaText className="cta">
@@ -99,19 +99,18 @@ const HeroBanner = ({
return (
<Container
- pageBackgroundColour={pageBackgroundColour}
- paddingTop={paddingTop}
- paddingBottom={paddingBottom}
- variant={variant}
+ $pageBackgroundColour={pageBackgroundColour}
+ $paddingTop={paddingTop}
+ $paddingBottom={paddingBottom}
+ $variant={variant}
>
<OuterWrapper
- variant={variant}
- textBannerCopyBackgroundColour={textBannerCopyBackgroundColour}
+ $variant={variant}
>
{(hasImage) && (
- <MediaWrapper variant={variant}>
+ <MediaWrapper $variant={variant}>
<PictureOrVideo
images={imageSet}
imageLow={imageLow}
@@ -131,8 +130,8 @@ const HeroBanner = ({
</MediaWrapper>
)}
- <CopyOuterWrapper copyLeft={copyLeft} variant={variant}>
- <CopyInnerWrapper copyLeft={copyLeft} variant={variant}>
+ <CopyOuterWrapper $copyLeft={copyLeft} $variant={variant}>
+ <CopyInnerWrapper $copyLeft={copyLeft} $variant={variant}>
{/* Wraps the 'cards' in a link for non-Text Banners (which use CTA buttons) */}
{hasCTA && variant !== variants.TEXT_BANNER ? (
<HeroBannerLink href={ctaUrl} target={ctaNewTab ? '_blank' : '_self'}>
@@ -147,9 +146,9 @@ const HeroBanner = ({
</CopyOuterWrapper>
{(logoImage && variant !== variants.TEXT_BANNER) && (
- <LogoImageWrapper imageRight={copyLeft}>
+ <LogoImageWrapper $imageRight={copyLeft}>
<LogoImage
- imageRight={copyLeft}
+ $imageRight={copyLeft}
alt={logoImageAltText}
image={logoImage}
objectFit="contain"
diff --git a/src/components/Molecules/HeroBanner/HeroBanner.md b/src/components/Molecules/HeroBanner/HeroBanner.md
deleted file mode 100644
index c3d0d8308..000000000
--- a/src/components/Molecules/HeroBanner/HeroBanner.md
+++ /dev/null
@@ -1,347 +0,0 @@
-HeroBanner
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import variants from './_variants';
-
-<div style={{ display: 'flex', flexDirection: 'column', gap: '4rem' }}>
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.FULL_HEIGHT}
- copyLeft
- paddingTop="2rem"
- >
- <Text tag="h1">
- Full Height: Copy Left
- </Text>
- <Text tag="p">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.FULL_HEIGHT}
- copyLeft={false}
- ctaText="Register to fundraise"
- ctaUrl="http://www.comicrelief.com/register"
- paddingTop="2rem"
- >
- <Text tag="h1">
- Full Height: Copy Right w/CTA, Same Tab
- </Text>
- <Text tag="p">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.FULL_HEIGHT}
- ctaText="Register to fundraise but longer"
- ctaUrl="http://www.comicrelief.com/register"
- ctaNewTab
- copyLeft
- paddingTop="2rem"
- >
- <Text tag="h1">
- Full Height: Copy Left w/CTA, New Tab
- </Text>
- <Text tag="p">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.FULL_HEIGHT}
- ctaText="Register to fundraise but very very very very long oh it's a big link this one"
- ctaUrl="http://www.comicrelief.com/register"
- ctaNewTab
- copyLeft
- paddingBottom="0"
- paddingTop="0"
- >
- <Text tag="h1">
- Full Height: ZERO padding
- </Text>
- <Text tag="p">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="blue_dark"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- copyLeft={false}
- >
- <Text tag="h1">
- Full Height: Copy Right (default variant and padding prop values)
- </Text>
- <Text tag="p">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="orange"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.HALF_HEIGHT}
- paddingTop="2rem"
- >
- <Text tag="h1">
- Half Height: min height
- </Text>
- <Text tag="p">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="teal"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.HALF_HEIGHT}
- paddingBottom="0"
- copyLeft={false}
- >
- <Text tag="h1">
- Half Height: adapting to content, no bottom paddding
- </Text>
- <Text tag="p">
- Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
- </Text>
-
- <Text tag="p">
- Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- variant={variants.TEXT_BANNER}
- copyColour="white"
- >
- <Text tag="h1">
- Responsive Text Banner, default padding and colours
- </Text>
- <Text tag="p">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="grey"
- textBannerCopyBackgroundColour="deep_violet"
- variant={variants.TEXT_BANNER}
- ctaUrl="http://www.comicrelief.com/register"
- ctaText="Register"
- copyColour="white"
- paddingBottom="0"
- ctaNewTab
- >
- <Text tag="h1">
- Responsive Text Banner w/CTA, New Tab, no top and bottom padding
- </Text>
- <Text tag="p">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="grey"
- textBannerCopyBackgroundColour="blue_light"
- variant={variants.TEXT_BANNER}
- textBannerCtaColour="red"
- ctaText="Register"
- ctaUrl="http://www.comicrelief.com/register"
- paddingTop="2rem"
- paddingBotton="2rem"
- >
- <Text tag="h1">
- Responsive Text w/CTA, Same Tab, 2rem padding top and bottom
- </Text>
- <Text tag="p">
- Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
- </Text>
-
- <Text tag="p">
- Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
- </Text>
-
- <Text tag="p">
- Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Video poster"
- variant={variants.FULL_HEIGHT}
- copyLeft
- paddingTop="2rem"
- videoDesktop={require('../../Atoms/AmbientVideo/big-buck-bunny-1080p-30sec.mp4').default}
- videoMobile={require('../../Atoms/AmbientVideo/thetestdatacom_480p_example.mp4').default}
- videoLoop
- >
- <Text tag="h1">
- Full Height with Ambient Video (looping)
- </Text>
- <Text tag="p">
- When imageSet, imageLow, videoDesktop and videoMobile are all provided, the HeroBanner uses AmbientVideo instead of Picture. This example loops continuously.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Video poster"
- variant={variants.FULL_HEIGHT}
- copyLeft={false}
- paddingTop="2rem"
- videoDesktop={require('../../Atoms/AmbientVideo/big-buck-bunny-1080p-30sec.mp4').default}
- videoMobile={require('../../Atoms/AmbientVideo/thetestdatacom_480p_example.mp4').default}
- videoLoop={false}
- >
- <Text tag="h1">
- Full Height with Ambient Video (no loop)
- </Text>
- <Text tag="p">
- Same video setup but with videoLoop=false. The video plays once then shows the poster image.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.FULL_HEIGHT}
- copyLeft
- paddingTop="2rem"
- logoImage={defaultData.heroBannerLogoImageSquare}
- >
- <Text tag="h1">
- Full Height: Copy Left w/Logo (Right on L+)
- </Text>
- <Text tag="p">
- SQUARE-ISH logo shown top-right on Small and Medium breakpoints by design; images for those contexts will be picked to suit. However, as the image change logic happens at CRcom integration level (to avoid loading huge, unused images), we have a simpler, more
- overlappy example here.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.FULL_HEIGHT}
- copyLeft={false}
- paddingTop="2rem"
- logoImage={defaultData.heroBannerLogoImageSquare}
- >
- <Text tag="h1">
- Full Height: Copy Right w/Logo (Left on L+)
- </Text>
- <Text tag="p">
- SQUARE-ISH logo shown top-right on Small and Medium breakpoints by design; images for those contexts will be picked to suit. However, as the image change logic happens at CRcom integration level (to avoid loading huge, unused images), we have a simpler, more
- overlappy example here.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.FULL_HEIGHT}
- copyLeft={false}
- paddingTop="2rem"
- logoImage={defaultData.heroBannerLogoImageWide}
- >
- <Text tag="h1">
- Full Height: Copy Right, w/Logo (Left on L+)
- </Text>
- <Text tag="p">
- WIDE logo shown top-right on Small and Medium breakpoints by design; images for those contexts will be picked to suit. However, as the image change logic happens at CRcom integration level (to avoid loading huge, unused images), we have a simpler, more
- overlappy example here.
- </Text>
- </HeroBanner>
-
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.FULL_HEIGHT}
- copyLeft={false}
- paddingTop="2rem"
- logoImage={defaultData.heroBannerLogoImageTall}
- >
- <Text tag="h1">
- Full Height: Copy Right, w/Logo (Left on L+)
- </Text>
- <Text tag="p">
- TALL logo shown top-right on Small and Medium breakpoints by design; images for those contexts will be picked to suit. However, as the image change logic happens at CRcom integration level (to avoid loading huge, unused images), we have a simpler, more
- overlappy example here.
- </Text>
- </HeroBanner>
-
- <HeroBanner
- pageBackgroundColour="teal_light"
- imageSet={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- imageAltText="Image alt text"
- variant={variants.FULL_HEIGHT}
- copyLeft={true}
- paddingTop="2rem"
- logoImage={defaultData.heroBannerLogoImageTall}
- >
- <Text tag="h1">
- Full Height: Copy Right, w/Logo (Right on L+)
- </Text>
- <Text tag="p">
- TALL logo shown top-right on Small and Medium breakpoints by design; images for those contexts will be picked to suit. However, as the image change logic happens at CRcom integration level (to avoid loading huge, unused images), we have a simpler, more
- overlappy example here.
- </Text>
- </HeroBanner>
-
-
-</div>
-```
diff --git a/src/components/Molecules/HeroBanner/HeroBanner.style.js b/src/components/Molecules/HeroBanner/HeroBanner.style.js
index 26ac966f0..35d12fd5d 100644
--- a/src/components/Molecules/HeroBanner/HeroBanner.style.js
+++ b/src/components/Molecules/HeroBanner/HeroBanner.style.js
@@ -29,12 +29,12 @@ const Container = styled.div`
display: flex;
position: relative;
flex-direction: column;
- background: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)};
- justify-content: center;
- ${({ paddingTop, paddingBottom }) => css`padding: ${paddingTop} 0 ${paddingBottom};`}
+ background: ${({ theme, $pageBackgroundColour }) => theme.color($pageBackgroundColour)};
+ justify-content: center;
+ ${({ $paddingTop, $paddingBottom }) => css`padding: ${$paddingTop} 0 ${$paddingBottom};`}
- ${({ variant, paddingTop, paddingBottom }) => (variant === variants.TEXT_BANNER && css`
- padding: ${paddingTop} 1rem ${paddingBottom};
+ ${({ $variant, $paddingTop, $paddingBottom }) => ($variant === variants.TEXT_BANNER && css`
+ padding: ${$paddingTop} 1rem ${$paddingBottom};
@media ${({ theme }) => theme.breakpoints2026('M')} {
padding-left: 2rem; padding-right: 2rem;
@@ -42,7 +42,7 @@ const Container = styled.div`
`)};
@media ${({ theme }) => theme.breakpoints2026('L')} {
- ${({ paddingTop, paddingBottom }) => css`padding: ${paddingTop} 2rem ${paddingBottom};`}
+ ${({ $paddingTop, $paddingBottom }) => css`padding: ${$paddingTop} 2rem ${$paddingBottom};`}
align-items: center;
}
`;
@@ -62,17 +62,18 @@ const OuterWrapper = styled.div`
overflow: hidden;
${defaultBoxShadow()}
- ${({ variant }) => (variant && css`
- ${handleVariant(variant)}
+ ${({ $variant }) => ($variant && css`
+ ${handleVariant($variant)}
`)}
-
+ }
+
${playPauseReveal}
`;
const MediaWrapper = styled.div`
width: 100%;
height: 100%;
-
+
@media ${({ theme }) => theme.breakpoints2026('L')} {
position: absolute;
top: 0;
@@ -86,7 +87,7 @@ const MediaWrapper = styled.div`
transform: scale(1.02);
transition: transform 0.4s cubic-bezier(0.68, -1.15, 0.265, 2.35);
- ${({ variant }) => (variant === variants.HALF_HEIGHT && 'min-height: 450px;')};
+ ${({ $variant }) => ($variant === variants.HALF_HEIGHT && 'min-height: 450px;')};
}
&:has(+ div a:hover) {
@@ -103,12 +104,12 @@ const CopyOuterWrapper = styled.div`
left: 0;
right: 0;
display: flex;
- width: calc(100% - (2 * 1rem));
-
- ${({ variant }) => (variant !== variants.TEXT_BANNER ? 'margin: -2rem 1rem 0;' : 'margin: 0; width: 100%;')}
+ width: calc(100% - (2 * 1rem));
+
+ ${({ $variant }) => ($variant !== variants.TEXT_BANNER ? 'margin: -2rem 1rem 0;' : 'margin: 0; width: 100%;')}
@media ${({ theme }) => theme.breakpoints2026('M')} {
- ${({ variant }) => (variant !== variants.TEXT_BANNER
+ ${({ $variant }) => ($variant !== variants.TEXT_BANNER
? 'margin: -2rem 2rem 0rem; width: calc(100% - (2 * 2rem));'
: 'margin: 0; width: 100%;')}
}
@@ -119,18 +120,18 @@ const CopyOuterWrapper = styled.div`
left: auto;
height: 100%;
width: 100%;
- ${({ variant }) => (variant !== variants.TEXT_BANNER && 'max-width: 1200px;')}
+ ${({ $variant }) => ($variant !== variants.TEXT_BANNER && 'max-width: 1200px;')}
display: flex;
align-items: center;
margin: 0 auto;
- justify-content: ${({ variant, copyLeft }) => {
- if (variant === variants.TEXT_BANNER) return 'center';
- return copyLeft ? 'flex-start' : 'flex-end';
+ justify-content: ${({ $variant, $copyLeft }) => {
+ if ($variant === variants.TEXT_BANNER) return 'center';
+ return $copyLeft ? 'flex-start' : 'flex-end';
}};
- ${({ variant }) => (variant && css`
- ${handleVariant(variant)}
+ ${({ $variant }) => ($variant && css`
+ ${handleVariant($variant)}
`)}
}
`;
@@ -138,22 +139,22 @@ const CopyOuterWrapper = styled.div`
const Copy = styled.div`
width: 100%;
border-radius: 1rem;
- padding: ${({ variant }) => (variant === variants.TEXT_BANNER ? '3rem 2rem' : '2rem')};
- color: ${({ theme, copyColour }) => theme.color(copyColour)};
+ padding: ${({ $variant }) => ($variant === variants.TEXT_BANNER ? '3rem 2rem' : '2rem')};
+ color: ${({ theme, $copyColour }) => theme.color($copyColour)};
${defaultBoxShadow()}
- background-color: ${({ theme, variant, textBannerCopyBackgroundColour }) => (variant === variants.TEXT_BANNER
- ? theme.color(textBannerCopyBackgroundColour)
+ background-color: ${({ theme, $variant, $textBannerCopyBackgroundColour }) => ($variant === variants.TEXT_BANNER
+ ? theme.color($textBannerCopyBackgroundColour)
: theme.color('white')
)};
- ${({ variant, theme }) => (variant !== variants.TEXT_BANNER && `
+ ${({ $variant, theme }) => ($variant !== variants.TEXT_BANNER && `
@media ${theme.breakpoints2026('L')} {
padding: 2rem;
}
`)};
- ${({ variant, theme }) => (variant === variants.TEXT_BANNER && `
+ ${({ $variant, theme }) => ($variant === variants.TEXT_BANNER && `
text-align: center;
@media ${theme.breakpoints2026('M')} {
padding: 4rem 11%;
@@ -161,7 +162,7 @@ const Copy = styled.div`
`)};
@media ${({ theme }) => theme.breakpoints2026('L')} {
- width: ${({ variant }) => (variant !== variants.TEXT_BANNER ? '92%' : '100%')};
+ width: ${({ $variant }) => ($variant !== variants.TEXT_BANNER ? '92%' : '100%')};
}
`;
@@ -175,14 +176,14 @@ const CopyInnerWrapper = styled.div`
@media ${({ theme }) => theme.breakpoints2026('L')} {
height: auto;
- ${({ variant }) => (variant === variants.TEXT_BANNER ? css`width: 100%;` : css`width: 50%;`)};
+ ${({ $variant }) => ($variant === variants.TEXT_BANNER ? css`width: 100%;` : css`width: 50%;`)};
- ${({ variant }) => (variant === variants.TEXT_BANNER ? css`margin: 0;` : css`margin: 2rem 0;`)};
+ ${({ $variant }) => ($variant === variants.TEXT_BANNER ? css`margin: 0;` : css`margin: 2rem 0;`)};
- justify-content: ${({ copyLeft }) => (copyLeft
+ justify-content: ${({ $copyLeft }) => ($copyLeft
? css` flex-end;`
: css` flex-start;`
- )};
+ )};
}
`;
@@ -192,9 +193,9 @@ const CTAWrapper = styled.div`
position: relative;
margin-top: 2rem;
- ${({ variant }) => (variant !== variants.TEXT_BANNER && css`
+ ${({ $variant }) => ($variant !== variants.TEXT_BANNER && css`
padding-right: 2.5rem;
-
+
span {
font-weight: bold;
color: ${({ theme }) => theme.color('red')};
@@ -222,8 +223,8 @@ const HeroBannerLink = styled.a`
${bounceUpAnimation(true, 10, 2, true)}
// As the link is now wrapping the content, it'll take over width duties from 'Copy':
- width: ${({ variant }) => (variant !== variants.TEXT_BANNER ? '92%' : '100%')};
-
+ width: ${({ $variant }) => ($variant !== variants.TEXT_BANNER ? '92%' : '100%')};
+
> div {
width: 100%;
}
@@ -261,10 +262,10 @@ const LogoImageWrapper = styled.div`
width: 160px;
height: 100px;
- ${({ imageRight }) => (imageRight
+ ${({ $imageRight }) => ($imageRight
? css` right: 0;`
: css` left: 0;`
- )};
+ )};
}
`;
@@ -278,7 +279,7 @@ const LogoImage = styled(Picture)`
object-position: top right;
@media ${({ theme }) => theme.breakpoints2026('L')} {
- ${({ imageRight }) => (!imageRight && css`object-position: top left;`)};
+ ${({ $imageRight }) => (!$imageRight && css`object-position: top left;`)};
}
}
`;
diff --git a/src/components/Molecules/HeroBanner/HeroBanner.test.js b/src/components/Molecules/HeroBanner/HeroBanner.test.js
index 30725aa4e..007b7dac0 100644
--- a/src/components/Molecules/HeroBanner/HeroBanner.test.js
+++ b/src/components/Molecules/HeroBanner/HeroBanner.test.js
@@ -5,7 +5,7 @@ import HeroBanner from './HeroBanner';
import Text from '../../Atoms/Text/Text';
import variants from './_variants';
-const defaultData = require('../../../styleguide/data/data').defaultData;
+const defaultData = require('../../../data/data').defaultData;
it('renders "Full Height Media" Hero Banner correctly', () => {
const tree = renderWithTheme(
diff --git a/src/components/Molecules/HeroBanner/HeroBannerExample.jsx b/src/components/Molecules/HeroBanner/HeroBannerExample.jsx
new file mode 100644
index 000000000..98dc818aa
--- /dev/null
+++ b/src/components/Molecules/HeroBanner/HeroBannerExample.jsx
@@ -0,0 +1,348 @@
+import React from 'react';
+import HeroBanner from './HeroBanner';
+import Text from '../../Atoms/Text/Text';
+import variants from './_variants';
+import { defaultData } from '../../../data/data';
+import video1080 from '../../Atoms/AmbientVideo/big-buck-bunny-1080p-30sec.mp4';
+import videoMobile from '../../Atoms/AmbientVideo/thetestdatacom_480p_example.mp4';
+
+export default function HeroBannerExample() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '4rem' }}>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.FULL_HEIGHT}
+ copyLeft
+ paddingTop="2rem"
+ >
+ <Text tag="h1">
+ Full Height: Copy Left
+ </Text>
+ <Text tag="p">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.FULL_HEIGHT}
+ copyLeft={false}
+ ctaText="Register to fundraise"
+ ctaUrl="http://www.comicrelief.com/register"
+ paddingTop="2rem"
+ >
+ <Text tag="h1">
+ Full Height: Copy Right w/CTA, Same Tab
+ </Text>
+ <Text tag="p">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.FULL_HEIGHT}
+ ctaText="Register to fundraise but longer"
+ ctaUrl="http://www.comicrelief.com/register"
+ ctaNewTab
+ copyLeft
+ paddingTop="2rem"
+ >
+ <Text tag="h1">
+ Full Height: Copy Left w/CTA, New Tab
+ </Text>
+ <Text tag="p">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.FULL_HEIGHT}
+ ctaText="Register to fundraise but very very very very long oh it's a big link this one"
+ ctaUrl="http://www.comicrelief.com/register"
+ ctaNewTab
+ copyLeft
+ paddingBottom="0"
+ paddingTop="0"
+ >
+ <Text tag="h1">
+ Full Height: ZERO padding
+ </Text>
+ <Text tag="p">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="blue_dark"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ copyLeft={false}
+ >
+ <Text tag="h1">
+ Full Height: Copy Right (default variant and padding prop values)
+ </Text>
+ <Text tag="p">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="orange"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.HALF_HEIGHT}
+ paddingTop="2rem"
+ >
+ <Text tag="h1">
+ Half Height: min height
+ </Text>
+ <Text tag="p">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.HALF_HEIGHT}
+ paddingBottom="0"
+ copyLeft={false}
+ >
+ <Text tag="h1">
+ Half Height: adapting to content, no bottom paddding
+ </Text>
+ <Text tag="p">
+ Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+ </Text>
+
+ <Text tag="p">
+ Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ variant={variants.TEXT_BANNER}
+ copyColour="white"
+ >
+ <Text tag="h1">
+ Responsive Text Banner, default padding and colours
+ </Text>
+ <Text tag="p">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="grey"
+ textBannerCopyBackgroundColour="deep_violet"
+ variant={variants.TEXT_BANNER}
+ ctaUrl="http://www.comicrelief.com/register"
+ ctaText="Register"
+ copyColour="white"
+ paddingBottom="0"
+ ctaNewTab
+ >
+ <Text tag="h1">
+ Responsive Text Banner w/CTA, New Tab, no top and bottom padding
+ </Text>
+ <Text tag="p">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="grey"
+ textBannerCopyBackgroundColour="blue_light"
+ variant={variants.TEXT_BANNER}
+ textBannerCtaColour="red"
+ ctaText="Register"
+ ctaUrl="http://www.comicrelief.com/register"
+ paddingTop="2rem"
+ paddingBotton="2rem"
+ >
+ <Text tag="h1">
+ Responsive Text w/CTA, Same Tab, 2rem padding top and bottom
+ </Text>
+ <Text tag="p">
+ Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+ </Text>
+
+ <Text tag="p">
+ Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+ </Text>
+
+ <Text tag="p">
+ Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Video poster"
+ variant={variants.FULL_HEIGHT}
+ copyLeft
+ paddingTop="2rem"
+ videoDesktop={video1080}
+ videoMobile={videoMobile}
+ videoLoop
+ >
+ <Text tag="h1">
+ Full Height with Ambient Video (looping)
+ </Text>
+ <Text tag="p">
+ When imageSet, imageLow, videoDesktop and videoMobile are all provided, the HeroBanner uses AmbientVideo instead of Picture. This example loops continuously.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Video poster"
+ variant={variants.FULL_HEIGHT}
+ copyLeft={false}
+ paddingTop="2rem"
+ videoDesktop={video1080}
+ videoMobile={videoMobile}
+ videoLoop={false}
+ >
+ <Text tag="h1">
+ Full Height with Ambient Video (no loop)
+ </Text>
+ <Text tag="p">
+ Same video setup but with videoLoop=false. The video plays once then shows the poster image.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.FULL_HEIGHT}
+ copyLeft
+ paddingTop="2rem"
+ logoImage={defaultData.heroBannerLogoImageSquare}
+ >
+ <Text tag="h1">
+ Full Height: Copy Left w/Logo (Right on L+)
+ </Text>
+ <Text tag="p">
+ SQUARE-ISH logo shown top-right on Small and Medium breakpoints by design; images for those contexts will be picked to suit. However, as the image change logic happens at CRcom integration level (to avoid loading huge, unused images), we have a simpler, more
+ overlappy example here.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.FULL_HEIGHT}
+ copyLeft={false}
+ paddingTop="2rem"
+ logoImage={defaultData.heroBannerLogoImageSquare}
+ >
+ <Text tag="h1">
+ Full Height: Copy Right w/Logo (Left on L+)
+ </Text>
+ <Text tag="p">
+ SQUARE-ISH logo shown top-right on Small and Medium breakpoints by design; images for those contexts will be picked to suit. However, as the image change logic happens at CRcom integration level (to avoid loading huge, unused images), we have a simpler, more
+ overlappy example here.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.FULL_HEIGHT}
+ copyLeft={false}
+ paddingTop="2rem"
+ logoImage={defaultData.heroBannerLogoImageWide}
+ >
+ <Text tag="h1">
+ Full Height: Copy Right, w/Logo (Left on L+)
+ </Text>
+ <Text tag="p">
+ WIDE logo shown top-right on Small and Medium breakpoints by design; images for those contexts will be picked to suit. However, as the image change logic happens at CRcom integration level (to avoid loading huge, unused images), we have a simpler, more
+ overlappy example here.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.FULL_HEIGHT}
+ copyLeft={false}
+ paddingTop="2rem"
+ logoImage={defaultData.heroBannerLogoImageTall}
+ >
+ <Text tag="h1">
+ Full Height: Copy Right, w/Logo (Left on L+)
+ </Text>
+ <Text tag="p">
+ TALL logo shown top-right on Small and Medium breakpoints by design; images for those contexts will be picked to suit. However, as the image change logic happens at CRcom integration level (to avoid loading huge, unused images), we have a simpler, more
+ overlappy example here.
+ </Text>
+ </HeroBanner>
+
+ <HeroBanner
+ pageBackgroundColour="teal_light"
+ imageSet={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ imageAltText="Image alt text"
+ variant={variants.FULL_HEIGHT}
+ copyLeft={true}
+ paddingTop="2rem"
+ logoImage={defaultData.heroBannerLogoImageTall}
+ >
+ <Text tag="h1">
+ Full Height: Copy Right, w/Logo (Right on L+)
+ </Text>
+ <Text tag="p">
+ TALL logo shown top-right on Small and Medium breakpoints by design; images for those contexts will be picked to suit. However, as the image change logic happens at CRcom integration level (to avoid loading huge, unused images), we have a simpler, more
+ overlappy example here.
+ </Text>
+ </HeroBanner>
+
+ </div>
+ );
+}
diff --git a/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap b/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap
index 63508695f..6af485a98 100644
--- a/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap
+++ b/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 2rem;
line-height: 2rem;
@@ -26,9 +23,6 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -60,18 +54,10 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
.c0 {
width: 100%;
height: auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #86E4E9;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
padding: 0rem 0 2rem;
}
@@ -80,19 +66,17 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
width: 100%;
max-width: none;
position: relative;
- 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: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
+.c1:hover button[data-play-pause],
+.c1:focus-within button[data-play-pause] {
+ opacity: 0.8;
+ transition-delay: 0s;
+}
+
.c2 {
width: 100%;
height: 100%;
@@ -103,9 +87,6 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
height: 100%;
left: 0;
right: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
width: calc(100% - (2 * 1rem));
margin: -2rem 1rem 0;
@@ -123,56 +104,47 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
.c6 {
width: 100%;
height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border-radius: 1rem;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 2.5rem;
line-height: 2.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 3rem;
line-height: 3rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c9 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c9 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
padding: 0rem 2rem 2rem;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c1 {
width: 100%;
max-width: 1500px;
@@ -183,16 +155,9 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
min-height: 600px;
max-height: 750px;
}
-
- .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: 1024px) {
.c2 {
position: absolute;
top: 0;
@@ -202,29 +167,23 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
.c2 img {
object-position: top center;
height: 100%;
- -webkit-transform: scale(1.02);
- -ms-transform: scale(1.02);
transform: scale(1.02);
- -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);
}
- .c2:has(+ div a:hover) > div > img {
- -webkit-transform: scale(1.04);
- -ms-transform: scale(1.04);
+ .c2:has(+ div a:hover) >div>img {
transform: scale(1.04);
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
margin: -2rem 2rem 0rem;
width: calc(100% - (2 * 2rem));
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c5 {
position: relative;
top: auto;
@@ -232,18 +191,9 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
height: 100%;
width: 100%;
max-width: 1200px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
margin: 0 auto;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
justify-content: flex-start;
height: 75vh;
min-height: 600px;
@@ -251,26 +201,23 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
padding: 2rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
width: 92%;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
height: auto;
width: 50%;
margin: 2rem 0;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
}
}
@@ -286,18 +233,16 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
>
<div
className="c3 lazyload"
- height="100%"
- width="100%"
>
<img
alt="Image alt text"
className="c4 lazyload"
- data-lowsrc="../PromoLW.jpg"
+ data-lowsrc="mock.asset"
data-sizes="auto"
- data-src="../PromoLW.jpg"
- data-srcset="../PromoLW.jpg"
+ data-src="mock.asset"
+ data-srcset="mock.asset"
height="100%"
- src="../PromoLW.jpg"
+ src="mock.asset"
srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
width="100%"
/>
@@ -334,9 +279,6 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 2rem;
line-height: 2rem;
@@ -355,9 +297,6 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -389,18 +328,10 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
.c0 {
width: 100%;
height: auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #86E4E9;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
padding: 0rem 0 2rem;
}
@@ -409,19 +340,17 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
width: 100%;
max-width: none;
position: relative;
- 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: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
+.c1:hover button[data-play-pause],
+.c1:focus-within button[data-play-pause] {
+ opacity: 0.8;
+ transition-delay: 0s;
+}
+
.c2 {
width: 100%;
height: 100%;
@@ -432,9 +361,6 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
height: 100%;
left: 0;
right: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
width: calc(100% - (2 * 1rem));
margin: -2rem 1rem 0;
@@ -452,56 +378,47 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
.c6 {
width: 100%;
height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border-radius: 1rem;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 2.5rem;
line-height: 2.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 3rem;
line-height: 3rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c9 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c9 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
padding: 0rem 2rem 2rem;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c1 {
width: 100%;
max-width: 1500px;
@@ -511,16 +428,9 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
height: auto;
min-height: 450px;
}
-
- .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: 1024px) {
.c2 {
position: absolute;
top: 0;
@@ -530,30 +440,24 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
.c2 img {
object-position: top center;
height: 100%;
- -webkit-transform: scale(1.02);
- -ms-transform: scale(1.02);
transform: scale(1.02);
- -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);
min-height: 450px;
}
- .c2:has(+ div a:hover) > div > img {
- -webkit-transform: scale(1.04);
- -ms-transform: scale(1.04);
+ .c2:has(+ div a:hover) >div>img {
transform: scale(1.04);
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
margin: -2rem 2rem 0rem;
width: calc(100% - (2 * 2rem));
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c5 {
position: relative;
top: auto;
@@ -561,44 +465,32 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
height: 100%;
width: 100%;
max-width: 1200px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
margin: 0 auto;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
height: auto;
min-height: 450px;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
padding: 2rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
width: 92%;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
height: auto;
width: 50%;
margin: 2rem 0;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
justify-content: flex-start;
}
}
@@ -614,18 +506,16 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
>
<div
className="c3 lazyload"
- height="100%"
- width="100%"
>
<img
alt="Image alt text"
className="c4 lazyload"
- data-lowsrc="../PromoLW.jpg"
+ data-lowsrc="mock.asset"
data-sizes="auto"
- data-src="../PromoLW.jpg"
- data-srcset="../PromoLW.jpg"
+ data-src="mock.asset"
+ data-srcset="mock.asset"
height="100%"
- src="../PromoLW.jpg"
+ src="mock.asset"
srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
width="100%"
/>
@@ -662,9 +552,6 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 2rem;
line-height: 2rem;
@@ -683,9 +570,6 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -703,18 +587,10 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
.c0 {
width: 100%;
height: auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #86E4E9;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
padding: 0rem 0 2rem;
padding: 0rem 1rem 2rem;
@@ -724,27 +600,22 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
width: 100%;
max-width: none;
position: relative;
- 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: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
+.c1:hover button[data-play-pause],
+.c1:focus-within button[data-play-pause] {
+ opacity: 0.8;
+ transition-delay: 0s;
+}
+
.c2 {
position: relative;
height: 100%;
left: 0;
right: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
width: calc(100% - (2 * 1rem));
margin: 0;
@@ -764,63 +635,54 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
.c3 {
width: 100%;
height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border-radius: 1rem;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
font-size: 2.5rem;
line-height: 2.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c5 {
font-size: 3rem;
line-height: 3rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
padding-left: 2rem;
padding-right: 2rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
padding: 0rem 2rem 2rem;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c1 {
width: 100%;
max-width: 1500px;
@@ -828,65 +690,46 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
overflow: hidden;
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;
- }
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
margin: 0;
width: 100%;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c2 {
position: relative;
top: auto;
left: auto;
height: 100%;
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
margin: 0 auto;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
padding: 4rem 11%;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
width: 100%;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c3 {
height: auto;
width: 100%;
margin: 0;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
justify-content: flex-start;
}
}
@@ -928,9 +771,6 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 2rem;
line-height: 2rem;
@@ -945,9 +785,6 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -989,18 +826,10 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
.c0 {
width: 100%;
height: auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
background: #86E4E9;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
padding: 2rem 0 2rem;
}
@@ -1009,19 +838,17 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
width: 100%;
max-width: none;
position: relative;
- 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: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
+.c1:hover button[data-play-pause],
+.c1:focus-within button[data-play-pause] {
+ opacity: 0.8;
+ transition-delay: 0s;
+}
+
.c2 {
width: 100%;
height: 100%;
@@ -1032,9 +859,6 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
height: 100%;
left: 0;
right: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
width: calc(100% - (2 * 1rem));
margin: -2rem 1rem 0;
@@ -1052,13 +876,7 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
.c6 {
width: 100%;
height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border-radius: 1rem;
}
@@ -1083,45 +901,42 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
object-position: top right;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 2.5rem;
line-height: 2.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 3rem;
line-height: 3rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c9 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c9 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
padding: 2rem 2rem 2rem;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c1 {
width: 100%;
max-width: 1500px;
@@ -1132,16 +947,9 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
min-height: 600px;
max-height: 750px;
}
-
- .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: 1024px) {
.c2 {
position: absolute;
top: 0;
@@ -1151,29 +959,23 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
.c2 img {
object-position: top center;
height: 100%;
- -webkit-transform: scale(1.02);
- -ms-transform: scale(1.02);
transform: scale(1.02);
- -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);
}
- .c2:has(+ div a:hover) > div > img {
- -webkit-transform: scale(1.04);
- -ms-transform: scale(1.04);
+ .c2:has(+ div a:hover) >div>img {
transform: scale(1.04);
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
margin: -2rem 2rem 0rem;
width: calc(100% - (2 * 2rem));
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c5 {
position: relative;
top: auto;
@@ -1181,18 +983,9 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
height: 100%;
width: 100%;
max-width: 1200px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
margin: 0 auto;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
justify-content: flex-start;
height: 75vh;
min-height: 600px;
@@ -1200,31 +993,28 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
padding: 2rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
width: 92%;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
height: auto;
width: 50%;
margin: 2rem 0;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c10 {
margin: 1.5rem;
width: 160px;
@@ -1233,10 +1023,6 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
}
}
-@media (min-width:1024px) {
-
-}
-
<div
className="c0"
>
@@ -1248,18 +1034,16 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
>
<div
className="c3 lazyload"
- height="100%"
- width="100%"
>
<img
alt="Image alt text"
className="c4 lazyload"
- data-lowsrc="../PromoLW.jpg"
+ data-lowsrc="mock.asset"
data-sizes="auto"
- data-src="../PromoLW.jpg"
- data-srcset="../PromoLW.jpg"
+ data-src="mock.asset"
+ data-srcset="mock.asset"
height="100%"
- src="../PromoLW.jpg"
+ src="mock.asset"
srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
width="100%"
/>
@@ -1292,13 +1076,11 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
>
<div
className="c11 c12"
- height="auto"
- width="100%"
>
<img
alt=""
className="c13 lazyload"
- data-src="../HeroBannerLogo-Square.png"
+ data-src="mock.asset"
height="auto"
width="100%"
/>
diff --git a/src/components/Molecules/InfoBanner/InfoBanner.md b/src/components/Molecules/InfoBanner/InfoBanner.md
deleted file mode 100644
index bd19fcabf..000000000
--- a/src/components/Molecules/InfoBanner/InfoBanner.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Info Banner Example:
-
-```js
-const title = 'Hello There';
-const amount = '£ 2,000,000';
-const theme = 'Be happy';
-const themeLink = 'cr.com';
-const startDate = '1st June 2010';
-const endDate = '1st June 2020';
-const country = 'Uk';
-
-<InfoBanner
- title={title}
- amount={amount}
- theme={theme}
- themeLink={themeLink}
- startDate={startDate}
- endDate={endDate}
- country={country}
-/>;
-```
diff --git a/src/components/Molecules/InfoBanner/InfoBannerExample.jsx b/src/components/Molecules/InfoBanner/InfoBannerExample.jsx
new file mode 100644
index 000000000..b2ad01b4a
--- /dev/null
+++ b/src/components/Molecules/InfoBanner/InfoBannerExample.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import InfoBanner from './InfoBanner';
+
+export default function InfoBannerExample() {
+ return (
+ <InfoBanner
+ title="Hello There"
+ amount="£ 2,000,000"
+ theme="Be happy"
+ themeLink="cr.com"
+ startDate="1st June 2010"
+ endDate="1st June 2020"
+ country="Uk"
+ />
+ );
+}
diff --git a/src/components/Molecules/InfoBanner/__snapshots__/InfoBanner.test.js.snap b/src/components/Molecules/InfoBanner/__snapshots__/InfoBanner.test.js.snap
index 83056c187..52ff7c0af 100644
--- a/src/components/Molecules/InfoBanner/__snapshots__/InfoBanner.test.js.snap
+++ b/src/components/Molecules/InfoBanner/__snapshots__/InfoBanner.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.5rem;
@@ -27,9 +24,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -50,82 +44,65 @@ exports[`renders correctly 1`] = `
display: inline;
color: #000000;
font-weight: normal;
+ color: #E52630;
}
.c4:hover,
.c4:focus {
color: #000000;
- -webkit-text-decoration: none;
text-decoration: none;
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
flex-wrap: wrap;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
position: relative;
}
.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
align-items: start;
width: 100%;
margin-bottom: 2rem;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c2 {
font-size: 1.375rem;
line-height: 1.625rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c3 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c3 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
width: calc(100% / 3);
}
diff --git a/src/components/Molecules/LogoLinked/LogoLinked.js b/src/components/Molecules/LogoLinked/LogoLinked.js
index 6c259dc7f..cc3e405ae 100644
--- a/src/components/Molecules/LogoLinked/LogoLinked.js
+++ b/src/components/Molecules/LogoLinked/LogoLinked.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
-import Logo from '../../Atoms/Logo/Logo';
+import Logo from '../../Atoms/Logos/Logo';
import { logoRotateAnimation } from '../../../theme/shared/animations';
const TitleLabel = styled.span`
diff --git a/src/components/Molecules/LogoLinked/LogoLinked.md b/src/components/Molecules/LogoLinked/LogoLinked.md
deleted file mode 100644
index 67cae135f..000000000
--- a/src/components/Molecules/LogoLinked/LogoLinked.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Comic Relief Logo without animation
-
-```js
-<LogoLinked sizeSm="50px" sizeMd="60px" />
-```
-
-# Comic Relief Logo with hover animation and custom hovertext
-
-```js
-<LogoLinked
- animateRotate
- sizeSm="50px"
- sizeMd="60px"
- title="I'm a custom title"
-/>
-```
diff --git a/src/components/Molecules/Lookup/LookupExample.jsx b/src/components/Molecules/Lookup/LookupExample.jsx
new file mode 100644
index 000000000..7138306e4
--- /dev/null
+++ b/src/components/Molecules/Lookup/LookupExample.jsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import Lookup from './Lookup';
+
+const MOCK_CITIES = [
+ { id: 1, name: 'London', country: 'UK' },
+ { id: 2, name: 'Manchester', country: 'UK' },
+ { id: 3, name: 'Birmingham', country: 'UK' },
+ { id: 4, name: 'Edinburgh', country: 'UK' },
+ { id: 5, name: 'Bristol', country: 'UK' },
+ { id: 6, name: 'Liverpool', country: 'UK' },
+ { id: 7, name: 'Leeds', country: 'UK' },
+ { id: 8, name: 'Cardiff', country: 'UK' },
+];
+
+const mockLookup = async (query) => {
+ await new Promise(resolve => setTimeout(resolve, 600));
+ if (!query || query.trim().length < 2) {
+ throw new Error('Please enter at least 2 characters to search.');
+ }
+ return MOCK_CITIES.filter(city =>
+ city.name.toLowerCase().includes(query.toLowerCase())
+ );
+};
+
+const mockLookupError = async () => {
+ await new Promise(resolve => setTimeout(resolve, 600));
+ throw new Error('Sorry, the lookup service is currently unavailable. Please try again later.');
+};
+
+export default function LookupExample() {
+ const [selected, setSelected] = useState(null);
+
+ return (
+ <>
+ <h3>Default</h3>
+ <p style={{ marginBottom: '1rem' }}>
+ Type a city name (min 2 chars) and click Search or press Enter. Try “lon”, “man”, or “xyz” to see no results.
+ </p>
+ <Lookup
+ name="city-lookup"
+ label="Search for a city"
+ placeholder="e.g. London"
+ buttonText="Search"
+ lookupHandler={mockLookup}
+ mapOptionToString={city => `${city.name}, ${city.country}`}
+ onSelect={city => setSelected(city)}
+ dropdownInstruction="Select a city from the list below"
+ />
+ {selected && (
+ <p style={{ marginTop: '1rem' }}>
+ Selected: <strong>{selected.name}, {selected.country}</strong>
+ </p>
+ )}
+
+ <h3 style={{ marginTop: '2rem' }}>Service error state</h3>
+ <p style={{ marginBottom: '1rem' }}>
+ This example's lookup handler always throws — showing how errors surface to the user.
+ </p>
+ <Lookup
+ name="city-lookup-error"
+ label="Search for a city"
+ placeholder="e.g. London"
+ buttonText="Search"
+ lookupHandler={mockLookupError}
+ mapOptionToString={city => city.name}
+ onSelect={() => {}}
+ />
+
+ <h3 style={{ marginTop: '2rem' }}>Custom no-results message</h3>
+ <p style={{ marginBottom: '1rem' }}>
+ Try searching for “xyz” to see the custom no-results message.
+ </p>
+ <Lookup
+ name="city-lookup-noresults"
+ label="Search for a city"
+ placeholder="e.g. London"
+ buttonText="Search"
+ lookupHandler={mockLookup}
+ mapOptionToString={city => city.name}
+ onSelect={() => {}}
+ noResultsMessage="No cities matched your search — please try a different term."
+ />
+ </>
+ );
+}
diff --git a/src/components/Molecules/PartnerLink/PartnerLink.md b/src/components/Molecules/PartnerLink/PartnerLink.md
deleted file mode 100644
index 62c83b623..000000000
--- a/src/components/Molecules/PartnerLink/PartnerLink.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Partner Link
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Picture from '../../Atoms/Picture/Picture';
-<PartnerLink link="https://www.comicrelief.com">
- <Picture alt="test Image" imageLow={defaultData.imageLow} images={defaultData.images} />
-</PartnerLink>;
-```
diff --git a/src/components/Molecules/PartnerLink/PartnerLink.style.js b/src/components/Molecules/PartnerLink/PartnerLink.style.js
index d0afa72cf..19d1776b0 100644
--- a/src/components/Molecules/PartnerLink/PartnerLink.style.js
+++ b/src/components/Molecules/PartnerLink/PartnerLink.style.js
@@ -18,8 +18,8 @@ const Item = styled(Link)`
position: relative;
padding: 0;
border: none;
- :hover,
- :focus {
+ &:hover,
+ &:focus {
border: none;
${MoreInfo} {
overflow: inherit;
diff --git a/src/components/Molecules/PartnerLink/PartnerLink.test.js b/src/components/Molecules/PartnerLink/PartnerLink.test.js
index 6fd6a05d9..e226cea73 100644
--- a/src/components/Molecules/PartnerLink/PartnerLink.test.js
+++ b/src/components/Molecules/PartnerLink/PartnerLink.test.js
@@ -4,7 +4,7 @@ import 'jest-styled-components';
import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
import PartnerLink from './PartnerLink';
import Picture from '../../Atoms/Picture/Picture';
-import { defaultData } from '../../../styleguide/data/data';
+import { defaultData } from '../../../data/data';
it('renders correctly', () => {
const tree = renderWithTheme(
<PartnerLink link="https://www.comicrelief.com">
@@ -17,166 +17,155 @@ it('renders correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c4 {
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 400;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c4 {
- font-size: 0.6875rem;
- line-height: normal;
- color: #FFFFFF;
- }
-
- .c4 span {
- font-size: inherit;
- line-height: inherit;
- }
-
- .c2 {
- display: block;
- width: 100%;
- height: auto;
- position: relative;
- }
-
- .c3 {
- width: 100%;
- height: auto;
- display: block;
- object-fit: none;
- }
-
- .c0 {
- position: relative;
- display: inline;
- color: #000000;
- font-weight: normal;
- }
-
- .c0:hover,
- .c0:focus {
- color: #000000;
- -webkit-text-decoration: none;
- text-decoration: none;
- }
-
- .c6 {
- border: 0;
- -webkit-clip: rect(0 0 0 0);
- clip: rect(0 0 0 0);
- -webkit-clip-path: inset(50%);
- clip-path: inset(50%);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
- height: auto;
- }
-
- .c1 {
- display: block;
- position: relative;
- padding: 0;
- border: none;
- }
-
- .c1:hover,
- .c1:focus {
- border: none;
- }
-
- .c1:hover .c5,
- .c1:focus .c5 {
- overflow: inherit;
- -webkit-clip-path: none;
- clip-path: none;
- margin: 0;
- text-align: center;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- -webkit-clip: auto;
- clip: auto;
- top: 50%;
- left: 0;
- width: 100%;
- z-index: 2;
- }
-
- .c1:hover::after,
- .c1:focus::after {
- content: '';
- position: absolute;
- display: block;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: #E52630;
- }
-
- @media (min-width:740px) {
- .c4 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .c4 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
- }
-
- @media (min-width:740px) {
- .c6 {
- font-size: 1rem;
- }
- }
-
- <a
- className="c0 c1"
- href="https://www.comicrelief.com"
- target="_self"
- type="standard"
- >
- <div
- className="c2 lazyload"
- height="auto"
- width="100%"
- >
- <img
- alt="test Image"
- className="c3 lazyload"
- data-lowsrc="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100"
- data-sizes="auto"
- data-src={null}
- data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
- height="auto"
- src={null}
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
- width="100%"
- />
- </div>
- <span
- className="c4 c5 c6"
- >
- Find out more
- </span>
- </a>
- `);
+.c4 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c4 {
+ font-size: 0.6875rem;
+ line-height: normal;
+ color: #FFFFFF;
+}
+
+.c4 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c0 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c0:hover,
+.c0:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
+.c2 {
+ display: block;
+ width: 100%;
+ height: auto;
+ position: relative;
+}
+
+.c3 {
+ width: 100%;
+ height: auto;
+ display: block;
+ object-fit: none;
+}
+
+.c6 {
+ border: 0;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ height: auto;
+}
+
+.c1 {
+ display: block;
+ position: relative;
+ padding: 0;
+ border: none;
+}
+
+.c1:hover,
+.c1:focus {
+ border: none;
+}
+
+.c1:hover .c5,
+.c1:focus .c5 {
+ overflow: inherit;
+ clip-path: none;
+ margin: 0;
+ text-align: center;
+ transform: translateY(-50%);
+ clip: auto;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ z-index: 2;
+}
+
+.c1:hover ::after,
+.c1:focus ::after {
+ content: '';
+ position: absolute;
+ display: block;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #E52630;
+}
+
+@media (min-width: 740px) {
+ .c4 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c4 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c6 {
+ font-size: 1rem;
+ }
+}
+
+<a
+ className="c0 c1"
+ href="https://www.comicrelief.com"
+ target="_self"
+ type="standard"
+>
+ <div
+ className="c2 lazyload"
+ >
+ <img
+ alt="test Image"
+ className="c3 lazyload"
+ data-lowsrc="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100"
+ data-sizes="auto"
+ data-src={null}
+ data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+ height="auto"
+ src={null}
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+ width="100%"
+ />
+ </div>
+ <span
+ className="c4 c5 c6"
+ >
+ Find out more
+ </span>
+</a>
+`);
});
diff --git a/src/components/Molecules/PartnerLink/PartnerLinkExample.jsx b/src/components/Molecules/PartnerLink/PartnerLinkExample.jsx
new file mode 100644
index 000000000..2cace35e2
--- /dev/null
+++ b/src/components/Molecules/PartnerLink/PartnerLinkExample.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import PartnerLink from './PartnerLink';
+import Picture from '../../Atoms/Picture/Picture';
+import { defaultData } from '../../../data/data';
+
+export default function PartnerLinkExample() {
+ return (
+ <PartnerLink link="https://www.comicrelief.com">
+ <Picture alt="test Image" imageLow={defaultData.imageLow} images={defaultData.images} />
+ </PartnerLink>
+ );
+}
diff --git a/src/components/Molecules/PictureOrVideo/PictureOrVideo.md b/src/components/Molecules/PictureOrVideo/PictureOrVideo.md
deleted file mode 100644
index e7f008db1..000000000
--- a/src/components/Molecules/PictureOrVideo/PictureOrVideo.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# PictureOrVideo
-
-Renders either Picture or AmbientVideo based on whether all required video props are present.
-When `images`, `imageLow`, `videoDesktop` and `videoMobile` are all provided, AmbientVideo is used; otherwise Picture.
-
-Used internally by HeroBanner, DonateBanner and EmailBanner.
-
-## With image (Picture)
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-
-<PictureOrVideo
- images={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- image={defaultData.heroBannerImage}
- alt="Image alt text"
- objectFit="cover"
- width="100%"
- height="100%"
-/>
-```
-
-## With video (AmbientVideo)
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-
-<PictureOrVideo
- images={defaultData.heroBannerImage}
- imageLow={defaultData.heroBannerImage}
- videoDesktop={require('../../Atoms/AmbientVideo/big-buck-bunny-1080p-30sec.mp4')}
- videoMobile={require('../../Atoms/AmbientVideo/thetestdatacom_480p_example.mp4')}
- videoLoop
- objectFit="cover"
- width="100%"
- height="100%"
-/>
-```
-
-## With image object
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-
-const imageObj = {
- images: defaultData.heroBannerImage,
- imageLow: defaultData.heroBannerImage,
- image: defaultData.heroBannerImage,
- alt: 'Image alt'
-};
-
-<PictureOrVideo
- image={imageObj}
- objectFit="cover"
- width="100%"
- height="100%"
-/>
-```
diff --git a/src/components/Molecules/PictureOrVideo/PictureOrVideo.test.js b/src/components/Molecules/PictureOrVideo/PictureOrVideo.test.js
index 9a5b17156..0c9ba942d 100644
--- a/src/components/Molecules/PictureOrVideo/PictureOrVideo.test.js
+++ b/src/components/Molecules/PictureOrVideo/PictureOrVideo.test.js
@@ -3,7 +3,7 @@ import 'jest-styled-components';
import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
import PictureOrVideo from './PictureOrVideo';
-const defaultData = require('../../../styleguide/data/data').defaultData;
+const defaultData = require('../../../data/data').defaultData;
it('renders Picture with flat props correctly', () => {
const tree = renderWithTheme(
diff --git a/src/components/Molecules/PictureOrVideo/PictureOrVideoExample.jsx b/src/components/Molecules/PictureOrVideo/PictureOrVideoExample.jsx
new file mode 100644
index 000000000..e1740537b
--- /dev/null
+++ b/src/components/Molecules/PictureOrVideo/PictureOrVideoExample.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+import PictureOrVideo from './PictureOrVideo';
+import { defaultData } from '../../../data/data';
+import video1080 from '../../Atoms/AmbientVideo/big-buck-bunny-1080p-30sec.mp4';
+import videoMobile from '../../Atoms/AmbientVideo/thetestdatacom_480p_example.mp4';
+
+const imageObj = {
+ images: defaultData.heroBannerImage,
+ imageLow: defaultData.heroBannerImage,
+ image: defaultData.heroBannerImage,
+ alt: 'Image alt'
+};
+
+const Wrapper = styled.div`
+ position: relative;
+ width: 100%;
+ height: 400px;
+ marginBottom: 2rem;
+`;
+
+export default function PictureOrVideoExample() {
+ return (
+ <>
+ <h3>With image (Picture)</h3>
+ <Wrapper>
+ <PictureOrVideo
+ images={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ image={defaultData.heroBannerImage}
+ alt="Image alt text"
+ objectFit="cover"
+ width="100%"
+ height="100%"
+ />
+ </Wrapper>
+
+ <h3>With video (AmbientVideo)</h3>
+ <Wrapper>
+ <PictureOrVideo
+ images={defaultData.heroBannerImage}
+ imageLow={defaultData.heroBannerImage}
+ videoDesktop={video1080}
+ videoMobile={videoMobile}
+ videoLoop
+ objectFit="cover"
+ width="100%"
+ height="100%"
+ />
+ </Wrapper>
+
+ <h3>With image object</h3>
+ <Wrapper>
+ <PictureOrVideo
+ image={imageObj}
+ objectFit="cover"
+ width="100%"
+ height="100%"
+ />
+ </Wrapper>
+ </>
+ );
+}
diff --git a/src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap b/src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap
index 17104dfde..31e66e4e6 100644
--- a/src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap
+++ b/src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap
@@ -50,36 +50,22 @@ exports[`renders AmbientVideo when video props are provided correctly 1`] = `
background: #FFFFFF;
color: #222222;
cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
opacity: 0;
- -webkit-animation: diKSqD 3s ease;
- animation: diKSqD 3s ease;
- -webkit-transition: opacity 0.2s ease 3s;
+ animation: k0 3s ease;
transition: opacity 0.2s ease 3s;
z-index: 3;
}
.c6[data-play-pause='play'] .c7 {
- -webkit-transform: translateX(2px);
- -ms-transform: translateX(2px);
transform: translateX(2px);
}
.c1:hover .c5,
.c1 .c5:focus-visible {
opacity: 0.8;
- -webkit-transition-delay: 0s;
transition-delay: 0s;
}
@@ -95,7 +81,7 @@ exports[`renders AmbientVideo when video props are provided correctly 1`] = `
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
bottom: 15px;
top: auto;
@@ -108,6 +94,16 @@ exports[`renders AmbientVideo when video props are provided correctly 1`] = `
}
}
+@keyframes k0 {
+ 0%, 93.75% {
+ opacity: 0.8;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
<div
className="c0 c1"
>
@@ -175,8 +171,6 @@ exports[`renders Picture with flat props correctly 1`] = `
<div
className="c0 lazyload"
- height="100%"
- width="100%"
>
<img
alt="Image alt text"
@@ -210,8 +204,6 @@ exports[`renders Picture with image object correctly 1`] = `
<div
className="c0 lazyload"
- height="100%"
- width="100%"
>
<img
alt="Background image"
@@ -257,8 +249,6 @@ exports[`renders with asBackground correctly 1`] = `
>
<div
className="c1 lazyload"
- height="100%"
- width="100%"
>
<img
alt="Background image"
diff --git a/src/components/Molecules/Promo/Promo.js b/src/components/Molecules/Promo/Promo.js
index 7fc9bc063..bd578745d 100644
--- a/src/components/Molecules/Promo/Promo.js
+++ b/src/components/Molecules/Promo/Promo.js
@@ -62,8 +62,8 @@ const Promo = ({
}, [hasVideo, videoSrc, mobileVideoSrc, mobilePoster, poster]);
return (
- <Container backgroundColor={backgroundColor} position={position}>
- <Media imageRight={copyLeft}>
+ <Container $backgroundColor={backgroundColor} $position={position}>
+ <Media>
{(hasImage && !hasVideo) && (
<Picture
alt={imageAltText}
@@ -93,9 +93,17 @@ const Promo = ({
)}
</Media>
- <Wrapper copyLeft={copyLeft}>
- <Gradient hasVideo={hasVideo} behindTextGradient={behindTextGradient} copyLeft={copyLeft}>
- <Copy position={position} hasVideo={hasVideo} behindTextGradient={behindTextGradient}>
+ <Wrapper $copyLeft={copyLeft}>
+ <Gradient
+ $hasVideo={hasVideo}
+ $behindTextGradient={behindTextGradient}
+ $copyLeft={copyLeft}
+ >
+ <Copy
+ $position={position}
+ $hasVideo={hasVideo}
+ $behindTextGradient={behindTextGradient}
+ >
{children}
</Copy>
</Gradient>
diff --git a/src/components/Molecules/Promo/Promo.md b/src/components/Molecules/Promo/Promo.md
deleted file mode 100644
index 3aab62494..000000000
--- a/src/components/Molecules/Promo/Promo.md
+++ /dev/null
@@ -1,396 +0,0 @@
-Promo
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-
-<div>
-<Text tag="h2" size="xl" color="black">
- Promo Upper
-</Text>
-<Promo
- backgroundColor="blue_dark"
- imageSet={defaultData.promoImage}
- image={defaultData.promoImage}
- imageLow={defaultData.promoImage}
- imageAltText=""
- copyLeft={true}
- position="upper"
->
- <Text
- tag="h1"
- color="white"
- size="super"
- family="Anton"
- uppercase
- weight="normal"
- >
- Curabitur pretium tincidunt lacus
- </Text>
- <Text tag="p" color="white">
- Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
- turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
- </Text>
- <span>
- <Link href="/" type="button" color="white">
- <Text>
- Show me this
- </Text>
- </Link>
- </span>
-</Promo>
-<br />
-<Text tag="h2" size="xl" color="black">
- Promo End
-</Text>
-<Promo
- backgroundColor="blue_dark"
- imageSet={defaultData.promoImage}
- image={defaultData.promoImage}
- imageLow={defaultData.promoImage}
- imageAltText=""
- copyLeft={true}
- position="end"
->
- <Text
- tag="h1"
- color="white"
- size="super"
- family="Anton"
- uppercase
- weight="normal"
- >
- Curabitur pretium tincidunt lacus
- </Text>
- <Text tag="p" color="white">
- Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
- turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
- </Text>
- <span>
- <Link href="/" type="button" color="white">
- <Text>
- Show me this
- </Text>
- </Link>
- </span>
-</Promo>
-<br />
-<Text tag="h2" size="xl" color="black">
- Promo Lower
-</Text>
-<Promo
- backgroundColor="blue_dark"
- imageSet={defaultData.promoImage}
- image={defaultData.promoImage}
- imageLow={defaultData.promoImage}
- imageAltText=""
- copyLeft={true}
- position="lower"
->
- <Text
- tag="h1"
- color="white"
- size="super"
- family="Anton"
- uppercase
- weight="normal"
- >
- Curabitur pretium tincidunt lacus
- </Text>
- <Text tag="p" color="white">
- Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
- turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
- </Text>
- <span>
- <Link href="/" type="button" color="white">
- <Text>
- Show me this
- </Text>
- </Link>
- </span>
-</Promo>
-<br />
-<Text tag="h2" size="xl" color="black">
- Promo None
-</Text>
-<Promo
- backgroundColor="blue_dark"
- imageSet={defaultData.promoImage}
- image={defaultData.promoImage}
- imageLow={defaultData.promoImage}
- imageAltText=""
- copyLeft={true}
->
- <Text
- tag="h1"
- color="white"
- size="super"
- family="Anton"
- uppercase
- weight="normal"
- >
- Curabitur pretium tincidunt lacus
- </Text>
- <Text tag="p" color="white">
- Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
- turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
- </Text>
- <span>
- <Link href="/" type="button" color="white">
- <Text>
- Show me this
- </Text>
- </Link>
- </span>
-</Promo>
-</div>
-```
-
-Promo w/Video
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
-import mobilePoster from '../../../styleguide/assets/mobileVideoPosterImage.png';
-const videoSrc =
- 'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
-
-let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
-
-<div>
-<Text tag="h2" size="xl" color="black">
- Promo Upper w/Video (autoplay and loop, black text gradient overlay)
-</Text>
-<Promo
- backgroundColor="blue_dark"
- imageSet={defaultData.promoImage}
- image={defaultData.promoImage}
- imageLow={defaultData.promoImage}
- imageAltText=""
- copyLeft={true}
- position="upper"
- videoSrc={videoSrc}
- poster={poster}
- loop={true}
- autoplay={true}
- behindTextGradient='black'
->
- <Text
- tag="h1"
- color="white"
- size="super"
- family="Anton"
- uppercase
- weight="normal"
- >
- Curabitur pretium tincidunt lacus
- </Text>
- <Text tag="p" color="white">
- Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
- turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
- </Text>
- <span>
- <Link href="/" type="button" color="white">
- <Text>
- Show me this
- </Text>
- </Link>
- </span>
-</Promo>
-
-<br />
-
-<Text tag="h2" size="xl" color="black">
- Promo End w/Video (loop only, no text gradient overlay)
-</Text>
-<Promo
- backgroundColor="blue_dark"
- imageSet={defaultData.promoImage}
- image={defaultData.promoImage}
- imageLow={defaultData.promoImage}
- imageAltText=""
- copyLeft={true}
- position="end"
- videoSrc={videoSrc}
- poster={poster}
- loop={true}
- autoPlay={false}
->
- <Text
- tag="h1"
- color="white"
- size="super"
- family="Anton"
- uppercase
- weight="normal"
- >
- Curabitur pretium tincidunt lacus
- </Text>
- <Text tag="p" color="white">
- Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
- turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
- </Text>
- <span>
- <Link href="/" type="button" color="white">
- <Text>
- Show me this
- </Text>
- </Link>
- </span>
-</Promo>
-
-<br />
-
-<Text tag="h2" size="xl" color="black">
- Promo Lower w/Video (autoplay only, white text gradient overlay)
-</Text>
-<Promo
- backgroundColor="blue_light"
- imageSet={defaultData.promoImage}
- image={defaultData.promoImage}
- imageLow={defaultData.promoImage}
- imageAltText=""
- copyLeft={true}
- position="lower"
- videoSrc={videoSrc}
- poster={poster}
- loop={false}
- autoPlay={true}
- behindTextGradient='white'
->
- <Text
- tag="h1"
- color="black"
- size="super"
- family="Anton"
- uppercase
- weight="normal"
- >
- Curabitur pretium tincidunt lacus
- </Text>
- <Text tag="p" color="black">
- Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
- turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
- </Text>
- <span>
- <Link href="/" type="button" color="black">
- <Text>
- Show me this
- </Text>
- </Link>
- </span>
-</Promo>
-
-<br />
-<Text tag="h2" size="xl" color="black">
- Promo None w/Video (no loop or autoplay, no text gradient overlay, copy right aligned)
-</Text>
-<Promo
- backgroundColor="blue_dark"
- imageSet={defaultData.promoImage}
- image={defaultData.promoImage}
- imageLow={defaultData.promoImage}
- imageAltText=""
- copyLeft={false}
- videoSrc={videoSrc}
- poster={poster}
- loop={false}
- autoPlay={false}
->
- <Text
- tag="h1"
- color="white"
- size="super"
- family="Anton"
- uppercase
- weight="normal"
- >
- Curabitur pretium tincidunt lacus
- </Text>
- <Text tag="p" color="white">
- Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
- turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
- </Text>
- <span>
- <Link href="/" type="button" color="white">
- <Text>
- Show me this
- </Text>
- </Link>
- </span>
-</Promo>
-
-<Text tag="h2" size="xl" color="black">
- Promo None w/Video (no loop or autoplay, white text gradient overlay, different videos and posters for mobile and desktop)
-</Text>
-<Promo
- backgroundColor="blue_light"
- imageSet={defaultData.promoImage}
- image={defaultData.promoImage}
- imageLow={defaultData.promoImage}
- imageAltText=""
- copyLeft={true}
- videoSrc={videoSrc}
- mobileVideoSrc={mobileVideoSrc}
- poster={poster}
- mobilePoster={mobilePoster}
- loop={false}
- autoPlay={false}
- behindTextGradient='white'
->
- <Text
- tag="h1"
- color="black"
- size="super"
- family="Anton"
- uppercase
- weight="normal"
- >
- Curabitur pretium tincidunt lacus
- </Text>
- <Text tag="p" color="black">
- Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
- turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
- </Text>
- <span>
- <Link href="/" type="button" color="black">
- <Text>
- Show me this
- </Text>
- </Link>
- </span>
-</Promo>
-
-<Text tag="h2" size="xl" color="black">
- Promo None w/Video (no loop or autoplay, white text gradient overlay, mobile-only video and poster, black play button)
-</Text>
-<Promo
- backgroundColor="blue_light"
- imageSet={defaultData.promoImage}
- image={defaultData.promoImage}
- imageLow={defaultData.promoImage}
- imageAltText=""
- copyLeft={true}
- mobileVideoSrc={mobileVideoSrc}
- mobilePoster={mobilePoster}
- loop={false}
- autoPlay={false}
- behindTextGradient='white'
- blackPlayButton={true}
->
- <Text
- tag="h1"
- color="black"
- size="super"
- family="Anton"
- uppercase
- weight="normal"
- >
- One-Line Special
- </Text>
-</Promo>
-
-</div>
-```
diff --git a/src/components/Molecules/Promo/Promo.style.js b/src/components/Molecules/Promo/Promo.style.js
index 5995e853d..06ff705c8 100644
--- a/src/components/Molecules/Promo/Promo.style.js
+++ b/src/components/Molecules/Promo/Promo.style.js
@@ -9,23 +9,23 @@ const Container = styled.div`
position: relative;
flex-direction: column;
overflow: hidden;
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+ background: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)};
@media ${({ theme }) => theme.allBreakpoints('L')} {
flex-direction: row;
}
- ${({ position }) => position === 'upper' && css`
+ ${({ $position }) => $position === 'upper' && css`
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
@media ${({ theme }) => theme.allBreakpoints('L')} {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
`}
- ${({ position }) => position === 'lower' && css`
+ ${({ $position }) => $position === 'lower' && css`
clip-path: polygon(0 10%,100% 0,100% 100%,0 100%);
@media ${({ theme }) => theme.allBreakpoints('L')} {
clip-path: polygon(0 15%,100% 0,100% 100%,0 100%);
}
`}
- ${({ position }) => position === 'end' && css`
+ ${({ $position }) => $position === 'end' && css`
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 101%);
border-radius: 0 0 0 2rem;
@media ${({ theme }) => theme.allBreakpoints('L')} {
@@ -46,7 +46,7 @@ const Wrapper = styled.div`
align-items: center;
position: relative;
- ${({ copyLeft }) => !copyLeft && 'justify-content: flex-end'};
+ ${({ $copyLeft }) => !$copyLeft && 'justify-content: flex-end'};
@media ${({ theme }) => theme.allBreakpoints('L')} {
min-height: calc(100vh - 90px);
}
@@ -62,7 +62,7 @@ const Copy = styled.div`
padding: ${spacing('xxl')} ${spacing('m')};
}
- ${({ position }) => position === 'lower' && css`
+ ${({ $position }) => $position === 'lower' && css`
padding: ${spacing('xl')} ${spacing('m')};
@media ${({ theme }) => theme.allBreakpoints('L')} {
padding: 6rem ${spacing('m')};
@@ -103,15 +103,15 @@ const Gradient = styled.div`
top: 0;
left: 0;
- ${({ copyLeft }) => (!copyLeft) && css`
+ ${({ $copyLeft }) => (!$copyLeft) && css`
left: auto;
right: 0;
`};
- ${({ hasVideo, behindTextGradient }) => (hasVideo !== false && behindTextGradient !== 'none') && css`
+ ${({ $hasVideo, $behindTextGradient }) => ($hasVideo !== false && $behindTextGradient !== 'none') && css`
overflow: hidden;
- background-color:${behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)'};
- box-shadow: 0px 0px 50px 60px ${behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)'};
+ background-color:${$behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)'};
+ box-shadow: 0px 0px 50px 60px ${$behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)'};
`};
}
`;
diff --git a/src/components/Molecules/Promo/Promo.test.js b/src/components/Molecules/Promo/Promo.test.js
index b69fba940..3aabd157e 100644
--- a/src/components/Molecules/Promo/Promo.test.js
+++ b/src/components/Molecules/Promo/Promo.test.js
@@ -5,7 +5,7 @@ import Promo from './Promo';
import Text from '../../Atoms/Text/Text';
import Link from '../../Atoms/Link/Link';
-const defaultData = require('../../../styleguide/data/data').defaultData;
+const defaultData = require('../../../data/data').defaultData;
it('renders Promo correctly', () => {
const tree = renderWithTheme(
<Promo
diff --git a/src/components/Molecules/Promo/PromoExample.jsx b/src/components/Molecules/Promo/PromoExample.jsx
new file mode 100644
index 000000000..7edfc2da8
--- /dev/null
+++ b/src/components/Molecules/Promo/PromoExample.jsx
@@ -0,0 +1,390 @@
+import React from 'react';
+import Promo from './Promo';
+import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+import { defaultData } from '../../../data/data';
+import poster from '../../../assets/VideoBannerPosterImage.png';
+import mobilePoster from '../../../assets/mobileVideoPosterImage.png';
+
+const videoSrc =
+ 'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+
+let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
+
+export default function PromoExample() {
+ return (
+ <div>
+ <Text tag="h2" size="xl" color="black">
+ Promo Upper
+ </Text>
+ <Promo
+ backgroundColor="blue_dark"
+ imageSet={defaultData.promoImage}
+ image={defaultData.promoImage}
+ imageLow={defaultData.promoImage}
+ imageAltText=""
+ copyLeft={true}
+ position="upper"
+ >
+ <Text
+ tag="h1"
+ color="white"
+ size="super"
+ family="Anton"
+ uppercase
+ weight="normal"
+ >
+ Curabitur pretium tincidunt lacus
+ </Text>
+ <Text tag="p" color="white">
+ Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+ turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+ </Text>
+ <span>
+ <Link href="/" type="button" color="white">
+ <Text>
+ Show me this
+ </Text>
+ </Link>
+ </span>
+ </Promo>
+ <br />
+ <Text tag="h2" size="xl" color="black">
+ Promo End
+ </Text>
+ <Promo
+ backgroundColor="blue_dark"
+ imageSet={defaultData.promoImage}
+ image={defaultData.promoImage}
+ imageLow={defaultData.promoImage}
+ imageAltText=""
+ copyLeft={true}
+ position="end"
+ >
+ <Text
+ tag="h1"
+ color="white"
+ size="super"
+ family="Anton"
+ uppercase
+ weight="normal"
+ >
+ Curabitur pretium tincidunt lacus
+ </Text>
+ <Text tag="p" color="white">
+ Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+ turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+ </Text>
+ <span>
+ <Link href="/" type="button" color="white">
+ <Text>
+ Show me this
+ </Text>
+ </Link>
+ </span>
+ </Promo>
+ <br />
+ <Text tag="h2" size="xl" color="black">
+ Promo Lower
+ </Text>
+ <Promo
+ backgroundColor="blue_dark"
+ imageSet={defaultData.promoImage}
+ image={defaultData.promoImage}
+ imageLow={defaultData.promoImage}
+ imageAltText=""
+ copyLeft={true}
+ position="lower"
+ >
+ <Text
+ tag="h1"
+ color="white"
+ size="super"
+ family="Anton"
+ uppercase
+ weight="normal"
+ >
+ Curabitur pretium tincidunt lacus
+ </Text>
+ <Text tag="p" color="white">
+ Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+ turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+ </Text>
+ <span>
+ <Link href="/" type="button" color="white">
+ <Text>
+ Show me this
+ </Text>
+ </Link>
+ </span>
+ </Promo>
+ <br />
+ <Text tag="h2" size="xl" color="black">
+ Promo None
+ </Text>
+ <Promo
+ backgroundColor="blue_dark"
+ imageSet={defaultData.promoImage}
+ image={defaultData.promoImage}
+ imageLow={defaultData.promoImage}
+ imageAltText=""
+ copyLeft={true}
+ >
+ <Text
+ tag="h1"
+ color="white"
+ size="super"
+ family="Anton"
+ uppercase
+ weight="normal"
+ >
+ Curabitur pretium tincidunt lacus
+ </Text>
+ <Text tag="p" color="white">
+ Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+ turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+ </Text>
+ <span>
+ <Link href="/" type="button" color="white">
+ <Text>
+ Show me this
+ </Text>
+ </Link>
+ </span>
+ </Promo>
+
+ <Text tag="h2" size="xl" color="black">
+ Promo Upper w/Video (autoplay and loop, black text gradient overlay)
+ </Text>
+ <Promo
+ backgroundColor="blue_dark"
+ imageSet={defaultData.promoImage}
+ image={defaultData.promoImage}
+ imageLow={defaultData.promoImage}
+ imageAltText=""
+ copyLeft={true}
+ position="upper"
+ videoSrc={videoSrc}
+ poster={poster}
+ loop={true}
+ autoplay={true}
+ behindTextGradient='black'
+ >
+ <Text
+ tag="h1"
+ color="white"
+ size="super"
+ family="Anton"
+ uppercase
+ weight="normal"
+ >
+ Curabitur pretium tincidunt lacus
+ </Text>
+ <Text tag="p" color="white">
+ Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+ turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+ </Text>
+ <span>
+ <Link href="/" type="button" color="white">
+ <Text>
+ Show me this
+ </Text>
+ </Link>
+ </span>
+ </Promo>
+
+ <br />
+
+ <Text tag="h2" size="xl" color="black">
+ Promo End w/Video (loop only, no text gradient overlay)
+ </Text>
+ <Promo
+ backgroundColor="blue_dark"
+ imageSet={defaultData.promoImage}
+ image={defaultData.promoImage}
+ imageLow={defaultData.promoImage}
+ imageAltText=""
+ copyLeft={true}
+ position="end"
+ videoSrc={videoSrc}
+ poster={poster}
+ loop={true}
+ autoPlay={false}
+ >
+ <Text
+ tag="h1"
+ color="white"
+ size="super"
+ family="Anton"
+ uppercase
+ weight="normal"
+ >
+ Curabitur pretium tincidunt lacus
+ </Text>
+ <Text tag="p" color="white">
+ Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+ turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+ </Text>
+ <span>
+ <Link href="/" type="button" color="white">
+ <Text>
+ Show me this
+ </Text>
+ </Link>
+ </span>
+ </Promo>
+
+ <br />
+
+ <Text tag="h2" size="xl" color="black">
+ Promo Lower w/Video (autoplay only, white text gradient overlay)
+ </Text>
+ <Promo
+ backgroundColor="blue_light"
+ imageSet={defaultData.promoImage}
+ image={defaultData.promoImage}
+ imageLow={defaultData.promoImage}
+ imageAltText=""
+ copyLeft={true}
+ position="lower"
+ videoSrc={videoSrc}
+ poster={poster}
+ loop={false}
+ autoPlay={true}
+ behindTextGradient='white'
+ >
+ <Text
+ tag="h1"
+ color="black"
+ size="super"
+ family="Anton"
+ uppercase
+ weight="normal"
+ >
+ Curabitur pretium tincidunt lacus
+ </Text>
+ <Text tag="p" color="black">
+ Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+ turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+ </Text>
+ <span>
+ <Link href="/" type="button" color="black">
+ <Text>
+ Show me this
+ </Text>
+ </Link>
+ </span>
+ </Promo>
+
+ <br />
+ <Text tag="h2" size="xl" color="black">
+ Promo None w/Video (no loop or autoplay, no text gradient overlay, copy right aligned)
+ </Text>
+ <Promo
+ backgroundColor="blue_dark"
+ imageSet={defaultData.promoImage}
+ image={defaultData.promoImage}
+ imageLow={defaultData.promoImage}
+ imageAltText=""
+ copyLeft={false}
+ videoSrc={videoSrc}
+ poster={poster}
+ loop={false}
+ autoPlay={false}
+ >
+ <Text
+ tag="h1"
+ color="white"
+ size="super"
+ family="Anton"
+ uppercase
+ weight="normal"
+ >
+ Curabitur pretium tincidunt lacus
+ </Text>
+ <Text tag="p" color="white">
+ Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+ turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+ </Text>
+ <span>
+ <Link href="/" type="button" color="white">
+ <Text>
+ Show me this
+ </Text>
+ </Link>
+ </span>
+ </Promo>
+
+ <Text tag="h2" size="xl" color="black">
+ Promo None w/Video (no loop or autoplay, white text gradient overlay, different videos and posters for mobile and desktop)
+ </Text>
+ <Promo
+ backgroundColor="blue_light"
+ imageSet={defaultData.promoImage}
+ image={defaultData.promoImage}
+ imageLow={defaultData.promoImage}
+ imageAltText=""
+ copyLeft={true}
+ videoSrc={videoSrc}
+ mobileVideoSrc={mobileVideoSrc}
+ poster={poster}
+ mobilePoster={mobilePoster}
+ loop={false}
+ autoPlay={false}
+ behindTextGradient='white'
+ >
+ <Text
+ tag="h1"
+ color="black"
+ size="super"
+ family="Anton"
+ uppercase
+ weight="normal"
+ >
+ Curabitur pretium tincidunt lacus
+ </Text>
+ <Text tag="p" color="black">
+ Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+ turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+ </Text>
+ <span>
+ <Link href="/" type="button" color="black">
+ <Text>
+ Show me this
+ </Text>
+ </Link>
+ </span>
+ </Promo>
+
+ <Text tag="h2" size="xl" color="black">
+ Promo None w/Video (no loop or autoplay, white text gradient overlay, mobile-only video and poster, black play button)
+ </Text>
+ <Promo
+ backgroundColor="blue_light"
+ imageSet={defaultData.promoImage}
+ image={defaultData.promoImage}
+ imageLow={defaultData.promoImage}
+ imageAltText=""
+ copyLeft={true}
+ mobileVideoSrc={mobileVideoSrc}
+ mobilePoster={mobilePoster}
+ loop={false}
+ autoPlay={false}
+ behindTextGradient='white'
+ blackPlayButton={true}
+ >
+ <Text
+ tag="h1"
+ color="black"
+ size="super"
+ family="Anton"
+ uppercase
+ weight="normal"
+ >
+ One-Line Special
+ </Text>
+ </Promo>
+
+ </div>
+ );
+}
diff --git a/src/components/Molecules/Promo/_ProgressRing.js b/src/components/Molecules/Promo/_ProgressRing.js
index 682008419..6178b398a 100644
--- a/src/components/Molecules/Promo/_ProgressRing.js
+++ b/src/components/Molecules/Promo/_ProgressRing.js
@@ -20,11 +20,11 @@ const ProgressRing = ({
}, [videoProgress, thisCircumference]);
return (
- <ProgressRingWrapper videoProgress={videoProgress}>
+ <ProgressRingWrapper>
<ProgressRingSVG height={thisRadius * 2} width={thisRadius * 2}>
<ProgressRingCircle
strokeDasharray={`${thisCircumference} ${thisCircumference}`}
- strokeDashOffsetStyle={thisDashOffset}
+ $strokeDashOffsetStyle={thisDashOffset}
strokeWidth={`${thisStroke}`}
r={`${initNormRadius}`}
cx={`${thisRadius}`}
diff --git a/src/components/Molecules/Promo/_PromoVideoButton.js b/src/components/Molecules/Promo/_PromoVideoButton.js
index b61f1293e..f79d0ab2f 100644
--- a/src/components/Molecules/Promo/_PromoVideoButton.js
+++ b/src/components/Molecules/Promo/_PromoVideoButton.js
@@ -4,23 +4,40 @@ import ProgressRing from './_ProgressRing';
import { PlayButtonWrapper, PlayButton, Icon } from './_PromoVideoButton.style';
const PromoVideoButton = ({
- togglePlay, ...rest
+ togglePlay,
+ copyLeft,
+ videoProgress,
+ isPlaying,
+ blackPlayButton,
+ isRestarting
}) => (
<PlayButtonWrapper className="weewee">
<PlayButton
onClick={() => { togglePlay(); }}
- {...rest}
+ $copyLeft={copyLeft}
+ $blackPlayButton={blackPlayButton}
>
- <Icon {...rest} />
+ <Icon
+ $blackPlayButton={blackPlayButton}
+ $isPlaying={isPlaying}
+ />
<ProgressRing
- {...rest}
+ videoProgress={videoProgress}
+ $isRestarting={isRestarting}
+ $blackPlayButton={blackPlayButton}
+ $copyLeft={copyLeft}
/>
</PlayButton>
</PlayButtonWrapper>
);
PromoVideoButton.propTypes = {
- togglePlay: PropTypes.func.isRequired
+ togglePlay: PropTypes.func.isRequired,
+ copyLeft: PropTypes.bool,
+ videoProgress: PropTypes.number,
+ isPlaying: PropTypes.bool,
+ blackPlayButton: PropTypes.bool,
+ isRestarting: PropTypes.bool
};
export default PromoVideoButton;
diff --git a/src/components/Molecules/Promo/_PromoVideoButton.style.js b/src/components/Molecules/Promo/_PromoVideoButton.style.js
index 4d46bc916..69ae53cb6 100644
--- a/src/components/Molecules/Promo/_PromoVideoButton.style.js
+++ b/src/components/Molecules/Promo/_PromoVideoButton.style.js
@@ -45,11 +45,11 @@ const PlayButton = styled.button`
outline-width: medium;
}
- ${({ blackPlayButton }) => blackPlayButton && css`
+ ${({ $blackPlayButton }) => $blackPlayButton && css`
background: ${({ theme }) => theme.color('black')};
`}
- ${({ copyLeft }) => !copyLeft && css`
+ ${({ $copyLeft }) => !$copyLeft && css`
right: auto;
left: 10px;
`}
@@ -58,7 +58,7 @@ const PlayButton = styled.button`
top: 20px;
right: 20px;
- ${({ copyLeft }) => !copyLeft && css`
+ ${({ $copyLeft }) => !$copyLeft && css`
right: auto;
left: 20px;
`}
@@ -82,17 +82,17 @@ const ProgressRingCircle = styled.circle`
transform: rotate(-90deg);
transform-origin: 50% 50%;
- stroke-dashoffset: ${({ strokeDashOffsetStyle }) => strokeDashOffsetStyle};
+ stroke-dashoffset: ${({ $strokeDashOffsetStyle }) => $strokeDashOffsetStyle};
stroke: white; // need to changed based on Promo settings
fill: transparent;
// White button, black stroke
- ${({ blackPlayButton }) => !blackPlayButton && css`
+ ${({ $blackPlayButton }) => !$blackPlayButton && css`
stroke: ${({ theme }) => theme.color('black')};
`}
// Cancel the animation
- ${({ isRestarting }) => (isRestarting) && css`
+ ${({ $isRestarting }) => ($isRestarting) && css`
transition: none;
`}
`;
@@ -103,20 +103,20 @@ const Icon = styled.span`
background: no-repeat center/50% url(${playWhite}) transparent;
// Black button, white icons
- ${({ blackPlayButton, isPlaying }) => (blackPlayButton && !isPlaying) && css`
+ ${({ $blackPlayButton, $isPlaying }) => ($blackPlayButton && !$isPlaying) && css`
background-image: url(${playWhite});
`}
- ${({ blackPlayButton, isPlaying }) => (blackPlayButton && isPlaying) && css`
+ ${({ $blackPlayButton, $isPlaying }) => ($blackPlayButton && $isPlaying) && css`
background-image: url(${pauseWhite});
`}
// White button, black icons
- ${({ blackPlayButton, isPlaying }) => (!blackPlayButton && !isPlaying) && css`
+ ${({ $blackPlayButton, $isPlaying }) => (!$blackPlayButton && !$isPlaying) && css`
background-image: url(${playBlack});
`}
- ${({ blackPlayButton, isPlaying }) => (!blackPlayButton && isPlaying) && css`
+ ${({ $blackPlayButton, $isPlaying }) => (!$blackPlayButton && $isPlaying) && css`
background-image: url(${pauseBlack});
`}
`;
diff --git a/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap b/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap
index 87a01b61d..18c654ba5 100644
--- a/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap
+++ b/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders Promo correctly 1`] = `
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 2rem;
line-height: 2rem;
@@ -33,9 +30,6 @@ exports[`renders Promo correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -52,39 +46,14 @@ exports[`renders Promo correctly 1`] = `
line-height: inherit;
}
-.c2 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-}
-
-.c3 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
-}
-
.c9 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
- -webkit-text-decoration: none;
text-decoration: none;
- -webkit-transition: all 0.2s;
transition: all 0.2s;
height: 2.5rem;
width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border: none;
cursor: pointer;
@@ -95,9 +64,6 @@ exports[`renders Promo correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -116,15 +82,24 @@ exports[`renders Promo correctly 1`] = `
opacity: 0.5;
}
+.c2 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c3 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
.c0 {
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
background: #274084;
@@ -137,18 +112,9 @@ exports[`renders Promo correctly 1`] = `
left: 0;
right: 0;
margin: 0 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
position: relative;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
}
@@ -170,31 +136,25 @@ exports[`renders Promo correctly 1`] = `
.c5 {
width: 100%;
height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 2.5rem;
line-height: 2.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 3rem;
line-height: 3rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 4rem;
line-height: 4rem;
@@ -202,7 +162,7 @@ exports[`renders Promo correctly 1`] = `
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 5rem;
line-height: 5rem;
@@ -210,75 +170,73 @@ exports[`renders Promo correctly 1`] = `
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c9 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c9 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c9 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c9 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
min-height: calc(100vh - 90px);
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
width: 100%;
padding: 8rem 1.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c1 {
height: 100%;
position: absolute;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c5 {
width: 50%;
position: absolute;
@@ -297,18 +255,16 @@ exports[`renders Promo correctly 1`] = `
>
<div
className="c2 lazyload"
- height="100%"
- width="100%"
>
<img
alt=""
className="c3 lazyload"
data-lowsrc={null}
data-sizes="auto"
- data-src="../promo.jpg"
- data-srcset="../promo.jpg"
+ data-src="mock.asset"
+ data-srcset="mock.asset"
height="100%"
- src="../promo.jpg"
+ src="mock.asset"
srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
width="100%"
/>
@@ -354,9 +310,6 @@ exports[`renders Promo correctly end position 1`] = `
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 2rem;
line-height: 2rem;
@@ -382,9 +335,6 @@ exports[`renders Promo correctly end position 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -401,39 +351,14 @@ exports[`renders Promo correctly end position 1`] = `
line-height: inherit;
}
-.c2 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-}
-
-.c3 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
-}
-
.c9 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
- -webkit-text-decoration: none;
text-decoration: none;
- -webkit-transition: all 0.2s;
transition: all 0.2s;
height: 2.5rem;
width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border: none;
cursor: pointer;
@@ -444,9 +369,6 @@ exports[`renders Promo correctly end position 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -465,19 +387,27 @@ exports[`renders Promo correctly end position 1`] = `
opacity: 0.5;
}
+.c2 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c3 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
.c0 {
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
background: #274084;
- -webkit-clip-path: polygon(0 0,100% 0,100% 90%,0 101%);
clip-path: polygon(0 0,100% 0,100% 90%,0 101%);
border-radius: 0 0 0 2rem;
}
@@ -489,18 +419,9 @@ exports[`renders Promo correctly end position 1`] = `
left: 0;
right: 0;
margin: 0 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
position: relative;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
}
@@ -522,31 +443,25 @@ exports[`renders Promo correctly end position 1`] = `
.c5 {
width: 100%;
height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 2.5rem;
line-height: 2.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 3rem;
line-height: 3rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 4rem;
line-height: 4rem;
@@ -554,7 +469,7 @@ exports[`renders Promo correctly end position 1`] = `
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 5rem;
line-height: 5rem;
@@ -562,83 +477,80 @@ exports[`renders Promo correctly end position 1`] = `
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c9 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c9 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c9 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c9 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c0 {
- -webkit-clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
border-radius: 0 0 0 4rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
min-height: calc(100vh - 90px);
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
width: 100%;
padding: 8rem 1.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c1 {
height: 100%;
position: absolute;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c5 {
width: 50%;
position: absolute;
@@ -657,18 +569,16 @@ exports[`renders Promo correctly end position 1`] = `
>
<div
className="c2 lazyload"
- height="100%"
- width="100%"
>
<img
alt=""
className="c3 lazyload"
data-lowsrc={null}
data-sizes="auto"
- data-src="../promo.jpg"
- data-srcset="../promo.jpg"
+ data-src="mock.asset"
+ data-srcset="mock.asset"
height="100%"
- src="../promo.jpg"
+ src="mock.asset"
srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
width="100%"
/>
diff --git a/src/components/Molecules/QuoteSlice/QuoteSlice.js b/src/components/Molecules/QuoteSlice/QuoteSlice.js
index 1fe47ce1e..8a837222a 100644
--- a/src/components/Molecules/QuoteSlice/QuoteSlice.js
+++ b/src/components/Molecules/QuoteSlice/QuoteSlice.js
@@ -62,10 +62,10 @@ const QuoteSlice = ({
return (
<OuterWrapper
- backgroundColour={pageBackgroundColour}
- textColour={textColour}
- paddingTop={paddingTop}
- paddingBottom={paddingBottom}
+ $backgroundColour={pageBackgroundColour}
+ $textColour={textColour}
+ $paddingTop={paddingTop}
+ $paddingBottom={paddingBottom}
>
<InnerWrapper>
<PictureWrapper>
@@ -99,7 +99,7 @@ const QuoteSlice = ({
</PictureWrapper>
<TextWrapper>
{heading && (
- <Heading tag="h2" ratio={ratio}>
+ <Heading tag="h2" $ratio={ratio}>
{heading}
</Heading>
)}
diff --git a/src/components/Molecules/QuoteSlice/QuoteSlice.md b/src/components/Molecules/QuoteSlice/QuoteSlice.md
deleted file mode 100644
index 64297b12f..000000000
--- a/src/components/Molecules/QuoteSlice/QuoteSlice.md
+++ /dev/null
@@ -1,53 +0,0 @@
-
-
-
-# Quote slice
-
-### Empty slice
-
-```js
-<QuoteSlice />
-```
-
-### Quote slice > basic props
-```js
-import { defaultData } from '../../../styleguide/data/data';
-<QuoteSlice
- heading="Up to 30 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
- body="Body text"
- imageS={defaultData.pictures.small}
- imageM={defaultData.pictures.medium}
- imageL={defaultData.pictures.large}
- ctaUrl="http://www.google.com"
- ctaLabel="An external link"
- />
-```
-
-### Quote slice > responsive heading size
-Longer heading text should automatically use a smaller font size for a better fit.
-```js
-import { defaultData } from '../../../styleguide/data/data';
-<QuoteSlice
- heading="Mid-length quotes over 30 characters will slowly scale down. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
- body="Body text"
- imageS={defaultData.pictures.small}
- imageM={defaultData.pictures.medium}
- imageL={defaultData.pictures.large}
- ctaUrl="http://www.google.com"
- ctaLabel="An external link"
- />
-```
-
-### Quote slice > alternative props
-```js
-import { defaultData } from '../../../styleguide/data/data';
-<QuoteSlice
- heading="Longer quotes of up to 500 characters will all appear at the smallest size. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in."
- body={`Line 1,
-Line 2`}
- textColour="black"
- pageBackgroundColour="red"
- ctaUrl="/test-url"
- ctaLabel="An external link"
- />
-```
diff --git a/src/components/Molecules/QuoteSlice/QuoteSlice.style.js b/src/components/Molecules/QuoteSlice/QuoteSlice.style.js
index 25a3624a0..40bac1c63 100644
--- a/src/components/Molecules/QuoteSlice/QuoteSlice.style.js
+++ b/src/components/Molecules/QuoteSlice/QuoteSlice.style.js
@@ -8,9 +8,9 @@ const OuterWrapper = styled.div`
width: 100%;
display: flex;
justify-content: center;
- padding: ${({ paddingTop, paddingBottom }) => `${paddingTop} 1rem ${paddingBottom}`};
- background-color: ${({ theme, backgroundColour }) => theme.color(backgroundColour)};
- color: ${({ theme, textColour }) => theme.color(textColour)};
+ padding: ${({ $paddingTop, $paddingBottom }) => `${$paddingTop} 1rem ${$paddingBottom}`};
+ background-color: ${({ theme, $backgroundColour }) => theme.color($backgroundColour)};
+ color: ${({ theme, $textColour }) => theme.color($textColour)};
@media ${({ theme }) => theme.breakpoints2026('M')} {
padding-left: 2rem;
@@ -61,7 +61,7 @@ const Heading = styled(Text)`
line-height: 1;
text-align: center;
text-wrap: balance;
- --ratio: ${({ ratio }) => ratio || 1};
+ --ratio: ${({ $ratio }) => $ratio || 1};
font-size: clamp(1.5rem, calc(var(--ratio) * 3rem), 3rem);
@media ${({ theme }) => theme.breakpoints2026('M')} {
diff --git a/src/components/Molecules/QuoteSlice/QuoteSlice.test.js b/src/components/Molecules/QuoteSlice/QuoteSlice.test.js
index 33aa66b45..c504015e4 100644
--- a/src/components/Molecules/QuoteSlice/QuoteSlice.test.js
+++ b/src/components/Molecules/QuoteSlice/QuoteSlice.test.js
@@ -1,8 +1,8 @@
-import 'jest-styled-components';
import React from 'react';
+import 'jest-styled-components';
import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
import QuoteSlice from './QuoteSlice';
-import { defaultData } from '../../../styleguide/data/data';
+import { defaultData } from '../../../data/data';
it('renders an empty Quote Slice with no options set', () => {
const quoteEl = renderWithTheme(<QuoteSlice />).toJSON();
diff --git a/src/components/Molecules/QuoteSlice/QuoteSliceExample.jsx b/src/components/Molecules/QuoteSlice/QuoteSliceExample.jsx
new file mode 100644
index 000000000..52b7c85d0
--- /dev/null
+++ b/src/components/Molecules/QuoteSlice/QuoteSliceExample.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import QuoteSlice from './QuoteSlice';
+import { defaultData } from '../../../data/data';
+
+export default function QuoteSliceExample() {
+ return (
+ <>
+ <h3>Empty slice</h3>
+ <QuoteSlice />
+
+ <h3>Quote slice > basic props</h3>
+ <QuoteSlice
+ heading="Up to 30 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
+ body="Body text"
+ imageS={defaultData.pictures.small}
+ imageM={defaultData.pictures.medium}
+ imageL={defaultData.pictures.large}
+ ctaUrl="http://www.google.com"
+ ctaLabel="An external link"
+ />
+
+ <h3>Quote slice > responsive heading size</h3>
+ <p>Longer heading text should automatically use a smaller font size for a better fit.</p>
+ <QuoteSlice
+ heading="Mid-length quotes over 30 characters will slowly scale down. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+ body="Body text"
+ imageS={defaultData.pictures.small}
+ imageM={defaultData.pictures.medium}
+ imageL={defaultData.pictures.large}
+ ctaUrl="http://www.google.com"
+ ctaLabel="An external link"
+ />
+
+ <h3>Quote slice > alternative props</h3>
+ <QuoteSlice
+ heading="Longer quotes of up to 500 characters will all appear at the smallest size. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in."
+ body={`Line 1,
+Line 2`}
+ textColour="black"
+ pageBackgroundColour="red"
+ ctaUrl="/test-url"
+ ctaLabel="An external link"
+ />
+ </>
+ );
+}
diff --git a/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap b/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap
index cfb2800b0..150fbbc67 100644
--- a/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap
+++ b/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders a Quote Slice with basic props 1`] = `
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.5rem;
line-height: 1.5rem;
@@ -22,9 +19,6 @@ exports[`renders a Quote Slice with basic props 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -40,24 +34,13 @@ exports[`renders a Quote Slice with basic props 1`] = `
}
.c8 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
- -webkit-text-decoration: none;
text-decoration: none;
- -webkit-transition: all 0.2s;
transition: all 0.2s;
height: 2.5rem;
width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border: none;
cursor: pointer;
@@ -68,9 +51,6 @@ exports[`renders a Quote Slice with basic props 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -91,9 +71,7 @@ exports[`renders a Quote Slice with basic props 1`] = `
.c10 {
border: 0;
- -webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
- -webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
@@ -106,13 +84,7 @@ exports[`renders a Quote Slice with basic props 1`] = `
.c0 {
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
padding: 2rem 1rem 2rem;
background-color: #13767C;
@@ -121,20 +93,9 @@ exports[`renders a Quote Slice with basic props 1`] = `
.c1 {
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
align-items: stretch;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
flex: 1 1 auto;
height: 75vh;
min-height: 600px;
@@ -158,20 +119,9 @@ exports[`renders a Quote Slice with basic props 1`] = `
.c3 {
position: relative;
- 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;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
gap: 1rem;
z-index: 2;
@@ -196,74 +146,74 @@ exports[`renders a Quote Slice with basic props 1`] = `
width: auto;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
font-size: 1.875rem;
line-height: 1.875rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
font-size: 2rem;
line-height: 2rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
width: auto;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
padding-left: 2rem;
padding-right: 2rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
font-size: clamp(2rem,calc(var(--ratio) * 3.5rem),3.5rem);
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c5 {
font-size: clamp(2rem,calc(var(--ratio) * 6rem),6rem);
}
@@ -312,13 +262,7 @@ exports[`renders a Quote Slice with basic props 1`] = `
exports[`renders an empty Quote Slice with no options set 1`] = `
.c0 {
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
padding: 2rem 1rem 2rem;
background-color: #13767C;
@@ -327,20 +271,9 @@ exports[`renders an empty Quote Slice with no options set 1`] = `
.c1 {
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
align-items: stretch;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
flex: 1 1 auto;
height: 75vh;
min-height: 600px;
@@ -364,27 +297,16 @@ exports[`renders an empty Quote Slice with no options set 1`] = `
.c3 {
position: relative;
- 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;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
gap: 1rem;
z-index: 2;
padding: 2rem;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
padding-left: 2rem;
padding-right: 2rem;
diff --git a/src/components/Molecules/SchoolLookup/SchoolLookup.md b/src/components/Molecules/SchoolLookup/SchoolLookup.md
deleted file mode 100644
index 28efff16f..000000000
--- a/src/components/Molecules/SchoolLookup/SchoolLookup.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# SchoolLookup
-
-```js
-import SchoolLookup from './SchoolLookup';
-
-// This is just an example of how a parent component might handle fetch errors within the component.
-const [enterManually, setEnterManually] = React.useState(false);
-
-const fetchErrorHandler = () => {
- setEnterManually(true);
-}
-
-enterManually
- ? 'Sorry, there appears to be a problem. Please enter the school\'s details manually.'
- : (
- <SchoolLookup onSelect={school => alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} />
- )
-```
diff --git a/src/components/Molecules/SchoolLookup/SchoolLookupExample.jsx b/src/components/Molecules/SchoolLookup/SchoolLookupExample.jsx
new file mode 100644
index 000000000..0cd052859
--- /dev/null
+++ b/src/components/Molecules/SchoolLookup/SchoolLookupExample.jsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import SchoolLookup from './SchoolLookup';
+
+export default function SchoolLookupExample() {
+ const [enterManually, setEnterManually] = useState(false);
+
+ if (enterManually) {
+ return <p>Sorry, there appears to be a problem. Please enter the school's details manually.</p>;
+ }
+
+ return (
+ <SchoolLookup
+ onSelect={school => alert(JSON.stringify(school, null, 2))}
+ fetchErrorHandler={() => setEnterManually(true)}
+ />
+ );
+}
diff --git a/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap b/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
index 8d486934d..204344ecc 100644
--- a/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
+++ b/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -21,12 +18,7 @@ exports[`renders correctly 1`] = `
.c1 {
width: 100%;
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
color: #000000;
}
@@ -36,9 +28,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -49,9 +38,6 @@ exports[`renders correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -60,17 +46,8 @@ exports[`renders correctly 1`] = `
.c5 {
position: relative;
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -84,8 +61,6 @@ exports[`renders correctly 1`] = `
border: 1px solid;
border-color: #969598;
box-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
appearance: none;
color: #000000;
border-radius: 0.5rem;
@@ -102,56 +77,48 @@ exports[`renders correctly 1`] = `
position: relative;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c2 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c3 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c3 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c4 {
font-size: 1.25rem;
line-height: 1.25rem;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:1024px) {
-
-}
-
<div
className="c0 TextInputWithDropdown"
onKeyDown={[Function]}
@@ -163,7 +130,7 @@ exports[`renders correctly 1`] = `
<span
className="c2 c3"
dangerouslySetInnerHTML={
- Object {
+ {
"__html": "Enter the name or postcode of your school or nursery",
}
}
@@ -171,7 +138,6 @@ exports[`renders correctly 1`] = `
<div
className="c4"
>
-
<div
className="c5"
>
@@ -187,10 +153,8 @@ exports[`renders correctly 1`] = `
required={false}
type="text"
/>
-
</div>
</div>
-
</label>
</div>
`;
diff --git a/src/components/Molecules/SearchInput/SearchInput.md b/src/components/Molecules/SearchInput/SearchInput.md
deleted file mode 100644
index aa95d4e46..000000000
--- a/src/components/Molecules/SearchInput/SearchInput.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Search input
-
-```js
-const [search, setSearch] = React.useState('');
-
-<SearchInput
- onChange={e => {
- e.preventDefault();
- setSearch(e.target.value);
- console.log(search);
- }}
- value={search}
- placeholder="Search..."
-/>;
-```
diff --git a/src/components/Molecules/SearchInput/SearchInput.style.js b/src/components/Molecules/SearchInput/SearchInput.style.js
index 7bab62622..8877271c7 100644
--- a/src/components/Molecules/SearchInput/SearchInput.style.js
+++ b/src/components/Molecules/SearchInput/SearchInput.style.js
@@ -35,7 +35,7 @@ const SearchField = styled(Input)`
border: 0;
outline: ${({ theme }) => theme.color('red')};
background: none;
- :focus {
+ &:focus {
border: 0;
}
@media ${({ theme }) => theme.allBreakpoints('M')} {
diff --git a/src/components/Molecules/SearchInput/SearchInput.test.js b/src/components/Molecules/SearchInput/SearchInput.test.js
index d0e84896e..ea2ac21e5 100644
--- a/src/components/Molecules/SearchInput/SearchInput.test.js
+++ b/src/components/Molecules/SearchInput/SearchInput.test.js
@@ -15,236 +15,201 @@ it('renders correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c6 {
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 400;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c6 span {
- font-size: inherit;
- line-height: inherit;
- }
-
- .c4 {
- width: 100%;
- position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- color: #000000;
- }
-
- .c7 {
- border: 0;
- -webkit-clip: rect(0 0 0 0);
- clip: rect(0 0 0 0);
- -webkit-clip-path: inset(50%);
- clip-path: inset(50%);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
- }
-
- .c8 {
- position: relative;
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 400;
- text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1rem;
- line-height: 1.25rem;
- }
-
- .c9 {
- position: relative;
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- }
-
- .c10 {
- position: relative;
- box-sizing: border-box;
- width: 100%;
- height: 48px;
- padding: 1rem;
- background-color: #F4F3F5;
- border: 1px solid;
- border-color: #969598;
- box-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- color: #000000;
- border-radius: 0.5rem;
- font-size: inherit;
- z-index: 2;
- font-family: inherit;
- }
-
- .c10:focus {
- border: 1px solid #666;
- }
-
- .c0 {
- width: 100%;
- max-width: 1440px;
- margin: auto;
- }
-
- .c1 {
- margin: 1rem auto;
- padding: 0 calc((4 * 0.25rem));
- }
-
- .c2 {
- margin: 4rem auto;
- width: 100%;
- border-bottom: 4px solid #E52630;
- overflow: hidden;
- }
-
- .c3 {
- width: 100%;
- padding: 0 0.5rem;
- }
-
- .c5 input {
- padding: 13px 0;
- margin: 0;
- max-width: 100%;
- border: 0;
- outline: #E52630;
- background: none;
- }
-
- .c5 input:focus {
- border: 0;
- }
-
- @media (min-width:740px) {
- .c6 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .c6 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
- }
-
- @media (min-width:740px) {
- .c8 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:1024px) {
- .c8 {
- font-size: 1.25rem;
- line-height: 1.25rem;
- }
- }
-
- @media (min-width:740px) {
-
- }
-
- @media (min-width:1024px) {
-
- }
-
- @media (min-width:740px) {
- .c5 input {
- height: 100px;
- font-size: 3rem;
- }
- }
-
+.c6 {
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c6 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c4 {
+ width: 100%;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ color: #000000;
+}
+
+.c7 {
+ border: 0;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+.c8 {
+ position: relative;
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: inherit;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c9 {
+ position: relative;
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.c10 {
+ position: relative;
+ box-sizing: border-box;
+ width: 100%;
+ height: 48px;
+ padding: 1rem;
+ background-color: #F4F3F5;
+ border: 1px solid;
+ border-color: #969598;
+ box-shadow: none;
+ appearance: none;
+ color: #000000;
+ border-radius: 0.5rem;
+ font-size: inherit;
+ z-index: 2;
+ font-family: inherit;
+}
+
+.c10:focus {
+ border: 1px solid #666;
+}
+
+.c0 {
+ width: 100%;
+ max-width: 1440px;
+ margin: auto;
+}
+
+.c1 {
+ margin: 1rem auto;
+ padding: 0 calc((4 * 0.25rem));
+}
+
+.c2 {
+ margin: 4rem auto;
+ width: 100%;
+ border-bottom: 4px solid #E52630;
+ overflow: hidden;
+}
+
+.c3 {
+ width: 100%;
+ padding: 0 0.5rem;
+}
+
+.c5 input {
+ padding: 13px 0;
+ margin: 0;
+ max-width: 100%;
+ border: 0;
+ outline: #E52630;
+ background: none;
+}
+
+.c5 input:focus {
+ border: 0;
+}
+
+@media (min-width: 740px) {
+ .c6 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c6 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c8 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .c8 {
+ font-size: 1.25rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 740px) {
+ .c5 input {
+ height: 100px;
+ font-size: 3rem;
+ }
+}
+
+<div
+ className="c0"
+>
+ <div
+ className="c1"
+ >
<div
- className="c0"
+ className="c2"
+ role="search"
>
<div
- className="c1"
+ className="c3"
>
- <div
- className="c2"
- role="search"
+ <label
+ className="c4 c5"
+ htmlFor="search"
>
+ <span
+ className="c6 c7"
+ dangerouslySetInnerHTML={
+ {
+ "__html": "Search",
+ }
+ }
+ />
<div
- className="c3"
+ className="c8"
>
- <label
- className="c4 c5"
- htmlFor="search"
+ <div
+ className="c9"
>
- <span
- className="c6 c7"
- dangerouslySetInnerHTML={
- Object {
- "__html": "Search",
- }
- }
+ <input
+ aria-required={false}
+ className="c10"
+ id="search"
+ name="search"
+ onChange={[Function]}
+ placeholder=""
+ required={false}
+ role="searchbox"
+ type="text"
+ value=""
/>
- <div
- className="c8"
- >
-
- <div
- className="c9"
- >
- <input
- aria-required={false}
- className="c10"
- id="search"
- name="search"
- onChange={[Function]}
- placeholder=""
- required={false}
- role="searchbox"
- type="text"
- value=""
- />
-
- </div>
- </div>
-
- </label>
+ </div>
</div>
- </div>
+ </label>
</div>
</div>
- `);
+ </div>
+</div>
+`);
});
diff --git a/src/components/Molecules/SearchInput/SearchInputExample.jsx b/src/components/Molecules/SearchInput/SearchInputExample.jsx
new file mode 100644
index 000000000..f82b06c19
--- /dev/null
+++ b/src/components/Molecules/SearchInput/SearchInputExample.jsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import SearchInput from './SearchInput';
+
+export default function SearchInputExample() {
+ const [search, setSearch] = useState('');
+
+ return (
+ <SearchInput
+ onChange={e => {
+ e.preventDefault();
+ setSearch(e.target.value);
+ }}
+ value={search}
+ placeholder="Search..."
+ />
+ );
+}
diff --git a/src/components/Molecules/SearchResult/SearchResult.js b/src/components/Molecules/SearchResult/SearchResult.js
index b83426e03..bd01c5a16 100644
--- a/src/components/Molecules/SearchResult/SearchResult.js
+++ b/src/components/Molecules/SearchResult/SearchResult.js
@@ -27,7 +27,7 @@ const Item = styled(Link)`
@media ${({ theme }) => theme.allBreakpoints('M')} {
flex-direction: row;
}
- :hover {
+ &:hover {
border: 0;
font-weight: normal;
}
diff --git a/src/components/Molecules/SearchResult/SearchResult.md b/src/components/Molecules/SearchResult/SearchResult.md
deleted file mode 100644
index 9c3e8f74d..000000000
--- a/src/components/Molecules/SearchResult/SearchResult.md
+++ /dev/null
@@ -1,55 +0,0 @@
-### Minimalist
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-<SearchResult
- href="/test"
- imageLow={defaultData.imageLow}
- images={defaultData.images}
- title="News article"
- alt="Image's description"
-/>;
-```
-
-### With copy
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-<SearchResult
- href="/test"
- imageLow={defaultData.imageLow}
- images={defaultData.images}
- title="News article"
- copy="News article copy"
- alt="Image's description"
-/>;
-```
-
-### With date
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-<SearchResult
- href="/test"
- imageLow={defaultData.imageLow}
- images={defaultData.images}
- date="01 July 2019"
- title="News article"
- alt="Image's description"
-/>;
-```
-
-### With date and type
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;
-<SearchResult
- href="/test"
- imageLow={defaultData.imageLow}
- images={defaultData.images}
- date="01 July 2019"
- type="article"
- title="News article"
- alt="Image's description"
-/>;
-```
diff --git a/src/components/Molecules/SearchResult/SearchResult.test.js b/src/components/Molecules/SearchResult/SearchResult.test.js
index 0b76a10ec..5a3ce22dd 100644
--- a/src/components/Molecules/SearchResult/SearchResult.test.js
+++ b/src/components/Molecules/SearchResult/SearchResult.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import 'jest-styled-components';
import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
import SearchResult from './SearchResult';
-import { defaultData } from '../../../styleguide/data/data';
+import { defaultData } from '../../../data/data';
it('renders correctly in minimalist form', () => {
const tree = renderWithTheme(
diff --git a/src/components/Molecules/SearchResult/SearchResultExample.jsx b/src/components/Molecules/SearchResult/SearchResultExample.jsx
new file mode 100644
index 000000000..1750bee10
--- /dev/null
+++ b/src/components/Molecules/SearchResult/SearchResultExample.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import SearchResult from './SearchResult';
+import { defaultData } from '../../../data/data';
+
+export default function SearchResultExample() {
+ return (
+ <>
+ <h3>Minimalist</h3>
+ <SearchResult
+ href="/test"
+ imageLow={defaultData.imageLow}
+ images={defaultData.images}
+ title="News article"
+ alt="Image's description"
+ />
+
+ <h3>With copy</h3>
+ <SearchResult
+ href="/test"
+ imageLow={defaultData.imageLow}
+ images={defaultData.images}
+ title="News article"
+ copy="News article copy"
+ alt="Image's description"
+ />
+
+ <h3>With date</h3>
+ <SearchResult
+ href="/test"
+ imageLow={defaultData.imageLow}
+ images={defaultData.images}
+ date="01 July 2019"
+ title="News article"
+ alt="Image's description"
+ />
+
+ <h3>With date and type</h3>
+ <SearchResult
+ href="/test"
+ imageLow={defaultData.imageLow}
+ images={defaultData.images}
+ date="01 July 2019"
+ type="article"
+ title="News article"
+ alt="Image's description"
+ />
+ </>
+ );
+}
diff --git a/src/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap b/src/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap
index ba296ba9b..bf7501691 100644
--- a/src/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap
+++ b/src/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders correctly in minimalist form 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -27,9 +24,6 @@ exports[`renders correctly in minimalist form 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.5rem;
@@ -45,6 +39,20 @@ exports[`renders correctly in minimalist form 1`] = `
line-height: inherit;
}
+.c1 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c1:hover,
+.c1:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
.c4 {
display: block;
width: 100%;
@@ -59,20 +67,6 @@ exports[`renders correctly in minimalist form 1`] = `
object-fit: cover;
}
-.c1 {
- position: relative;
- display: inline;
- color: #000000;
- font-weight: normal;
-}
-
-.c1:hover,
-.c1:focus {
- color: #000000;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
.c0 {
width: 100%;
height: 100%;
@@ -80,16 +74,10 @@ exports[`renders correctly in minimalist form 1`] = `
}
.c2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
height: 100%;
border: 0;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-text-decoration: none;
text-decoration: none;
color: inherit;
width: 100%;
@@ -105,16 +93,8 @@ exports[`renders correctly in minimalist form 1`] = `
}
.c6 {
- 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;
padding: 1rem;
width: 100%;
@@ -124,49 +104,47 @@ exports[`renders correctly in minimalist form 1`] = `
margin: 0;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.375rem;
line-height: 1.625rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c3 {
width: 45%;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c3 {
width: 100%;
}
@@ -183,11 +161,11 @@ exports[`renders correctly in minimalist form 1`] = `
>
<div
className="c3"
+ largeImageWidth="100%"
+ smallImageWidth="45%"
>
<div
className="c4"
- height="auto"
- width="100%"
>
<img
alt="Image's description"
@@ -211,7 +189,6 @@ exports[`renders correctly in minimalist form 1`] = `
>
News article
</h3>
-
</div>
</a>
</article>
@@ -222,9 +199,6 @@ exports[`renders correctly with copy 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -244,9 +218,6 @@ exports[`renders correctly with copy 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.5rem;
@@ -266,9 +237,6 @@ exports[`renders correctly with copy 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -284,6 +252,20 @@ exports[`renders correctly with copy 1`] = `
line-height: inherit;
}
+.c1 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c1:hover,
+.c1:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
.c4 {
display: block;
width: 100%;
@@ -298,20 +280,6 @@ exports[`renders correctly with copy 1`] = `
object-fit: cover;
}
-.c1 {
- position: relative;
- display: inline;
- color: #000000;
- font-weight: normal;
-}
-
-.c1:hover,
-.c1:focus {
- color: #000000;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
.c0 {
width: 100%;
height: 100%;
@@ -319,16 +287,10 @@ exports[`renders correctly with copy 1`] = `
}
.c2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
height: 100%;
border: 0;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-text-decoration: none;
text-decoration: none;
color: inherit;
width: 100%;
@@ -344,16 +306,8 @@ exports[`renders correctly with copy 1`] = `
}
.c6 {
- 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;
padding: 1rem;
width: 100%;
@@ -363,63 +317,61 @@ exports[`renders correctly with copy 1`] = `
margin: 0;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.375rem;
line-height: 1.625rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c10 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c10 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c3 {
width: 45%;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c3 {
width: 100%;
}
@@ -436,11 +388,11 @@ exports[`renders correctly with copy 1`] = `
>
<div
className="c3"
+ largeImageWidth="100%"
+ smallImageWidth="45%"
>
<div
className="c4"
- height="auto"
- width="100%"
>
<img
alt="Image's description"
@@ -479,9 +431,6 @@ exports[`renders correctly with date 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -501,9 +450,6 @@ exports[`renders correctly with date 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.5rem;
@@ -519,6 +465,20 @@ exports[`renders correctly with date 1`] = `
line-height: inherit;
}
+.c1 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c1:hover,
+.c1:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
.c4 {
display: block;
width: 100%;
@@ -533,20 +493,6 @@ exports[`renders correctly with date 1`] = `
object-fit: cover;
}
-.c1 {
- position: relative;
- display: inline;
- color: #000000;
- font-weight: normal;
-}
-
-.c1:hover,
-.c1:focus {
- color: #000000;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
.c0 {
width: 100%;
height: 100%;
@@ -554,16 +500,10 @@ exports[`renders correctly with date 1`] = `
}
.c2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
height: 100%;
border: 0;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-text-decoration: none;
text-decoration: none;
color: inherit;
width: 100%;
@@ -579,16 +519,8 @@ exports[`renders correctly with date 1`] = `
}
.c6 {
- 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;
padding: 1rem;
width: 100%;
@@ -598,49 +530,47 @@ exports[`renders correctly with date 1`] = `
margin: 0;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.375rem;
line-height: 1.625rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c3 {
width: 45%;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c3 {
width: 100%;
}
@@ -657,11 +587,11 @@ exports[`renders correctly with date 1`] = `
>
<div
className="c3"
+ largeImageWidth="100%"
+ smallImageWidth="45%"
>
<div
className="c4"
- height="auto"
- width="100%"
>
<img
alt="Image's description"
@@ -685,7 +615,6 @@ exports[`renders correctly with date 1`] = `
>
News article
</h3>
-
</div>
</a>
</article>
@@ -696,9 +625,6 @@ exports[`renders correctly with date and type 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -718,9 +644,6 @@ exports[`renders correctly with date and type 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.5rem;
@@ -736,6 +659,20 @@ exports[`renders correctly with date and type 1`] = `
line-height: inherit;
}
+.c1 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ color: #E52630;
+}
+
+.c1:hover,
+.c1:focus {
+ color: #000000;
+ text-decoration: none;
+}
+
.c4 {
display: block;
width: 100%;
@@ -750,20 +687,6 @@ exports[`renders correctly with date and type 1`] = `
object-fit: cover;
}
-.c1 {
- position: relative;
- display: inline;
- color: #000000;
- font-weight: normal;
-}
-
-.c1:hover,
-.c1:focus {
- color: #000000;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
.c0 {
width: 100%;
height: 100%;
@@ -771,16 +694,10 @@ exports[`renders correctly with date and type 1`] = `
}
.c2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
height: 100%;
border: 0;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-text-decoration: none;
text-decoration: none;
color: inherit;
width: 100%;
@@ -796,16 +713,8 @@ exports[`renders correctly with date and type 1`] = `
}
.c6 {
- 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;
padding: 1rem;
width: 100%;
@@ -815,49 +724,47 @@ exports[`renders correctly with date and type 1`] = `
margin: 0;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.375rem;
line-height: 1.625rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c3 {
width: 45%;
}
}
-@media (min-width:1440px) {
+@media (min-width: 1440px) {
.c3 {
width: 100%;
}
@@ -874,11 +781,11 @@ exports[`renders correctly with date and type 1`] = `
>
<div
className="c3"
+ largeImageWidth="100%"
+ smallImageWidth="45%"
>
<div
className="c4"
- height="auto"
- width="100%"
>
<img
alt="Image's description"
@@ -902,7 +809,6 @@ exports[`renders correctly with date and type 1`] = `
>
News article
</h3>
-
</div>
</a>
</article>
diff --git a/src/components/Molecules/ShareButton/ShareButton.md b/src/components/Molecules/ShareButton/ShareButton.md
deleted file mode 100644
index 06f62ca0c..000000000
--- a/src/components/Molecules/ShareButton/ShareButton.md
+++ /dev/null
@@ -1,10 +0,0 @@
-```js
-<div>
- <ShareButton />
-
- <ShareButton
- urlToShare="http://www.google.com"
- copy="Share some other page:"
- />
-</div>
-```
diff --git a/src/components/Molecules/ShareButton/ShareButton.test.js b/src/components/Molecules/ShareButton/ShareButton.test.js
index b1b7f26c1..db23d9fc7 100644
--- a/src/components/Molecules/ShareButton/ShareButton.test.js
+++ b/src/components/Molecules/ShareButton/ShareButton.test.js
@@ -7,115 +7,104 @@ it('renders correctly', () => {
const tree = renderWithTheme(<ShareButton />).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c4 {
- -webkit-text-decoration: none;
- text-decoration: none;
- cursor: pointer;
- display: block;
- position: relative;
- -webkit-transition: opacity 0.2s;
- transition: opacity 0.2s;
- }
+.c4 {
+ text-decoration: none;
+ cursor: pointer;
+ display: block;
+ position: relative;
+ transition: opacity 0.2s;
+}
- .c4:hover,
- .c4:focus {
- opacity: 0.6;
- }
+.c4:hover,
+.c4:focus {
+ opacity: 0.6;
+}
- .c5 {
- width: 100%;
- }
+.c5 {
+ width: 100%;
+}
- .c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- }
+.c0 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
- .c1 {
- width: auto;
- margin: 0 1rem 0 0;
- }
+.c1 {
+ width: auto;
+ margin: 0 1rem 0 0;
+}
- .c1:first-child {
- margin-bottom: 0;
- }
+.c1:first-child {
+ margin-bottom: 0;
+}
- .c2 {
- width: auto;
- margin: 0;
- padding: 0;
- list-style: none;
- }
+.c2 {
+ width: auto;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
- .c3 {
- width: 40px;
- height: 40px;
- display: inline-block;
- margin: 0.5rem;
- }
+.c3 {
+ width: 40px;
+ height: 40px;
+ display: inline-block;
+ margin: 0.5rem;
+}
- <div
- className="c0"
+<div
+ className="c0"
+>
+ <p
+ className="c1"
+ >
+ Share with:
+ </p>
+ <ul
+ className="c2"
+ >
+ <li
+ className="c3"
>
- <p
- className="c1"
+ <a
+ className="c4"
+ data-test="icon-share-button-facebook"
+ href="#"
+ onClick={[Function]}
+ rel="noopener noreferrer"
+ role="button"
+ target="__blank"
+ title="Share on Facebook"
>
- Share with:
- </p>
- <ul
- className="c2"
+ <img
+ alt="comicrelief"
+ className="c5"
+ src="mock.asset"
+ />
+ </a>
+ </li>
+ <li
+ className="c3"
+ >
+ <a
+ className="c4"
+ data-test="icon-share-button-twitter"
+ href="#"
+ onClick={[Function]}
+ rel="noopener noreferrer"
+ role="button"
+ target="__blank"
+ title="Share on Twitter"
>
- <li
- className="c3"
- >
- <a
- className="c4"
- data-test="icon-share-button-facebook"
- href="#"
- onClick={[Function]}
- rel="noopener noreferrer"
- role="button"
- target="__blank"
- title="Share on Facebook"
- >
- <img
- alt="comicrelief"
- className="c5"
- src="mock.asset"
- />
- </a>
- </li>
- <li
- className="c3"
- >
- <a
- className="c4"
- data-test="icon-share-button-twitter"
- href="#"
- onClick={[Function]}
- rel="noopener noreferrer"
- role="button"
- target="__blank"
- title="Share on Twitter"
- >
- <img
- alt="comicrelief"
- className="c5"
- src="mock.asset"
- />
- </a>
- </li>
- </ul>
- </div>
- `);
+ <img
+ alt="comicrelief"
+ className="c5"
+ src="mock.asset"
+ />
+ </a>
+ </li>
+ </ul>
+</div>
+`);
});
diff --git a/src/components/Molecules/ShareButton/ShareButtonExample.jsx b/src/components/Molecules/ShareButton/ShareButtonExample.jsx
new file mode 100644
index 000000000..57ca43f0b
--- /dev/null
+++ b/src/components/Molecules/ShareButton/ShareButtonExample.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ShareButton from './ShareButton';
+
+export default function ShareButtonExample() {
+ return (
+ <div>
+ <ShareButton />
+ <ShareButton urlToShare="http://www.google.com" copy="Share some other page:" />
+ </div>
+ );
+}
diff --git a/src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.md b/src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.md
deleted file mode 100644
index 5b170a33d..000000000
--- a/src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```js
-
-import SimpleSchoolLookup from './SimpleSchoolLookup';
-
-<SimpleSchoolLookup onSelect={data => console.log(data)}/>
-
-```
\ No newline at end of file
diff --git a/src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookupExample.jsx b/src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookupExample.jsx
new file mode 100644
index 000000000..1f85f2f01
--- /dev/null
+++ b/src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookupExample.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import SimpleSchoolLookup from './SimpleSchoolLookup';
+
+export default function SimpleSchoolLookupExample() {
+ return (
+ <SimpleSchoolLookup onSelect={data => console.log(data)} />
+ );
+}
diff --git a/src/components/Molecules/SingleMessage/SingleMessage.js b/src/components/Molecules/SingleMessage/SingleMessage.js
index e94defb52..a1b0b8e40 100644
--- a/src/components/Molecules/SingleMessage/SingleMessage.js
+++ b/src/components/Molecules/SingleMessage/SingleMessage.js
@@ -85,10 +85,10 @@ const SingleMessage = ({
// Break-out video markup into its own function
const renderVideoPlayers = () => (
<VideoWrapper
- isPlaying={isPlaying}
- isBuffering={isBuffering}
+ $isPlaying={isPlaying}
+ $isBuffering={isBuffering}
key={uniqueID}
- landscapeVideo={landscapeVideo}
+ $landscapeVideo={landscapeVideo}
>
<div id={uniqueID} />
</VideoWrapper>
@@ -140,30 +140,30 @@ const SingleMessage = ({
<UID name={id => `single-msg__${id}`}>
{id => (
<Container
- backgroundColor={backgroundColor}
- copyFirst={copyFirst}
- vhFull={vhFull}
+ $backgroundColor={backgroundColor}
+ $copyFirst={copyFirst}
+ $vhFull={vhFull}
id={`${id}`}
- isPlaying={isPlaying}
- hasVideo={hasVideo}
- landscapeVideo={landscapeVideo}
- fullImage={fullImage}
+ $isPlaying={isPlaying}
+ $hasVideo={hasVideo}
+ $landscapeVideo={landscapeVideo}
+ $fullImage={fullImage}
ref={thisRef}
- paddingTop={thisPaddingTop}
- paddingBottom={thisPaddingBottom}
- smPaddingTop={thisSmPaddingTop}
- smPaddingBottom={thisSmPaddingBottom}
+ $paddingTop={thisPaddingTop}
+ $paddingBottom={thisPaddingBottom}
+ $smPaddingTop={thisSmPaddingTop}
+ $smPaddingBottom={thisSmPaddingBottom}
>
{imageSet || imageSet2 ? (
<>
<Media
- doubleImage={doubleImage}
- isPlaying={isPlaying}
- isBuffering={isBuffering}
- hasVideo={hasVideo}
- landscapeVideo={landscapeVideo}
- fullImage={fullImage}
- vhFull={vhFull}
+ $doubleImage={doubleImage}
+ $isPlaying={isPlaying}
+ $isBuffering={isBuffering}
+ $hasVideo={hasVideo}
+ $landscapeVideo={landscapeVideo}
+ $fullImage={fullImage}
+ $vhFull={vhFull}
>
{hasVideo
&& hasParentID
@@ -171,13 +171,13 @@ const SingleMessage = ({
{imageSet || image ? (
<Image
- doubleImage={doubleImage}
- vhFull={vhFull}
- isPlaying={isPlaying}
- isBuffering={isBuffering}
- hasVideo={hasVideo}
- fullImage={fullImage}
- landscapeVideo={landscapeVideo}
+ $doubleImage={doubleImage}
+ $vhFull={vhFull}
+ $isPlaying={isPlaying}
+ $isBuffering={isBuffering}
+ $hasVideo={hasVideo}
+ $fullImage={fullImage}
+ $landscapeVideo={landscapeVideo}
>
<Picture
alt={imageAltText}
@@ -191,7 +191,7 @@ const SingleMessage = ({
</Image>
) : null}
{imageSet2 || image2 ? (
- <Image doubleImage={doubleImage} vhFull={vhFull}>
+ <Image $doubleImage={doubleImage} $vhFull={vhFull}>
<Picture
alt={imageAltText2}
imageLow={imageLow}
@@ -206,9 +206,9 @@ const SingleMessage = ({
{hasVideo ? (
<PlayButton
- copyFirst={copyFirst}
- isPlaying={isPlaying}
- isBuffering={isBuffering}
+ $copyFirst={copyFirst}
+ $isPlaying={isPlaying}
+ $isBuffering={isBuffering}
onClick={() => handlePlay(getID(thisRef.current))}
>
Play video
@@ -219,13 +219,13 @@ const SingleMessage = ({
) : null}
{children ? (
<Copy
- fullImage={fullImage}
- hasImage={hasImage}
- copyFirst={copyFirst}
- hasVideo={hasVideo}
- vhFull={vhFull}
- paddingTop={paddingTop}
- paddingBottom={paddingBottom}
+ $fullImage={fullImage}
+ $hasImage={hasImage}
+ $copyFirst={copyFirst}
+ $hasVideo={hasVideo}
+ $vhFull={vhFull}
+ $paddingTop={paddingTop}
+ $paddingBottom={paddingBottom}
>
{children}
</Copy>
diff --git a/src/components/Molecules/SingleMessage/SingleMessage.md b/src/components/Molecules/SingleMessage/SingleMessage.md
deleted file mode 100644
index 737bc39e1..000000000
--- a/src/components/Molecules/SingleMessage/SingleMessage.md
+++ /dev/null
@@ -1,285 +0,0 @@
-Single Message
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-
-<SingleMessage
- backgroundColor="purple_dark"
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- copyFirst={false}
->
- <Text tag="h1" color="white" size="super">
- title
- </Text>
- <Text tag="p" color="white">
- description
- </Text>
- <span>
- <Link href="/" type="button" color="white">
- CTA
- </Link>
- </span>
-</SingleMessage>;
-```
-
-Single Message fullImage
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-
-<SingleMessage
- backgroundColor="purple_dark"
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- copyFirst={false}
- fullImage={true}
- vhFull
->
- <Text tag="h1" color="white" size="xxl">
- title
- </Text>
- <Text tag="p" color="white">
- description
- </Text>
- <span>
- <Link href="/" type="button" color="white">
- CTA
- </Link>
- </span>
-</SingleMessage>;
-```
-
-Single Message fullImage no copy
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-
-<SingleMessage
- backgroundColor="purple_dark"
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- copyFirst={false}
- fullImage={true}
- vhFull
-/>;
-```
-
-Single Message with no Image (default padding)
-
-```js
-import Text from '../../Atoms/Text/Text';
-
-<SingleMessage backgroundColor="purple_dark" copyFirst={false}>
- <Text tag="p" color="white" size="xxl">
- “The creativity that goes into helping people have a better life is
- extraordinary.”
- </Text>
-</SingleMessage>;
-```
-
-Single Message with no Image (no padding)
-
-```js
-import Text from '../../Atoms/Text/Text';
-
-<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingTop="0rem" paddingBottom="0rem">
- <Text tag="p" color="white" size="xxl">
- “The creativity that goes into helping people have a better life is
- extraordinary.”
- </Text>
-</SingleMessage>;
-```
-
-Single Message with no Image (big padding)
-
-```js
-import Text from '../../Atoms/Text/Text';
-
-<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingTop="4rem" paddingBottom="4rem">
- <Text tag="p" color="white" size="xxl">
- “The creativity that goes into helping people have a better life is
- extraordinary.”
- </Text>
-</SingleMessage>;
-```
-
-Single Message vertical height 100%
-
-```js
-import Text from '../../Atoms/Text/Text';
-const defaultData = require('../../../styleguide/data/data').defaultData;
-<SingleMessage
- backgroundColor="purple_dark"
- imageLow={defaultData.imageLow}
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- vhFull
->
- <Text tag="p" color="white" size="xxl">
- “The creativity that goes into helping people have a better life is
- extraordinary.”
- </Text>
-</SingleMessage>;
-```
-
-Single Message double image
-
-```js
-import Text from '../../Atoms/Text/Text';
-const defaultData = require('../../../styleguide/data/data').defaultData;
-<SingleMessage
- backgroundColor="yellow"
- imageLow={defaultData.imageLow}
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- imageSet2={defaultData.images}
- image2={defaultData.image}
- imageAltText2=""
->
- <Text tag="p" color="black" size="xxl">
- “The creativity that goes into helping people have a better life is
- extraordinary.”
- </Text>
-</SingleMessage>;
-```
-
-Single Message with 16:9 video
-
-```js
-import Text from '../../Atoms/Text/Text';
-const defaultData = require('../../../styleguide/data/data').defaultData;
-import exampleYoutubeIds from './_ExampleYoutubeIds.js';
-
-<SingleMessage
- backgroundColor="purple"
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- copyFirst={true}
- videoID={exampleYoutubeIds[0]}
- landscapeVideo
->
- <Text tag="p" color="black" size="xxl">
- Single Message with 16:9 video, copy first
- </Text>
-</SingleMessage>;
-```
-
-```js
-import Text from '../../Atoms/Text/Text';
-const defaultData = require('../../../styleguide/data/data').defaultData;
-import exampleYoutubeIds from './_ExampleYoutubeIds.js';
-
-<SingleMessage
- backgroundColor="purple"
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- copyFirst={false}
- videoID={exampleYoutubeIds[1]}
- landscapeVideo
->
- <Text tag="p" color="black" size="xxl">
- Single Message with 16:9 video
- </Text>
-</SingleMessage>;
-```
-
-Single Message with portrait video
-
-```js
-import Text from '../../Atoms/Text/Text';
-const defaultData = require('../../../styleguide/data/data').defaultData;
-import exampleYoutubeIds from './_ExampleYoutubeIds.js';
-
-<SingleMessage
- backgroundColor="purple"
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- copyFirst={true}
- videoID={exampleYoutubeIds[2]}
->
- <Text tag="p" color="black" size="xxl">
- Single Message with portrait video
- </Text>
-</SingleMessage>;
-```
-
-Single Message with portrait video, 100VH
-
-```js
-import Text from '../../Atoms/Text/Text';
-import exampleYoutubeIds from './_ExampleYoutubeIds.js';
-const defaultData = require('../../../styleguide/data/data').defaultData;
-
-<SingleMessage
- backgroundColor="purple"
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- copyFirst={true}
- videoID={exampleYoutubeIds[3]}
- vhFull
->
- <Text tag="p" color="black" size="xxl">
- Single Message with portrait video, 100VH
- </Text>
-</SingleMessage>;
-```
-
-Single Message with landscape video, 100VH, fullwidth image
-
-```js
-import Text from '../../Atoms/Text/Text';
-const defaultData = require('../../../styleguide/data/data').defaultData;
-import exampleYoutubeIds from './_ExampleYoutubeIds.js';
-
-<SingleMessage
- backgroundColor="purple"
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- copyFirst={true}
- videoID={exampleYoutubeIds[4]}
- vhFull
- fullImage={true}
->
- <Text tag="p" color="black" size="xxl">
- Single Message with portrait video, 100VH, fullwidth image - (this copy
- hidden by design)
- </Text>
-</SingleMessage>;
-```
-
-Single Message with landscape video, 50VH, fullwidth image
-
-```js
-import Text from '../../Atoms/Text/Text';
-const defaultData = require('../../../styleguide/data/data').defaultData;
-import exampleYoutubeIds from './_ExampleYoutubeIds.js';
-
-<SingleMessage
- backgroundColor="purple"
- imageSet={defaultData.images}
- image={defaultData.image}
- imageAltText=""
- copyFirst={true}
- videoID={exampleYoutubeIds[5]}
- fullImage={true}
->
- <Text tag="p" color="black" size="xxl">
- Single Message with portrait video, 50VH,fullwidth image - (this copy hidden
- by design)
- </Text>
-</SingleMessage>;
-```
diff --git a/src/components/Molecules/SingleMessage/SingleMessage.style.js b/src/components/Molecules/SingleMessage/SingleMessage.style.js
index c0599c050..a69a51b7a 100644
--- a/src/components/Molecules/SingleMessage/SingleMessage.style.js
+++ b/src/components/Molecules/SingleMessage/SingleMessage.style.js
@@ -11,39 +11,39 @@ const Container = styled.div`
position: relative;
flex-direction: column;
overflow: hidden;
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
- padding-top: ${({ smPaddingTop }) => smPaddingTop};
- padding-bottom: ${({ smPaddingBottom }) => smPaddingBottom};
+ background: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)};
+ padding-top: ${({ $smPaddingTop }) => $smPaddingTop};
+ padding-bottom: ${({ $smPaddingBottom }) => $smPaddingBottom};
iframe {
height: 100%;
width: 100%;
position: absolute;
top: 0;
- ${({ copyFirst }) => (copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;')};
- ${({ isPlaying }) => (isPlaying ? zIndex('high') : zIndex('base'))};
+ ${({ $copyFirst }) => ($copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;')};
+ ${({ $isPlaying }) => ($isPlaying ? zIndex('high') : zIndex('base'))};
}
@media ${({ theme }) => theme.allBreakpoints('M')} {
- flex-direction: ${({ copyFirst }) => (copyFirst === true ? 'row-reverse' : 'row')};
- ${({ landscapeVideo, hasVideo, fullImage }) => (landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null)};
- padding-top: ${({ paddingTop }) => paddingTop};
- padding-bottom: ${({ paddingBottom }) => paddingBottom};
+ flex-direction: ${({ $copyFirst }) => ($copyFirst === true ? 'row-reverse' : 'row')};
+ ${({ $landscapeVideo, $hasVideo, $fullImage }) => ($landscapeVideo && $hasVideo && !$fullImage ? 'min-height: 0;' : null)};
+ padding-top: ${({ $paddingTop }) => $paddingTop};
+ padding-bottom: ${({ $paddingBottom }) => $paddingBottom};
}
`;
const Copy = styled.div`
width: 100%;
${zIndex('low')};
- ${({ hasVideo, fullImage }) => (hasVideo === true && fullImage === true ? 'display: none;' : null)};
+ ${({ $hasVideo, $fullImage }) => ($hasVideo === true && $fullImage === true ? 'display: none;' : null)};
padding: 0 ${spacing('l')};
@media ${({ theme }) => theme.allBreakpoints('M')} {
- ${({ vhFull, fullImage }) => (vhFull || fullImage
+ ${({ $vhFull, $fullImage }) => ($vhFull || $fullImage
? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;'
: 'height: auto;')};
- ${({ hasVideo, fullImage }) => (hasVideo === true && fullImage === true
+ ${({ $hasVideo, $fullImage }) => ($hasVideo === true && $fullImage === true
? 'display: none;'
: 'display: flex;')};
@@ -52,7 +52,7 @@ const Copy = styled.div`
padding: 0 ${spacing('xl')};
}
- ${props => props.fullImage
+ ${props => props.$fullImage
&& css`
@media ${({ theme }) => theme.allBreakpoints('M')} {
position: absolute;
@@ -60,12 +60,12 @@ const Copy = styled.div`
right: 0;
top: 50%;
transform: translateY(-50%);
- ${props.copyFirst ? css`left: 0;` : null}
+ ${props.$copyFirst ? css`left: 0;` : null}
width: 50%;
}
`};
- ${props => (props.hasImage
+ ${props => (props.$hasImage
? css`
@media ${({ theme }) => theme.allBreakpoints('M')} {
width: 50%;
@@ -74,7 +74,7 @@ const Copy = styled.div`
: css`
margin: auto;
padding: 0 ${spacing('md')};
-
+
@media ${({ theme }) => theme.allBreakpoints('M')} {
width: 100%;
max-width ${containers.small};
@@ -85,20 +85,20 @@ const Copy = styled.div`
const Media = styled.div`
width: 100%;
- ${({ fullImage }) => (fullImage ? 'height: 200px;' : 'height: 280px;')};
+ ${({ $fullImage }) => ($fullImage ? 'height: 200px;' : 'height: 280px;')};
@media ${({ theme }) => theme.allBreakpoints('M')} {
height: auto;
- width: ${({ fullImage }) => (fullImage ? '100%' : '50%')};
- ${({ fullImage }) => (fullImage ? 'min-height: 500px;' : null)};
- ${({ vhFull, fullImage }) => (vhFull && fullImage ? 'min-height: calc(100vh - 5.625rem);' : null)};
+ width: ${({ $fullImage }) => ($fullImage ? '100%' : '50%')};
+ ${({ $fullImage }) => ($fullImage ? 'min-height: 500px;' : null)};
+ ${({ $vhFull, $fullImage }) => ($vhFull && $fullImage ? 'min-height: calc(100vh - 5.625rem);' : null)};
}
position: relative;
- ${({ doubleImage }) => doubleImage && 'display: flex; flex-direction: column'};
- ${({ hasVideo }) => (hasVideo
+ ${({ $doubleImage }) => $doubleImage && 'display: flex; flex-direction: column'};
+ ${({ $hasVideo }) => ($hasVideo
? 'height: auto; overflow: hidden; padding-bottom: 56.25%;'
: null)};
@media ${({ theme }) => theme.allBreakpoints('M')} {
- padding-bottom: ${({ landscapeVideo, hasVideo }) => (landscapeVideo && hasVideo ? 'calc(56.25% / 2);' : '0;')};
+ padding-bottom: ${({ $landscapeVideo, $hasVideo }) => ($landscapeVideo && $hasVideo ? 'calc(56.25% / 2);' : '0;')};
}
`;
@@ -115,15 +115,15 @@ const PlayButton = styled.button`
text-indent: -9999px;
background: rgba(0, 0, 0, 0) center no-repeat;
background-size: 70px;
- background-image: ${({ isBuffering }) => (isBuffering === true ? `url(${loadingIcon})` : `url(${playIcon})`)};
+ background-image: ${({ $isBuffering }) => ($isBuffering === true ? `url(${loadingIcon})` : `url(${playIcon})`)};
- ${({ copyFirst }) => (copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;')};
+ ${({ $copyFirst }) => ($copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;')};
- display: ${({ isPlaying }) => (isPlaying ? 'none' : 'block')};
+ display: ${({ $isPlaying }) => ($isPlaying ? 'none' : 'block')};
&:focus,
&:hover {
- background-image: ${({ isBuffering }) => (isBuffering === true ? `url(${loadingIcon})` : `url(${playIconHover})`)};
+ background-image: ${({ $isBuffering }) => ($isBuffering === true ? `url(${loadingIcon})` : `url(${playIconHover})`)};
}
@media ${({ theme }) => theme.allBreakpoints('M')} {
@@ -134,14 +134,14 @@ const PlayButton = styled.button`
const Image = styled.div`
@media ${({ theme }) => theme.allBreakpoints('M')} {
img {
- position: ${({ fullImage, vhFull }) => (fullImage || vhFull ? 'absolute' : null)};
+ position: ${({ $fullImage, $vhFull }) => ($fullImage || $vhFull ? 'absolute' : null)};
}
}
width: 100%;
height: 100%;
- ${({ doubleImage }) => doubleImage && 'height: 50%'};
- ${({ isPlaying }) => (isPlaying ? zIndex('base') : zIndex('low'))};
- ${({ hasVideo }) => (hasVideo ? 'position: absolute; top: 0; left: 0;' : null)};
+ ${({ $doubleImage }) => $doubleImage && 'height: 50%'};
+ ${({ $isPlaying }) => ($isPlaying ? zIndex('base') : zIndex('low'))};
+ ${({ $hasVideo }) => ($hasVideo ? 'position: absolute; top: 0; left: 0;' : null)};
`;
const VideoWrapper = styled.div`
@@ -150,7 +150,7 @@ const VideoWrapper = styled.div`
position: absolute;
top: 0;
left: 0;
- ${({ isPlaying }) => (isPlaying ? zIndex('medium') : zIndex('base'))};
+ ${({ $isPlaying }) => ($isPlaying ? zIndex('medium') : zIndex('base'))};
`;
export {
diff --git a/src/components/Molecules/SingleMessage/SingleMessage.test.js b/src/components/Molecules/SingleMessage/SingleMessage.test.js
index 9d81a0a3f..c99c6a70e 100644
--- a/src/components/Molecules/SingleMessage/SingleMessage.test.js
+++ b/src/components/Molecules/SingleMessage/SingleMessage.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import 'jest-styled-components';
import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
import SingleMessage from './SingleMessage';
-import { defaultData } from '../../../styleguide/data/data';import Text from '../../Atoms/Text/Text';
+import { defaultData } from '../../../data/data';import Text from '../../Atoms/Text/Text';
import Link from '../../Atoms/Link/Link';
it('renders Single Message with Image correctly', () => {
diff --git a/src/components/Molecules/SingleMessage/SingleMessageExample.jsx b/src/components/Molecules/SingleMessage/SingleMessageExample.jsx
new file mode 100644
index 000000000..c64efe50b
--- /dev/null
+++ b/src/components/Molecules/SingleMessage/SingleMessageExample.jsx
@@ -0,0 +1,247 @@
+import React from 'react';
+import styled from 'styled-components';
+import SingleMessage from './SingleMessage';
+import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+import { defaultData } from '../../../data/data';
+import exampleYoutubeIds from './_ExampleYoutubeIds';
+
+const Wrapper = styled.div`
+ margin: 50px 0;
+`;
+
+export default function SingleMessageExample() {
+ return (
+ <>
+ <Wrapper>
+ <h3>Single Message</h3>
+ <SingleMessage
+ backgroundColor="purple_dark"
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ copyFirst={false}
+ >
+ <Text tag="h1" color="white" size="super">
+ title
+ </Text>
+ <Text tag="p" color="white">
+ description
+ </Text>
+ <span>
+ <Link href="/" type="button" color="white">
+ CTA
+ </Link>
+ </span>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message fullImage</h3>
+ <SingleMessage
+ backgroundColor="purple_dark"
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ copyFirst={false}
+ fullImage={true}
+ vhFull
+ >
+ <Text tag="h1" color="white" size="xxl">
+ title
+ </Text>
+ <Text tag="p" color="white">
+ description
+ </Text>
+ <span>
+ <Link href="/" type="button" color="white">
+ CTA
+ </Link>
+ </span>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message fullImage no copy</h3>
+ <SingleMessage
+ backgroundColor="purple_dark"
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ copyFirst={false}
+ fullImage={true}
+ vhFull
+ />
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message with no Image (default padding)</h3>
+ <SingleMessage backgroundColor="purple_dark" copyFirst={false}>
+ <Text tag="p" color="white" size="xxl">
+ "The creativity that goes into helping people have a better life is
+ extraordinary."
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message with no Image (no padding)</h3>
+ <SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingTop="0rem" paddingBottom="0rem">
+ <Text tag="p" color="white" size="xxl">
+ "The creativity that goes into helping people have a better life is
+ extraordinary."
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message with no Image (big padding)</h3>
+ <SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingTop="4rem" paddingBottom="4rem">
+ <Text tag="p" color="white" size="xxl">
+ "The creativity that goes into helping people have a better life is
+ extraordinary."
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message vertical height 100%</h3>
+ <SingleMessage
+ backgroundColor="purple_dark"
+ imageLow={defaultData.imageLow}
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ vhFull
+ >
+ <Text tag="p" color="white" size="xxl">
+ "The creativity that goes into helping people have a better life is
+ extraordinary."
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message double image</h3>
+ <SingleMessage
+ backgroundColor="yellow"
+ imageLow={defaultData.imageLow}
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ imageSet2={defaultData.images}
+ image2={defaultData.image}
+ imageAltText2=""
+ >
+ <Text tag="p" color="black" size="xxl">
+ "The creativity that goes into helping people have a better life is
+ extraordinary."
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message with 16:9 video</h3>
+ <SingleMessage
+ backgroundColor="purple"
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ copyFirst={true}
+ videoID={exampleYoutubeIds[0]}
+ landscapeVideo
+ >
+ <Text tag="p" color="black" size="xxl">
+ Single Message with 16:9 video, copy first
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <SingleMessage
+ backgroundColor="purple"
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ copyFirst={false}
+ videoID={exampleYoutubeIds[1]}
+ landscapeVideo
+ >
+ <Text tag="p" color="black" size="xxl">
+ Single Message with 16:9 video
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message with portrait video</h3>
+ <SingleMessage
+ backgroundColor="purple"
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ copyFirst={true}
+ videoID={exampleYoutubeIds[2]}
+ >
+ <Text tag="p" color="black" size="xxl">
+ Single Message with portrait video
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message with portrait video, 100VH</h3>
+ <SingleMessage
+ backgroundColor="purple"
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ copyFirst={true}
+ videoID={exampleYoutubeIds[3]}
+ vhFull
+ >
+ <Text tag="p" color="black" size="xxl">
+ Single Message with portrait video, 100VH
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message with landscape video, 100VH, fullwidth image</h3>
+ <SingleMessage
+ backgroundColor="purple"
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ copyFirst={true}
+ videoID={exampleYoutubeIds[4]}
+ vhFull
+ fullImage={true}
+ >
+ <Text tag="p" color="black" size="xxl">
+ Single Message with portrait video, 100VH, fullwidth image - (this copy
+ hidden by design)
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+
+ <Wrapper>
+ <h3>Single Message with landscape video, 50VH, fullwidth image</h3>
+ <SingleMessage
+ backgroundColor="purple"
+ imageSet={defaultData.images}
+ image={defaultData.image}
+ imageAltText=""
+ copyFirst={true}
+ videoID={exampleYoutubeIds[5]}
+ fullImage={true}
+ >
+ <Text tag="p" color="black" size="xxl">
+ Single Message with portrait video, 50VH,fullwidth image - (this copy hidden
+ by design)
+ </Text>
+ </SingleMessage>
+ </Wrapper>
+ </>
+ );
+}
diff --git a/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap b/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap
index 3205f6897..896e9fbc7 100644
--- a/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap
+++ b/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap
@@ -5,9 +5,6 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -39,13 +36,8 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
background: #6F3AAB;
@@ -81,75 +73,60 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
z-index: 1;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
padding-top: 0rem;
padding-bottom: 0rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
min-height: calc(100vh - 5.625rem);
- -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;
- 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;
padding: 0 4rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
width: 50%;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
height: auto;
width: 50%;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
padding-bottom: 0;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 img {
position: absolute;
}
@@ -167,8 +144,6 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
>
<div
className="c3 lazyload"
- height="100%"
- width="100%"
>
<img
alt=""
@@ -202,9 +177,6 @@ exports[`renders Single Message with Image correctly 1`] = `
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 2rem;
line-height: 2rem;
@@ -225,9 +197,6 @@ exports[`renders Single Message with Image correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -244,39 +213,14 @@ exports[`renders Single Message with Image correctly 1`] = `
line-height: inherit;
}
-.c3 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-}
-
-.c4 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
-}
-
.c8 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
- -webkit-text-decoration: none;
text-decoration: none;
- -webkit-transition: all 0.2s;
transition: all 0.2s;
height: 2.5rem;
width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border: none;
cursor: pointer;
@@ -287,9 +231,6 @@ exports[`renders Single Message with Image correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -308,14 +249,23 @@ exports[`renders Single Message with Image correctly 1`] = `
opacity: 0.5;
}
+.c3 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c4 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
background: #6F3AAB;
@@ -351,111 +301,97 @@ exports[`renders Single Message with Image correctly 1`] = `
z-index: 1;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
font-size: 2.5rem;
line-height: 2.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
font-size: 3rem;
line-height: 3rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
width: auto;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
padding-top: 0rem;
padding-bottom: 0rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
height: auto;
- 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;
padding: 0 4rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
width: 50%;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
height: auto;
width: 50%;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
padding-bottom: 0;
}
}
-@media (min-width:740px) {
-
-}
-
<div
className="c0"
id="single-msg__1"
@@ -468,8 +404,6 @@ exports[`renders Single Message with Image correctly 1`] = `
>
<div
className="c3 lazyload"
- height="100%"
- width="100%"
>
<img
alt=""
@@ -516,9 +450,6 @@ exports[`renders Single Message with double image correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -550,13 +481,8 @@ exports[`renders Single Message with double image correctly 1`] = `
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
background: #FFE400;
@@ -584,12 +510,7 @@ exports[`renders Single Message with double image correctly 1`] = `
width: 100%;
height: 280px;
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
}
@@ -600,95 +521,57 @@ exports[`renders Single Message with double image correctly 1`] = `
z-index: 1;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
padding-top: 0rem;
padding-bottom: 0rem;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
height: auto;
- 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;
padding: 0 4rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
width: 50%;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
height: auto;
width: 50%;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
padding-bottom: 0;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
<div
className="c0"
id="single-msg__6"
@@ -701,8 +584,6 @@ exports[`renders Single Message with double image correctly 1`] = `
>
<div
className="c3 lazyload"
- height="100%"
- width="100%"
>
<img
alt=""
@@ -723,8 +604,6 @@ exports[`renders Single Message with double image correctly 1`] = `
>
<div
className="c3 lazyload"
- height="100%"
- width="100%"
>
<img
alt=""
@@ -758,9 +637,6 @@ exports[`renders Single Message with full width correctly 1`] = `
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 2rem;
line-height: 2rem;
@@ -781,9 +657,6 @@ exports[`renders Single Message with full width correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -800,39 +673,14 @@ exports[`renders Single Message with full width correctly 1`] = `
line-height: inherit;
}
-.c3 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-}
-
-.c4 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
-}
-
.c8 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
- -webkit-text-decoration: none;
text-decoration: none;
- -webkit-transition: all 0.2s;
transition: all 0.2s;
height: 2.5rem;
width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
border: none;
cursor: pointer;
@@ -843,9 +691,6 @@ exports[`renders Single Message with full width correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 700;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -864,14 +709,23 @@ exports[`renders Single Message with full width correctly 1`] = `
opacity: 0.5;
}
+.c3 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c4 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
background: #6F3AAB;
@@ -907,115 +761,98 @@ exports[`renders Single Message with full width correctly 1`] = `
z-index: 1;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c6 {
font-size: 2.5rem;
line-height: 2.5rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c6 {
font-size: 3rem;
line-height: 3rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c7 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c7 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c8 {
width: auto;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c8 {
width: auto;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
padding-top: 0rem;
padding-bottom: 0rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
min-height: calc(100vh - 5.625rem);
- -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;
- 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;
padding: 0 4rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
position: absolute;
width: 100%;
right: 0;
top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 50%;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c5 {
width: 50%;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
height: auto;
width: 100%;
@@ -1023,13 +860,13 @@ exports[`renders Single Message with full width correctly 1`] = `
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
padding-bottom: 0;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 img {
position: absolute;
}
@@ -1047,8 +884,6 @@ exports[`renders Single Message with full width correctly 1`] = `
>
<div
className="c3 lazyload"
- height="100%"
- width="100%"
>
<img
alt=""
@@ -1106,13 +941,8 @@ exports[`renders Single Message with full width image and no text correctly 1`]
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
background: #6F3AAB;
@@ -1142,45 +972,15 @@ exports[`renders Single Message with full width image and no text correctly 1`]
z-index: 1;
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:1024px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:1024px) {
-
-}
-
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
padding-top: 0rem;
padding-bottom: 0rem;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
height: auto;
width: 100%;
@@ -1188,13 +988,13 @@ exports[`renders Single Message with full width image and no text correctly 1`]
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
padding-bottom: 0;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 img {
position: absolute;
}
@@ -1212,8 +1012,6 @@ exports[`renders Single Message with full width image and no text correctly 1`]
>
<div
className="c3 lazyload"
- height="100%"
- width="100%"
>
<img
alt=""
@@ -1238,9 +1036,6 @@ exports[`renders Single Message with no Image correctly 1`] = `
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
@@ -1258,13 +1053,8 @@ exports[`renders Single Message with no Image correctly 1`] = `
}
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
background: #6F3AAB;
@@ -1290,96 +1080,45 @@ exports[`renders Single Message with no Image correctly 1`] = `
padding: 0 1rem;
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c2 {
font-size: 1rem;
line-height: 1.25rem;
}
}
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
.c2 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:1024px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:1024px) {
-
-}
-
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
height: auto;
- 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;
padding: 0 4rem;
}
}
-@media (min-width:740px) {
+@media (min-width: 740px) {
.c1 {
width: 100%;
- max-width: 880px;
padding: 0 4rem;
}
}
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:740px) {
-
-}
-
<div
className="c0"
id="single-msg__2"
diff --git a/src/components/Molecules/SingleMessageDS/SingleMessageDs.js b/src/components/Molecules/SingleMessageDS/SingleMessageDs.js
index 3eba5613a..53fdb719f 100644
--- a/src/components/Molecules/SingleMessageDS/SingleMessageDs.js
+++ b/src/components/Molecules/SingleMessageDS/SingleMessageDs.js
@@ -51,7 +51,7 @@ const SingleMessageDs = ({
if (imageLow && link) {
return (
<MediaLink
- imageLeft={imageLeft}
+ $imageLeft={imageLeft}
aria-hidden="true"
tabIndex="-1"
href={link}
@@ -66,7 +66,7 @@ const SingleMessageDs = ({
if (imageLow && youTubeId) {
return (
<MediaLink
- imageLeft={imageLeft}
+ $imageLeft={imageLeft}
aria-hidden="true"
tabIndex="-1"
href={youTubeId}
@@ -123,20 +123,20 @@ const SingleMessageDs = ({
};
return (
- <Container {...rest} imageLeft={imageLeft}>
+ <Container {...rest} $imageLeft={imageLeft}>
{hasLink()}
<Copy
- hasImage={imageLow}
- hasLink={link}
- backgroundColor={backgroundColor}
- imageLeft={imageLeft}
+ $hasImage={imageLow}
+ $hasLink={link}
+ $backgroundColor={backgroundColor}
+ $imageLeft={imageLeft}
>
<Subtitle color={ctaBgColor} size="s" weight="bold" family="Montserrat">
{subtitle}
</Subtitle>
{children}
{link && (
- <CTA hasImage={imageLow}>
+ <CTA $hasImage={imageLow}>
<Link
rel={external}
color={ctaBgColor}
diff --git a/src/components/Molecules/SingleMessageDS/SingleMessageDs.md b/src/components/Molecules/SingleMessageDS/SingleMessageDs.md
deleted file mode 100644
index c1fbe8093..000000000
--- a/src/components/Molecules/SingleMessageDS/SingleMessageDs.md
+++ /dev/null
@@ -1,190 +0,0 @@
-# SingleMessageDs
-
-## Image align left and CTA are clickable and links user through to full conten
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import styled from 'styled-components';
-import spacing from '../../../theme/shared/spacing';
-
-const Title = styled(Text)`
- letter-spacing: 0.03em;
- text-transform: uppercase;
- margin: ${spacing('md')} 0;
- @media ${({ theme }) => theme.allBreakpoints('M')} {
- margin-bottom: ${spacing('m')};
- }
-`;
-<div
- style={{
- display: 'flex',
- padding: '4rem 0',
- background: '#E1E2E3',
- justifyContent: 'space-around',
- }}>
- <SingleMessageDs
- imageLeft={true}
- link='/home'
- linkLabel='Check out'
- backgroundColor='white'
- imageLow={defaultData.image}
- images={defaultData.images}
- imageAltText='Happy man going to work'
- subtitle="Subtitle"
- height='100%'
- youTubeId='faz0JeBB41M'
- >
- <Title tag="h4" color="grey_dark" size="xl" family="Anton" weight="normal">
- Heading Line 1 Heading Line 2
-
-
- Whatever you’ve got planned, the Sport Relief shop has everything you need
- to get you looking your best while you’re raising some cash. Also
- available in Sainsbury’s stores and online and in selected Argos stores.
-
-
-
;
-```
-
-## Image align right and CTA are clickable and links user through to full content
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import styled from 'styled-components';
-import spacing from '../../../theme/shared/spacing';
-
-const Title = styled(Text)`
- margin: ${spacing('md')} 0;
- @media ${({ theme }) => theme.allBreakpoints('M')} {
- margin-bottom: ${spacing('m')};
- }
-`;
-I am the title
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.js index 931e4c37f..c2f0758e9 100644 --- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.js +++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.js @@ -44,10 +44,10 @@ const ArticleTeaser = ({ const thisCampaignLogo = !isNewsTeaser && handleCampaignLogo(category); return ( -
-
-
- Heading Line 1 Heading Line 2
-
-
- Whatever you’ve got planned, the Sport Relief shop has everything you need
- to get you looking your best while you’re raising some cash. Also
- available in Sainsbury’s stores and online and in selected Argos stores.
-
-
-
;
-```
-
-## Image align with non CTA
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import styled from 'styled-components';
-import spacing from '../../../theme/shared/spacing';
-
-const Title = styled(Text)`
- margin: ${spacing('md')} 0;
- @media ${({ theme }) => theme.allBreakpoints('M')} {
- margin-bottom: ${spacing('m')};
- }
-`;
-
-
-
- Heading Line 1 Heading Line 2
-
-
- Whatever you’ve got planned, the Sport Relief shop has everything you need
- to get you looking your best while you’re raising some cash. Also
- available in Sainsbury’s stores and online and in selected Argos stores.
-
-
-
;
-```
-
-## Using the linkIcon prop (to display download icon)
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import styled from 'styled-components';
-import spacing from '../../../theme/shared/spacing';
-import Download from '../../Atoms/Icons/Download';
-
-
-
- Whatever you’ve got planned, the Sport Relief shop has everything you need
- to get you looking your best while you’re raising some cash. Also
- available in Sainsbury’s stores and online and in selected Argos stores.
-
-
-
;
-```
-
-## Video with no CTA
-
-```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
-import styled from 'styled-components';
-import spacing from '../../../theme/shared/spacing';
-import Download from '../../Atoms/Icons/Download';
-
-
-
-
- Some text and stuff.
-
-
-
;
-```
diff --git a/src/components/Molecules/SingleMessageDS/SingleMessageDs.style.js b/src/components/Molecules/SingleMessageDS/SingleMessageDs.style.js
index 5e42026ec..4753c869b 100644
--- a/src/components/Molecules/SingleMessageDS/SingleMessageDs.style.js
+++ b/src/components/Molecules/SingleMessageDS/SingleMessageDs.style.js
@@ -9,10 +9,10 @@ const Container = styled.div`
position: relative;
flex-direction: column;
justify-content: space-around;
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+ background: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)};
@media ${({ theme }) => theme.allBreakpoints('M')} {
- flex-direction: ${({ imageLeft }) => (imageLeft ? 'row' : 'row-reverse')};
+ flex-direction: ${({ $imageLeft }) => ($imageLeft ? 'row' : 'row-reverse')};
}
`;
@@ -32,7 +32,7 @@ const Image = styled.div`
`;
const MediaLink = styled.a`
- ${({ imageLeft }) => (imageLeft
+ ${({ $imageLeft }) => ($imageLeft
? `margin-right: ${spacing('m')}`
: `margin-left: ${spacing('m')}`)};
@@ -70,7 +70,7 @@ const CloseButton = styled.button`
overflow: hidden;
border: none;
background: transparent;
- :before {
+ &:before {
content: '';
position: absolute;
height: 2px;
@@ -83,7 +83,7 @@ const CloseButton = styled.button`
margin-top: -6px;
transform: rotate(45deg);
}
- :after {
+ &:after {
content: '';
position: absolute;
height: 2px;
@@ -108,7 +108,7 @@ const CTA = styled.div`
}
@media ${({ theme }) => theme.allBreakpoints('M')} {
- ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`}
+ ${({ $hasImage }) => !$hasImage && `bottom: -${spacing('m')};`}
}
`;
@@ -121,11 +121,11 @@ const Copy = styled.div`
flex-direction: column;
border-radius: 1rem;
${defaultBoxShadow()}
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+ background: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)};
- ${({ hasLink }) => hasLink && `padding-bottom: calc(${spacing('l')} + ${spacing('m')})`};
+ ${({ $hasLink }) => $hasLink && `padding-bottom: calc(${spacing('l')} + ${spacing('m')})`};
- ${({ imageLeft }) => (imageLeft
+ ${({ $imageLeft }) => ($imageLeft
? `margin: -${spacing('m')} 0 ${spacing('m')} ${spacing('m')}; ${CTA} { right: ${spacing('m')};}`
: `margin: -${spacing('m')} ${spacing('m')} ${spacing('m')} 0; ${CTA} { left: ${spacing('m')};}`
)};
@@ -140,9 +140,9 @@ const Copy = styled.div`
flex-basis: calc(50% + 1.5rem);
padding: ${spacing('l')};
- ${({ hasLink }) => hasLink && `padding-bottom: calc(${spacing('l')} + ${spacing('m')})`};
+ ${({ $hasLink }) => $hasLink && `padding-bottom: calc(${spacing('l')} + ${spacing('m')})`};
- ${({ imageLeft }) => (imageLeft
+ ${({ $imageLeft }) => ($imageLeft
? `margin: ${spacing('l')} 0 ${spacing('m')} -${spacing('m')}`
: `margin: ${spacing('l')} -${spacing('m')} ${spacing('m')} 0`)};
}
@@ -150,9 +150,9 @@ const Copy = styled.div`
@media ${({ theme }) => theme.allBreakpoints('XL')} {
padding: calc(${spacing('m')} * 2);
- ${({ hasLink }) => hasLink && `padding-bottom: calc(${spacing('m')} * 3)`};
+ ${({ $hasLink }) => $hasLink && `padding-bottom: calc(${spacing('m')} * 3)`};
- margin: ${({ imageLeft }) => (imageLeft
+ margin: ${({ $imageLeft }) => ($imageLeft
? `${spacing('l')} 0 ${spacing('m')} -${spacing('l')}`
: `${spacing('l')} -${spacing('l')} ${spacing('m')} 0`)};
}
diff --git a/src/components/Molecules/SingleMessageDS/SingleMessageDs.test.js b/src/components/Molecules/SingleMessageDS/SingleMessageDs.test.js
index 7a4b2a1c6..a128ddc83 100644
--- a/src/components/Molecules/SingleMessageDS/SingleMessageDs.test.js
+++ b/src/components/Molecules/SingleMessageDS/SingleMessageDs.test.js
@@ -4,7 +4,7 @@ import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
import SingleMessageDs from './SingleMessageDs';
import Text from '../../Atoms/Text/Text';
import Download from '../../Atoms/Icons/Download';
-import { defaultData } from '../../../styleguide/data/data';
+import { defaultData } from '../../../data/data';
it('renders correctly', () => {
const tree = renderWithTheme(
Image align left and CTA are clickable and links user through to full conten
+Image align right and CTA are clickable and links user through to full content
+Image align with non CTA
+Using the linkIcon prop (to display download icon)
+
+
+ Whatever you've got planned, the Sport Relief shop has everything you need
+ to get you looking your best while you're raising some cash. Also
+ available in Sainsbury's stores and online and in selected Argos stores.
+
+
+
+ Video with no CTA
+
+
+
+ Some text and stuff.
+
+
+
+ Default Video Banner (autoplay, no loop, no poster re-show)
+Looping Video Banner With Controls (autoplay, loop)
+Non-autoplay Video Banner (reshows poster image after playing)
+
+
- `);
+ our use of cookies
+
+ Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about
+
-
- Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about
-
- our use of cookies
-
- . We also use optional cookies for marketing purposes:
-
-
- Accept
-
- Or click
-
- here
-
- to deny these.
-
+ + Accept + + Or click + + here + + to deny these. +
+Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button and 'no top padding' option
+Form align left, with custom message after choosing an "Other amount" to donate, high value cart, and 'no bottom padding' option
+Single Giving, with 'no padding' option
+Single Giving "No Money Buys"
+Single Giving "No Money Buys" with overridden manual input value
+Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button, with overridden manual input value
+Form align left, with custom message after choosing an "Other amount" to donate, high value cart.
+Form align right, but no copy, so ACTUALLY centre-aligns
+Form align left - no subtitle
+Single Giving - no subtitle
+Single Giving "No Money Buys"
+Single Giving "No Money Buys", no background image, blue background; overriding 'choose amount' text
+Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries, red background
+Additional copy for BOTH giving types
+Additional copy for monthly only
+Additional copy for single only
+Default monthly giving type
+Monthly ONLY
+Monthly ONLY, no moneybuys
+Monthly 'Choose Amount' and 'Other Amount' copy overrides
+Monthly Title and Subtitle overrides
+All monthly overrides
+