@financial-times/qanda-ui 0.0.1-beta.3 → 0.0.1-beta.30

package/README.md

@@ -1,6 +1,6 @@
 # QandA-UI
 
-A library for the Live Q&A client-side component
+A library for the Live Q&A (AKA Ask an Expert) client-side component
 
 ## Usage
 
@@ -20,9 +20,13 @@ The Origami components required are listed as peer dependencies in package.json.
 
 This library exports a class which can be used to construct a new instance of QandaUI and exposes methods to initialise it and to destroy it.
 
+It also exports QandaBlock, the UI that is used to show a question 'block' - a question and its answers along with the other data like poster name and expert details
+
+#### QandaUI
+
 You can pass the necessary settings to Qanda UI in either the JS or in the container element.
 
-#### Example:
+##### Example:
 
 ```jsx
 // JSX
@@ -44,7 +48,7 @@ const qandaUI = new QandaUI(qandaEl, {
 qandaUI.init();
 ```
 
-#### Alternative:
+##### Alternative:
 
 ```jsx
 // JSX
@@ -66,7 +70,7 @@ const qandaUI = new QandaUI(qandaEl);
 qandaUI.init();
 ```
 
-#### Parameters
+##### Parameters
 
 - storyId: (required) string, the ID of the article used for Live Q&A
 - useStaging: (optional) boolean, set to true if you want to use the staging Coral
@@ -75,11 +79,25 @@ qandaUI.init();
 - commentsAPIVersion: (required) string, the version of the API to be used
 - maxQuestionLength: (optional) number, set to the maximum allowable length (in characters) for the question text
 
-#### Instance Methods
+##### Instance Methods
 
 - `myInstance.init()` - render the Qanda UI
 - `myInstance.destroy()` - remove the Qanda instance
 
+### QandaBlock
+
+```jsx
+import QandaBlock from '@financial-times/qanda-ui';
+
+<QandaBlock
+  id={questionId}
+  body={body}
+  children={answers}
+  byline={byeline}
+  summary={lorem}
+/>;
+```
+
 ## Development
 
 ### Prerequisites
@@ -111,8 +129,8 @@ You can customize the demo application by modifying the configuration files in t
 
 These are the config settings you can work with:
 
+- `export const COMMENTS_API_BASE_HOST = LOCAL_API;` // use one of the provided constants or set your own next comments api domain
 - `export const USE_STAGING = true;` // use Coral staging or production
-- `export const USE_LOCAL_API = true;` // use local next-comments-api or live
 
 ### Building and Running the Production Server
 
