@financial-times/qanda-ui 0.0.1-beta.22 → 0.0.1-beta.23

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

@@ -31,7 +31,7 @@ function ExpertDrawer() {
     }
     return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: qanda_1.PRODUCT_NAME, closeCallback: () => dispatch((0, expertSlice_1.closeExpertForm)()), options: {
             shadow: true,
-            noBackground: true,
+            allowInteraction: true,
         }, children: (0, jsx_runtime_1.jsx)("div", { className: "o-comments", id: "o-comments-stream", "data-o-component": "o-comments", "data-o-comments-article-id": storyId, "data-o-comments-article-url": `https://www.ft.com/content/${storyId}`, "data-o-comments-use-staging-environment": useStaging, "data-o-comments-title": title }) }));
 }
 exports.default = ExpertDrawer;

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

@@ -7,10 +7,7 @@ const jsx_runtime_1 = require("preact/jsx-runtime");
 const o3_button_1 = require("@financial-times/o3-button");
 const classnames_1 = __importDefault(require("classnames"));
 function Overlay({ title, children, closeCallback, options = {}, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "overlay", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)([
-                    'overlay__outer',
-                    { 'overlay__outer--no-background': options.noBackground },
-                ]) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)([
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "overlay", 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 },
                 ]), 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", 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 })] })] }));

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

@@ -26,7 +26,7 @@ function ExpertDrawer() {
     }
     return (_jsx(Overlay, { title: PRODUCT_NAME, closeCallback: () => dispatch(closeExpertForm()), options: {
             shadow: true,
-            noBackground: true,
+            allowInteraction: true,
         }, children: _jsx("div", { className: "o-comments", id: "o-comments-stream", "data-o-component": "o-comments", "data-o-comments-article-id": storyId, "data-o-comments-article-url": `https://www.ft.com/content/${storyId}`, "data-o-comments-use-staging-environment": useStaging, "data-o-comments-title": title }) }));
 }
 export default ExpertDrawer;

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

@@ -2,10 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Button } from '@financial-times/o3-button';
 import classNames from 'classnames';
 function Overlay({ title, children, closeCallback, options = {}, }) {
-    return (_jsxs("div", { className: "overlay", children: [_jsx("div", { className: classNames([
-                    'overlay__outer',
-                    { 'overlay__outer--no-background': options.noBackground },
-                ]) }), _jsxs("div", { className: classNames([
+    return (_jsxs("div", { className: "overlay", children: [!options.allowInteraction && _jsx("div", { className: "overlay__outer" }), _jsxs("div", { className: classNames([
                     'overlay__inner',
                     { 'overlay__inner--shadow': options.shadow },
                 ]), children: [_jsx("div", { className: "overlay__header", children: _jsxs("div", { className: "overlay__header-bar", children: [_jsx("span", { className: "o3-type-body-highlight overlay__header-title", 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 })] })] }));

package/dist/qanda.scss

@@ -386,10 +386,6 @@ $app-header-color: #007acc;
     background: var(--o3-color-palette-black-90);
   }
 
-  .overlay__outer--no-background {
-    background: none;
-  }
-
   .overlay__inner {
     border-radius: var(--o3-spacing-2xs) var(--o3-spacing-2xs) 0 0;
     background: var(--o3-color-use-case-page-background);

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

@@ -1,5 +1,5 @@
 type OverlayOptions = {
-    noBackground?: boolean;
+    allowInteraction?: boolean;
     shadow?: boolean;
 };
 type OverlayProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "0.0.1-beta.22",
+  "version": "0.0.1-beta.23",
   "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",