@simplybusiness/mobius 4.6.2 → 4.6.4

package/dist/cjs/components/Container/Container.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Container } from "./Container";
+type StoryType = StoryObj<typeof Container>;
+declare const meta: Meta<typeof Container>;
+export declare const Normal: StoryType;
+export default meta;

package/dist/cjs/components/Container/Container.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Container_1 = require("./Container");
+const meta = {
+    title: "Layout/Container",
+    component: Container_1.Container,
+};
+exports.Normal = {
+    render: (args) => ((0, jsx_runtime_1.jsx)(Container_1.Container, Object.assign({}, args, { children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus deleniti architecto, expedita ex maxime eum. Reiciendis, natus? Voluptatibus error beatae praesentium molestias saepe dolorem molestiae rem. Rem, eveniet beatae." }))),
+};
+exports.default = meta;
+//# sourceMappingURL=Container.stories.js.map

package/dist/cjs/components/Container/Container.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.stories.js","sourceRoot":"","sources":["../../../../src/components/Container/Container.stories.tsx"],"names":[],"mappings":";;;;AACA,2CAAwD;AAIxD,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,qBAAS;CACrB,CAAC;AAEW,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAoB,EAAE,EAAE,CAAC,CAChC,uBAAC,qBAAS,oBAAK,IAAI,iQAKP,CACb;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/Container/Container.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Container/Container.test.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+const CLASS_NAME = "mobius/Container";
+describe("Container", () => {
+    it("should render without errors", () => {
+        const component = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { children: "test" }));
+        expect(component).toBeTruthy();
+    });
+    it("should use the provided elementType", () => {
+        var _a;
+        const component = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { elementType: "span", children: "test" }));
+        expect((_a = component.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.tagName).toBe("SPAN");
+    });
+    describe("given elementType", () => {
+        it("is not applied as element attribute", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { elementType: "span" }));
+            expect(container.firstChild).not.toHaveAttribute("elementtype", "span");
+        });
+    });
+    describe("uses correct class names", () => {
+        it("uses Mobius class", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { "data-testid": "test", children: "Sample text" }));
+            expect(react_1.screen.getByTestId("test")).toHaveClass("mobius");
+        });
+        it("uses base Mobius class", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { "data-testid": "test", children: "Sample text" }));
+            expect(react_1.screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+        });
+        it("includes custom class name", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { className: "my-class", "data-testid": "test", children: "Sample Text" }));
+            expect(react_1.screen.getByTestId("test")).toHaveClass("my-class");
+            expect(react_1.screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+        });
+    });
+});
+//# sourceMappingURL=Container.test.js.map

package/dist/cjs/components/Container/Container.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.test.js","sourceRoot":"","sources":["../../../../src/components/Container/Container.test.tsx"],"names":[],"mappings":";;;AACA,kDAAwD;AACxD,wBAA8B;AAE9B,MAAM,UAAU,GAAG,kBAAkB,CAAC;AAEtC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,uBAAC,YAAS,uBAAiB,CAAC,CAAC;QACtD,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;;QAC7C,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,uBAAC,YAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,CAAC,CAAC;QACzE,MAAM,CAAC,MAAA,SAAS,CAAC,SAAS,CAAC,iBAAiB,0CAAE,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;QACjC,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;YAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,uBAAC,YAAS,IAAC,WAAW,EAAC,MAAM,GAAG,CAAC,CAAC;YAC/D,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAC1E,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACxC,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;YAC3B,IAAA,cAAM,EAAC,uBAAC,YAAS,mBAAa,MAAM,4BAAwB,CAAC,CAAC;YAC9D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;YAChC,IAAA,cAAM,EAAC,uBAAC,YAAS,mBAAa,MAAM,4BAAwB,CAAC,CAAC;YAC9D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;YACpC,IAAA,cAAM,EACJ,uBAAC,YAAS,IAAC,SAAS,EAAC,UAAU,iBAAa,MAAM,4BAEtC,CACb,CAAC;YACF,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC3D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/components/Container/index.d.ts

