diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index 285a7e84e8d..b199a6ecdff 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/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,7 +126,6 @@ const headlineFont = (format: ArticleFormat) => { if (format.design === ArticleDesign.Gallery) { return css` ${decideMobileHeadlineFont(format)} - ${from.desktop} { ${decideHeadlineFont(format)} } @@ -129,7 +133,6 @@ const headlineFont = (format: ArticleFormat) => { } 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} + {!isUndefined(starRating) && + isInStarRatingVariant && ( + + )} ); } @@ -572,6 +599,14 @@ export const ArticleHeadline = ({ > {headlineString} + {!isUndefined(starRating) && + isInStarRatingVariant && ( + + )} ); diff --git a/dotcom-rendering/src/components/Caption.stories.tsx b/dotcom-rendering/src/components/Caption.stories.tsx index b040632eb2e..cff0317cbcd 100644 --- a/dotcom-rendering/src/components/Caption.stories.tsx +++ b/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]}; `} > - + ), diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index de1f462892d..1f56131efbb 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/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; }) => (
- +
); @@ -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) ? ( - - ) : null} + {!isUndefined(starRating) && + (isInStarRatingVariant ? ( + + ) : ( + + ))} )} @@ -1237,12 +1248,19 @@ export const Card = ({ : undefined } /> - {!isUndefined(starRating) ? ( - - ) : null} + + {!isUndefined(starRating) && + (isInStarRatingVariant ? ( + + ) : ( + + ))} )} diff --git a/dotcom-rendering/src/components/Carousel.importable.tsx b/dotcom-rendering/src/components/Carousel.importable.tsx index f98175d8cbe..fe1723289cd 100644 --- a/dotcom-rendering/src/components/Carousel.importable.tsx +++ b/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} /> ); @@ -753,6 +757,7 @@ export const Carousel = ({ isOnwardContent = true, serverTime, renderingTarget, + isInStarRatingVariant, ...props }: ArticleProps | FrontProps) => { const carouselRef = useRef(null); @@ -990,6 +995,9 @@ export const Carousel = ({ discussionApiUrl={discussionApiUrl} isOnwardContent={isOnwardContent} starRating={starRating} + isInStarRatingVariant={ + isInStarRatingVariant + } /> ); })} diff --git a/dotcom-rendering/src/components/DecideContainer.tsx b/dotcom-rendering/src/components/DecideContainer.tsx index b6b23e098c3..a79dcb6b5cf 100644 --- a/dotcom-rendering/src/components/DecideContainer.tsx +++ b/dotcom-rendering/src/components/DecideContainer.tsx @@ -48,6 +48,7 @@ type Props = { collectionId: number; containerLevel?: DCRContainerLevel; enableHls?: boolean; + isInStarRatingVariant?: boolean; }; export const DecideContainer = ({ @@ -64,6 +65,7 @@ export const DecideContainer = ({ collectionId, containerLevel, enableHls = false, + isInStarRatingVariant, }: Props) => { switch (containerType) { case 'dynamic/fast': @@ -233,7 +235,11 @@ export const DecideContainer = ({ case 'scrollable/highlights': return ( - + ); case 'flexible/special': @@ -247,6 +253,7 @@ export const DecideContainer = ({ aspectRatio={aspectRatio} collectionId={collectionId} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} /> ); case 'flexible/general': @@ -261,6 +268,7 @@ export const DecideContainer = ({ containerLevel={containerLevel} collectionId={collectionId} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} /> ); case 'scrollable/small': @@ -274,6 +282,7 @@ export const DecideContainer = ({ serverTime={serverTime} aspectRatio={aspectRatio} sectionId={sectionId} + isInStarRatingVariant={isInStarRatingVariant} /> ); @@ -288,6 +297,7 @@ export const DecideContainer = ({ serverTime={serverTime} aspectRatio={aspectRatio} sectionId={sectionId} + isInStarRatingVariant={isInStarRatingVariant} /> ); @@ -300,6 +310,7 @@ export const DecideContainer = ({ serverTime={serverTime} imageLoading={imageLoading} aspectRatio={aspectRatio} + isInStarRatingVariant={isInStarRatingVariant} /> ); case 'scrollable/feature': @@ -312,6 +323,7 @@ export const DecideContainer = ({ serverTime={serverTime} aspectRatio={aspectRatio} collectionId={collectionId} + isInStarRatingVariant={isInStarRatingVariant} /> ); @@ -324,6 +336,7 @@ export const DecideContainer = ({ imageLoading={imageLoading} aspectRatio={aspectRatio} collectionId={collectionId} + isInStarRatingVariant={isInStarRatingVariant} /> ); default: diff --git a/dotcom-rendering/src/components/FeatureCard.stories.tsx b/dotcom-rendering/src/components/FeatureCard.stories.tsx index 3bccbb5c8cd..05ef5d974fe 100644 --- a/dotcom-rendering/src/components/FeatureCard.stories.tsx +++ b/dotcom-rendering/src/components/FeatureCard.stories.tsx @@ -35,6 +35,7 @@ const cardProps: CardProps = { showClock: false, imageSize: 'feature', collectionId: 1, + starRatingSize: 'medium', }; const aBasicLink = { diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx index 47b21d87a61..cb389c6a756 100644 --- a/dotcom-rendering/src/components/FeatureCard.tsx +++ b/dotcom-rendering/src/components/FeatureCard.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; +import { isUndefined } from '@guardian/libs'; import { from, palette as sourcePalette, @@ -17,7 +18,7 @@ import { getOphanComponents } from '../lib/labs'; import { transparentColour } from '../lib/transparentColour'; 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, @@ -41,6 +42,7 @@ import { FormatBoundary } from './FormatBoundary'; import { Island } from './Island'; import { Pill } from './Pill'; import { StarRating } from './StarRating/StarRating'; +import { StarRatingDeprecated } from './StarRating/StarRatingDeprecated'; import { SupportingContent } from './SupportingContent'; import { WaveForm } from './WaveForm'; import { YoutubeBlockComponent } from './YoutubeBlockComponent.importable'; @@ -359,6 +361,8 @@ export type Props = { */ isImmersive?: boolean; showVideo?: boolean; + isInStarRatingVariant?: boolean; + starRatingSize: RatingSizeType; }; export const FeatureCard = ({ @@ -394,6 +398,8 @@ export const FeatureCard = ({ isNewsletter = false, isImmersive = false, showVideo = false, + isInStarRatingVariant, + starRatingSize, }: Props) => { const hasSublinks = supportingContent && supportingContent.length > 0; @@ -634,14 +640,21 @@ export const FeatureCard = ({ /> - {starRating !== undefined ? ( -
+ {!isUndefined(starRating) && + (isInStarRatingVariant ? ( -
- ) : null} + ) : ( +
+ +
+ ))} {!!trailText && (
diff --git a/dotcom-rendering/src/components/FetchOnwardsData.importable.tsx b/dotcom-rendering/src/components/FetchOnwardsData.importable.tsx index 83c7ff7906a..52cb3d168da 100644 --- a/dotcom-rendering/src/components/FetchOnwardsData.importable.tsx +++ b/dotcom-rendering/src/components/FetchOnwardsData.importable.tsx @@ -31,6 +31,7 @@ type Props = { isAdFreeUser: boolean; containerPosition: string; webURL: string; + isInStarRatingVariant?: boolean; }; type OnwardsResponse = { @@ -72,6 +73,7 @@ export const FetchOnwardsData = ({ isAdFreeUser, containerPosition, webURL, + isInStarRatingVariant, }: Props) => { const [hasBeenSeen, setIsInViewRef] = useIsInView({ rootMargin: `-100px` }); @@ -136,6 +138,7 @@ export const FetchOnwardsData = ({ heading={data.heading || data.displayname} onwardsSource={onwardsSource} format={format} + isInStarRatingVariant={isInStarRatingVariant} /> ) : ( )}
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx index 89beb6584a8..ea1ad8d148e 100644 --- a/dotcom-rendering/src/components/FlexibleGeneral.tsx +++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx @@ -34,6 +34,7 @@ type Props = { containerLevel?: DCRContainerLevel; collectionId: number; enableHls?: boolean; + isInStarRatingVariant?: boolean; }; type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard'; @@ -88,6 +89,7 @@ type ImmersiveCardLayoutProps = { serverTime?: number; imageLoading: Loading; collectionId: number; + isInStarRatingVariant?: boolean; }; /** @@ -102,6 +104,7 @@ const ImmersiveCardLayout = ({ serverTime, imageLoading, collectionId, + isInStarRatingVariant, }: ImmersiveCardLayoutProps) => { const isLoopingVideo = card.mainMedia?.type === 'SelfHostedVideo' && @@ -140,6 +143,8 @@ const ImmersiveCardLayout = ({ supportingContent={card.supportingContent} isImmersive={true} showVideo={card.showVideo} + isInStarRatingVariant={isInStarRatingVariant} + starRatingSize={'medium'} /> @@ -251,6 +256,7 @@ type SplashCardLayoutProps = { containerLevel: DCRContainerLevel; collectionId: number; enableHls?: boolean; + isInStarRatingVariant?: boolean; }; const SplashCardLayout = ({ @@ -264,6 +270,7 @@ const SplashCardLayout = ({ containerLevel, collectionId, enableHls, + isInStarRatingVariant, }: SplashCardLayoutProps) => { const card = cards[0]; if (!card) return null; @@ -277,6 +284,7 @@ const SplashCardLayout = ({ serverTime={serverTime} imageLoading={imageLoading} collectionId={collectionId} + isInStarRatingVariant={isInStarRatingVariant} /> ); } @@ -348,6 +356,8 @@ const SplashCardLayout = ({ subtitleSize={subtitleSize} headlinePosition={card.showLivePlayable ? 'outer' : 'inner'} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} + starRatingSize={'medium'} /> @@ -414,6 +424,7 @@ type FullWidthCardLayoutProps = { containerLevel: DCRContainerLevel; collectionId: number; enableHls?: boolean; + isInStarRatingVariant?: boolean; }; const FullWidthCardLayout = ({ @@ -428,6 +439,7 @@ const FullWidthCardLayout = ({ containerLevel, collectionId, enableHls, + isInStarRatingVariant, }: FullWidthCardLayoutProps) => { const card = cards[0]; if (!card) return null; @@ -454,6 +466,7 @@ const FullWidthCardLayout = ({ serverTime={serverTime} imageLoading={imageLoading} collectionId={collectionId} + isInStarRatingVariant={isInStarRatingVariant} /> ); } @@ -503,6 +516,8 @@ const FullWidthCardLayout = ({ showKickerImage={card.format.design === ArticleDesign.Audio} subtitleSize={subtitleSize} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} + starRatingSize={'medium'} /> @@ -521,6 +536,7 @@ type HalfWidthCardLayoutProps = { isLastRow: boolean; containerLevel: DCRContainerLevel; enableHls?: boolean; + isInStarRatingVariant?: boolean; }; const HalfWidthCardLayout = ({ @@ -535,6 +551,7 @@ const HalfWidthCardLayout = ({ isLastRow, containerLevel, enableHls, + isInStarRatingVariant, }: HalfWidthCardLayoutProps) => { if (cards.length === 0) return null; @@ -590,6 +607,7 @@ const HalfWidthCardLayout = ({ headlineSizes={undefined} canPlayInline={false} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} /> ); @@ -608,6 +626,7 @@ export const FlexibleGeneral = ({ containerLevel = 'Primary', collectionId, enableHls, + isInStarRatingVariant, }: Props) => { const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({ ...snap, @@ -637,6 +656,7 @@ export const FlexibleGeneral = ({ containerLevel={containerLevel} collectionId={collectionId} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} /> )} {groupedCards.map((row, i) => { @@ -656,6 +676,7 @@ export const FlexibleGeneral = ({ containerLevel={containerLevel} collectionId={collectionId} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} /> ); @@ -676,6 +697,7 @@ export const FlexibleGeneral = ({ isLastRow={i === groupedCards.length - 1} containerLevel={containerLevel} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} /> ); } diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index d1bbbde38b2..1b70cc56a4b 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.tsx +++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx @@ -32,6 +32,7 @@ type Props = { containerLevel?: DCRContainerLevel; collectionId: number; enableHls?: boolean; + isInStarRatingVariant?: boolean; }; type BoostProperties = { @@ -134,6 +135,7 @@ type OneCardLayoutProps = { containerLevel: DCRContainerLevel; isSplashCard?: boolean; enableHls?: boolean; + isInStarRatingVariant?: boolean; }; export const OneCardLayout = ({ @@ -148,6 +150,7 @@ export const OneCardLayout = ({ containerLevel, isSplashCard, enableHls, + isInStarRatingVariant, }: OneCardLayoutProps) => { const card = cards[0]; if (!card) return null; @@ -202,6 +205,8 @@ export const OneCardLayout = ({ headlinePosition={isSplashCard ? 'outer' : 'inner'} subtitleSize={subtitleSize} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} + starRatingSize={'medium'} /> @@ -229,6 +234,7 @@ type TwoOrFourCardLayoutProps = { aspectRatio: AspectRatio; isFirstRow: boolean; containerLevel: DCRContainerLevel; + isInStarRatingVariant?: boolean; }; const TwoOrFourCardLayout = ({ @@ -241,6 +247,7 @@ const TwoOrFourCardLayout = ({ aspectRatio, isFirstRow, containerLevel, + isInStarRatingVariant, }: TwoOrFourCardLayoutProps) => { if (cards.length === 0) return null; const hasTwoOrFewerCards = cards.length <= 2; @@ -283,6 +290,7 @@ const TwoOrFourCardLayout = ({ !isMediaCard(card.format)) } canPlayInline={false} + isInStarRatingVariant={isInStarRatingVariant} /> ); @@ -301,6 +309,7 @@ export const FlexibleSpecial = ({ containerLevel = 'Primary', collectionId, enableHls, + isInStarRatingVariant, }: Props) => { const snaps = [...groupedTrails.snap].slice(0, 1).map((snap) => ({ ...snap, @@ -330,6 +339,7 @@ export const FlexibleSpecial = ({ containerLevel={containerLevel} isSplashCard={false} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} /> )} {isNonEmptyArray(splash) && ( @@ -345,6 +355,7 @@ export const FlexibleSpecial = ({ containerLevel={containerLevel} isSplashCard={true} enableHls={enableHls} + isInStarRatingVariant={isInStarRatingVariant} /> )} @@ -357,6 +368,7 @@ export const FlexibleSpecial = ({ aspectRatio={aspectRatio} isFirstRow={!isNonEmptyArray(snaps) && !isNonEmptyArray(splash)} containerLevel={containerLevel} + isInStarRatingVariant={isInStarRatingVariant} /> ); diff --git a/dotcom-rendering/src/components/ImageBlockComponent.tsx b/dotcom-rendering/src/components/ImageBlockComponent.tsx index 117fa8fec36..0aa825f0dd6 100644 --- a/dotcom-rendering/src/components/ImageBlockComponent.tsx +++ b/dotcom-rendering/src/components/ImageBlockComponent.tsx @@ -11,6 +11,7 @@ type Props = { starRating?: StarRating; isAvatar?: boolean; isTimeline?: boolean; + isInStarRatingVariant?: boolean; }; export const ImageBlockComponent = ({ @@ -22,6 +23,7 @@ export const ImageBlockComponent = ({ starRating, isAvatar, isTimeline = false, + isInStarRatingVariant, }: Props) => { const { role } = element; return ( @@ -35,6 +37,7 @@ export const ImageBlockComponent = ({ title={title} isAvatar={isAvatar} isTimeline={isTimeline} + isInStarRatingVariant={!!isInStarRatingVariant} /> ); }; diff --git a/dotcom-rendering/src/components/ImageComponent.tsx b/dotcom-rendering/src/components/ImageComponent.tsx index 9905fec74d3..bae491a26e9 100644 --- a/dotcom-rendering/src/components/ImageComponent.tsx +++ b/dotcom-rendering/src/components/ImageComponent.tsx @@ -28,7 +28,7 @@ import { Hide } from './Hide'; import { Island } from './Island'; import { LightboxLink } from './LightboxLink'; import { Picture } from './Picture'; -import { StarRating } from './StarRating/StarRating'; +import { StarRatingDeprecated } from './StarRating/StarRatingDeprecated'; type Props = { element: ImageBlockElement; @@ -40,6 +40,7 @@ type Props = { title?: string; isAvatar?: boolean; isTimeline?: boolean; + isInStarRatingVariant?: boolean; }; const timelineBulletStyles = css` @@ -81,7 +82,7 @@ const starsWrapper = css` const PositionStarRating = ({ rating }: { rating: Rating }) => (
- +
); @@ -265,6 +266,7 @@ export const ImageComponent = ({ title, isAvatar, isTimeline = false, + isInStarRatingVariant, }: Props) => { const { renderingTarget } = useConfig(); // Its possible the tools wont send us any images urls @@ -429,7 +431,7 @@ export const ImageComponent = ({ {isTimeline && isMainMedia && role === 'showcase' && (