@financial-times/qanda-ui 1.0.1 → 1.0.2

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/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/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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",