@financial-times/qanda-ui 0.0.1-beta.24 → 0.0.1-beta.26

package/README.md

@@ -94,7 +94,7 @@ import QandaBlock from '@financial-times/qanda-ui';
   body={body}
   children={answers}
   byline={byeline}
-  subtitle={lorem}
+  summary={lorem}
 />;
 ```
 

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

@@ -2,6 +2,7 @@
 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, '');
 }
@@ -11,7 +12,9 @@ function createIcsFile(title, startDateTime, endDateTime, url) {
   `.trim();
     return URL.createObjectURL(new Blob([icsContent], { type: 'title/calendar' }));
 }
-const CalendarLink = ({ href, children, }) => ((0, jsx_runtime_1.jsx)("a", { href: href, target: "_blank", rel: "noopener noreferrer", role: "menuitem", "data-trackable": "liveqa_calendar-link", className: "live-qa-calendar-list__item__link", children: children }));
+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 })] }));
 }
@@ -44,6 +47,6 @@ exports.default = apps.map(({ name, icon, getLink, isDownload }) => ({
     icon,
     link: ({ title, startDateTime, endDateTime, url, }) => {
         const href = getLink({ title, startDateTime, endDateTime, url });
-        return isDownload ? ((0, jsx_runtime_1.jsx)("a", { href: href, download: "event.ics", role: "menuitem", "data-trackable": "liveqa_calendar-link", className: "live-qa-calendar-list__item__link", children: itemChildren(name, icon) })) : ((0, jsx_runtime_1.jsx)(CalendarLink, { href: href, children: itemChildren(name, icon) }));
+        return isDownload ? ((0, jsx_runtime_1.jsx)("a", { href: href, download: "event.ics", role: "menuitem", "data-trackable": (0, tracking_1.trackingNS)('calendar-link-download'), className: "live-qa-calendar-list__item__link", children: itemChildren(name, icon) })) : ((0, jsx_runtime_1.jsx)(CalendarLink, { href: href, children: itemChildren(name, icon) }));
     },
 }));

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

@@ -9,6 +9,7 @@ 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);
@@ -41,7 +42,7 @@ function Calendar() {
                         'aria-controls': 'menu',
                         id: 'live-qa-calendar-button-menu',
                         'data-testid': 'live-qa-calendar-button',
-                        'data-trackable': 'liveqa_add-to-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/ErrorMessage/index.js

@@ -42,10 +42,7 @@ function ErrorMessage({ error, storyId, errorMapping = {}, operation = 'not-spec
         // 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)({
-            category: 'component',
-            action: 'act',
             content: {
-                asset_type: 'article',
                 uuid: storyId,
             },
             trigger_action: operation,

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

@@ -3,6 +3,7 @@ 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;
@@ -59,7 +60,7 @@ function Expander({ className = '', children = [], expandLabel = 'Expand', colla
     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': `liveqa_expander`,
+                    'data-trackable': (0, tracking_1.trackingNS)('expander'),
                     'data-trackable-context-action': label,
                     'aria-expanded': state === 'expanded' ? true : false,
                     'aria-controls': expanderContentID,

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

@@ -10,6 +10,7 @@ const comments_api_1 = require("../../services/comments-api");
 const updateComments_1 = require("../../store/updateComments");
 const react_1 = require("react");
 const QandaProvider_1 = require("../QandaProvider");
+const tracking_1 = require("../../utils/tracking");
 function LiveIndicator() {
     return ((0, jsx_runtime_1.jsx)("div", { className: "o-labels-indicator--live o3-type-label floating-action-bar__live-container", children: (0, jsx_runtime_1.jsx)("span", { className: "o-labels-indicator__status floating-action-bar__live-label", children: "Live" }) }));
 }
@@ -44,14 +45,14 @@ function FloatingActionBar({ showLiveIndicator = true, }) {
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__container", "data-trackable": "floating-action-bar", children: [(0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__fade-overlay" }), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [showLiveIndicator && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__container", "data-trackable": (0, tracking_1.trackingNS)('floating-action-bar'), children: [(0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__fade-overlay" }), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [showLiveIndicator && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
                                     ariaLabel: view.descripton,
-                                    'data-trackable': view.dataTrackable,
+                                    'data-trackable': (0, tracking_1.trackingNS)(view.dataTrackable),
                                     'data-trackable-context-action': view.descripton,
                                     'data-testid': `floating-action-bar__${view.testIdSuffix}`,
                                 }, label: view.descripton, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
                                     ariaLabel: 'Back to top',
-                                    'data-trackable': 'back_to_top',
+                                    'data-trackable': (0, tracking_1.trackingNS)('back_to_top'),
                                     'data-trackable-context-action': 'Back to top',
                                     'data-testid': 'floating-action-bar__back-to-top-button',
                                 }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__updates-counter o3-type-detail", children: updatedComments.length }))] })] }));

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

@@ -10,6 +10,7 @@ require("../Expander/index");
 const index_1 = __importDefault(require("../Expander/index"));
 const Author_1 = __importDefault(require("../Author"));
 const react_1 = require("react");
+const tracking_1 = require("../../utils/tracking");
 function renderTime(publishedDate) {
     const date = new Date(publishedDate);
     return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
@@ -23,7 +24,7 @@ function interpolateColor(factor, colorStart = 'ccc1b7', colorEnd = '4d4845', al
     const alpha = alphaStart + factor * (alphaEnd - alphaStart);
     return `rgba(${rgb.join(', ')}, ${alpha})`;
 }
-function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = false, }) {
+function QandaBlock({ id, body, children, byline, summary, showAnswerTime = false, }) {
     (0, react_1.useEffect)(() => {
         let currentBubble = null;
         const factorRef = { current: 0 };
@@ -73,6 +74,6 @@ function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = fal
             observer.disconnect();
         };
     }, []);
-    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": "liveqa_question", children: [subtitle && ((0, jsx_runtime_1.jsx)("div", { className: "o3-type-headline-sm qanda-block__question-subtitle", children: subtitle })), (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": "liveqa_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)))] }));
+    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)))] }));
 }
 exports.default = QandaBlock;