@@ -132,7 +150,7 @@ To run the Jest tests, use:
 npm run test
 ```
 
-## Technology
+### Technology
 
 This uses React, Redux and RTK Query to create the components and manage their states.
 
@@ -140,6 +158,20 @@ This uses React, Redux and RTK Query to create the components and manage their s
 - The store is used for non-API data that needs to be shared around the components
 - The story ID and useStaging settings passed in when the Qanda compontent is set are saved into the Context.
 
+### Architecture
+
+Quanda UI is strongly coupled with next-comments-api. See [architectural documentation in next-comments-api repository](https://github.com/Financial-Times/next-comments-api/blob/main/docs/liveqa.md#live-qa).
+
+## Support
+
+### Client-side metrics
+
+We send client-side metrics (Failures and optionally successes) to [Cloudwatch RUM in the `FT Tech Next Prod` account](https://eu-west-1.console.aws.amazon.com/cloudwatch/home?region=eu-west-1#rum:dashboard/cp-client-metrics?tab=events).
+
+Failure events may contain error information for debugging.
+
+Those events are also observable in a [Live Q&A Grafana dashboard](https://grafana.ft.com/d/fekh6pkkr80lcd/live-qanda).
+
 ### How updates work
 
 In order to receive updates from the next comments API, we use an EventSource that listens to an EventEmitter endpoint on next-comments-api.

package/dist/cjs/components/Author/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const Headshot_1 = __importDefault(require("@financial-times/cp-content-pipeline-ui/lib/components/Headshot"));
+const Byline_1 = __importDefault(require("@financial-times/cp-content-pipeline-ui/lib/components/Byline"));
+function Author({ byline, headshot, prefLabel, role, streamPage, }) {
+    const hasHeadshot = headshot && prefLabel;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__answer__author", "data-testid": "qanda-block__answer__author", children: [hasHeadshot ? ((0, jsx_runtime_1.jsx)("div", { className: "qanda-block__answer__author-headshot", children: (0, jsx_runtime_1.jsx)(Headshot_1.default, { headshot: headshot, prefLabel: prefLabel, streamPage: streamPage, className: "qanda-block__answer__author-headshot" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "qanda-block__answer__author-opinion-icon" })), (0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__answer__author-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__answer__author-name", children: (0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: byline, showEditedBy: false }) }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-base", children: role })] })] }));
+}
+Author.defaultProps = {
+    byline: '',
+    headshot: false,
+    prefLabel: false,
+    streamPage: '',
+};
+exports.default = Author;

package/dist/cjs/components/Calendar/Apps.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const qanda_1 = require("../../config/qanda");
+const tracking_1 = require("../../utils/tracking");
+function formatDateForIcs(date) {
+    return date.replace(/-|:|\.\d+/g, '');
+}
+const CalendarLink = ({ href, children, }) => {
+    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 }));
+};
+function itemChildren(name, icon) {
+    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 })] }));
+}
+const description = (url) => `To join the ${qanda_1.PRODUCT_NAME} session, visit: ${url}`;
+const apps = [
+    {
+        name: 'Gmail',
+        icon: ((0, jsx_runtime_1.jsx)("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: (0, jsx_runtime_1.jsxs)("g", { transform: "translate(4, 3.36)", children: [(0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.8514 7.64502H8.16309V10.8162H12.5564C12.3672 11.841 11.792 12.7093 10.9275 13.2906V15.3476H13.5657C15.1093 13.9204 15.9998 11.8187 15.9998 9.32193C15.9998 8.7406 15.9479 8.18163 15.8514 7.64502Z", fill: "black" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.16315 17.3339C10.3672 17.3339 12.2151 16.5998 13.5658 15.3477L10.9275 13.2907C10.1966 13.7826 9.26149 14.0733 8.16315 14.0733C6.037 14.0733 4.23737 12.6311 3.59544 10.6934H0.868164V12.8174C2.21139 15.4968 4.97206 17.3339 8.16315 17.3339Z", fill: "black" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.59555 10.6933C3.43228 10.2014 3.33952 9.67595 3.33952 9.13561C3.33952 8.59527 3.43228 8.06984 3.59555 7.57795V5.45386H0.868275C0.315399 6.56062 0 7.81272 0 9.13561C0 10.4585 0.315399 11.7106 0.868275 12.8174L3.59555 10.6933Z", fill: "black" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.16316 4.19816C9.36167 4.19816 10.4377 4.6118 11.2837 5.42417L13.6251 3.07277C12.2114 1.74987 10.3635 0.9375 8.16316 0.9375C4.97206 0.9375 2.21139 2.77465 0.868164 5.45399L3.59544 7.57808C4.23737 5.64031 6.037 4.19816 8.16316 4.19816Z", fill: "black" })] }) })),
+        getLink: ({ title, startDateTime, endDateTime, url }) => `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${startDateTime}/${endDateTime}&details=${encodeURIComponent(description(url))}&location=${encodeURIComponent(url)}`,
+    },
+    {
+        name: 'Outlook',
+        icon: ((0, jsx_runtime_1.jsx)("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M21.9979 8.49306V17.3819C22.0068 17.5304 21.987 17.6792 21.9399 17.8185C21.8927 17.9578 21.8194 18.0842 21.7247 18.1894C21.63 18.2946 21.5162 18.3761 21.3909 18.4285C21.2656 18.4809 21.1316 18.5029 20.9981 18.4931H13.9988V22.9375L2 20.9375V4.9375L13.9988 2.9375V7.38194H20.9981C21.1316 7.37212 21.2656 7.39413 21.3909 7.4465C21.5162 7.49886 21.63 7.58037 21.7247 7.68558C21.8194 7.79078 21.8927 7.91724 21.9399 8.0565C21.987 8.19576 22.0068 8.3446 21.9979 8.49306ZM20.9981 8.60417L16.9985 11.1597L13.9988 9.27083V11.0486L16.9985 12.9375L20.9981 10.3819V8.60417ZM7.91939 8.60417C5.81961 8.52639 4.78971 10.5819 4.78971 13.0486C4.78971 15.5153 5.8596 17.4931 7.91939 17.4931C9.7892 17.4931 10.9991 15.6153 10.9991 13.1708C10.9991 10.7264 10.1292 8.72639 7.91939 8.6375M7.60943 10.3819C8.44934 10.3819 9.19926 11.2042 9.19926 12.8819C9.19926 14.5597 8.44934 15.5042 7.60943 15.5042C6.76951 15.5042 6.09958 14.2708 6.09958 12.9375C6.09958 11.6042 6.77951 10.3819 7.60943 10.3819Z", fill: "black" }) })),
+        getLink: ({ title, startDateTime, endDateTime, url }) => `https://outlook.live.com/calendar/0/deeplink/compose?subject=${encodeURIComponent(title)}&startdt=${startDateTime}&enddt=${endDateTime}&body=${encodeURIComponent(description(url))}&location=${encodeURIComponent(url)}`,
+    },
+    {
+        name: 'Yahoo',
+        icon: ((0, jsx_runtime_1.jsx)("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M15.3929 13.7528C15.3614 13.7513 15.3247 13.7506 15.2879 13.7506C13.8674 13.7506 12.7109 14.8793 12.6659 16.2886V16.2931C12.7049 17.6536 13.8172 18.7411 15.1837 18.7411C15.2182 18.7411 15.2519 18.7403 15.2857 18.7388H15.2812C15.3194 18.7411 15.3637 18.7418 15.4087 18.7418C16.8217 18.7418 17.9737 17.6228 18.0269 16.2226V16.2181C18.0037 14.8501 16.8892 13.7498 15.5174 13.7498C15.4739 13.7498 15.4304 13.7513 15.3869 13.7528H15.3929ZM0.75293 7.97933L5.57993 18.8138L3.84593 22.7221H8.09168L14.5214 7.97933H10.3042L7.67993 14.2868L5.08343 7.97933H0.75368H0.75293ZM18.4297 3.15308L14.1277 12.8161H18.9359L23.2469 3.15308H18.4297Z", fill: "black" }) })),
+        getLink: ({ title, startDateTime, endDateTime, url }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${formatDateForIcs(startDateTime)}&et=${formatDateForIcs(endDateTime)}&desc=${encodeURIComponent(description(url))}&in_loc=${encodeURIComponent(url)}`,
+    },
+];
+exports.default = apps.map(({ name, icon, getLink }) => ({
+    name,
+    icon,
+    link: ({ title, startDateTime, endDateTime, url, }) => {
+        const href = getLink({ title, startDateTime, endDateTime, url });
+        return (0, jsx_runtime_1.jsx)(CalendarLink, { href: href, children: itemChildren(name, icon) });
+    },
+}));

package/dist/cjs/components/Calendar/CalendarList.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const CalendarListItem_1 = __importDefault(require("./CalendarListItem"));
+const Apps_1 = __importDefault(require("./Apps"));
+function CalendarList() {
+    return ((0, jsx_runtime_1.jsx)("ul", { className: "live-qa-calendar-list", id: "live-qa-calendar-list-menu", "data-testid": "live-qa-calendar-list-menu", role: "menu", "aria-labelledby": "live-qa-calendar-button-menu", children: Apps_1.default && Apps_1.default.map((app) => (0, jsx_runtime_1.jsx)(CalendarListItem_1.default, { ...app })) }));
+}
+exports.default = CalendarList;

package/dist/cjs/components/Calendar/CalendarListItem.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const react_1 = require("react");
+const QandaProvider_1 = require("../QandaProvider");
+const comments_api_1 = require("../../services/comments-api");
+function CalendarListItem({ name, link }) {
+    const { storyId, useStaging, commentsAPIUrl, title } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const { data } = (0, comments_api_1.useGetQandAStreamQuery)({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        // Calendar is only relevant for pre-live Q&A
+        status: 'pre-live',
+    });
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: data?.startDateTime && data?.endDateTime && ((0, jsx_runtime_1.jsx)("li", { className: 'live-qa-calendar-list__item', role: "presentation", "data-testid": "live-qa-calendar-list-item", children: link({
+                title,
+                startDateTime: data.startDateTime,
+                endDateTime: data.endDateTime,
+                url: `https://www.ft.com/content/${storyId}`,
+                children: name,
+            }) })) }));
+}
+exports.default = CalendarListItem;

