@financial-times/qanda-ui 0.0.1-beta.34 → 0.0.1-beta.37
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/dist/cjs/components/Calendar/Apps.js +16 -4
- package/dist/cjs/components/QandaBlock/index.js +1 -1
- package/dist/esm/components/Calendar/Apps.js +16 -4
- package/dist/esm/components/QandaBlock/index.js +1 -1
- package/dist/qanda.scss +1 -1
- package/dist/types/components/Calendar/Apps.d.ts +2 -0
- package/package.json +1 -1
|
@@ -6,8 +6,18 @@ const tracking_1 = require("../../utils/tracking");
|
|
|
6
6
|
function formatDate(date) {
|
|
7
7
|
return date.replace(/-|:|\.\d+/g, '');
|
|
8
8
|
}
|
|
9
|
-
const CalendarLink = ({ href, children, }) => {
|
|
10
|
-
|
|
9
|
+
const CalendarLink = ({ href, isDownload = false, children, }) => {
|
|
10
|
+
const attirbutes = isDownload
|
|
11
|
+
? {
|
|
12
|
+
download: 'event.ics',
|
|
13
|
+
'data-trackable': (0, tracking_1.trackingNS)('calendar-link-download'),
|
|
14
|
+
}
|
|
15
|
+
: {
|
|
16
|
+
target: '_blank',
|
|
17
|
+
rel: 'noopener noreferrer',
|
|
18
|
+
'data-trackable': (0, tracking_1.trackingNS)('calendar-link'),
|
|
19
|
+
};
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)("a", { href: href, ...attirbutes, role: "menuitem", className: "live-qa-calendar-list__item__link", children: children }));
|
|
11
21
|
};
|
|
12
22
|
function itemChildren(name, icon) {
|
|
13
23
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "live-qa-calendar-list__item__icon", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "live-qa-calendar-list__item__text", children: name })] }));
|
|
@@ -30,6 +40,7 @@ const apps = [
|
|
|
30
40
|
getLink: ({ storyId, useStaging, commentsAPIUrl }) => {
|
|
31
41
|
return `${commentsAPIUrl}/story/${storyId}/invitation${useStaging ? '?staging=1' : ''}`;
|
|
32
42
|
},
|
|
43
|
+
isDownload: true,
|
|
33
44
|
},
|
|
34
45
|
{
|
|
35
46
|
name: 'Yahoo',
|
|
@@ -37,9 +48,10 @@ const apps = [
|
|
|
37
48
|
getLink: ({ title, startDateTime, endDateTime, storyId }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${formatDate(startDateTime)}&et=${formatDate(endDateTime)}&desc=${encodeURIComponent(description(storyId))}&in_loc=${encodeURIComponent(storyId)}`,
|
|
38
49
|
},
|
|
39
50
|
];
|
|
40
|
-
exports.default = apps.map(({ name, icon, getLink }) => ({
|
|
51
|
+
exports.default = apps.map(({ name, icon, getLink, isDownload }) => ({
|
|
41
52
|
name,
|
|
42
53
|
icon,
|
|
54
|
+
isDownload,
|
|
43
55
|
link: ({ title, startDateTime, endDateTime, storyId, useStaging, commentsAPIUrl, }) => {
|
|
44
56
|
const href = getLink({
|
|
45
57
|
title,
|
|
@@ -49,6 +61,6 @@ exports.default = apps.map(({ name, icon, getLink }) => ({
|
|
|
49
61
|
useStaging,
|
|
50
62
|
commentsAPIUrl,
|
|
51
63
|
});
|
|
52
|
-
return (0, jsx_runtime_1.jsx)(CalendarLink, { href: href, children: itemChildren(name, icon) });
|
|
64
|
+
return ((0, jsx_runtime_1.jsx)(CalendarLink, { href: href, isDownload: isDownload, children: itemChildren(name, icon) }));
|
|
53
65
|
},
|
|
54
66
|
}));
|
|
@@ -74,6 +74,6 @@ function QandaBlock({ id, body, children, byline, summary, showAnswerTime = fals
|
|
|
74
74
|
observer.disconnect();
|
|
75
75
|
};
|
|
76
76
|
}, []);
|
|
77
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block", children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": (0, tracking_1.trackingNS)('question'), children: [summary && ((0, jsx_runtime_1.jsx)("div", { className: "o3-type-headline-sm qanda-block__question-summary", children: summary })), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: (0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: byline, showEditedBy: false }) }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": (0, tracking_1.trackingNS)('answer'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__answer-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: child.author ? ((0, jsx_runtime_1.jsx)(Author_1.default, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : ((0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: child.byline, showEditedBy: false })) }), showAnswerTime && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: renderTime(child.publishedDate) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
|
|
77
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block", children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": (0, tracking_1.trackingNS)('question'), children: [summary && ((0, jsx_runtime_1.jsx)("div", { className: "o3-type-headline-sm qanda-block__question-summary", children: summary })), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: (0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: byline, showEditedBy: false }) }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": (0, tracking_1.trackingNS)('answer'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__answer-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: child.author ? ((0, jsx_runtime_1.jsx)(Author_1.default, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : ((0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: child.byline, showEditedBy: false })) }), showAnswerTime && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: renderTime(child.publishedDate) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
|
|
78
78
|
}
|
|
79
79
|
exports.default = QandaBlock;
|
|
@@ -4,8 +4,18 @@ import { trackingNS } from '../../utils/tracking';
|
|
|
4
4
|
function formatDate(date) {
|
|
5
5
|
return date.replace(/-|:|\.\d+/g, '');
|
|
6
6
|
}
|
|
7
|
-
const CalendarLink = ({ href, children, }) => {
|
|
8
|
-
|
|
7
|
+
const CalendarLink = ({ href, isDownload = false, children, }) => {
|
|
8
|
+
const attirbutes = isDownload
|
|
9
|
+
? {
|
|
10
|
+
download: 'event.ics',
|
|
11
|
+
'data-trackable': trackingNS('calendar-link-download'),
|
|
12
|
+
}
|
|
13
|
+
: {
|
|
14
|
+
target: '_blank',
|
|
15
|
+
rel: 'noopener noreferrer',
|
|
16
|
+
'data-trackable': trackingNS('calendar-link'),
|
|
17
|
+
};
|
|
18
|
+
return (_jsx("a", { href: href, ...attirbutes, role: "menuitem", className: "live-qa-calendar-list__item__link", children: children }));
|
|
9
19
|
};
|
|
10
20
|
function itemChildren(name, icon) {
|
|
11
21
|
return (_jsxs(_Fragment, { children: [_jsx("span", { className: "live-qa-calendar-list__item__icon", children: icon }), _jsx("span", { className: "live-qa-calendar-list__item__text", children: name })] }));
|
|
@@ -28,6 +38,7 @@ const apps = [
|
|
|
28
38
|
getLink: ({ storyId, useStaging, commentsAPIUrl }) => {
|
|
29
39
|
return `${commentsAPIUrl}/story/${storyId}/invitation${useStaging ? '?staging=1' : ''}`;
|
|
30
40
|
},
|
|
41
|
+
isDownload: true,
|
|
31
42
|
},
|
|
32
43
|
{
|
|
33
44
|
name: 'Yahoo',
|
|
@@ -35,9 +46,10 @@ const apps = [
|
|
|
35
46
|
getLink: ({ title, startDateTime, endDateTime, storyId }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${formatDate(startDateTime)}&et=${formatDate(endDateTime)}&desc=${encodeURIComponent(description(storyId))}&in_loc=${encodeURIComponent(storyId)}`,
|
|
36
47
|
},
|
|
37
48
|
];
|
|
38
|
-
export default apps.map(({ name, icon, getLink }) => ({
|
|
49
|
+
export default apps.map(({ name, icon, getLink, isDownload }) => ({
|
|
39
50
|
name,
|
|
40
51
|
icon,
|
|
52
|
+
isDownload,
|
|
41
53
|
link: ({ title, startDateTime, endDateTime, storyId, useStaging, commentsAPIUrl, }) => {
|
|
42
54
|
const href = getLink({
|
|
43
55
|
title,
|
|
@@ -47,6 +59,6 @@ export default apps.map(({ name, icon, getLink }) => ({
|
|
|
47
59
|
useStaging,
|
|
48
60
|
commentsAPIUrl,
|
|
49
61
|
});
|
|
50
|
-
return _jsx(CalendarLink, { href: href, children: itemChildren(name, icon) });
|
|
62
|
+
return (_jsx(CalendarLink, { href: href, isDownload: isDownload, children: itemChildren(name, icon) }));
|
|
51
63
|
},
|
|
52
64
|
}));
|
|
@@ -69,6 +69,6 @@ function QandaBlock({ id, body, children, byline, summary, showAnswerTime = fals
|
|
|
69
69
|
observer.disconnect();
|
|
70
70
|
};
|
|
71
71
|
}, []);
|
|
72
|
-
return (_jsxs("div", { className: "qanda-block", children: [_jsxs("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": trackingNS('question'), children: [summary && (_jsx("div", { className: "o3-type-headline-sm qanda-block__question-summary", children: summary })), _jsx("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: _jsx(Byline, { structuredContent: byline, showEditedBy: false }) }), _jsx("div", { className: "o3-type-body-base qanda-block__comment-text", children: _jsx(Expander, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: _jsx(RichText, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && (_jsxs("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": trackingNS('answer'), children: [_jsxs("div", { className: "qanda-block__answer-header", children: [_jsx("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: child.author ? (_jsx(Author, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : (_jsx(Byline, { structuredContent: child.byline, showEditedBy: false })) }), showAnswerTime && (_jsx("span", { className: "o3-type-detail", children: renderTime(child.publishedDate) }))] }), _jsx("div", { className: "o3-type-body-base qanda-block__comment-text", children: _jsx(Expander, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: _jsx(RichText, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
|
|
72
|
+
return (_jsxs("div", { className: "qanda-block", children: [_jsxs("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": trackingNS('question'), children: [summary && (_jsx("div", { className: "o3-type-headline-sm qanda-block__question-summary", children: summary })), _jsx("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: _jsx(Byline, { structuredContent: byline, showEditedBy: false }) }), _jsx("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: _jsx(Expander, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: _jsx(RichText, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && (_jsxs("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": trackingNS('answer'), children: [_jsxs("div", { className: "qanda-block__answer-header", children: [_jsx("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: child.author ? (_jsx(Author, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : (_jsx(Byline, { structuredContent: child.byline, showEditedBy: false })) }), showAnswerTime && (_jsx("span", { className: "o3-type-detail", children: renderTime(child.publishedDate) }))] }), _jsx("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: _jsx(Expander, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: _jsx(RichText, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
|
|
73
73
|
}
|
|
74
74
|
export default QandaBlock;
|
package/dist/qanda.scss
CHANGED
|
@@ -575,6 +575,7 @@ $app-header-color: #007acc;
|
|
|
575
575
|
.qanda-block__comment-byline p {
|
|
576
576
|
margin: 0;
|
|
577
577
|
font-size: var(--o3-type-body-highlight-font-size);
|
|
578
|
+
font-weight: var(--o3-type-body-highlight-font-weight);
|
|
578
579
|
}
|
|
579
580
|
|
|
580
581
|
.qanda-block__comment-text {
|
|
@@ -583,7 +584,6 @@ $app-header-color: #007acc;
|
|
|
583
584
|
|
|
584
585
|
.qanda-block__comment-text p {
|
|
585
586
|
margin: 0;
|
|
586
|
-
font-size: var(--o3-type-body-base-font-size);
|
|
587
587
|
}
|
|
588
588
|
|
|
589
589
|
.qanda-block__text {
|
|
@@ -6,11 +6,13 @@ export type LinkProps = {
|
|
|
6
6
|
storyId: string;
|
|
7
7
|
useStaging: boolean;
|
|
8
8
|
commentsAPIUrl: string;
|
|
9
|
+
isDownload?: boolean;
|
|
9
10
|
children?: string;
|
|
10
11
|
};
|
|
11
12
|
declare const _default: {
|
|
12
13
|
name: string;
|
|
13
14
|
icon: JSX.Element;
|
|
15
|
+
isDownload: boolean | undefined;
|
|
14
16
|
link: ({ title, startDateTime, endDateTime, storyId, useStaging, commentsAPIUrl, }: PropsWithChildren<LinkProps>) => JSX.Element;
|
|
15
17
|
}[];
|
|
16
18
|
export default _default;
|