package/dist/cjs/components/QandaContainer.js

@@ -20,10 +20,10 @@ 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");
+const tracking_1 = require("../utils/tracking");
 function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
     const dispatch = (0, react_redux_1.useDispatch)();
-    const [liveMessage, setLiveMessage] = (0, react_1.useState)('');
     const { data, error, isLoading } = (0, comments_api_1.useGetQandAStreamQuery)({
         storyId,
         useStaging,
@@ -76,15 +76,7 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             selector: '.qanda-container',
             getContextData: () => {
                 return {
-                    component: {
-                        name: 'liveqa',
-                        type: 'container',
-                        id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
-                    },
-                    content: {
-                        asset_type: 'article',
-                        uuid: storyId,
-                    },
+                    ...tracking_1.baseTrackingData,
                     custom: [
                         {
                             name: 'status',
@@ -95,6 +87,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 ", 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 })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", 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/index.js

@@ -78,8 +78,9 @@ function QuestionForm() {
             if (updatedProfile?.displayName) {
                 // NB: we are using a component act event as analytics team can only support existing categories and actions at this time
                 (0, tracking_1.trackEvent)({
-                    category: 'component',
-                    action: 'act',
+                    content: {
+                        uuid: storyId,
+                    },
                     trigger_action: 'success_set_displayname',
                 });
             }
@@ -113,13 +114,13 @@ function QuestionForm() {
     (0, jsx_runtime_1.jsxs)(Overlay_1.default, { title: "Ask a question", closeCallback: () => {
             setNewDisplayName(null);
             dispatch((0, questionSlice_1.closeForm)());
-        }, children: [profile.isSubscribed && ((0, jsx_runtime_1.jsx)("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, "data-trackable": `liveqa_submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [(0, jsx_runtime_1.jsx)("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), profile.displayName] }) })), !profile?.displayName && ((0, jsx_runtime_1.jsxs)("label", { for: "display-name", className: "question-form__displayname-input o-forms-field", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)([
+        }, children: [profile.isSubscribed && ((0, jsx_runtime_1.jsx)("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, "data-trackable": (0, tracking_1.trackingNS)(`submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`), children: [(0, jsx_runtime_1.jsxs)("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [(0, jsx_runtime_1.jsx)("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), profile.displayName] }) })), !profile?.displayName && ((0, jsx_runtime_1.jsxs)("label", { for: "display-name", className: "question-form__displayname-input o-forms-field", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)([
                                                 'question-form__displayname__input',
                                                 'o-forms-input',
                                                 'o-forms-input--text',
                                                 { 'o-forms-input--invalid': !!displayNameError },
                                             ]), children: [(0, jsx_runtime_1.jsx)("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-invalid": displayNameError ? 'true' : 'false', "aria-errormessage": displayNameError ??
-                                                        'question_form__displayname-error-message' }), displayNameError && ((0, jsx_runtime_1.jsx)("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: (0, jsx_runtime_1.jsx)("span", { children: displayNameError }) }))] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o-forms-field", children: (0, jsx_runtime_1.jsxs)("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": `question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}` }), (0, jsx_runtime_1.jsx)("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), (0, jsx_runtime_1.jsxs)("label", { for: "question-text", class: "o-forms-field question-form__question__input", children: [(0, jsx_runtime_1.jsx)("span", { class: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { class: "o3-type-body-highlight", children: "Enter your question" }) }), (0, jsx_runtime_1.jsx)("span", { class: "o-forms-input o-forms-input--textarea", children: (0, jsx_runtime_1.jsx)("textarea", { id: "question-text", name: "question", value: question, onChange: (e) => dispatch((0, questionSlice_1.updateQuestion)(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }) })] }), (0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: "Questions must be at least 20 characters long." }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+                                                        'question_form__displayname-error-message' }), displayNameError && ((0, jsx_runtime_1.jsx)("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: (0, jsx_runtime_1.jsx)("span", { children: displayNameError }) }))] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o-forms-field", children: (0, jsx_runtime_1.jsxs)("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": (0, tracking_1.trackingNS)(`question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}`) }), (0, jsx_runtime_1.jsx)("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), (0, jsx_runtime_1.jsxs)("label", { for: "question-text", class: "o-forms-field question-form__question__input", children: [(0, jsx_runtime_1.jsx)("span", { class: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { class: "o3-type-body-highlight", children: "Enter your question" }) }), (0, jsx_runtime_1.jsx)("span", { class: "o-forms-input o-forms-input--textarea", children: (0, jsx_runtime_1.jsx)("textarea", { id: "question-text", name: "question", value: question, onChange: (e) => dispatch((0, questionSlice_1.updateQuestion)(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }) })] }), (0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: "Questions must be at least 20 characters long." }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
                                 className: 'overlay__submit-button',
                                 type: 'submit',
                                 disabled: !submitEnabled,

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

@@ -5,6 +5,7 @@ exports.getTitleByUser = getTitleByUser;
 exports.getTextByUser = getTextByUser;
 const jsx_runtime_1 = require("preact/jsx-runtime");
 const qanda_1 = require("../../config/qanda");
+const tracking_1 = require("../../utils/tracking");
 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';
@@ -21,14 +22,14 @@ function getTitleByUser(profile) {
 }
 function getTextByUser(profile) {
     if (profile.isSubscribed) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Keep your comments respectful and easy to understand for our global audience. By submitting, you agree to follow our", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__community-guidelines", "data-trackable-context-action": "Community guidelines", href: exports.COMMUNITY_GUIDELINES_URL, target: "_parent", children: "community guidelines" }), ' ', "and", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__terms-and-conditions", "data-trackable-context-action": "Terms and conditions", href: exports.TERMS_AND_CONDITIONS_URL, target: "_parent", children: "terms" }), "."] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Keep your comments respectful and easy to understand for our global audience. By submitting, you agree to follow our", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__community-guidelines'), "data-trackable-context-action": "Community guidelines", href: exports.COMMUNITY_GUIDELINES_URL, target: "_parent", children: "community guidelines" }), ' ', "and", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__terms-and-conditions'), "data-trackable-context-action": "Terms and conditions", href: exports.TERMS_AND_CONDITIONS_URL, target: "_parent", children: "terms" }), "."] }));
     }
     if (profile.isTrialist) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["View our full", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-trialist", "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "subscription packages" }), ' ', "to join the conversation."] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["View our full", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__subscribe-trialist'), "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "subscription packages" }), ' ', "to join the conversation."] }));
     }
     if (profile.isRegistered) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-registered", "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "Subscribe" }), ' ', "to join the conversation."] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__subscribe-registered'), "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "Subscribe" }), ' ', "to join the conversation."] }));
     }
     // Anonymous users
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Please", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__sign-in-anonymous", "data-trackable-context-action": "Sign in", href: exports.SIGN_IN_URL, target: "_parent", children: "sign in" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-anonymous", "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "subscribe" }), ' ', "to join the conversation."] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Please", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__sign-in-anonymous'), "data-trackable-context-action": "Sign in", href: exports.SIGN_IN_URL, target: "_parent", children: "sign in" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__subscribe-anonymous'), "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "subscribe" }), ' ', "to join the conversation."] }));
 }

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

