Skip to content

Commit 22bb80d

Browse files
philmcmahonphilmcmahon
committed
Add storybook, tidy up a bit
1 parent 275d7a5 commit 22bb80d

File tree

4 files changed

+127
-64
lines changed

4 files changed

+127
-64
lines changed

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

Lines changed: 34 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
1-
import { isUndefined } from '@guardian/libs';
2-
import type {
3-
CalloutContactType,
4-
ReporterCalloutBlockElement,
5-
} from '../types/content';
6-
import { palette } from '../palette';
7-
import { Deadline } from './Callout/Deadline';
8-
import { ExpandingWrapper } from '@guardian/source-development-kitchen/react-components';
91
import { css } from '@emotion/react';
2+
import { isUndefined } from '@guardian/libs';
103
import {
114
article17,
125
headlineBold20,
136
headlineMedium20,
147
space,
158
} from '@guardian/source/foundations';
9+
import { ExpandingWrapper } from '@guardian/source-development-kitchen/react-components';
10+
import { palette } from '../palette';
11+
import type { ReporterCalloutBlockElement } from '../types/content';
1612

1713
/**
1814
* A callout to readers to share tips with reporters
@@ -21,12 +17,30 @@ import {
2117
*
2218
*/
2319

20+
const expandingWrapperTheme = {
21+
'--background': palette('--expandingWrapper--background'),
22+
'--border': palette('--expandingWrapper--border'),
23+
'--collapseBackground': palette('--expandingWrapper--collapseBackground'),
24+
'--collapseBackgroundHover': palette(
25+
'--expandingWrapper--collapseBackgroundHover',
26+
),
27+
'--collapseText': palette('--expandingWrapper--collapseText'),
28+
'--collapseTextHover': palette('--expandingWrapper--collapseTextHover'),
29+
'--text': palette('--expandingWrapper--text'),
30+
'--horizontalRules': palette('--expandingWrapper--horizontalRules'),
31+
'--expandBackground': palette('--expandingWrapper--expandBackground'),
32+
'--expandBackgroundHover': palette(
33+
'--expandingWrapper--expandBackgroundHover',
34+
),
35+
'--expandText': palette('--expandingWrapper--expandText'),
36+
};
37+
2438
const promptStyles = css`
2539
${headlineBold20};
2640
`;
2741

2842
const subtitleTextHeaderStyles = css`
29-
${headlineMedium20}
43+
${headlineMedium20};
3044
padding-bottom: ${space[3]}px;
3145
`;
3246

@@ -51,6 +65,12 @@ const calloutStyles = css`
5165
}
5266
`;
5367

