Skip to content

Commit 4adcba5

Browse files
ioannakokioannakok
authored
Merge pull request #14963 from guardian/design-tweaks-in-galleries-meta
Design tweaks in galleries header meta
2 parents b6b1c63 + a200b23 commit 4adcba5

File tree

6 files changed

+127
-42
lines changed

6 files changed

+127
-42
lines changed

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

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,17 @@ type Props = {
3535

3636
type IconProps = {
3737
format: ArticleFormat;
38+
isMainMedia?: boolean;
3839
};
3940

40-
const captionStyle = css`
41+
const captionStyle = (isMainMedia: boolean) => css`
4142
${textSans14};
4243
line-height: 135%;
4344
padding-top: 6px;
4445
overflow-wrap: break-word;
45-
color: ${palette('--caption-text')};
46+
color: ${isMainMedia
47+
? palette('--caption-main-media-text')
48+
: palette('--caption-text')};
4649
`;
4750

4851
const bottomMarginStyles = css`
@@ -167,8 +170,10 @@ const hideIconBelowLeftCol = css`
167170
const pictureRatio = (13 / 18) * 100;
168171
const videoRatio = (23 / 36) * 100;
169172

170-
const iconStyle = css`
171-
fill: ${palette('--caption-text')};
173+
const iconStyle = (isMainMedia?: boolean) => css`
174+
fill: ${isMainMedia
175+
? palette('--caption-main-media-text')
176+
: palette('--caption-text')};
172177
margin-right: ${space[1]}px;
173178
display: inline-block;
174179
position: relative;
@@ -246,11 +251,11 @@ const galleryStyles = css`
246251
}
247252
`;
248253

249-
const CameraIcon = ({ format }: IconProps) => {
254+
const CameraIcon = ({ format, isMainMedia }: IconProps) => {
250255
return (
251256
<span
252257
css={[
253-
iconStyle,
258+
iconStyle(isMainMedia),
254259
format.display === ArticleDisplay.Immersive &&
255260
hideIconBelowLeftCol,
256261
]}
@@ -260,11 +265,11 @@ const CameraIcon = ({ format }: IconProps) => {
260265
);
261266
};
262267

263-
const VideoIcon = ({ format }: IconProps) => {
268+
const VideoIcon = ({ format, isMainMedia }: IconProps) => {
264269
return (
265270
<span
266271
css={[
267-
iconStyle,
272+
iconStyle(isMainMedia),
268273
format.display === ArticleDisplay.Immersive &&
269274
hideIconBelowLeftCol,
270275
videoIconStyle,
@@ -303,7 +308,7 @@ export const Caption = ({
303308
const defaultCaption = (
304309
<figcaption
305310
css={[
306-
captionStyle,
311+
captionStyle(isMainMedia),
307312
shouldLimitWidth && limitedWidth,
308313
isOverlaid ? overlaidStyles(format) : bottomMarginStyles,
309314
isMainMedia &&
@@ -318,9 +323,9 @@ export const Caption = ({
318323
data-spacefinder-role="inline"
319324
>
320325
{mediaType === 'YoutubeVideo' || mediaType === 'SelfHostedVideo' ? (
321-
<VideoIcon format={format} />
326+
<VideoIcon format={format} isMainMedia={isMainMedia} />
322327
) : (
323-
<CameraIcon format={format} />
328+
<CameraIcon format={format} isMainMedia={isMainMedia} />
324329
)}
325330
{!!captionText && (
326331
<span
@@ -352,9 +357,7 @@ export const Caption = ({
352357
*/
353358
line-height: 1.15;
354359
color: ${isMainMedia
355-
? palette(
356-
'--caption-photo-essay-main-media-text',
357-
)
360+
? palette('--caption-main-media-text')
358361
: palette('--caption-text')};
359362
width: 100%;
360363
margin-top: ${space[3]}px;
@@ -365,9 +368,7 @@ export const Caption = ({
365368
padding-top: ${space[2]}px;
366369
border-top: 1px solid
367370
${isMainMedia
368-
? palette(
369-
'--caption-photo-essay-main-media-text',
370-
)
371+
? palette('--caption-main-media-text')
371372
: palette('--caption-text')};
372373
}
373374
`,

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

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,16 @@ const standfirstColourBelowDesktop = css`
3131
}
3232
`;
3333

