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,8 @@ type Props = {
 	webPublicationDateDeprecated: string;
 	hasAvatar?: boolean;
 	isMatch?: boolean;
+	starRating?: Rating;
+	isInStarRatingVariant?: boolean;
 };
 
 const topPadding = css`
@@ -121,15 +126,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 +141,7 @@ const headlineFont = (format: ArticleFormat) => {
 
 const invertedFontLineHeight = css`
 	line-height: 2.1875rem;
+
 	${from.tablet} {
 		line-height: 2.625rem;
 	}
@@ -146,6 +150,7 @@ const invertedFontLineHeight = css`
 const labsFont = css`
 	${textSansBold28};
 	line-height: 2rem;
+
 	${from.tablet} {
 		${textSansBold34};
 		line-height: 2.375rem;
@@ -155,6 +160,7 @@ const labsFont = css`
 const labsGalleryFont = css`
 	${textSansBold34};
 	line-height: 2.1875rem;
+
 	${from.desktop} {
 		${textSansBold34};
 		font-size: 50px;
@@ -166,6 +172,7 @@ const jumboLabsFont = css`
 	${textSansBold34};
 	font-size: 3.125rem;
 	line-height: 3.5rem;
+
 	${until.desktop} {
 		${textSansBold34};
 		line-height: 2.375rem;
@@ -203,12 +210,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 +252,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 +270,7 @@ const immersiveWrapper = css`
         box that extends the black background to the right
     */
 	z-index: ${getZIndex('articleHeadline')};
+
 	${until.mobileLandscape} {
 		margin-right: 40px;
 	}
@@ -352,6 +366,7 @@ const decideBottomPadding = ({
 					if (format.display === ArticleDisplay.Showcase) {
 						return css`
 							padding-bottom: ${space[1]}px;
+
 							${from.tablet} {
 								padding-bottom: ${space[6]}px;
 							}
@@ -364,7 +379,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;
 							}
@@ -383,7 +399,8 @@ const decideBottomPadding = ({
 					return hasAvatar
 						? ''
 						: css`
-								padding-bottom: 28px;
+								padding-bottom: ${space[5]}px;
+
 								${from.tablet} {
 									padding-bottom: ${space[9]}px;
 								}
@@ -396,7 +413,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 +430,8 @@ export const ArticleHeadline = ({
 	webPublicationDateDeprecated,
 	hasAvatar,
 	isMatch,
+	starRating,
+	isInStarRatingVariant,
 }: Props) => {
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
@@ -496,6 +515,14 @@ export const ArticleHeadline = ({
 									{headlineString}
 								</span>
 							</h1>
+							{!isUndefined(starRating) &&
+								isInStarRatingVariant && (
+									<StarRating
+										rating={starRating}
+										paddingSize={'large'}
+										size={'large'}
+									/>
+								)}
 						</WithAgeWarning>
 					);
 			}
@@ -572,6 +599,14 @@ export const ArticleHeadline = ({
 								>
 									{headlineString}
 								</h1>
+								{!isUndefined(starRating) &&
+									isInStarRatingVariant && (
+										<StarRating
+											rating={starRating}
+											paddingSize={'medium'}
+											size={'large'}
+										/>
+									)}
 							</WithAgeWarning>
 						</div>
 					);

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

@@ -9,7 +9,7 @@ import {
 	Pillar,
 } from '../lib/articleFormat';
 import { Caption } from './Caption';
-import { StarRating } from './StarRating/StarRating';
+import { StarRatingDeprecated } from './StarRating/StarRatingDeprecated';
 
 const meta = {
 	component: Caption,
@@ -191,7 +191,7 @@ export const WhenOverlaidWithStars = {
 						color: ${palette.neutral[7]};
 					`}
 				>
-					<StarRating rating={3} size="large" />
+					<StarRatingDeprecated rating={3} size="large" />
 				</div>
 			</>
 		),

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

@@ -22,7 +22,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,
@@ -50,6 +50,7 @@ import { SlideshowCarousel } from '../SlideshowCarousel.importable';
 import { Snap } from '../Snap';
 import { SnapCssSandbox } from '../SnapCssSandbox';
 import { StarRating } from '../StarRating/StarRating';
+import { StarRatingDeprecated } from '../StarRating/StarRatingDeprecated';
 import type { Alignment } from '../SupportingContent';
 import { SupportingContent } from '../SupportingContent';
 import { SvgMediaControlsPlay } from '../SvgMediaControlsPlay';
@@ -163,6 +164,8 @@ export type Props = {
 	/** Determines if the headline should be positioned within the content or outside the content */
 	headlinePosition?: 'inner' | 'outer';
 	enableHls?: boolean;
+	isInStarRatingVariant?: boolean;
+	starRatingSize?: RatingSizeType;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -184,7 +187,7 @@ const StarRatingComponent = ({
 	cardHasImage: boolean;
 }) => (
 	<div css={starWrapper(cardHasImage)}>
-		<StarRating rating={rating} size="small" />
+		<StarRatingDeprecated rating={rating} size="small" />
 	</div>
 );
 
@@ -421,6 +424,8 @@ export const Card = ({
 	headlinePosition = 'inner',
 	subtitleSize = 'small',
 	enableHls = false,
+	isInStarRatingVariant,
+	starRatingSize = 'small',
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -908,12 +913,18 @@ export const Card = ({
 						showByline={showByline}
 						isExternalLink={isExternalLink}
 					/>
-					{!isUndefined(starRating) ? (
-						<StarRatingComponent
-							rating={starRating}
-							cardHasImage={!!image}
-						/>
-					) : null}
+					{!isUndefined(starRating) &&
+						(isInStarRatingVariant ? (
+							<StarRating
+								rating={starRating}
+								size={starRatingSize}
+							/>
+						) : (
+							<StarRatingComponent
+								rating={starRating}
+								cardHasImage={!!image}
+							/>
+						))}
 				</div>
 			)}
 
@@ -1237,12 +1248,19 @@ export const Card = ({
 											: undefined
 									}
 								/>
-								{!isUndefined(starRating) ? (
-									<StarRatingComponent
-										rating={starRating}
-										cardHasImage={!!image}
-									/>
-								) : null}
+
+								{!isUndefined(starRating) &&
+									(isInStarRatingVariant ? (
+										<StarRating
+											rating={starRating}
+											size={starRatingSize}
+										/>
+									) : (
+										<StarRatingComponent
+											rating={starRating}
+											cardHasImage={!!image}
+										/>
+									))}
 							</HeadlineWrapper>
 						)}
 

dotcom-rendering/src/components/Carousel.importable.tsx

@@ -45,6 +45,7 @@ type Props = {
 	discussionApiUrl: string;
 	serverTime?: number;
 	renderingTarget: RenderingTarget;
+	isInStarRatingVariant?: boolean;
 };
 
 type ArticleProps = Props & {
@@ -464,6 +465,7 @@ type CarouselCardProps = {
 	onwardsSource?: OnwardsSource;
 	containerType?: DCRContainerType;
 	starRating?: StarRating;
+	isInStarRatingVariant?: boolean;
 };
 
 const CarouselCard = ({
@@ -486,6 +488,7 @@ const CarouselCard = ({
 	serverTime,
 	starRating,
 	index,
+	isInStarRatingVariant,
 }: CarouselCardProps) => {
 	const cardImagePosition = isOnwardContent ? 'bottom' : 'top';
 
@@ -533,6 +536,7 @@ const CarouselCard = ({
 				showTopBarDesktop={!isOnwardContent}
 				showTopBarMobile={!isOnwardContent}
 				aspectRatio={'5:4'}
+				isInStarRatingVariant={isInStarRatingVariant}
 			/>
 		</LI>
 	);
@@ -753,6 +757,7 @@ export const Carousel = ({
 	isOnwardContent = true,
 	serverTime,
 	renderingTarget,
+	isInStarRatingVariant,
 	...props
 }: ArticleProps | FrontProps) => {
 	const carouselRef = useRef<HTMLUListElement>(null);
@@ -990,6 +995,9 @@ export const Carousel = ({
 									discussionApiUrl={discussionApiUrl}
 									isOnwardContent={isOnwardContent}
 									starRating={starRating}
+									isInStarRatingVariant={
+										isInStarRatingVariant
+									}
 								/>
 							);
 						})}