68+
const reporterCalloutWrapperStyles = css`
69+
padding-bottom: ${space[8]}px;
70+
margin-left: ${space[2]}px;
71+
margin-right: ${space[2]}px;
72+
`;
73+
5474
const dangerouslyRenderField = (field?: string, title?: string) => {
5575
return field ? (
5676
<div css={[linkStyles, calloutStyles]}>
@@ -72,7 +92,6 @@ export const ReporterCalloutBlockComponent = ({
7292
callout: ReporterCalloutBlockElement;
7393
}) => {
7494
const {
75-
id,
7695
title,
7796
subtitle,
7897
intro,
@@ -88,48 +107,16 @@ export const ReporterCalloutBlockComponent = ({
88107
? false
89108
: Math.floor(new Date().getTime() / 1000) > activeUntil;
90109

91-
console.log('CONTACTS', mainText);
92-
93110
return isExpired ? (
94111
<></>
95112
) : (
96-
<div data-gu-name="callout">
113+
<div data-gu-name="reporter-callout">
97114
<ExpandingWrapper
98-
name={`${title} callout`}
99-
theme={{
100-
'--background': palette('--expandingWrapper--background'),
101-
'--border': palette('--expandingWrapper--border'),
102-
'--collapseBackground': palette(
103-
'--expandingWrapper--collapseBackground',
104-
),
105-
'--collapseBackgroundHover': palette(
106-
'--expandingWrapper--collapseBackgroundHover',
107-
),
108-
'--collapseText': palette(
109-
'--expandingWrapper--collapseText',
110-
),
111-
'--collapseTextHover': palette(
112-
'--expandingWrapper--collapseTextHover',
113-
),
114-
'--text': palette('--expandingWrapper--text'),
115-
'--horizontalRules': palette(
116-
'--expandingWrapper--horizontalRules',
117-
),
118-
'--expandBackground': palette(
119-
'--expandingWrapper--expandBackground',
120-
),
121-
'--expandBackgroundHover': palette(
122-
'--expandingWrapper--expandBackgroundHover',
123-
),
124-
'--expandText': palette('--expandingWrapper--expandText'),
125-
}}
115+
name={`${title} reporter callout`}
116+
theme={expandingWrapperTheme}
126117
collapsedHeight={'160px'}
127118
>
128-
<div
129-
style={css`
130-
paddingbottom: ${space[4]}px;
131-
`}
132-
>
119+
<div style={reporterCalloutWrapperStyles}>
133120
<div
134121
css={promptStyles}
135122
style={{
@@ -142,8 +129,7 @@ export const ReporterCalloutBlockComponent = ({
142129
<h4 css={subtitleTextHeaderStyles}>{subtitle}</h4>
143130

144131
{dangerouslyRenderField(intro)}
145-
<h4 css={subtitleTextHeaderStyles}>{mainTextHeading}</h4>
146-
{dangerouslyRenderField(mainText)}
132+
{dangerouslyRenderField(mainText, mainTextHeading)}
147133
{dangerouslyRenderField(emailContact, 'Email')}
148134
{dangerouslyRenderField(messagingContact, 'Messaging apps')}
149135
{dangerouslyRenderField(securedropContact, 'SecureDrop')}

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
2+
import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
3+
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
4+
import type { ReporterCalloutBlockElement } from '../types/content';
5+
import { ReporterCalloutBlockComponent } from './ReporterCalloutBlockComponent.importable';
6+
7+
const meta: Meta<typeof ReporterCalloutBlockComponent> = {
8+
title: 'Components/Reporter Callout Block',
9+
component: ReporterCalloutBlockComponent,
10+
};
11+
12+
export default meta;
13+
14+
type Story = StoryObj<typeof ReporterCalloutBlockComponent>;
15+
16+
const defaultFormat = {
17+
display: ArticleDisplay.Standard,
18+
design: ArticleDesign.Standard,
19+
theme: Pillar.News,
20+
};
21+
22+
const defaultCallout: ReporterCalloutBlockElement = {
23+
_type: 'model.dotcomrendering.pageElements.ReporterCalloutBlockElement',
24+
elementId: 'abc123',
25+
id: 'def456',
26+
displayOnSensitive: false,
27+
title: 'Get in touch',
28+
subtitle: 'Contact us about this story',
29+
intro: '<p>If you have something to share about this story, please contact us using one of the following methods</p>',
30+
mainTextHeading: 'Secure Messaging in the Guardian app',
31+
mainText:
32+
'<p>The Guardian app has a tool to send tips about stories. Messages are end to end encrypted and concealed within the routine activity that every Guardian mobile app performs. This prevents an observer from knowing that you are communicating with us at all, let alone what is being said.</p><p></p><p>If you don\'t already have the Guardian app, download it (<a href="https://apps.apple.com/app/the-guardian-live-world-news/id409128287">iOS</a>/<a href="https://play.google.com/store/apps/details?id=com.guardian">Android</a>) and go to the menu. Select \'Secure Messaging\'.</p><p> </p>',
33+
emailContact:
34+
'<p>If you don\'t need strong security then see <a href="https://manage.theguardian.com/help-centre/article/contact-a-journalist-or-editorial-desk">this guide</a>&nbsp;for how to contact the relevant desk</p>',
35+
messagingContact:
36+
'<p>Alternatively put a message in a bottle and lob it at +447123456789</p>',
37+
securedropContact:
38+
'If you can safely use the tor network without being observed or monitored you can send messages and documents to the Guardian via our <a href="https://www.theguardian.com/securedrop">SecureDrop platform.</a>',
39+
endNote:
40+
'<p>Finally, our guide at <a href="https://www.theguardian.com/tips">theguardian.com/tips</a> lists several ways to contact us securely, and discusses the pros and cons of each.</p>',
41+
};
42+
43+
export const Default: Story = {
44+
args: {
45+
callout: defaultCallout,
46+
},
47+
decorators: [splitTheme([defaultFormat])],
48+
};
49+
50+
export const MinimalContacts: Story = {
51+
args: {
52+
callout: {
53+
...defaultCallout,
54+
emailContact: undefined,
55+
messagingContact: undefined,
56+
securedropContact: undefined,
57+
},
58+
},
59+
decorators: [splitTheme([defaultFormat])],
60+
};
61+
62+
export const WithoutEndNote: Story = {
63+
args: {
64+
callout: {
65+
...defaultCallout,
66+
endNote: undefined,
67+
},
68+
},
69+
decorators: [splitTheme([defaultFormat])],
70+
};
71+
72+
export const ExpiredCallout: Story = {
73+
args: {
74+
callout: {
75+
...defaultCallout,
76+
// Set activeUntil to a timestamp in the past (January 1, 2020)
77+
activeUntil: 1577836800,
78+
},
79+
},
80+
decorators: [splitTheme([defaultFormat])],
81+
};

‎dotcom-rendering/src/frontend/schemas/feArticle.json‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1584,20 +1584,17 @@
15841584
"intro": {
15851585
"type": "string"
15861586
},
1587-
"mainText": {
1587+
"mainTextHeading": {
15881588
"type": "string"
15891589
},
1590-
"emailContact1": {
1590+
"mainText": {
15911591
"type": "string"
15921592
},
1593-
"emailContact2": {
1593+
"emailContact": {
15941594
"type": "string"
15951595
},
1596-
"massagingContacts": {
1597-
"type": "array",
1598-
"items": {
1599-
"$ref": "#/definitions/CalloutContactType"
1600-
}
1596+
"messagingContact": {
1597+
"type": "string"
16011598
},
16021599
"securedropContact": {
16031600
"type": "string"
@@ -1613,6 +1610,7 @@
16131610
"id",
16141611
"intro",
16151612
"mainText",
1613+
"mainTextHeading",
16161614
"subtitle",
16171615
"title"
16181616
]

‎dotcom-rendering/src/model/block-schema.json‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1072,20 +1072,17 @@
10721072
"intro": {
10731073
"type": "string"
10741074
},
1075-
"mainText": {
1075+
"mainTextHeading": {
10761076
"type": "string"
10771077
},
1078-
"emailContact1": {
1078+
"mainText": {
10791079
"type": "string"
10801080
},
1081-
"emailContact2": {
1081+
"emailContact": {
10821082
"type": "string"
10831083
},
1084-
"massagingContacts": {
1085-
"type": "array",
1086-
"items": {
1087-
"$ref": "#/definitions/CalloutContactType"
1088-
}
1084+
"messagingContact": {
1085+
"type": "string"
10891086
},
10901087
"securedropContact": {
10911088
"type": "string"
@@ -1101,6 +1098,7 @@
11011098
"id",
11021099
"intro",
11031100
"mainText",
1101+
"mainTextHeading",
11041102
"subtitle",
11051103
"title"
11061104
]

0 commit comments

Comments
 (0)