Skip to content

Commit 7fef552

Browse files
juabarajuabara
authored
Merge branch 'main' into jm/feat-sign-in-gate-v2
2 parents 623e56c + a40b0e6 commit 7fef552

18 files changed

+113
-69
lines changed

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

Lines changed: 34 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const cardHeadlineLight: ContainerFunction = (
2828
return sourcePalette.neutral[93];
2929
case 'SpecialReportAltPalette':
3030
return sourcePalette.specialReportAlt[100];
31+
// TODO: @commercial-dev to update to neutral[7] when launching Redesigned Labs Containers
3132
case 'Branded':
3233
return sourcePalette.neutral[20];
3334
}
@@ -82,6 +83,7 @@ const cardTrailTextLight: ContainerFunction = (
8283
case 'SpecialReportAltPalette':
8384
return sourcePalette.specialReportAlt[100];
8485
case 'Branded':
86+
// TODO: @commercial-dev to update to palette('--card-trail-text') when launching Redesigned Labs Containers
8587
return sourcePalette.neutral[20];
8688
}
8789
};
@@ -108,6 +110,7 @@ const cardTrailTextDark: ContainerFunction = (
108110
case 'SpecialReportAltPalette':
109111
return sourcePalette.specialReportAlt[700];
110112
case 'Branded':
113+
// TODO: @commercial-dev to update to palette('--card-trail-text') when launching Redesigned Labs Containers
111114
return sourcePalette.neutral[86];
112115
}
113116
};
@@ -133,6 +136,7 @@ const cardKickerTextLight: ContainerFunction = (containerPalette) => {
133136
case 'SpecialReportAltPalette':
134137
return sourcePalette.specialReportAlt[100];
135138
case 'Branded':
139+
// TODO: @commercial-dev to update to labs[100] when launching Redesigned Labs Containers
136140
return sourcePalette.labs[200];
137141
}
138142
};
@@ -182,6 +186,7 @@ const cardQuoteIconLight: ContainerFunction = (containerPalette) => {
182186
case 'SpecialReportAltPalette':
183187
return sourcePalette.specialReportAlt[100];
184188
case 'Branded':
189+
// TODO: @commercial-dev to update to labs[100] when launching Redesigned Labs Containers
185190
return sourcePalette.labs[200];
186191
}
187192
};
@@ -330,7 +335,7 @@ const sectionToggleButtonLight: ContainerFunction = (containerPalette) => {
330335
case 'SpecialReportAltPalette':
331336
return sourcePalette.neutral[60];
332337
case 'Branded':
333-
return sourcePalette.neutral[7];
338+
return palette('--section-toggle-button');
334339
}
335340
};
336341
const sectionToggleButtonDark: ContainerFunction = (containerPalette) => {
@@ -354,7 +359,7 @@ const sectionToggleButtonDark: ContainerFunction = (containerPalette) => {
354359
case 'SpecialReportAltPalette':
355360
return sourcePalette.neutral[60];
356361
case 'Branded':
357-
return sourcePalette.neutral[7];
362+
return palette('--section-toggle-button');
358363
}
359364
};
360365
const sectionToggleButtonHoverLight: ContainerFunction = (containerPalette) => {
@@ -378,7 +383,7 @@ const sectionToggleButtonHoverLight: ContainerFunction = (containerPalette) => {
378383
case 'SpecialReportAltPalette':
379384
return sourcePalette.neutral[93];
380385
case 'Branded':
381-
return sourcePalette.neutral[20];
386+
return palette('--section-toggle-button-hover');
382387
}
383388
};
384389
const sectionToggleButtonHoverDark: ContainerFunction = (containerPalette) => {
@@ -568,7 +573,6 @@ const cardMediaWaveformLight: ContainerFunction = (containerPalette) => {
568573
return sourcePalette.neutral[46];
569574
case 'LongRunningPalette':
570575
case 'EventPalette':
571-
case 'Branded':
572576
return sourcePalette.neutral[86];
573577
case 'LongRunningAltPalette':
574578
return sourcePalette.neutral[73];
@@ -578,6 +582,9 @@ const cardMediaWaveformLight: ContainerFunction = (containerPalette) => {
578582
return sourcePalette.culture[600];
579583
case 'SpecialReportAltPalette':
580584
return sourcePalette.specialReportAlt[800];
585+
case 'Branded':
586+
// TODO: @commercial-dev to update to palette('--card-media-waveform') when launching Redesigned Labs Containers
587+
return sourcePalette.neutral[86];
581588
}
582589
};
583590

@@ -589,14 +596,16 @@ const cardMediaWaveformDark: ContainerFunction = (containerPalette) => {
589596
case 'SombreAltPalette':
590597
case 'EventPalette':
591598
case 'SpecialReportAltPalette':
592-
case 'Branded':
593599
return sourcePalette.neutral[38];
594600
case 'LongRunningPalette':
595601
return sourcePalette.brand[400];
596602
case 'BreakingPalette':
597603
return sourcePalette.news[300];
598604
case 'EventAltPalette':
599605
return sourcePalette.culture[300];
606+
case 'Branded':
607+
// TODO: @commercial-dev to update to palette('--card-media-waveform') when launching Redesigned Labs Containers
608+
return sourcePalette.neutral[38];
600609
}
601610
};
602611

