Skip to content

Commit d45127a

Browse files
cemms1cemms1
authored
Fix logo position in Titlepiece component (#14541)
Fixes the alignment of the logo without slim nav overrides and explicitly prevents the "whole picture logo" rendering for slim nav variation
1 parent aa13d5e commit d45127a

File tree

3 files changed

+145
-143
lines changed

3 files changed

+145
-143
lines changed

‎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: 111 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,104 @@ 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.mobileMedium} {
76+
right: 0;
77+
}
78+
${from.mobileLandscape} {
79+
margin-bottom: ${space[2]}px;
80+
}
81+
82+
svg {
83+
width: 152px;
84+
${from.mobileMedium} {
85+
width: 207px;
86+
}
87+
${from.tablet} {
88+
width: 252px;
89+
}
90+
${from.desktop} {
91+
width: 291px;
92+
}
93+
}
94+
`;
95+
96+
const logoStylesFromLeftCol = css`
97+
svg {
98+
${from.leftCol} {
99+
width: 324px;
100+
}
101+
}
102+
`;
103+
104+
const theWholePictureStyles = css`
105+
margin-bottom: 2px;
106+
${from.tablet} {
107+
margin-top: 10px;
108+
margin-bottom: 6px;
109+
}
110+
111+
svg {
112+
height: auto;
113+
width: 173px;
114+
${from.tablet} {
115+
width: 246px;
116+
}
117+
}
118+
`;
119+
120+
const slimNavLogoOverrides = css`
121+
position: relative;
122+
margin-top: ${space[2]}px;
123+
margin-bottom: ${space[2]}px;
124+
right: ${veggieBurgerDiameter + 6}px;
125+
126+
/** Intentionally duplicated as this needs to _override_ the standard logo styles */
127+
${from.mobileMedium} {
128+
right: ${veggieBurgerDiameter + 6}px;
129+
}
130+
${from.mobileLandscape} {
131+
margin-top: ${space[1]}px;
132+
margin-bottom: ${space[2]}px;
133+
}
134+
${from.tablet} {
135+
right: ${space[8]}px;
136+
}
137+
${from.desktop} {
138+
right: ${space[10]}px;
139+
}
140+
svg {
141+
width: 130px;
142+
${from.mobile} {
143+
width: 130px;
144+
}
145+
${from.tablet} {
146+
width: 86px;
147+
}
148+
${from.desktop} {
149+
width: 130px;
150+
}
151+
${from.leftCol} {
152+
width: 140px;
153+
}
154+
${from.wide} {
155+
width: 145px;
156+
}
157+
}
158+
`;
159+
62160
const pillarsNavStyles = css`
63161
${gridContent}
64162
grid-row: 2;
@@ -243,6 +341,9 @@ export const Titlepiece = ({
243341
}: Props) => {
244342
const { showBanner } = useEditionSwitcherBanner(pageId, editionId);
245343

344+
const showWholePictureLogo =
345+
!!wholePictureLogoSwitch && !showSlimNav && editionId === 'US';
346+
246347
return (
247348
<Grid
248349
type="nav"
@@ -421,13 +522,16 @@ export const Titlepiece = ({
421522
</div>
422523

423524
{/* Guardian logo */}
424-
<Logo
425-
showWholePictureLogo={
426-
!!wholePictureLogoSwitch && editionId === 'US'
427-
}
428-
hasPageSkin={!!hasPageSkin}
429-
showSlimNav={!!showSlimNav}
430-
/>
525+
<div
526+
css={[
527+
logoStyles,
528+
!hasPageSkin && logoStylesFromLeftCol,
529+
showSlimNav && slimNavLogoOverrides,
530+
showWholePictureLogo && theWholePictureStyles,
531+
]}
532+
>
533+
<Logo showWholePictureLogo={showWholePictureLogo} />
534+
</div>
431535

432536
{/** Expanded menu checkbox */}
433537
<input

0 commit comments

Comments
 (0)