Skip to content

Commit 47a56e4

Browse files
abeddow91abeddow91
authored
Remove fixed/video container (#14351)
* Remove fixed/video container as this has been deprecated and is not used by any production fronts. * Replace fixed/video with scrollable/feature in ad position tests as both containers occupy the same space (1.5) * Remove text overlay from youtube overlay as this is no longer used. The video overlay card design has now been deprecated in favour of immerisve feature cards.
1 parent c89e5f0 commit 47a56e4

18 files changed

+188
-364
lines changed

‎dotcom-rendering/fixtures/manual/frontCollections.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export const testCollectionsUk = [
109109
},
110110
{
111111
...defaultValues,
112-
collectionType: 'fixed/video',
112+
collectionType: 'scrollable/feature',
113113
displayName: 'Videos',
114114
},
115115
{
@@ -257,7 +257,7 @@ export const testCollectionsUs = [
257257
},
258258
{
259259
...defaultValues,
260-
collectionType: 'fixed/video',
260+
collectionType: 'scrollable/feature',
261261
displayName: 'Video',
262262
},
263263
{

‎dotcom-rendering/src/components/Card/Card.tsx

Lines changed: 144 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -801,7 +801,6 @@ export const Card = ({
801801
imagePositionOnMobile={imagePositionOnMobile}
802802
minWidthInPixels={minWidthInPixels}
803803
imageType={media?.type}
804-
containerType={containerType}
805804
gapSizes={getGapSizes()}
806805
isBetaContainer={isBetaContainer}
807806
>
@@ -947,10 +946,6 @@ export const Card = ({
947946
pauseOffscreenVideo={
948947
pauseOffscreenVideo
949948
}
950-
showTextOverlay={
951-
containerType ===
952-
'fixed/video'
953-
}
954949
/*
955950
* TODO: IMPROVE THIS MAPPING
956951
*
@@ -1068,166 +1063,160 @@ export const Card = ({
10681063
)}
10691064
</ImageWrapper>
10701065
)}
1066+
<ContentWrapper
1067+
imageType={media?.type}
1068+
imageSize={imageSize}
1069+
isBetaContainer={isBetaContainer}
1070+
imagePositionOnDesktop={
1071+
image ? imagePositionOnDesktop : 'none'
1072+
}
1073+
imagePositionOnMobile={
1074+
image ? imagePositionOnMobile : 'none'
1075+
}
1076+
padContent={determinePadContent(
1077+
isMediaCardOrNewsletter,
1078+
isBetaContainer,
1079+
isOnwardContent,
1080+
)}
1081+
>
1082+
{/* This div is needed to keep the headline and trail text justified at the start */}
1083+
<div
1084+
css={css`
1085+
position: relative;
1086+
display: flex;
1087+
flex-direction: column;
1088+
justify-content: flex-start;
1089+
flex-grow: 1;
1090+
`}
1091+
>
1092+
{headlinePosition === 'inner' && (
1093+
<HeadlineWrapper>
1094+
<CardHeadline
1095+
headlineText={headlineText}
1096+
format={format}
1097+
fontSizes={headlineSizes}
1098+
showQuotes={showQuotes}
1099+
kickerText={
1100+
format.design ===
1101+
ArticleDesign.LiveBlog &&
1102+
!kickerText
1103+
? 'Live'
1104+
: kickerText
1105+
}
1106+
showPulsingDot={
1107+
format.design ===
1108+
ArticleDesign.LiveBlog ||
1109+
showPulsingDot
1110+
}
1111+
byline={byline}
1112+
showByline={showByline}
1113+
isExternalLink={isExternalLink}
1114+
kickerImage={
1115+
showKickerImage &&
1116+
media?.type === 'podcast'
1117+
? media.podcastImage
1118+
: undefined
1119+
}
1120+
/>
1121+
{!isUndefined(starRating) ? (
1122+
<StarRatingComponent
1123+
rating={starRating}
1124+
cardHasImage={!!image}
1125+
/>
1126+
) : null}
1127+
</HeadlineWrapper>
1128+
)}
10711129

1072-
{containerType !== 'fixed/video' && (
1073-
<ContentWrapper
1074-
imageType={media?.type}
1075-
imageSize={imageSize}
1076-
isBetaContainer={isBetaContainer}
1077-
imagePositionOnDesktop={
1078-
image ? imagePositionOnDesktop : 'none'
1079-
}
1080-
imagePositionOnMobile={
1081-
image ? imagePositionOnMobile : 'none'
1082-
}
1083-
padContent={determinePadContent(
1084-
isMediaCardOrNewsletter,
1085-
isBetaContainer,
1086-
isOnwardContent,
1130+
{!!trailText && media?.type !== 'podcast' && (
1131+
<TrailText
1132+
trailText={trailText}
1133+
trailTextSize={trailTextSize}
1134+
padTop={headlinePosition === 'inner'}
1135+
hideUntil={hideTrailTextUntil()}
1136+
/>
10871137
)}
1088-
>
1089-
{/* This div is needed to keep the headline and trail text justified at the start */}
1090-
<div
1091-
css={css`
1092-
position: relative;
1093-
display: flex;
1094-
flex-direction: column;
1095-
justify-content: flex-start;
1096-
flex-grow: 1;
1097-
`}
1098-
>
1099-
{headlinePosition === 'inner' && (
1100-
<HeadlineWrapper>
1101-
<CardHeadline
1102-
headlineText={headlineText}
1138+
1139+
{!isOpinionCardWithAvatar && (
1140+
<>
1141+
{showPill ? (
1142+
<>
1143+
<MediaOrNewsletterPill />
1144+
{format.theme === ArticleSpecial.Labs &&
1145+
branding && (
1146+
<CardBranding
1147+
branding={branding}
1148+
onwardsSource={
1149+
onwardsSource
1150+
}
1151+
containerPalette={
1152+
containerPalette
1153+
}
1154+
/>
1155+
)}
1156+
</>
1157+
) : (
1158+
<CardFooter
11031159
format={format}
1104-
fontSizes={headlineSizes}
1105-
showQuotes={showQuotes}
1106-
kickerText={
1107-
format.design ===
1108-
ArticleDesign.LiveBlog &&
1109-
!kickerText
1110-
? 'Live'
1111-
: kickerText
1160+
age={decideAge()}
1161+
commentCount={<CommentCount />}
1162+
cardBranding={
1163+
branding ? (
1164+
<CardBranding
1165+
branding={branding}
1166+
onwardsSource={
1167+
onwardsSource
1168+
}
1169+
containerPalette={
1170+
containerPalette
1171+
}
1172+
/>
1173+
) : undefined
11121174
}
1113-
showPulsingDot={
1114-
format.design ===
1115-
ArticleDesign.LiveBlog ||
1116-
showPulsingDot
1175+
showLivePlayable={showLivePlayable}
1176+
/>
1177+
)}
1178+
</>
1179+
)}
1180+
{showLivePlayable &&
1181+
liveUpdatesPosition === 'inner' && (
1182+
<Island
1183+
priority="feature"
1184+
defer={{ until: 'visible' }}
1185+
>
1186+
<LatestLinks
1187+
id={linkTo}
1188+
isDynamo={isDynamo}
1189+
direction={
1190+
isFlexibleContainer
1191+
? liveUpdatesAlignment
1192+
: supportingContentAlignment
1193+
}
1194+
containerPalette={containerPalette}
1195+
absoluteServerTimes={
1196+
absoluteServerTimes
11171197
}
1118-
byline={byline}
1119-
showByline={showByline}
1120-
isExternalLink={isExternalLink}
1121-
kickerImage={
1122-
showKickerImage &&
1123-
media?.type === 'podcast'
1124-
? media.podcastImage
1198+
displayHeader={isFlexibleContainer}
1199+
directionOnMobile={
1200+
isFlexibleContainer
1201+
? 'horizontal'
11251202
: undefined
11261203
}
1127-
/>
1128-
{!isUndefined(starRating) ? (
1129-
<StarRatingComponent
1130-
rating={starRating}
1131-
cardHasImage={!!image}
1132-
/>
1133-
) : null}
1134-
</HeadlineWrapper>
1204+
></LatestLinks>
1205+
</Island>
11351206
)}
1207+
</div>
11361208

1137-
{!!trailText && media?.type !== 'podcast' && (
1138-
<TrailText
1139-
trailText={trailText}
1140-
trailTextSize={trailTextSize}
1141-
padTop={headlinePosition === 'inner'}
1142-
hideUntil={hideTrailTextUntil()}
1143-
/>
1144-
)}
1209+
{/* This div is needed to push this content to the bottom of the card */}
1210+
<div style={isOnwardContent ? { marginTop: 'auto' } : {}}>
1211+
{decideInnerSublinks()}
1212+
</div>
11451213

1146-
{!isOpinionCardWithAvatar && (
1147-
<>
1148-
{showPill ? (
1149-
<>
1150-
<MediaOrNewsletterPill />
1151-
{format.theme ===
1152-
ArticleSpecial.Labs &&
1153-
branding && (
1154-
<CardBranding
1155-
branding={branding}
1156-
onwardsSource={
1157-
onwardsSource
1158-
}
1159-
containerPalette={
1160-
containerPalette
1161-
}
1162-
/>
1163-
)}
1164-
</>
1165-
) : (
1166-
<CardFooter
1167-
format={format}
1168-
age={decideAge()}
1169-
commentCount={<CommentCount />}
1170-
cardBranding={
1171-
branding ? (
1172-
<CardBranding
1173-
branding={branding}
1174-
onwardsSource={
1175-
onwardsSource
1176-
}
1177-
containerPalette={
1178-
containerPalette
1179-
}
1180-
/>
1181-
) : undefined
1182-
}
1183-
showLivePlayable={showLivePlayable}
1184-
/>
1185-
)}
1186-
</>
1187-
)}
1188-
{showLivePlayable &&
1189-
liveUpdatesPosition === 'inner' && (
1190-
<Island
1191-
priority="feature"
1192-
defer={{ until: 'visible' }}
1193-
>
1194-
<LatestLinks
1195-
id={linkTo}
1196-
isDynamo={isDynamo}
1197-
direction={
1198-
isFlexibleContainer
1199-
? liveUpdatesAlignment
1200-
: supportingContentAlignment
1201-
}
1202-
containerPalette={containerPalette}
1203-
absoluteServerTimes={
1204-
absoluteServerTimes
1205-
}
1206-
displayHeader={isFlexibleContainer}
1207-
directionOnMobile={
1208-
isFlexibleContainer
1209-
? 'horizontal'
1210-
: undefined
1211-
}
1212-
></LatestLinks>
1213-
</Island>
1214-
)}
1215-
</div>
1216-
1217-
{/* This div is needed to push this content to the bottom of the card */}
1218-
<div
1219-
style={isOnwardContent ? { marginTop: 'auto' } : {}}
1220-
>
1221-
{decideInnerSublinks()}
1222-
</div>
1223-
1224-
{sublinkPosition === 'outer' &&
1225-
supportingContentAlignment === 'horizontal' &&
1226-
imagePositionOnDesktop === 'right' && (
1227-
<HorizontalDivider />
1228-
)}
1229-
</ContentWrapper>
1230-
)}
1214+
{sublinkPosition === 'outer' &&
1215+
supportingContentAlignment === 'horizontal' &&
1216+
imagePositionOnDesktop === 'right' && (
1217+
<HorizontalDivider />
1218+
)}
1219+
</ContentWrapper>
12311220
</CardLayout>
12321221

12331222
<div

0 commit comments

Comments
 (0)