Skip to content

Commit 106655f

Browse files
domlanderdomlander
committed
Give scrollable highlights cards colour
1 parent 0d4e28d commit 106655f

File tree

3 files changed

+155
-122
lines changed

3 files changed

+155
-122
lines changed

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

Lines changed: 87 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -35,28 +35,28 @@ export type HighlightsCardProps = {
3535
};
3636

3737
const container = css`
38-
display: grid;
39-
background-color: ${palette('--highlights-container-background')};
40-
/** Relative positioning is required to absolutely
41-
position the card link overlay */
42-
position: relative;
38+
display: flex;
39+
flex-direction: column;
40+
justify-content: space-between;
4341
column-gap: ${space[2]}px;
44-
grid-template-areas:
45-
'headline headline'
46-
'media-icon media-icon'
47-
'. image';
48-
49-
/* Applied word-break: break-word to prevent text overflow
50-
and ensure long words break onto the next line.
51-
This is important since the highlights card can only take up a set portion
52-
of the screen to allow for the peeping card on mobile and grid layout
53-
on larger breakpoints, and the image has a fixed width on all breakpoints. */
42+
/** Relative positioning is required to absolutely position the card link overlay */
43+
position: relative;
44+
padding: 10px 10px 0 10px;
45+
background-color: ${palette('--highlights-card-background')};
46+
47+
/**
48+
* Applied word-break: break-word to prevent text overflow and ensure long words break
49+
* onto the next line. This is important since the highlights card can only take up a
50+
* set portion of the screen to allow for the peeping card on mobile and layout
51+
* on larger breakpoints, and the image has a fixed width on all breakpoints.
52+
*/
5453
word-break: break-word;
54+
5555
${until.mobileMedium} {
5656
min-height: 174px;
5757
}
5858
59-
${between.mobileMedium.and.desktop} {
59+
${between.mobileMedium.and.tablet} {
6060
min-height: 194px;
6161
height: 100%;
6262
}
@@ -66,44 +66,16 @@ const container = css`
6666
width: 160px;
6767
}
6868
69-
${from.desktop} {
70-
width: 300px;
71-
grid-template-areas:
72-
'headline image'
73-
'media-icon image';
69+
${from.tablet} {
70+
width: 280px;
71+
flex-direction: row;
7472
}
75-
`;
76-
77-
const headline = css`
78-
grid-area: headline;
79-
margin-bottom: ${space[1]}px;
80-
`;
81-
82-
const mediaIcon = css`
83-
grid-area: media-icon;
84-
display: flex;
85-
align-items: flex-end;
86-
`;
8773
88-
const imageArea = css`
89-
grid-area: image;
90-
height: 98px;
91-
width: 98px;
92-
align-self: end;
93-
position: relative;
94-
${until.desktop} {
95-
margin-top: ${space[2]}px;
96-
}
9774
${from.desktop} {
98-
align-self: start;
75+
width: 300px;
9976
}
10077
`;
10178

102-
/** Avatar alignment is an exception and should align with the bottom of the card *if* there is a gap.*/
103-
const avatarAlignmentStyles = css`
104-
align-self: end;
105-
`;
106-
10779
const hoverStyles = css`
10880
:hover .image-overlay {
10981
position: absolute;
@@ -123,12 +95,38 @@ const hoverStyles = css`
12395
}
12496
`;
12597

98+
const content = css`
99+
display: flex;
100+
flex-direction: column;
101+
gap: ${space[1]}px;
102+
103+
${from.tablet} {
104+
padding-bottom: 10px;
105+
}
106+
`;
107+
108+
const imageStyles = css`
109+
position: relative;
110+
align-self: flex-end;
111+
flex-shrink: 0;
112+
height: 98px;
113+
width: 98px;
114+
115+
${until.tablet} {
116+
margin-top: ${space[2]}px;
117+
}
118+
`;
119+
120+
/** An avatar should align with the bottom of the card */
121+
const nonAvatarImageStyles = css`
122+
margin-bottom: 10px;
123+
`;
124+
126125
const starWrapper = css`
127-
background-color: ${palette('--star-rating-background')};
128-
color: ${palette('--star-rating-fill')};
129126
width: fit-content;
130-
grid-area: media-icon;
131-
align-self: flex-end;
127+
margin-top: ${space[1]}px;
128+
color: ${palette('--star-rating-fill')};
129+
background-color: ${palette('--star-rating-background')};
132130
`;
133131

134132
export const HighlightsCard = ({
@@ -158,12 +156,12 @@ export const HighlightsCard = ({
158156
isExternalLink={isExternalLink}
159157
/>
160158

161-
<div css={headline}>
159+
<div css={content}>
162160
<CardHeadline
163161
headlineText={headlineText}
164162
format={format}
165163
fontSizes={{
166-
desktop: 'xsmall',
164+
desktop: 'xxsmall',
167165
tablet: 'xxsmall',
168166
mobileMedium: 'xxsmall',
169167
mobile: 'tiny',
@@ -177,41 +175,43 @@ export const HighlightsCard = ({
177175
headlineColour={palette('--highlights-card-headline')}
178176
kickerColour={palette('--highlights-card-kicker-text')}
179177
/>
178+
179+
{!isUndefined(starRating) && (
180+
<div css={starWrapper}>
181+
<StarRating rating={starRating} size="small" />
182+
</div>
183+
)}
184+
185+
{!!mainMedia && isMediaCard && (
186+
<div>
187+
{mainMedia.type === 'Video' && (
188+
<Pill
189+
content={secondsToDuration(
190+
mainMedia.duration,
191+
)}
192+
prefix="Video"
193+
icon={<SvgMediaControlsPlay width={18} />}
194+
/>
195+
)}
196+
{mainMedia.type === 'Audio' && (
197+
<Pill
198+
content={mainMedia.duration}
199+
prefix="Podcast"
200+
icon={<SvgMediaControlsPlay width={18} />}
201+
/>
202+
)}
203+
{mainMedia.type === 'Gallery' && (
204+
<Pill
205+
content={mainMedia.count}
206+
prefix="Gallery"
207+
icon={<SvgCamera />}
208+
/>
209+
)}
210+
</div>
211+
)}
180212
</div>
181213

182-
{!isUndefined(starRating) && (
183-
<div css={starWrapper}>
184-
<StarRating rating={starRating} size="small" />
185-
</div>
186-
)}
187-
188-
{!!mainMedia && isMediaCard && (
189-
<div css={mediaIcon}>
190-
{mainMedia.type === 'Video' && (
191-
<Pill
192-
content={secondsToDuration(mainMedia.duration)}
193-
prefix="Video"
194-
icon={<SvgMediaControlsPlay width={18} />}
195-
/>
196-
)}
197-
{mainMedia.type === 'Audio' && (
198-
<Pill
199-
content={mainMedia.duration}
200-
prefix="Podcast"
201-
icon={<SvgMediaControlsPlay width={18} />}
202-
/>
203-
)}
204-
{mainMedia.type === 'Gallery' && (
205-
<Pill
206-
content={mainMedia.count}
207-
prefix="Gallery"
208-
icon={<SvgCamera />}
209-
/>
210-
)}
211-
</div>
212-
)}
213-
214-
<div css={[imageArea, avatarUrl && avatarAlignmentStyles]}>
214+
<div css={[imageStyles, !avatarUrl && nonAvatarImageStyles]}>
215215
<HighlightsCardImage
216216
imageLoading={imageLoading}
217217
image={image}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const itemStyles = css`
7171
scroll-snap-align: start;
7272
grid-area: span 1;
7373
position: relative;
74-
margin: ${space[3]}px 10px;
74+
margin: ${space[2]}px 10px ${space[3]}px;
7575
:first-child {
7676
${from.tablet} {
7777
margin-left: 0;

‎dotcom-rendering/src/paletteDeclarations.ts

Lines changed: 67 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5709,29 +5709,61 @@ const mastheadVeggieBurgerBackground: PaletteFunction = () =>
57095709
const mastheadVeggieBurgerBackgroundHover: PaletteFunction = () =>
57105710
sourcePalette.brandAlt[300];
57115711

5712-
const mastheadHighlightsBackgroundLight: PaletteFunction = () =>
5713-
sourcePalette.neutral[97];
5714-
const mastheadHighlightsBackgroundDark: PaletteFunction = () =>
5712+
const highlightsContainerBackgroundLight: PaletteFunction = () =>
5713+
sourcePalette.neutral[100];
5714+
const highlightsContainerBackgroundDark: PaletteFunction = () =>
57155715
sourcePalette.neutral[10];
57165716

5717-
const mastheadHighlightsBorderLight: PaletteFunction = () =>
5717+
const hghlightsContainerBorderLight: PaletteFunction = () =>
57185718
sourcePalette.neutral[60];
5719-
const mastheadHighlightsBorderDark: PaletteFunction = () =>
5719+
const highlightsContainerBorderDark: PaletteFunction = () =>
57205720
sourcePalette.neutral[46];
57215721

5722-
const highlightsCardHeadlineLight: PaletteFunction = () =>
5722+
const highlightsCardKickerTextLight: PaletteFunction = () =>
57235723
sourcePalette.neutral[7];
5724-
const highlightsCardHeadlineDark: PaletteFunction = () =>
5725-
sourcePalette.neutral[86];
5724+
const highlightsCardKickerTextDark: PaletteFunction = (format) => {
5725+
switch (format.theme) {
5726+
case Pillar.News:
5727+
case Pillar.Opinion:
5728+
case Pillar.Sport:
5729+
case Pillar.Culture:
5730+
case Pillar.Lifestyle:
5731+
return pillarPalette(format.theme, 500);
5732+
case ArticleSpecial.Labs:
5733+
return sourcePalette.labs[200];
5734+
case ArticleSpecial.SpecialReport:
5735+
return sourcePalette.news[400];
5736+
case ArticleSpecial.SpecialReportAlt:
5737+
return sourcePalette.specialReportAlt[200];
5738+
}
5739+
};
57265740

5727-
const highlightsCardKickerText: PaletteFunction = (format) => {
5741+
const highlightsCardBackgroudLight: PaletteFunction = (format) => {
57285742
switch (format.theme) {
5743+
case Pillar.News:
57295744
case Pillar.Opinion:
5730-
return pillarPalette(format.theme, 300);
57315745
case Pillar.Sport:
57325746
case Pillar.Culture:
57335747
case Pillar.Lifestyle:
5748+
return pillarPalette(format.theme, 800);
5749+
case ArticleSpecial.Labs:
5750+
return sourcePalette.labs[200];
5751+
case ArticleSpecial.SpecialReport:
5752+
return sourcePalette.news[400];
5753+
case ArticleSpecial.SpecialReportAlt:
5754+
return sourcePalette.specialReportAlt[200];
5755+
}
5756+
};
5757+
const highlightsCardBackgroundDark: PaletteFunction = () =>
5758+
sourcePalette.neutral[10];
5759+
5760+
const highlightsCardHeadlineLight: PaletteFunction = (format) => {
5761+
switch (format.theme) {
57345762
case Pillar.News:
5763+
case Pillar.Opinion:
5764+
case Pillar.Sport:
5765+
case Pillar.Culture:
5766+
case Pillar.Lifestyle:
57355767
return pillarPalette(format.theme, 400);
57365768
case ArticleSpecial.Labs:
57375769
return sourcePalette.labs[200];
@@ -5742,24 +5774,21 @@ const highlightsCardKickerText: PaletteFunction = (format) => {
57425774
}
57435775
};
57445776

5745-
const highlightContainerStartLight: PaletteFunction = () => {
5746-
return sourcePalette.neutral[97];
5747-
};
5748-
const highlightContainerStartDark: PaletteFunction = () => {
5749-
return sourcePalette.neutral[10];
5750-
};
5751-
const highlightContainerMidFadeLight: PaletteFunction = () => {
5752-
return transparentColour(sourcePalette.neutral[97], 0.6);
5753-
};
5754-
const highlightContainerMidFadeDark: PaletteFunction = () => {
5755-
return transparentColour(sourcePalette.neutral[10], 0.6);
5756-
};
5757-
const highlightContainerEndFadeLight: PaletteFunction = () => {
5758-
return 'transparent';
5759-
};
5760-
const highlightContainerEndFadeDark: PaletteFunction = () => {
5761-
return 'transparent';
5762-
};
5777+
const highlightsCardHeadlineDark: PaletteFunction = () =>
5778+
sourcePalette.neutral[86];
5779+
5780+
const highlightContainerStartLight: PaletteFunction = () =>
5781+
sourcePalette.neutral[100];
5782+
const highlightContainerStartDark: PaletteFunction = () =>
5783+
sourcePalette.neutral[10];
5784+
5785+
const highlightContainerMidFadeLight: PaletteFunction = () =>
5786+
transparentColour(sourcePalette.neutral[100], 0.6);
5787+
const highlightContainerMidFadeDark: PaletteFunction = () =>
5788+
transparentColour(sourcePalette.neutral[10], 0.6);
5789+
5790+
const highlightContainerEndFadeLight: PaletteFunction = () => 'transparent';
5791+
const highlightContainerEndFadeDark: PaletteFunction = () => 'transparent';
57635792

57645793
const pinnedPostBorderLight: PaletteFunction = ({ theme }) => {
57655794
switch (theme) {
@@ -6885,21 +6914,25 @@ const paletteColours = {
68856914
light: headlineMatchTextLight,
68866915
dark: headlineMatchTextDark,
68876916
},
6917+
'--highlights-card-background': {
6918+
light: highlightsCardBackgroudLight,
6919+
dark: highlightsCardBackgroundDark,
6920+
},
68886921
'--highlights-card-headline': {
68896922
light: highlightsCardHeadlineLight,
68906923
dark: highlightsCardHeadlineDark,
68916924
},
68926925
'--highlights-card-kicker-text': {
6893-
light: highlightsCardKickerText,
6894-
dark: highlightsCardKickerText,
6926+
light: highlightsCardKickerTextLight,
6927+
dark: highlightsCardKickerTextDark,
68956928
},
68966929
'--highlights-container-background': {
6897-
light: mastheadHighlightsBackgroundLight,
6898-
dark: mastheadHighlightsBackgroundDark,
6930+
light: highlightsContainerBackgroundLight,
6931+
dark: highlightsContainerBackgroundDark,
68996932
},
69006933
'--highlights-container-border': {
6901-
light: mastheadHighlightsBorderLight,
6902-
dark: mastheadHighlightsBorderDark,
6934+
light: hghlightsContainerBorderLight,
6935+
dark: highlightsContainerBorderDark,
69036936
},
69046937
'--highlights-container-end-fade': {
69056938
light: highlightContainerEndFadeLight,

0 commit comments

Comments
 (0)