Skip to content

Commit 6037226

Browse files
cemms1cemms1
committed
fix logo position in masthead
1 parent cc26596 commit 6037226

3 files changed

Lines changed: 136 additions & 143 deletions

File tree

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { breakpoints } from '@guardian/source/foundations';
12
import type { Meta } from '@storybook/react';
23
import { Masthead } from './Masthead';
34
import { nav } from './Titlepiece/Nav.mock';
@@ -19,6 +20,15 @@ const meta = {
1920
hasPageSkin: false,
2021
hasPageSkinContentSelfConstrain: false,
2122
},
23+
parameters: {
24+
chromatic: {
25+
viewports: [
26+
breakpoints.mobileMedium,
27+
breakpoints.desktop,
28+
breakpoints.wide,
29+
],
30+
},
31+
},
2232
} satisfies Meta<typeof Masthead>;
2333
export default meta;
2434

‎dotcom-rendering/src/components/Masthead/Titlepiece/Logo.tsx‎

Lines changed: 24 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,40 @@
11
import { css } from '@emotion/react';
2-
import { from, space, visuallyHidden } from '@guardian/source/foundations';
2+
import { visuallyHidden } from '@guardian/source/foundations';
33
import { Hide, SvgGuardianLogo } from '@guardian/source/react-components';
44
import { nestedOphanComponents } from '../../../lib/ophan-helpers';
55
import { palette } from '../../../palette';
66
import TheWholePictureGuardianLogoSmall from '../../../static/icons/the-guardian-whole-picture-logo-small.svg';
77
import TheWholePictureGuardianLogo from '../../../static/icons/the-guardian-whole-picture-logo.svg';
88

9-
const gridMainColumn = css`
10-
grid-column: main-column-start / main-column-end;
11-
`;
12-
13-
const veggieBurgerDiameter = 40;
14-
15-
const logoStyles = css`
16-
${gridMainColumn}
17-
grid-row: 1;
18-
position: relative;
19-
display: flex;
20-
justify-self: end;
21-
align-self: end;
22-
margin-top: ${space[2]}px;
23-
margin-bottom: 6px;
24-
right: ${veggieBurgerDiameter + space[3]}px;
25-
26-
${from.mobileMedium} {
27-
right: 0;
28-
}
29-
${from.mobileLandscape} {
30-
margin-bottom: ${space[2]}px;
31-
}
32-
33-
svg {
34-
width: 152px;
35-
${from.mobileMedium} {
36-
width: 207px;
37-
}
38-
${from.tablet} {
39-
width: 252px;
40-
}
41-
${from.desktop} {
42-
width: 291px;
43-
}
44-
}
45-
`;
46-
47-
const logoStylesFromLeftCol = css`
48-
svg {
49-
${from.leftCol} {
50-
width: 324px;
51-
}
52-
}
53-
`;
54-
55-
const theWholePictureStyles = css`
56-
margin-bottom: 2px;
57-
${from.tablet} {
58-
margin-top: 10px;
59-
margin-bottom: 6px;
60-
}
61-
62-
svg {
63-
height: auto;
64-
width: 173px;
65-
${from.tablet} {
66-
width: 246px;
67-
}
68-
}
69-
`;
70-
71-
const slimNavLogoOverrides = css`
72-
position: relative;
73-
margin-top: ${space[2]}px;
74-
margin-bottom: ${space[2]}px;
75-
right: ${veggieBurgerDiameter + 6}px;
76-
77-
${from.mobileLandscape} {
78-
margin-top: ${space[1]}px;
79-
margin-bottom: ${space[2]}px;
80-
}
81-
${from.tablet} {
82-
right: ${space[8]}px;
83-
}
84-
${from.desktop} {
85-
right: ${space[10]}px;
86-
}
87-
svg {
88-
width: 130px;
89-
${from.tablet} {
90-
width: 86px;
91-
}
92-
${from.desktop} {
93-
width: 130px;
94-
}
95-
${from.leftCol} {
96-
width: 140px;
97-
}
98-
${from.wide} {
99-
width: 145px;
100-
}
101-
}
102-
`;
103-
1049
type Props = {
10510
/**
10611
* We are running a campaign in the US called "The Whole Picture"
10712
* We will use a different logo for the US edition for the duration of this campaign.
10813
*/
10914
showWholePictureLogo: boolean;
110-
hasPageSkin: boolean;
111-
showSlimNav: boolean;
11215
};
11316

