Render star rating on highlights card (#13104)

* Render star rating on highlights card * Remove double negation * Use isundefined from libs * reinstate highlights checks after testing
guardian · Jan 9, 2025 · 6b2a749 · 6b2a749
1 parent b4ea0b2
commit 6b2a749
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.stories.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.stories.tsx
@@ -92,3 +92,16 @@ export const WithLiveKicker: Story = {
 	parameters: {},
 	name: 'With Live Kicker',
 };
+
+export const WithStarRating: Story = {
+	args: {
+		format: {
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Standard,
+			theme: Pillar.Culture,
+		},
+		starRating: 4,
+	},
+	parameters: {},
+	name: 'With Star Rating',
+};
diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx
@@ -1,8 +1,10 @@
 import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
 import { between, from, until } from '@guardian/source/foundations';
 import { ArticleDesign, type ArticleFormat } from '../../lib/articleFormat';
 import { isMediaCard } from '../../lib/cardHelpers';
 import { palette } from '../../palette';
+import type { StarRating as Rating } from '../../types/content';
 import type { DCRFrontImage } from '../../types/front';
 import type { MainMedia } from '../../types/mainMedia';
 import { Avatar } from '../Avatar';
@@ -12,6 +14,7 @@ import type { Loading } from '../CardPicture';
 import { CardPicture } from '../CardPicture';
 import { FormatBoundary } from '../FormatBoundary';
 import { Icon } from '../MediaMeta';
+import { StarRating } from '../StarRating/StarRating';
 
 export type HighlightsCardProps = {
 	linkTo: string;
@@ -26,6 +29,7 @@ export type HighlightsCardProps = {
 	dataLinkName: string;
 	byline?: string;
 	isExternalLink: boolean;
+	starRating?: Rating;
 };
 
 const gridContainer = css`
@@ -37,6 +41,7 @@ const gridContainer = css`
 	gap: 8px;
 	grid-template-areas:
 		'headline 	headline'
+		'rating rating'
 		'media-icon image';
 
 	/* Applied word-break: break-word to prevent text overflow
@@ -121,6 +126,18 @@ const hoverStyles = css`
 	}
 `;
 
+const starWrapper = css`
+	background-color: ${palette('--star-rating-background')};
+	color: ${palette('--star-rating-fill')};
+	width: fit-content;
+	height: fit-content;
+	grid-area: rating;
+	${from.desktop} {
+		grid-area: media-icon;
+		align-self: flex-end;
+	}
+`;
+
 export const HighlightsCard = ({
 	linkTo,
 	format,
@@ -134,6 +151,7 @@ export const HighlightsCard = ({
 	dataLinkName,
 	byline,
 	isExternalLink,
+	starRating,
 }: HighlightsCardProps) => {
 	const showMediaIcon = isMediaCard(format);
 
@@ -169,6 +187,12 @@ export const HighlightsCard = ({
 					/>
 				</div>
 
+				{!isUndefined(starRating) ? (
+					<div css={starWrapper}>
+						<StarRating rating={starRating} size="small" />
+					</div>
+				) : null}
+
 				{!!mainMedia && showMediaIcon && (
 					<div css={mediaIcon}>
 						<Icon mediaType={mainMedia.type} />

diff --git a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx
@@ -262,6 +262,7 @@ export const ScrollableHighlights = ({ trails }: Props) => {
 								isExternalLink={trail.isExternalLink}
 								showQuotedHeadline={trail.showQuotedHeadline}
 								mainMedia={trail.mainMedia}
+								starRating={trail.starRating}
 							/>
 						</li>
 					);