Update to rollback newslettersignup card we are not going to implement it yet

Author: gustavo-olmedo

dotcom-rendering/src/components/NewsletterSignupCard.tsx

@@ -4,7 +4,7 @@ import {
 	headlineMedium20,
 	space,
 	textSans14,
-	textSans15,
+	textSansBold15,
 } from '@guardian/source/foundations';
 import { SvgNewsletterFilled } from '@guardian/source/react-components';
 import { palette as themePalette } from '../palette';
@@ -14,8 +14,6 @@ export type NewsletterSignupCardProps = {
 	frequency: string;
 	description: string;
 	illustrationSquare?: string;
-	illustrationAlt?: string;
-	hideIllustrationFromScreenReaders?: boolean;
 	children?: React.ReactNode;
 	isSignedIn?: boolean | 'Pending';
 	isModal?: boolean;
@@ -24,7 +22,7 @@ export type NewsletterSignupCardProps = {
 const containerStyles = css`
 	clear: left;
 	background-color: ${themePalette('--newsletter-card-background')};
-	padding: ${space[3]}px ${space[3]}px ${space[4]}px ${space[3]}px;
+	padding: ${space[2]}px ${space[3]}px ${space[4]}px ${space[3]}px;
 `;
 
 const dividerStyles = css`
@@ -57,34 +55,64 @@ const titleStyles = css`
 const frequencyTagStyles = css`
 	display: flex;
 	align-items: center;
+	gap: 6px;
 	color: ${themePalette('--newsletter-card-frequency-tag')};
-	${textSans15};
-	margin-left: -1px;
-	margin-top: -1px;
-	margin-bottom: ${space[1]}px;
+	${textSansBold15};
+	margin-bottom: ${space[2]}px;
+`;
+
+const frequencyTextStyles = css`
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: ${space[1]}px;
+`;
+
+const frequencyLabelStyles = css`
+	white-space: nowrap;
+`;
+
+const badgeStyles = css`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	background-color: ${themePalette('--newsletter-card-badge-background')};
 
 	svg {
-		fill: currentColor;
-		height: 20px;
-		width: 20px;
+		fill: ${themePalette('--newsletter-card-badge-icon')};
+		height: 18px;
+		width: 18px;
 	}
 `;
 
+const innerDividerStyles = css`
+	border: none;
+	border-top: 1px solid ${themePalette('--newsletter-card-divider')};
+	margin: 0 -${space[3]}px ${space[2]}px;
+`;
+
 const descriptionStyles = css`
 	${textSans14};
 	line-height: 1.15;
-	margin-bottom: ${space[2]}px;
 	clear: both;
 	color: ${themePalette('--newsletter-card-description')};
 `;
 
 const illustrationStyles = css`
 	flex-shrink: 0;
-	width: 90px;
-	height: 90px;
+	width: 70px;
+	height: 70px;
 	border-radius: 50%;
 	object-fit: cover;
 
+	${from.mobileMedium} {
+		width: 90px;
+		height: 90px;
+	}
+
 	${from.tablet} {
 		width: 100px;
 		height: 100px;
@@ -94,39 +122,42 @@ const illustrationStyles = css`
 const NewsletterSignupHeader = (
 	props: Omit<NewsletterSignupCardProps, 'children'>,
 ) => (
-	<div css={headerStyles}>
-		<div css={titleAndMetaStyles}>
-			<div css={frequencyTagStyles}>
+	<>
+		<div css={frequencyTagStyles}>
+			<span css={badgeStyles}>
 				<SvgNewsletterFilled />
-				Free newsletter | {props.frequency}
+			</span>
+			<span css={frequencyTextStyles}>
+				<span css={frequencyLabelStyles}>Free newsletter |</span>
+				<span css={frequencyLabelStyles}>{props.frequency}</span>
+			</span>
+		</div>
+		<hr css={innerDividerStyles} />
+		<div css={headerStyles}>
+			<div css={titleAndMetaStyles}>
+				<p css={titleStyles}>
+					Sign up to <span>{props.name}</span>
+				</p>
+				<p css={descriptionStyles}>{props.description}</p>
 			</div>
-			<p css={titleStyles}>
-				Sign up to <span>{props.name}</span>
-			</p>
-			<p css={descriptionStyles}>{props.description}</p>
+			{!!props.illustrationSquare && (
+				<img
+					css={illustrationStyles}
+					src={props.illustrationSquare}
+					alt=""
+					loading="lazy"
+					decoding="async"
+				/>
+			)}
 		</div>
-		{!!props.illustrationSquare && (
-			<img
-				css={illustrationStyles}
-				src={props.illustrationSquare}
-				alt={props.illustrationAlt ?? ''}
-				aria-hidden={
-					props.hideIllustrationFromScreenReaders || undefined
-				}
-				loading="lazy"
-				decoding="async"
-			/>
-		)}
-	</div>
+	</>
 );
 
 export const NewsletterSignupCard = ({
 	name,
 	frequency,
 	description,
 	illustrationSquare,
-	illustrationAlt,
-	hideIllustrationFromScreenReaders,
 	children,
 	isSignedIn,
 	isModal = false,
@@ -138,10 +169,6 @@ export const NewsletterSignupCard = ({
 				name={name}
 				description={description}
 				illustrationSquare={illustrationSquare}
-				illustrationAlt={illustrationAlt}
-				hideIllustrationFromScreenReaders={
-					hideIllustrationFromScreenReaders
-				}
 				isSignedIn={isSignedIn}
 			/>
 			{children}

dotcom-rendering/src/components/PuzzlesSupporting.tsx

@@ -302,8 +302,9 @@ export const PuzzlesSupporting = ({
 								illustrationSquare={
 									newsletter.illustrationSquare
 								}
-								illustrationAlt={`${newsletter.name} newsletter illustration`}
-								hideIllustrationFromScreenReaders={true}
+								// TODO hide ilustrations when we implement this
+								// illustrationAlt={`${newsletter.name} newsletter illustration`}
+								// hideIllustrationFromScreenReaders={true}
 								isModal={true}
 								name={newsletter.name}
 							>