Skip to content

Commit 5e16fd3

Browse files
deedeehdeedeeh
authored
Merge pull request #15333 from guardian/dina/add-share-button-colour-for-hosted
Add `shareButton` colour to Hosted Content
2 parents 28bc955 + 1f8d607 commit 5e16fd3

6 files changed

Lines changed: 100 additions & 20 deletions

File tree

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,13 +170,15 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
170170
return (
171171
<HostedArticleLayout
172172
content={article}
173+
format={format}
173174
renderingTarget={renderingTarget}
174175
/>
175176
);
176177
case ArticleDesign.HostedGallery:
177178
return (
178179
<HostedGalleryLayout
179180
content={article}
181+
format={format}
180182
renderingTarget={renderingTarget}
181183
/>
182184
);
@@ -365,13 +367,15 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
365367
return (
366368
<HostedArticleLayout
367369
content={article}
370+
format={format}
368371
renderingTarget={renderingTarget}
369372
/>
370373
);
371374
case ArticleDesign.HostedGallery:
372375
return (
373376
<HostedGalleryLayout
374377
content={article}
378+
format={format}
375379
renderingTarget={renderingTarget}
376380
/>
377381
);

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import type { Meta, StoryObj } from '@storybook/react-webpack5';
22
import { allModes } from '../../.storybook/modes';
33
import { hostedArticle } from '../../fixtures/manual/hostedArticle';
4+
import {
5+
ArticleDesign,
6+
ArticleDisplay,
7+
ArticleSpecial,
8+
} from '../lib/articleFormat';
49
import { enhanceArticleType } from '../types/article';
510
import { HostedArticleLayout } from './HostedArticleLayout';
611

@@ -20,9 +25,16 @@ export default meta;
2025

2126
type Story = StoryObj<typeof meta>;
2227