@@ -621,7 +630,7 @@ const sectionBackgroundLight: ContainerFunction = (containerPalette) => {
621630
case 'SpecialReportAltPalette':
622631
return sourcePalette.specialReportAlt[800];
623632
case 'Branded':
624-
return sourcePalette.neutral[93];
633+
return palette('--section-background');
625634
}
626635
};
627636

@@ -645,14 +654,14 @@ const sectionBackgroundDark: ContainerFunction = (containerPalette) => {
645654
case 'SpecialReportAltPalette':
646655
return sourcePalette.specialReportAlt[100];
647656
case 'Branded':
648-
return sourcePalette.neutral[20];
657+
return palette('--section-background');
649658
}
650659
};
651660

652661
const sectionBackgroundLeftLight: ContainerFunction = (containerPalette) => {
653662
switch (containerPalette) {
654663
case 'Branded':
655-
return sourcePalette.labs[400];
664+
return sourcePalette.labs[700];
656665
case 'InvestigationPalette':
657666
case 'LongRunningPalette':
658667
case 'SombrePalette':
@@ -703,6 +712,7 @@ const cardBorderSupportingLight: ContainerFunction = (containerPalette) => {
703712
case 'SpecialReportAltPalette':
704713
return transparentColour(sourcePalette.neutral[46], 0.3);
705714
case 'Branded':
715+
// TODO: @commercial-dev to update to palette('--card-border-supporting') when launching Redesigned Labs Containers
706716
return sourcePalette.neutral[73];
707717
}
708718
};
@@ -725,6 +735,7 @@ const cardBorderSupportingDark: ContainerFunction = (containerPalette) => {
725735
case 'SpecialReportAltPalette':
726736
return transparentColour(sourcePalette.neutral[46], 0.3);
727737
case 'Branded':
738+
// TODO: @commercial-dev to update to palette('--card-border-supporting') when launching Redesigned Labs Containers
728739
return sourcePalette.neutral[46];
729740
}
730741
};
@@ -792,7 +803,7 @@ const sectionDateLight: ContainerFunction = (containerPalette) => {
792803
case 'SpecialReportAltPalette':
793804
return sourcePalette.specialReportAlt[100];
794805
case 'Branded':
795-
return sourcePalette.neutral[100];
806+
return palette('--section-date');
796807
}
797808
};
798809

@@ -814,7 +825,7 @@ const sectionDateDark: ContainerFunction = (containerPalette) => {
814825
case 'SpecialReportAltPalette':
815826
return sourcePalette.specialReportAlt[700];
816827
case 'Branded':
817-
return sourcePalette.neutral[100];
828+
return palette('--section-date');
818829
}
819830
};
820831

@@ -840,7 +851,7 @@ const sectionTitleLight: ContainerFunction = (containerPalette) => {
840851
return sourcePalette.specialReportAlt[100];
841852
// Branded is expected to be used with LabsSection
842853
case 'Branded':
843-
return sourcePalette.neutral[100];
854+
return palette('--article-section-title');
844855
}
845856
};
846857

