From e9c66dd358c2d4e75a38855945b91a74b0b0dced Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Fri, 15 Sep 2023 16:00:40 +0200
Subject: [PATCH] Docs(web-react): Add Modal demo #DS-902

Modal demo in web-react is now same as in web and web-twig
---
 .../src/components/Modal/demo/Modal.tsx       |  49 ------
 .../components/Modal/demo/ModalDefault.tsx    | 151 ++++++++++++++++++
 .../Modal/demo/ModalScrollingLongContent.tsx  | 138 ++++++++++++++++
 .../components/Modal/demo/ModalStacking.tsx   |  67 ++++++++
 .../src/components/Modal/demo/index.tsx       |  40 ++---
 5 files changed, 376 insertions(+), 69 deletions(-)
 delete mode 100644 packages/web-react/src/components/Modal/demo/Modal.tsx
 create mode 100644 packages/web-react/src/components/Modal/demo/ModalDefault.tsx
 create mode 100644 packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx
 create mode 100644 packages/web-react/src/components/Modal/demo/ModalStacking.tsx

diff --git a/packages/web-react/src/components/Modal/demo/Modal.tsx b/packages/web-react/src/components/Modal/demo/Modal.tsx
deleted file mode 100644
index 40b81f0a25..0000000000
--- a/packages/web-react/src/components/Modal/demo/Modal.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import React, { useState } from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
-import Modal from '../Modal';
-import ModalDialog from '../ModalDialog';
-import ModalBody from '../ModalBody';
-import ModalHeader from '../ModalHeader';
-import ModalFooter from '../ModalFooter';
-import { Button } from '../../Button';
-
-const Story = () => {
-  const [isOpen, setOpen] = useState(false);
-
-  const toggleModal = () => setOpen(!isOpen);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    <IconsProvider value={icons}>
-      <div>
-        <Button onClick={toggleModal} aria-expanded={isOpen}>
-          Open Modal
-        </Button>
-      </div>
-      <Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
-        <ModalDialog preferredHeightOnMobile="500px">
-          <ModalHeader>Modal title</ModalHeader>
-          <ModalBody>Body</ModalBody>
-          <ModalFooter>
-            <Button color="primary" onClick={handleClose}>
-              Confirm
-            </Button>
-            <Button color="tertiary" onClick={handleClose}>
-              Cancel
-            </Button>
-          </ModalFooter>
-        </ModalDialog>
-      </Modal>
-    </IconsProvider>
-  );
-};
-
-export default Story;
diff --git a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
new file mode 100644
index 0000000000..77c9a12a54
--- /dev/null
+++ b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
@@ -0,0 +1,151 @@
+import React, { ChangeEvent, useState } from 'react';
+import { AlignmentXDictionaryType } from '../../..';
+import { Button, Checkbox, Modal, ModalBody, ModalDialog, ModalFooter, ModalHeader, Radio, TextField } from '../..';
+
+const ModalDefault = () => {
+  const [isFirstOpen, setFirstOpen] = useState(false);
+  const [isSecondOpen, setSecondOpen] = useState(false);
+  const [isThirdOpen, setThirdOpen] = useState(false);
+  const [footerAlign, setFooterAlign] = useState<AlignmentXDictionaryType>('right');
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleFirstModal = () => setFirstOpen(!isFirstOpen);
+  const toggleSecondModal = () => setSecondOpen(!isSecondOpen);
+  const toggleThirdModal = () => setThirdOpen(!isSecondOpen);
+  const toggleIsExpanded = () => setIsExpanded(!isExpanded);
+
+  const handleFirstClose = () => setFirstOpen(false);
+  const handleSecondClose = () => setSecondOpen(false);
+  const handleThirdClose = () => setThirdOpen(false);
+  const handleFooterAlignChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFooterAlign(e.target.value as AlignmentXDictionaryType);
+  };
+
+  return (
+    <>
+      <Button onClick={toggleFirstModal}>Open Modal</Button>
+
+      <Modal id="example_basic" isOpen={isFirstOpen} onClose={handleFirstClose}>
+        <ModalDialog isExpandedOnMobile={isExpanded}>
+          <ModalHeader id="example_basic">Modal Title</ModalHeader>
+          <ModalBody>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <form className="d-none d-tablet-block">
+              <div>Footer alignment (from tablet up):</div>
+              <Radio
+                id="footer_alignment_left"
+                UNSAFE_className="mr-600"
+                label="Left"
+                value="left"
+                name="footer_alignment"
+                autoComplete="off"
+                isChecked={footerAlign === 'left'}
+                onChange={handleFooterAlignChange}
+              />
+              <Radio
+                id="footer_alignment_center"
+                UNSAFE_className="mr-600"
+                label="Center"
+                value="center"
+                name="footer_alignment"
+                autoComplete="off"
+                isChecked={footerAlign === 'center'}
+                onChange={handleFooterAlignChange}
+              />
+              <Radio
+                id="footer_alignment_right"
+                UNSAFE_className="mr-600"
+                label="Right"
+                value="right"
+                name="footer_alignment"
+                autoComplete="off"
+                isChecked={footerAlign === 'right'}
+                onChange={handleFooterAlignChange}
+              />
+            </form>
+            <form className="d-tablet-none">
+              <Checkbox
+                id="expand_on_mobile"
+                label="Expand on mobile"
+                value="right"
+                autoComplete="off"
+                onChange={toggleIsExpanded}
+                isChecked={isExpanded}
+              />
+            </form>
+          </ModalBody>
+          <ModalFooter description="Optional description" alignmentX={footerAlign}>
+            <Button data-spirit-dismiss="modal" data-spirit-target="#example_basic">
+              Primary action
+            </Button>
+            <Button color="secondary" data-spirit-dismiss="modal" data-spirit-target="#example_basic">
+              Secondary action
+            </Button>
+          </ModalFooter>
+        </ModalDialog>
+      </Modal>
+
+      <Button onClick={toggleSecondModal}>Open Modal with a Form</Button>
+
+      <Modal id="example_form" isOpen={isSecondOpen} onClose={handleSecondClose}>
+        <ModalDialog elementType="form" method="dialog">
+          <ModalHeader>Modal with a Form</ModalHeader>
+          <ModalBody>
+            <TextField UNSAFE_className="mb-400" label="Label" id="textfield" placeholder="TextField" />
+            <p>
+              The primary action is a button with <code>type=&quot;submit&quot;</code> and closes the dialog on
+              submission.
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button type="submit">Primary action</Button>
+            <Button color="secondary" data-spirit-dismiss="modal" data-spirit-target="#example_form">
+              Secondary action
+            </Button>
+          </ModalFooter>
+        </ModalDialog>
+      </Modal>
+
+      <Button onClick={toggleThirdModal}>Open Modal with Custom Height</Button>
+
+      <Modal id="example_custom_height" isOpen={isThirdOpen} onClose={handleThirdClose}>
+        <ModalDialog
+          elementType="form"
+          isExpandedOnMobile={false}
+          maxHeightFromTabletUp="700px"
+          method="dialog"
+          preferredHeightOnMobile="400px"
+          preferredHeightFromTabletUp="500px"
+        >
+          <ModalHeader>Modal with Custom Height</ModalHeader>
+          <ModalBody>
+            <p className="d-tablet-none">
+              This modal has a custom height of <code>400px</code>.
+              <br />
+              <br />
+              The max height cannot be customized on mobile though.
+            </p>
+            <p className="d-none d-tablet-block">
+              This modal has a custom height of <code>500px</code>.
+              <br />
+              <br />
+              The max height of this modal is <code>700px</code>.
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button type="submit">Primary action</Button>
+            <Button color="secondary" data-spirit-dismiss="modal" data-spirit-target="#example_custom_height">
+              Secondary action
+            </Button>
+          </ModalFooter>
+        </ModalDialog>
+      </Modal>
+    </>
+  );
+};
+
+export default ModalDefault;
diff --git a/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx b/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx
new file mode 100644
index 0000000000..7e8a95a966
--- /dev/null
+++ b/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx
@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+import { Button, Modal, ModalBody, ModalDialog, ModalFooter, ModalHeader, ScrollView } from '../..';
+
+const ModalScrollingLongContent = () => {
+  const [isFirstOpen, setFirstOpen] = useState(false);
+  const [isSecondOpen, setSecondOpen] = useState(false);
+
+  const toggleFirstModal = () => setFirstOpen(!isFirstOpen);
+  const toggleSecondModal = () => setSecondOpen(!isSecondOpen);
+
+  const handleFirstClose = () => setFirstOpen(false);
+  const handleSecondClose = () => setSecondOpen(false);
+
+  return (
+    <>
+      <Button onClick={toggleFirstModal}>Open Modal with Long Content</Button>
+
+      <Modal id="example_long_content" isOpen={isFirstOpen} onClose={handleFirstClose}>
+        <ModalDialog>
+          <ModalHeader>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta
+          </ModalHeader>
+          <ModalBody>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button data-spirit-dismiss="modal" onClick={handleFirstClose}>
+              Primary action
+            </Button>
+            <Button color="secondary" onClick={handleFirstClose}>
+              Secondary action
+            </Button>
+          </ModalFooter>
+        </ModalDialog>
+      </Modal>
+
+      <Button onClick={toggleSecondModal}>Open Modal with ScrollView</Button>
+
+      <Modal id="example_scroll_view" isOpen={isSecondOpen} onClose={handleSecondClose}>
+        <ModalDialog>
+          <ModalHeader>Modal with ScrollView</ModalHeader>
+          <ScrollView data-spirit-toggle="scrollView" overflowDecorators="both">
+            <ModalBody>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam
+                mollitia perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus
+                perferendis provident unde. Eveniet, iste, molestiae?
+              </p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam
+                mollitia perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus
+                perferendis provident unde. Eveniet, iste, molestiae?
+              </p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam
+                mollitia perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus
+                perferendis provident unde. Eveniet, iste, molestiae?
+              </p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam
+                mollitia perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus
+                perferendis provident unde. Eveniet, iste, molestiae?
+              </p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam
+                mollitia perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus
+                perferendis provident unde. Eveniet, iste, molestiae?
+              </p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam
+                mollitia perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus
+                perferendis provident unde. Eveniet, iste, molestiae?
+              </p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam
+                mollitia perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus
+                perferendis provident unde. Eveniet, iste, molestiae?
+              </p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam
+                mollitia perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus
+                perferendis provident unde. Eveniet, iste, molestiae?
+              </p>
+            </ModalBody>
+          </ScrollView>
+          <ModalFooter>
+            <Button onClick={handleSecondClose}>Primary action</Button>
+            <Button color="secondary" onClick={handleSecondClose}>
+              Secondary action
+            </Button>
+          </ModalFooter>
+        </ModalDialog>
+      </Modal>
+    </>
+  );
+};
+
+export default ModalScrollingLongContent;
diff --git a/packages/web-react/src/components/Modal/demo/ModalStacking.tsx b/packages/web-react/src/components/Modal/demo/ModalStacking.tsx
new file mode 100644
index 0000000000..6b6ba0fae7
--- /dev/null
+++ b/packages/web-react/src/components/Modal/demo/ModalStacking.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Button, Modal, ModalBody, ModalDialog, ModalFooter, ModalHeader } from '../..';
+
+const ModalStacking = () => {
+  const [isFirstOpen, setFirstOpen] = useState(false);
+  const [isSecondOpen, setSecondOpen] = useState(false);
+
+  const toggleFirstModal = () => setFirstOpen(!isFirstOpen);
+  const toggleSecondModal = () => setSecondOpen(!isSecondOpen);
+
+  const handleFirstClose = () => setFirstOpen(false);
+  const handleSecondClose = () => setSecondOpen(false);
+
+  return (
+    <>
+      <Button onClick={toggleFirstModal}>Open Modal</Button>
+
+      <Modal id="example_stacking_parent" isOpen={isFirstOpen} onClose={handleFirstClose}>
+        <ModalDialog>
+          <ModalHeader>Modal Title</ModalHeader>
+          <ModalBody>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={toggleSecondModal}>Open stacked dialog</Button>
+          </ModalFooter>
+        </ModalDialog>
+      </Modal>
+
+      <Modal id="example_stacking_nested" isOpen={isSecondOpen} onClose={handleSecondClose}>
+        <ModalDialog>
+          <ModalHeader>Stacked Modal Title</ModalHeader>
+          <ModalBody>
+            <p>
+              Dolor quis metus a lorem, et elit pulvinar ligula condimentum non congue rhoncus molestie, at sem viverra
+              maximus nunc. Posuere pretium accumsan, pharetra vel integer sit amet volutpat neque fringilla, non mauris
+              erat id augue libero. Porta non congue, et iaculis et vehicula convallis non purus placerat cursus,
+              rhoncus laoreet nec et elit. Proin luctus, bibendum adipiscing ut ollicitudin vehicula nisi nunc et,
+              sollicitudin eget tristique nec commodo. Porttitor ligula, tellus vehicula arcu vestibulum sed rutrum
+              placerat, dui quis facilisis eget. Suscipit molestie, nibh maximus enim vestibulum aenean ut libero sed
+              imperdiet, curabitur et elit venenatis posuere.
+              <br />
+              Sapien vitae, dui sollicitudin nullam dolor quis nec nulla sapien, diam a ollicitudin non nulla nisl. Quis
+              orci porta, ac nec sapien ornare imperdiet a vel convallis, adipiscing ullamcorper lectus quis pharetra.
+              At nullam rutrum, nisl eget sit amet pulvinar ultricies nec porta, diam a sem odio a mauris eu. Suscipit
+              sodales, fusce ante cursus convallis dui vel dolor potenti nulla fusce gravida.
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button type="submit" onClick={handleSecondClose}>
+              Primary action
+            </Button>
+            <Button color="secondary" onClick={handleSecondClose}>
+              Secondary action
+            </Button>
+          </ModalFooter>
+        </ModalDialog>
+      </Modal>
+    </>
+  );
+};
+
+export default ModalStacking;
diff --git a/packages/web-react/src/components/Modal/demo/index.tsx b/packages/web-react/src/components/Modal/demo/index.tsx
index 55bc13d58b..b8ee02eb55 100644
--- a/packages/web-react/src/components/Modal/demo/index.tsx
+++ b/packages/web-react/src/components/Modal/demo/index.tsx
@@ -1,28 +1,28 @@
+// Because there is no `dist` directory during the CI run
+/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: No declaration file
+import icons from '@lmc-eu/spirit-icons/dist/icons';
 import DocsSection from '../../../../docs/DocsSections';