28+
const format = {
29+
theme: ArticleSpecial.Labs,
30+
design: ArticleDesign.HostedArticle,
31+
display: ArticleDisplay.Standard,
32+
};
33+
2334
export const Apps = {
2435
args: {
2536
content: enhanceArticleType(hostedArticle, 'Apps'),
37+
format,
2638
renderingTarget: 'Apps',
2739
},
2840
parameters: {
@@ -35,6 +47,7 @@ export const Apps = {
3547
export const Web = {
3648
args: {
3749
content: enhanceArticleType(hostedArticle, 'Web'),
50+
format,
3851
renderingTarget: 'Web',
3952
},
4053
parameters: {

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

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,15 @@ import { Island } from '../components/Island';
99
import { Section } from '../components/Section';
1010
import { ShareButton } from '../components/ShareButton.importable';
1111
import { grid } from '../grid';
12-
import {
13-
ArticleDesign,
14-
ArticleDisplay,
15-
ArticleSpecial,
16-
} from '../lib/articleFormat';
12+
import type { ArticleFormat } from '../lib/articleFormat';
1713
import type { Article } from '../types/article';
1814
import type { RenderingTarget } from '../types/renderingTarget';
1915
import { Stuck } from './lib/stickiness';
2016

2117
interface Props {
22-
renderingTarget: RenderingTarget;
2318
content: Article;
19+
format: ArticleFormat;
20+
renderingTarget: RenderingTarget;
2421
}
2522

2623
interface WebProps extends Props {
@@ -54,8 +51,9 @@ const shareButtonWrapper = css`
5451
export const HostedArticleLayout = (props: WebProps | AppProps) => {
5552
const {
5653
content: {
57-
frontendData: { headline, standfirst },
54+
frontendData: { headline, standfirst, pageId, webTitle },
5855
},
56+
format,
5957
} = props;
6058

6159
return (
@@ -117,15 +115,9 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
117115
defer={{ until: 'visible' }}
118116
>
119117
<ShareButton
120-
pageId={'replace with actual pageId'}
121-
webTitle={
122-
'replace with actual webTitle'
123-
}
124-
format={{
125-
theme: ArticleSpecial.Labs,
126-
design: ArticleDesign.Standard,
127-
display: ArticleDisplay.Standard,
128-
}} // replace with Hosted Content format if there is one
118+
pageId={pageId}
119+
webTitle={webTitle}
120+
format={format}
129121
context="ArticleMeta"
130122
/>
131123
</Island>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import type { Meta, StoryObj } from '@storybook/react-webpack5';
22
import { allModes } from '../../.storybook/modes';
33
import { hostedGallery } from '../../fixtures/manual/hostedGallery';
4+
import {
5+
ArticleDesign,
6+
ArticleDisplay,
7+
ArticleSpecial,
8+
} from '../lib/articleFormat';
49
import { enhanceArticleType } from '../types/article';
510
import { HostedGalleryLayout } from './HostedGalleryLayout';
611

@@ -20,9 +25,16 @@ export default meta;
2025

2126
type Story = StoryObj<typeof meta>;
2227

28+
const format = {
29+
theme: ArticleSpecial.Labs,
30+
design: ArticleDesign.HostedGallery,
31+
display: ArticleDisplay.Standard,
32+
};
33+
2334
export const Apps = {
2435
args: {
2536
content: enhanceArticleType(hostedGallery, 'Apps'),
37+
format,
2638
renderingTarget: 'Apps',
2739
},
2840
parameters: {
@@ -35,6 +47,7 @@ export const Apps = {
3547
export const Web = {
3648
args: {
3749
content: enhanceArticleType(hostedGallery, 'Web'),
50+
format,
3851
renderingTarget: 'Web',
3952
},
4053
parameters: {

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

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import { css } from '@emotion/react';
2-
import { palette as sourcePalette } from '@guardian/source/foundations';
2+
import {
3+
from,
4+
palette as sourcePalette,
5+
space,
6+
} from '@guardian/source/foundations';
37
import { HostedContentHeader } from '../components/HostedContentHeader';
8+
import { Island } from '../components/Island';
49
import { Section } from '../components/Section';
10+
import { ShareButton } from '../components/ShareButton.importable';
511
import { grid } from '../grid';
12+
import type { ArticleFormat } from '../lib/articleFormat';
613
import type { Article } from '../types/article';
714
import type { RenderingTarget } from '../types/renderingTarget';
815
import { Stuck } from './lib/stickiness';
916

1017
interface Props {
11-
renderingTarget: RenderingTarget;
1218
content: Article;
19+
format: ArticleFormat;
20+
renderingTarget: RenderingTarget;
1321
}
1422

1523
interface WebProps extends Props {
@@ -24,7 +32,21 @@ const border = css`
2432
border: 1px solid black;
2533
`;
2634

35+
const metaFlex = css`
36+
margin-bottom: ${space[3]}px;
37+
display: flex;
38+
justify-content: space-between;
39+
flex-wrap: wrap;
40+
`;
41+
2742
export const HostedGalleryLayout = (props: WebProps | AppProps) => {
43+
const {
44+
content: {
45+
frontendData: { pageId, webTitle },
46+
},
47+
format,
48+
} = props;
49+
2850
return (
2951
<>
3052
{props.renderingTarget === 'Web' ? (
@@ -59,8 +81,38 @@ export const HostedGalleryLayout = (props: WebProps | AppProps) => {
5981
<div css={border}>Onward</div>
6082
</article>
6183
</div>
62-
<div css={[grid.container, border]}>
63-
<div css={[grid.column.all]}>Footer</div>
84+
<div
85+
css={[
86+
grid.container,
87+
border,
88+
css`
89+
padding: ${space[2]}px;
90+
91+
${from.desktop} {
92+
padding: ${space[4]}px ${space[8]}px;
93+
}
94+
`,
95+
]}
96+
>
97+
<div css={[grid.column.all]}>
98+
<div css={[grid.column.left]}>
99+
<div data-print-layout="hide" css={metaFlex}>
100+
{props.renderingTarget === 'Web' && (
101+
<Island
102+
priority="feature"
103+
defer={{ until: 'visible' }}
104+
>
105+
<ShareButton
106+
pageId={pageId}
107+
webTitle={webTitle}
108+
format={format}
109+
context="ArticleMeta"
110+
/>
111+
</Island>
112+
)}
113+
</div>
114+
</div>
115+
</div>
64116
</div>
65117
</main>
66118
</>

‎dotcom-rendering/src/paletteDeclarations.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3703,6 +3703,9 @@ const shareButtonHoverLight: PaletteFunction = ({ design, theme }) => {
37033703
case ArticleDesign.Audio:
37043704
case ArticleDesign.Video:
37053705
case ArticleDesign.Picture:
3706+
case ArticleDesign.HostedArticle:
3707+
case ArticleDesign.HostedGallery:
3708+
case ArticleDesign.HostedVideo:
37063709
switch (theme) {
37073710
case ArticleSpecial.Labs:
37083711
return sourcePalette.neutral[100];
@@ -3780,6 +3783,9 @@ const shareButtonLight: PaletteFunction = ({ design, theme, display }) => {
37803783
case ArticleDesign.Audio:
37813784
case ArticleDesign.Video:
37823785
case ArticleDesign.Picture:
3786+
case ArticleDesign.HostedArticle:
3787+
case ArticleDesign.HostedGallery:
3788+
case ArticleDesign.HostedVideo:
37833789
switch (theme) {
37843790
case ArticleSpecial.Labs:
37853791
return sourcePalette.neutral[7];

0 commit comments

Comments
 (0)