@@ -865,71 +876,26 @@ const sectionTitleDark: ContainerFunction = (containerPalette) => {
865876
case 'SpecialReportAltPalette':
866877
return sourcePalette.specialReportAlt[700];
867878
case 'Branded':
868-
return sourcePalette.neutral[97];
869-
}
870-
};
871-
872-
const treatTextLight: ContainerFunction = (containerPalette) => {
873-
switch (containerPalette) {
874-
case 'Branded':
875-
return sourcePalette.neutral[46];
876-
case 'EventPalette':
877-
case 'SombreAltPalette':
878-
case 'EventAltPalette':
879-
case 'InvestigationPalette':
880-
case 'LongRunningAltPalette':
881-
case 'LongRunningPalette':
882-
case 'SombrePalette':
883-
case 'BreakingPalette':
884-
case 'SpecialReportAltPalette':
885-
return 'inherit';
886-
}
887-
};
888-
889-
const treatTextDark: ContainerFunction = (containerPalette) => {
890-
switch (containerPalette) {
891-
case 'Branded':
892-
return sourcePalette.neutral[38];
893-
case 'EventPalette':
894-
case 'SombreAltPalette':
895-
case 'EventAltPalette':
896-
case 'InvestigationPalette':
897-
case 'LongRunningAltPalette':
898-
case 'LongRunningPalette':
899-
case 'SombrePalette':
900-
case 'BreakingPalette':
901-
case 'SpecialReportAltPalette':
902-
return 'inherit';
879+
return palette('--article-section-title');
903880
}
904881
};
905882

906-
const carouselDotLight: ContainerFunction = () => {
907-
return sourcePalette.brandAlt[400];
908-
};
909-
910-
const carouselDotDark: ContainerFunction = () => {
911-
return sourcePalette.brandAlt[400];
912-
};
883+
const treatTextLight: ContainerFunction = () => 'inherit';
884+
const treatTextDark: ContainerFunction = () => 'inherit';
913885

914-
const carouselActiveDotLight: ContainerFunction = () => {
915-
return sourcePalette.news[400];
916-
};
886+
const carouselDotLight: ContainerFunction = () => sourcePalette.brandAlt[400];
887+
const carouselDotDark: ContainerFunction = () => sourcePalette.brandAlt[400];
917888

918-
const carouselActiveDotDark: ContainerFunction = () => {
919-
return sourcePalette.news[400];
920-
};
889+
const carouselActiveDotLight: ContainerFunction = () => sourcePalette.news[400];
890+
const carouselActiveDotDark: ContainerFunction = () => sourcePalette.news[400];
921891

922-
const carouselArrow: ContainerFunction = () => {
923-
return sourcePalette.neutral[7];
924-
};
892+
const carouselArrow: ContainerFunction = () => sourcePalette.neutral[7];
925893

926-
const carouselArrowBackground: ContainerFunction = () => {
927-
return sourcePalette.brandAlt[400];
928-
};
894+
const carouselArrowBackground: ContainerFunction = () =>
895+
sourcePalette.brandAlt[400];
929896

930-
const carouselArrowBackgroundHover: ContainerFunction = () => {
931-
return sourcePalette.brandAlt[200];
932-
};
897+
const carouselArrowBackgroundHover: ContainerFunction = () =>
898+
sourcePalette.brandAlt[200];
933899

934900
const carouselChevronLight: ContainerFunction = (containerPalette) =>
935901
cardHeadlineLight(containerPalette);

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const meta = {
3030
},
3131
},
3232
} satisfies Meta<typeof Masthead>;
33+
3334
export default meta;
3435

