Merge branch 'main' into ab/podcast-accent-image

.github/workflows/publish.yml

@@ -55,7 +55,7 @@ jobs:
 
       # All rendering apps deployment
       - name: Upload rendering apps to RiffRaff
-        uses: guardian/actions-riff-raff@v4
+        uses: guardian/actions-riff-raff@v4.1.2
         with:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
           roleArn: ${{ secrets.GU_RIFF_RAFF_ROLE_ARN }}

dotcom-rendering/package.json

@@ -41,7 +41,7 @@
 		"@guardian/bridget": "8.1.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "50.13.0",
-		"@guardian/commercial": "23.7.4",
+		"@guardian/commercial": "24.0.0",
 		"@guardian/core-web-vitals": "7.0.0",
 		"@guardian/eslint-config": "7.0.1",
 		"@guardian/eslint-config-typescript": "9.0.1",

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

@@ -850,6 +850,7 @@ export const Card = ({
 							/** If the card isn't large enough to have a kicker image then we use the podcast series image as the main media. Otherwise, use the trail image */
 							<>
 								{media.podcastImage.src && !showKickerImage ? (
+
 									<div css={[podcastImageStyles(imageSize)]}>
 										<CardPicture
 											mainImage={media.podcastImage.src}
@@ -1017,6 +1018,15 @@ export const Card = ({
 			</CardLayout>
 
 			<div
+				css={
+					/** If beta containers have liveblog links or sublink links in the outer position, we set flex-basis so that they sit below the image */
+					isBetaContainer &&
+					(liveUpdatesPosition === 'outer' ||
+						sublinkPosition === 'outer') &&
+					css`
+						flex-basis: 100%;
+					`
+				}
 				style={{
 					padding:
 						isMediaCard || isOnwardContent ? `0 ${space[2]}px` : 0,

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

@@ -135,12 +135,8 @@ export const ImageWrapper = ({
 	return (
 		<div
 			css={[
-				imageType === 'slideshow' &&
-					isHorizontalOnDesktop &&
-					flexBasisStyles({
-						imageSize,
-					}),
-				(imageType === 'picture' ||
+				(imageType === 'slideshow' ||
+					imageType === 'picture' ||
 					imageType === 'video' ||
 					imageType === 'podcast') &&
 					isHorizontalOnDesktop &&

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',
+};

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} />

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>
 					);