-import Modal from './Modal';
-import ModalWithCustomHeight from './ModalWithCustomHeight';
-import ModalWithLongText from './ModalWithLongText';
-import ModalWithCheckbox from './ModalWithCheckbox';
-import ModalStacked from './ModalStacked';
+import { IconsProvider } from '../../../context';
+import ModalDefault from './ModalDefault';
+import ModalScrollingLongContent from './ModalScrollingLongContent';
+import ModalStacking from './ModalStacking';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <DocsSection title="Modal">
-      <Modal />
-    </DocsSection>
-    <DocsSection title="Modal with Custom Height">
-      <ModalWithCustomHeight />
-    </DocsSection>
-    <DocsSection title="Modal with Long Text">
-      <ModalWithLongText />
-    </DocsSection>
-    <DocsSection title="Modal with Checkbox">
-      <ModalWithCheckbox />
-    </DocsSection>
-    <DocsSection title="Modal Stacked">
-      <ModalStacked />
-    </DocsSection>
+    <IconsProvider value={icons}>
+      <DocsSection title="Modal">
+        <ModalDefault />
+      </DocsSection>
+      <DocsSection title="Scrolling Long Content">
+        <ModalScrollingLongContent />
+      </DocsSection>
+      <DocsSection title="Stacking Modals">
+        <ModalStacking />
+      </DocsSection>
+    </IconsProvider>
   </React.StrictMode>,
 );