@financial-times/qanda-ui 0.0.1-beta.20 → 0.0.1-beta.22

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
 

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
+const qanda_1 = require("../../config/qanda");
 function formatDateForIcs(date) {
     return date.replace(/-|:|\.\d+/g, '');
 }
@@ -14,7 +15,7 @@ const CalendarLink = ({ href, children, }) => ((0, jsx_runtime_1.jsx)("a", { hre
 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 Q&A session, visit: ${url}`;
+const description = (url) => `To join the ${qanda_1.PRODUCT_NAME} session, visit: ${url}`;
 const apps = [
     {
         name: 'Gmail',

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

@@ -5,6 +5,7 @@ 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)();
@@ -18,7 +19,7 @@ function EmbedFormField({ container }) {
             };
         }
     }, []);
-    const portalElement = ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question to the Q&A", (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"] })] }));
+    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/ExpertDrawer/index.js

@@ -11,6 +11,7 @@ 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);
@@ -28,7 +29,7 @@ function ExpertDrawer() {
     if (!isExpertFormOpen) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: "Live Q&A", closeCallback: () => dispatch((0, expertSlice_1.closeExpertForm)()), options: {
+    return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: qanda_1.PRODUCT_NAME, closeCallback: () => dispatch((0, expertSlice_1.closeExpertForm)()), options: {
             shadow: true,
             noBackground: 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 }) }));

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

@@ -55,7 +55,8 @@ function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = fal
                 const scale = 1 + 0.04 * factorRef.current;
                 const shadow = interpolateColor(factorRef.current);
                 currentBubble.style.transform = `scale(${scale})`;
-                currentBubble.style.filter = `drop-shadow(0px 2px 8px ${shadow})`;
+                // NB: drop-shadow blur radius is not calculated the same way as box-shadow blur radius, halving it matches
+                currentBubble.style.filter = `drop-shadow(0px 2px 4px ${shadow})`;
                 if (factorRef.current < 0.001 && distanceRatio > 0.95) {
                     currentBubble.removeAttribute('style');
                     currentBubble = null;

package/dist/cjs/components/QandaContainer.js

@@ -19,6 +19,7 @@ const EmbedFormField_1 = __importDefault(require("./EmbedFormField"));
 const QandaProvider_1 = require("./QandaProvider");
 const o_tracking_1 = __importDefault(require("@financial-times/o-tracking"));
 const comments_api_1 = require("../services/comments-api");
+const qanda_1 = require("../config/qanda");
 function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
     const dispatch = (0, react_redux_1.useDispatch)();
@@ -32,13 +33,13 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     const [ariaMessage, setAriaMessage] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
         if (isLoading) {
-            setAriaMessage('Loading Q&A');
+            setAriaMessage(`Loading ${qanda_1.PRODUCT_NAME}`);
         }
         else if (error) {
-            setAriaMessage('Error loading Q&A');
+            setAriaMessage(`Error loading ${qanda_1.PRODUCT_NAME}`);
         }
         else if (data) {
-            setAriaMessage('Q&A stream has been updated');
+            setAriaMessage(`${qanda_1.PRODUCT_NAME} stream has been updated`);
         }
     }, [isLoading, error, data]);
     const updatedQA = (0, comments_api_1.useUpdatedQA)({
@@ -94,6 +95,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             },
         });
     }, [data, status]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, { status: status }), (0, jsx_runtime_1.jsx)(Survey_1.default, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && ((0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer }))] })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load ", qanda_1.PRODUCT_NAME, " at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, { status: status }), (0, jsx_runtime_1.jsx)(Survey_1.default, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && ((0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer }))] })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
 }
 exports.default = QandaContainer;

package/dist/cjs/components/QuestionForm/messagesByUserType.js

@@ -4,13 +4,14 @@ exports.TERMS_AND_CONDITIONS_URL = exports.COMMUNITY_GUIDELINES_URL = exports.SU
 exports.getTitleByUser = getTitleByUser;
 exports.getTextByUser = getTextByUser;
 const jsx_runtime_1 = require("preact/jsx-runtime");
+const qanda_1 = require("../../config/qanda");
 exports.SIGN_IN_URL = 'https://www.ft.com/login';
 exports.SUBSCRIBE_URL = 'https://subs.ft.com/products';
 exports.COMMUNITY_GUIDELINES_URL = 'https://help.ft.com/help/article-queries/commenting-on-an-article/commenting-guidelines';
 exports.TERMS_AND_CONDITIONS_URL = 'https://help.ft.com/help/legal-privacy/terms-conditions';
 function getTitleByUser(profile) {
     if (profile.isSubscribed) {
-        return 'Q&A guidelines';
+        return `${qanda_1.PRODUCT_NAME} guidelines`;
     }
     if (profile.isTrialist) {
         return 'You are still on a trial period';

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

@@ -28,9 +28,9 @@ function Stream({ status = 'pre-live' }) {
         const element = document.getElementById(latestAnsweredQuestionId);
         element?.scrollIntoView({ behavior: 'smooth' });
     }, [latestAnsweredQuestionId]);
-    return ((0, jsx_runtime_1.jsxs)("section", { className: "qanda__stream", children: [(0, jsx_runtime_1.jsx)("h2", { className: "o3-type-title-md qanda__stream-title", children: data && data.status && data.status === 'pre-live'
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "qanda__stream", children: [data && data.qandas.length > 0 && ((0, jsx_runtime_1.jsx)("h2", { className: "o3-type-title-md qanda__stream-title", children: data.status && data.status === 'pre-live'
                     ? 'Top questions so far'
-                    : 'What our readers are asking' }), (0, jsx_runtime_1.jsxs)("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", "aria-busy": isLoading, children: [isLoading && ((0, jsx_runtime_1.jsx)(Loader_1.default, { theme: "dark", extraClassNames: "qanda__stream-loader" })), error && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error, storyId: storyId, operation: "loading-stream" })), data &&
+                    : 'What our readers are asking' })), (0, jsx_runtime_1.jsxs)("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", "aria-busy": isLoading, children: [isLoading && ((0, jsx_runtime_1.jsx)(Loader_1.default, { theme: "dark", extraClassNames: "qanda__stream-loader" })), error && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error, storyId: storyId, operation: "loading-stream" })), data &&
                         data.qandas &&
                         data.qandas.map((qandaBlock) => ((0, jsx_runtime_1.jsx)(index_1.default, { id: qandaBlock.id, body: qandaBlock.body, type: "comment", publishedDate: qandaBlock.publishedDate, author: qandaBlock.author, byline: qandaBlock.byline, showAnswerTime: data.status === 'live', children: qandaBlock.children }, qandaBlock.id)))] })] }));
 }

package/dist/cjs/config/qanda.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PRODUCT_NAME = void 0;
+// This file contains configuration settings for the Q&A (AKA Ask an Expert) features of the application.
+// User facing product name
+exports.PRODUCT_NAME = 'Ask an Expert';

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { PRODUCT_NAME } from '../../config/qanda';
 function formatDateForIcs(date) {
     return date.replace(/-|:|\.\d+/g, '');
 }
@@ -12,7 +13,7 @@ const CalendarLink = ({ href, children, }) => (_jsx("a", { href: href, target: "
 function itemChildren(name, icon) {
     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 })] }));
 }
-const description = (url) => `To join the Q&A session, visit: ${url}`;
+const description = (url) => `To join the ${PRODUCT_NAME} session, visit: ${url}`;
 const apps = [
     {
         name: 'Gmail',

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

@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux';
 import { openForm } from '../../store/questionSlice';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { PRODUCT_NAME } from '../../config/qanda';
 function EmbedFormField({ container }) {
     const dispatch = useDispatch();
     const [portalTarget, setPortalTarget] = useState();
@@ -16,7 +17,7 @@ function EmbedFormField({ container }) {
             };
         }
     }, []);
-    const portalElement = (_jsxs("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question to the Q&A", _jsxs("div", { onClick: () => dispatch(openForm()), className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", children: [_jsx("span", { className: "embed-form-field__icon", children: _jsx("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
+    const portalElement = (_jsxs("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question for ", PRODUCT_NAME, _jsxs("div", { onClick: () => dispatch(openForm()), className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", children: [_jsx("span", { className: "embed-form-field__icon", children: _jsx("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
     return _jsx(_Fragment, { children: createPortal(portalElement, portalTarget || document.body) });
 }
 export default EmbedFormField;

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

@@ -6,6 +6,7 @@ import { closeExpertForm } from '../../store/expertSlice';
 import { QandaContext } from '../QandaProvider';
 import { qandaReliability } from '../../services/reliability';
 import Overlay from '../Overlay';
+import { PRODUCT_NAME } from '../../config/qanda';
 function ExpertDrawer() {
     const dispatch = useDispatch();
     const { storyId, useStaging, title } = useContext(QandaContext);
@@ -23,7 +24,7 @@ function ExpertDrawer() {
     if (!isExpertFormOpen) {
         return null;
     }
-    return (_jsx(Overlay, { title: "Live Q&A", closeCallback: () => dispatch(closeExpertForm()), options: {
+    return (_jsx(Overlay, { title: PRODUCT_NAME, closeCallback: () => dispatch(closeExpertForm()), options: {
             shadow: true,
             noBackground: true,
         }, children: _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 }) }));

package/dist/esm/components/QandaBlock/index.js

@@ -50,7 +50,8 @@ function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = fal
                 const scale = 1 + 0.04 * factorRef.current;
                 const shadow = interpolateColor(factorRef.current);
                 currentBubble.style.transform = `scale(${scale})`;
-                currentBubble.style.filter = `drop-shadow(0px 2px 8px ${shadow})`;
+                // NB: drop-shadow blur radius is not calculated the same way as box-shadow blur radius, halving it matches
+                currentBubble.style.filter = `drop-shadow(0px 2px 4px ${shadow})`;
                 if (factorRef.current < 0.001 && distanceRatio > 0.95) {
                     currentBubble.removeAttribute('style');
                     currentBubble = null;

package/dist/esm/components/QandaContainer.js

@@ -14,6 +14,7 @@ import EmbedFormField from './EmbedFormField';
 import { QandaContext } from './QandaProvider';
 import oTracking from '@financial-times/o-tracking';
 import { useGetQandAStreamQuery, useUpdatedQA, useGetUserRolesQuery, nextCommentsApi, } from '../services/comments-api';
+import { PRODUCT_NAME } from '../config/qanda';
 function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
     const dispatch = useDispatch();
@@ -27,13 +28,13 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     const [ariaMessage, setAriaMessage] = useState('');
     useEffect(() => {
         if (isLoading) {
-            setAriaMessage('Loading Q&A');
+            setAriaMessage(`Loading ${PRODUCT_NAME}`);
         }
         else if (error) {
-            setAriaMessage('Error loading Q&A');
+            setAriaMessage(`Error loading ${PRODUCT_NAME}`);
         }
         else if (data) {
-            setAriaMessage('Q&A stream has been updated');
+            setAriaMessage(`${PRODUCT_NAME} stream has been updated`);
         }
     }, [isLoading, error, data]);
     const updatedQA = useUpdatedQA({
@@ -89,6 +90,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             },
         });
     }, [data, status]);
-    return (_jsxs("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && (_jsxs("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [showExpertView ? _jsx(ExpertDrawer, {}) : _jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, { status: status }), _jsx(Survey, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && (_jsx(FloatingActionBar, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && (_jsx(EmbedFormField, { container: embedFormFieldContainer }))] })), _jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
+    return (_jsxs("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && (_jsxs("p", { children: ["We are not able to load ", PRODUCT_NAME, " at the moment. Please try again later. Error:", error] })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [showExpertView ? _jsx(ExpertDrawer, {}) : _jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, { status: status }), _jsx(Survey, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && (_jsx(FloatingActionBar, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && (_jsx(EmbedFormField, { container: embedFormFieldContainer }))] })), _jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
 }
 export default QandaContainer;

package/dist/esm/components/QuestionForm/messagesByUserType.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { PRODUCT_NAME } from '../../config/qanda';
 export const SIGN_IN_URL = 'https://www.ft.com/login';
 export const SUBSCRIBE_URL = 'https://subs.ft.com/products';
 export const COMMUNITY_GUIDELINES_URL = 'https://help.ft.com/help/article-queries/commenting-on-an-article/commenting-guidelines';
 export const TERMS_AND_CONDITIONS_URL = 'https://help.ft.com/help/legal-privacy/terms-conditions';
 export function getTitleByUser(profile) {
     if (profile.isSubscribed) {
-        return 'Q&A guidelines';
+        return `${PRODUCT_NAME} guidelines`;
     }
     if (profile.isTrialist) {
         return 'You are still on a trial period';

package/dist/esm/components/Stream/index.js

@@ -23,9 +23,9 @@ function Stream({ status = 'pre-live' }) {
         const element = document.getElementById(latestAnsweredQuestionId);
         element?.scrollIntoView({ behavior: 'smooth' });
     }, [latestAnsweredQuestionId]);
-    return (_jsxs("section", { className: "qanda__stream", children: [_jsx("h2", { className: "o3-type-title-md qanda__stream-title", children: data && data.status && data.status === 'pre-live'
+    return (_jsxs("section", { className: "qanda__stream", children: [data && data.qandas.length > 0 && (_jsx("h2", { className: "o3-type-title-md qanda__stream-title", children: data.status && data.status === 'pre-live'
                     ? 'Top questions so far'
-                    : 'What our readers are asking' }), _jsxs("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", "aria-busy": isLoading, children: [isLoading && (_jsx(Loader, { theme: "dark", extraClassNames: "qanda__stream-loader" })), error && (_jsx(ErrorMessage, { error: error, storyId: storyId, operation: "loading-stream" })), data &&
+                    : 'What our readers are asking' })), _jsxs("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", "aria-busy": isLoading, children: [isLoading && (_jsx(Loader, { theme: "dark", extraClassNames: "qanda__stream-loader" })), error && (_jsx(ErrorMessage, { error: error, storyId: storyId, operation: "loading-stream" })), data &&
                         data.qandas &&
                         data.qandas.map((qandaBlock) => (_jsx(QandaBlock, { id: qandaBlock.id, body: qandaBlock.body, type: "comment", publishedDate: qandaBlock.publishedDate, author: qandaBlock.author, byline: qandaBlock.byline, showAnswerTime: data.status === 'live', children: qandaBlock.children }, qandaBlock.id)))] })] }));
 }

package/dist/esm/config/qanda.js

@@ -0,0 +1,3 @@
+// This file contains configuration settings for the Q&A (AKA Ask an Expert) features of the application.
+// User facing product name
+export const PRODUCT_NAME = 'Ask an Expert';

package/dist/qanda.scss

@@ -507,7 +507,7 @@ $app-header-color: #007acc;
 
 :root {
   --speech-triangle-width: 24px;
-  --speech-triangle-height: 16px;
+  --speech-triangle-height: 17px;
 }
 
 .qanda-container {
@@ -520,7 +520,7 @@ $app-header-color: #007acc;
   .qanda-block__comment {
     padding: var(--o3-spacing-s) var(--o3-spacing-2xs);
     position: relative;
-    filter: drop-shadow(0px 2px 8px #ccc1b7);
+    filter: drop-shadow(0 1px 2px var(--o3-color-palette-black-20, #ccc1b7));
     will-change: filter;
   }
 
@@ -537,7 +537,7 @@ $app-header-color: #007acc;
   .qanda-block__question::after {
     content: '';
     position: absolute;
-    bottom: calc(var(--speech-triangle-height) * -1);
+    bottom: calc(var(--speech-triangle-height) * -1 + 1px);
     right: 0;
     border-left: var(--speech-triangle-width) solid transparent;
     border-top: var(--speech-triangle-height) solid
@@ -547,7 +547,7 @@ $app-header-color: #007acc;
   .qanda-block__answer::before {
     content: '';
     position: absolute;
-    top: calc(var(--speech-triangle-height) * -1);
+    top: calc(var(--speech-triangle-height) * -1 + 1px);
     left: 0;
     border-right: var(--speech-triangle-width) solid transparent;
     border-bottom: var(--speech-triangle-height) solid

package/dist/types/components/QuestionForm/messagesByUserType.d.ts

@@ -3,5 +3,5 @@ export declare const SIGN_IN_URL = "https://www.ft.com/login";
 export declare const SUBSCRIBE_URL = "https://subs.ft.com/products";
 export declare const COMMUNITY_GUIDELINES_URL = "https://help.ft.com/help/article-queries/commenting-on-an-article/commenting-guidelines";
 export declare const TERMS_AND_CONDITIONS_URL = "https://help.ft.com/help/legal-privacy/terms-conditions";
-export declare function getTitleByUser(profile: UserDetails): "Q&A guidelines" | "You are still on a trial period" | "Asking a question is only available to readers with an FT subscription";
+export declare function getTitleByUser(profile: UserDetails): "Ask an Expert guidelines" | "You are still on a trial period" | "Asking a question is only available to readers with an FT subscription";
 export declare function getTextByUser(profile: UserDetails): import("preact").JSX.Element;

package/dist/types/config/qanda.d.ts

@@ -0,0 +1 @@
+export declare const PRODUCT_NAME = "Ask an Expert";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "0.0.1-beta.20",
-  "description": "Components for the Live Q&A UI",
+  "version": "0.0.1-beta.22",
+  "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",