docs(storybook): update modal dialog and modal (#783)

* docs(storybok): update modal dialog and modal

* docs(storybook): larrys comments fixed

* docs(storybook): update structure and variants

* docs(ModalDialog): add controls

* docs(storybook): larrys comments fixed

* docs(storybook): fix Larry's comments

* fix: remove invalid argTypes

---------

Co-authored-by: Pierre-Yves Lafleur <[email protected]>
Co-authored-by: LarryMatte <[email protected]>

packages/storybook/stories/modal-core.mdx

@@ -0,0 +1,35 @@
+import { Modal } from "@equisoft/design-elements-react";
+import { ArgTypes, Meta, Stories } from '@storybook/blocks';
+import * as ModalStories from './modal-core.stories';
+
+<Meta of={ModalStories} />
+
+# Modal (core)
+
+The `Modal (core)` component allows you to easily set custom modals up in your app. 
+
+## Import
+
+```js
+    import { Modal, useModal } from '@equisoft/design-elements-react'
+```
+
+## Accessibility
+
+It is important for users of screenreaders that other page content be hidden (via the aria-hidden attribute) while the modal is open. To allow `Modal` to do this, you should set `appElement` prop to a query selector identifying the root of your app. For example, if your app content is located inside an element with the ID `root`, you should set the `appElement` prop like this:
+
+```jsx
+<Modal
+    appElement="#storybook-root"
+    isOpen={isModalOpen}
+    onRequestClose={closeModal}
+>
+    Some Content
+</Modal>
+```
+
+## Props
+
+<ArgTypes of={Modal} />
+
+<Stories of={ModalStories} />

packages/storybook/stories/modal-core.stories.tsx

@@ -0,0 +1,110 @@
+import { Button, Modal, useModal } from '@equisoft/design-elements-react';
+import { StoryFn, StoryObj } from '@storybook/react';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+    title: 'Core/Modal (core)',
+    component: Modal,
+};
+
+type Story = StoryFn<typeof Modal>;
+
+export const Normal: Story = () => {
+    const { isModalOpen, closeModal, openModal } = useModal();
+    return (
+        <>
+            <Button label="Open Modal" buttonType="primary" onClick={openModal} />
+            <Modal
+                appElement="#storybook-root"
+                ariaLabel="Modal label"
+                ariaDescribedby="story-description"
+                isOpen={isModalOpen}
+                onRequestClose={closeModal}
+            >
+                <span id="story-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+            </Modal>
+        </>
+    );
+};
+
+export const PaddingDisabled: StoryObj<typeof Modal> = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'The prop `noPadding` removes padding to give you a blank modal to work with.',
+            },
+        },
+    },
+    render: () => {
+        const { isModalOpen, closeModal, openModal } = useModal();
+        return (
+            <>
+                <Button label="Open Modal" buttonType="primary" onClick={openModal} />
+                <Modal
+                    appElement="#storybook-root"
+                    ariaLabel="Modal label"
+                    ariaDescribedby="story-description"
+                    noPadding
+                    isOpen={isModalOpen}
+                    onRequestClose={closeModal}
+                >
+                    <span id="story-description">A modal without padding</span>
+                </Modal>
+            </>
+        );
+    },
+};
+
+export const WithoutCloseButton: Story = () => {
+    const { isModalOpen, closeModal, openModal } = useModal();
+    return (
+        <>
+            <Button label="Open Modal" buttonType="primary" onClick={openModal} />
+            <Modal
+                appElement="#storybook-root"
+                ariaLabel="Modal label"
+                hasCloseButton={false}
+                isOpen={isModalOpen}
+                onRequestClose={closeModal}
+            />
+        </>
+    );
+};
+
+export const WithHeader: Story = () => {
+    const { isModalOpen, closeModal, openModal } = useModal();
+    return (
+        <>
+            <Button label="Open Modal" buttonType="primary" onClick={openModal} />
+            <Modal
+                appElement="#storybook-root"
+                ariaLabel="Modal label"
+                ariaDescribedby="story-description"
+                isOpen={isModalOpen}
+                onRequestClose={closeModal}
+                modalHeader={<b>Header content</b>}
+            >
+                <span id="story-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+            </Modal>
+        </>
+    );
+};
+
+export const WithFooter: Story = () => {
+    const { isModalOpen, closeModal, openModal } = useModal();
+    return (
+        <>
+            <Button label="Open Modal" buttonType="primary" onClick={openModal} />
+            <Modal
+                appElement="#storybook-root"
+                ariaLabel="Modal label"
+                ariaDescribedby="story-description"
+                isOpen={isModalOpen}
+                onRequestClose={closeModal}
+                modalFooter={<b>Footer content</b>}
+            >
+                <span id="story-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+            </Modal>
+        </>
+    );
+};