@financial-times/cp-content-pipeline-ui 6.7.0 → 6.7.2
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 +14 -0
- package/lib/components/Byline/index.js +1 -1
- package/lib/components/Byline/index.js.map +1 -1
- package/lib/components/Clip/components/Container.js +2 -2
- package/lib/components/Clip/components/Container.js.map +1 -1
- package/lib/components/Clip/template/index.js +1 -0
- package/lib/components/Clip/template/index.js.map +1 -1
- package/lib/components/ImageSet/index.js +1 -1
- package/lib/components/ImageSet/index.js.map +1 -1
- package/lib/components/LiveBlogPost/index.js +21 -9
- package/lib/components/LiveBlogPost/index.js.map +1 -1
- package/lib/components/LiveBlogWrapper/index.js +1 -1
- package/lib/components/LiveBlogWrapper/index.js.map +1 -1
- package/lib/components/Recommended/index.js +1 -1
- package/lib/components/Recommended/index.js.map +1 -1
- package/lib/components/RichText/index.d.ts +1 -1
- package/lib/components/Table/index.js +1 -1
- package/lib/components/Table/index.js.map +1 -1
- package/lib/components/Video/index.js +1 -1
- package/lib/components/Video/index.js.map +1 -1
- package/lib/components/YoutubeVideo/index.js +1 -1
- package/lib/components/YoutubeVideo/index.js.map +1 -1
- package/lib/stories/Clip.stories.d.ts +1 -2
- package/lib/stories/Clip.stories.js +5 -5
- package/lib/stories/Clip.stories.js.map +1 -1
- package/package.json +5 -2
- package/src/components/Byline/index.tsx +8 -4
- package/src/components/Clip/components/Container.tsx +3 -10
- package/src/components/Clip/template/index.ts +1 -0
- package/src/components/Clip/test/__snapshots__/snapshot.spec.tsx.snap +8 -8
- package/src/components/ImageSet/index.tsx +0 -1
- package/src/components/LiveBlogPost/index.tsx +42 -29
- package/src/components/LiveBlogWrapper/index.tsx +0 -1
- package/src/components/Recommended/index.tsx +0 -1
- package/src/components/Table/index.tsx +0 -1
- package/src/components/Video/index.tsx +1 -4
- package/src/components/YoutubeVideo/index.tsx +1 -4
- package/src/stories/Clip.stories.tsx +2 -3
- package/tsconfig.tsbuildinfo +1 -1
- package/lib/components/Expander/client/index.d.ts +0 -49
- package/lib/components/Expander/client/index.js +0 -124
- package/lib/components/Expander/client/index.js.map +0 -1
- package/lib/components/Expander/index.d.ts +0 -15
- package/lib/components/Expander/index.js +0 -27
- package/lib/components/Expander/index.js.map +0 -1
- package/lib/components/Expander/test/client/index.spec.d.ts +0 -1
- package/lib/components/Expander/test/client/index.spec.js +0 -103
- package/lib/components/Expander/test/client/index.spec.js.map +0 -1
- package/lib/components/Expander/test/index.spec.d.ts +0 -1
- package/lib/components/Expander/test/index.spec.js +0 -57
- package/lib/components/Expander/test/index.spec.js.map +0 -1
- package/lib/components/Expander/test/snapshot.spec.d.ts +0 -1
- package/lib/components/Expander/test/snapshot.spec.js +0 -63
- package/lib/components/Expander/test/snapshot.spec.js.map +0 -1
- package/lib/components/LiveBlogPost/client/index.d.ts +0 -5
- package/lib/components/LiveBlogPost/client/index.js +0 -12
- package/lib/components/LiveBlogPost/client/index.js.map +0 -1
- package/lib/stories/Expander.stories.d.ts +0 -54
- package/lib/stories/Expander.stories.js +0 -142
- package/lib/stories/Expander.stories.js.map +0 -1
- package/src/components/Expander/client/index.ts +0 -197
- package/src/components/Expander/client/main.scss +0 -162
- package/src/components/Expander/index.tsx +0 -74
- package/src/components/Expander/test/__snapshots__/snapshot.spec.tsx.snap +0 -225
- package/src/components/Expander/test/client/index.spec.tsx +0 -129
- package/src/components/Expander/test/index.spec.tsx +0 -77
- package/src/components/Expander/test/snapshot.spec.tsx +0 -73
- package/src/components/LiveBlogPost/client/index.ts +0 -9
- package/src/stories/Expander.stories.scss +0 -3
- package/src/stories/Expander.stories.tsx +0 -159
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
export declare class ExpanderClient {
|
|
2
|
-
/**
|
|
3
|
-
* The container element for all the elements that should be showned or be hidden.
|
|
4
|
-
*/
|
|
5
|
-
private container;
|
|
6
|
-
/**
|
|
7
|
-
* An optional element to which the expander will dispatch the events to.
|
|
8
|
-
* If not provided, events will not be dispatched.
|
|
9
|
-
*/
|
|
10
|
-
private dispatchBoundary?;
|
|
11
|
-
/**
|
|
12
|
-
* Element that will be showned at the end of the content when the expander is expanded.
|
|
13
|
-
* We use this to track when the entire post is read.
|
|
14
|
-
*/
|
|
15
|
-
private endContent;
|
|
16
|
-
/**
|
|
17
|
-
* Track the entire read of a truncated post
|
|
18
|
-
*/
|
|
19
|
-
private trackingEntireRead;
|
|
20
|
-
/**
|
|
21
|
-
* The button that will expand the content
|
|
22
|
-
*/
|
|
23
|
-
private expanderButton;
|
|
24
|
-
/**
|
|
25
|
-
* The button that will collapse the content
|
|
26
|
-
*/
|
|
27
|
-
private collapserButton;
|
|
28
|
-
/**
|
|
29
|
-
* The tracking data that will be sent when the entire post is read
|
|
30
|
-
*/
|
|
31
|
-
private trackingData;
|
|
32
|
-
/**
|
|
33
|
-
*
|
|
34
|
-
* @param el
|
|
35
|
-
* @param dispatchBoundary
|
|
36
|
-
*/
|
|
37
|
-
constructor(el: Element, dispatchBoundary?: Element | Document | null, trackingData?: Record<string, string>);
|
|
38
|
-
expand(): void;
|
|
39
|
-
collapse(): void;
|
|
40
|
-
private handleExpand;
|
|
41
|
-
private handleCollapse;
|
|
42
|
-
destroy(): void;
|
|
43
|
-
static init(data?: {
|
|
44
|
-
rootElement?: HTMLElement | null;
|
|
45
|
-
dispatchBoundary?: Element | Document | null;
|
|
46
|
-
trackingData?: Record<string, string>;
|
|
47
|
-
}): ExpanderClient[];
|
|
48
|
-
}
|
|
49
|
-
export default ExpanderClient;
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ExpanderClient = void 0;
|
|
4
|
-
/**
|
|
5
|
-
* trackEntireRead
|
|
6
|
-
* @description Track the entire read of a truncated post
|
|
7
|
-
* @param {HTMLElement} post - The post element
|
|
8
|
-
*/
|
|
9
|
-
class TrackEntireRead {
|
|
10
|
-
constructor(readElement, data) {
|
|
11
|
-
this.observer = null;
|
|
12
|
-
this.handleEntireRead = () => {
|
|
13
|
-
const trackingData = {
|
|
14
|
-
action: 'entire_read',
|
|
15
|
-
...this.data,
|
|
16
|
-
};
|
|
17
|
-
const event = new CustomEvent('oTracking.event', {
|
|
18
|
-
detail: trackingData,
|
|
19
|
-
bubbles: true,
|
|
20
|
-
});
|
|
21
|
-
document.body.dispatchEvent(event);
|
|
22
|
-
};
|
|
23
|
-
this.readElement = readElement;
|
|
24
|
-
this.data = data;
|
|
25
|
-
this.init();
|
|
26
|
-
}
|
|
27
|
-
init() {
|
|
28
|
-
//Intersection observer that observes readElement and when in view tracks the entire read
|
|
29
|
-
this.observer = new IntersectionObserver((entries) => {
|
|
30
|
-
entries.forEach((entry) => {
|
|
31
|
-
if (entry.isIntersecting) {
|
|
32
|
-
this.handleEntireRead();
|
|
33
|
-
this.observer?.disconnect();
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
});
|
|
37
|
-
this.observer.observe(this.readElement);
|
|
38
|
-
}
|
|
39
|
-
destroy() {
|
|
40
|
-
this.observer?.disconnect();
|
|
41
|
-
this.observer = null;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
class ExpanderClient {
|
|
45
|
-
/**
|
|
46
|
-
*
|
|
47
|
-
* @param el
|
|
48
|
-
* @param dispatchBoundary
|
|
49
|
-
*/
|
|
50
|
-
constructor(el, dispatchBoundary, trackingData) {
|
|
51
|
-
this.handleExpand = (e) => {
|
|
52
|
-
e.preventDefault();
|
|
53
|
-
this.expand();
|
|
54
|
-
this.expanderButton?.setAttribute('aria-expanded', 'true');
|
|
55
|
-
this.expanderButton?.setAttribute('aria-hidden', 'true');
|
|
56
|
-
this.collapserButton?.setAttribute('aria-expanded', 'true');
|
|
57
|
-
this.collapserButton?.setAttribute('aria-hidden', 'false');
|
|
58
|
-
};
|
|
59
|
-
this.handleCollapse = (e) => {
|
|
60
|
-
e.preventDefault();
|
|
61
|
-
this.collapse();
|
|
62
|
-
this.expanderButton?.setAttribute('aria-expanded', 'false');
|
|
63
|
-
this.expanderButton?.setAttribute('aria-hidden', 'false');
|
|
64
|
-
this.collapserButton?.setAttribute('aria-expanded', 'false');
|
|
65
|
-
this.collapserButton?.setAttribute('aria-hidden', 'true');
|
|
66
|
-
};
|
|
67
|
-
this.container = el;
|
|
68
|
-
this.trackingData = trackingData || {};
|
|
69
|
-
this.expanderButton = el.querySelector('.cp-expander__expand [data-action="expand"]');
|
|
70
|
-
this.collapserButton = el.querySelector('.cp-expander__collapse [data-action="collapse"]');
|
|
71
|
-
this.endContent = el.querySelector('.cp-expander__collapse');
|
|
72
|
-
this.expanderButton?.addEventListener('click', this.handleExpand);
|
|
73
|
-
this.collapserButton?.addEventListener('click', this.handleCollapse);
|
|
74
|
-
this.container.classList.replace('cp-expander--not-initialised', 'cp-expander--initialised');
|
|
75
|
-
this.dispatchBoundary = dispatchBoundary || this.container;
|
|
76
|
-
(this.trackingData['post_id'] =
|
|
77
|
-
this.container
|
|
78
|
-
.querySelector('[data-trackable-context-truncated-id]')
|
|
79
|
-
?.getAttribute('data-trackable-context-truncated-id') || ''),
|
|
80
|
-
(this.trackingEntireRead = new TrackEntireRead(this.endContent, this.trackingData));
|
|
81
|
-
}
|
|
82
|
-
expand() {
|
|
83
|
-
this.container?.setAttribute('data-state', 'expanded');
|
|
84
|
-
this.dispatchBoundary?.dispatchEvent(new CustomEvent('expander:expanded', {
|
|
85
|
-
bubbles: true,
|
|
86
|
-
detail: {
|
|
87
|
-
component: this.container,
|
|
88
|
-
},
|
|
89
|
-
}));
|
|
90
|
-
}
|
|
91
|
-
collapse() {
|
|
92
|
-
this.container?.setAttribute('data-state', 'collapsed');
|
|
93
|
-
this.container?.scrollIntoView();
|
|
94
|
-
this.dispatchBoundary?.dispatchEvent(new CustomEvent('expander:collapsed', {
|
|
95
|
-
bubbles: true,
|
|
96
|
-
detail: {
|
|
97
|
-
component: this.container,
|
|
98
|
-
},
|
|
99
|
-
}));
|
|
100
|
-
}
|
|
101
|
-
destroy() {
|
|
102
|
-
this.container?.setAttribute('data-state', 'collapsed');
|
|
103
|
-
this.container
|
|
104
|
-
?.querySelector('.cp-expander__expand')
|
|
105
|
-
?.removeEventListener('click', this.expand);
|
|
106
|
-
this.container
|
|
107
|
-
?.querySelector('.cp-expander__collapse')
|
|
108
|
-
?.removeEventListener('click', this.collapse);
|
|
109
|
-
this.container?.classList.remove('cp-expander--initialised');
|
|
110
|
-
this.trackingEntireRead.destroy();
|
|
111
|
-
}
|
|
112
|
-
static init(data) {
|
|
113
|
-
const { rootElement, dispatchBoundary, trackingData } = data || {};
|
|
114
|
-
const root = rootElement || document.body;
|
|
115
|
-
return (Array.from(root.querySelectorAll(':not(.cp-expander--initialised)[data-component="expander"]'))?.map((el) => {
|
|
116
|
-
if (!el.classList.contains('expander--initialised')) {
|
|
117
|
-
return new ExpanderClient(el, dispatchBoundary, trackingData);
|
|
118
|
-
}
|
|
119
|
-
}) || []);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
exports.ExpanderClient = ExpanderClient;
|
|
123
|
-
exports.default = ExpanderClient;
|
|
124
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Expander/client/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface ExpanderProps extends React.PropsWithChildren {
|
|
3
|
-
/** The initial state of the expander */
|
|
4
|
-
state?: 'expanded' | 'collapsed';
|
|
5
|
-
/** The label for the Expand CTA */
|
|
6
|
-
expandLabel?: string;
|
|
7
|
-
/** The label for the collapse CTA */
|
|
8
|
-
collapseLabel?: string;
|
|
9
|
-
/** Show the expander only on mobile resolutions */
|
|
10
|
-
onlyMobile?: boolean;
|
|
11
|
-
/** Id of the component */
|
|
12
|
-
id: string;
|
|
13
|
-
}
|
|
14
|
-
export declare const ExpanderServer: React.FC<ExpanderProps>;
|
|
15
|
-
export default ExpanderServer;
|
|
@@ -1,27 +0,0 @@
|
|
|
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
|
-
exports.ExpanderServer = void 0;
|
|
7
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
// React functional component with children
|
|
10
|
-
const ExpanderServer = ({ state = 'collapsed', // default value for "state
|
|
11
|
-
children, id, expandLabel = 'Expand', collapseLabel = 'Collapse', onlyMobile = false, }) => {
|
|
12
|
-
return (react_1.default.createElement("div", { className: (0, classnames_1.default)({
|
|
13
|
-
'cp-expander': true,
|
|
14
|
-
'cp-expander--mobile-only': onlyMobile,
|
|
15
|
-
'cp-expander--all-resolutions': !onlyMobile,
|
|
16
|
-
'cp-expander--not-initialised': true,
|
|
17
|
-
}), "data-component": "expander", "data-state": state, id: `${id}__container` },
|
|
18
|
-
react_1.default.createElement("div", { id: id, className: "cp-expander-content", "aria-describedby": id },
|
|
19
|
-
react_1.default.createElement("div", { className: "cp-expander__expand" },
|
|
20
|
-
react_1.default.createElement("a", { "data-trackable": "truncated-post", "data-trackable-context-truncated-post": "expand", "data-trackable-context-truncated-id": id, className: "cp-expander__link", href: `#${id}`, "aria-expanded": state === 'expanded' ? true : false, "aria-controls": id, "aria-hidden": state === 'expanded' ? true : false, "data-action": "expand" }, expandLabel)),
|
|
21
|
-
children,
|
|
22
|
-
react_1.default.createElement("div", { className: "cp-expander__collapse" },
|
|
23
|
-
react_1.default.createElement("a", { "data-trackable": "truncated-post", "data-trackable-context-truncated-post": "collapse", "data-trackable-context-truncated-id": id, href: `#${id}__container`, className: "cp-expander__link", "aria-expanded": state === 'expanded' ? true : false, "aria-controls": id, "aria-hidden": state === 'expanded' ? false : true, "data-action": "collapse" }, collapseLabel)))));
|
|
24
|
-
};
|
|
25
|
-
exports.ExpanderServer = ExpanderServer;
|
|
26
|
-
exports.default = exports.ExpanderServer;
|
|
27
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Expander/index.tsx"],"names":[],"mappings":";;;;;;AAAA,4DAAmC;AACnC,kDAAyB;AAczB,2CAA2C;AACpC,MAAM,cAAc,GAA4B,CAAC,EACtD,KAAK,GAAG,WAAW,EAAE,2BAA2B;AAChD,QAAQ,EACR,EAAE,EACF,WAAW,GAAG,QAAQ,EACtB,aAAa,GAAG,UAAU,EAC1B,UAAU,GAAG,KAAK,GACnB,EAAE,EAAE;IACH,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,aAAa,EAAE,IAAI;YACnB,0BAA0B,EAAE,UAAU;YACtC,8BAA8B,EAAE,CAAC,UAAU;YAC3C,8BAA8B,EAAE,IAAI;SACrC,CAAC,oBACa,UAAU,gBACb,KAAK,EACjB,EAAE,EAAE,GAAG,EAAE,aAAa;QAEtB,uCAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,qBAAqB,sBAAmB,EAAE;YAC/D,uCAAK,SAAS,EAAC,qBAAqB;gBAClC,uDACiB,gBAAgB,2CACO,QAAQ,yCACT,EAAE,EACvC,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAE,IAAI,EAAE,EAAE,mBACC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,mBACnC,EAAE,iBACJ,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,iBACpC,QAAQ,IAEnB,WAAW,CACV,CACA;YACL,QAAQ;YACT,uCAAK,SAAS,EAAC,uBAAuB;gBACpC,uDACiB,gBAAgB,2CACO,UAAU,yCACX,EAAE,EACvC,IAAI,EAAE,IAAI,EAAE,aAAa,EACzB,SAAS,EAAC,mBAAmB,mBACd,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,mBACnC,EAAE,iBACJ,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,iBACpC,UAAU,IAErB,aAAa,CACZ,CACA,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAvDY,QAAA,cAAc,kBAuD1B;AAED,kBAAe,sBAAc,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,103 +0,0 @@
|
|
|
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
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
7
|
-
// @ts-nocheck
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const index_1 = __importDefault(require("../../index"));
|
|
10
|
-
const client_1 = require("../../client");
|
|
11
|
-
const react_2 = require("@testing-library/react");
|
|
12
|
-
//mock IntersectionObserver
|
|
13
|
-
class IntersectionObserver {
|
|
14
|
-
//mock constructor
|
|
15
|
-
constructor(callback) {
|
|
16
|
-
this.callback = callback;
|
|
17
|
-
}
|
|
18
|
-
observe() {
|
|
19
|
-
this.active = true;
|
|
20
|
-
}
|
|
21
|
-
disconnect() {
|
|
22
|
-
this.active = false;
|
|
23
|
-
}
|
|
24
|
-
intersects() {
|
|
25
|
-
if (this.active) {
|
|
26
|
-
this.callback([{ isIntersecting: true }]);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
//mock scrollIntoView
|
|
31
|
-
window.HTMLElement.prototype.scrollIntoView = jest.fn();
|
|
32
|
-
describe('Expander client test', () => {
|
|
33
|
-
beforeEach(() => {
|
|
34
|
-
window.IntersectionObserver = IntersectionObserver;
|
|
35
|
-
});
|
|
36
|
-
it('find expanders markup and initialises it', () => {
|
|
37
|
-
const props = {
|
|
38
|
-
id: 'test-id',
|
|
39
|
-
};
|
|
40
|
-
(0, react_2.render)(react_1.default.createElement(index_1.default, { ...props },
|
|
41
|
-
react_1.default.createElement("div", null, "Children 1")));
|
|
42
|
-
const expanders = client_1.ExpanderClient.init();
|
|
43
|
-
expect(expanders.length).toBe(1);
|
|
44
|
-
expect(document.querySelectorAll("[data-component='expander']").length).toBe(1);
|
|
45
|
-
expect(expanders[0].container.id).toBe('test-id__container');
|
|
46
|
-
expect(expanders[0].container.classList.contains('cp-expander--initialised')).toBe(true);
|
|
47
|
-
});
|
|
48
|
-
it('do not initialised twice expanders', () => {
|
|
49
|
-
const props = {
|
|
50
|
-
id: 'test-id',
|
|
51
|
-
};
|
|
52
|
-
(0, react_2.render)(react_1.default.createElement(index_1.default, { ...props },
|
|
53
|
-
react_1.default.createElement("div", null, "Children 1")));
|
|
54
|
-
client_1.ExpanderClient.init();
|
|
55
|
-
const expanders = client_1.ExpanderClient.init();
|
|
56
|
-
expect(expanders.length).toBe(0);
|
|
57
|
-
expect(document.querySelectorAll("[data-component='expander']").length).toBe(1);
|
|
58
|
-
});
|
|
59
|
-
it('expands and collapse', async () => {
|
|
60
|
-
const props = {
|
|
61
|
-
id: 'test-id',
|
|
62
|
-
};
|
|
63
|
-
(0, react_2.render)(react_1.default.createElement(index_1.default, { ...props },
|
|
64
|
-
react_1.default.createElement("div", null, "Children 1")));
|
|
65
|
-
const expanders = client_1.ExpanderClient.init();
|
|
66
|
-
const expanderButton = react_2.screen.getByText('Expand');
|
|
67
|
-
const collapserButton = react_2.screen.getByText('Collapse');
|
|
68
|
-
expect(expanderButton.getAttribute('aria-expanded')).toBe('false');
|
|
69
|
-
expect(expanderButton.getAttribute('aria-hidden')).toBe('false');
|
|
70
|
-
expect(collapserButton.getAttribute('aria-expanded')).toBe('false');
|
|
71
|
-
expect(collapserButton.getAttribute('aria-hidden')).toBe('true');
|
|
72
|
-
await expanderButton.click();
|
|
73
|
-
expect(expanderButton.getAttribute('aria-expanded')).toBe('true');
|
|
74
|
-
expect(expanders[0].container?.getAttribute('data-state')).toBe('expanded');
|
|
75
|
-
expect(expanderButton.getAttribute('aria-expanded')).toBe('true');
|
|
76
|
-
expect(expanderButton.getAttribute('aria-hidden')).toBe('true');
|
|
77
|
-
expect(collapserButton.getAttribute('aria-expanded')).toBe('true');
|
|
78
|
-
expect(collapserButton.getAttribute('aria-hidden')).toBe('false');
|
|
79
|
-
await collapserButton.click();
|
|
80
|
-
expect(expanders[0].container?.getAttribute('data-state')).toBe('collapsed');
|
|
81
|
-
expect(expanderButton.getAttribute('aria-expanded')).toBe('false');
|
|
82
|
-
expect(expanderButton.getAttribute('aria-hidden')).toBe('false');
|
|
83
|
-
expect(collapserButton.getAttribute('aria-expanded')).toBe('false');
|
|
84
|
-
expect(collapserButton.getAttribute('aria-hidden')).toBe('true');
|
|
85
|
-
});
|
|
86
|
-
it('track entire read only once', () => {
|
|
87
|
-
const props = {
|
|
88
|
-
id: 'test-id',
|
|
89
|
-
};
|
|
90
|
-
(0, react_2.render)(react_1.default.createElement(index_1.default, { ...props },
|
|
91
|
-
react_1.default.createElement("div", null, "Children 1")));
|
|
92
|
-
const expanders = client_1.ExpanderClient.init();
|
|
93
|
-
const spy = jest.spyOn(document.body, 'dispatchEvent');
|
|
94
|
-
spy.mockImplementation((event) => {
|
|
95
|
-
expect(event.detail.action).toBe('entire_read');
|
|
96
|
-
});
|
|
97
|
-
expanders[0].trackingEntireRead.observer.intersects();
|
|
98
|
-
expect(spy).toHaveBeenCalledTimes(1);
|
|
99
|
-
expanders[0].trackingEntireRead.observer.intersects();
|
|
100
|
-
expect(spy).toHaveBeenCalledTimes(1);
|
|
101
|
-
});
|
|
102
|
-
});
|
|
103
|
-
//# sourceMappingURL=index.spec.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/components/Expander/test/client/index.spec.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,57 +0,0 @@
|
|
|
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
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
7
|
-
// @ts-nocheck
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const index_1 = __importDefault(require("../index"));
|
|
10
|
-
const react_2 = require("@testing-library/react");
|
|
11
|
-
describe('Expander template', () => {
|
|
12
|
-
it('renders', () => {
|
|
13
|
-
const props = {
|
|
14
|
-
id: 'test-id',
|
|
15
|
-
};
|
|
16
|
-
const tree = (0, react_2.render)(react_1.default.createElement(index_1.default, { ...props },
|
|
17
|
-
react_1.default.createElement("div", null, "Children 1"),
|
|
18
|
-
react_1.default.createElement("div", null, "Children 2")));
|
|
19
|
-
expect(tree.container.querySelector('[data-component="expander"]')).toBeTruthy();
|
|
20
|
-
expect(tree.container.querySelector('[data-state="collapsed"]')).toBeTruthy();
|
|
21
|
-
expect(tree.container.querySelector('.cp-expander--not-initialised')).toBeTruthy();
|
|
22
|
-
expect(react_2.screen.getByText('Expand')).toBeTruthy();
|
|
23
|
-
expect(react_2.screen.getByText('Collapse')).toBeTruthy();
|
|
24
|
-
expect(react_2.screen.getByText('Children 1')).toBeTruthy();
|
|
25
|
-
expect(react_2.screen.getByText('Children 2')).toBeTruthy();
|
|
26
|
-
});
|
|
27
|
-
it('with different labels', () => {
|
|
28
|
-
const props = {
|
|
29
|
-
id: 'test-id',
|
|
30
|
-
collapseLabel: 'Close',
|
|
31
|
-
expandLabel: 'Open',
|
|
32
|
-
};
|
|
33
|
-
(0, react_2.render)(react_1.default.createElement(index_1.default, { ...props },
|
|
34
|
-
react_1.default.createElement("div", null, "Children")));
|
|
35
|
-
expect(react_2.screen.getByText('Open')).toBeTruthy();
|
|
36
|
-
expect(react_2.screen.getByText('Close')).toBeTruthy();
|
|
37
|
-
});
|
|
38
|
-
it('with different state', () => {
|
|
39
|
-
const props = {
|
|
40
|
-
id: 'test-id',
|
|
41
|
-
state: 'expanded',
|
|
42
|
-
};
|
|
43
|
-
const tree = (0, react_2.render)(react_1.default.createElement(index_1.default, { ...props },
|
|
44
|
-
react_1.default.createElement("div", null, "Children")));
|
|
45
|
-
expect(tree.container.querySelector('[data-state="expanded"]')).toBeTruthy();
|
|
46
|
-
});
|
|
47
|
-
it('add class for only mobile', () => {
|
|
48
|
-
const props = {
|
|
49
|
-
id: 'test-id',
|
|
50
|
-
onlyMobile: true,
|
|
51
|
-
};
|
|
52
|
-
const tree = (0, react_2.render)(react_1.default.createElement(index_1.default, { ...props },
|
|
53
|
-
react_1.default.createElement("div", null, "Children")));
|
|
54
|
-
expect(tree.container.querySelector('.cp-expander--mobile-only')).toBeTruthy();
|
|
55
|
-
});
|
|
56
|
-
});
|
|
57
|
-
//# sourceMappingURL=index.spec.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/Expander/test/index.spec.tsx"],"names":[],"mappings":";;;;;AAAA,6DAA6D;AAC7D,cAAc;AACd,kDAAyB;AAEzB,qDAAkD;AAClD,kDAAuD;AAEvD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE;QACjB,MAAM,KAAK,GAAkB;YAC3B,EAAE,EAAE,SAAS;SACd,CAAA;QACD,MAAM,IAAI,GAAG,IAAA,cAAM,EACjB,8BAAC,eAAQ,OAAK,KAAK;YACjB,wDAAqB;YACrB,wDAAqB,CACZ,CACZ,CAAA;QACD,MAAM,CACJ,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAC5D,CAAC,UAAU,EAAE,CAAA;QACd,MAAM,CACJ,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,0BAA0B,CAAC,CACzD,CAAC,UAAU,EAAE,CAAA;QACd,MAAM,CACJ,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAC9D,CAAC,UAAU,EAAE,CAAA;QACd,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QAC/C,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QACjD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QACnD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;IACrD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,KAAK,GAAkB;YAC3B,EAAE,EAAE,SAAS;YACb,aAAa,EAAE,OAAO;YACtB,WAAW,EAAE,MAAM;SACpB,CAAA;QACD,IAAA,cAAM,EACJ,8BAAC,eAAQ,OAAK,KAAK;YACjB,sDAAmB,CACV,CACZ,CAAA;QAED,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QAC7C,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;IAChD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,MAAM,KAAK,GAAkB;YAC3B,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,UAAU;SAClB,CAAA;QACD,MAAM,IAAI,GAAG,IAAA,cAAM,EACjB,8BAAC,eAAQ,OAAK,KAAK;YACjB,sDAAmB,CACV,CACZ,CAAA;QACD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;IAC9E,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,KAAK,GAAkB;YAC3B,EAAE,EAAE,SAAS;YACb,UAAU,EAAE,IAAI;SACjB,CAAA;QACD,MAAM,IAAI,GAAG,IAAA,cAAM,EACjB,8BAAC,eAAQ,OAAK,KAAK;YACjB,sDAAmB,CACV,CACZ,CAAA;QACD,MAAM,CACJ,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAC1D,CAAC,UAAU,EAAE,CAAA;IAChB,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,63 +0,0 @@
|
|
|
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
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
7
|
-
// @ts-nocheck
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const react_test_renderer_1 = __importDefault(require("react-test-renderer"));
|
|
10
|
-
const index_1 = __importDefault(require("../index"));
|
|
11
|
-
describe('Expander Snapshot', () => {
|
|
12
|
-
describe('component rendered on server', () => {
|
|
13
|
-
it('default render', () => {
|
|
14
|
-
const props = {
|
|
15
|
-
id: 'test-id',
|
|
16
|
-
};
|
|
17
|
-
const tree = react_test_renderer_1.default
|
|
18
|
-
.create(react_1.default.createElement(index_1.default, { ...props },
|
|
19
|
-
react_1.default.createElement("div", null, "Children 1"),
|
|
20
|
-
react_1.default.createElement("div", null, "Children 2")))
|
|
21
|
-
.toJSON();
|
|
22
|
-
expect(tree).toMatchSnapshot();
|
|
23
|
-
});
|
|
24
|
-
it('only on mobile', () => {
|
|
25
|
-
const props = {
|
|
26
|
-
id: 'test-id',
|
|
27
|
-
onlyMobile: true,
|
|
28
|
-
};
|
|
29
|
-
const tree = react_test_renderer_1.default
|
|
30
|
-
.create(react_1.default.createElement(index_1.default, { ...props },
|
|
31
|
-
react_1.default.createElement("div", null, "Children 1"),
|
|
32
|
-
react_1.default.createElement("div", null, "Children 2")))
|
|
33
|
-
.toJSON();
|
|
34
|
-
expect(tree).toMatchSnapshot();
|
|
35
|
-
});
|
|
36
|
-
it('with different labels', () => {
|
|
37
|
-
const props = {
|
|
38
|
-
id: 'test-id',
|
|
39
|
-
collapseLabel: 'Close',
|
|
40
|
-
expandLabel: 'Open',
|
|
41
|
-
};
|
|
42
|
-
const tree = react_test_renderer_1.default
|
|
43
|
-
.create(react_1.default.createElement(index_1.default, { ...props },
|
|
44
|
-
react_1.default.createElement("div", null, "Children 1"),
|
|
45
|
-
react_1.default.createElement("div", null, "Children 2")))
|
|
46
|
-
.toJSON();
|
|
47
|
-
expect(tree).toMatchSnapshot();
|
|
48
|
-
});
|
|
49
|
-
it('with different state', () => {
|
|
50
|
-
const props = {
|
|
51
|
-
id: 'test-id',
|
|
52
|
-
state: 'expanded',
|
|
53
|
-
};
|
|
54
|
-
const tree = react_test_renderer_1.default
|
|
55
|
-
.create(react_1.default.createElement(index_1.default, { ...props },
|
|
56
|
-
react_1.default.createElement("div", null, "Children 1"),
|
|
57
|
-
react_1.default.createElement("div", null, "Children 2")))
|
|
58
|
-
.toJSON();
|
|
59
|
-
expect(tree).toMatchSnapshot();
|
|
60
|
-
});
|
|
61
|
-
});
|
|
62
|
-
});
|
|
63
|
-
//# sourceMappingURL=snapshot.spec.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"snapshot.spec.js","sourceRoot":"","sources":["../../../../src/components/Expander/test/snapshot.spec.tsx"],"names":[],"mappings":";;;;;AAAA,6DAA6D;AAC7D,cAAc;AACd,kDAAyB;AACzB,8EAA0C;AAC1C,qDAAkD;AAElD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;QAC5C,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE;YACxB,MAAM,KAAK,GAAkB;gBAC3B,EAAE,EAAE,SAAS;aACd,CAAA;YACD,MAAM,IAAI,GAAG,6BAAQ;iBAClB,MAAM,CACL,8BAAC,eAAQ,OAAK,KAAK;gBACjB,wDAAqB;gBACrB,wDAAqB,CACZ,CACZ;iBACA,MAAM,EAAE,CAAA;YACX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;QAChC,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE;YACxB,MAAM,KAAK,GAAkB;gBAC3B,EAAE,EAAE,SAAS;gBACb,UAAU,EAAE,IAAI;aACjB,CAAA;YACD,MAAM,IAAI,GAAG,6BAAQ;iBAClB,MAAM,CACL,8BAAC,eAAQ,OAAK,KAAK;gBACjB,wDAAqB;gBACrB,wDAAqB,CACZ,CACZ;iBACA,MAAM,EAAE,CAAA;YACX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;QAChC,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;YAC/B,MAAM,KAAK,GAAkB;gBAC3B,EAAE,EAAE,SAAS;gBACb,aAAa,EAAE,OAAO;gBACtB,WAAW,EAAE,MAAM;aACpB,CAAA;YACD,MAAM,IAAI,GAAG,6BAAQ;iBAClB,MAAM,CACL,8BAAC,eAAQ,OAAK,KAAK;gBACjB,wDAAqB;gBACrB,wDAAqB,CACZ,CACZ;iBACA,MAAM,EAAE,CAAA;YACX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;QAChC,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;YAC9B,MAAM,KAAK,GAAkB;gBAC3B,EAAE,EAAE,SAAS;gBACb,KAAK,EAAE,UAAU;aAClB,CAAA;YACD,MAAM,IAAI,GAAG,6BAAQ;iBAClB,MAAM,CACL,8BAAC,eAAQ,OAAK,KAAK;gBACjB,wDAAqB;gBACrB,wDAAqB,CACZ,CACZ;iBACA,MAAM,EAAE,CAAA;YACX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;QAChC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.LiveBlogPostClient = void 0;
|
|
4
|
-
const client_1 = require("../../Expander/client");
|
|
5
|
-
class LiveBlogPostClient {
|
|
6
|
-
static init() {
|
|
7
|
-
return client_1.ExpanderClient.init({ trackingData: { category: 'live-blog-post' } });
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
exports.LiveBlogPostClient = LiveBlogPostClient;
|
|
11
|
-
exports.default = LiveBlogPostClient;
|
|
12
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/LiveBlogPost/client/index.ts"],"names":[],"mappings":";;;AAAA,kDAAsD;AAEtD,MAAa,kBAAkB;IAC7B,MAAM,CAAC,IAAI;QACT,OAAO,uBAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,CAAC,CAAA;IAC9E,CAAC;CACF;AAJD,gDAIC;AAED,kBAAe,kBAAkB,CAAA"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { ExpanderProps } from '../components/Expander';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import './Expander.stories.scss';
|
|
4
|
-
import './Clip.stories.scss';
|
|
5
|
-
declare const _default: {
|
|
6
|
-
title: string;
|
|
7
|
-
component: React.FC<ExpanderProps>;
|
|
8
|
-
tags: string[];
|
|
9
|
-
};
|
|
10
|
-
export default _default;
|
|
11
|
-
export declare const OnlyServer: {
|
|
12
|
-
(args: ExpanderProps): React.JSX.Element;
|
|
13
|
-
args: {
|
|
14
|
-
state?: "expanded" | "collapsed" | undefined;
|
|
15
|
-
expandLabel?: string | undefined;
|
|
16
|
-
collapseLabel?: string | undefined;
|
|
17
|
-
onlyMobile?: boolean | undefined;
|
|
18
|
-
id: string;
|
|
19
|
-
children?: React.ReactNode;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
export declare const WithClient: {
|
|
23
|
-
(args: ExpanderProps): React.JSX.Element;
|
|
24
|
-
args: {
|
|
25
|
-
state?: "expanded" | "collapsed" | undefined;
|
|
26
|
-
expandLabel?: string | undefined;
|
|
27
|
-
collapseLabel?: string | undefined;
|
|
28
|
-
onlyMobile?: boolean | undefined;
|
|
29
|
-
id: string;
|
|
30
|
-
children?: React.ReactNode;
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
export declare const OnlyMobileWithClient: {
|
|
34
|
-
(args: ExpanderProps): React.JSX.Element;
|
|
35
|
-
args: {
|
|
36
|
-
state?: "expanded" | "collapsed" | undefined;
|
|
37
|
-
expandLabel?: string | undefined;
|
|
38
|
-
collapseLabel?: string | undefined;
|
|
39
|
-
onlyMobile?: boolean | undefined;
|
|
40
|
-
id: string;
|
|
41
|
-
children?: React.ReactNode;
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
export declare const OnlyMobileServer: {
|
|
45
|
-
(args: ExpanderProps): React.JSX.Element;
|
|
46
|
-
args: {
|
|
47
|
-
state?: "expanded" | "collapsed" | undefined;
|
|
48
|
-
expandLabel?: string | undefined;
|
|
49
|
-
collapseLabel?: string | undefined;
|
|
50
|
-
onlyMobile?: boolean | undefined;
|
|
51
|
-
id: string;
|
|
52
|
-
children?: React.ReactNode;
|
|
53
|
-
};
|
|
54
|
-
};
|