@@ -0,0 +1 @@
+export * from "./Container";

package/dist/cjs/components/Divider/Divider.d.ts

@@ -0,0 +1,11 @@
+import { AriaAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+export interface DividerProps extends DOMProps {
+    className?: string;
+    "aria-orientation"?: AriaAttributes["aria-orientation"];
+}
+declare const Divider: {
+    ({ "aria-orientation": ariaOrientation, className, ...rest }: DividerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Divider };

package/dist/cjs/components/Divider/Divider.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Divider } from "./Divider";
+type StoryType = StoryObj<typeof Divider>;
+declare const meta: Meta<typeof Divider>;
+export declare const Normal: StoryType;
+export default meta;

package/dist/cjs/components/Divider/Divider.stories.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Divider_1 = require("./Divider");
+const utils_1 = require("../../utils");
+const meta = {
+    title: "Components/Divider",
+    component: Divider_1.Divider,
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)(utils_1.StoryContainer, { children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.Normal = {
+    render: (args) => (0, jsx_runtime_1.jsx)(Divider_1.Divider, Object.assign({}, args)),
+};
+exports.default = meta;
+//# sourceMappingURL=Divider.stories.js.map

package/dist/cjs/components/Divider/Divider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.stories.js","sourceRoot":"","sources":["../../../../src/components/Divider/Divider.stories.tsx"],"names":[],"mappings":";;;;AACA,uCAAkD;AAClD,uCAA6C;AAI7C,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,iBAAO;IAClB,UAAU,EAAE;QACV,KAAK,CAAC,EAAE,CAAC,CACP,uBAAC,sBAAc,cACb,uBAAC,KAAK,KAAG,GACM,CAClB;KACF;CACF,CAAC;AAEW,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAkB,EAAE,EAAE,CAAC,uBAAC,iBAAO,oBAAK,IAAI,EAAI;CACtD,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/Divider/Divider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Divider/Divider.test.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+const CLASS_NAME = "mobius/Divider";
+describe("Divider", () => {
+    it("should render without errors", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Divider, {}));
+    });
+    it("renders as a hr element by default", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Divider, {}));
+        expect(react_1.screen.getByRole("separator")).toBeInTheDocument();
+    });
+    describe("uses correct class names", () => {
+        it("uses mobius class", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Divider, {}));
+            expect(react_1.screen.getByRole("separator")).toHaveClass("mobius");
+        });
+        it("uses base Mobius class", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Divider, {}));
+            expect(react_1.screen.getByRole("separator")).toHaveClass(CLASS_NAME);
+        });
+        it("includes custom class name", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Divider, { className: "my-class" }));
+            expect(react_1.screen.getByRole("separator")).toHaveClass("my-class");
+            expect(react_1.screen.getByRole("separator")).toHaveClass(CLASS_NAME);
+        });
+    });
+});
+//# sourceMappingURL=Divider.test.js.map

package/dist/cjs/components/Divider/Divider.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.test.js","sourceRoot":"","sources":["../../../../src/components/Divider/Divider.test.tsx"],"names":[],"mappings":";;;AAAA,kDAAwD;AACxD,wBAA4B;AAE5B,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAEpC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EAAC,uBAAC,UAAO,KAAG,CAAC,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,IAAA,cAAM,EAAC,uBAAC,UAAO,KAAG,CAAC,CAAC;QACpB,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACxC,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;YAC3B,IAAA,cAAM,EAAC,uBAAC,UAAO,KAAG,CAAC,CAAC;YACpB,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC9D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;YAChC,IAAA,cAAM,EAAC,uBAAC,UAAO,KAAG,CAAC,CAAC;YACpB,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAChE,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;YACpC,IAAA,cAAM,EAAC,uBAAC,UAAO,IAAC,SAAS,EAAC,UAAU,GAAG,CAAC,CAAC;YACzC,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC9D,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/components/Divider/index.d.ts

