Skip to content

Commit 39a4669

Browse files
cemms1cemms1
authored
Put the Labs Redesign live (#15007)
1 parent 4682797 commit 39a4669

23 files changed

+123
-1116
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ type Props = {
2222
ophanComponentName?: string;
2323
isLabs?: boolean;
2424
isAdvertisingPartner?: boolean;
25+
dataTestId?: string;
2526
};
2627

2728
const logoImageStyle = css`
@@ -103,8 +104,8 @@ const imageAdvertisingPartnerStyles = css`
103104
* Component used to display branding labels with sponsor logos for
104105
* various types of branded content (paid-content, sponsored, foundation, etc.)
105106
*
106-
* This is used for front container level branding and supports both Labs
107-
* and non-Labs designs. Should eventually replace `CardBranding` and `Badge`.
107+
* This is used for front container level branding and card level branding.
108+
* It supports both Labs and non-Labs designs. This should eventually replace `Badge`.
108109
*/
109110
export const BrandingLabel = ({
110111
branding,
@@ -115,6 +116,7 @@ export const BrandingLabel = ({
115116
ophanComponentName,
116117
isLabs = false,
117118
isAdvertisingPartner = false,
119+
dataTestId = 'branding-logo',
118120
}: Props) => {
119121
const { darkModeAvailable } = useConfig();
120122
const logo = decideBrandingLogo(branding, containerPalette);
@@ -146,7 +148,7 @@ export const BrandingLabel = ({
146148
data-sponsor={branding.sponsorName.toLowerCase()}
147149
rel="nofollow"
148150
aria-label={`Visit the ${branding.sponsorName} website`}
149-
data-testid="branding-logo"
151+
data-testid={dataTestId}
150152
data-component={ophanComponentName}
151153
data-link-name={ophanComponentLink}
152154
className="branding-logo"

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

Lines changed: 76 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import type {
1616
import type { MainMedia } from '../../types/mainMedia';
1717
import { ContainerOverrides } from '../ContainerOverrides';
1818
import { FrontSection } from '../FrontSection';
19-
import { LabsSection } from '../LabsSection';
2019
import { Section } from '../Section';
2120
import type { Props as CardProps } from './Card';
2221
import { Card } from './Card';
@@ -1302,42 +1301,42 @@ const containerPalettes = [
13021301
'Branded',
13031302
] as const satisfies readonly DCRContainerPalette[];
13041303

1305-
export const WithBranding = () => {
1306-
const branding = {
1307-
brandingType: {
1308-
name: 'sponsored',
1309-
},
1310-
sponsorName: 'theguardian.org',
1311-
logo: {
1312-
src: 'https://static.theguardian.com/commercial/sponsor/22/Feb/2024/17ea91fc-659b-4c51-8410-9907241c1710-Guardian.orglogos-for badge.png',
1313-
dimensions: {
1314-
width: 280,
1315-
height: 180,
1316-
},
1317-
link: 'https://theguardian.org/',
1318-
label: 'Supported by',
1304+
const branding = {
1305+
brandingType: {
1306+
name: 'sponsored',
1307+
},
1308+
sponsorName: 'theguardian.org',
1309+
logo: {
1310+
src: 'https://static.theguardian.com/commercial/sponsor/22/Feb/2024/17ea91fc-659b-4c51-8410-9907241c1710-Guardian.orglogos-for badge.png',
1311+
dimensions: {
1312+
width: 280,
1313+
height: 180,
13191314
},
1320-
logoForDarkBackground: {
1321-
src: 'https://static.theguardian.com/commercial/sponsor/22/Feb/2024/21f5a3a5-30e7-4db7-a09f-031af569454d-guardian.org new logo - white version (3).png',
1322-
dimensions: {
1323-
width: 280,
1324-
height: 180,
1325-
},
1326-
link: 'https://theguardian.org/',
1327-
label: 'Supported by',
1315+
link: 'https://theguardian.org/',
1316+
label: 'Supported by',
1317+
},
1318+
logoForDarkBackground: {
1319+
src: 'https://static.theguardian.com/commercial/sponsor/22/Feb/2024/21f5a3a5-30e7-4db7-a09f-031af569454d-guardian.org new logo - white version (3).png',
1320+
dimensions: {
1321+
width: 280,
1322+
height: 180,
13281323
},
1329-
aboutThisLink:
1330-
'https://www.theguardian.com/environment/2023/jan/06/about-animals-farmed-investigating-modern-farming-around-the-world',
1331-
} satisfies Branding;
1324+
link: 'https://theguardian.org/',
1325+
label: 'Supported by',
1326+
},
1327+
aboutThisLink:
1328+
'https://www.theguardian.com/environment/2023/jan/06/about-animals-farmed-investigating-modern-farming-around-the-world',
1329+
} satisfies Branding;
13321330

1331+
export const WithBranding = () => {
13331332
return [undefined, ...containerPalettes].map((containerPalette) => (
13341333
<ContainerOverrides
13351334
key={containerPalette}
13361335
containerPalette={containerPalette}
13371336
>
13381337
<Section title={containerPalette ?? 'Standard'}>
13391338
<UL direction="row" padBottom={true}>
1340-
<LI percentage={'25%'} padSides={true}>
1339+
<LI percentage={'33.333%'} padSides={true}>
13411340
<Card
13421341
{...basicCardProps}
13431342
format={{
@@ -1355,7 +1354,7 @@ export const WithBranding = () => {
13551354
branding={branding}
13561355
/>
13571356
</LI>
1358-
<LI percentage={'25%'} padSides={true}>
1357+
<LI percentage={'33.333%'} padSides={true}>
13591358
<Card
13601359
{...basicCardProps}
13611360
format={{
@@ -1374,7 +1373,7 @@ export const WithBranding = () => {
13741373
branding={branding}
13751374
/>
13761375
</LI>
1377-
<LI percentage={'25%'} padSides={true}>
1376+
<LI percentage={'33.333%'} padSides={true}>
13781377
<Card
13791378
{...basicCardProps}
13801379
format={{
@@ -1392,25 +1391,6 @@ export const WithBranding = () => {
13921391
branding={branding}
13931392
/>
13941393
</LI>
1395-
<LI percentage={'25%'} padSides={true}>
1396-
<Card
1397-
{...basicCardProps}
1398-
format={{
1399-
display: ArticleDisplay.Standard,
1400-
design: ArticleDesign.Standard,
1401-
theme: ArticleSpecial.Labs,
1402-
}}
1403-
headlineText="Redesigned Labs card"
1404-
kickerText="Kicker"
1405-
trailText=""
1406-
mediaPositionOnDesktop="top"
1407-
mediaPositionOnMobile="left"
1408-
mediaSize="small"
1409-
containerPalette={containerPalette}
1410-
branding={branding}
1411-
showLabsRedesign={true}
1412-
/>
1413-
</LI>
14141394
</UL>
14151395
</Section>
14161396
</ContainerOverrides>
@@ -1445,6 +1425,7 @@ export const WithSpecialPaletteVariations = () => {
14451425
containerPalette={containerPalette}
14461426
discussionId="/p/d8ex5"
14471427
discussionApiUrl="https://discussion.theguardian.com/discussion-api"
1428+
branding={branding}
14481429
/>
14491430
</LI>
14501431
<LI percentage={'33.333%'} padSides={true} showDivider={true}>
@@ -1471,48 +1452,36 @@ export const WithSpecialPaletteVariations = () => {
14711452
mediaSize="medium"
14721453
mainMedia={mainAudio}
14731454
containerPalette={containerPalette}
1455+
branding={branding}
14741456
/>
14751457
</LI>
14761458
</UL>
14771459
);
14781460
return (
14791461
<>
1480-
{containerPalettes.map((containerPalette) =>
1481-
containerPalette === 'Branded' ? (
1482-
<LabsSection
1483-
title={containerPalette}
1484-
discussionApiUrl=""
1485-
editionId={'UK'}
1486-
key={containerPalette}
1487-
ajaxUrl=""
1488-
collectionId=""
1489-
ophanComponentLink=""
1490-
ophanComponentName=""
1491-
pageId=""
1492-
sectionId=""
1493-
badge={{
1494-
imageSrc:
1495-
'https://static.theguardian.com/commercial/sponsor/22/Feb/2024/17ea91fc-659b-4c51-8410-9907241c1710-Guardian.orglogos-for%20badge.png',
1496-
href: 'https://theguardian.org',
1497-
}}
1498-
>
1499-
<Cards
1500-
isLabs={true}
1501-
containerPalette={containerPalette}
1502-
/>
1503-
</LabsSection>
1504-
) : (
1505-
<FrontSection
1506-
title={containerPalette}
1507-
discussionApiUrl=""
1508-
editionId={'UK'}
1509-
containerPalette={containerPalette}
1510-
key={containerPalette}
1511-
>
1512-
<Cards containerPalette={containerPalette} />
1513-
</FrontSection>
1514-
),
1515-
)}
1462+
{containerPalettes.map((containerPalette) => (
1463+
<FrontSection
1464+
title={containerPalette}
1465+
discussionApiUrl=""
1466+
editionId={'UK'}
1467+
containerPalette={containerPalette}
1468+
key={containerPalette}
1469+
isLabs={containerPalette === 'Branded'}
1470+
collectionBranding={
1471+
containerPalette === 'Branded'
1472+
? {
1473+
kind: 'paid-content',
1474+
branding,
1475+
isContainerBranding: true,
1476+
hasMultipleBranding: false,
1477+
isFrontBranding: false,
1478+
}
1479+
: undefined
1480+
}
1481+
>
1482+
<Cards containerPalette={containerPalette} />
1483+
</FrontSection>
1484+
))}
15161485
</>
15171486
);
15181487
};
@@ -1585,42 +1554,29 @@ export const DynamoWithSpecialPaletteVariations = () => {
15851554

15861555
return (
15871556
<>
1588-
{containerPalettes.map((containerPalette) =>
1589-
containerPalette === 'Branded' ? (
1590-
<LabsSection
1591-
title={containerPalette}
1592-
discussionApiUrl=""
1593-
editionId={'UK'}
1594-
key={containerPalette}
1595-
ajaxUrl=""
1596-
collectionId=""
1597-
ophanComponentLink=""
1598-
ophanComponentName=""
1599-
pageId=""
1600-
sectionId=""
1601-
badge={{
1602-
imageSrc:
1603-
'https://static.theguardian.com/commercial/sponsor/22/Feb/2024/17ea91fc-659b-4c51-8410-9907241c1710-Guardian.orglogos-for%20badge.png',
1604-
href: 'https://theguardian.org',
1605-
}}
1606-
>
1607-
<DynamoCard
1608-
isLabs={true}
1609-
containerPalette={containerPalette}
1610-
/>
1611-
</LabsSection>
1612-
) : (
1613-
<FrontSection
1614-
title={containerPalette}
1615-
discussionApiUrl=""
1616-
editionId={'UK'}
1617-
containerPalette={containerPalette}
1618-
key={containerPalette}
1619-
>
1620-
<DynamoCard containerPalette={containerPalette} />
1621-
</FrontSection>
1622-
),
1623-
)}
1557+
{containerPalettes.map((containerPalette) => (
1558+
<FrontSection
1559+
title={containerPalette}
1560+
discussionApiUrl=""
1561+
editionId={'UK'}
1562+
containerPalette={containerPalette}
1563+
key={containerPalette}
1564+
isLabs={containerPalette === 'Branded'}
1565+
collectionBranding={
1566+
containerPalette === 'Branded'
1567+
? {
1568+
kind: 'paid-content',
1569+
branding,
1570+
isContainerBranding: true,
1571+
hasMultipleBranding: false,
1572+
isFrontBranding: false,
1573+
}
1574+
: undefined
1575+
}
1576+
>
1577+
<DynamoCard containerPalette={containerPalette} />
1578+
</FrontSection>
1579+
))}
16241580
</>
16251581
);
16261582
};

0 commit comments

Comments
 (0)