package/dist/cjs/components/Calendar/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const o3_button_1 = require("@financial-times/o3-button");
+const react_1 = require("react");
+const CalendarList_1 = __importDefault(require("./CalendarList"));
+const comments_api_1 = require("../../services/comments-api");
+const QandaProvider_1 = require("../QandaProvider");
+const tracking_1 = require("../../utils/tracking");
+function Calendar() {
+    const [dropDownVisible, setDropDownVisible] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
+    const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const { data } = (0, comments_api_1.useGetQandAStreamQuery)({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        // Calendar is only relevant for pre-live Q&A
+        // so we can hardcode the status here
+        status: 'pre-live',
+    });
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                event.target instanceof Node &&
+                !containerRef.current.contains(event.target)) {
+                setDropDownVisible(false);
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: data?.status === 'pre-live' && ((0, jsx_runtime_1.jsxs)("div", { className: "live-qa-calendar-container", ref: containerRef, children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { label: "Add to your calendar", type: "secondary", theme: "mono", icon: "calendar", iconOnly: false, attributes: {
+                        className: 'live-qa-calendar-button',
+                        'aria-pressed': dropDownVisible,
+                        'aria-haspopup': 'true',
+                        'aria-controls': 'menu',
+                        id: 'live-qa-calendar-button-menu',
+                        'data-testid': 'live-qa-calendar-button',
+                        'data-trackable': (0, tracking_1.trackingNS)('add-to-calendar-button'),
+                    }, onClick: () => setDropDownVisible(!dropDownVisible) }), dropDownVisible && (0, jsx_runtime_1.jsx)(CalendarList_1.default, {})] })) }));
+}
+exports.default = Calendar;