@@ -0,0 +1 @@
+export * from "./Divider";

package/dist/cjs/components/Drawer/Content.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, Ref, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+export type DivRef = Ref<HTMLDivElement>;
+export type DivElementType = HTMLDivElement;
+export interface ContentProps extends DOMProps, RefAttributes<DivElementType> {
+    children?: ReactNode;
+    onClose?: () => void;
+    closeLabel?: string;
+}
+declare const Content: import("react").ForwardRefExoticComponent<Omit<ContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export { Content };

package/dist/cjs/components/Drawer/Drawer.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+export interface DrawerProps {
+    isOpen: boolean;
+    /**
+     * Direction that drawer will open from
+     */
+    direction: "top" | "bottom" | "left" | "right";
+    className?: string;
+    closeLabel?: string;
+    /**
+     * Announce text for screen readers when drawer opens
+     */
+    announce?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    children?: ReactNode;
+}
+declare const Drawer: {
+    ({ isOpen, className, closeLabel, direction, announce, onOpen, onClose, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Drawer };

package/dist/cjs/components/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Drawer } from ".";
+type StoryType = StoryObj<typeof Drawer>;
+declare const meta: Meta<typeof Drawer>;
+export declare const Normal: StoryType;
+export declare const WithLogoHeader: StoryType;
+export declare const WithLongContent: StoryType;
+export default meta;

package/dist/cjs/components/Drawer/Drawer.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLongContent = exports.WithLogoHeader = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const utils_1 = require("../../utils");
+const Button_1 = require("../Button");
+const Text_1 = require("../Text");
+const meta = {
+    title: "Components/Drawer",
+    component: _1.Drawer,
+    argTypes: Object.assign({ direction: {
+            options: ["top", "bottom", "left", "right"],
+            control: { type: "radio" },
+        } }, (0, utils_1.excludeControls)("isOpen")),
+};
+const Demo = ({ direction, closeLabel }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Drawer" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, { isOpen: open, onClose: () => setOpen(false), direction: direction, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "The Latin Drawer" }), (0, jsx_runtime_1.jsx)(_1.Drawer.Content, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] })] }));
+};
+const LogoHeader = ({ direction, closeLabel }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Drawer" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, { isOpen: open, onClose: () => setOpen(false), direction: direction, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: (0, jsx_runtime_1.jsx)("img", { src: "https://quote.simplybusiness.com/assets/logos/insurers/harborway_insurance-1a46ba508f3dfcc89aa2498e7680ed15bd1704ccb01c614eb5335bd7b25e0537.png", alt: "Provider logo" }) }), (0, jsx_runtime_1.jsx)(_1.Drawer.Content, { children: "Content." })] })] }));
+};
+const WithLongContentDemo = (props) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Drawer" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, Object.assign({}, props, { isOpen: open, onClose: () => setOpen(false), children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "Aliquam fringilla quam vel purus rhoncus isuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Int" }), (0, jsx_runtime_1.jsxs)(_1.Drawer.Content, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] })] }))] }));
+};
+exports.Normal = {
+    render: (args) => (0, jsx_runtime_1.jsx)(Demo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        direction: "right",
+        closeLabel: "Close",
+    },
+};
+exports.WithLogoHeader = {
+    render: (args) => (0, jsx_runtime_1.jsx)(LogoHeader, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        direction: "right",
+        closeLabel: "Close",
+    },
+};
+exports.WithLongContent = {
+    render: (args) => (0, jsx_runtime_1.jsx)(WithLongContentDemo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        direction: "right",
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=Drawer.stories.js.map

package/dist/cjs/components/Drawer/Drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.stories.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Drawer/Drawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Drawer/Drawer.test.js

@@ -0,0 +1,123 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const react_2 = require("react");
+const _1 = require(".");
+const jestHTMLDialogPolyfill_1 = require("../../utils/jestHTMLDialogPolyfill");
+(0, jestHTMLDialogPolyfill_1.jestHTMLDialogPolyfill)();
+const DRAWER_CLASS_NAME = "mobius/Drawer";
+const DRAWER_CLOSE_CLASS_NAME = "mobius/DrawerClose";
+const mockMatchMedia = (matches) => {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(query => ({
+            matches,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        })),
+    });
+};
+describe("Drawer", () => {
+    beforeEach(() => {
+        mockMatchMedia(true);
+    });
+    afterAll(() => {
+        jest.resetAllMocks();
+    });
+    it("should render without errors", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, direction: "right", onClose: () => { } }));
+        expect(container).toBeTruthy();
+    });
+    it("should render with default class names", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, direction: "right", onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}) }));
+        const dialog = react_1.screen.getByRole("dialog");
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(dialog).toHaveClass(DRAWER_CLASS_NAME);
+        expect(closeButton).toHaveClass(DRAWER_CLOSE_CLASS_NAME);
+    });
+    it("should render with custom class name", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { direction: "right", className: "my-test-modal", isOpen: true, onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}) }));
+        const dialog = react_1.screen.getByRole("dialog");
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(dialog).toHaveClass(DRAWER_CLASS_NAME);
+        expect(dialog).toHaveClass("my-test-modal");
+        expect(closeButton).toHaveClass(DRAWER_CLOSE_CLASS_NAME);
+    });
+    describe("given the direction prop is set", () => {
+        it("should render with appropriate class name (right)", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "right" }));
+            const dialog = react_1.screen.getByRole("dialog");
+            expect(dialog).toHaveClass("--right");
+        });
+        it("should render with appropriate class name (bottom)", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "bottom" }));
+            const dialog = react_1.screen.getByRole("dialog");
+            expect(dialog).toHaveClass("--bottom");
+        });
+    });
+    describe("screen reader", () => {
+        it("should announce a default message on opening", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "right" }));
+            const message = react_1.screen.getByText("Drawer opened on screen");
+            expect(message).toBeInTheDocument();
+        });
+        it("should respect a custom announce message on opening", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "right", announce: "Quote details page" }));
+            const message = react_1.screen.getByText("Quote details page");
+            expect(message).toBeInTheDocument();
+        });
+    });
+    xdescribe("pressing close button", () => {
+        it("should close the modal", async () => {
+            const App = () => {
+                const [isOpen, setIsOpen] = (0, react_2.useState)(true);
+                return ((0, jsx_runtime_1.jsxs)(_1.Drawer, { direction: "right", isOpen: isOpen, onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "Header" }), (0, jsx_runtime_1.jsx)(_1.Drawer.Content, { children: "Sample content" })] }));
+            };
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(App, {}));
+            const modalContent = react_1.screen.getByText("Sample content");
+            expect(modalContent).toBeInTheDocument();
+            const closeButton = react_1.screen.getByLabelText("Close");
+            await user_event_1.default.click(closeButton);
+        });
+    });
+    describe("closeLabel prop", () => {
+        it("should render the label", () => {
+            const closeLabel = "Leave";
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Drawer, { direction: "right", isOpen: true, onClose: () => { }, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}), "Sample content"] }));
+            const closeButton = react_1.screen.getByText(closeLabel);
+            expect(closeButton).toBeInTheDocument();
+        });
+    });
+    it("should render the default close button", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, direction: "right", onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}) }));
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(closeButton).toBeInTheDocument();
+    });
+    it("should fire onOpen callback if supplied", async () => {
+        const onOpen = jest.fn();
+        const App = () => {
+            const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": "Show modal", id: "btn", type: "button", onClick: () => setIsOpen(true), children: "Show modal" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, { isOpen: isOpen, onClose: () => setIsOpen(false), direction: "right", onOpen: onOpen, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "Header" }), "Sample content"] })] }));
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(App, {}));
+        const showBtn = react_1.screen.getByText("Show modal");
+        expect(showBtn).toBeInTheDocument();
+        await user_event_1.default.click(showBtn);
+        expect(onOpen).toHaveBeenCalled();
+    });
+    it.todo("Drawer closes when Escape key is presed");
+    // JSDom does not support HTMLDialog click events
+    it.todo("Drawer closes when backdrop is clicked");
+});
+//# sourceMappingURL=Drawer.test.js.map

