@financial-times/qanda-ui 1.0.1 → 1.0.3

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

@@ -30,7 +30,7 @@ function ExpertDrawer() {
     if (!isExpertFormOpen) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: qanda_1.PRODUCT_NAME, closeCallback: () => {
+    return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: qanda_1.PRODUCT_NAME, className: "expert-drawer", closeCallback: () => {
             dispatch((0, expertSlice_1.closeExpertForm)());
             focusDialogOpener?.();
         }, options: {

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

@@ -9,30 +9,11 @@ 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 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 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);
-        return () => window.removeEventListener('resize', debounced);
-    }, [ref]);
-}
 function FloatingActionBar({ isLive = true }) {
     const dispatch = (0, react_redux_1.useDispatch)();
     const isMobile = (0, useIsMobile_1.useIsMobile)();
@@ -77,9 +58,7 @@ function FloatingActionBar({ isLive = true }) {
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    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: {
+    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: {
                                     ariaLabel: view.description,
                                     'data-trackable': (0, tracking_1.trackingNS)(view.dataTrackable),
                                     'data-trackable-context-action': view.description,

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

@@ -7,7 +7,7 @@ const jsx_runtime_1 = require("preact/jsx-runtime");
 const react_1 = require("react");
 const o3_button_1 = require("@financial-times/o3-button");
 const classnames_1 = __importDefault(require("classnames"));
-function Overlay({ title, children, closeCallback, options = {}, }) {
+function Overlay({ title, className, children, closeCallback, options = {}, }) {
     // Trap keyboard focus within the overlay for accessibility
     const trapFocus = (event) => {
         if (event.key !== 'Tab')
@@ -27,6 +27,7 @@ function Overlay({ title, children, closeCallback, options = {}, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "overlay", role: "dialog", "aria-modal": "true", "aria-labelledby": "overlay-title", children: [!options.allowInteraction && (0, jsx_runtime_1.jsx)("div", { className: "overlay__outer" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)([
                     'overlay__inner',
                     { 'overlay__inner--shadow': options.shadow },
+                    className,
                 ]), children: [(0, jsx_runtime_1.jsx)("div", { className: "overlay__header", children: (0, jsx_runtime_1.jsxs)("div", { className: "overlay__header-bar", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight overlay__header-title", id: "overlay-title", tabIndex: 0, ref: titleRef, onKeyDown: trapFocus, children: title }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: { className: 'overlay__header-close' }, iconOnly: true, icon: "cross", label: "Close", type: "ghost", theme: "mono", onClick: () => closeCallback() })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "overlay__content", children: children })] }), (0, jsx_runtime_1.jsx)("button", { className: "o3-visually-hidden", "aria-label": "Close", onClick: () => closeCallback(), ref: endFocusBtn, onKeyDown: trapFocus, type: "button", children: "Close" })] }));
 }
 exports.default = Overlay;

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

@@ -25,7 +25,7 @@ function ExpertDrawer() {
     if (!isExpertFormOpen) {
         return null;
     }
-    return (_jsx(Overlay, { title: PRODUCT_NAME, closeCallback: () => {
+    return (_jsx(Overlay, { title: PRODUCT_NAME, className: "expert-drawer", closeCallback: () => {
             dispatch(closeExpertForm());
             focusDialogOpener?.();
         }, options: {

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

@@ -6,31 +6,12 @@ import { openExpertForm } from '../../store/expertSlice';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useUpdatedComments } from '../../services/comments-api';
 import { updateComments } from '../../store/updateComments';
-import { useContext, useRef, useEffect } from 'react';
-import { debounce } from '@financial-times/o-utils';
+import { useContext, useRef } 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" }) }));
 }
-function useAlignToQanda(ref) {
-    useEffect(() => {
-        const align = () => {
-            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);
-        return () => window.removeEventListener('resize', debounced);
-    }, [ref]);
-}
 function FloatingActionBar({ isLive = true }) {
     const dispatch = useDispatch();
     const isMobile = useIsMobile();
@@ -75,9 +56,7 @@ function FloatingActionBar({ isLive = true }) {
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    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: {
+    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: {
                                     ariaLabel: view.description,
                                     'data-trackable': trackingNS(view.dataTrackable),
                                     'data-trackable-context-action': view.description,

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { Button } from '@financial-times/o3-button';
 import classNames from 'classnames';
-function Overlay({ title, children, closeCallback, options = {}, }) {
+function Overlay({ title, className, children, closeCallback, options = {}, }) {
     // Trap keyboard focus within the overlay for accessibility
     const trapFocus = (event) => {
         if (event.key !== 'Tab')
@@ -22,6 +22,7 @@ function Overlay({ title, children, closeCallback, options = {}, }) {
     return (_jsxs("div", { className: "overlay", role: "dialog", "aria-modal": "true", "aria-labelledby": "overlay-title", children: [!options.allowInteraction && _jsx("div", { className: "overlay__outer" }), _jsxs("div", { className: classNames([
                     'overlay__inner',
                     { 'overlay__inner--shadow': options.shadow },
+                    className,
                 ]), children: [_jsx("div", { className: "overlay__header", children: _jsxs("div", { className: "overlay__header-bar", children: [_jsx("span", { className: "o3-type-body-highlight overlay__header-title", id: "overlay-title", tabIndex: 0, ref: titleRef, onKeyDown: trapFocus, children: title }), _jsx(Button, { attributes: { className: 'overlay__header-close' }, iconOnly: true, icon: "cross", label: "Close", type: "ghost", theme: "mono", onClick: () => closeCallback() })] }) }), _jsx("div", { className: "overlay__content", children: children })] }), _jsx("button", { className: "o3-visually-hidden", "aria-label": "Close", onClick: () => closeCallback(), ref: endFocusBtn, onKeyDown: trapFocus, type: "button", children: "Close" })] }));
 }
 export default Overlay;

package/dist/qanda.scss

@@ -173,9 +173,9 @@ $app-header-color: #007acc;
   .floating-action-bar__container {
     position: fixed;
     bottom: 0;
-    width: auto;
-    left: auto;
-    right: auto;
+    left: 0;
+    right: 0;
+    display: flex;
     /* Ensure FAB is on top of ...
     1. some dinamically loaded teasers at the bottom of the article
     2. the sharing bar on mobile
@@ -204,9 +204,8 @@ $app-header-color: #007acc;
     height: 48px;
     background: var(--o3-color-palette-white-60);
     border-radius: 100px;
-    width: max-content;
-    max-width: 100%;
-    margin: 0 auto var(--o3-spacing-s);
+    margin: auto;
+    margin-bottom: var(--o3-spacing-s);
     padding: 0 var(--o3-spacing-2xs);
     display: flex;
     align-items: center;
@@ -520,6 +519,19 @@ $app-header-color: #007acc;
   }
 }
 
+/* Inlined from ../components/ExpertDrawer/styles.css */
+@media (min-width: 740px) {
+  .overlay__inner--shadow.expert-drawer {
+    width: 45vw;
+    min-width: 420px;
+  }
+
+  /* Currently, although it also works on FT-app, we optimise the expert drawer for usage on tablet/desktop on FT.com only (where the 'article-content' selector is) */
+  .article-content:has(.expert-drawer) {
+    max-width: 50vw;
+  }
+}
+
 /* Inlined from ../components/QandaBlock/styles.css */
 @import '@financial-times/o3-foundation/css/core.css';
 

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

@@ -4,9 +4,10 @@ type OverlayOptions = {
 };
 type OverlayProps = {
     title: string;
+    className?: string;
     children: React.ReactNode;
     closeCallback: () => void;
     options?: OverlayOptions;
 };
-declare function Overlay({ title, children, closeCallback, options, }: OverlayProps): import("react").JSX.Element;
+declare function Overlay({ title, className, children, closeCallback, options, }: OverlayProps): import("react").JSX.Element;
 export default Overlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -40,7 +40,6 @@
   },
   "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"
   },
@@ -50,6 +49,7 @@
     "@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,7 +59,6 @@
     "@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",