Skip to content

Commit d5fb9f0

Browse files
Georges-GNMGeorges-GNM
committed
rename fields
1 parent 4d86f78 commit d5fb9f0

File tree

14 files changed

+77
-73
lines changed

14 files changed

+77
-73
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import type { TPSGContent } from '../../src/types/tagPageAIContent';
1+
import type { StorylinesContent } from '../../src/types/storylinesContent';
22

3-
export const storylinesSectionContent: TPSGContent = {
3+
export const storylinesSectionContent: StorylinesContent = {
44
created: '2025-12-09T17:14:47.633244289Z',
55
tag: 'technology/artificialintelligenceai',
66
storylines: [

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ export type Props = {
166166
/** Feature flag for the labs redesign work */
167167
showLabsRedesign?: boolean;
168168
enableHls?: boolean;
169-
SCStyle?: boolean;
169+
storylinesStyle?: boolean;
170170
};
171171

172172
const starWrapper = (cardHasImage: boolean) => css`
@@ -426,7 +426,7 @@ export const Card = ({
426426
showLabsRedesign = false,
427427
subtitleSize = 'small',
428428
enableHls = false,
429-
SCStyle = false,
429+
storylinesStyle = false,
430430
}: Props) => {
431431
const hasSublinks = supportingContent && supportingContent.length > 0;
432432
const sublinkPosition = decideSublinkPosition(
@@ -458,7 +458,7 @@ export const Card = ({
458458
const withinTwelveHours = isWithinTwelveHours(webPublicationDate);
459459

460460
const shouldShowAge =
461-
SCStyle ||
461+
storylinesStyle ||
462462
isTagPage ||
463463
!!onwardsSource ||
464464
(showAge && withinTwelveHours);
@@ -514,7 +514,7 @@ export const Card = ({
514514
css={css`
515515
margin-top: auto;
516516
display: flex;
517-
${SCStyle &&
517+
${storylinesStyle &&
518518
`
519519
flex-direction: column;
520520
gap: ${space[1]}px;
@@ -524,7 +524,7 @@ export const Card = ({
524524
>
525525
{/* We add this card footer here because ordinarily, it's either the pill or the footer, but
526526
we need to display the date on these cards if they appear in the storylines section */}
527-
{SCStyle && (
527+
{storylinesStyle && (
528528
<CardFooter
529529
format={format}
530530
age={decideAge()}
@@ -787,7 +787,6 @@ export const Card = ({
787787
if (sublinkPosition === 'outer') {
788788
return (
789789
<>
790-
<div>test </div>
791790
<Sublinks />
792791
</>
793792
);
@@ -813,7 +812,7 @@ export const Card = ({
813812
containerPalette={containerPalette}
814813
isDynamo={isDynamo}
815814
fillBackgroundOnMobile={isFlexSplash}
816-
SCStyle={SCStyle}
815+
storylinesStyle={storylinesStyle}
817816
/>
818817
</Hide>
819818
);
@@ -1251,7 +1250,7 @@ export const Card = ({
12511250
`}
12521251
>
12531252
{/* why is this needed, sublinks? */}
1254-
{SCStyle && isFlexSplash
1253+
{storylinesStyle && isFlexSplash
12551254
? null
12561255
: headlinePosition === 'inner' && (
12571256
<HeadlineWrapper>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,7 @@ export type Props = {
344344
showVideo?: boolean;
345345
/** Feature flag for the labs redesign work */
346346
showLabsRedesign?: boolean;
347-
SCStyle?: boolean;
347+
storylinesStyle?: boolean;
348348
};
349349

350350
export const FeatureCard = ({
@@ -381,7 +381,7 @@ export const FeatureCard = ({
381381
isImmersive = false,
382382
showVideo = false,
383383
showLabsRedesign = false,
384-
SCStyle = false,
384+
storylinesStyle = false,
385385
}: Props) => {
386386
const hasSublinks = supportingContent && supportingContent.length > 0;
387387

@@ -669,7 +669,9 @@ export const FeatureCard = ({
669669
}
670670
showClock={!!showClock}
671671
serverTime={serverTime}
672-
SCStyle={SCStyle}
672+
storylinesStyle={
673+
storylinesStyle
674+
}
673675
/>
674676
) : undefined
675677
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ type Props = {
66
showClock: boolean;
77
serverTime?: number;
88
webPublicationDate: string;
9-
SCStyle?: boolean;
9+
storylinesStyle?: boolean;
1010
};
1111

1212
export const FeatureCardCardAge = ({
1313
showClock,
1414
serverTime,
1515
webPublicationDate,
16-
SCStyle,
16+
storylinesStyle,
1717
}: Props) => {
1818
const withinTwelveHours = isWithinTwelveHours(webPublicationDate);
19-
if (withinTwelveHours || SCStyle) {
19+
if (withinTwelveHours || storylinesStyle) {
2020
return (
2121
<CardAge
2222
webPublication={{

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

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ type Props = {
3636
/** Feature flag for the labs redesign work */
3737
showLabsRedesign?: boolean;
3838
enableHls?: boolean;
39-
SCStyle?: boolean;
39+
storylinesStyle?: boolean;
4040
};
4141

4242
type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -92,7 +92,7 @@ type ImmersiveCardLayoutProps = {
9292
imageLoading: Loading;
9393
collectionId: number;
9494
showLabsRedesign?: boolean;
95-
SCStyle?: boolean;
95+
storylinesStyle?: boolean;
9696
};
9797

9898
/**
@@ -108,7 +108,7 @@ const ImmersiveCardLayout = ({
108108
imageLoading,
109109
collectionId,
110110
showLabsRedesign,
111-
SCStyle,
111+
storylinesStyle,
112112
}: ImmersiveCardLayoutProps) => {
113113
const isLoopingVideo =
114114
card.mainMedia?.type === 'SelfHostedVideo' &&
@@ -148,7 +148,7 @@ const ImmersiveCardLayout = ({
148148
isImmersive={true}
149149
showVideo={card.showVideo}
150150
showLabsRedesign={showLabsRedesign}
151-
SCStyle={SCStyle}
151+
storylinesStyle={storylinesStyle}
152152
/>
153153
</LI>
154154
</UL>
@@ -177,7 +177,7 @@ const decideSplashCardProperties = (
177177
mediaCard: boolean,
178178
useLargerHeadlineSizeDesktop: boolean,
179179
avatarUrl: boolean,
180-
SCStyle?: boolean,
180+
storylinesStyle?: boolean,
181181
): BoostedSplashProperties => {
182182
switch (boostLevel) {
183183
// The default boost level is equal to no boost. It is the same as the default card layout.
@@ -207,13 +207,13 @@ const decideSplashCardProperties = (
207207
mediaPositionOnDesktop: 'right',
208208
mediaPositionOnMobile: mediaCard ? 'top' : 'bottom',
209209
mediaSize: avatarUrl ? 'large' : 'xlarge',
210-
supportingContentAlignment: SCStyle
210+
supportingContentAlignment: storylinesStyle
211211
? 'vertical'
212212
: supportingContentLength >= 4
213213
? 'horizontal'
214214
: 'vertical',
215215
liveUpdatesAlignment: 'vertical',
216-
trailTextSize: SCStyle ? 'large' : 'regular',
216+
trailTextSize: storylinesStyle ? 'large' : 'regular',
217217
subtitleSize: 'medium',
218218
};
219219
case 'megaboost':
@@ -266,7 +266,7 @@ type SplashCardLayoutProps = {
266266
/** Feature flag for the labs redesign work */
267267
showLabsRedesign?: boolean;
268268
enableHls?: boolean;
269-
SCStyle?: boolean;
269+
storylinesStyle?: boolean;
270270
};
271271

272272
const SplashCardLayout = ({
@@ -281,7 +281,7 @@ const SplashCardLayout = ({
281281
collectionId,
282282
showLabsRedesign,
283283
enableHls,
284-
SCStyle,
284+
storylinesStyle,
285285
}: SplashCardLayoutProps) => {
286286
const card = cards[0];
287287
if (!card) return null;
@@ -321,7 +321,7 @@ const SplashCardLayout = ({
321321
isMediaCard(card.format),
322322
useLargerHeadlineSizeDesktop,
323323
!!card.avatarUrl,
324-
SCStyle,
324+
storylinesStyle,
325325
);
326326

327327
return (
@@ -369,7 +369,7 @@ const SplashCardLayout = ({
369369
headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
370370
showLabsRedesign={showLabsRedesign}
371371
enableHls={enableHls}
372-
SCStyle={SCStyle}
372+
storylinesStyle={storylinesStyle}
373373
/>
374374
</LI>
375375
</UL>
@@ -438,7 +438,7 @@ type FullWidthCardLayoutProps = {
438438
/** Feature flag for the labs redesign work */
439439
showLabsRedesign?: boolean;
440440
enableHls?: boolean;
441-
SCStyle?: boolean;
441+
storylinesStyle?: boolean;
442442
};
443443

444444
const FullWidthCardLayout = ({
@@ -454,7 +454,7 @@ const FullWidthCardLayout = ({
454454
collectionId,
455455
showLabsRedesign,
456456
enableHls,
457-
SCStyle,
457+
storylinesStyle,
458458
}: FullWidthCardLayoutProps) => {
459459
const card = cards[0];
460460
if (!card) return null;
@@ -482,7 +482,7 @@ const FullWidthCardLayout = ({
482482
imageLoading={imageLoading}
483483
collectionId={collectionId}
484484
showLabsRedesign={showLabsRedesign}
485-
SCStyle={SCStyle}
485+
storylinesStyle={storylinesStyle}
486486
/>
487487
);
488488
}
@@ -533,7 +533,7 @@ const FullWidthCardLayout = ({
533533
showLabsRedesign={showLabsRedesign}
534534
subtitleSize={subtitleSize}
535535
enableHls={enableHls}
536-
SCStyle={SCStyle}
536+
storylinesStyle={storylinesStyle}
537537
/>
538538
</LI>
539539
</UL>
@@ -554,7 +554,7 @@ type HalfWidthCardLayoutProps = {
554554
/** Feature flag for the labs redesign work */
555555
showLabsRedesign?: boolean;
556556
enableHls?: boolean;
557-
SCStyle?: boolean;
557+
storylinesStyle?: boolean;
558558
};
559559

560560
const HalfWidthCardLayout = ({
@@ -570,7 +570,7 @@ const HalfWidthCardLayout = ({
570570
containerLevel,
571571
showLabsRedesign,
572572
enableHls,
573-
SCStyle,
573+
storylinesStyle,
574574
}: HalfWidthCardLayoutProps) => {
575575
if (cards.length === 0) return null;
576576

@@ -627,7 +627,7 @@ const HalfWidthCardLayout = ({
627627
canPlayInline={false}
628628
showLabsRedesign={showLabsRedesign}
629629
enableHls={enableHls}
630-
SCStyle={SCStyle}
630+
storylinesStyle={storylinesStyle}
631631
/>
632632
</LI>
633633
);
@@ -647,7 +647,7 @@ export const FlexibleGeneral = ({
647647
collectionId,
648648
showLabsRedesign,
649649
enableHls,
650-
SCStyle = false,
650+
storylinesStyle = false,
651651
}: Props) => {
652652
const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
653653
...snap,
@@ -678,7 +678,7 @@ export const FlexibleGeneral = ({
678678
collectionId={collectionId}
679679
showLabsRedesign={showLabsRedesign}
680680
enableHls={enableHls}
681-
SCStyle={SCStyle}
681+
storylinesStyle={storylinesStyle}
682682
/>
683683
)}
684684
{groupedCards.map((row, i) => {
@@ -699,7 +699,7 @@ export const FlexibleGeneral = ({
699699
collectionId={collectionId}
700700
showLabsRedesign={showLabsRedesign}
701701
enableHls={enableHls}
702-
SCStyle={SCStyle}
702+
storylinesStyle={storylinesStyle}
703703
/>
704704
);
705705

@@ -721,7 +721,7 @@ export const FlexibleGeneral = ({
721721
containerLevel={containerLevel}
722722
showLabsRedesign={showLabsRedesign}
723723
enableHls={enableHls}
724-
SCStyle={SCStyle}
724+
storylinesStyle={storylinesStyle}
725725
/>
726726
);
727727
}

‎dotcom-rendering/src/components/StorylinesSection.importable.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import {
1111
} from '@guardian/source/foundations';
1212
import { useState } from 'react';
1313
import type { EditionId } from '../lib/edition';
14-
import { parseTPSGContentToStorylines } from '../model/enhanceAITagPageContent';
14+
import { parseStorylinesContentToStorylines } from '../model/enhanceAITagPageContent';
1515
import { palette } from '../palette';
16-
import type { TPSGContent } from '../types/tagPageAIContent';
16+
import type { StorylinesContent } from '../types/storylinesContent';
1717
import { FlexibleGeneral } from './FlexibleGeneral';
1818
import { ScrollableCarousel } from './ScrollableCarousel';
1919
import { StorylineSection } from './StorylineSection';
@@ -23,7 +23,7 @@ type StorylinesSectionProps = {
2323
index: number;
2424
containerId?: string;
2525
editionId: EditionId;
26-
TPSGContent?: TPSGContent;
26+
storylinesContent?: StorylinesContent;
2727
};
2828

2929
const categoryTitleCss = css`
@@ -144,13 +144,13 @@ export const StorylinesSection = ({
144144
url,
145145
index,
146146
containerId, //need to check
147-
TPSGContent,
147+
storylinesContent,
148148
editionId,
149149
}: StorylinesSectionProps) => {
150-
console.log('has TPSGContent', !!TPSGContent);
151-
// console.log('TPSGContent', TPSGContent);
152-
// const [storylines, SetStorylines] = useState<TPSGContent>();
153-
const storylines = TPSGContent;
150+
console.log('has StorylinesContent', !!storylinesContent);
151+
// console.log('StorylinesContent', StorylinesContent);
152+
// const [storylines, SetStorylines] = useState<StorylinesContent>();
153+
const storylines = storylinesContent;
154154

155155
// useEffect(() => {
156156
// fetch(
@@ -173,7 +173,7 @@ export const StorylinesSection = ({
173173
// }, []);
174174

175175
const parsedStorylines =
176-
storylines && parseTPSGContentToStorylines(storylines);
176+
storylines && parseStorylinesContentToStorylines(storylines);
177177

178178
const [activeStorylineId, setActiveStorylineId] = useState<string>(
179179
parsedStorylines?.[0]?.id ?? '',
@@ -285,7 +285,7 @@ export const StorylinesSection = ({
285285
aspectRatio={'5:4'}
286286
collectionId={0}
287287
containerLevel="Secondary"
288-
SCStyle={true}
288+
storylinesStyle={true}
289289
/>
290290
</div>
291291
))}

‎dotcom-rendering/src/components/StorylinesSection.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const meta = {
1111
index: 1,
1212
containerId: 'container-1 | storylines-section',
1313
editionId: 'UK',
14-
TPSGContent: storylinesSectionContent,
14+
storylinesContent: storylinesSectionContent,
1515
},
1616
render: (args) => (
1717
<div

0 commit comments

Comments
 (0)