@nulogy/components 15.2.1 → 15.2.2

package/dist/src/Modal/Modal.story.d.ts

@@ -1,66 +1,44 @@
+import type { StoryObj } from "@storybook/react";
 import React from "react";
+import { Modal as NDSModal } from "../index";
 declare const _default: {
     title: string;
-};
-export default _default;
-export declare const _Modal: () => React.JSX.Element;
-export declare const WithCloseButton: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithScrollingContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithScrollingContentWithoutFooterContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithNoTitle: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithNoFooterContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomMaxWidth: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithSelect: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithSelectAndScrollingContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithParentSelector: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ExampleControlledModal: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    component: React.FC<React.PropsWithChildren<{
+        isOpen?: boolean;
+        title?: string;
+        ariaLabel?: string;
+        onRequestClose?: (...args: any[]) => any;
+        closeAriaLabel?: string;
+        onAfterOpen?: (...args: any[]) => any;
+        shouldFocusAfterRender?: boolean;
+        shouldReturnFocusAfterClose?: boolean;
+        ariaDescribedBy?: string;
+        maxWidth?: string;
+        portalClassName?: string;
+        overlayClassName?: string;
+        className?: string;
+        id?: string;
+        appElement?: JSX.Element;
+        ariaHideApp?: boolean;
+        footerContent?: React.ReactNode;
+        parentSelector?: (...args: any) => HTMLElement;
+    }>> & {
+        setAppElement: (element: string | HTMLElement) => void;
+    };
+    args: {
+        ariaHideApp: false;
     };
 };
+export default _default;
+type Story = StoryObj<typeof NDSModal>;
+export declare const Default: Story;
+export declare const WithCloseButton: Story;
+export declare const WithScrollingContent: Story;
+export declare const WithScrollingContentWithoutFooterContent: Story;
+export declare const WithNoTitle: Story;
+export declare const WithNoFooterContent: Story;
+export declare const WithCustomMaxWidth: Story;
+export declare const WithSelect: Story;
+export declare const WithSelectAndScrollingContent: Story;
+export declare const WithParentSelector: Story;
+export declare const ExampleControlledModal: Story;

package/dist/src/Modal/Modal.story.js

