Skip to content

Commit aec9dcb

Browse files
cemms1cemms1
committed
wip LabsPageHeader new designs
1 parent 327adfd commit aec9dcb

File tree

2 files changed

+166
-130
lines changed

2 files changed

+166
-130
lines changed

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

Lines changed: 148 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css } from '@emotion/react';
22
import {
3+
breakpoints,
34
from,
4-
palette,
55
space,
66
textSans15,
77
textSansBold15,
@@ -11,137 +11,165 @@ import {
1111
LinkButton,
1212
SvgArrowRightStraight,
1313
} from '@guardian/source/react-components';
14+
import { grid } from '../grid';
1415
import type { EditionId } from '../lib/edition';
1516
import { getLabsUrlSuffix } from '../lib/labs';
1617
import { LABS_HEADER_HEIGHT } from '../lib/labs-constants';
17-
import LabsLogo from '../static/logos/the-guardian-labs.svg';
18+
import { palette } from '../palette';
1819
import { Details } from './Details';
20+
import { LabsLogo } from './LabsLogo';
1921

20-
export const LabsHeader = ({ editionId }: { editionId: EditionId }) => (
21-
<div
22-
css={css`
23-
position: relative;
24-
height: ${LABS_HEADER_HEIGHT}px;
25-
display: flex;
26-
justify-content: space-between;
27-
28-
color: ${palette.neutral[7]};
29-
`}
30-
>
31-
<div
32-
css={css`
33-
display: flex;
34-
`}
35-
>
36-
<div
37-
css={css`
38-
border-right: 1px solid ${palette.neutral[60]};
39-
height: 100%;
40-
display: flex;
41-
align-items: center;
42-
43-
padding-right: 10px;
44-
${from.mobileLandscape} {
45-
padding-right: 20px;
46-
}
47-
`}
48-
>
22+
const headerStyles = css`
23+
color: ${palette('--labs-header-title')};
24+
background-color: ${palette('--labs-header-background')};
25+
border-bottom: 1px solid var(--article-border);
26+
`;
27+
28+
const headerInnerStyles = css`
29+
height: ${LABS_HEADER_HEIGHT}px;
30+
${grid.paddedContainer}
31+
32+
${from.tablet} {
33+
border-left: 1px solid ${palette('--article-border')};
34+
border-right: 1px solid ${palette('--article-border')};
35+
}
36+
`;
37+
38+
const leftContentStyles = css`
39+
${grid.span(1, 4)}
40+
${from.tablet} {
41+
${grid.span(1, 6)}
42+
}
43+
justify-self: start;
44+
display: flex;
45+
`;
46+
47+
const detailsPositionStyles = css`
48+
top: 40px;
49+
left: 0px;
50+
51+
${from.mobile} {
52+
left: -108px;
53+
}
54+
55+
${from.mobileLandscape} {
56+
left: -127.5px;
57+
}
58+
59+
${from.tablet} {
60+
max-width: ${breakpoints.tablet}px;
61+
}
62+
${from.desktop} {
63+
max-width: ${breakpoints.desktop}px;
64+
}
65+
`;
66+
67+
const leftContentChildStyles = css`
68+
display: flex;
69+
align-items: center;
70+
padding: 0 ${grid.mobileColumnGap};
71+
${from.mobileLandscape} {
72+
padding: 0 ${grid.columnGap};
73+
}
74+
/* Right border */
75+
position: relative;
76+
:after {
77+
content: '';
78+
position: absolute;
79+
right: 0;
80+
top: 0;
81+
bottom: 0;
82+
border-right: 1px solid ${palette('--section-border')};
83+
}
84+
`;
85+
86+
const detailsExpandedAreaStyles = css`
87+
${textSans15};
88+
background-color: ${palette('--labs-about-dropdown-background')};
89+
border-top: 1px solid ${palette('--section-border')};
90+
91+
width: 100vw;
92+
/* margin-left: -${grid.mobileColumnGap}; */
93+
94+
${from.tablet} {
95+
width: ${breakpoints.tablet}px;
96+
}
97+
${from.desktop} {
98+
width: 240px;
99+
}
100+
101+
${from.mobileLandscape} {
102+
margin-left: -20px;
103+
}
104+
105+
padding: ${space[2]}px 10px;
106+
${from.mobileLandscape} {
107+
padding: ${space[3]}px 20px;
108+
}
109+
`;
110+
111+
const logoStyles = css`
112+
${grid.span(-3, 1)}
113+
align-self: center;
114+
justify-self: end;
115+
116+
${from.tablet} {
117+
${grid.span(-4, 2)}
118+
}
119+
`;
120+
121+
export const LabsPageHeader = ({ editionId }: { editionId: EditionId }) => (
122+
<div css={headerStyles}>
123+
<div css={headerInnerStyles}>
124+
<div css={leftContentStyles}>
49125
<div
50-
css={css`
51-
${textSansBold15};
52-
margin-bottom: 4px;
53-
`}
126+
css={[
127+
leftContentChildStyles,
128+
css`
129+
${textSansBold15}
130+
`,
131+
]}
54132
>
55133
Paid content
56134
</div>
135+
136+
<div css={leftContentChildStyles}>
137+
<Details
138+
label="About"
139+
labelSize="small"
140+
positionStyles={detailsPositionStyles}
141+
>
142+
<div css={detailsExpandedAreaStyles}>
143+
<p>
144+
Paid content is paid for and controlled by an
145+
advertiser and produced by the Guardian Labs
146+
team.
147+
</p>
148+
<br />
149+
<LinkButton
150+
iconSide="right"
151+
size="xsmall"
152+
priority="subdued"
153+
icon={<SvgArrowRightStraight />}
154+
href="https://www.theguardian.com/info/2016/jan/25/content-funding"
155+
>
156+
Learn more
157+
</LinkButton>
158+
</div>
159+
</Details>
160+
</div>
57161
</div>
58-
<div
59-
css={css`
60-
border-right: 1px solid ${palette.neutral[60]};
61-
height: 100%;
62-
display: flex;
63-
align-items: center;
64-
65-
padding-left: 10px;
66-
padding-right: 10px;
67-
${from.mobileLandscape} {
68-
padding-left: 20px;
69-
padding-right: 20px;
70-
}
71-
`}
72-
>
73-
<Details
74-
label="About"
75-
labelSize="small"
76-
positionStyles={css`
77-
top: 40px;
78-
left: -75px;
79-
80-
${from.mobile} {
81-
left: -108px;
82-
}
83-
84-
${from.mobileLandscape} {
85-
left: -128px;
86-
}
87-
`}
162+
163+
{/* labs logo */}
164+
<div css={logoStyles}>
165+
<Link
166+
href={`https://www.theguardian.com/guardian-labs${getLabsUrlSuffix(
167+
editionId,
168+
)}`}
88169
>
89-
<div
90-
css={css`
91-
${textSans15};
92-
background-color: ${palette.labs[400]};
93-
border-top: 1px solid ${palette.neutral[60]};
94-
95-
width: 100vw;
96-
${from.desktop} {
97-
width: 235px;
98-
}
99-
100-
margin-left: -10px;
101-
${from.mobileLandscape} {
102-
margin-left: -20px;
103-
}
104-
padding: ${space[2]}px 10px;
105-
${from.mobileLandscape} {
106-
padding: ${space[3]}px 20px;
107-
}
108-
109-
> a {
110-
color: black;
111-
}
112-
`}
113-
>
114-
<p>
115-
Paid content is paid for and controlled by an
116-
advertiser and produced by the Guardian Labs team.
117-
</p>
118-
<br />
119-
<LinkButton
120-
iconSide="right"
121-
size="xsmall"
122-
priority="subdued"
123-
icon={<SvgArrowRightStraight />}
124-
href="https://www.theguardian.com/info/2016/jan/25/content-funding"
125-
>
126-
Learn more
127-
</LinkButton>
128-
</div>
129-
</Details>
170+
<LabsLogo size={LABS_HEADER_HEIGHT - space[1]} />
171+
</Link>
130172
</div>
131173
</div>
132-
<div
133-
css={css`
134-
display: flex;
135-
padding: ${space[1]}px 0;
136-
`}
137-
>
138-
<Link
139-
href={`https://www.theguardian.com/guardian-labs${getLabsUrlSuffix(
140-
editionId,
141-
)}`}
142-
>
143-
<LabsLogo />
144-
</Link>
145-
</div>
146174
</div>
147175
);

‎dotcom-rendering/src/layouts/ShowcaseLayout.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { GridItem } from '../components/GridItem';
2626
import { HeaderAdSlot } from '../components/HeaderAdSlot';
2727
import { Island } from '../components/Island';
2828
import { LabsHeader } from '../components/LabsHeader';
29+
import { LabsPageHeader } from '../components/LabsPageHeader';
2930
import { MainMedia } from '../components/MainMedia';
3031
import { Masthead } from '../components/Masthead/Masthead';
3132
import { MostViewedFooterData } from '../components/MostViewedFooterData.importable';
@@ -247,7 +248,8 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
247248

248249
const isLabs = format.theme === ArticleSpecial.Labs;
249250

250-
const { absoluteServerTimes = false } = article.config.switches;
251+
const { absoluteServerTimes = false, guardianLabsRedesign = false } =
252+
article.config.switches;
251253

252254
return (
253255
<>
@@ -333,15 +335,21 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
333335
</Stuck>
334336
</div>
335337
<Stuck zIndex="stickyAdWrapperLabsHeader">
336-
<Section
337-
fullWidth={true}
338-
showTopBorder={false}
339-
backgroundColour={sourcePalette.labs[400]}
340-
borderColour={sourcePalette.neutral[60]}
341-
sectionId="labs-header"
342-
>
343-
<LabsHeader editionId={editionId} />
344-
</Section>
338+
{guardianLabsRedesign ? (
339+
<LabsPageHeader editionId={editionId} />
340+
) : (
341+
<Section
342+
fullWidth={true}
343+
showTopBorder={false}
344+
backgroundColour={
345+
sourcePalette.labs[400]
346+
}
347+
borderColour={sourcePalette.neutral[60]}
348+
sectionId="labs-header"
349+
>
350+
<LabsHeader editionId={editionId} />
351+
</Section>
352+
)}
345353
</Stuck>
346354
</>
347355
)}

0 commit comments

Comments
 (0)