@@ -1,36 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
+const tracking_1 = require("../../utils/tracking");
 function Survey({ storyId, status }) {
-    const trackEvent = (trackingData) => {
-        const event = new CustomEvent('oTracking.event', {
-            detail: trackingData,
-            bubbles: true,
-        });
-        document.body.dispatchEvent(event);
-    };
-    const handleClick = () => {
-        trackEvent({
-            category: 'component',
-            component: {
-                name: 'liveqa',
-                type: 'container',
-                id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
-            },
-            action: 'act',
-            trigger_action: 'liveqa_survey_open',
-            content: {
-                asset_type: 'article',
-                uuid: storyId,
-            },
-            custom: [
-                {
-                    name: 'status',
-                    value: status,
-                },
-            ],
-        });
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "o-message o-message--action o-message--inform o-message--survey", style: { marginBottom: 'var(--o3-spacing-l)' }, "data-o-message-close": "false", "data-o-component": "o-message", children: (0, jsx_runtime_1.jsx)("div", { className: "o-message__container", children: (0, jsx_runtime_1.jsxs)("div", { className: "o-message__content", children: [(0, jsx_runtime_1.jsx)("p", { className: "o-message__content-main", style: { fontSize: 'var(--o3-type-body-base-font-size)' }, children: "How was your experience?" }), (0, jsx_runtime_1.jsx)("div", { className: "o-message__actions", children: (0, jsx_runtime_1.jsx)("a", { href: `https://www.feedback.ft.com/c/a/6HTDVvrHSyaKLZ5281McAo?content_id=${storyId}&qa_status=${status}`, onClick: handleClick, className: "o-message__actions__primary", "data-trackable": "liveqa_survey_link", children: "Share your feedback" }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "o-message o-message--action o-message--inform o-message--survey", style: { marginBottom: 'var(--o3-spacing-l)' }, "data-o-message-close": "false", "data-o-component": "o-message", children: (0, jsx_runtime_1.jsx)("div", { className: "o-message__container", children: (0, jsx_runtime_1.jsxs)("div", { className: "o-message__content", children: [(0, jsx_runtime_1.jsx)("p", { className: "o-message__content-main", style: { fontSize: 'var(--o3-type-body-base-font-size)' }, children: "How was your experience?" }), (0, jsx_runtime_1.jsx)("div", { className: "o-message__actions", children: (0, jsx_runtime_1.jsx)("a", { href: `https://www.feedback.ft.com/c/a/6HTDVvrHSyaKLZ5281McAo?content_id=${storyId}&qa_status=${status}`, className: "o-message__actions__primary", "data-trackable": (0, tracking_1.trackingNS)('survey_link'), children: "Share your feedback" }) })] }) }) }));
 }
 exports.default = Survey;

package/dist/cjs/utils/tracking.js

@@ -1,7 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.trackEvent = void 0;
-const trackEvent = (trackingData) => {
+exports.trackEvent = exports.baseTrackingData = void 0;
+exports.trackingNS = trackingNS;
+const trackingNamespace = 'askanexpert_';
+function trackingNS(string) {
+    return trackingNamespace + string;
+}
+exports.baseTrackingData = {
+    category: 'component',
+    action: 'act',
+    component: {
+        name: 'askanexpert',
+        type: 'container',
+        id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
+    },
+    content: {
+        asset_type: 'article',
+    },
+};
+const trackEvent = (customTrackingData) => {
+    // Merge the base tracking data with the provided tracking data
+    const trackingData = {
+        ...exports.baseTrackingData,
+        ...customTrackingData,
+        trigger_action: trackingNamespace + customTrackingData.trigger_action,
+    };
     const event = new CustomEvent('oTracking.event', {
         detail: trackingData,
         bubbles: true,

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
 import { PRODUCT_NAME } from '../../config/qanda';
+import { trackingNS } from '../../utils/tracking';
 function formatDateForIcs(date) {
     return date.replace(/-|:|\.\d+/g, '');
 }
@@ -9,7 +10,9 @@ function createIcsFile(title, startDateTime, endDateTime, url) {
   `.trim();
     return URL.createObjectURL(new Blob([icsContent], { type: 'title/calendar' }));
 }
-const CalendarLink = ({ href, children, }) => (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", role: "menuitem", "data-trackable": "liveqa_calendar-link", className: "live-qa-calendar-list__item__link", children: children }));
+const CalendarLink = ({ href, children, }) => {
+    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 }));
+};
 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 })] }));
 }
@@ -42,6 +45,6 @@ export default apps.map(({ name, icon, getLink, isDownload }) => ({
     icon,
     link: ({ title, startDateTime, endDateTime, url, }) => {
         const href = getLink({ title, startDateTime, endDateTime, url });
-        return isDownload ? (_jsx("a", { href: href, download: "event.ics", role: "menuitem", "data-trackable": "liveqa_calendar-link", className: "live-qa-calendar-list__item__link", children: itemChildren(name, icon) })) : (_jsx(CalendarLink, { href: href, children: itemChildren(name, icon) }));
+        return isDownload ? (_jsx("a", { href: href, download: "event.ics", role: "menuitem", "data-trackable": trackingNS('calendar-link-download'), className: "live-qa-calendar-list__item__link", children: itemChildren(name, icon) })) : (_jsx(CalendarLink, { href: href, children: itemChildren(name, icon) }));
     },
 }));

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

@@ -4,6 +4,7 @@ import { useState, useRef, useEffect, useContext } from 'react';
 import CalendarList from './CalendarList';
 import { useGetQandAStreamQuery } from '../../services/comments-api';
 import { QandaContext } from '../QandaProvider';
+import { trackingNS } from '../../utils/tracking';
 function Calendar() {
     const [dropDownVisible, setDropDownVisible] = useState(false);
     const containerRef = useRef(null);
@@ -36,7 +37,7 @@ function Calendar() {
                         'aria-controls': 'menu',
                         id: 'live-qa-calendar-button-menu',
                         'data-testid': 'live-qa-calendar-button',
-                        'data-trackable': 'liveqa_add-to-calendar-button',
+                        'data-trackable': trackingNS('add-to-calendar-button'),
                     }, onClick: () => setDropDownVisible(!dropDownVisible) }), dropDownVisible && _jsx(CalendarList, {})] })) }));
 }
 export default Calendar;

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

@@ -36,10 +36,7 @@ export default function ErrorMessage({ error, storyId, errorMapping = {}, operat
         // Critical operation are tracked by the reliability service using AWS RUM
         // We still log this to monitor untracked messages to the users.
         trackEvent({
-            category: 'component',
-            action: 'act',
             content: {
-                asset_type: 'article',
                 uuid: storyId,
             },
             trigger_action: operation,

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
 import { Button } from '@financial-times/o3-button';
+import { trackingNS } from '../../utils/tracking';
 // Generic debounce function
 function debounce(func, delay) {
     let timerId;
@@ -57,7 +58,7 @@ function Expander({ className = '', children = [], expandLabel = 'Expand', colla
     const componentClassName = `${expandCollapseClass} ${className}`;
     return (_jsxs("div", { className: `${componentClassName}`, children: [_jsx("div", { className: `expander__text ${requiresExpander ? 'expander__text--multiline' : ''}`, id: expanderContentID, ref: textRef, children: _jsx(EnsureParagraph, { children: children }) }), requiresExpander && (_jsx(Button, { label: label, type: "ghost", theme: "neutral", icon: state === 'expanded' ? 'chevron-up' : 'chevron-down', iconOnly: false, iconPosition: "end", attributes: {
                     className: 'expander__link',
-                    'data-trackable': `liveqa_expander`,
+                    'data-trackable': trackingNS('expander'),
                     'data-trackable-context-action': label,
                     'aria-expanded': state === 'expanded' ? true : false,
                     'aria-controls': expanderContentID,

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

@@ -8,6 +8,7 @@ import { useUpdatedComments } from '../../services/comments-api';
 import { updateComments } from '../../store/updateComments';
 import { useContext } from 'react';
 import { QandaContext } from '../QandaProvider';
+import { trackingNS } from '../../utils/tracking';
 function LiveIndicator() {
     return (_jsx("div", { className: "o-labels-indicator--live o3-type-label floating-action-bar__live-container", children: _jsx("span", { className: "o-labels-indicator__status floating-action-bar__live-label", children: "Live" }) }));
 }
@@ -42,14 +43,14 @@ function FloatingActionBar({ showLiveIndicator = true, }) {
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    return (_jsxs("div", { className: "floating-action-bar__container", "data-trackable": "floating-action-bar", children: [_jsx("div", { className: "floating-action-bar__fade-overlay" }), _jsxs("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [showLiveIndicator && _jsx(LiveIndicator, {}), _jsxs("div", { className: "floating-action-bar__buttons", children: [_jsx(Button, { attributes: {
+    return (_jsxs("div", { className: "floating-action-bar__container", "data-trackable": trackingNS('floating-action-bar'), children: [_jsx("div", { className: "floating-action-bar__fade-overlay" }), _jsxs("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [showLiveIndicator && _jsx(LiveIndicator, {}), _jsxs("div", { className: "floating-action-bar__buttons", children: [_jsx(Button, { attributes: {
                                     ariaLabel: view.descripton,
-                                    'data-trackable': view.dataTrackable,
+                                    'data-trackable': trackingNS(view.dataTrackable),
                                     'data-trackable-context-action': view.descripton,
                                     'data-testid': `floating-action-bar__${view.testIdSuffix}`,
                                 }, label: view.descripton, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), _jsx(Button, { attributes: {
                                     ariaLabel: 'Back to top',
-                                    'data-trackable': 'back_to_top',
+                                    'data-trackable': trackingNS('back_to_top'),
                                     'data-trackable-context-action': 'Back to top',
                                     'data-testid': 'floating-action-bar__back-to-top-button',
                                 }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && (_jsx("div", { className: "floating-action-bar__updates-counter o3-type-detail", children: updatedComments.length }))] })] }));

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

@@ -5,6 +5,7 @@ import '../Expander/index';
 import Expander from '../Expander/index';
 import Author from '../Author';
 import { useEffect } from 'react';
+import { trackingNS } from '../../utils/tracking';
 function renderTime(publishedDate) {
     const date = new Date(publishedDate);
     return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
@@ -18,7 +19,7 @@ function interpolateColor(factor, colorStart = 'ccc1b7', colorEnd = '4d4845', al
     const alpha = alphaStart + factor * (alphaEnd - alphaStart);
     return `rgba(${rgb.join(', ')}, ${alpha})`;
 }
-function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = false, }) {
+function QandaBlock({ id, body, children, byline, summary, showAnswerTime = false, }) {
     useEffect(() => {
         let currentBubble = null;
         const factorRef = { current: 0 };
@@ -68,6 +69,6 @@ function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = fal
             observer.disconnect();
         };
     }, []);
-    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": "liveqa_question", children: [subtitle && (_jsx("div", { className: "o3-type-headline-sm qanda-block__question-subtitle", children: subtitle })), _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": "liveqa_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)))] }));
+    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)))] }));
 }
 export default QandaBlock;

package/dist/esm/components/QandaContainer.js

@@ -15,10 +15,10 @@ 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';
+import { baseTrackingData } from '../utils/tracking';
 function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
     const dispatch = useDispatch();
-    const [liveMessage, setLiveMessage] = useState('');
     const { data, error, isLoading } = useGetQandAStreamQuery({
         storyId,
         useStaging,
@@ -71,15 +71,7 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             selector: '.qanda-container',
             getContextData: () => {
                 return {
-                    component: {
-                        name: 'liveqa',
-                        type: 'container',
-                        id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
-                    },
-                    content: {
-                        asset_type: 'article',
-                        uuid: storyId,
-                    },
+                    ...baseTrackingData,
                     custom: [
                         {
                             name: 'status',
@@ -90,6 +82,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 ", 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 })] }));
+    return (_jsxs("div", { className: "qanda-container", 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/index.js

@@ -13,7 +13,7 @@ import ErrorMessage from '../ErrorMessage';
 import { getUserProfile } from '../../store/user';
 import validateDisplayName from '../../utils/validate-display-name';
 import { getTitleByUser, getTextByUser } from './messagesByUserType';
-import { trackEvent } from '../../utils/tracking';
+import { trackEvent, trackingNS } from '../../utils/tracking';
 export default function QuestionForm() {
     const dispatch = useDispatch();
     const { storyId, useStaging, commentsAPIUrl, maxQuestionLength } = useContext(QandaContext);
@@ -72,8 +72,9 @@ export default function QuestionForm() {
             if (updatedProfile?.displayName) {
                 // NB: we are using a component act event as analytics team can only support existing categories and actions at this time
                 trackEvent({
-                    category: 'component',
-                    action: 'act',
+                    content: {
+                        uuid: storyId,
+                    },
                     trigger_action: 'success_set_displayname',
                 });
             }
@@ -107,13 +108,13 @@ export default function QuestionForm() {
     _jsxs(Overlay, { title: "Ask a question", closeCallback: () => {
             setNewDisplayName(null);
             dispatch(closeForm());
-        }, children: [profile.isSubscribed && (_jsx("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", children: _jsxs("form", { onSubmit: handleSubmit, "data-trackable": `liveqa_submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`, children: [_jsxs("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && (_jsx(_Fragment, { children: _jsxs("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [_jsx("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), profile.displayName] }) })), !profile?.displayName && (_jsxs("label", { for: "display-name", className: "question-form__displayname-input o-forms-field", children: [_jsx("span", { className: "o-forms-title", children: _jsx("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), _jsxs("span", { className: classNames([
+        }, children: [profile.isSubscribed && (_jsx("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", children: _jsxs("form", { onSubmit: handleSubmit, "data-trackable": trackingNS(`submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`), children: [_jsxs("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && (_jsx(_Fragment, { children: _jsxs("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [_jsx("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), profile.displayName] }) })), !profile?.displayName && (_jsxs("label", { for: "display-name", className: "question-form__displayname-input o-forms-field", children: [_jsx("span", { className: "o-forms-title", children: _jsx("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), _jsxs("span", { className: classNames([
                                                 'question-form__displayname__input',
                                                 'o-forms-input',
                                                 'o-forms-input--text',
                                                 { 'o-forms-input--invalid': !!displayNameError },
                                             ]), children: [_jsx("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-invalid": displayNameError ? 'true' : 'false', "aria-errormessage": displayNameError ??
-                                                        'question_form__displayname-error-message' }), displayNameError && (_jsx("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: _jsx("span", { children: displayNameError }) }))] })] }))] }), _jsx("div", { className: "o-forms-field", children: _jsxs("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [_jsx("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": `question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}` }), _jsx("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), _jsxs("label", { for: "question-text", class: "o-forms-field question-form__question__input", children: [_jsx("span", { class: "o-forms-title", children: _jsx("span", { class: "o3-type-body-highlight", children: "Enter your question" }) }), _jsx("span", { class: "o-forms-input o-forms-input--textarea", children: _jsx("textarea", { id: "question-text", name: "question", value: question, onChange: (e) => dispatch(updateQuestion(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }) })] }), _jsx("span", { className: "o3-type-detail", children: "Questions must be at least 20 characters long." }), _jsx(Button, { attributes: {
+                                                        'question_form__displayname-error-message' }), displayNameError && (_jsx("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: _jsx("span", { children: displayNameError }) }))] })] }))] }), _jsx("div", { className: "o-forms-field", children: _jsxs("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [_jsx("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": trackingNS(`question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}`) }), _jsx("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), _jsxs("label", { for: "question-text", class: "o-forms-field question-form__question__input", children: [_jsx("span", { class: "o-forms-title", children: _jsx("span", { class: "o3-type-body-highlight", children: "Enter your question" }) }), _jsx("span", { class: "o-forms-input o-forms-input--textarea", children: _jsx("textarea", { id: "question-text", name: "question", value: question, onChange: (e) => dispatch(updateQuestion(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }) })] }), _jsx("span", { className: "o3-type-detail", children: "Questions must be at least 20 characters long." }), _jsx(Button, { attributes: {
                                 className: 'overlay__submit-button',
                                 type: 'submit',
                                 disabled: !submitEnabled,

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
 import { PRODUCT_NAME } from '../../config/qanda';
+import { trackingNS } from '../../utils/tracking';
 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';
@@ -16,14 +17,14 @@ export function getTitleByUser(profile) {
 }
 export function getTextByUser(profile) {
     if (profile.isSubscribed) {
-        return (_jsxs(_Fragment, { children: ["Keep your comments respectful and easy to understand for our global audience. By submitting, you agree to follow our", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__community-guidelines", "data-trackable-context-action": "Community guidelines", href: COMMUNITY_GUIDELINES_URL, target: "_parent", children: "community guidelines" }), ' ', "and", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__terms-and-conditions", "data-trackable-context-action": "Terms and conditions", href: TERMS_AND_CONDITIONS_URL, target: "_parent", children: "terms" }), "."] }));
+        return (_jsxs(_Fragment, { children: ["Keep your comments respectful and easy to understand for our global audience. By submitting, you agree to follow our", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": trackingNS('question-form__community-guidelines'), "data-trackable-context-action": "Community guidelines", href: COMMUNITY_GUIDELINES_URL, target: "_parent", children: "community guidelines" }), ' ', "and", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": trackingNS('question-form__terms-and-conditions'), "data-trackable-context-action": "Terms and conditions", href: TERMS_AND_CONDITIONS_URL, target: "_parent", children: "terms" }), "."] }));
     }
     if (profile.isTrialist) {
-        return (_jsxs(_Fragment, { children: ["View our full", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-trialist", "data-trackable-context-action": "Subscribe", href: SUBSCRIBE_URL, target: "_parent", children: "subscription packages" }), ' ', "to join the conversation."] }));
+        return (_jsxs(_Fragment, { children: ["View our full", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": trackingNS('question-form__subscribe-trialist'), "data-trackable-context-action": "Subscribe", href: SUBSCRIBE_URL, target: "_parent", children: "subscription packages" }), ' ', "to join the conversation."] }));
     }
     if (profile.isRegistered) {
-        return (_jsxs(_Fragment, { children: [_jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-registered", "data-trackable-context-action": "Subscribe", href: SUBSCRIBE_URL, target: "_parent", children: "Subscribe" }), ' ', "to join the conversation."] }));
+        return (_jsxs(_Fragment, { children: [_jsx("a", { className: "message-box__content-link", "data-trackable": trackingNS('question-form__subscribe-registered'), "data-trackable-context-action": "Subscribe", href: SUBSCRIBE_URL, target: "_parent", children: "Subscribe" }), ' ', "to join the conversation."] }));
     }
     // Anonymous users
-    return (_jsxs(_Fragment, { children: ["Please", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__sign-in-anonymous", "data-trackable-context-action": "Sign in", href: SIGN_IN_URL, target: "_parent", children: "sign in" }), ' ', "or", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-anonymous", "data-trackable-context-action": "Subscribe", href: SUBSCRIBE_URL, target: "_parent", children: "subscribe" }), ' ', "to join the conversation."] }));
+    return (_jsxs(_Fragment, { children: ["Please", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": trackingNS('question-form__sign-in-anonymous'), "data-trackable-context-action": "Sign in", href: SIGN_IN_URL, target: "_parent", children: "sign in" }), ' ', "or", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": trackingNS('question-form__subscribe-anonymous'), "data-trackable-context-action": "Subscribe", href: SUBSCRIBE_URL, target: "_parent", children: "subscribe" }), ' ', "to join the conversation."] }));
 }

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

@@ -1,34 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { trackingNS } from '../../utils/tracking';
 function Survey({ storyId, status }) {
-    const trackEvent = (trackingData) => {
-        const event = new CustomEvent('oTracking.event', {
-            detail: trackingData,
-            bubbles: true,
-        });
-        document.body.dispatchEvent(event);
-    };
-    const handleClick = () => {
-        trackEvent({
-            category: 'component',
-            component: {
-                name: 'liveqa',
-                type: 'container',
-                id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
-            },
-            action: 'act',
-            trigger_action: 'liveqa_survey_open',
-            content: {
-                asset_type: 'article',
-                uuid: storyId,
-            },
-            custom: [
-                {
-                    name: 'status',
-                    value: status,
-                },
-            ],
-        });
-    };
-    return (_jsx("div", { className: "o-message o-message--action o-message--inform o-message--survey", style: { marginBottom: 'var(--o3-spacing-l)' }, "data-o-message-close": "false", "data-o-component": "o-message", children: _jsx("div", { className: "o-message__container", children: _jsxs("div", { className: "o-message__content", children: [_jsx("p", { className: "o-message__content-main", style: { fontSize: 'var(--o3-type-body-base-font-size)' }, children: "How was your experience?" }), _jsx("div", { className: "o-message__actions", children: _jsx("a", { href: `https://www.feedback.ft.com/c/a/6HTDVvrHSyaKLZ5281McAo?content_id=${storyId}&qa_status=${status}`, onClick: handleClick, className: "o-message__actions__primary", "data-trackable": "liveqa_survey_link", children: "Share your feedback" }) })] }) }) }));
+    return (_jsx("div", { className: "o-message o-message--action o-message--inform o-message--survey", style: { marginBottom: 'var(--o3-spacing-l)' }, "data-o-message-close": "false", "data-o-component": "o-message", children: _jsx("div", { className: "o-message__container", children: _jsxs("div", { className: "o-message__content", children: [_jsx("p", { className: "o-message__content-main", style: { fontSize: 'var(--o3-type-body-base-font-size)' }, children: "How was your experience?" }), _jsx("div", { className: "o-message__actions", children: _jsx("a", { href: `https://www.feedback.ft.com/c/a/6HTDVvrHSyaKLZ5281McAo?content_id=${storyId}&qa_status=${status}`, className: "o-message__actions__primary", "data-trackable": trackingNS('survey_link'), children: "Share your feedback" }) })] }) }) }));
 }
 export default Survey;

package/dist/esm/utils/tracking.js

@@ -1,4 +1,26 @@
-export const trackEvent = (trackingData) => {
+const trackingNamespace = 'askanexpert_';
+export function trackingNS(string) {
+    return trackingNamespace + string;
+}
+export const baseTrackingData = {
+    category: 'component',
+    action: 'act',
+    component: {
+        name: 'askanexpert',
+        type: 'container',
+        id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
+    },
+    content: {
+        asset_type: 'article',
+    },
+};
+export const trackEvent = (customTrackingData) => {
+    // Merge the base tracking data with the provided tracking data
+    const trackingData = {
+        ...baseTrackingData,
+        ...customTrackingData,
+        trigger_action: trackingNamespace + customTrackingData.trigger_action,
+    };
     const event = new CustomEvent('oTracking.event', {
         detail: trackingData,
         bubbles: true,

package/dist/qanda.scss

@@ -308,14 +308,12 @@ $app-header-color: #007acc;
   color: var(--o3-color-, #33302e);
   float: right;
   margin-top: var(--o3-spacing-2xs);
-  &
-    :is(
-      .o3-button.o3-button--ghost[data-o3-theme='neutral'],
-      :where([data-o3-theme='neutral']) .o3-button.o3-button--ghost
-    ):hover {
-    background-color: unset;
-    border: unset;
-  }
+}
+
+.expander__link:hover {
+  /* Override some o-button styles */
+  background-color: unset !important;
+  border: unset !important;
 }
 
 /* Inlined from ../components/Loader/styles.scss */
@@ -343,7 +341,7 @@ $app-header-color: #007acc;
   --overlay__header-icon-size: 48px;
 }
 
-@keyframes slideUp {
+@keyframes QandaOverlaySlideUp {
   from {
     transform: translateY(100%);
   }
@@ -353,7 +351,7 @@ $app-header-color: #007acc;
   }
 }
 
-@keyframes slideIn {
+@keyframes QandaOverlaySlideIn {
   from {
     transform: translateX(100%);
   }
@@ -363,7 +361,7 @@ $app-header-color: #007acc;
   }
 }
 
-@keyframes fadeIn {
+@keyframes QandaOverlayFadeIn {
   from {
     opacity: 0;
   }
@@ -390,7 +388,7 @@ $app-header-color: #007acc;
     right: 0;
     bottom: 0;
     z-index: 19;
-    animation: fadeIn 1s ease forwards;
+    animation: QandaOverlayFadeIn 1s ease forwards;
     background: var(--o3-color-palette-black-90);
     margin-top: calc(var(--safe-area-inset-top, 0px) / 2);
   }
@@ -402,14 +400,14 @@ $app-header-color: #007acc;
     height: 100%;
     width: 100%;
     z-index: 20;
-    animation: slideUp 1s ease forwards;
+    animation: QandaOverlaySlideUp 1s ease forwards;
 
     @media (min-width: 740px) {
       width: 375px;
       right: 0;
       top: 0;
       border-radius: 0;
-      animation: slideIn 1s ease forwards;
+      animation: QandaOverlaySlideIn 1s ease forwards;
     }
   }
 
@@ -559,7 +557,7 @@ $app-header-color: #007acc;
       var(--o3-color-palette-white-80);
   }
 
-  .qanda-block__question-subtitle {
+  .qanda-block__question-summary {
     margin-bottom: var(--o3-spacing-4xs);
   }
 
@@ -677,7 +675,7 @@ $app-header-color: #007acc;
 
 .qanda-container {
   .qanda__stream {
-    margin: var(--o3-spacing-l) var(--o3-spacing-xs5) 0 var(--o3-spacing-xs5);
+    margin: var(--o3-spacing-l) var(--o3-spacing-5xs) 0 var(--o3-spacing-5xs);
   }
 
   .qanda__stream-title {

package/dist/types/components/QandaBlock/index.d.ts

@@ -3,5 +3,5 @@ import '../Expander/index';
 type QandaBlockProps = Comment & {
     showAnswerTime: boolean;
 };
-declare function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime, }: QandaBlockProps): import("react").JSX.Element;
+declare function QandaBlock({ id, body, children, byline, summary, showAnswerTime, }: QandaBlockProps): import("react").JSX.Element;
 export default QandaBlock;

package/dist/types/components/Survey/index.d.ts

@@ -1,6 +1,7 @@
+import type { Status } from '../../types/qa';
 type SurveyProps = {
     storyId: string;
-    status: string;
+    status: Status;
 };
 declare function Survey({ storyId, status }: SurveyProps): import("preact").JSX.Element;
 export default Survey;

package/dist/types/utils/tracking.d.ts

@@ -1,2 +1,4 @@
-import type { TrackingData } from '../types/tracking';
-export declare const trackEvent: (trackingData: TrackingData) => void;
+import type { BaseTrackingData, TrackingData } from '../types/tracking';
+export declare function trackingNS(string: string): string;
+export declare const baseTrackingData: BaseTrackingData;
+export declare const trackEvent: (customTrackingData: TrackingData) => void;

package/package.json

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