Add dummy data and refactor CTA

Author: deedeeh

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

@@ -1,4 +1,3 @@
-import { palette as sourcePalette } from '@guardian/source/foundations';
 import { CallToActionAtom } from './CallToActionAtom';
 
 export default {
@@ -9,11 +8,10 @@ export default {
 export const Default = () => {
 	return (
 		<CallToActionAtom
-			ctaLinkURL="Link URL"
-			ctaBackgroundImage="Image URL"
-			ctaText="This is a call to action"
+			ctaLinkURL="https://safety.epicgames.com/en-US?lang=en-US"
+			ctaBackgroundImage="https://media.guim.co.uk/7fe58f11470360bc9f1e4b6bbcbf45d7cf06cfcf/0_0_1300_375/1300.jpg"
+			ctaText="This is a call to action text"
 			ctaButtonText="Learn more"
-			accentColour={sourcePalette.brand[400]}
 		/>
 	);
 };

dotcom-rendering/src/components/CallToActionAtom.tsx

@@ -1,45 +1,85 @@
 import { css } from '@emotion/react';
+import {
+	from,
+	palette as sourcePalette,
+	textSansBold20,
+} from '@guardian/source/foundations';
 import { Button, SvgExternal } from '@guardian/source/react-components';
 
 type Props = {
 	ctaLinkURL: string;
 	ctaBackgroundImage: string;
 	ctaText: string;
 	ctaButtonText: string;
-	accentColour: string;
 };
 
 export const CallToActionAtom = ({
 	ctaLinkURL,
 	ctaBackgroundImage,
 	ctaText,
 	ctaButtonText,
-	accentColour,
 }: Props) => {
 	return (
-		<div
+		<a
+			href={ctaLinkURL}
 			css={css`
-				background-image: url(${ctaBackgroundImage});
+				text-decoration: none;
 			`}
 		>
-			<a
-				href={ctaLinkURL}
+			<picture
 				css={css`
-					text-decoration: none;
+					position: relative;
+					display: flex;
 				`}
 			>
-				<h2>{ctaText}</h2>
-				<Button
-					iconSide="right"
-					size="small"
-					icon={<SvgExternal />}
-					cssOverrides={css`
-						background-color: ${accentColour};
+				<img
+					src={ctaBackgroundImage}
+					alt={
+						'alt text'
+					} /* We need alt text here if it is included in the atom data otherwise we need to have a general description */
+					css={css`
+						height: 200px;
+						width: auto
+							/* This might not be necessary once we have the correct grid in place with article body data */
+							${from.tablet} {
+							height: 250px;
+						}
+						${from.leftCol} {
+							height: 375px;
+						}
+					`}
+				/>
+				<div
+					css={css`
+						position: absolute;
+						bottom: 10%;
+						left: 10%;
+						transform: translate(-10%, -10%);
 					`}
 				>
-					{ctaButtonText}
-				</Button>
-			</a>
-		</div>
+					<h2
+						css={css`
+							${textSansBold20}
+							margin-bottom: 8px;
+							color: white;
+						`}
+					>
+						{ctaText}
+					</h2>
+					<Button
+						iconSide="right"
+						size="small"
+						icon={<SvgExternal />}
+						theme={{
+							textPrimary: sourcePalette.neutral[7],
+							backgroundPrimary: sourcePalette.neutral[97],
+							backgroundPrimaryHover: sourcePalette.neutral[73],
+						}}
+					>
+						{ctaButtonText}
+					</Button>
+				</div>
+			</picture>
+		</a>
 	);
 };