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

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

@@ -308,6 +308,14 @@ $app-header-color: #007acc;
   color: var(--o3-color-, #33302e);
   float: right;
   margin-top: var(--o3-spacing-2xs);
+  &
+    :is(
+      .o3-button.o3-button--ghost[data-o3-theme='neutral'],
+      :where([data-o3-theme='neutral']) .o3-button.o3-button--ghost
+    ):hover {
+    background-color: unset;
+    border: unset;
+  }
 }
 
 /* Inlined from ../components/Loader/styles.scss */
@@ -368,7 +376,7 @@ $app-header-color: #007acc;
 .qanda-container {
   .overlay {
     position: fixed;
-    top: 0;
+    top: var(--safe-area-inset-top, 0px);
     left: 0;
     /* Just going on top of the main navigation */
     z-index: 100;
@@ -384,10 +392,7 @@ $app-header-color: #007acc;
     z-index: 19;
     animation: fadeIn 1s ease forwards;
     background: var(--o3-color-palette-black-90);
-  }
-
-  .overlay__outer--no-background {
-    background: none;
+    margin-top: calc(var(--safe-area-inset-top, 0px) / 2);
   }
 
   .overlay__inner {
@@ -672,7 +677,7 @@ $app-header-color: #007acc;
 
 .qanda-container {
   .qanda__stream {
-    margin-top: var(--o3-spacing-l);
+    margin: var(--o3-spacing-l) var(--o3-spacing-xs5) 0 var(--o3-spacing-xs5);
   }
 
   .qanda__stream-title {
@@ -706,6 +711,7 @@ $app-header-color: #007acc;
     display: flex;
     flex-direction: column;
     gap: var(--o3-spacing-4xs);
+    margin-left: var(--o3-spacing-2xs);
   }
 
   .message-box__content-link {

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