@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.
@@ -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
- return ((0, jsx_runtime_1.jsx)("a", { href: href, target: "_blank", rel: "noopener noreferrer", role: "menuitem", "data-trackable": (0, tracking_1.trackingNS)('calendar-link'), className: "live-qa-calendar-list__item__link", children: children }));
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
- return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", role: "menuitem", "data-trackable": trackingNS('calendar-link'), className: "live-qa-calendar-list__item__link", children: children }));
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/qanda-ui",
3
- "version": "0.0.1-beta.34",
3
+ "version": "0.0.1-beta.37",
4
4
  "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",