-
+export const StarRatingBlockComponent = ({
+ rating,
+ size,
+ isInStarRatingVariant,
+}: Props) => (
+
+ {isInStarRatingVariant ? (
+
+ ) : (
+
+ )}
);
diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.tsx
index 95b53399b8e..2b6b18d3185 100644
--- a/dotcom-rendering/src/components/StaticFeatureTwo.tsx
+++ b/dotcom-rendering/src/components/StaticFeatureTwo.tsx
@@ -16,6 +16,7 @@ type Props = {
serverTime?: number;
aspectRatio: AspectRatio;
collectionId: number;
+ isInStarRatingVariant?: boolean;
};
/**
@@ -31,6 +32,7 @@ export const StaticFeatureTwo = ({
imageLoading,
aspectRatio,
collectionId,
+ isInStarRatingVariant,
}: Props) => {
const cards = trails.slice(0, 2);
return (
@@ -81,6 +83,8 @@ export const StaticFeatureTwo = ({
isNewsletter={card.isNewsletter}
showQuotes={card.showQuotedHeadline}
showVideo={card.showVideo}
+ isInStarRatingVariant={isInStarRatingVariant}
+ starRatingSize={'medium'}
/>
);
diff --git a/dotcom-rendering/src/components/StaticMediumFour.tsx b/dotcom-rendering/src/components/StaticMediumFour.tsx
index 470f607208d..116bb77c8a7 100644
--- a/dotcom-rendering/src/components/StaticMediumFour.tsx
+++ b/dotcom-rendering/src/components/StaticMediumFour.tsx
@@ -32,6 +32,7 @@ type Props = {
showImage?: boolean;
aspectRatio: AspectRatio;
containerLevel?: DCRContainerLevel;
+ isInStarRatingVariant?: boolean;
};
export const StaticMediumFour = ({
@@ -43,6 +44,7 @@ export const StaticMediumFour = ({
showImage = true,
aspectRatio,
containerLevel = 'Primary',
+ isInStarRatingVariant,
}: Props) => {
const cards = trails.slice(0, 4);
@@ -84,6 +86,7 @@ export const StaticMediumFour = ({
!isMediaCard(card.format))
}
canPlayInline={false}
+ isInStarRatingVariant={isInStarRatingVariant}
/>
);
diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
index 4ba32f48d95..28ebfcace7c 100644
--- a/dotcom-rendering/src/frontend/schemas/feArticle.json
+++ b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -3385,6 +3385,7 @@
"RatingSizeType": {
"enum": [
"large",
+ "medium",
"small"
],
"type": "string"
diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx
index 1ffc9067f0a..1e9869efc65 100644
--- a/dotcom-rendering/src/layouts/CommentLayout.tsx
+++ b/dotcom-rendering/src/layouts/CommentLayout.tsx
@@ -304,6 +304,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
const renderAds = canRenderAds(article);
+ const isInStarRatingVariant =
+ article.config.abTests.starRatingRedesignVariant === 'variant';
+
return (
<>
{isWeb && (
@@ -363,6 +366,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
format={format}
elements={article.mainMediaElements}
starRating={
+ !isInStarRatingVariant &&
format.design ===
ArticleDesign.Review &&
!isUndefined(article.starRating)
@@ -412,6 +416,10 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
article.webPublicationDateDeprecated
}
hasAvatar={!!avatarUrl}
+ isInStarRatingVariant={
+ isInStarRatingVariant
+ }
+ starRating={article.starRating}
/>
{/* BOTTOM */}
@@ -759,6 +767,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
serverTime={serverTime}
renderingTarget={renderingTarget}
webURL={article.webURL}
+ isInStarRatingVariant={isInStarRatingVariant}
/>
diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx
index a53e72c3afc..dc8f8a8c635 100644
--- a/dotcom-rendering/src/layouts/FrontLayout.tsx
+++ b/dotcom-rendering/src/layouts/FrontLayout.tsx
@@ -108,6 +108,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
isPaidContent,
pageId,
switches,
+ abTests,
},
editionId,
} = front;
@@ -137,6 +138,13 @@ export const FrontLayout = ({ front, NAV }: Props) => {
const contributionsServiceUrl = getContributionsServiceUrl(front);
+ /**
+ * We are running an 0% opt in test which replaces the Star Rating component with
+ * a refreshed design
+ */
+ const isInStarRatingVariant =
+ abTests.starRatingRedesignVariant === 'variant';
+
const fallbackAspectRatio = (collectionType: DCRContainerType) => {
switch (collectionType) {
case 'scrollable/feature':
@@ -180,6 +188,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
)}
frontId={front.pressedPage.id}
collectionId={0}
+ isInStarRatingVariant={isInStarRatingVariant}
/>
)
);
@@ -519,6 +528,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
collectionId={index + 1}
containerLevel={collection.containerLevel}
enableHls={switches.enableHlsWeb}
+ isInStarRatingVariant={
+ isInStarRatingVariant
+ }
/>
diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
index aa1da47d660..efdca55a82e 100644
--- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
@@ -309,6 +309,9 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
const renderAds = canRenderAds(article);
+ const isInStarRatingVariant =
+ article.config.abTests.starRatingRedesignVariant === 'variant';
+
return (
<>
{isWeb && (
@@ -360,6 +363,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
format={format}
elements={article.mainMediaElements}
starRating={
+ !isInStarRatingVariant &&
format.design === ArticleDesign.Review &&
!isUndefined(article.starRating)
? article.starRating
@@ -424,6 +428,10 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
webPublicationDateDeprecated={
article.webPublicationDateDeprecated
}
+ isInStarRatingVariant={
+ isInStarRatingVariant
+ }
+ starRating={article.starRating}
/>
@@ -506,6 +514,10 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
webPublicationDateDeprecated={
article.webPublicationDateDeprecated
}
+ isInStarRatingVariant={
+ isInStarRatingVariant
+ }
+ starRating={article.starRating}
/>
)}
@@ -840,6 +852,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
serverTime={serverTime}
renderingTarget={renderingTarget}
webURL={article.webURL}
+ isInStarRatingVariant={isInStarRatingVariant}
/>
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
index 2607452aef8..4bffeb8d5f8 100644
--- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -36,7 +36,7 @@ import { OnwardsUpper } from '../components/OnwardsUpper.importable';
import { Section } from '../components/Section';
import { SlotBodyEnd } from '../components/SlotBodyEnd.importable';
import { Standfirst } from '../components/Standfirst';
-import { StarRating } from '../components/StarRating/StarRating';
+import { StarRatingDeprecated } from '../components/StarRating/StarRatingDeprecated';
import { StickyBottomBanner } from '../components/StickyBottomBanner.importable';
import { SubMeta } from '../components/SubMeta';
import { SubNav } from '../components/SubNav.importable';
@@ -384,7 +384,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {