Skip to content

Commit 44b3e05

Browse files
deedeehdeedeeh
authored
Merge pull request #15373 from guardian/dina/use-branding-label-for-hosted
Use `BrandingLabel` component for Hosted Content
2 parents 2bdd091 + 494ea4b commit 44b3e05

5 files changed

Lines changed: 90 additions & 32 deletions

File tree

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ type Props = {
2222
ophanComponentName?: string;
2323
isLabs?: boolean;
2424
isAdvertisingPartner?: boolean;
25+
isHosted?: boolean;
2526
dataTestId?: string;
2627
};
2728

@@ -100,6 +101,16 @@ const imageAdvertisingPartnerStyles = css`
100101
}
101102
`;
102103

104+
const hostedLogoImageStyles = css`
105+
width: 80px;
106+
height: auto;
107+
108+
${from.desktop} {
109+
width: 132px;
110+
height: auto;
111+
}
112+
`;
113+
103114
/**
104115
* Component used to display branding labels with sponsor logos for
105116
* various types of branded content (paid-content, sponsored, foundation, etc.)
@@ -116,6 +127,7 @@ export const BrandingLabel = ({
116127
ophanComponentName,
117128
isLabs = false,
118129
isAdvertisingPartner = false,
130+
isHosted = false,
119131
dataTestId = 'branding-logo',
120132
}: Props) => {
121133
const { darkModeAvailable } = useConfig();
@@ -183,6 +195,25 @@ export const BrandingLabel = ({
183195
</div>
184196
);
185197
}
198+
199+
if (isHosted) {
200+
return (
201+
<a
202+
href={logo.link}
203+
data-link-name={ophanComponentLink}
204+
data-component={ophanComponentName}
205+
>
206+
<img
207+
css={hostedLogoImageStyles}
208+
src={logo.src}
209+
alt={branding.sponsorName}
210+
width={logo.dimensions.width}
211+
height={logo.dimensions.height}
212+
/>
213+
</a>
214+
);
215+
}
216+
186217
return (
187218
<a
188219
href={logo.link}

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
11
import { palette as sourcePalette } from '@guardian/source/foundations';
22
import { HostedContentHeader } from './HostedContentHeader';
3+
import type { Props as HostedContentHeaderProps } from './HostedContentHeader';
34
import { Section } from './Section';
45

56
export default {
67
component: HostedContentHeader,
78
title: 'Components/HostedContentHeader',
9+
args: {
10+
branding: {
11+
brandingType: { name: 'paid-content' },
12+
sponsorName: 'We Are Still In',
13+
logo: {
14+
src: 'https://static.theguardian.com/commercial/sponsor/16/Aug/2018/d5e82ba3-297d-473d-8362-c04f519e5fe1-WASI-logo-grey.png',
15+
dimensions: {
16+
width: 1250,
17+
height: 575,
18+
},
19+
link: 'https://www.wearestillin.com/',
20+
},
21+
aboutThisLink:
22+
'https://www.theguardian.com/info/2016/jan/25/content-funding',
23+
hostedCampaignColour: '#d90c1f',
24+
},
25+
},
826
};
9-
10-
export const Default = () => {
27+
export const Default = (args: HostedContentHeaderProps) => {
1128
return (
1229
<Section
1330
fullWidth={true}
@@ -19,8 +36,9 @@ export const Default = () => {
1936
element="aside"
2037
>
2138
<HostedContentHeader
22-
accentColor={sourcePalette.brand[400]}
23-
branding="Branding"
39+
{...args}
40+
branding={args.branding}
41+
accentColor={args.branding.hostedCampaignColour}
2442
/>
2543
</Section>
2644
);

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

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@ import {
1111
} from '@guardian/source/foundations';
1212
import { SvgGuardianLogo } from '@guardian/source/react-components';
1313
import { nestedOphanComponents } from '../lib/ophan-helpers';
14+
import type { Branding } from '../types/branding';
15+
import { BrandingLabel } from './BrandingLabel';
1416

15-
type Props = {
16-
accentColor: string;
17-
branding: string;
17+
export type Props = {
18+
branding: Branding;
19+
accentColor?: string;
1820
};
1921

2022
const HOSTED_CONTENT_HEIGHT_MOBILE = 48;
@@ -95,15 +97,14 @@ const badgeWrapperStyles = css`
9597
position: absolute;
9698
display: block;
9799
width: 80px;
98-
height: 45px; /* This is temporary, replace with actual badge height */
100+
height: auto;
99101
top: 100%;
100-
background-color: ${sourcePalette.neutral[60]};
101102
text-align: center;
102103
z-index: 10;
103104
104105
${from.desktop} {
105106
width: 132px;
106-
height: 75px;
107+
height: auto;
107108
}
108109
`;
109110

@@ -125,10 +126,11 @@ const Right = ({ children }: { children: React.ReactNode }) => (
125126
<div
126127
css={css`
127128
display: flex;
128-
padding: ${space[1]}px 10px;
129+
padding: ${space[1]}px 0;
130+
margin-right: 10px;
129131
130-
@media (min-width: 330px) {
131-
margin-right: 0.625rem;
132+
${from.mobileLandscape} {
133+
margin-right: ${space[5]}px;
132134
}
133135
`}
134136
>
@@ -148,14 +150,16 @@ const HeaderSection = ({
148150
height: 100%;
149151
display: flex;
150152
align-items: center;
151-
${isFirst ? 'margin-left: 1.25rem;' : 'margin-left: 0.625rem;'}
153+
margin-left: 10px;
152154
153-
${from.desktop} {
154-
${isFirst ? null : 'margin-left: 1.25rem;'}
155+
${from.mobileLandscape} {
156+
${isFirst
157+
? `margin-left: ${space[5]}px;`
158+
: 'margin-left: 10px;'}
155159
}
156160
157161
${from.leftCol} {
158-
${isFirst ? null : 'margin-left: 2rem;'}
162+
${isFirst ? null : `margin-left: ${space[8]}px;`}
159163
}
160164
`}
161165
>
@@ -180,8 +184,9 @@ const TitleAndBadge = ({ accentColor, branding }: Props) => (
180184
<p css={titleStyles}>Advertiser content</p>
181185
</div>
182186

183-
{/* The following div is a placeholder for the badge */}
184-
<div css={badgeWrapperStyles}>{branding}</div>
187+
<div css={badgeWrapperStyles}>
188+
<BrandingLabel branding={branding} isHosted={true} />
189+
</div>
185190
</>
186191
);
187192

@@ -251,14 +256,14 @@ const HostedContentLogo = () => (
251256
</div>
252257
);
253258

254-
export const HostedContentHeader = ({ accentColor, branding }: Props) => {
259+
export const HostedContentHeader = ({ branding, accentColor }: Props) => {
255260
return (
256261
<HeaderWrapper>
257262
<Left>
258263
<HeaderSection isFirst={true}>
259264
<TitleAndBadge
260-
accentColor={accentColor}
261265
branding={branding}
266+
accentColor={accentColor}
262267
/>
263268
</HeaderSection>
264269
<HeaderSection>

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,12 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
6262
const mainMedia = frontendData.mainMediaElements[0];
6363
const mainMediaCaptionText = decideMainMediaCaption(mainMedia);
6464

65+
const { branding } =
66+
frontendData.commercialProperties[frontendData.editionId];
67+
6568
return (
6669
<>
67-
{props.renderingTarget === 'Web' ? (
70+
{props.renderingTarget === 'Web' && branding ? (
6871
<Stuck>
6972
<Section
7073
fullWidth={true}
@@ -76,8 +79,8 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
7679
element="aside"
7780
>
7881
<HostedContentHeader
79-
accentColor={sourcePalette.brand[400]}
80-
branding="logo"
82+
branding={branding}
83+
accentColor={branding.hostedCampaignColour}
8184
/>
8285
</Section>
8386
</Stuck>

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,16 @@ const metaFlex = css`
4141

4242
export const HostedGalleryLayout = (props: WebProps | AppProps) => {
4343
const {
44-
content: {
45-
frontendData: { pageId, webTitle },
46-
},
44+
content: { frontendData },
4745
format,
4846
} = props;
4947

48+
const { branding } =
49+
frontendData.commercialProperties[frontendData.editionId];
50+
5051
return (
5152
<>
52-
{props.renderingTarget === 'Web' ? (
53+
{props.renderingTarget === 'Web' && branding ? (
5354
<Stuck>
5455
<Section
5556
fullWidth={true}
@@ -61,8 +62,8 @@ export const HostedGalleryLayout = (props: WebProps | AppProps) => {
6162
element="aside"
6263
>
6364
<HostedContentHeader
64-
accentColor={sourcePalette.brand[400]}
65-
branding="logo"
65+
branding={branding}
66+
accentColor={branding.hostedCampaignColour}
6667
/>
6768
</Section>
6869
</Stuck>
@@ -103,8 +104,8 @@ export const HostedGalleryLayout = (props: WebProps | AppProps) => {
103104
defer={{ until: 'visible' }}
104105
>
105106
<ShareButton
106-
pageId={pageId}
107-
webTitle={webTitle}
107+
pageId={frontendData.pageId}
108+
webTitle={frontendData.webTitle}
108109
format={format}
109110
context="ArticleMeta"
110111
/>

0 commit comments

Comments
 (0)