@financial-times/qanda-ui 1.0.7 → 1.1.1

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/Expander/index.js

@@ -1,9 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
 const react_1 = require("react");
 const o3_button_1 = require("@financial-times/o3-button");
 const tracking_1 = require("../../utils/tracking");
+const classnames_1 = __importDefault(require("classnames"));
 // Generic debounce function
 function debounce(func, delay) {
     let timerId;
@@ -60,8 +64,10 @@ function Expander({ className = '', children = [], expandLabel = 'Expand', colla
         return () => window.removeEventListener('resize', debouncedCheck);
     }, [children]); // re-run whenever the children change, although we don't expect it to
     const label = state === 'expanded' ? collapseLabel : expandLabel;
-    const expandCollapseClass = state === 'expanded' ? 'expander--expanded' : 'expander--collapsed';
-    const componentClassName = `${expandCollapseClass} ${className}`;
+    const componentClassName = (0, classnames_1.default)({
+        'expander--expanded': requiresExpander && state === 'expanded',
+        'expander--collapsed': requiresExpander && state !== 'expanded',
+    }, className);
     return ((0, jsx_runtime_1.jsxs)("div", { className: `${componentClassName}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `expander__text ${requiresExpander ? 'expander__text--multiline' : ''}`, id: expanderContentID, ref: textRef, children: (0, jsx_runtime_1.jsx)(EnsureParagraph, { children: children }) }), requiresExpander && ((0, jsx_runtime_1.jsx)(o3_button_1.Button, { label: label, type: "ghost", theme: "neutral", icon: state === 'expanded' ? 'chevron-up' : 'chevron-down', iconOnly: false, iconPosition: "end", attributes: {
                     className: 'expander__link',
                     'data-trackable': (0, tracking_1.trackingNS)(`expander-${state}`),

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/Expander/index.js

@@ -2,6 +2,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';
+import classNames from 'classnames';
 // Generic debounce function
 function debounce(func, delay) {
     let timerId;
@@ -58,8 +59,10 @@ function Expander({ className = '', children = [], expandLabel = 'Expand', colla
         return () => window.removeEventListener('resize', debouncedCheck);
     }, [children]); // re-run whenever the children change, although we don't expect it to
     const label = state === 'expanded' ? collapseLabel : expandLabel;
-    const expandCollapseClass = state === 'expanded' ? 'expander--expanded' : 'expander--collapsed';
-    const componentClassName = `${expandCollapseClass} ${className}`;
+    const componentClassName = classNames({
+        'expander--expanded': requiresExpander && state === 'expanded',
+        'expander--collapsed': requiresExpander && state !== 'expanded',
+    }, 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': trackingNS(`expander-${state}`),

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "1.0.7",
+  "version": "1.1.1",
   "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -101,10 +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-grid": "^6.1.8",
-    "@financial-times/o-icons": "^7.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",