diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 8657899d74e..b7ac1d0dc11 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -1,9 +1,11 @@ import { css } from '@emotion/react'; import { isUndefined } from '@guardian/libs'; import { + between, from, palette as sourcePalette, space, + until, } from '@guardian/source/foundations'; import { Hide, Link, SvgCamera } from '@guardian/source/react-components'; import { @@ -15,6 +17,7 @@ import { isMediaCard } from '../../lib/cardHelpers'; import { isWithinTwelveHours, secondsToDuration } from '../../lib/formatTime'; import { appendLinkNameMedia } from '../../lib/getDataLinkName'; import { getZIndex } from '../../lib/getZIndex'; +import { getOphanComponents } from '../../lib/labs'; import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount'; import { BETA_CONTAINERS } from '../../model/enhanceCollections'; import { palette } from '../../palette'; @@ -43,6 +46,7 @@ import { Pill } from '../Pill'; import { SlideshowCarousel } from '../SlideshowCarousel.importable'; import { Snap } from '../Snap'; import { SnapCssSandbox } from '../SnapCssSandbox'; +import { SponsoredContentLabel } from '../SponsoredContentLabel'; import { StarRating } from '../StarRating/StarRating'; import type { Alignment } from '../SupportingContent'; import { SupportingContent } from '../SupportingContent'; @@ -725,6 +729,80 @@ export const Card = ({ return undefined; }; + /** + * Decides which branding design to apply based on the labs redesign feature switch + * Adds appropriate Ophan data attributes based on card context + * Results in a clickable brand logo and sponsorship label + */ + const LabsBranding = () => { + if (!branding) return; + const getLocationPrefix = () => { + if (!onwardsSource) { + return 'front-card'; + } + if (onwardsSource === 'related-content') { + return 'article-related-content'; + } else { + return undefined; + } + }; + const locationPrefix = getLocationPrefix(); + const dataAttributes = locationPrefix + ? getOphanComponents({ + branding, + locationPrefix, + }) + : undefined; + + return showLabsRedesign ? ( + <> + {/** All screen sizes apart from tablet have horizontal orientation */} +