Skip to content

Commit 86b783d

Browse files
domlanderdomlander
authored
Merge pull request #14981 from guardian/doml/more-galleries-fixed-card-sizes
More Galleries: fixed card sizes
2 parents fc806f3 + 4b9c1aa commit 86b783d

File tree

2 files changed

+143
-105
lines changed

2 files changed

+143
-105
lines changed

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

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { breakpoints } from '@guardian/source/foundations';
12
import type { Meta, StoryObj } from '@storybook/react-webpack5';
23
import { galleryOnwardsTrails } from '../../fixtures/manual/onwardsTrails';
34
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
@@ -12,7 +13,7 @@ export default meta;
1213

1314
type Story = StoryObj<typeof meta>;
1415

15-
export const MoreGalleries = {
16+
export const Default = {
1617
args: {
1718
discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
1819
guardianBaseUrl: 'https://www.theguardian.com',
@@ -23,4 +24,41 @@ export const MoreGalleries = {
2324
theme: Pillar.Culture,
2425
},
2526
},
27+
parameters: {
28+
chromatic: {
29+
viewports: [breakpoints.mobile, breakpoints.desktop],
30+
},
31+
},
32+
} satisfies Story;
33+
34+
export const WithFourCards = {
35+
...Default,
36+
args: {
37+
...Default.args,
38+
trails: galleryOnwardsTrails.slice(0, 4),
39+
},
40+
} satisfies Story;
41+
42+
export const WithThreeCards = {
43+
...Default,
44+
args: {
45+
...Default.args,
46+
trails: galleryOnwardsTrails.slice(0, 3),
47+
},
48+
} satisfies Story;
49+
50+
export const WithTwoCards = {
51+
...Default,
52+
args: {
53+
...Default.args,
54+
trails: galleryOnwardsTrails.slice(0, 2),
55+
},
56+
} satisfies Story;
57+
58+
export const WithOneCard = {
59+
...Default,
60+
args: {
61+
...Default.args,
62+
trails: galleryOnwardsTrails.slice(0, 1),
63+
},
2664
} satisfies Story;

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

Lines changed: 104 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -22,35 +22,14 @@ type Props = {
2222
format: ArticleFormat;
2323
};
2424

25-
const standardCardStyles = css`
26-
flex: 1;
27-
position: relative;
28-
display: flex;
29-
padding: ${space[2]}px;
30-
background-color: ${palette('--onward-more-galleries-card-background')};
31-
32-
${from.tablet} {
33-
:not(:first-child)::before {
34-
content: '';
35-
position: absolute;
36-
top: 0;
37-
bottom: 0;
38-
left: -10px; /* shift into the gap */
39-
width: 1px;
40-
background: ${palette('--onward-content-border')};
41-
}
42-
}
43-
`;
44-
4525
const standardCardsListStyles = css`
4626
width: 100%;
47-
display: flex;
48-
flex-direction: column;
27+
display: grid;
4928
gap: 20px;
5029
margin-bottom: ${space[6]}px;
5130
5231
${from.tablet} {
53-
flex-direction: row;
32+
grid-template-columns: repeat(4, 1fr);
5433
padding-top: ${space[2]}px;
5534
}
5635
@@ -80,6 +59,107 @@ const cardsContainerStyles = css`
8059
}
8160
`;
8261

62+
const standardCardStyles = css`
63+
position: relative;
64+
display: flex;
65+
padding: ${space[2]}px;
66+
background-color: ${palette('--onward-more-galleries-card-background')};
67+
68+
${from.tablet} {
69+
:not(:first-child)::before {
70+
content: '';
71+
position: absolute;
72+
top: 0;
73+
bottom: 0;
74+
left: -10px; /* shift into the gap */
75+
width: 1px;
76+
background: ${palette('--onward-content-border')};
77+
}
78+
}
79+
`;
80+
81+
const headerStyles = css`
82+
color: ${palette('--carousel-text')};
83+
${headlineBold24};
84+
padding-bottom: ${space[3]}px;
85+
padding-top: ${space[1]}px;
86+
87+
:hover {
88+
text-decoration: underline;
89+
}
90+
91+
${from.tablet} {
92+
${headlineBold28};
93+
}
94+
`;
95+
96+
const Title = ({ guardianBaseUrl }: { guardianBaseUrl: string }) => (
97+
<a
98+
css={css`
99+
${grid.column.centre}
100+
color: ${palette('--caption-text')};
101+
text-decoration: none;
102+
align-self: start;
103+
104+
${from.leftCol} {
105+
${grid.column.left}
106+
}
107+
`}
108+
href={`${guardianBaseUrl}/inpictures/all`}
109+
data-link-name="section heading"
110+
>
111+
<h2 css={headerStyles}>More galleries</h2>
112+
</a>
113+
);
114+
115+
const MoreGalleriesSplashCard = ({
116+
defaultProps,
117+
}: {
118+
defaultProps: CardProps;
119+
}) => {
120+
const cardProps: Partial<CardProps> = {
121+
headlineSizes: {
122+
desktop: 'medium',
123+
tablet: 'medium',
124+
mobile: 'medium',
125+
},
126+
mediaPositionOnDesktop: 'right',
127+
mediaPositionOnMobile: 'top',
128+
mediaSize: 'medium',
129+
isOnwardSplash: true,
130+
};
131+
132+
return (
133+
<div
134+
css={[
135+
cardsContainerStyles,
136+
css`
137+
margin-bottom: ${space[6]}px;
138+
background-color: ${palette(
139+
'--onward-more-galleries-card-background',
140+
)};
141+
padding: ${space[2]}px;
142+
${from.leftCol} {
143+
&::before {
144+
content: '';
145+
position: absolute;
146+
left: -11px;
147+
top: 8px;
148+
bottom: 0;
149+
width: 1px;
150+
background-color: ${palette(
151+
'--onward-content-border',
152+
)};
153+
}
154+
}
155+
`,
156+
]}
157+
>
158+
<Card {...defaultProps} {...cardProps} />
159+
</div>
160+
);
161+
};
162+
83163
const getDefaultCardProps = (
84164
trail: TrailType,
85165
discussionApiUrl: string,
@@ -121,6 +201,7 @@ const getDefaultCardProps = (
121201
isOnwardContent: true,
122202
onwardsSource: 'more-galleries',
123203
};
204+
124205
return defaultProps;
125206
};
126207

@@ -192,84 +273,3 @@ export const MoreGalleries = (props: Props) => {
192273
</div>
193274
);
194275
};
195-
196-
const MoreGalleriesSplashCard = ({
197-
defaultProps,
198-
}: {
199-
defaultProps: CardProps;
200-
}) => {
201-
const cardProps: Partial<CardProps> = {
202-
headlineSizes: {
203-
desktop: 'medium',
204-
tablet: 'medium',
205-
mobile: 'medium',
206-
},
207-
mediaPositionOnDesktop: 'right',
208-
mediaPositionOnMobile: 'top',
209-
mediaSize: 'medium',
210-
isOnwardSplash: true,
211-
};
212-
return (
213-
<div
214-
css={[
215-
cardsContainerStyles,
216-
css`
217-
margin-bottom: ${space[6]}px;
218-
background-color: ${palette(
219-
'--onward-more-galleries-card-background',
220-
)};
221-
padding: ${space[2]}px;
222-
${from.leftCol} {
223-
&::before {
224-
content: '';
225-
position: absolute;
226-
left: -11px;
227-
top: 8px;
228-
bottom: 0;
229-
width: 1px;
230-
background-color: ${palette(
231-
'--onward-content-border',
232-
)};
233-
}
234-
}
235-
`,
236-
]}
237-
>
238-
<Card {...defaultProps} {...cardProps} />
239-
</div>
240-
);
241-
};
242-
243-
const Title = ({ guardianBaseUrl }: { guardianBaseUrl: string }) => (
244-
<a
245-
css={css`
246-
${grid.column.centre}
247-
color: ${palette('--caption-text')};
248-
text-decoration: none;
249-
align-self: start;
250-
251-
${from.leftCol} {
252-
${grid.column.left}
253-
}
254-
`}
255-
href={`${guardianBaseUrl}/inpictures/all`}
256-
data-link-name="section heading"
257-
>
258-
<h2 css={headerStyles}>More galleries</h2>
259-
</a>
260-
);
261-
262-
const headerStyles = css`
263-
color: ${palette('--carousel-text')};
264-
${headlineBold24};
265-
padding-bottom: ${space[3]}px;
266-
padding-top: ${space[1]}px;
267-
268-
:hover {
269-
text-decoration: underline;
270-
}
271-
272-
${from.tablet} {
273-
${headlineBold28};
274-
}
275-
`;

0 commit comments

Comments
 (0)