@financial-times/qanda-ui 1.0.6 → 1.1.0

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

@@ -7,11 +7,11 @@ const QandaProvider_1 = require("../QandaProvider");
 const qanda_1 = require("../../config/qanda");
 const comments_api_1 = require("../../services/comments-api");
 function formatTime(remainingTime) {
-    const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
-    if (days >= 1) {
+    const hours = Math.floor(remainingTime / (1000 * 60 * 60));
+    if (hours >= 48) {
+        const days = Math.floor(hours / 24);
         return `${days} day${days === 1 ? '' : 's'} `;
     }
-    const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
     if (hours >= 1) {
         return `${hours} hour${hours === 1 ? '' : 's'}`;
     }

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

@@ -47,6 +47,7 @@ function ExpertDrawer() {
     }
     return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: qanda_1.PRODUCT_NAME, className: "expert-drawer", closeCallback: () => {
             dispatch((0, expertSlice_1.closeExpertForm)());
+            document.dispatchEvent(new Event('expert-drawer-toggled'));
             focusDialogOpener?.();
         }, options: {
             shadow: true,

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

@@ -9,11 +9,41 @@ const useIsMobile_1 = require("../../hooks/useIsMobile");
 const comments_api_1 = require("../../services/comments-api");
 const updateComments_1 = require("../../store/updateComments");
 const react_1 = require("react");
+const o_utils_1 = require("@financial-times/o-utils");
 const QandaProvider_1 = require("../QandaProvider");
+const main_1 = require("@financial-times/o-grid/main");
 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" }) }));
 }
+function useAlignToQanda(ref) {
+    (0, react_1.useEffect)(() => {
+        const align = () => {
+            const currentLayout = (0, main_1.getCurrentLayout)();
+            // skips alignment on small screens as the FAB is centered via CSS
+            if (currentLayout === 'S' ||
+                currentLayout === 'XS' ||
+                currentLayout === 'default')
+                return;
+            const container = ref.current;
+            const qandaRoot = container?.closest('.qanda-container');
+            const target = qandaRoot?.querySelector('.qanda__blocks-container');
+            if (!target || !container)
+                return;
+            const rect = target.getBoundingClientRect();
+            container.style.left = `${rect.left}px`;
+            container.style.width = `${rect.width}px`;
+        };
+        align();
+        const debounced = (0, o_utils_1.debounce)(align, 100);
+        window.addEventListener('resize', debounced);
+        document.addEventListener('expert-drawer-toggled', debounced);
+        return () => {
+            window.removeEventListener('resize', debounced);
+            document.removeEventListener('expert-drawer-toggled', debounced);
+        };
+    }, [ref]);
+}
 function FloatingActionBar({ isLive = true }) {
     const dispatch = (0, react_redux_1.useDispatch)();
     const isMobile = (0, useIsMobile_1.useIsMobile)();
@@ -54,11 +84,16 @@ function FloatingActionBar({ isLive = true }) {
     const expertConfig = {
         description: 'Answer Q&A',
         testIdSuffix: 'answer-a-qanda-button',
-        onClick: () => dispatch((0, expertSlice_1.openExpertForm)()),
+        onClick: () => {
+            dispatch((0, expertSlice_1.openExpertForm)());
+            document.dispatchEvent(new Event('expert-drawer-toggled'));
+        },
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    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: [(0, jsx_runtime_1.jsx)("span", { className: "o3-visually-hidden", "aria-live": "polite", role: "alert", children: isLive ? 'This session is now live' : '' }), isLive && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", ref: modalOpenerRef, children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+    const containerRef = (0, react_1.useRef)(null);
+    useAlignToQanda(containerRef);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, 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: [(0, jsx_runtime_1.jsx)("span", { className: "o3-visually-hidden", "aria-live": "polite", role: "alert", children: isLive ? 'This session is now live' : '' }), isLive && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", ref: modalOpenerRef, children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
                                     ariaLabel: view.description,
                                     'data-trackable': (0, tracking_1.trackingNS)(view.dataTrackable),
                                     'data-trackable-context-action': view.description,

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

@@ -170,7 +170,7 @@ function QuestionForm() {
                             }, 
                             // @ts-expect-error - o3 Button is currently accepting a JSX element as label
                             // but the type definition needs to be updated by Origami team
-                            label: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, {}) : 'Submit your question', type: "primary", theme: "mono" }), !profile?.token && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", id: "question-form-disclaimer", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && ((0, jsx_runtime_1.jsx)("div", { role: "alert", "aria-live": "polite", children: (0, jsx_runtime_1.jsx)(MessageBox_1.default, { color: "#00572C", extraClassNames: "o-message--alert o-message--success", title: "Question sent", text: "Your question is in the queue and will be reviewed by our editors." }) })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", role: "alert", id: "question-form-error-message", children: error && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error, storyId: storyId, errorMapping: {
+                            label: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, {}) : 'Submit your question', type: "primary", theme: "mono" }), !profile?.token && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", id: "question-form-disclaimer", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && ((0, jsx_runtime_1.jsx)("div", { role: "alert", "aria-live": "polite", children: (0, jsx_runtime_1.jsx)(MessageBox_1.default, { color: "#00572C", extraClassNames: "o-message--alert o-message--success", title: "Question sent", text: "Your question has been received and sent to our editorial team. If selected, you'll see it, along with the journalist's answer, published during the live Q&A." }) })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", role: "alert", id: "question-form-error-message", children: error && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error, storyId: storyId, errorMapping: {
                         // Messages for specific error codes
                         REPEAT_POST: {
                             title: 'Question already submitted',

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

@@ -4,11 +4,11 @@ import { QandaContext } from '../QandaProvider';
 import { PRODUCT_NAME } from '../../config/qanda';
 import { useGetQandAStreamQuery, useUpdatedQA, } from '../../services/comments-api';
 export function formatTime(remainingTime) {
-    const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
-    if (days >= 1) {
+    const hours = Math.floor(remainingTime / (1000 * 60 * 60));
+    if (hours >= 48) {
+        const days = Math.floor(hours / 24);
         return `${days} day${days === 1 ? '' : 's'} `;
     }
-    const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
     if (hours >= 1) {
         return `${hours} hour${hours === 1 ? '' : 's'}`;
     }

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

@@ -42,6 +42,7 @@ function ExpertDrawer() {
     }
     return (_jsx(Overlay, { title: PRODUCT_NAME, className: "expert-drawer", closeCallback: () => {
             dispatch(closeExpertForm());
+            document.dispatchEvent(new Event('expert-drawer-toggled'));
             focusDialogOpener?.();
         }, options: {
             shadow: true,

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

@@ -6,12 +6,42 @@ import { openExpertForm } from '../../store/expertSlice';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useUpdatedComments } from '../../services/comments-api';
 import { updateComments } from '../../store/updateComments';
-import { useContext, useRef } from 'react';
+import { useContext, useRef, useEffect } from 'react';
+import { debounce } from '@financial-times/o-utils';
 import { QandaContext } from '../QandaProvider';
+import { getCurrentLayout } from '@financial-times/o-grid/main';
 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" }) }));
 }
+function useAlignToQanda(ref) {
+    useEffect(() => {
+        const align = () => {
+            const currentLayout = getCurrentLayout();
+            // skips alignment on small screens as the FAB is centered via CSS
+            if (currentLayout === 'S' ||
+                currentLayout === 'XS' ||
+                currentLayout === 'default')
+                return;
+            const container = ref.current;
+            const qandaRoot = container?.closest('.qanda-container');
+            const target = qandaRoot?.querySelector('.qanda__blocks-container');
+            if (!target || !container)
+                return;
+            const rect = target.getBoundingClientRect();
+            container.style.left = `${rect.left}px`;
+            container.style.width = `${rect.width}px`;
+        };
+        align();
+        const debounced = debounce(align, 100);
+        window.addEventListener('resize', debounced);
+        document.addEventListener('expert-drawer-toggled', debounced);
+        return () => {
+            window.removeEventListener('resize', debounced);
+            document.removeEventListener('expert-drawer-toggled', debounced);
+        };
+    }, [ref]);
+}
 function FloatingActionBar({ isLive = true }) {
     const dispatch = useDispatch();
     const isMobile = useIsMobile();
@@ -52,11 +82,16 @@ function FloatingActionBar({ isLive = true }) {
     const expertConfig = {
         description: 'Answer Q&A',
         testIdSuffix: 'answer-a-qanda-button',
-        onClick: () => dispatch(openExpertForm()),
+        onClick: () => {
+            dispatch(openExpertForm());
+            document.dispatchEvent(new Event('expert-drawer-toggled'));
+        },
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    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: [_jsx("span", { className: "o3-visually-hidden", "aria-live": "polite", role: "alert", children: isLive ? 'This session is now live' : '' }), isLive && _jsx(LiveIndicator, {}), _jsxs("div", { className: "floating-action-bar__buttons", ref: modalOpenerRef, children: [_jsx(Button, { attributes: {
+    const containerRef = useRef(null);
+    useAlignToQanda(containerRef);
+    return (_jsxs("div", { ref: containerRef, 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: [_jsx("span", { className: "o3-visually-hidden", "aria-live": "polite", role: "alert", children: isLive ? 'This session is now live' : '' }), isLive && _jsx(LiveIndicator, {}), _jsxs("div", { className: "floating-action-bar__buttons", ref: modalOpenerRef, children: [_jsx(Button, { attributes: {
                                     ariaLabel: view.description,
                                     'data-trackable': trackingNS(view.dataTrackable),
                                     'data-trackable-context-action': view.description,

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

@@ -164,7 +164,7 @@ export default function QuestionForm() {
                             }, 
                             // @ts-expect-error - o3 Button is currently accepting a JSX element as label
                             // but the type definition needs to be updated by Origami team
-                            label: isLoading ? _jsx(Loader, {}) : 'Submit your question', type: "primary", theme: "mono" }), !profile?.token && (_jsx("span", { className: "o3-type-detail", id: "question-form-disclaimer", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && (_jsx("div", { role: "alert", "aria-live": "polite", children: _jsx(MessageBox, { color: "#00572C", extraClassNames: "o-message--alert o-message--success", title: "Question sent", text: "Your question is in the queue and will be reviewed by our editors." }) })), _jsx("div", { "aria-live": "polite", role: "alert", id: "question-form-error-message", children: error && (_jsx(ErrorMessage, { error: error, storyId: storyId, errorMapping: {
+                            label: isLoading ? _jsx(Loader, {}) : 'Submit your question', type: "primary", theme: "mono" }), !profile?.token && (_jsx("span", { className: "o3-type-detail", id: "question-form-disclaimer", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && (_jsx("div", { role: "alert", "aria-live": "polite", children: _jsx(MessageBox, { color: "#00572C", extraClassNames: "o-message--alert o-message--success", title: "Question sent", text: "Your question has been received and sent to our editorial team. If selected, you'll see it, along with the journalist's answer, published during the live Q&A." }) })), _jsx("div", { "aria-live": "polite", role: "alert", id: "question-form-error-message", children: error && (_jsx(ErrorMessage, { error: error, storyId: storyId, errorMapping: {
                         // Messages for specific error codes
                         REPEAT_POST: {
                             title: 'Question already submitted',

package/dist/qanda.scss

@@ -7,6 +7,7 @@ $app-header-color: #007acc;
 @import '@financial-times/o-icons/main';
 @import '@financial-times/o-labels/main';
 @import '@financial-times/o-message/main';
+@import '@financial-times/o-grid/main';
 @import '@financial-times/o3-foundation/css/core.css';
 /* Inlined from ../components/Author/styles.css */
 .qanda-container {
@@ -173,9 +174,9 @@ $app-header-color: #007acc;
   .floating-action-bar__container {
     position: fixed;
     bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
+    width: auto;
+    left: auto;
+    right: auto;
     /* Ensure FAB is on top of ...
     1. some dinamically loaded teasers at the bottom of the article
     2. the sharing bar on mobile
@@ -204,8 +205,9 @@ $app-header-color: #007acc;
     height: 48px;
     background: var(--o3-color-palette-white-60);
     border-radius: 100px;
-    margin: auto;
-    margin-bottom: var(--o3-spacing-s);
+    width: max-content;
+    max-width: 100%;
+    margin: 0 auto var(--o3-spacing-s);
     padding: 0 var(--o3-spacing-2xs);
     display: flex;
     align-items: center;
@@ -837,6 +839,8 @@ See https://financialtimes.atlassian.net/jira/software/c/projects/CI/boards/1653
   )
 );
 
+@include oGrid();
+
 @media (max-width: 740px) {
   // locks scrolling for narrow viewport on web
   html:has(.qanda-container .overlay),
@@ -880,4 +884,11 @@ See https://financialtimes.atlassian.net/jira/software/c/projects/CI/boards/1653
     background-color: var(--o3-color-palette-wheat);
     border-radius: 50%;
   }
+
+  .floating-action-bar__container {
+    @include oGridRespondTo($until: 'M') {
+      left: 50% !important;
+      transform: translateX(-50%);
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -40,6 +40,7 @@
   },
   "homepage": "https://github.com/Financial-Times/qanda-ui#readme",
   "dependencies": {
+    "@financial-times/o-utils": "^2.2.1",
     "@reduxjs/toolkit": "^1.9.5",
     "classnames": "^2.5.1"
   },
@@ -49,7 +50,6 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@types/react-redux": "^7.1.34",
     "@dotcom-tool-kit/component": "^5.1.12",
     "@dotcom-tool-kit/jest": "^4.3.1",
     "@financial-times/o-colors": "^6.7.0",
@@ -59,6 +59,7 @@
     "@testing-library/preact": "^3.2.4",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
+    "@types/react-redux": "^7.1.34",
     "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@typescript-eslint/parser": "^8.18.0",
     "babel-jest": "^29.7.0",
@@ -100,9 +101,10 @@
     "@financial-times/cp-content-pipeline-ui": "^9.2.1",
     "@financial-times/n-tracking": "^7.7.0",
     "@financial-times/o-colors": "^6.7",
-    "@financial-times/o-comments": "^13.0.1",
+    "@financial-times/o-comments": "^13.1.0",
     "@financial-times/o-forms": "^10.0.2",
-    "@financial-times/o-icons": "^7.8",
+    "@financial-times/o-grid": "^6.1.8",
+    "@financial-times/o-icons": "^7.10.0",
     "@financial-times/o-labels": "^7.0.1",
     "@financial-times/o-loading": "^6.0.0",
     "@financial-times/o-message": "^6.0.0",