Star rating redesign

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
 import {
 	between,
 	from,
@@ -28,10 +29,12 @@ import {
 } from '../lib/articleFormat';
 import { getZIndex } from '../lib/getZIndex';
 import { palette as themePalette } from '../palette';
+import type { StarRating as Rating } from '../types/content';
 import type { TagType } from '../types/tag';
 import { AgeWarning } from './AgeWarning';
 import { DesignTag } from './DesignTag';
 import { HeadlineByline } from './HeadlineByline';
+import { StarRating } from './StarRating/StarRating';
 
 type Props = {
 	headlineString: string;
@@ -41,6 +44,7 @@ type Props = {
 	webPublicationDateDeprecated: string;
 	hasAvatar?: boolean;
 	isMatch?: boolean;
+	starRating?: Rating;
 };
 
 const topPadding = css`
@@ -121,15 +125,13 @@ const headlineFont = (format: ArticleFormat) => {
 	if (format.design === ArticleDesign.Gallery) {
 		return css`
 			${decideMobileHeadlineFont(format)}
-
 			${from.desktop} {
 				${decideHeadlineFont(format)}
 			}
 		`;
 	}
 	return css`
 		${decideMobileHeadlineFont(format)}
-
 		${from.tablet} {
 			${decideHeadlineFont(format)}
 		}
@@ -138,6 +140,7 @@ const headlineFont = (format: ArticleFormat) => {
 
 const invertedFontLineHeight = css`
 	line-height: 2.1875rem;
+
 	${from.tablet} {
 		line-height: 2.625rem;
 	}
@@ -146,6 +149,7 @@ const invertedFontLineHeight = css`
 const labsFont = css`
 	${textSansBold28};
 	line-height: 2rem;
+
 	${from.tablet} {
 		${textSansBold34};
 		line-height: 2.375rem;
@@ -155,6 +159,7 @@ const labsFont = css`
 const labsGalleryFont = css`
 	${textSansBold34};
 	line-height: 2.1875rem;
+
 	${from.desktop} {
 		${textSansBold34};
 		font-size: 50px;
@@ -166,6 +171,7 @@ const jumboLabsFont = css`
 	${textSansBold34};
 	font-size: 3.125rem;
 	line-height: 3.5rem;
+
 	${until.desktop} {
 		${textSansBold34};
 		line-height: 2.375rem;
@@ -203,12 +209,15 @@ const immersiveStyles = css`
 	min-height: 112px;
 	padding-bottom: ${space[6]}px;
 	padding-left: ${space[1]}px;
+
 	${from.mobileLandscape} {
 		padding-left: ${space[3]}px;
 	}
+
 	${from.tablet} {
 		padding-left: ${space[1]}px;
 	}
+
 	margin-right: ${space[5]}px;
 `;
 
@@ -242,12 +251,15 @@ const immersiveWrapper = css`
         Make sure we vertically align the headline font with the body font
     */
 	margin-left: 6px;
+
 	${from.tablet} {
 		margin-left: 16px;
 	}
+
 	${from.leftCol} {
 		margin-left: 25px;
 	}
+
 	/*
         We need this grow to ensure the headline fills the main content column
     */
@@ -257,6 +269,7 @@ const immersiveWrapper = css`
         box that extends the black background to the right
     */
 	z-index: ${getZIndex('articleHeadline')};
+
 	${until.mobileLandscape} {
 		margin-right: 40px;
 	}
@@ -352,6 +365,7 @@ const decideBottomPadding = ({
 					if (format.display === ArticleDisplay.Showcase) {
 						return css`
 							padding-bottom: ${space[1]}px;
+
 							${from.tablet} {
 								padding-bottom: ${space[6]}px;
 							}
@@ -364,7 +378,8 @@ const decideBottomPadding = ({
 				case ArticleDesign.Review: {
 					if (format.display === ArticleDisplay.Showcase) {
 						return css`
-							padding-bottom: 28px;
+							padding-bottom: ${space[5]}px;
+
 							${from.tablet} {
 								padding-bottom: ${space[6]}px;
 							}
@@ -384,6 +399,7 @@ const decideBottomPadding = ({
 						? ''
 						: css`
 								padding-bottom: 28px;
+
 								${from.tablet} {
 									padding-bottom: ${space[9]}px;
 								}
@@ -396,7 +412,7 @@ const decideBottomPadding = ({
 const galleryStyles = css`
 	${grid.between('grid-start', 'centre-column-end')}
 
-	grid-row: 7/9;
+	grid-row: 7 / 9;
 	position: relative;
 
 	${from.tablet} {
@@ -413,6 +429,7 @@ export const ArticleHeadline = ({
 	webPublicationDateDeprecated,
 	hasAvatar,
 	isMatch,
+	starRating,
 }: Props) => {
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
@@ -496,6 +513,13 @@ export const ArticleHeadline = ({
 									{headlineString}
 								</span>
 							</h1>
+							{!isUndefined(starRating) && (
+								<StarRating
+									rating={starRating}
+									paddingSize={'large'}
+									size={'large'}
+								/>
+							)}
 						</WithAgeWarning>
 					);
 			}
@@ -572,6 +596,13 @@ export const ArticleHeadline = ({
 								>
 									{headlineString}
 								</h1>
+								{!isUndefined(starRating) && (
+									<StarRating
+										rating={starRating}
+										paddingSize={'medium'}
+										size={'large'}
+									/>
+								)}
 							</WithAgeWarning>
 						</div>
 					);

dotcom-rendering/src/components/Card/Card.tsx

@@ -1,12 +1,6 @@
 import { css } from '@emotion/react';
 import { isUndefined } from '@guardian/libs';
-import {
-	between,
-	from,
-	palette as sourcePalette,
-	space,
-	until,
-} from '@guardian/source/foundations';
+import { between, from, space, until } from '@guardian/source/foundations';
 import { Hide, Link, SvgCamera } from '@guardian/source/react-components';
 import {
 	ArticleDesign,
@@ -22,7 +16,7 @@ import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount';
 import { BETA_CONTAINERS } from '../../model/enhanceCollections';
 import { palette } from '../../palette';
 import type { Branding } from '../../types/branding';
-import type { StarRating as Rating } from '../../types/content';
+import type { StarRating as Rating, RatingSizeType } from '../../types/content';
 import type {
 	AspectRatio,
 	DCRContainerPalette,
@@ -163,31 +157,9 @@ export type Props = {
 	/** Determines if the headline should be positioned within the content or outside the content */
 	headlinePosition?: 'inner' | 'outer';
 	enableHls?: boolean;
+	starRatingSize?: RatingSizeType;
 };
 
-const starWrapper = (cardHasImage: boolean) => css`
-	background-color: ${sourcePalette.brandAlt[400]};
-	color: ${sourcePalette.neutral[0]};
-	margin-top: ${cardHasImage ? '2' : space[1]}px;
-	display: inline-block;
-
-	${from.tablet} {
-		margin-top: ${space[1]}px;
-	}
-`;
-
-const StarRatingComponent = ({
-	rating,
-	cardHasImage,
-}: {
-	rating: Rating;
-	cardHasImage: boolean;
-}) => (
-	<div css={starWrapper(cardHasImage)}>
-		<StarRating rating={rating} size="small" />
-	</div>
-);
-
 const waveformWrapper = (
 	mediaPositionOnMobile?: MediaPositionType,
 	mediaPositionOnDesktop?: MediaPositionType,
@@ -196,13 +168,16 @@ const waveformWrapper = (
 	left: 0;
 	right: 0;
 	bottom: 0;
+
 	svg {
 		display: block;
 		width: 100%;
 		height: ${mediaPositionOnMobile === 'top' ? 50 : 29}px;
+
 		${from.mobileMedium} {
 			height: ${mediaPositionOnMobile === 'top' ? 50 : 33}px;
 		}
+
 		${from.tablet} {
 			height: ${mediaPositionOnDesktop === 'top' ? 50 : 33}px;
 		}
@@ -216,12 +191,15 @@ const HorizontalDivider = () => (
 				border-top: 1px solid ${palette('--card-border-top')};
 				height: 1px;
 				width: 50%;
+
 				${from.tablet} {
 					width: 100px;
 				}
+
 				${from.desktop} {
 					width: 140px;
 				}
+
 				margin-top: ${space[3]}px;
 			}
 		`}
@@ -236,6 +214,7 @@ const podcastImageStyles = (
 		return css`
 			width: 69px;
 			height: 69px;
+
 			${from.tablet} {
 				width: 98px;
 				height: 98px;
@@ -249,11 +228,14 @@ const podcastImageStyles = (
 	return css`
 		width: 98px;
 		height: 98px;
+
 		${from.tablet} {
 			width: 120px;
 			height: 120px;
 		}
+
 		/** The image takes the full height on desktop, so that the waveform sticks to the bottom of the card. */
+
 		${from.desktop} {
 			width: ${isHorizontalOnDesktop ? 'unset' : '120px'};
 			height: ${isHorizontalOnDesktop ? 'unset' : '120px'};
@@ -421,6 +403,7 @@ export const Card = ({
 	headlinePosition = 'inner',
 	subtitleSize = 'small',
 	enableHls = false,
+	starRatingSize = 'small',
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -579,8 +562,8 @@ export const Card = ({
 
 	/**
 -	 * Media cards have contrasting background colours. We add additional
-	 * padding to these cards to keep the text readable.
--	 */
+* padding to these cards to keep the text readable.
+-     */
 	const isMediaCardOrNewsletter = isMediaCard(format) || isNewsletter;
 
 	const showPill = isMediaCardOrNewsletter && !isGallerySecondaryOnward;
@@ -845,6 +828,7 @@ export const Card = ({
 						${until.tablet} {
 							display: none;
 						}
+
 						${from.desktop} {
 							display: none;
 						}
@@ -909,10 +893,7 @@ export const Card = ({
 						isExternalLink={isExternalLink}
 					/>
 					{!isUndefined(starRating) ? (
-						<StarRatingComponent
-							rating={starRating}
-							cardHasImage={!!image}
-						/>
+						<StarRating rating={starRating} size="small" />
 					) : null}
 				</div>
 			)}
@@ -1237,9 +1218,9 @@ export const Card = ({
 									}
 								/>
 								{!isUndefined(starRating) ? (
-									<StarRatingComponent
+									<StarRating
 										rating={starRating}
-										cardHasImage={!!image}
+										size={starRatingSize}
 									/>
 								) : null}
 							</HeadlineWrapper>

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

@@ -35,6 +35,7 @@ const cardProps: CardProps = {
 	showClock: false,
 	imageSize: 'feature',
 	collectionId: 1,
+	starRatingSize: 'medium',
 };
 
 const aBasicLink = {