11import { css } from '@emotion/react' ;
22import { isUndefined } from '@guardian/libs' ;
33import {
4+ between ,
45 from ,
56 palette as sourcePalette ,
67 space ,
8+ until ,
79} from '@guardian/source/foundations' ;
810import { Hide , Link , SvgCamera } from '@guardian/source/react-components' ;
911import {
@@ -15,6 +17,7 @@ import { isMediaCard } from '../../lib/cardHelpers';
1517import { isWithinTwelveHours , secondsToDuration } from '../../lib/formatTime' ;
1618import { appendLinkNameMedia } from '../../lib/getDataLinkName' ;
1719import { getZIndex } from '../../lib/getZIndex' ;
20+ import { getOphanComponents } from '../../lib/labs' ;
1821import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount' ;
1922import { BETA_CONTAINERS } from '../../model/enhanceCollections' ;
2023import { palette } from '../../palette' ;
@@ -43,6 +46,7 @@ import { Pill } from '../Pill';
4346import { SlideshowCarousel } from '../SlideshowCarousel.importable' ;
4447import { Snap } from '../Snap' ;
4548import { SnapCssSandbox } from '../SnapCssSandbox' ;
49+ import { SponsoredContentLabel } from '../SponsoredContentLabel' ;
4650import { StarRating } from '../StarRating/StarRating' ;
4751import type { Alignment } from '../SupportingContent' ;
4852import { SupportingContent } from '../SupportingContent' ;
@@ -731,6 +735,80 @@ export const Card = ({
731735 return undefined ;
732736 } ;
733737
738+ /**
739+ * Decides which branding design to apply based on the labs redesign feature switch
740+ * Adds appropriate Ophan data attributes based on card context
741+ * Results in a clickable brand logo and sponsorship label
742+ */
743+ const LabsBranding = ( ) => {
744+ if ( ! branding ) return ;
745+ const getLocationPrefix = ( ) => {
746+ if ( ! onwardsSource ) {
747+ return 'front-card' ;
748+ }
749+ if ( onwardsSource === 'related-content' ) {
750+ return 'article-related-content' ;
751+ } else {
752+ return undefined ;
753+ }
754+ } ;
755+ const locationPrefix = getLocationPrefix ( ) ;
756+ const dataAttributes = locationPrefix
757+ ? getOphanComponents ( {
758+ branding,
759+ locationPrefix,
760+ } )
761+ : undefined ;
762+
763+ return showLabsRedesign ? (
764+ < >
765+ { /** All screen sizes apart from tablet have horizontal orientation */ }
766+ < div
767+ css = { css `
768+ ${ between . tablet . and . desktop }
769+ display : none;
770+ }
771+ ` }
772+ >
773+ < SponsoredContentLabel
774+ branding = { branding }
775+ containerPalette = { containerPalette }
776+ orientation = "horizontal"
777+ alignment = "end"
778+ ophanComponentLink = { dataAttributes ?. ophanComponentLink }
779+ ophanComponentName = { dataAttributes ?. ophanComponentName }
780+ />
781+ </ div >
782+ { /** Tablet sized screens have vertical orientation */ }
783+ < div
784+ css = { css `
785+ ${ until . tablet }
786+ display : none;
787+ }
788+ ${ from . desktop }
789+ display : none;
790+ }
791+ ` }
792+ >
793+ < SponsoredContentLabel
794+ branding = { branding }
795+ containerPalette = { containerPalette }
796+ orientation = "vertical"
797+ alignment = "end"
798+ ophanComponentLink = { dataAttributes ?. ophanComponentLink }
799+ ophanComponentName = { dataAttributes ?. ophanComponentName }
800+ />
801+ </ div >
802+ </ >
803+ ) : (
804+ < CardBranding
805+ branding = { branding }
806+ containerPalette = { containerPalette }
807+ onwardsSource = { onwardsSource }
808+ />
809+ ) ;
810+ } ;
811+
734812 return (
735813 < CardWrapper
736814 format = { format }
@@ -1127,17 +1205,10 @@ export const Card = ({
11271205 { showPill ? (
11281206 < >
11291207 < MediaOrNewsletterPill />
1130- { format . theme === ArticleSpecial . Labs &&
1131- branding && (
1132- < CardBranding
1133- branding = { branding }
1134- onwardsSource = {
1135- onwardsSource
1136- }
1137- containerPalette = {
1138- containerPalette
1139- }
1140- />
1208+ { ! showLabsRedesign &&
1209+ format . theme ===
1210+ ArticleSpecial . Labs && (
1211+ < LabsBranding />
11411212 ) }
11421213 </ >
11431214 ) : (
@@ -1146,16 +1217,9 @@ export const Card = ({
11461217 age = { decideAge ( ) }
11471218 commentCount = { < CommentCount /> }
11481219 cardBranding = {
1149- branding ? (
1150- < CardBranding
1151- branding = { branding }
1152- onwardsSource = {
1153- onwardsSource
1154- }
1155- containerPalette = {
1156- containerPalette
1157- }
1158- />
1220+ isOnwardContent ||
1221+ ! showLabsRedesign ? (
1222+ < LabsBranding />
11591223 ) : undefined
11601224 }
11611225 showLivePlayable = { showLivePlayable }
@@ -1205,6 +1269,7 @@ export const Card = ({
12051269 </ ContentWrapper >
12061270 </ CardLayout >
12071271
1272+ { /** This div contains content that sits "outside" of the standard card layout */ }
12081273 < div
12091274 css = {
12101275 /** We allow this area to take up more space so that cards without
@@ -1249,12 +1314,7 @@ export const Card = ({
12491314 age = { decideAge ( ) }
12501315 commentCount = { < CommentCount /> }
12511316 cardBranding = {
1252- branding ? (
1253- < CardBranding
1254- branding = { branding }
1255- onwardsSource = { onwardsSource }
1256- />
1257- ) : undefined
1317+ ! showLabsRedesign ? < LabsBranding /> : undefined
12581318 }
12591319 showLivePlayable = { showLivePlayable }
12601320 shouldReserveSpace = { {
@@ -1264,6 +1324,10 @@ export const Card = ({
12641324 />
12651325 ) }
12661326 </ div >
1327+
1328+ { showLabsRedesign &&
1329+ ! isOnwardContent &&
1330+ format . theme === ArticleSpecial . Labs && < LabsBranding /> }
12671331 </ CardWrapper >
12681332 ) ;
12691333} ;
0 commit comments