Skip to content

Commit 684e938

Browse files
domlanderdomlander
authored
Merge branch 'main' into doml/add-ozone-test
2 parents 011c5cf + 236854c commit 684e938

11 files changed

Lines changed: 228 additions & 104 deletions

‎dotcom-rendering/src/components/FetchHostedOnwards.island.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,18 @@ import { HostedContentOnwards } from './HostedContentOnwards';
66
type Props = {
77
url: string;
88
branding?: Branding;
9+
isGalleryPage?: boolean;
910
};
1011

1112
type OnwardsResponse = {
1213
trails: TrailType[];
1314
};
1415

15-
export const FetchHostedOnwards = ({ branding, url }: Props) => {
16+
export const FetchHostedOnwards = ({
17+
branding,
18+
url,
19+
isGalleryPage = false,
20+
}: Props) => {
1621
const { data, error } = useApi<OnwardsResponse>(url);
1722

1823
if (error) {
@@ -31,6 +36,7 @@ export const FetchHostedOnwards = ({ branding, url }: Props) => {
3136
<HostedContentOnwards
3237
trails={trails}
3338
brandName={branding?.sponsorName ?? ''}
39+
isGalleryPage={isGalleryPage}
3440
/>
3541
);
3642
};

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,14 @@ const hostedGalleryStyles = css`
5555
${textSansBold17}
5656
align-self: end;
5757
58+
${from.tablet} {
59+
padding-bottom: ${space[10]}px;
60+
}
61+
5862
${between.tablet.and.desktop} {
5963
padding-left: 0;
6064
padding-right: 0;
6165
}
62-
63-
${from.tablet} {
64-
padding-bottom: ${space[10]}px;
65-
}
6666
`;
6767

6868
const positionIndicatorStyles = css`

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
22
import { isUndefined } from '@guardian/libs';
33
import { between, from, space, until } from '@guardian/source/foundations';
44
import { grid } from '../grid';
5-
import { type ArticleFormat } from '../lib/articleFormat';
5+
import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
66
import { getImage } from '../lib/image';
77
import { palette } from '../palette';
88
import type { ImageBlockElement } from '../types/content';
@@ -47,6 +47,12 @@ const styles = css`
4747
}
4848
`;
4949

50+
const hostedGalleryOverrides = css`
51+
${between.desktop.and.leftCol} {
52+
${grid.centreRule(2, 'transparent')}
53+
}
54+
`;
55+
5056
const galleryBodyImageStyles = css`
5157
display: inline;
5258
position: relative;
@@ -87,7 +93,13 @@ export const GalleryImage = ({
8793
}
8894

8995
return (
90-
<figure css={styles}>
96+
<figure
97+
css={[
98+
styles,
99+
format.design === ArticleDesign.HostedGallery &&
100+
hostedGalleryOverrides,
101+
]}
102+
>
91103
<div
92104
css={galleryBodyImageStyles}
93105
/**

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

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,60 @@
1+
import { css } from '@emotion/react';
12
import { hostedPaletteDecorator } from '../../.storybook/decorators/themeDecorator';
23
import preview from '../../.storybook/preview';
34
import { hostedOnwardsTrails } from '../../fixtures/manual/onwardsTrails';
5+
import type { ArticleFormat } from '../lib/articleFormat';
6+
import {
7+
ArticleDesign,
8+
ArticleDisplay,
9+
ArticleSpecial,
10+
} from '../lib/articleFormat';
11+
import { palette } from '../palette';
412
import { HostedContentOnwards } from './HostedContentOnwards';
513

14+
const hostedArticleFormat: ArticleFormat = {
15+
theme: ArticleSpecial.Labs,
16+
display: ArticleDisplay.Standard,
17+
design: ArticleDesign.HostedArticle,
18+
};
19+
620
const meta = preview.meta({
721
component: HostedContentOnwards,
822
title: 'Components/HostedContentOnwards',
923
args: {
1024
trails: hostedOnwardsTrails,
1125
brandName: 'TrendAI',
26+
isGalleryPage: false,
27+
},
28+
parameters: {
29+
formats: [hostedArticleFormat],
1230
},
13-
render: (args) => <HostedContentOnwards {...args} />,
31+
render: (args) => (
32+
<div
33+
css={css`
34+
background-color: ${palette('--article-background')};
35+
`}
36+
>
37+
<HostedContentOnwards {...args} />
38+
</div>
39+
),
1440
});
1541

1642
export const Default = meta.story({});
1743

1844
export const WithAccentColour = meta.story({
1945
decorators: hostedPaletteDecorator('#d90c1f'),
2046
});
47+
48+
const hostedGalleryFormat: ArticleFormat = {
49+
...hostedArticleFormat,
50+
design: ArticleDesign.HostedGallery,
51+
};
52+
export const HostedGallery = meta.story({
53+
args: {
54+
isGalleryPage: true,
55+
},
56+
parameters: {
57+
formats: [hostedGalleryFormat],
58+
},
59+
decorators: [hostedPaletteDecorator('#d90c1f')],
60+
});

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

Lines changed: 56 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { css } from '@emotion/react';
22
import {
3-
palette as sourcePalette,
3+
from,
44
space,
55
textSans17,
66
textSansBold20,
@@ -12,26 +12,27 @@ import { HostedContentOnwardsCard } from './HostedContentOnwardsCard';
1212
type HostedContentOnwardsProps = {
1313
trails: TrailType[];
1414
brandName: string;
15+
isGalleryPage: boolean;
1516
};
1617

18+
/**
19+
* Override --accent-colour variable at a higher CSS specificity
20+
* for hosted gallery articles only, because this only has a dark design
21+
*/
22+
const galleryOverrides = css`
23+
--accent-colour: ${palette('--onward-text')};
24+
`;
25+
1726
const headerStyles = css`
1827
margin-bottom: ${space[1]}px;
19-
border-top: ${space[2]}px solid
20-
var(--accent-colour, ${sourcePalette.neutral[86]});
28+
border-top: ${space[2]}px solid var(--accent-colour, var(--onward-text));
2129
`;
2230

2331
const headingStyles = css`
2432
${textSans17}
2533
padding-top: ${space[2]}px;
26-
color: ${palette('--hosted-content-onwards-heading')};
27-
28-
@media (prefers-color-scheme: dark) {
29-
color: ${palette('--hosted-content-onwards-heading')};
30-
}
31-
32-
[data-color-scheme='dark'] & {
33-
color: ${palette('--hosted-content-onwards-heading')};
34-
}
34+
padding-bottom: ${space[2]}px;
35+
color: ${palette('--onward-text')};
3536
3637
span {
3738
${textSansBold20}
@@ -47,37 +48,71 @@ const stackedCardsStyles = css`
4748

4849
const stackedCardWrapper = css`
4950
width: 100%;
50-
border-top: 2px solid ${palette('--onward-content-border')};
51-
padding-top: ${space[2]}px;
52-
padding-bottom: ${space[2]}px;
51+
border-top: 1px solid ${palette('--article-border')};
52+
padding: ${space[2]}px 0;
5353
5454
&:last-of-type {
55-
padding-bottom: 0;
55+
padding: ${space[2]}px 0 0 0;
56+
}
57+
`;
58+
59+
const rowCardWrapper = css`
60+
${stackedCardWrapper}
61+
${from.desktop} {
62+
width: 100%;
63+
border-top: none;
64+
border-right: 1px solid ${palette('--article-border')};
65+
padding: 0 ${space[2]}px;
66+
67+
&:first-of-type {
68+
padding: 0 ${space[2]}px 0 0;
69+
}
70+
&:last-of-type {
71+
border-right: none;
72+
padding: 0 0 0 ${space[2]}px;
73+
}
74+
}
75+
`;
76+
77+
const galleryStyles = css`
78+
${from.desktop} {
79+
flex-direction: row;
5680
}
5781
`;
5882

5983
export const HostedContentOnwards = ({
6084
trails,
6185
brandName,
86+
isGalleryPage = false,
6287
}: HostedContentOnwardsProps) => {
6388
return (
64-
<>
89+
<div css={isGalleryPage && galleryOverrides}>
6590
<header css={headerStyles}>
6691
<h2 css={headingStyles}>
6792
More from
6893
<span>{brandName}</span>
6994
</h2>
7095
</header>
7196

72-
<ul css={stackedCardsStyles}>
97+
<ul css={[stackedCardsStyles, isGalleryPage && galleryStyles]}>
7398
{trails.map((trail) => {
7499
return (
75-
<li key={trail.url} css={stackedCardWrapper}>
76-
<HostedContentOnwardsCard trail={trail} />
100+
<li
101+
key={trail.url}
102+
css={
103+
isGalleryPage
104+
? rowCardWrapper
105+
: stackedCardWrapper
106+
}
107+
>
108+
<HostedContentOnwardsCard
109+
trail={trail}
110+
isGalleryPage={isGalleryPage}
111+
/>
77112
</li>
78113
);
79114
})}
80115
</ul>
81-
</>
116+
</div>
82117
);
83118
};

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

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
11
import { css } from '@emotion/react';
22
import { space, textSansBold15 } from '@guardian/source/foundations';
33
import { getZIndex } from '../lib/getZIndex';
4+
import { generateImageURL } from '../lib/image';
45
import { palette } from '../palette';
56
import type { TrailType } from '../types/trails';
67

78
type Props = {
89
trail: TrailType;
10+
isGalleryPage?: boolean;
911
};
1012

11-
type CardPictureProps = {
12-
image: string;
13-
alt: string;
14-
};
15-
16-
const imageStyles = css`
17-
width: 120px;
18-
`;
19-
2013
const mediaOverlayContainerStyles = css`
2114
position: absolute;
2215
top: 0;
@@ -61,28 +54,30 @@ const headingStyles = css`
6154
color: ${palette('--card-headline')};
6255
`;
6356

64-
const CardPicture = ({ image, alt }: CardPictureProps) => {
65-
return (
66-
<>
67-
<picture>
68-
<img alt={alt} src={image} css={imageStyles} />
69-
</picture>
70-
<div css={mediaOverlayContainerStyles}>
71-
<div className="media-overlay" />
72-
</div>
73-
</>
74-
);
75-
};
76-
77-
export const HostedContentOnwardsCard = ({ trail }: Props) => {
57+
export const HostedContentOnwardsCard = ({
58+
trail,
59+
isGalleryPage = false,
60+
}: Props) => {
7861
return (
7962
<a href={trail.url} css={linkStyles}>
8063
<h3 css={headingStyles}>{trail.headline}</h3>
8164
{!!trail.image && (
82-
<CardPicture
83-
image={trail.image.src}
84-
alt={trail.image.altText || ''}
85-
/>
65+
<>
66+
<picture>
67+
<img
68+
alt={trail.image.altText}
69+
src={generateImageURL({
70+
mainImage: trail.image.src,
71+
imageWidth: isGalleryPage ? 180 : 120,
72+
resolution: 'low',
73+
aspectRatio: '5:4',
74+
})}
75+
/>
76+
</picture>
77+
<div css={mediaOverlayContainerStyles}>
78+
<div className="media-overlay" />
79+
</div>
80+
</>
8681
)}
8782
</a>
8883
);

‎dotcom-rendering/src/layouts/HostedArticleLayout.stories.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,6 @@ const meta = preview.meta({
3030
component: HostedArticleLayout,
3131
parameters: {
3232
config: { darkModeAvailable: true },
33-
chromatic: {
34-
modes: {
35-
'light leftCol': allModes['light leftCol'],
36-
},
37-
},
3833
},
3934
render: (args) => {
4035
global.fetch = mockOnwardsContentFetch;
@@ -80,6 +75,11 @@ export const Web = meta.story({
8075
config: {
8176
renderingTarget: 'Web',
8277
},
78+
chromatic: {
79+
modes: {
80+
'light leftCol': allModes['light leftCol'],
81+
},
82+
},
8383
},
8484
});
8585

@@ -134,6 +134,11 @@ export const WithoutAccentColour = meta.story({
134134
config: {
135135
renderingTarget: 'Web',
136136
},
137+
chromatic: {
138+
modes: {
139+
'light leftCol': allModes['light leftCol'],
140+
},
141+
},
137142
},
138143
decorators: hostedPaletteDecorator(''),
139144
});
@@ -173,5 +178,10 @@ export const WithoutMainMediaCaption = meta.story({
173178
config: {
174179
renderingTarget: 'Web',
175180
},
181+
chromatic: {
182+
modes: {
183+
'light leftCol': allModes['light leftCol'],
184+
},
185+
},
176186
},
177187
});

0 commit comments

Comments
 (0)