114-
export const Logo = ({
115-
showWholePictureLogo,
116-
hasPageSkin,
117-
showSlimNav,
118-
}: Props) => (
119-
<div
120-
css={[
121-
logoStyles,
122-
!hasPageSkin && logoStylesFromLeftCol,
123-
showWholePictureLogo && theWholePictureStyles,
124-
showSlimNav && slimNavLogoOverrides,
125-
]}
126-
>
127-
<a href="/" data-link-name={nestedOphanComponents('header', 'logo')}>
128-
<span
129-
css={css`
130-
${visuallyHidden};
131-
`}
132-
>
133-
The Guardian - Back to home
134-
</span>
135-
136-
{showWholePictureLogo ? (
137-
<>
138-
<Hide from="tablet">
139-
<TheWholePictureGuardianLogoSmall />
140-
</Hide>
141-
<Hide until="tablet">
142-
<TheWholePictureGuardianLogo />
143-
</Hide>
144-
</>
145-
) : (
146-
<SvgGuardianLogo
147-
textColor={palette('--masthead-nav-link-text')}
148-
/>
149-
)}
150-
</a>
151-
</div>
17+
export const Logo = ({ showWholePictureLogo }: Props) => (
18+
<a href="/" data-link-name={nestedOphanComponents('header', 'logo')}>
19+
<span
20+
css={css`
21+
${visuallyHidden};
22+
`}
23+
>
24+
The Guardian - Back to home
25+
</span>
26+
27+
{showWholePictureLogo ? (
28+
<>
29+
<Hide from="tablet">
30+
<TheWholePictureGuardianLogoSmall />
31+
</Hide>
32+
<Hide until="tablet">
33+
<TheWholePictureGuardianLogo />
34+
</Hide>
35+
</>
36+
) : (
37+
<SvgGuardianLogo textColor={palette('--masthead-nav-link-text')} />
38+
)}
39+
</a>
15240
);

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

Lines changed: 102 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,96 @@ const slimNavEditionSwitcherOverrides = css`
5959
}
6060
`;
6161

62+
const veggieBurgerDiameter = 40;
63+
64+
const logoStyles = css`
65+
${gridMainColumn}
66+
grid-row: 1;
67+
position: relative;
68+
display: flex;
69+
justify-self: end;
70+
align-self: end;
71+
margin-top: ${space[2]}px;
72+
margin-bottom: 6px;
73+
right: ${veggieBurgerDiameter + space[3]}px;
74+
75+
${from.mobileLandscape} {
76+
margin-bottom: ${space[2]}px;
77+
}
78+
svg {
79+
width: 152px;
80+
${from.mobileMedium} {
81+
width: 207px;
82+
}
83+
${from.tablet} {
84+
width: 252px;
85+
}
86+
${from.desktop} {
87+
width: 291px;
88+
}
89+
}
90+
`;
91+
92+
const logoStylesFromLeftCol = css`
93+
svg {
94+
${from.leftCol} {
95+
width: 324px;
96+
}
97+
}
98+
`;
99+
100+
const theWholePictureStyles = css`
101+
margin-bottom: 2px;
102+
${from.tablet} {
103+
margin-top: 10px;
104+
margin-bottom: 6px;
105+
}
106+
107+
svg {
108+
height: auto;
109+
width: 173px;
110+
${from.tablet} {
111+
width: 246px;
112+
}
113+
}
114+
`;
115+
116+
const slimNavLogoOverrides = css`
117+
position: relative;
118+
margin-top: ${space[2]}px;
119+
margin-bottom: ${space[2]}px;
120+
right: ${veggieBurgerDiameter + 6}px;
121+
122+
${from.mobileLandscape} {
123+
margin-top: ${space[1]}px;
124+
margin-bottom: ${space[2]}px;
125+
}
126+
${from.tablet} {
127+
right: ${space[8]}px;
128+
}
129+
${from.desktop} {
130+
right: ${space[10]}px;
131+
}
132+
svg {
133+
width: 130px;
134+
${from.mobile} {
135+
width: 130px;
136+
}
137+
${from.tablet} {
138+
width: 86px;
139+
}
140+
${from.desktop} {
141+
width: 130px;
142+
}
143+
${from.leftCol} {
144+
width: 140px;
145+
}
146+
${from.wide} {
147+
width: 145px;
148+
}
149+
}
150+
`;
151+
62152
const pillarsNavStyles = css`
63153
${gridContent}
64154
grid-row: 2;
@@ -243,6 +333,8 @@ export const Titlepiece = ({
243333
}: Props) => {
244334
const { showBanner } = useEditionSwitcherBanner(pageId, editionId);
245335

336+
const showWholePictureLogo = !!wholePictureLogoSwitch && editionId === 'US';
337+
246338
return (
247339
<Grid
248340
type="nav"
@@ -421,13 +513,16 @@ export const Titlepiece = ({
421513
</div>
422514

423515
{/* Guardian logo */}
424-
<Logo
425-
showWholePictureLogo={
426-
!!wholePictureLogoSwitch && editionId === 'US'
427-
}
428-
hasPageSkin={!!hasPageSkin}
429-
showSlimNav={!!showSlimNav}
430-
/>
516+
<div
517+
css={[
518+
logoStyles,
519+
!hasPageSkin && logoStylesFromLeftCol,
520+
showSlimNav && slimNavLogoOverrides,
521+
showWholePictureLogo && theWholePictureStyles,
522+
]}
523+
>
524+
<Logo showWholePictureLogo={showWholePictureLogo} />
525+
</div>
431526

432527
{/** Expanded menu checkbox */}
433528
<input

0 commit comments

Comments
 (0)