package/dist/cjs/components/CountdownTimer/index.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTime = formatTime;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const react_1 = require("react");
+const QandaProvider_1 = require("../QandaProvider");
+const comments_api_1 = require("../../services/comments-api");
+function formatTime(remainingTime) {
+    const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
+    if (days >= 1) {
+        return `${days} day${days === 1 ? '' : 's'} `;
+    }
+    const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    if (hours >= 1) {
+        return `${hours} hour${hours === 1 ? '' : 's'}`;
+    }
+    const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
+    if (minutes >= 1) {
+        return `${minutes} minute${minutes === 1 ? '' : 's'}`;
+    }
+    const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
+    if (seconds >= 1) {
+        return `${seconds} second${seconds === 1 ? '' : 's'}`;
+    }
+}
+function CountdownTimer({ container }) {
+    const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const { data } = (0, comments_api_1.useGetQandAStreamQuery)({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        // Countdown is only relevant for pre-live Q&A
+        // so we can hardcode the status here
+        status: 'pre-live',
+    });
+    const updatedQA = (0, comments_api_1.useUpdatedQA)({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+    });
+    const [count, setCount] = (0, react_1.useState)('');
+    const status = updatedQA?.status || data?.status || 'pre-live';
+    const startDateTime = updatedQA?.startDateTime || data?.startDateTime;
+    const endDateTime = updatedQA?.endDateTime || data?.endDateTime;
+    (0, react_1.useEffect)(() => {
+        function calculateTimeLeft() {
+            const currentDate = Date.now();
+            const isLive = status === 'live';
+            const timeForCountdown = isLive ? endDateTime : startDateTime;
+            if (!timeForCountdown) {
+                return;
+            }
+            const remainingTime = new Date(timeForCountdown).getTime() - currentDate;
+            const eventInfo = isLive ? 'Ending' : 'Starting';
+            if (remainingTime !== null && !isNaN(remainingTime)) {
+                if (remainingTime >= 1000) {
+                    setCount(`${eventInfo} in ${formatTime(remainingTime)}`);
+                }
+                else {
+                    setCount(`${eventInfo} Soon`);
+                }
+            }
+        }
+        calculateTimeLeft();
+        const interval = setInterval(calculateTimeLeft, 1000);
+        return () => clearInterval(interval);
+    }, [
+        data?.status,
+        data?.startDateTime,
+        data?.endDateTime,
+        updatedQA?.status,
+        updatedQA?.startDateTime,
+        updatedQA?.endDateTime,
+    ]);
+    const [portalTarget, setPortalTarget] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (container) {
+            const portalContainer = document.createElement('div');
+            container.prepend(portalContainer);
+            setPortalTarget(portalContainer);
+            return () => {
+                portalContainer.remove();
+            };
+        }
+    }, []);
+    const portalElement = data &&
+        ((status === 'pre-live' && startDateTime) ||
+            (status === 'live' && endDateTime)) && ((0, jsx_runtime_1.jsx)("div", { className: "qanda-portal countdown-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "countdown-block", children: (0, jsx_runtime_1.jsx)("p", { className: "countdown", children: count && ((0, jsx_runtime_1.jsx)("time", { datetime: status === 'pre-live' ? startDateTime : endDateTime, children: count })) }) }) }));
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_1.createPortal)(portalElement, portalTarget || document.body) });
+}
+exports.default = CountdownTimer;