34+
const galleryBylineStyles = css`
35+
a {
36+
font-style: italic;
37+
:hover {
38+
text-decoration: none;
39+
border-color: ${schemedPalette('--byline-anchor')};
40+
}
41+
}
42+
`;
43+
3444
const bylineStyles = (format: ArticleFormat) => {
3545
const defaultStyles = css`
3646
${headlineMedium17}
@@ -53,18 +63,25 @@ const bylineStyles = (format: ArticleFormat) => {
5363

5464
switch (format.design) {
5565
case ArticleDesign.Gallery:
56-
return css`
57-
${defaultStyles}
58-
a {
59-
font-style: italic;
60-
border-bottom: 0.5px solid ${sourcePalette.neutral[46]};
61-
:hover {
62-
text-decoration: none;
63-
border-color: ${schemedPalette('--byline-anchor')};
64-
}
65-
}
66-
`;
66+
switch (format.theme) {
67+
case ArticleSpecial.Labs: {
68+
return css`
69+
${defaultStyles}
70+
${galleryBylineStyles}
6771
72+
a {
73+
border-bottom: 0.5px solid
74+
${sourcePalette.neutral[46]};
75+
}
76+
`;
77+
}
78+
default: {
79+
return css`
80+
${defaultStyles}
81+
${galleryBylineStyles}
82+
`;
83+
}
84+
}
6885
default:
6986
return defaultStyles;
7087
}

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

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import {
88
SvgShareWeb,
99
} from '@guardian/source/react-components';
1010
import { useEffect, useMemo, useState } from 'react';
11-
import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
11+
import {
12+
ArticleDesign,
13+
type ArticleFormat,
14+
ArticleSpecial,
15+
} from '../lib/articleFormat';
1216
import { transparentColour } from '../lib/transparentColour';
1317
import { useMatchMedia } from '../lib/useMatchMedia';
1418
import { palette as themePalette } from '../palette';
@@ -35,9 +39,14 @@ type ButtonKind = 'native' | 'copy' | 'email';
3539

3640
type Context = 'ArticleMeta' | 'LiveBlock' | 'SubMeta' | 'ImageCaption';
3741

38-
const sharedButtonStyles = (sizeXSmall: boolean) => css`
42+
const sharedButtonStyles = (
43+
sizeXSmall: boolean,
44+
isNonLabsGalleryMeta: boolean,
45+
) => css`
3946
transition: none;
40-
border-color: ${sizeXSmall
47+
border-color: ${isNonLabsGalleryMeta
48+
? themePalette('--share-button-border-meta')
49+
: sizeXSmall
4150
? themePalette('--share-button-xsmall-border')
4251
: themePalette('--share-button-border')};
4352
height: ${sizeXSmall ? '24px' : '36px'};
@@ -123,13 +132,16 @@ export const CopyNativeShareButton = ({
123132
size,
124133
isLiveBlogMeta,
125134
isCopied,
135+
isNonLabsGalleryMeta,
126136
}: {
127137
onShare: () => void;
128138
size?: Size;
129139
isLiveBlogMeta: boolean;
130140
isCopied: boolean;
141+
isNonLabsGalleryMeta: boolean;
131142
}) => {
132143
const sizeXSmall = size === 'xsmall';
144+
133145
return (
134146
<Button
135147
onClick={onShare}
@@ -142,7 +154,7 @@ export const CopyNativeShareButton = ({
142154
...(isCopied
143155
? [copiedButtonStyles(sizeXSmall)]
144156
: [buttonStyles(sizeXSmall)]),
145-
sharedButtonStyles(sizeXSmall),
157+
sharedButtonStyles(sizeXSmall, isNonLabsGalleryMeta),
146158
isLiveBlogMeta && liveBlogMobileMeta(isCopied),
147159
])}
148160
data-gu-name="share-button"
@@ -156,12 +168,15 @@ export const EmailLink = ({
156168
href,
157169
size,
158170
isLiveBlogMeta,
171+
isNonLabsGalleryMeta,
159172
}: {
160173
href: string;
161174
size?: Size;
162175
isLiveBlogMeta: boolean;
176+
isNonLabsGalleryMeta: boolean;
163177
}) => {
164178
const sizeXSmall = size === 'xsmall';
179+
165180
return (
166181
<LinkButton
167182
href={href}
@@ -172,7 +187,7 @@ export const EmailLink = ({
172187
icon={<SvgShareWeb />}
173188
cssOverrides={css([
174189
buttonStyles(sizeXSmall),
175-
sharedButtonStyles(sizeXSmall),
190+
sharedButtonStyles(sizeXSmall, isNonLabsGalleryMeta),
176191
isLiveBlogMeta && liveBlogMobileMeta(false),
177192
])}
178193
>
@@ -211,6 +226,11 @@ export const ShareButton = ({
211226
const isLiveBlogMeta =
212227
format.design === ArticleDesign.LiveBlog && context === 'ArticleMeta';
213228

229+
const isNonLabsGalleryMeta =
230+
format.design === ArticleDesign.Gallery &&
231+
format.theme !== ArticleSpecial.Labs &&
232+
context === 'ArticleMeta';
233+
214234
const isDesktop = useMatchMedia(`(min-width: ${breakpoints.desktop}px)`);
215235

216236
const isLiveBlogBlockDesktop = isDesktop && context === 'LiveBlock';
@@ -261,6 +281,7 @@ export const ShareButton = ({
261281
size={size}
262282
isLiveBlogMeta={isLiveBlogMeta}
263283
isCopied={isCopied}
284+
isNonLabsGalleryMeta={isNonLabsGalleryMeta}
264285
/>
265286
);
266287
case 'copy':
@@ -277,6 +298,7 @@ export const ShareButton = ({
277298
size={size}
278299
isLiveBlogMeta={isLiveBlogMeta}
279300
isCopied={isCopied}
301+
isNonLabsGalleryMeta={isNonLabsGalleryMeta}
280302
/>
281303
);
282304
case 'email':
@@ -285,6 +307,7 @@ export const ShareButton = ({
285307
href={`mailto:?subject=${webTitle}&body=${shareData.url}`}
286308
size={size}
287309
isLiveBlogMeta={isLiveBlogMeta}
310+
isNonLabsGalleryMeta={isNonLabsGalleryMeta}
288311
/>
289312
);
290313
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export const LinkCopied = () => {
5959
isCopied={true}
6060
isLiveBlogMeta={false}
6161
size="small"
62+
isNonLabsGalleryMeta={false}
6263
/>
6364
);
6465
};
@@ -72,6 +73,7 @@ export const LiveBlogMobileMeta = () => {
7273
isCopied={false}
7374
isLiveBlogMeta={true}
7475
size="small"
76+
isNonLabsGalleryMeta={false}
7577
/>
7678
);
7779
};
@@ -99,6 +101,7 @@ export const EmailLinkStory = () => {
99101
`}
100102
isLiveBlogMeta={true}
101103
size="small"
104+
isNonLabsGalleryMeta={false}
102105
/>
103106
);
104107
};

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { css } from '@emotion/react';
22
import {
33
from,
4-
headlineBold17,
54
headlineLight17,
65
headlineLight20,
76
headlineLight24,
@@ -90,7 +89,7 @@ const decideFont = ({ display, design, theme }: ArticleFormat) => {
9089
`;
9190
}
9291
return css`
93-
${headlineBold17}
92+
${headlineMedium20}
9493
`;
9594
case ArticleDesign.Obituary:
9695
case ArticleDesign.Comment:

0 commit comments

Comments
 (0)