From adfee6aac3f6405e1db336d471af4efa69f567d7 Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Wed, 8 Jan 2025 11:10:37 +0000 Subject: [PATCH 1/4] Render star rating on highlights card --- .../Masthead/HighlightsCard.stories.tsx | 13 +++++++++++ .../components/Masthead/HighlightsCard.tsx | 23 +++++++++++++++++++ .../ScrollableHighlights.importable.tsx | 1 + 3 files changed, 37 insertions(+) diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.stories.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.stories.tsx index c81762453a1..fea6d68f065 100644 --- 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 index fb795e98487..58ec555a4c5 100644 --- a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx +++ b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx @@ -3,6 +3,7 @@ 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 +13,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 +28,7 @@ export type HighlightsCardProps = { dataLinkName: string; byline?: string; isExternalLink: boolean; + starRating?: Rating; }; const gridContainer = css` @@ -37,6 +40,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 +125,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 +150,7 @@ export const HighlightsCard = ({ dataLinkName, byline, isExternalLink, + starRating, }: HighlightsCardProps) => { const showMediaIcon = isMediaCard(format); @@ -169,6 +186,12 @@ export const HighlightsCard = ({ /> + {!!starRating ? ( +
+ +
+ ) : null} + {!!mainMedia && showMediaIcon && (
diff --git a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx index e4c4e3c3631..d86cf905048 100644 --- 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} /> ); From b2a6425c3fac98533c0c1d239b46c2889f44086a Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Wed, 8 Jan 2025 11:15:56 +0000 Subject: [PATCH 2/4] Remove double negation --- .../src/components/Masthead/HighlightsCard.tsx | 2 +- dotcom-rendering/src/layouts/FrontLayout.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx index 58ec555a4c5..da16bed977a 100644 --- a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx +++ b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx @@ -186,7 +186,7 @@ export const HighlightsCard = ({ />
- {!!starRating ? ( + {starRating ? (
diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx index 6bde73e2dcf..499c55ad899 100644 --- a/dotcom-rendering/src/layouts/FrontLayout.tsx +++ b/dotcom-rendering/src/layouts/FrontLayout.tsx @@ -151,7 +151,7 @@ export const FrontLayout = ({ front, NAV }: Props) => { const contributionsServiceUrl = getContributionsServiceUrl(front); - const { abTests, isPreview } = front.config; + // const { abTests, isPreview } = front.config; const { absoluteServerTimes = false } = front.config.switches; @@ -174,9 +174,9 @@ export const FrontLayout = ({ front, NAV }: Props) => { }; const Highlights = () => { - const showHighlights = - // Must be opted into the Europe beta test or in preview - abTests.europeBetaFrontVariant === 'variant' || isPreview; + const showHighlights = true; + // Must be opted into the Europe beta test or in preview + // abTests.europeBetaFrontVariant === 'variant' || isPreview; const highlightsCollection = front.pressedPage.collections.find(isHighlights); From d7b715299755ba377741d648d26d8562144ab7f5 Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Wed, 8 Jan 2025 11:21:35 +0000 Subject: [PATCH 3/4] Use isundefined from libs --- dotcom-rendering/src/components/Masthead/HighlightsCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx index da16bed977a..ad3a181f8b1 100644 --- a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx +++ b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx @@ -1,4 +1,5 @@ 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'; @@ -186,7 +187,7 @@ export const HighlightsCard = ({ /> - {starRating ? ( + {!isUndefined(starRating) ? (
From d1eb110b428b3e97cd87215952644fe2e1efa70c Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Wed, 8 Jan 2025 17:16:51 +0000 Subject: [PATCH 4/4] reinstate highlights checks after testing --- dotcom-rendering/src/layouts/FrontLayout.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx index 499c55ad899..6bde73e2dcf 100644 --- a/dotcom-rendering/src/layouts/FrontLayout.tsx +++ b/dotcom-rendering/src/layouts/FrontLayout.tsx @@ -151,7 +151,7 @@ export const FrontLayout = ({ front, NAV }: Props) => { const contributionsServiceUrl = getContributionsServiceUrl(front); - // const { abTests, isPreview } = front.config; + const { abTests, isPreview } = front.config; const { absoluteServerTimes = false } = front.config.switches; @@ -174,9 +174,9 @@ export const FrontLayout = ({ front, NAV }: Props) => { }; const Highlights = () => { - const showHighlights = true; - // Must be opted into the Europe beta test or in preview - // abTests.europeBetaFrontVariant === 'variant' || isPreview; + const showHighlights = + // Must be opted into the Europe beta test or in preview + abTests.europeBetaFrontVariant === 'variant' || isPreview; const highlightsCollection = front.pressedPage.collections.find(isHighlights);