Skip to content

Commit 997590c

Browse files
philmcmahonphilmcmahon
committed
Add rendering support for reporter callouts
1 parent 3572cc5 commit 997590c

File tree

5 files changed

+176
-0
lines changed

5 files changed

+176
-0
lines changed

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { isUndefined } from '@guardian/libs';
2+
import type { ReporterCalloutBlockElement } from '../types/content';
3+
import { Body } from './ExpandableAtom/Body';
4+
import { Container } from './ExpandableAtom/Container';
5+
6+
/**
7+
* A callout to readers to share tips with reporters
8+
*
9+
* ## TODO: check if this needs to be an island - possibly not as there's no user interaction beyond expanding the box
10+
*
11+
*/
12+
13+
export const ReporterCalloutBlockComponent = ({
14+
callout,
15+
}: {
16+
callout: ReporterCalloutBlockElement;
17+
}) => {
18+
const {
19+
id,
20+
title,
21+
description,
22+
activeUntil,
23+
// contacts, TODO: Render contacts
24+
} = callout;
25+
const isExpired = isUndefined(activeUntil)
26+
? false
27+
: Math.floor(new Date().getTime() / 1000) > activeUntil;
28+
29+
return isExpired ? (
30+
<></>
31+
) : (
32+
<div data-gu-name="callout">
33+
<Container
34+
id={id}
35+
title={title}
36+
atomType="guide"
37+
atomTypeTitle="Get in touch"
38+
expandCallback={() => {
39+
// do nothing - I don't think we want to track interactions with this component in ophan
40+
}}
41+
>
42+
<Body
43+
html={description}
44+
image={
45+
'https://i.guim.co.uk/img/media/ae475ccca7c94a4565f6b500a485479f08098383/788_0_4000_4000/4000.jpg?width=620&quality=85&auto=format&fit=max&s=45fd162100b331bf1618e364c5c69452'
46+
}
47+
credit={'Illustration: Guardian Design / Rich Cousins'}
48+
/>
49+
</Container>
50+
</div>
51+
);
52+
};

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -611,6 +611,9 @@
611611
{
612612
"$ref": "#/definitions/CalloutBlockElementV2"
613613
},
614+
{
615+
"$ref": "#/definitions/ReporterCalloutBlockElement"
616+
},
614617
{
615618
"$ref": "#/definitions/CartoonBlockElement"
616619
},
@@ -1547,6 +1550,53 @@
15471550
"value"
15481551
]
15491552
},
1553+
"ReporterCalloutBlockElement": {
1554+
"type": "object",
1555+
"properties": {
1556+
"_type": {
1557+
"type": "string",
1558+
"const": "model.dotcomrendering.pageElements.ReporterCalloutBlockElement"
1559+
},
1560+
"elementId": {
1561+
"type": "string"
1562+
},
1563+
"id": {
1564+
"type": "string"
1565+
},
1566+
"activeFrom": {
1567+
"type": "number"
1568+
},
1569+
"activeUntil": {
1570+
"type": "number"
1571+
},
1572+
"displayOnSensitive": {
1573+
"type": "boolean"
1574+
},
1575+
"title": {
1576+
"type": "string"
1577+
},
1578+
"description": {
1579+
"type": "string"
1580+
},
1581+
"role": {
1582+
"$ref": "#/definitions/RoleType"
1583+
},
1584+
"contacts": {
1585+
"type": "array",
1586+
"items": {
1587+
"$ref": "#/definitions/CalloutContactType"
1588+
}
1589+
}
1590+
},
1591+
"required": [
1592+
"_type",
1593+
"description",
1594+
"displayOnSensitive",
1595+
"elementId",
1596+
"id",
1597+
"title"
1598+
]
1599+
},
15501600
"CartoonBlockElement": {
15511601
"type": "object",
15521602
"properties": {

‎dotcom-rendering/src/lib/renderElement.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ import type { FEElement, RoleType, StarRating } from '../types/content';
7373
import { ArticleDesign, type ArticleFormat } from './articleFormat';
7474
import type { EditionId } from './edition';
7575
import { getLargestImageSize } from './image';
76+
import { ReporterCalloutBlockComponent } from '../components/ReporterCalloutBlockComponent.importable';
7677

7778
type Props = {
7879
format: ArticleFormat;
@@ -220,6 +221,15 @@ export const renderElement = ({
220221
);
221222
}
222223
return null;
224+
case 'model.dotcomrendering.pageElements.ReporterCalloutBlockElement':
225+
if (switches.callouts) {
226+
return (
227+
<Island priority="feature" defer={{ until: 'visible' }}>
228+
<ReporterCalloutBlockComponent callout={element} />
229+
</Island>
230+
);
231+
}
232+
return null;
223233

224234
case 'model.dotcomrendering.pageElements.CaptionBlockElement':
225235
return (

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,9 @@
9999
{
100100
"$ref": "#/definitions/CalloutBlockElementV2"
101101
},
102+
{
103+
"$ref": "#/definitions/ReporterCalloutBlockElement"
104+
},
102105
{
103106
"$ref": "#/definitions/CartoonBlockElement"
104107
},
@@ -1035,6 +1038,53 @@
10351038
"value"
10361039
]
10371040
},
1041+
"ReporterCalloutBlockElement": {
1042+
"type": "object",
1043+
"properties": {
1044+
"_type": {
1045+
"type": "string",
1046+
"const": "model.dotcomrendering.pageElements.ReporterCalloutBlockElement"
1047+
},
1048+
"elementId": {
1049+
"type": "string"
1050+
},
1051+
"id": {
1052+
"type": "string"
1053+
},
1054+
"activeFrom": {
1055+
"type": "number"
1056+
},
1057+
"activeUntil": {
1058+
"type": "number"
1059+
},
1060+
"displayOnSensitive": {
1061+
"type": "boolean"
1062+
},
1063+
"title": {
1064+
"type": "string"
1065+
},
1066+
"description": {
1067+
"type": "string"
1068+
},
1069+
"role": {
1070+
"$ref": "#/definitions/RoleType"
1071+
},
1072+
"contacts": {
1073+
"type": "array",
1074+
"items": {
1075+
"$ref": "#/definitions/CalloutContactType"
1076+
}
1077+
}
1078+
},
1079+
"required": [
1080+
"_type",
1081+
"description",
1082+
"displayOnSensitive",
1083+
"elementId",
1084+
"id",
1085+
"title"
1086+
]
1087+
},
10381088
"CartoonBlockElement": {
10391089
"type": "object",
10401090
"properties": {

‎dotcom-rendering/src/types/content.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,19 @@ export interface CalloutBlockElementV2 {
111111
contacts?: CalloutContactType[];
112112
}
113113

114+
export interface ReporterCalloutBlockElement {
115+
_type: 'model.dotcomrendering.pageElements.ReporterCalloutBlockElement';
116+
elementId: string;
117+
id: string;
118+
activeFrom?: number;
119+
activeUntil?: number;
120+
displayOnSensitive: boolean;
121+
title: string;
122+
description: string;
123+
role?: RoleType;
124+
contacts?: CalloutContactType[];
125+
}
126+
114127
export interface CartoonBlockElement {
115128
_type: 'model.dotcomrendering.pageElements.CartoonBlockElement';
116129
elementId: string;
@@ -796,6 +809,7 @@ export type FEElement =
796809
| CaptionBlockElement
797810
| CalloutBlockElement
798811
| CalloutBlockElementV2
812+
| ReporterCalloutBlockElement
799813
| CartoonBlockElement
800814
| ChartAtomBlockElement
801815
| CodeBlockElement

0 commit comments

Comments
 (0)