@financial-times/cp-content-pipeline-ui 11.3.2 → 12.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/lib/components/PartnerContentHeader/index.d.ts +3 -2
- package/lib/components/PartnerContentHeader/index.js +9 -2
- package/lib/components/PartnerContentHeader/index.js.map +1 -1
- package/lib/components/PartnerContentHeader/index.spec.d.ts +1 -0
- package/lib/components/PartnerContentHeader/index.spec.js +49 -0
- package/lib/components/PartnerContentHeader/index.spec.js.map +1 -0
- package/lib/components/Topper/HeaderSlot.d.ts +8 -0
- package/lib/components/Topper/HeaderSlot.js +38 -0
- package/lib/components/Topper/HeaderSlot.js.map +1 -0
- package/lib/components/Topper/Picture.js +0 -15
- package/lib/components/Topper/Picture.js.map +1 -1
- package/lib/components/Topper/index.js +2 -15
- package/lib/components/Topper/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/PartnerContentHeader/index.spec.tsx +71 -0
- package/src/components/PartnerContentHeader/index.tsx +21 -4
- package/src/components/Topper/HeaderSlot.tsx +50 -0
- package/src/components/Topper/Picture.tsx +0 -16
- package/src/components/Topper/index.tsx +3 -36
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -574,6 +574,25 @@
|
|
|
574
574
|
* @financial-times/cp-content-pipeline-client bumped from ^3.7.2 to ^3.7.3
|
|
575
575
|
* @financial-times/cp-content-pipeline-schema bumped from ^2.10.1 to ^2.10.2
|
|
576
576
|
|
|
577
|
+
## [12.0.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v11.3.2...cp-content-pipeline-ui-v12.0.0) (2026-05-14)
|
|
578
|
+
|
|
579
|
+
|
|
580
|
+
### ⚠ BREAKING CHANGES
|
|
581
|
+
|
|
582
|
+
* ci-3413 partner content topper strategy
|
|
583
|
+
|
|
584
|
+
### Features
|
|
585
|
+
|
|
586
|
+
* ci-3413 partner content topper strategy ([76816cd](https://github.com/Financial-Times/cp-content-pipeline/commit/76816cda5d5f18c735df9ad2607306b096129204))
|
|
587
|
+
|
|
588
|
+
|
|
589
|
+
### Dependencies
|
|
590
|
+
|
|
591
|
+
* The following workspace dependencies were updated
|
|
592
|
+
* devDependencies
|
|
593
|
+
* @financial-times/cp-content-pipeline-client bumped from ^5.2.0 to ^6.0.0
|
|
594
|
+
* @financial-times/cp-content-pipeline-schema bumped from ^4.3.0 to ^5.0.0
|
|
595
|
+
|
|
577
596
|
## [11.3.2](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v11.3.1...cp-content-pipeline-ui-v11.3.2) (2026-05-07)
|
|
578
597
|
|
|
579
598
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import type { Article } from '@financial-times/cp-content-pipeline-client';
|
|
3
|
+
declare const PartnerContentHeader: ({ name, disclaimerType, }: {
|
|
3
4
|
name: string;
|
|
4
|
-
|
|
5
|
+
disclaimerType?: Article["disclaimerType"];
|
|
5
6
|
}) => React.JSX.Element;
|
|
6
7
|
export default PartnerContentHeader;
|
|
@@ -5,13 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const cjs_1 = require("@financial-times/o3-tooltip/cjs");
|
|
8
|
-
const
|
|
8
|
+
const DISCLAIMER_MESSAGES = {
|
|
9
|
+
'co-created-content': (name) => `This content was paid for by ${name} and produced in partnership with the Financial Times Commercial department`,
|
|
10
|
+
'client-supplied-content': (name) => `This content was paid for and produced by ${name}`,
|
|
11
|
+
'ft-studios-risky': (name) => `This advertisement has been produced by the Commercial department of the Financial Times on behalf of ${name}`,
|
|
12
|
+
auditor: (name) => `This content was paid for and produced by ${name} with the Financial Times Commercial department`,
|
|
13
|
+
fallback: (name) => `This content was paid for by ${name} and produced in partnership with the Financial Times Commercial department`,
|
|
14
|
+
};
|
|
15
|
+
const PartnerContentHeader = ({ name = 'the sponsor', disclaimerType, }) => {
|
|
9
16
|
return (react_1.default.createElement("div", { className: "partner-content-header", "data-o3-brand": "core" },
|
|
10
17
|
react_1.default.createElement("div", { className: "partner-content-header__content" },
|
|
11
18
|
react_1.default.createElement("div", { className: "partner-content-header__client" }, name),
|
|
12
19
|
react_1.default.createElement("div", { className: "partner-content-header__title" },
|
|
13
20
|
react_1.default.createElement("p", null, "Partner Content"),
|
|
14
|
-
react_1.default.createElement(cjs_1.TooltipToggle, { placement: "bottom", content:
|
|
21
|
+
react_1.default.createElement(cjs_1.TooltipToggle, { placement: "bottom", content: DISCLAIMER_MESSAGES[disclaimerType ?? 'fallback'](name), infoLabel: "More information on Partner Content" })))));
|
|
15
22
|
};
|
|
16
23
|
exports.default = PartnerContentHeader;
|
|
17
24
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PartnerContentHeader/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,yDAA+D;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PartnerContentHeader/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,yDAA+D;AAG/D,MAAM,mBAAmB,GAGrB;IACF,oBAAoB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC7B,gCAAgC,IAAI,6EAA6E;IACnH,yBAAyB,EAAE,CAAC,IAAI,EAAE,EAAE,CAClC,6CAA6C,IAAI,EAAE;IACrD,kBAAkB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC3B,yGAAyG,IAAI,EAAE;IACjH,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAChB,6CAA6C,IAAI,iDAAiD;IACpG,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CACjB,gCAAgC,IAAI,6EAA6E;CACpH,CAAA;AAED,MAAM,oBAAoB,GAAG,CAAC,EAC5B,IAAI,GAAG,aAAa,EACpB,cAAc,GAIf,EAAE,EAAE;IACH,OAAO,CACL,uCAAK,SAAS,EAAC,wBAAwB,mBAAe,MAAM;QAC1D,uCAAK,SAAS,EAAC,iCAAiC;YAC9C,uCAAK,SAAS,EAAC,gCAAgC,IAAE,IAAI,CAAO;YAC5D,uCAAK,SAAS,EAAC,+BAA+B;gBAC5C,2DAAsB;gBACtB,8BAAC,mBAAa,IACZ,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,mBAAmB,CAAC,cAAc,IAAI,UAAU,CAAC,CAAC,IAAI,CAAC,EAChE,SAAS,EAAC,qCAAqC,GAC/C,CACE,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,oBAAoB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const react_2 = require("@testing-library/react");
|
|
8
|
+
const _1 = __importDefault(require("."));
|
|
9
|
+
jest.mock('@financial-times/o3-tooltip/cjs', () => ({
|
|
10
|
+
TooltipToggle: ({ content, infoLabel, }) => (react_1.default.createElement("button", { "data-testid": "tooltip-toggle", "aria-label": infoLabel }, content)),
|
|
11
|
+
}));
|
|
12
|
+
describe('PartnerContentHeader', () => {
|
|
13
|
+
const name = 'Acme Corp';
|
|
14
|
+
const cases = [
|
|
15
|
+
[
|
|
16
|
+
'fallback',
|
|
17
|
+
undefined,
|
|
18
|
+
'This content was paid for by Acme Corp and produced in partnership with the Financial Times Commercial department',
|
|
19
|
+
],
|
|
20
|
+
[
|
|
21
|
+
'co-created-content',
|
|
22
|
+
'co-created-content',
|
|
23
|
+
'This content was paid for by Acme Corp and produced in partnership with the Financial Times Commercial department',
|
|
24
|
+
],
|
|
25
|
+
[
|
|
26
|
+
'client-supplied-content',
|
|
27
|
+
'client-supplied-content',
|
|
28
|
+
'This content was paid for and produced by Acme Corp',
|
|
29
|
+
],
|
|
30
|
+
[
|
|
31
|
+
'ft-studios-risky',
|
|
32
|
+
'ft-studios-risky',
|
|
33
|
+
'This advertisement has been produced by the Commercial department of the Financial Times on behalf of Acme Corp',
|
|
34
|
+
],
|
|
35
|
+
[
|
|
36
|
+
'auditor',
|
|
37
|
+
'auditor',
|
|
38
|
+
'This content was paid for and produced by Acme Corp with the Financial Times Commercial department',
|
|
39
|
+
],
|
|
40
|
+
];
|
|
41
|
+
it.each(cases)('renders the %s disclaimer string', (_, disclaimerType, expected) => {
|
|
42
|
+
const { container } = (0, react_2.render)(react_1.default.createElement(_1.default, { name: name, disclaimerType: disclaimerType }));
|
|
43
|
+
const clientName = container.querySelector('.partner-content-header__client');
|
|
44
|
+
const tooltipToggle = react_2.screen.getByTestId('tooltip-toggle');
|
|
45
|
+
expect(clientName?.textContent).toBe(name);
|
|
46
|
+
expect(tooltipToggle.textContent).toBe(expected);
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
//# sourceMappingURL=index.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/PartnerContentHeader/index.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA6C;AAC7C,kDAAuD;AACvD,yCAAoC;AAEpC,IAAI,CAAC,IAAI,CAAC,iCAAiC,EAAE,GAAG,EAAE,CAAC,CAAC;IAClD,aAAa,EAAE,CAAC,EACd,OAAO,EACP,SAAS,GAIV,EAAE,EAAE,CAAC,CACJ,yDAAoB,gBAAgB,gBAAa,SAAS,IACvD,OAAO,CACD,CACV;CACF,CAAC,CAAC,CAAA;AAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,MAAM,IAAI,GAAG,WAAW,CAAA;IACxB,MAAM,KAAK,GAMP;QACF;YACE,UAAU;YACV,SAAS;YACT,mHAAmH;SACpH;QACD;YACE,oBAAoB;YACpB,oBAAoB;YACpB,mHAAmH;SACpH;QACD;YACE,yBAAyB;YACzB,yBAAyB;YACzB,qDAAqD;SACtD;QACD;YACE,kBAAkB;YAClB,kBAAkB;YAClB,iHAAiH;SAClH;QACD;YACE,SAAS;YACT,SAAS;YACT,oGAAoG;SACrG;KACF,CAAA;IAED,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CACZ,kCAAkC,EAClC,CAAC,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE;QAC9B,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,UAAoB,IAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,CACrE,CAAA;QAED,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CACxC,iCAAiC,CAClC,CAAA;QACD,MAAM,aAAa,GAAG,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAA;QAE1D,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC1C,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAClD,CAAC,CACF,CAAA;AACH,CAAC,CAAC,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client';
|
|
3
|
+
type Content = ArticleQuery['content'];
|
|
4
|
+
type HeaderSlotProps = {
|
|
5
|
+
content: Content;
|
|
6
|
+
};
|
|
7
|
+
declare const HeaderSlot: React.FC<HeaderSlotProps>;
|
|
8
|
+
export default HeaderSlot;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const PartnerContentHeader_1 = __importDefault(require("../PartnerContentHeader"));
|
|
8
|
+
const isHeaderSlotType = (value) => value in headerConfigs;
|
|
9
|
+
/**
|
|
10
|
+
* add new configs for new components to this map.
|
|
11
|
+
* They take the format:
|
|
12
|
+
* 'headerSlotTypeFromAPIData': {
|
|
13
|
+
* Component: YourNewImportedComponent,
|
|
14
|
+
* getProps: (content) => ({props: props})
|
|
15
|
+
* } satisfies HeaderConfig<ComponentProps<typeof YourNewImportedComponent>>,
|
|
16
|
+
* Also remember to import the component at the top of this file
|
|
17
|
+
*/
|
|
18
|
+
const headerConfigs = {
|
|
19
|
+
'partner-content': {
|
|
20
|
+
Component: PartnerContentHeader_1.default,
|
|
21
|
+
getProps: (content) => ({
|
|
22
|
+
name: ('clientName' in content && content.clientName) || 'Sponsor',
|
|
23
|
+
disclaimerType: content.__typename === 'Article' ? content.disclaimerType : undefined,
|
|
24
|
+
}),
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
/*
|
|
28
|
+
* Factory component to render specialised components to the slot above the main topper area. Full instructions in packages/schema/src/model/strategies/topper/README.md
|
|
29
|
+
*/
|
|
30
|
+
const HeaderSlot = ({ content }) => {
|
|
31
|
+
const headerSlotType = content?.topper?.headerSlot?.type;
|
|
32
|
+
if (!headerSlotType || !isHeaderSlotType(headerSlotType))
|
|
33
|
+
return null;
|
|
34
|
+
const { Component, getProps } = headerConfigs[headerSlotType];
|
|
35
|
+
return react_1.default.createElement(Component, { ...getProps(content) });
|
|
36
|
+
};
|
|
37
|
+
exports.default = HeaderSlot;
|
|
38
|
+
//# sourceMappingURL=HeaderSlot.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderSlot.js","sourceRoot":"","sources":["../../../src/components/Topper/HeaderSlot.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA4D;AAC5D,mFAA0D;AAa1D,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAA2B,EAAE,CAClE,KAAK,IAAI,aAAa,CAAA;AAExB;;;;;;;;GAQG;AACH,MAAM,aAAa,GAAG;IACpB,iBAAiB,EAAE;QACjB,SAAS,EAAE,8BAAoB;QAC/B,QAAQ,EAAE,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC;YAC/B,IAAI,EAAE,CAAC,YAAY,IAAI,OAAO,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,SAAS;YAClE,cAAc,EACZ,OAAO,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;SACxE,CAAC;KACiE;CACtE,CAAA;AAED;;GAEG;AACH,MAAM,UAAU,GAA8B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC5D,MAAM,cAAc,GAAG,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,CAAA;IACxD,IAAI,CAAC,cAAc,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC;QAAE,OAAO,IAAI,CAAA;IAErE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,aAAa,CAAC,cAAc,CAAC,CAAA;IAE7D,OAAO,8BAAC,SAAS,OAAK,QAAQ,CAAC,OAAO,CAAC,GAAI,CAAA;AAC7C,CAAC,CAAA;AAED,kBAAe,UAAU,CAAA"}
|
|
@@ -59,21 +59,6 @@ const topperGetBreakpointsMap = {
|
|
|
59
59
|
};
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
|
-
PartnerContentTopper(image) {
|
|
63
|
-
switch (image.format) {
|
|
64
|
-
case 'square':
|
|
65
|
-
return { maxWidth: 490 };
|
|
66
|
-
case 'standard':
|
|
67
|
-
return { minWidth: 491, maxWidth: 1219 };
|
|
68
|
-
case 'wide':
|
|
69
|
-
return {
|
|
70
|
-
normal: { minWidth: 1220, maxWidth: 1439 },
|
|
71
|
-
wide: { minWidth: 1440, maxWidth: 1919 },
|
|
72
|
-
wideL: { minWidth: 1920, maxWidth: 3839 },
|
|
73
|
-
wideXL: { minWidth: 3840 },
|
|
74
|
-
};
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
62
|
};
|
|
78
63
|
const Picture = (props) => {
|
|
79
64
|
const { topper, alt = '' } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Picture.js","sourceRoot":"","sources":["../../../src/components/Topper/Picture.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAIzB,uDAIiC;AACjC,oEAAiE;AAGjE,MAAM,uBAAuB,GAEzB;IACF,eAAe,CAAC,KAAK;QACnB,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;YACrB,KAAK,QAAQ;gBACX,OAAO,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAA;YAC/D,KAAK,UAAU;gBACb,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;YACzC,KAAK,MAAM;gBACT,OAAO;oBACL,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;oBAC1C,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;iBAC3B,CAAA;QACL,CAAC;IACH,CAAC;IAED,eAAe,CAAC,KAAK;QACnB,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;YACrB,KAAK,QAAQ;gBACX,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;YAC1B,KAAK,UAAU;gBACb,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;YAC1C,KAAK,MAAM;gBACT,OAAO;oBACL,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;oBAC1C,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACzC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;iBAC3B,CAAA;QACL,CAAC;IACH,CAAC;IAED,kBAAkB,CAAC,KAAK;QACtB,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;YACrB,KAAK,UAAU;gBACb,OAAO;oBACL,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;oBACxB,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACzC,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;iBACzB,CAAA;QACL,CAAC;IACH,CAAC;IAED,mBAAmB,CAAC,KAAK;QACvB,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;YACrB,KAAK,UAAU;gBACb,OAAO;oBACL,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;oBACxB,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE;iBAC1C,CAAA;YACH,KAAK,WAAW;gBACd,OAAO;oBACL,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACzC,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;iBACzB,CAAA;QACL,CAAC;IACH,CAAC;
|
|
1
|
+
{"version":3,"file":"Picture.js","sourceRoot":"","sources":["../../../src/components/Topper/Picture.tsx"],"names":[],"mappings":"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"}
|
|
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
const react_1 = __importStar(require("react"));
|
|
30
30
|
const Wrapper_1 = __importDefault(require("./Wrapper"));
|
|
31
|
+
const HeaderSlot_1 = __importDefault(require("./HeaderSlot"));
|
|
31
32
|
const Tags_1 = __importDefault(require("./Tags"));
|
|
32
33
|
const Headline_1 = __importDefault(require("./Headline"));
|
|
33
34
|
const Intro_1 = __importDefault(require("./Intro"));
|
|
@@ -38,25 +39,16 @@ const LiveBlogIndicator_1 = __importDefault(require("./LiveBlogIndicator"));
|
|
|
38
39
|
const MainImage_1 = __importDefault(require("../MainImage"));
|
|
39
40
|
const Flourish_1 = __importDefault(require("../content-tree/Flourish"));
|
|
40
41
|
const classnames_1 = __importDefault(require("classnames"));
|
|
41
|
-
const PartnerContentHeader_1 = __importDefault(require("../PartnerContentHeader"));
|
|
42
|
-
const DISCLAIMER_MESSAGES = {
|
|
43
|
-
'co-created-content': (sponsorName) => `This content was paid for by ${sponsorName} and produced in partnership with the Financial Times Commercial department`,
|
|
44
|
-
'client-supplied-content': (sponsorName) => `This content was paid for and produced by ${sponsorName}`,
|
|
45
|
-
'ft-studios-risky': (sponsorName) => `This advertisement has been produced by the Commercial department of the Financial Times on behalf of ${sponsorName}`,
|
|
46
|
-
auditor: (sponsorName) => `This content was paid for and produced by ${sponsorName} with the Financial Times Commercial department`,
|
|
47
|
-
};
|
|
48
42
|
const Topper = ({ content, slot, followButtonSlot, showPremiumLabel = false, readNextSlot, }) => {
|
|
49
43
|
const { topper } = content;
|
|
50
44
|
if (!topper) {
|
|
51
45
|
return null;
|
|
52
46
|
}
|
|
53
|
-
const isArticle = content.__typename === 'Article';
|
|
54
47
|
const isPackage = content.__typename === 'ContentPackage';
|
|
55
48
|
const isLiveBlog = content.__typename === 'LiveBlogPackage';
|
|
56
49
|
const isBasic = topper.__typename === 'BasicTopper';
|
|
57
50
|
const isOpinion = topper.__typename === 'OpinionTopper';
|
|
58
51
|
const isFlourish = topper.__typename === 'TopperWithFlourish' && !!topper.leadFlourish;
|
|
59
|
-
const isPartnerContent = topper.__typename === 'PartnerContentTopper';
|
|
60
52
|
const mainImageTopper = isBasic || isOpinion || topper.__typename === 'BrandedTopper';
|
|
61
53
|
const hasLayout = ('layoutConfiguration' in topper && topper.layoutConfiguration) ||
|
|
62
54
|
('layout' in topper && topper.layout);
|
|
@@ -68,8 +60,6 @@ const Topper = ({ content, slot, followButtonSlot, showPremiumLabel = false, rea
|
|
|
68
60
|
const hasColumnists = 'columnists' in topper &&
|
|
69
61
|
!!topper.columnists &&
|
|
70
62
|
topper.columnists.length > 0;
|
|
71
|
-
const sponsorName = 'clientName' in content && content.clientName;
|
|
72
|
-
const disclaimerType = isArticle ? content.disclaimerType : undefined;
|
|
73
63
|
const modifiers = [];
|
|
74
64
|
isPackage && modifiers.push('package');
|
|
75
65
|
isPackage && hasDesign && modifiers.push(`package-${topper.design}`);
|
|
@@ -102,11 +92,8 @@ const Topper = ({ content, slot, followButtonSlot, showPremiumLabel = false, rea
|
|
|
102
92
|
}
|
|
103
93
|
return defaultPublishDate;
|
|
104
94
|
};
|
|
105
|
-
const disclaimer = disclaimerType
|
|
106
|
-
? DISCLAIMER_MESSAGES[disclaimerType](sponsorName || 'the sponsor')
|
|
107
|
-
: `This content was paid for by ${sponsorName || 'the sponsor'} and produced in partnership with the Financial Times Commercial department`;
|
|
108
95
|
return (react_1.default.createElement(react_1.Fragment, null,
|
|
109
|
-
|
|
96
|
+
topper.headerSlot && react_1.default.createElement(HeaderSlot_1.default, { content: content }),
|
|
110
97
|
react_1.default.createElement("div", { className: (0, classnames_1.default)({
|
|
111
98
|
'article-topper': true,
|
|
112
99
|
'pinned-post__topper--no-image': isLiveBlog,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,wDAA+B;AAC/B,kDAAyB;AACzB,0DAAiC;AACjC,oDAA2B;AAC3B,wDAA+B;AAC/B,2DAAkC;AAClC,8DAAqC;AACrC,4EAAmD;AACnD,6DAAoC;AAEpC,wEAA+C;AAC/C,4DAAmC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/cp-content-pipeline-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "12.0.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"@babel/preset-react": "^7.22.5",
|
|
18
18
|
"@dotcom-tool-kit/npm": "^5.0.1",
|
|
19
19
|
"@financial-times/content-tree": "0.6.0",
|
|
20
|
-
"@financial-times/cp-content-pipeline-client": "^
|
|
21
|
-
"@financial-times/cp-content-pipeline-schema": "^
|
|
20
|
+
"@financial-times/cp-content-pipeline-client": "^6.0.0",
|
|
21
|
+
"@financial-times/cp-content-pipeline-schema": "^5.0.0",
|
|
22
22
|
"@financial-times/cp-content-pipeline-styles": "^4.8.2",
|
|
23
23
|
"@financial-times/n-scrollytelling-image": "^1.1.0",
|
|
24
24
|
"@financial-times/o-grid": "^6.1.8",
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React, { ComponentProps } from 'react'
|
|
2
|
+
import { render, screen } from '@testing-library/react'
|
|
3
|
+
import PartnerContentHeader from '.'
|
|
4
|
+
|
|
5
|
+
jest.mock('@financial-times/o3-tooltip/cjs', () => ({
|
|
6
|
+
TooltipToggle: ({
|
|
7
|
+
content,
|
|
8
|
+
infoLabel,
|
|
9
|
+
}: {
|
|
10
|
+
content: string
|
|
11
|
+
infoLabel: string
|
|
12
|
+
}) => (
|
|
13
|
+
<button data-testid="tooltip-toggle" aria-label={infoLabel}>
|
|
14
|
+
{content}
|
|
15
|
+
</button>
|
|
16
|
+
),
|
|
17
|
+
}))
|
|
18
|
+
|
|
19
|
+
describe('PartnerContentHeader', () => {
|
|
20
|
+
const name = 'Acme Corp'
|
|
21
|
+
const cases: Array<
|
|
22
|
+
[
|
|
23
|
+
string,
|
|
24
|
+
ComponentProps<typeof PartnerContentHeader>['disclaimerType'],
|
|
25
|
+
string
|
|
26
|
+
]
|
|
27
|
+
> = [
|
|
28
|
+
[
|
|
29
|
+
'fallback',
|
|
30
|
+
undefined,
|
|
31
|
+
'This content was paid for by Acme Corp and produced in partnership with the Financial Times Commercial department',
|
|
32
|
+
],
|
|
33
|
+
[
|
|
34
|
+
'co-created-content',
|
|
35
|
+
'co-created-content',
|
|
36
|
+
'This content was paid for by Acme Corp and produced in partnership with the Financial Times Commercial department',
|
|
37
|
+
],
|
|
38
|
+
[
|
|
39
|
+
'client-supplied-content',
|
|
40
|
+
'client-supplied-content',
|
|
41
|
+
'This content was paid for and produced by Acme Corp',
|
|
42
|
+
],
|
|
43
|
+
[
|
|
44
|
+
'ft-studios-risky',
|
|
45
|
+
'ft-studios-risky',
|
|
46
|
+
'This advertisement has been produced by the Commercial department of the Financial Times on behalf of Acme Corp',
|
|
47
|
+
],
|
|
48
|
+
[
|
|
49
|
+
'auditor',
|
|
50
|
+
'auditor',
|
|
51
|
+
'This content was paid for and produced by Acme Corp with the Financial Times Commercial department',
|
|
52
|
+
],
|
|
53
|
+
]
|
|
54
|
+
|
|
55
|
+
it.each(cases)(
|
|
56
|
+
'renders the %s disclaimer string',
|
|
57
|
+
(_, disclaimerType, expected) => {
|
|
58
|
+
const { container } = render(
|
|
59
|
+
<PartnerContentHeader name={name} disclaimerType={disclaimerType} />
|
|
60
|
+
)
|
|
61
|
+
|
|
62
|
+
const clientName = container.querySelector(
|
|
63
|
+
'.partner-content-header__client'
|
|
64
|
+
)
|
|
65
|
+
const tooltipToggle = screen.getByTestId('tooltip-toggle')
|
|
66
|
+
|
|
67
|
+
expect(clientName?.textContent).toBe(name)
|
|
68
|
+
expect(tooltipToggle.textContent).toBe(expected)
|
|
69
|
+
}
|
|
70
|
+
)
|
|
71
|
+
})
|
|
@@ -1,12 +1,29 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { TooltipToggle } from '@financial-times/o3-tooltip/cjs'
|
|
3
|
+
import type { Article } from '@financial-times/cp-content-pipeline-client'
|
|
4
|
+
|
|
5
|
+
const DISCLAIMER_MESSAGES: Record<
|
|
6
|
+
NonNullable<Article['disclaimerType'] | 'fallback'>,
|
|
7
|
+
(name: string) => string
|
|
8
|
+
> = {
|
|
9
|
+
'co-created-content': (name) =>
|
|
10
|
+
`This content was paid for by ${name} and produced in partnership with the Financial Times Commercial department`,
|
|
11
|
+
'client-supplied-content': (name) =>
|
|
12
|
+
`This content was paid for and produced by ${name}`,
|
|
13
|
+
'ft-studios-risky': (name) =>
|
|
14
|
+
`This advertisement has been produced by the Commercial department of the Financial Times on behalf of ${name}`,
|
|
15
|
+
auditor: (name) =>
|
|
16
|
+
`This content was paid for and produced by ${name} with the Financial Times Commercial department`,
|
|
17
|
+
fallback: (name) =>
|
|
18
|
+
`This content was paid for by ${name} and produced in partnership with the Financial Times Commercial department`,
|
|
19
|
+
}
|
|
3
20
|
|
|
4
21
|
const PartnerContentHeader = ({
|
|
5
|
-
name = '
|
|
6
|
-
|
|
22
|
+
name = 'the sponsor',
|
|
23
|
+
disclaimerType,
|
|
7
24
|
}: {
|
|
8
25
|
name: string
|
|
9
|
-
|
|
26
|
+
disclaimerType?: Article['disclaimerType']
|
|
10
27
|
}) => {
|
|
11
28
|
return (
|
|
12
29
|
<div className="partner-content-header" data-o3-brand="core">
|
|
@@ -16,7 +33,7 @@ const PartnerContentHeader = ({
|
|
|
16
33
|
<p>Partner Content</p>
|
|
17
34
|
<TooltipToggle
|
|
18
35
|
placement="bottom"
|
|
19
|
-
content={
|
|
36
|
+
content={DISCLAIMER_MESSAGES[disclaimerType ?? 'fallback'](name)}
|
|
20
37
|
infoLabel="More information on Partner Content"
|
|
21
38
|
/>
|
|
22
39
|
</div>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { ComponentProps, ComponentType } from 'react'
|
|
2
|
+
import PartnerContentHeader from '../PartnerContentHeader'
|
|
3
|
+
import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
|
|
4
|
+
|
|
5
|
+
type Content = ArticleQuery['content']
|
|
6
|
+
type HeaderSlotProps = {
|
|
7
|
+
content: Content
|
|
8
|
+
}
|
|
9
|
+
type HeaderConfig<TProps> = {
|
|
10
|
+
Component: ComponentType<TProps>
|
|
11
|
+
getProps: (content: Content) => TProps
|
|
12
|
+
}
|
|
13
|
+
type HeaderSlotType = keyof typeof headerConfigs
|
|
14
|
+
|
|
15
|
+
const isHeaderSlotType = (value: string): value is HeaderSlotType =>
|
|
16
|
+
value in headerConfigs
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* add new configs for new components to this map.
|
|
20
|
+
* They take the format:
|
|
21
|
+
* 'headerSlotTypeFromAPIData': {
|
|
22
|
+
* Component: YourNewImportedComponent,
|
|
23
|
+
* getProps: (content) => ({props: props})
|
|
24
|
+
* } satisfies HeaderConfig<ComponentProps<typeof YourNewImportedComponent>>,
|
|
25
|
+
* Also remember to import the component at the top of this file
|
|
26
|
+
*/
|
|
27
|
+
const headerConfigs = {
|
|
28
|
+
'partner-content': {
|
|
29
|
+
Component: PartnerContentHeader,
|
|
30
|
+
getProps: (content: Content) => ({
|
|
31
|
+
name: ('clientName' in content && content.clientName) || 'Sponsor',
|
|
32
|
+
disclaimerType:
|
|
33
|
+
content.__typename === 'Article' ? content.disclaimerType : undefined,
|
|
34
|
+
}),
|
|
35
|
+
} satisfies HeaderConfig<ComponentProps<typeof PartnerContentHeader>>,
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/*
|
|
39
|
+
* Factory component to render specialised components to the slot above the main topper area. Full instructions in packages/schema/src/model/strategies/topper/README.md
|
|
40
|
+
*/
|
|
41
|
+
const HeaderSlot: React.FC<HeaderSlotProps> = ({ content }) => {
|
|
42
|
+
const headerSlotType = content?.topper?.headerSlot?.type
|
|
43
|
+
if (!headerSlotType || !isHeaderSlotType(headerSlotType)) return null
|
|
44
|
+
|
|
45
|
+
const { Component, getProps } = headerConfigs[headerSlotType]
|
|
46
|
+
|
|
47
|
+
return <Component {...getProps(content)} />
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export default HeaderSlot
|
|
@@ -68,22 +68,6 @@ const topperGetBreakpointsMap: Partial<
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
|
-
|
|
72
|
-
PartnerContentTopper(image) {
|
|
73
|
-
switch (image.format) {
|
|
74
|
-
case 'square':
|
|
75
|
-
return { maxWidth: 490 }
|
|
76
|
-
case 'standard':
|
|
77
|
-
return { minWidth: 491, maxWidth: 1219 }
|
|
78
|
-
case 'wide':
|
|
79
|
-
return {
|
|
80
|
-
normal: { minWidth: 1220, maxWidth: 1439 },
|
|
81
|
-
wide: { minWidth: 1440, maxWidth: 1919 },
|
|
82
|
-
wideL: { minWidth: 1920, maxWidth: 3839 },
|
|
83
|
-
wideXL: { minWidth: 3840 },
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
71
|
}
|
|
88
72
|
|
|
89
73
|
export type PictureProps = {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { Fragment, ReactElement } from 'react'
|
|
2
2
|
import Wrapper from './Wrapper'
|
|
3
|
+
import HeaderSlot from './HeaderSlot'
|
|
3
4
|
import Tags from './Tags'
|
|
4
5
|
import Headline from './Headline'
|
|
5
6
|
import Intro from './Intro'
|
|
@@ -11,11 +12,7 @@ import MainImage from '../MainImage'
|
|
|
11
12
|
import { FollowButtonSlot } from './FollowButtonSlot'
|
|
12
13
|
import Flourish from '../content-tree/Flourish'
|
|
13
14
|
import classnames from 'classnames'
|
|
14
|
-
import type {
|
|
15
|
-
ArticleQuery,
|
|
16
|
-
Article,
|
|
17
|
-
} from '@financial-times/cp-content-pipeline-client'
|
|
18
|
-
import PartnerContentHeader from '../PartnerContentHeader'
|
|
15
|
+
import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
|
|
19
16
|
|
|
20
17
|
export type TopperProps = {
|
|
21
18
|
content: ArticleQuery['content']
|
|
@@ -25,20 +22,6 @@ export type TopperProps = {
|
|
|
25
22
|
readNextSlot?: () => ReactElement
|
|
26
23
|
}
|
|
27
24
|
|
|
28
|
-
const DISCLAIMER_MESSAGES: Record<
|
|
29
|
-
NonNullable<Article['disclaimerType']>,
|
|
30
|
-
(sponsorName: string) => string
|
|
31
|
-
> = {
|
|
32
|
-
'co-created-content': (sponsorName) =>
|
|
33
|
-
`This content was paid for by ${sponsorName} and produced in partnership with the Financial Times Commercial department`,
|
|
34
|
-
'client-supplied-content': (sponsorName) =>
|
|
35
|
-
`This content was paid for and produced by ${sponsorName}`,
|
|
36
|
-
'ft-studios-risky': (sponsorName) =>
|
|
37
|
-
`This advertisement has been produced by the Commercial department of the Financial Times on behalf of ${sponsorName}`,
|
|
38
|
-
auditor: (sponsorName) =>
|
|
39
|
-
`This content was paid for and produced by ${sponsorName} with the Financial Times Commercial department`,
|
|
40
|
-
}
|
|
41
|
-
|
|
42
25
|
const Topper: React.FC<TopperProps> = ({
|
|
43
26
|
content,
|
|
44
27
|
slot,
|
|
@@ -52,14 +35,12 @@ const Topper: React.FC<TopperProps> = ({
|
|
|
52
35
|
return null
|
|
53
36
|
}
|
|
54
37
|
|
|
55
|
-
const isArticle = content.__typename === 'Article'
|
|
56
38
|
const isPackage = content.__typename === 'ContentPackage'
|
|
57
39
|
const isLiveBlog = content.__typename === 'LiveBlogPackage'
|
|
58
40
|
const isBasic = topper.__typename === 'BasicTopper'
|
|
59
41
|
const isOpinion = topper.__typename === 'OpinionTopper'
|
|
60
42
|
const isFlourish =
|
|
61
43
|
topper.__typename === 'TopperWithFlourish' && !!topper.leadFlourish
|
|
62
|
-
const isPartnerContent = topper.__typename === 'PartnerContentTopper'
|
|
63
44
|
const mainImageTopper =
|
|
64
45
|
isBasic || isOpinion || topper.__typename === 'BrandedTopper'
|
|
65
46
|
const hasLayout =
|
|
@@ -74,8 +55,6 @@ const Topper: React.FC<TopperProps> = ({
|
|
|
74
55
|
'columnists' in topper &&
|
|
75
56
|
!!topper.columnists &&
|
|
76
57
|
topper.columnists.length > 0
|
|
77
|
-
const sponsorName = 'clientName' in content && content.clientName
|
|
78
|
-
const disclaimerType = isArticle ? content.disclaimerType : undefined
|
|
79
58
|
|
|
80
59
|
const modifiers: string[] = []
|
|
81
60
|
|
|
@@ -119,21 +98,9 @@ const Topper: React.FC<TopperProps> = ({
|
|
|
119
98
|
return defaultPublishDate
|
|
120
99
|
}
|
|
121
100
|
|
|
122
|
-
const disclaimer = disclaimerType
|
|
123
|
-
? DISCLAIMER_MESSAGES[disclaimerType](sponsorName || 'the sponsor')
|
|
124
|
-
: `This content was paid for by ${
|
|
125
|
-
sponsorName || 'the sponsor'
|
|
126
|
-
} and produced in partnership with the Financial Times Commercial department`
|
|
127
|
-
|
|
128
101
|
return (
|
|
129
102
|
<Fragment>
|
|
130
|
-
{
|
|
131
|
-
{isPartnerContent && (
|
|
132
|
-
<PartnerContentHeader
|
|
133
|
-
name={sponsorName || 'Sponsor'}
|
|
134
|
-
disclaimer={disclaimer || ''}
|
|
135
|
-
/>
|
|
136
|
-
)}
|
|
103
|
+
{topper.headerSlot && <HeaderSlot content={content} />}
|
|
137
104
|
<div
|
|
138
105
|
className={classnames({
|
|
139
106
|
'article-topper': true,
|