@financial-times/qanda-ui 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/components/ExpertDrawer/index.js +1 -0
  2. package/dist/cjs/components/FloatingActionBar/index.js +37 -2
  3. package/dist/esm/components/ExpertDrawer/index.js +1 -0
  4. package/dist/esm/components/FloatingActionBar/index.js +38 -3
  5. package/dist/qanda.scss +16 -5
  6. package/package.json +4 -2
package/dist/cjs/components/ExpertDrawer/index.js CHANGED
@@ -47,6 +47,7 @@ function ExpertDrawer() {
47
47
  }
48
48
  return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: qanda_1.PRODUCT_NAME, className: "expert-drawer", closeCallback: () => {
49
49
  dispatch((0, expertSlice_1.closeExpertForm)());
50
+ document.dispatchEvent(new Event('expert-drawer-toggled'));
50
51
  focusDialogOpener?.();
51
52
  }, options: {
52
53
  shadow: true,
package/dist/cjs/components/FloatingActionBar/index.js CHANGED
@@ -9,11 +9,41 @@ const useIsMobile_1 = require("../../hooks/useIsMobile");
9
9
  const comments_api_1 = require("../../services/comments-api");
10
10
  const updateComments_1 = require("../../store/updateComments");
11
11
  const react_1 = require("react");
12
+ const o_utils_1 = require("@financial-times/o-utils");
12
13
  const QandaProvider_1 = require("../QandaProvider");
14
+ const main_1 = require("@financial-times/o-grid/main");
13
15
  const tracking_1 = require("../../utils/tracking");
14
16
  function LiveIndicator() {
15
17
  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" }) }));
16
18
  }
19
+ function useAlignToQanda(ref) {
20
+ (0, react_1.useEffect)(() => {
21
+ const align = () => {
22
+ const currentLayout = (0, main_1.getCurrentLayout)();
23
+ // skips alignment on small screens as the FAB is centered via CSS
24
+ if (currentLayout === 'S' ||
25
+ currentLayout === 'XS' ||
26
+ currentLayout === 'default')
27
+ return;
28
+ const container = ref.current;
29
+ const qandaRoot = container?.closest('.qanda-container');
30
+ const target = qandaRoot?.querySelector('.qanda__blocks-container');
31
+ if (!target || !container)
32
+ return;
33
+ const rect = target.getBoundingClientRect();
34
+ container.style.left = `${rect.left}px`;
35
+ container.style.width = `${rect.width}px`;
36
+ };
37
+ align();
38
+ const debounced = (0, o_utils_1.debounce)(align, 100);
39
+ window.addEventListener('resize', debounced);
40
+ document.addEventListener('expert-drawer-toggled', debounced);
41
+ return () => {
42
+ window.removeEventListener('resize', debounced);
43
+ document.removeEventListener('expert-drawer-toggled', debounced);
44
+ };
45
+ }, [ref]);
46
+ }
17
47
  function FloatingActionBar({ isLive = true }) {
18
48
  const dispatch = (0, react_redux_1.useDispatch)();
19
49
  const isMobile = (0, useIsMobile_1.useIsMobile)();
@@ -54,11 +84,16 @@ function FloatingActionBar({ isLive = true }) {
54
84
  const expertConfig = {
55
85
  description: 'Answer Q&A',
56
86
  testIdSuffix: 'answer-a-qanda-button',
57
- onClick: () => dispatch((0, expertSlice_1.openExpertForm)()),
87
+ onClick: () => {
88
+ dispatch((0, expertSlice_1.openExpertForm)());
89
+ document.dispatchEvent(new Event('expert-drawer-toggled'));
90
+ },
58
91
  dataTrackable: 'open_expert_drawer',
59
92
  };
60
93
  const view = showExpertView ? expertConfig : userConfig;
61
- 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: {
94
+ const containerRef = (0, react_1.useRef)(null);
95
+ useAlignToQanda(containerRef);
96
+ 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: {
62
97
  ariaLabel: view.description,
63
98
  'data-trackable': (0, tracking_1.trackingNS)(view.dataTrackable),
64
99
  'data-trackable-context-action': view.description,
package/dist/esm/components/ExpertDrawer/index.js CHANGED
@@ -42,6 +42,7 @@ function ExpertDrawer() {
42
42
  }
43
43
  return (_jsx(Overlay, { title: PRODUCT_NAME, className: "expert-drawer", closeCallback: () => {
44
44
  dispatch(closeExpertForm());
45
+ document.dispatchEvent(new Event('expert-drawer-toggled'));
45
46
  focusDialogOpener?.();
46
47
  }, options: {
47
48
  shadow: true,
package/dist/esm/components/FloatingActionBar/index.js CHANGED
@@ -6,12 +6,42 @@ import { openExpertForm } from '../../store/expertSlice';
6
6
  import { useIsMobile } from '../../hooks/useIsMobile';
7
7
  import { useUpdatedComments } from '../../services/comments-api';
8
8
  import { updateComments } from '../../store/updateComments';
9
- import { useContext, useRef } from 'react';
9
+ import { useContext, useRef, useEffect } from 'react';
10
+ import { debounce } from '@financial-times/o-utils';
10
11
  import { QandaContext } from '../QandaProvider';
12
+ import { getCurrentLayout } from '@financial-times/o-grid/main';
11
13
  import { trackingNS } from '../../utils/tracking';
12
14
  function LiveIndicator() {
13
15
  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" }) }));
14
16
  }
17
+ function useAlignToQanda(ref) {
18
+ useEffect(() => {
19
+ const align = () => {
20
+ const currentLayout = getCurrentLayout();
21
+ // skips alignment on small screens as the FAB is centered via CSS
22
+ if (currentLayout === 'S' ||
23
+ currentLayout === 'XS' ||
24
+ currentLayout === 'default')
25
+ return;
26
+ const container = ref.current;
27
+ const qandaRoot = container?.closest('.qanda-container');
28
+ const target = qandaRoot?.querySelector('.qanda__blocks-container');
29
+ if (!target || !container)
30
+ return;
31
+ const rect = target.getBoundingClientRect();
32
+ container.style.left = `${rect.left}px`;
33
+ container.style.width = `${rect.width}px`;
34
+ };
35
+ align();
36
+ const debounced = debounce(align, 100);
37
+ window.addEventListener('resize', debounced);
38
+ document.addEventListener('expert-drawer-toggled', debounced);
39
+ return () => {
40
+ window.removeEventListener('resize', debounced);
41
+ document.removeEventListener('expert-drawer-toggled', debounced);
42
+ };
43
+ }, [ref]);
44
+ }
15
45
  function FloatingActionBar({ isLive = true }) {
16
46
  const dispatch = useDispatch();
17
47
  const isMobile = useIsMobile();
@@ -52,11 +82,16 @@ function FloatingActionBar({ isLive = true }) {
52
82
  const expertConfig = {
53
83
  description: 'Answer Q&A',
54
84
  testIdSuffix: 'answer-a-qanda-button',
55
- onClick: () => dispatch(openExpertForm()),
85
+ onClick: () => {
86
+ dispatch(openExpertForm());
87
+ document.dispatchEvent(new Event('expert-drawer-toggled'));
88
+ },
56
89
  dataTrackable: 'open_expert_drawer',
57
90
  };
58
91
  const view = showExpertView ? expertConfig : userConfig;
59
- 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: {
92
+ const containerRef = useRef(null);
93
+ useAlignToQanda(containerRef);
94
+ 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: {
60
95
  ariaLabel: view.description,
61
96
  'data-trackable': trackingNS(view.dataTrackable),
62
97
  'data-trackable-context-action': view.description,
package/dist/qanda.scss CHANGED
@@ -7,6 +7,7 @@ $app-header-color: #007acc;
7
7
  @import '@financial-times/o-icons/main';
8
8
  @import '@financial-times/o-labels/main';
9
9
  @import '@financial-times/o-message/main';
10
+ @import '@financial-times/o-grid/main';
10
11
  @import '@financial-times/o3-foundation/css/core.css';
11
12
  /* Inlined from ../components/Author/styles.css */
12
13
  .qanda-container {
@@ -173,9 +174,9 @@ $app-header-color: #007acc;
173
174
  .floating-action-bar__container {
174
175
  position: fixed;
175
176
  bottom: 0;
176
- left: 0;
177
- right: 0;
178
- display: flex;
177
+ width: auto;
178
+ left: auto;
179
+ right: auto;
179
180
  /* Ensure FAB is on top of ...
180
181
  1. some dinamically loaded teasers at the bottom of the article
181
182
  2. the sharing bar on mobile
@@ -204,8 +205,9 @@ $app-header-color: #007acc;
204
205
  height: 48px;
205
206
  background: var(--o3-color-palette-white-60);
206
207
  border-radius: 100px;
207
- margin: auto;
208
- margin-bottom: var(--o3-spacing-s);
208
+ width: max-content;
209
+ max-width: 100%;
210
+ margin: 0 auto var(--o3-spacing-s);
209
211
  padding: 0 var(--o3-spacing-2xs);
210
212
  display: flex;
211
213
  align-items: center;
@@ -837,6 +839,8 @@ See https://financialtimes.atlassian.net/jira/software/c/projects/CI/boards/1653
837
839
  )
838
840
  );
839
841
 
842
+ @include oGrid();
843
+
840
844
  @media (max-width: 740px) {
841
845
  // locks scrolling for narrow viewport on web
842
846
  html:has(.qanda-container .overlay),
@@ -880,4 +884,11 @@ See https://financialtimes.atlassian.net/jira/software/c/projects/CI/boards/1653
880
884
  background-color: var(--o3-color-palette-wheat);
881
885
  border-radius: 50%;
882
886
  }
887
+
888
+ .floating-action-bar__container {
889
+ @include oGridRespondTo($until: 'M') {
890
+ left: 50% !important;
891
+ transform: translateX(-50%);
892
+ }
893
+ }
883
894
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/qanda-ui",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -40,6 +40,7 @@
40
40
  },
41
41
  "homepage": "https://github.com/Financial-Times/qanda-ui#readme",
42
42
  "dependencies": {
43
+ "@financial-times/o-utils": "^2.2.1",
43
44
  "@reduxjs/toolkit": "^1.9.5",
44
45
  "classnames": "^2.5.1"
45
46
  },
@@ -49,7 +50,6 @@
49
50
  "@babel/preset-env": "^7.26.0",
50
51
  "@babel/preset-react": "^7.26.3",
51
52
  "@babel/preset-typescript": "^7.26.0",
52
- "@types/react-redux": "^7.1.34",
53
53
  "@dotcom-tool-kit/component": "^5.1.12",
54
54
  "@dotcom-tool-kit/jest": "^4.3.1",
55
55
  "@financial-times/o-colors": "^6.7.0",
@@ -59,6 +59,7 @@
59
59
  "@testing-library/preact": "^3.2.4",
60
60
  "@types/jest": "^29.5.14",
61
61
  "@types/jest-axe": "^3.5.9",
62
+ "@types/react-redux": "^7.1.34",
62
63
  "@typescript-eslint/eslint-plugin": "^8.18.0",
63
64
  "@typescript-eslint/parser": "^8.18.0",
64
65
  "babel-jest": "^29.7.0",
@@ -102,6 +103,7 @@
102
103
  "@financial-times/o-colors": "^6.7",
103
104
  "@financial-times/o-comments": "^13.0.1",
104
105
  "@financial-times/o-forms": "^10.0.2",
106
+ "@financial-times/o-grid": "^6.1.8",
105
107
  "@financial-times/o-icons": "^7.8",
106
108
  "@financial-times/o-labels": "^7.0.1",
107
109
  "@financial-times/o-loading": "^6.0.0",