@@ -1,12 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { Modal as NDSModal, Button, QuietButton, PrimaryButton, ButtonGroup, Form, Input, Select, Text, DatePicker, } from "../index";
-const env = process.env.NODE_ENV;
-if (env !== "test")
-    NDSModal.setAppElement("#root");
-const envProps = {
-    ariaHideApp: env === "test" ? false : undefined,
-};
-const Modal = (props) => React.createElement(NDSModal, Object.assign({}, envProps, props));
+if (process.env.NODE_ENV !== "test")
+    NDSModal.setAppElement("#storybook-root");
 const options = [
     { value: "accepted", label: "Accepted" },
     { value: "assigned", label: "Assigned to a line" },
@@ -16,105 +11,135 @@ const options = [
     { value: "progress", label: "In progress" },
     { value: "quarantine", label: "In quarantine" },
 ];
-class ModalExample extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isOpen: false,
-        };
-        this.openModal = this.openModal.bind(this);
-        this.closeModal = this.closeModal.bind(this);
-    }
-    openModal() {
-        this.setState({ isOpen: true });
-    }
-    closeModal() {
-        this.setState({ isOpen: false });
-    }
-    render() {
-        const { isOpen } = this.state;
-        const controlledModalButtons = (React.createElement(ButtonGroup, null,
-            React.createElement(PrimaryButton, { type: "submit", form: "myForm" }, "Add job to line"),
-            React.createElement(QuietButton, { onClick: this.closeModal }, "Cancel")));
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Button, { onClick: this.openModal }, "Open Modal"),
-            React.createElement(Modal, { title: "Edit Profile", footerContent: controlledModalButtons, onRequestClose: this.closeModal, isOpen: isOpen, maxWidth: "456px" },
-                React.createElement(Form, { id: "myForm", mb: "x2" },
-                    React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-                    React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-                    React.createElement(DatePicker, { selected: new Date("Fri, 01 Jan 2019"), dateFormat: "MMMM d, yyyy", onChange: (val) => val, onInputChange: (val) => val })))));
-    }
-}
-const modalButtons = (React.createElement(ButtonGroup, null,
+const ModalButtons = (React.createElement(ButtonGroup, null,
     React.createElement(PrimaryButton, null, "Add job to line"),
     React.createElement(QuietButton, null, "Cancel")));
 export default {
     title: "Components/Modal",
+    component: NDSModal,
+    args: {
+        ariaHideApp: process.env.NODE_ENV === "test" ? false : undefined,
+    },
+};
+export const Default = {
+    args: {
+        children: "Content Content Content",
+        title: "Modal Title",
+        footerContent: ModalButtons,
+        onRequestClose: () => { },
+    },
 };
-export const _Modal = () => (React.createElement(Modal, { footerContent: modalButtons, title: "Modal Title" }, "Content Content Content"));
-export const WithCloseButton = () => (React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons, onRequestClose: () => { } }, "Content Content Content"));
-WithCloseButton.story = {
+export const WithCloseButton = {
+    args: {
+        children: "Content Content Content",
+        title: "Modal Title",
+        footerContent: ModalButtons,
+        onRequestClose: () => { },
+    },
     name: "with close button",
 };
-export const WithScrollingContent = () => (React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons },
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content")));
-WithScrollingContent.story = {
+export const WithScrollingContent = {
+    args: {
+        title: "Modal Title",
+        footerContent: ModalButtons,
+        children: (React.createElement(React.Fragment, null,
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"))),
+    },
     name: "with scrolling content",
 };
-export const WithScrollingContentWithoutFooterContent = () => (React.createElement(Modal, { title: "Modal Title" },
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
-    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content")));
-WithScrollingContentWithoutFooterContent.story = {
+export const WithScrollingContentWithoutFooterContent = {
+    args: {
+        title: "Modal Title",
+        children: (React.createElement(React.Fragment, null,
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+            React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"))),
+    },
     name: "with scrolling content without footer content",
 };
-export const WithNoTitle = () => React.createElement(Modal, { footerContent: modalButtons }, "Content Content Content");
-WithNoTitle.story = {
+export const WithNoTitle = {
+    args: {
+        children: "Content Content Content",
+        footerContent: ModalButtons,
+    },
     name: "with no title",
 };
-export const WithNoFooterContent = () => (React.createElement(Modal, { title: "Without footerContent", onRequestClose: () => { } }, "Content Content Content"));
-WithNoFooterContent.story = {
+export const WithNoFooterContent = {
+    args: {
+        children: "Content Content Content",
+        title: "Without footerContent",
+        onRequestClose: () => { },
+    },
     name: "with no footerContent",
 };
-export const WithCustomMaxWidth = () => (React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons, maxWidth: "1000px" }, "Content Content Content"));
-WithCustomMaxWidth.story = {
+export const WithCustomMaxWidth = {
+    args: {
+        children: "Content Content Content",
+        title: "Modal Title",
+        footerContent: ModalButtons,
+        maxWidth: "1000px",
+    },
     name: "with custom maxWidth",
 };
-export const WithSelect = () => (React.createElement(Modal, { title: "Edit Profile", footerContent: modalButtons, onRequestClose: () => { }, maxWidth: "456px" },
-    React.createElement(Form, { id: "myForm", mb: "x2" },
-        React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))));
-WithSelect.story = {
+export const WithSelect = {
+    args: {
+        title: "Edit Profile",
+        footerContent: ModalButtons,
+        maxWidth: "456px",
+        onRequestClose: () => { },
+        children: (React.createElement(Form, { id: "myForm", mb: "x2" },
+            React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))),
+    },
     name: "with select",
 };
-export const WithSelectAndScrollingContent = () => (React.createElement(Modal, { title: "Edit Profile", footerContent: modalButtons, onRequestClose: () => { }, maxWidth: "456px" },
-    React.createElement(Form, { id: "myForm", mb: "x2" },
-        React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-        React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-        React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-        React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-        React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
-        React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
-        React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))));
-WithSelectAndScrollingContent.story = {
+export const WithSelectAndScrollingContent = {
+    args: {
+        title: "Edit Profile",
+        footerContent: ModalButtons,
+        maxWidth: "456px",
+        onRequestClose: () => { },
+        children: (React.createElement(Form, { id: "myForm", mb: "x2" },
+            React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+            React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+            React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+            React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+            React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+            React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+            React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))),
+    },
     name: "with select and scrolling content",
 };
-export const WithParentSelector = () => {
-    const id = "wrapper";
-    return (React.createElement("div", { id: id },
-        React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons, parentSelector: () => document.getElementById(id) }, "Content")));
-};
-WithParentSelector.story = {
+export const WithParentSelector = {
+    args: {
+        title: "Modal Title",
+        footerContent: ModalButtons,
+        parentSelector: () => document.getElementById("parent-selector"),
+    },
     name: "with a parent selector",
+    render: (args) => (React.createElement("div", { id: "parent-selector" },
+        React.createElement(NDSModal, Object.assign({}, args), "Content"))),
 };
-export const ExampleControlledModal = () => React.createElement(ModalExample, null);
-ExampleControlledModal.story = {
+export const ExampleControlledModal = {
+    render: () => React.createElement(ModalExample, null),
     name: "example controlled modal",
 };
+const ModalExample = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal"),
+        React.createElement(NDSModal, { title: "Edit Profile", footerContent: React.createElement(ButtonGroup, null,
+                React.createElement(PrimaryButton, { type: "submit", form: "myForm" }, "Add job to line"),
+                React.createElement(QuietButton, { onClick: () => setIsOpen(false) }, "Cancel")), onRequestClose: () => setIsOpen(false), isOpen: isOpen, maxWidth: "456px" },
+            React.createElement(Form, { id: "myForm", mb: "x2" },
+                React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+                React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+                React.createElement(DatePicker, { selected: new Date("Fri, 01 Jan 2019"), dateFormat: "MMMM d, yyyy", onChange: (val) => val, onInputChange: (val) => val })))));
+};

package/dist/src/NDSProvider/renderWithNDSProvider.spec-utils.d.ts

@@ -1 +1,2 @@
-export declare const renderWithNDSProvider: (component: any, locale?: string) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+import { type ReactNode } from "react";
+export declare const renderWithNDSProvider: (component: ReactNode, locale?: string) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;