@financial-times/qanda-ui 1.0.2 → 1.0.4

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

@@ -519,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';
 
@@ -683,9 +696,12 @@ $app-header-color: #007acc;
     }
 
     .input-textarea {
-      min-height: 180px;
+      min-height: 120px;
       background-color: transparent;
       border: none;
+      @media (min-width: 740px) {
+        min-height: 180px;
+      }
     }
 
     .input-textarea:focus-visible {
@@ -812,6 +828,15 @@ $app-header-color: #007acc;
   )
 );
 
+@media (max-width: 740px) {
+  // locks scrolling for narrow viewport on web
+  html:has(.qanda-container .overlay),
+  // locks scroll container for FT app
+  body:has(.qanda-container .overlay) .js-vertical-scroller {
+    overflow: hidden;
+  }
+}
+
 .qanda-container {
   body {
     margin: 0;

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.2",
+  "version": "1.0.4",
   "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",