Skip to content

Commit ce65fb6

Browse files
deedeehdeedeeh
committed
Create CallToActionAtom component
1 parent e6768f6 commit ce65fb6

4 files changed

Lines changed: 264 additions & 94 deletions

File tree

‎dotcom-rendering/src/components/CallToActionAtom.stories.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { palette as sourcePalette } from '@guardian/source/foundations';
2+
import { CallToActionAtom } from './CallToActionAtom';
3+
4+
export default {
5+
component: CallToActionAtom,
6+
title: 'Components/CallToActionAtom',
7+
};
8+
9+
export const Default = () => {
10+
return (
11+
<CallToActionAtom
12+
ctaLinkURL="Link URL"
13+
ctaBackgroundImage="Image URL"
14+
ctaText="This is a call to action"
15+
ctaButtonText="Learn more"
16+
accentColour={sourcePalette.brand[400]}
17+
/>
18+
);
19+
};
20+
21+
Default.storyName = 'default';

‎dotcom-rendering/src/components/CallToActionAtom.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { css } from '@emotion/react';
2+
import { Button, SvgExternal } from '@guardian/source/react-components';
3+
4+
type Props = {
5+
ctaLinkURL: string;
6+
ctaBackgroundImage: string;
7+
ctaText: string;
8+
ctaButtonText: string;
9+
accentColour: string;
10+
};
11+
12+
export const CallToActionAtom = ({
13+
ctaLinkURL,
14+
ctaBackgroundImage,
15+
ctaText,
16+
ctaButtonText,
17+
accentColour,
18+
}: Props) => {
19+
return (
20+
<div
21+
css={css`
22+
background-image: url(${ctaBackgroundImage});
23+
`}
24+
>
25+
<a
26+
href={ctaLinkURL}
27+
css={css`
28+
text-decoration: none;
29+
`}
30+
>
31+
<h2>{ctaText}</h2>
32+
<Button
33+
iconSide="right"
34+
size="small"
35+
icon={<SvgExternal />}
36+
cssOverrides={css`
37+
background-color: ${accentColour};
38+
`}
39+
>
40+
{ctaButtonText}
41+
</Button>
42+
</a>
43+
</div>
44+
);
45+
};

‎dotcom-rendering/src/layouts/HostedArticleLayout.tsx‎

Lines changed: 104 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
palette as sourcePalette,
55
space,
66
} from '@guardian/source/foundations';
7+
import { CallToActionAtom } from '../components/CallToActionAtom';
78
import { HostedContentHeader } from '../components/HostedContentHeader';
89
import { Island } from '../components/Island';
910
import { Section } from '../components/Section';
@@ -76,67 +77,118 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
7677
</Section>
7778
</Stuck>
7879
) : null}
79-
<main>
80-
<header css={[grid.container, border]}>
80+
<div
81+
css={css`
82+
margin: 0 auto;
83+
84+
${from.desktop} {
85+
max-width: 980px;
86+
}
87+
88+
${from.leftCol} {
89+
max-width: 1140px;
90+
}
91+
92+
${from.wide} {
93+
max-width: 1300px;
94+
}
95+
`}
96+
>
97+
<main>
98+
<header css={[grid.container, border]}>
99+
<div
100+
css={[
101+
grid.column.all,
102+
css`
103+
min-height: 200px;
104+
`,
105+
]}
106+
>
107+
Main media
108+
</div>
109+
<div
110+
css={[
111+
grid.between('centre-column-start', 'grid-end'),
112+
]}
113+
>
114+
{/** @todo Use ArticleHeadline component */}
115+
{headline}
116+
</div>
117+
</header>
81118
<div
82119
css={[
83-
grid.column.all,
120+
grid.container,
84121
css`
85-
min-height: 200px;
122+
padding-top: ${space[12]}px;
123+
padding-bottom: ${space[9]}px;
124+
125+
${from.leftCol} {
126+
padding-top: ${space[5]}px;
127+
}
86128
`,
87129
]}
88130
>
89-
Main media
90-
</div>
91-
<div
92-
css={[grid.between('centre-column-start', 'grid-end')]}
93-
>
94-
{/** @todo Use ArticleHeadline component */}
95-
{headline}
131+
<div css={shareButtonWrapper}>
132+
<div data-print-layout="hide" css={metaFlex}>
133+
{props.renderingTarget === 'Web' && (
134+
<Island
135+
priority="feature"
136+
defer={{ until: 'visible' }}
137+
>
138+
<ShareButton
139+
pageId={pageId}
140+
webTitle={webTitle}
141+
format={format}
142+
context="ArticleMeta"
143+
/>
144+
</Island>
145+
)}
146+
</div>
147+
</div>
148+
<div css={[grid.column.right, 'grid-row: 1']}>
149+
Onward content
150+
</div>
151+
<div css={[border, grid.column.centre, 'grid-row: 1']}>
152+
{standfirst}
153+
</div>
154+
<div css={[border, grid.column.centre]}>Meta</div>
155+
<article css={[border, grid.column.centre]}>
156+
Body
157+
</article>
96158
</div>
97-
</header>
98-
<div
99-
css={[
100-
grid.container,
101-
css`
102-
padding-top: ${space[12]}px;
159+
</main>
160+
<footer>
161+
{props.renderingTarget === 'Web' ? (
162+
<div
163+
css={[
164+
grid.container,
165+
border,
166+
css`
167+
height: 200px;
103168
104-
${from.leftCol} {
105-
padding-top: ${space[5]}px;
106-
}
107-
`,
108-
]}
109-
>
110-
<div css={shareButtonWrapper}>
111-
<div data-print-layout="hide" css={metaFlex}>
112-
{props.renderingTarget === 'Web' && (
113-
<Island
114-
priority="feature"
115-
defer={{ until: 'visible' }}
116-
>
117-
<ShareButton
118-
pageId={pageId}
119-
webTitle={webTitle}
120-
format={format}
121-
context="ArticleMeta"
122-
/>
123-
</Island>
124-
)}
169+
${from.tablet} {
170+
height: 250px;
171+
}
172+
173+
${from.desktop} {
174+
height: 300px;
175+
}
176+
`,
177+
]}
178+
>
179+
<div css={[grid.column.all]}>
180+
<CallToActionAtom
181+
ctaLinkURL="Link URL"
182+
ctaBackgroundImage="Image URL"
183+
ctaText="This is a call to action"
184+
ctaButtonText="Learn more"
185+
accentColour={sourcePalette.brand[400]}
186+
/>
187+
</div>
125188
</div>
126-
</div>
127-
<div css={[grid.column.right, 'grid-row: 1']}>
128-
Onward content
129-
</div>
130-
<div css={[border, grid.column.centre, 'grid-row: 1']}>
131-
{standfirst}
132-
</div>
133-
<div css={[border, grid.column.centre]}>Meta</div>
134-
<article css={[border, grid.column.centre]}>Body</article>
135-
</div>
136-
<div css={[grid.container, border]}>
137-
<div css={[grid.column.all]}>Footer</div>
138-
</div>
139-
</main>
189+
) : null}
190+
</footer>
191+
</div>
140192
</>
141193
);
142194
};

0 commit comments

Comments
 (0)