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 */} +
+ +
+ {/** Tablet sized screens have vertical orientation */} +
+ +
+ + ) : ( + + ); + }; + return ( - {format.theme === ArticleSpecial.Labs && - branding && ( - + {!showLabsRedesign && + format.theme === + ArticleSpecial.Labs && ( + )} ) : ( @@ -1128,16 +1199,9 @@ export const Card = ({ age={decideAge()} commentCount={} cardBranding={ - branding ? ( - + isOnwardContent || + !showLabsRedesign ? ( + ) : undefined } showLivePlayable={showLivePlayable} @@ -1187,6 +1251,7 @@ export const Card = ({ + {/** This div contains content that sits "outside" of the standard card layout */}
} cardBranding={ - branding ? ( - - ) : undefined + !showLabsRedesign ? : undefined } showLivePlayable={showLivePlayable} shouldReserveSpace={{ @@ -1246,6 +1306,10 @@ export const Card = ({ /> )}
+ + {showLabsRedesign && + !isOnwardContent && + format.theme === ArticleSpecial.Labs && }
); }; diff --git a/dotcom-rendering/src/components/SponsoredContentLabel.tsx b/dotcom-rendering/src/components/SponsoredContentLabel.tsx index b564e31855c..7168238546e 100644 --- a/dotcom-rendering/src/components/SponsoredContentLabel.tsx +++ b/dotcom-rendering/src/components/SponsoredContentLabel.tsx @@ -34,13 +34,14 @@ const labelStyles = css` `; const wrapperStyles = css` + padding-top: ${space[1]}px; display: flex; - gap: ${space[2]}px; justify-content: end; `; const horizontalStyles = css` align-items: center; + gap: ${space[2]}px; `; const verticalStyles = { @@ -54,8 +55,13 @@ const verticalStyles = { }; const linkStyles = css` + height: 60px; /* See: https://css-tricks.com/nested-links/ */ z-index: ${getZIndex('card-nested-link')}; + /** Vertically center the branding within the link */ + display: flex; + flex-direction: column; + justify-content: center; `; /**