package/dist/cjs/components/EmbedFormField/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const react_redux_1 = require("react-redux");
+const questionSlice_1 = require("../../store/questionSlice");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const qanda_1 = require("../../config/qanda");
+function EmbedFormField({ container }) {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const [portalTarget, setPortalTarget] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (container) {
+            const portalContainer = document.createElement('div');
+            container.prepend(portalContainer);
+            setPortalTarget(portalContainer);
+            return () => {
+                portalContainer.remove();
+            };
+        }
+    }, []);
+    const portalElement = ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question for ", qanda_1.PRODUCT_NAME, (0, jsx_runtime_1.jsxs)("div", { onClick: () => dispatch((0, questionSlice_1.openForm)()), className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", children: [(0, jsx_runtime_1.jsx)("span", { className: "embed-form-field__icon", children: (0, jsx_runtime_1.jsx)("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)(portalElement, portalTarget || document.body) });
+}
+exports.default = EmbedFormField;

package/dist/cjs/components/ErrorMessage/humanReadableError.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const baseErrorMessages = {
+    generic: {
+        title: 'An error occurred',
+        message: 'Please try again later.',
+    },
+    serverError: {
+        title: 'Server error',
+        message: 'There was a server error. Please try again later.',
+    },
+    connectionError: {
+        title: 'Connection error',
+        message: 'Check your internet connection or browser settings and try again.',
+    },
+    timeoutError: {
+        title: 'Timeout error',
+        message: 'The request timed out. You may be on a slow connection. Please try again later.',
+    },
+};
+class HumanReadableError {
+    constructor(error, customErrorMessages = {}) {
+        // Default to generic error message
+        this._humanReadableError = baseErrorMessages.generic;
+        this._unMappedError = null;
+        const errorMessages = {
+            ...baseErrorMessages,
+            ...customErrorMessages,
+        };
+        try {
+            if ('status' in error) {
+                if (error.status === 'FETCH_ERROR') {
+                    this._humanReadableError = errorMessages.connectionError;
+                }
+                else if (typeof error.status === 'number' && error.status >= 500) {
+                    this._humanReadableError = errorMessages.serverError;
+                }
+                else if (typeof error.status === 'number' && error.status === 400) {
+                    // Assuming as an error  code otherwise will throw an error and we will fallback to generic error
+                    const typedError = error;
+                    this._humanReadableError =
+                        errorMessages[typedError.data.error.errorCode];
+                }
+            }
+            else if ('name' in error) {
+                if (error.name === 'AbortError') {
+                    this._humanReadableError = errorMessages.timeoutError;
+                }
+            }
+        }
+        catch (err) {
+            // Fallback to generic error message if we cannot parse the error correctly
+            this._humanReadableError = errorMessages.generic;
+            this._unMappedError = {
+                name: err && typeof err === 'object' && 'name' in err
+                    ? String(err.name)
+                    : '',
+                message: err && typeof err === 'object' && 'message' in err
+                    ? String(err.message)
+                    : '',
+            };
+        }
+    }
+    get title() {
+        return this._humanReadableError.title;
+    }
+    get message() {
+        return this._humanReadableError.message;
+    }
+    get unmappedError() {
+        return this._unMappedError;
+    }
+}
+exports.default = HumanReadableError;

package/dist/cjs/components/ErrorMessage/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ErrorMessage;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const MessageBox_1 = __importDefault(require("../MessageBox"));
+const tracking_1 = require("../../utils/tracking");
+const humanReadableError_1 = __importDefault(require("./humanReadableError"));
+const react_1 = require("react");
+const strings_1 = require("../../utils/strings");
+function ErrorMessage({ error, storyId, errorMapping = {}, operation = 'not-specified', id = '', }) {
+    const humanReadableError = new humanReadableError_1.default(error, errorMapping);
+    let errorDetails = [];
+    // If the error is unmapped, we log it for debugging purposes
+    if (humanReadableError.unmappedError) {
+        errorDetails = [
+            {
+                name: 'error_name',
+                value: humanReadableError.unmappedError.name,
+            },
+            {
+                name: 'error_message',
+                value: humanReadableError.unmappedError.message,
+            },
+        ];
+    }
+    else {
+        errorDetails = [
+            {
+                name: 'error',
+                value: (0, strings_1.cleanString)(humanReadableError.title),
+            },
+            {
+                name: 'error_message',
+                value: (0, strings_1.cleanString)(humanReadableError.message),
+            },
+        ];
+    }
+    (0, react_1.useEffect)(() => {
+        // Critical operation are tracked by the reliability service using AWS RUM
+        // We still log this to monitor untracked messages to the users.
+        (0, tracking_1.trackEvent)({
+            content: {
+                uuid: storyId,
+            },
+            trigger_action: operation,
+            custom: [
+                {
+                    name: 'state',
+                    value: 'error',
+                },
+                ...errorDetails,
+            ],
+        });
+        // Ensure trackEvent is only called once
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(MessageBox_1.default, { color: "var(--o3-color-use-case-error)", extraClassNames: "o-message--alert o-message--error", title: humanReadableError.title, text: humanReadableError.message, id: id }));
+}

package/dist/cjs/components/Expander/index.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const react_1 = require("react");
+const o3_button_1 = require("@financial-times/o3-button");
+const tracking_1 = require("../../utils/tracking");
+// Generic debounce function
+function debounce(func, delay) {
+    let timerId;
+    return (...args) => {
+        if (timerId)
+            clearTimeout(timerId);
+        timerId = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+}
+// While comments submitted by Coral UI are always wrapped in paragraphs,
+// comments submitted via our `Ask a question` form are just text.
+// A wrapping paragraph is always needed for the expander to work correctly.
+function EnsureParagraph({ children }) {
+    if (typeof children === 'object' &&
+        children !== null &&
+        'props' in children &&
+        children.props?.structuredContent?.tree?.children?.[0]?.type === 'text') {
+        return (0, jsx_runtime_1.jsx)("p", { children: children });
+    }
+    return children;
+}
+function Expander({ className = '', children = [], expandLabel = 'Expand', collapseLabel = 'Collapse', id, }) {
+    const textRef = (0, react_1.useRef)(null);
+    const [requiresExpander, setExpander] = (0, react_1.useState)(false);
+    const [state, setState] = (0, react_1.useState)('collapsed');
+    const expanderContentID = `expander_content-${id}`;
+    (0, react_1.useEffect)(() => {
+        const checkNeedForExpanderButton = () => {
+            const element = textRef.current;
+            if (!element) {
+                return;
+            }
+            const numberOfCharacters = element.textContent?.length || 300;
+            const windowWidth = window.visualViewport?.width || window.innerWidth || 1200; // Fallback to desktop configuration.
+            // Check if the element's height exceeds 3 lines for mobile or 1 line for above mobile
+            // Note: This need to stay aligned with the CSS for the expander
+            const mobileNumberOfCharacters = 100;
+            const desktopNumberOfCharacters = 200;
+            const characterForExpander = windowWidth <= 490
+                ? mobileNumberOfCharacters
+                : desktopNumberOfCharacters;
+            setExpander(numberOfCharacters > characterForExpander);
+        };
+        const debouncedCheck = debounce(checkNeedForExpanderButton, 250);
+        // Use requestAnimationFrame to ensure layout is complete
+        requestAnimationFrame(checkNeedForExpanderButton);
+        window.addEventListener('resize', debouncedCheck);
+        return () => window.removeEventListener('resize', debouncedCheck);
+    }, [children]); // re-run whenever the children change, although we don't expect it to
+    const label = state === 'expanded' ? collapseLabel : expandLabel;
+    const expandCollapseClass = state === 'expanded' ? 'expander--expanded' : 'expander--collapsed';
+    const componentClassName = `${expandCollapseClass} ${className}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${componentClassName}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `expander__text ${requiresExpander ? 'expander__text--multiline' : ''}`, id: expanderContentID, ref: textRef, children: (0, jsx_runtime_1.jsx)(EnsureParagraph, { children: children }) }), requiresExpander && ((0, jsx_runtime_1.jsx)(o3_button_1.Button, { label: label, type: "ghost", theme: "neutral", icon: state === 'expanded' ? 'chevron-up' : 'chevron-down', iconOnly: false, iconPosition: "end", attributes: {
+                    className: 'expander__link',
+                    'data-trackable': (0, tracking_1.trackingNS)('expander'),
+                    'data-trackable-context-action': label,
+                    'aria-expanded': state === 'expanded' ? true : false,
+                    'aria-controls': expanderContentID,
+                    'data-action': state === 'expanded' ? 'collapse' : 'expand',
+                }, onClick: () => {
+                    setState((prevState) => prevState === 'expanded' ? 'collapsed' : 'expanded');
+                } }))] }));
+}
+exports.default = Expander;

package/dist/cjs/components/ExpertDrawer/index.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const o_comments_1 = __importDefault(require("@financial-times/o-comments"));
+const react_1 = require("react");
+const react_redux_1 = require("react-redux");
+const expertSlice_1 = require("../../store/expertSlice");
+const QandaProvider_1 = require("../QandaProvider");
+const reliability_1 = require("../../services/reliability");
+const Overlay_1 = __importDefault(require("../Overlay"));
+const qanda_1 = require("../../config/qanda");
+function ExpertDrawer() {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const { storyId, useStaging, title } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const { isExpertFormOpen, expertView } = (0, react_redux_1.useSelector)((state) => state.expert);
+    (0, react_1.useEffect)(() => {
+        if (isExpertFormOpen) {
+            try {
+                o_comments_1.default.init();
+            }
+            catch (error) {
+                reliability_1.qandaReliability.failure('expert-load-coral-ui', error);
+            }
+        }
+    }, [isExpertFormOpen]);
+    if (!isExpertFormOpen) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: qanda_1.PRODUCT_NAME, closeCallback: () => dispatch((0, expertSlice_1.closeExpertForm)()), options: {
+            shadow: true,
+            allowInteraction: true,
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: "o-comments", id: "o-comments-stream", "data-o-component": "o-comments", "data-o-comments-article-id": storyId, "data-o-comments-article-url": `https://www.ft.com/content/${storyId}`, "data-o-comments-use-staging-environment": useStaging, "data-o-comments-title": title }) }));
+}
+exports.default = ExpertDrawer;