package/dist/cjs/components/Drawer/Drawer.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.test.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.test.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Drawer/Header.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, Ref, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+export type HeaderElementType = HTMLDivElement;
+export type HeaderRef = Ref<HTMLElement>;
+export interface HeaderProps extends DOMProps, RefAttributes<HeaderElementType> {
+    children?: ReactNode;
+    onClose?: () => void;
+    closeLabel?: string;
+}
+declare const Header: import("react").ForwardRefExoticComponent<Omit<HeaderProps, "ref"> & RefAttributes<HTMLElement>>;
+export { Header };

package/dist/cjs/components/Drawer/index.d.ts

@@ -0,0 +1,12 @@
+import { DivElementType as DrawerContentDivElementType, ContentProps as DrawerContentProps } from "./Content";
+import { DrawerProps } from "./Drawer";
+import { HeaderElementType as DrawerHeaderElementType, HeaderProps as DrawerHeaderProps } from "./Header";
+declare const Drawer: {
+    ({ isOpen, className, closeLabel, direction, announce, onOpen, onClose, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Header: import("react").ForwardRefExoticComponent<Omit<DrawerHeaderProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Drawer };
+export type { DrawerContentDivElementType, DrawerContentProps, DrawerHeaderElementType, DrawerHeaderProps, DrawerProps, };

package/dist/cjs/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,15 @@
+import { Ref, RefAttributes, ReactNode, ReactElement } from "react";
+import { DOMProps } from "../../types/dom";
+import { ForwardedRefComponent } from "../../types/components";
+export type DropdownMenuElementType = HTMLElement;
+export interface DropdownMenuProps extends DOMProps, RefAttributes<DropdownMenuElementType> {
+    children?: ReactNode;
+    /** Custom class name for setting specific CSS */
+    className?: string;
+    elementType?: string | React.ElementType;
+    label?: string;
+    trigger?: ReactElement;
+}
+export type DropdownMenuRef = Ref<DropdownMenuElementType>;
+declare const DropdownMenu: ForwardedRefComponent<DropdownMenuProps, DropdownMenuElementType>;
+export { DropdownMenu };

package/dist/cjs/components/DropdownMenu/DropdownMenu.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DropdownMenu } from ".";
+type StoryType = StoryObj<typeof DropdownMenu>;
+declare const meta: Meta<typeof DropdownMenu>;
+export declare const Normal: StoryType;
+export declare const WithCustomTrigger: StoryType;
+export default meta;

package/dist/cjs/components/DropdownMenu/DropdownMenu.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithCustomTrigger = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@simplybusiness/icons");
+const react_1 = require("react");
+const dedupe_1 = __importDefault(require("classnames/dedupe"));
+const _1 = require(".");
+const Icon_1 = require("../Icon");
+const utils_1 = require("../../utils");
+const meta = {
+    title: "Components/DropdownMenu",
+    component: _1.DropdownMenu,
+    argTypes: (0, utils_1.excludeControls)("trigger", "style"),
+    decorators: [
+        Story => {
+            // eslint-disable-next-line global-require
+            require("./DropdownMenu.story.styles.css");
+            return ((0, jsx_runtime_1.jsx)(utils_1.StoryContainer, { children: (0, jsx_runtime_1.jsx)(Story, {}) }));
+        },
+    ],
+};
+const CustomTrigger = (0, react_1.forwardRef)((props) => {
+    const { className, open } = props, otherProps = __rest(props, ["className", "open"]);
+    const classes = (0, dedupe_1.default)({
+        "--is-open": open,
+    });
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: className }, otherProps, { children: [open ? "Close" : "Open", " ", (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icons_1.chevronDown, className: classes })] })));
+});
+exports.Normal = {
+    render: (args) => ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: 300,
+        }, children: (0, jsx_runtime_1.jsxs)(_1.DropdownMenu, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }), (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "My details" }), (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Sign out" })] })) })),
+    args: {
+        label: "Menu",
+    },
+};
+exports.WithCustomTrigger = {
+    render: (args) => ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: 300,
+        }, className: "dropdownmenu-example-custom-trigger", children: (0, jsx_runtime_1.jsxs)(_1.DropdownMenu, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { onClick: () => alert("Clicked Home"), children: "Home" }), (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "My details" }), (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Sign out" })] })) })),
+    args: {
+        trigger: (0, jsx_runtime_1.jsx)(CustomTrigger, {}),
+    },
+    parameters: {
+        controls: {
+            exclude: ["label"],
+        },
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=DropdownMenu.stories.js.map

package/dist/cjs/components/DropdownMenu/DropdownMenu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.stories.js","sourceRoot":"","sources":["../../../../src/components/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,iDAAoD;AACpD,iCAAmC;AACnC,+DAA2C;AAC3C,wBAAoD;AACpD,kCAA+B;AAC/B,uCAA8D;AAI9D,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,eAAY;IACvB,QAAQ,EAAE,IAAA,uBAAe,EAAC,SAAS,EAAE,OAAO,CAAC;IAC7C,UAAU,EAAE;QACV,KAAK,CAAC,EAAE;YACN,0CAA0C;YAC1C,OAAO,CAAC,iCAAiC,CAAC,CAAC;YAE3C,OAAO,CACL,uBAAC,sBAAc,cACb,uBAAC,KAAK,KAAG,GACM,CAClB,CAAC;QACJ,CAAC;KACF;CACF,CAAC;AAOF,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,CAAC,KAAyB,EAAE,EAAE;IAC7D,MAAM,EAAE,SAAS,EAAE,IAAI,KAAoB,KAAK,EAApB,UAAU,UAAK,KAAK,EAA1C,qBAAkC,CAAQ,CAAC;IACjD,MAAM,OAAO,GAAG,IAAA,gBAAU,EAAC;QACzB,WAAW,EAAE,IAAI;KAClB,CAAC,CAAC;IACH,OAAO,CACL,kDAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,IAAM,UAAU,eACvD,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,OAAE,uBAAC,WAAI,IAAC,IAAI,EAAE,mBAAW,EAAE,SAAS,EAAE,OAAO,GAAI,KAClE,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEU,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAuB,EAAE,EAAE,CAAC,CACnC,gCACE,KAAK,EAAE;YACL,MAAM,EAAE,GAAG;SACZ,YAED,wBAAC,eAAY,oBAAK,IAAI,eACpB,uBAAC,eAAY,CAAC,IAAI,uBAAyB,EAC3C,uBAAC,eAAY,CAAC,IAAI,6BAA+B,EACjD,uBAAC,eAAY,CAAC,IAAI,2BAA6B,KAClC,GACX,CACP;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAEW,QAAA,iBAAiB,GAAc;IAC1C,MAAM,EAAE,CAAC,IAAuB,EAAE,EAAE,CAAC,CACnC,gCACE,KAAK,EAAE;YACL,MAAM,EAAE,GAAG;SACZ,EACD,SAAS,EAAC,qCAAqC,YAE/C,wBAAC,eAAY,oBAAK,IAAI,eAEpB,uBAAC,eAAY,CAAC,IAAI,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,qBAEnC,EACpB,uBAAC,eAAY,CAAC,IAAI,6BAA+B,EACjD,uBAAC,eAAY,CAAC,IAAI,2BAA6B,KAClC,GACX,CACP;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,uBAAC,aAAa,KAAG;KAC3B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,CAAC;SACnB;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/DropdownMenu/DropdownMenu.test.d.ts

@@ -0,0 +1 @@
+export {};