3536
export const WithoutSubnav = {};
@@ -49,3 +50,30 @@ export const WithPageSkin = {
4950
export const WithPageSkinAndContentSelfContstrain = {
5051
args: { hasPageSkinContentSelfConstrain: true },
5152
};
53+
54+
export const WithUsLogoAndWithoutSubnav = {
55+
args: { wholePictureLogoSwitch: true, editionId: 'US' },
56+
};
57+
58+
export const WithUsLogoAndSubnav = {
59+
args: { ...WithUsLogoAndWithoutSubnav.args, showSubNav: true },
60+
};
61+
62+
export const WithUsLogoAndSlimNav = {
63+
args: {
64+
...WithUsLogoAndWithoutSubnav.args,
65+
showSlimNav: true,
66+
displayRoundel: true,
67+
},
68+
};
69+
70+
export const WithUsLogoAndPageSkin = {
71+
args: { ...WithUsLogoAndWithoutSubnav.args, hasPageSkin: true },
72+
};
73+
74+
export const WithUsLogoAndPageSkinAndContentSelfContstrain = {
75+
args: {
76+
...WithUsLogoAndWithoutSubnav.args,
77+
hasPageSkinContentSelfConstrain: true,
78+
},
79+
};

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
type ProductLinkButtonProps = {
99
label: string;
1010
url: string;
11+
dataComponent?: string;
1112
};
1213

1314
const linkButtonStyles = css`
@@ -19,7 +20,11 @@ const linkButtonStyles = css`
1920
overflow-wrap: break-word;
2021
`;
2122

22-
export const ProductLinkButton = ({ label, url }: ProductLinkButtonProps) => {
23+
export const ProductLinkButton = ({
24+
label,
25+
url,
26+
dataComponent = 'in-body-product-link-button',
27+
}: ProductLinkButtonProps) => {
2328
return (
2429
<LinkButton
2530
href={url}
@@ -32,6 +37,7 @@ export const ProductLinkButton = ({ label, url }: ProductLinkButtonProps) => {
3237
data-link-name="in body link"
3338
data-spacefinder-role="inline"
3439
cssOverrides={[linkButtonStyles]}
40+
data-component={dataComponent}
3541
>
3642
{label}
3743
</LinkButton>

‎dotcom-rendering/src/layouts/AllEditorialNewslettersPageLayout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export const AllEditorialNewslettersPageLayout = ({
4444
showSlimNav={false}
4545
hasPageSkin={false}
4646
hasPageSkinContentSelfConstrain={false}
47+
wholePictureLogoSwitch={config.switches.wholePictureLogo}
4748
/>
4849
</div>
4950

‎dotcom-rendering/src/layouts/AudioLayout.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,9 @@ export const AudioLayout = (props: WebProps) => {
184184
showSlimNav={false}
185185
hasPageSkinContentSelfConstrain={true}
186186
pageId={article.pageId}
187+
wholePictureLogoSwitch={
188+
article.config.switches.wholePictureLogo
189+
}
187190
/>
188191
</div>
189192

‎dotcom-rendering/src/layouts/CommentLayout.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
335335
hasPageSkin={false}
336336
hasPageSkinContentSelfConstrain={false}
337337
pageId={article.pageId}
338+
wholePictureLogoSwitch={
339+
article.config.switches.wholePictureLogo
340+
}
338341
/>
339342
</div>
340343
)}

‎dotcom-rendering/src/layouts/CrosswordLayout.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,9 @@ export const CrosswordLayout = (props: Props) => {
157157
hasPageSkin={false}
158158
hasPageSkinContentSelfConstrain={false}
159159
pageId={article.pageId}
160+
wholePictureLogoSwitch={
161+
article.config.switches.wholePictureLogo
162+
}
160163
/>
161164
</div>
162165

‎dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,9 @@ const NavHeader = ({ article, NAV, renderAds }: HeaderProps) => {
181181
hasPageSkin={false}
182182
hasPageSkinContentSelfConstrain={false}
183183
pageId={article.pageId}
184+
wholePictureLogoSwitch={
185+
article.config.switches.wholePictureLogo
186+
}
184187
/>
185188
</section>
186189
);

‎dotcom-rendering/src/layouts/GalleryLayout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
181181
frontendData.isCommentable && !frontendData.config.isPaidContent;
182182

183183
const { absoluteServerTimes = false } = switches;
184+
184185
return (
185186
<>
186187
{isWeb && (
@@ -213,6 +214,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
213214
hasPageSkin={false}
214215
hasPageSkinContentSelfConstrain={false}
215216
pageId={frontendData.pageId}
217+
wholePictureLogoSwitch={switches.wholePictureLogo}
216218
/>
217219
</div>
218220
)}

‎dotcom-rendering/src/layouts/ImmersiveLayout.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,9 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
326326
hasPageSkin={false}
327327
hasPageSkinContentSelfConstrain={false}
328328
pageId={article.pageId}
329+
wholePictureLogoSwitch={
330+
article.config.switches.wholePictureLogo
331+
}
329332
/>
330333
)}
331334

0 commit comments

Comments
 (0)