@financial-times/qanda-ui 1.0.5 → 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.
|
@@ -27,11 +27,27 @@ function ExpertDrawer() {
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
}, [isExpertFormOpen]);
|
|
30
|
+
// relays expert drawer’s internal scroll events to window so o-comments can listen
|
|
31
|
+
(0, react_1.useEffect)(() => {
|
|
32
|
+
if (isExpertFormOpen) {
|
|
33
|
+
const scroller = document.querySelector('.expert-drawer .overlay__content');
|
|
34
|
+
if (!scroller)
|
|
35
|
+
return;
|
|
36
|
+
const relay = () => requestAnimationFrame(() => window.dispatchEvent(new Event('scroll')));
|
|
37
|
+
scroller.addEventListener('scroll', relay, { passive: true });
|
|
38
|
+
scroller.addEventListener('touchmove', relay, { passive: true });
|
|
39
|
+
return () => {
|
|
40
|
+
scroller.removeEventListener('scroll', relay);
|
|
41
|
+
scroller.removeEventListener('touchmove', relay);
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
}, [isExpertFormOpen]);
|
|
30
45
|
if (!isExpertFormOpen) {
|
|
31
46
|
return null;
|
|
32
47
|
}
|
|
33
48
|
return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: qanda_1.PRODUCT_NAME, className: "expert-drawer", closeCallback: () => {
|
|
34
49
|
dispatch((0, expertSlice_1.closeExpertForm)());
|
|
50
|
+
document.dispatchEvent(new Event('expert-drawer-toggled'));
|
|
35
51
|
focusDialogOpener?.();
|
|
36
52
|
}, options: {
|
|
37
53
|
shadow: true,
|
|
@@ -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: () =>
|
|
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
|
-
|
|
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,
|
|
@@ -22,11 +22,27 @@ function ExpertDrawer() {
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}, [isExpertFormOpen]);
|
|
25
|
+
// relays expert drawer’s internal scroll events to window so o-comments can listen
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (isExpertFormOpen) {
|
|
28
|
+
const scroller = document.querySelector('.expert-drawer .overlay__content');
|
|
29
|
+
if (!scroller)
|
|
30
|
+
return;
|
|
31
|
+
const relay = () => requestAnimationFrame(() => window.dispatchEvent(new Event('scroll')));
|
|
32
|
+
scroller.addEventListener('scroll', relay, { passive: true });
|
|
33
|
+
scroller.addEventListener('touchmove', relay, { passive: true });
|
|
34
|
+
return () => {
|
|
35
|
+
scroller.removeEventListener('scroll', relay);
|
|
36
|
+
scroller.removeEventListener('touchmove', relay);
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
}, [isExpertFormOpen]);
|
|
25
40
|
if (!isExpertFormOpen) {
|
|
26
41
|
return null;
|
|
27
42
|
}
|
|
28
43
|
return (_jsx(Overlay, { title: PRODUCT_NAME, className: "expert-drawer", closeCallback: () => {
|
|
29
44
|
dispatch(closeExpertForm());
|
|
45
|
+
document.dispatchEvent(new Event('expert-drawer-toggled'));
|
|
30
46
|
focusDialogOpener?.();
|
|
31
47
|
}, options: {
|
|
32
48
|
shadow: true,
|
|
@@ -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: () =>
|
|
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
|
-
|
|
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
|
-
|
|
177
|
-
|
|
178
|
-
|
|
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
|
-
|
|
208
|
-
|
|
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.
|
|
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",
|