From d3197088fd09740520dfb5ebb235ae32838c925e Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Fri, 15 Sep 2023 16:00:40 +0200
Subject: [PATCH 1/2] 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>,
 );

From 6e05ca5611c746ab8f2feed2eea8a98017692924 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Tue, 19 Sep 2023 15:33:45 +0200
Subject: [PATCH 2/2] Docs(web): Add Modal demo #DS-902

- Modal demo in web is now same as in web-react and web-twig
---
 .../web/src/scss/components/Modal/index.html  | 1216 +++++++++--------
 1 file changed, 614 insertions(+), 602 deletions(-)

diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html
index 2680a93e64..9b40c6f055 100644
--- a/packages/web/src/scss/components/Modal/index.html
+++ b/packages/web/src/scss/components/Modal/index.html
@@ -4,674 +4,686 @@
 
   <h2 class="docs-Heading">Modal</h2>
 
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_basic"
-    aria-controls="example_basic"
-    aria-expanded="false"
-  >
-    Open Modal
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_basic" class="Modal" aria-labelledby="example_basic_title">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog ModalDialog--expandOnMobile">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_basic_title" class="ModalHeader__title">Modal Title</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_basic"
-          aria-controls="example_basic"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <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>
-        <!-- Footer alignment demo: start -->
-        <script>
-          const setFooterAlignment = (event) => {
-            const footerElement = document.querySelector('#example_basic .ModalFooter');
-
-            footerElement.classList.remove('ModalFooter--left', 'ModalFooter--center', 'ModalFooter--right');
-            footerElement.classList.add(`ModalFooter--${event.target.value}`);
-          };
-
-          const toggleExpandOnMobile = () => {
-            document.querySelector('#example_basic .ModalDialog').classList.toggle('ModalDialog--expandOnMobile');
-          }
-        </script>
-        <form onchange="setFooterAlignment(event)" class="d-none d-tablet-block">
-          <div>Footer alignment (from tablet up):</div>
-          <label for="footer_alignment_left" class="Radio mr-600">
-            <input type="radio" id="footer_alignment_left" name="footer_alignment" value="left" class="Radio__input" autocomplete="off" />
-            <span class="Radio__label">Left</span>
-          </label>
-          <label for="footer_alignment_center" class="Radio mr-600">
-            <input type="radio" id="footer_alignment_center" name="footer_alignment" value="center" class="Radio__input" autocomplete="off" />
-            <span class="Radio__label">Center</span>
-          </label>
-          <label for="footer_alignment_right" class="Radio mr-600">
-            <input type="radio" id="footer_alignment_right" name="footer_alignment" value="right" class="Radio__input" autocomplete="off" checked />
-            <span class="Radio__label">Right</span>
-          </label>
-        </form>
-        <form class="d-tablet-none">
-          <label for="expand_on_mobile" class="Checkbox">
-            <input type="checkbox" id="expand_on_mobile" class="Checkbox__input" onchange="toggleExpandOnMobile()" autocomplete="off" checked />
-            <span class="Checkbox__text">
-                <span class="Checkbox__label">Expand on mobile</span>
-              </span>
-          </label>
-        </form>
-        <!-- Footer alignment demo: end -->
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__description">
-          Optional description
-        </div>
-        <div class="ModalFooter__actions">
-          <button
-            type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-dismiss="modal"
-            data-spirit-target="#example_basic"
-          >
-            Primary action
-          </button>
+  <div class="docs-Stack docs-Stack--start">
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_basic"
+      aria-controls="example_basic"
+      aria-expanded="false"
+    >
+      Open Modal
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example_basic" class="Modal" aria-labelledby="example_basic_title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog ModalDialog--expandOnMobile">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_basic_title" class="ModalHeader__title">Modal Title</h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_basic"
+            aria-controls="example_basic"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <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>
+          <!-- Footer alignment demo: start -->
+          <script>
+            const setFooterAlignment = (event) => {
+              const footerElement = document.querySelector('#example_basic .ModalFooter');
+
+              footerElement.classList.remove('ModalFooter--left', 'ModalFooter--center', 'ModalFooter--right');
+              footerElement.classList.add(`ModalFooter--${event.target.value}`);
+            };
+
+            const toggleExpandOnMobile = () => {
+              document.querySelector('#example_basic .ModalDialog').classList.toggle('ModalDialog--expandOnMobile');
+            }
+          </script>
+          <form onchange="setFooterAlignment(event)" class="d-none d-tablet-block">
+            <div>Footer alignment (from tablet up):</div>
+            <label for="footer_alignment_left" class="Radio mr-600">
+              <input type="radio" id="footer_alignment_left" name="footer_alignment" value="left" class="Radio__input" autocomplete="off" />
+              <span class="Radio__label">Left</span>
+            </label>
+            <label for="footer_alignment_center" class="Radio mr-600">
+              <input type="radio" id="footer_alignment_center" name="footer_alignment" value="center" class="Radio__input" autocomplete="off" />
+              <span class="Radio__label">Center</span>
+            </label>
+            <label for="footer_alignment_right" class="Radio mr-600">
+              <input type="radio" id="footer_alignment_right" name="footer_alignment" value="right" class="Radio__input" autocomplete="off" checked />
+              <span class="Radio__label">Right</span>
+            </label>
+          </form>
+          <form class="d-tablet-none">
+            <label for="expand_on_mobile" class="Checkbox">
+              <input type="checkbox" id="expand_on_mobile" class="Checkbox__input" onchange="toggleExpandOnMobile()" autocomplete="off" checked />
+              <span class="Checkbox__text">
+                  <span class="Checkbox__label">Expand on mobile</span>
+                </span>
+            </label>
+          </form>
+          <!-- Footer alignment demo: end -->
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
-
-    </article>
-    <!-- ModalDialog: end -->
-
-  </dialog>
-  <!-- Modal: end -->
-
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_form"
-    aria-controls="example_form"
-    aria-expanded="false"
-  >
-    Open Modal with a Form
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_form" class="Modal" aria-labelledby="example_form_title">
-
-    <!-- ModalDialog: start -->
-    <form class="ModalDialog" method="dialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_form_title" class="ModalHeader__title">Modal with a Form</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_form"
-          aria-controls="example_form"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <div class="TextField mb-400">
-          <label for="textfield" class="TextField__label">Label</label>
-          <input type="text" id="textfield" class="TextField__input" placeholder="TextField" />
-        </div>
-        <p>
-          The primary action is a button with <code>type="submit"</code> and closes the dialog on submission.
-        </p>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button type="submit" class="Button Button--primary Button--medium">
-            Primary action
-          </button>
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__description">
+            Optional description
+          </div>
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_basic"
+            >
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_basic"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </article>
+      <!-- ModalDialog: end -->
+
+    </dialog>
+    <!-- Modal: end -->
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_form"
+      aria-controls="example_form"
+      aria-expanded="false"
+    >
+      Open Modal with a Form
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example_form" class="Modal" aria-labelledby="example_form_title">
+
+      <!-- ModalDialog: start -->
+      <form class="ModalDialog" method="dialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_form_title" class="ModalHeader__title">Modal with a Form</h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_form"
+            aria-controls="example_form"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <div class="TextField mb-400">
+            <label for="textfield" class="TextField__label">Label</label>
+            <input type="text" id="textfield" class="TextField__input" placeholder="TextField" />
+          </div>
+          <p>
+            The primary action is a button with <code>type="submit"</code> and closes the dialog on submission.
+          </p>
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
-
-    </form>
-    <!-- ModalDialog: end -->
-
-  </dialog>
-  <!-- Modal: end -->
-
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_custom_height"
-    aria-controls="example_custom_height"
-    aria-expanded="false"
-  >
-    Open Modal with Custom Height
-  </button>
-
-  <!-- Modal: start -->
-  <dialog
-    id="example_custom_height"
-    class="Modal"
-    aria-labelledby="example_custom_height_title"
-    style="--modal-preferred-height-mobile: 400px; --modal-preferred-height-tablet: 500px; --modal-max-height-tablet: 700px"
-  >
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_custom_height_title" class="ModalHeader__title">Modal with Custom Height</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_custom_height"
-          aria-controls="example_custom_height"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <p class="d-tablet-none">
-          This modal has a custom height of <code>400px</code> set via the <code>--modal-preferred-height-mobile</code> CSS
-          custom property.
-          <br /><br />
-          The max height cannot be customized on mobile though.
-        </p>
-        <p class="d-none d-tablet-block">
-          This modal has a custom height of <code>500px</code> set via the <code>--modal-preferred-height-tablet</code> CSS
-          custom property.
-          <br /><br />
-          The max height of this modal is <code>700px</code> set via the <code>--modal-max-height-tablet</code> CSS custom
-          property.
-        </p>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button
-            type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-dismiss="modal"
-            data-spirit-target="#example_custom_height"
-          >
-            Primary action
-          </button>
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button type="submit" class="Button Button--primary Button--medium">
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_form"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </form>
+      <!-- ModalDialog: end -->
+
+    </dialog>
+    <!-- Modal: end -->
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_custom_height"
+      aria-controls="example_custom_height"
+      aria-expanded="false"
+    >
+      Open Modal with Custom Height
+    </button>
+
+    <!-- Modal: start -->
+    <dialog
+      id="example_custom_height"
+      class="Modal"
+      aria-labelledby="example_custom_height_title"
+      style="--modal-preferred-height-mobile: 400px; --modal-preferred-height-tablet: 500px; --modal-max-height-tablet: 700px"
+    >
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_custom_height_title" class="ModalHeader__title">Modal with Custom Height</h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_custom_height"
+            aria-controls="example_custom_height"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <p class="d-tablet-none">
+            This modal has a custom height of <code>400px</code> set via the <code>--modal-preferred-height-mobile</code> CSS
+            custom property.
+            <br /><br />
+            The max height cannot be customized on mobile though.
+          </p>
+          <p class="d-none d-tablet-block">
+            This modal has a custom height of <code>500px</code> set via the <code>--modal-preferred-height-tablet</code> CSS
+            custom property.
+            <br /><br />
+            The max height of this modal is <code>700px</code> set via the <code>--modal-max-height-tablet</code> CSS custom
+            property.
+          </p>
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_custom_height"
+            >
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_custom_height"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
 
-    </article>
-    <!-- ModalDialog: end -->
+      </article>
+      <!-- ModalDialog: end -->
 
-  </dialog>
-  <!-- Modal: end -->
+    </dialog>
+    <!-- Modal: end -->
+
+  </div>
 
 </section>
 <section class="docs-Section">
   <h2 class="docs-Heading">Scrolling Long Content</h2>
 
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_long_content"
-    aria-controls="example_long_content"
-    aria-expanded="false"
-  >
-    Open Modal with Long Content
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_long_content" class="Modal" aria-labelledby="example_long_content_title">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_long_content_title" class="ModalHeader__title">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia perferendis reprehenderit, voluptate. Cum delectus dicta
-        </h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_long_content"
-          aria-controls="example_long_content"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <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>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button
-            type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-dismiss="modal"
-            data-spirit-target="#example_long_content"
-          >
-            Primary action
-          </button>
+  <div class="docs-Stack docs-Stack--start">
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_long_content"
+      aria-controls="example_long_content"
+      aria-expanded="false"
+    >
+      Open Modal with Long Content
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example_long_content" class="Modal" aria-labelledby="example_long_content_title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_long_content_title" class="ModalHeader__title">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia perferendis reprehenderit, voluptate. Cum delectus dicta
+          </h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_long_content"
+            aria-controls="example_long_content"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <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>
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
-
-    </article>
-    <!-- ModalDialog: end -->
-
-  </dialog>
-  <!-- Modal: end -->
-
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_scroll_view"
-    aria-controls="example_scroll_view"
-    aria-expanded="false"
-  >
-    Open Modal with ScrollView
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_scroll_view" class="Modal" aria-labelledby="example_scroll_view_title">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_scroll_view_title" class="ModalHeader__title">
-          Modal with ScrollView
-        </h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_scroll_view"
-          aria-controls="example_scroll_view"
-          aria-expanded="false"
-        >
-          <svg class="Icon" width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ScrollView: start -->
-      <div class="ScrollView ScrollView--vertical" data-spirit-toggle="scrollView">
-        <div class="ScrollView__viewport" data-spirit-element="viewport">
-          <div class="ScrollView__content" data-spirit-element="content">
-
-            <!-- ModalBody: start -->
-            <div class="ModalBody">
-              <!-- Content: start -->
-              <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>
-              <!-- Content: end -->
-            </div>
-            <!-- ModalBody: end -->
-
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_long_content"
+            >
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_long_content"
+            >
+              Secondary action
+            </button>
           </div>
-        </div>
-        <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true"></div>
-      </div>
-      <!-- ScrollView: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button
-            type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-dismiss="modal"
-            data-spirit-target="#example_scroll_view"
-          >
-            Primary action
-          </button>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </article>
+      <!-- ModalDialog: end -->
+
+    </dialog>
+    <!-- Modal: end -->
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_scroll_view"
+      aria-controls="example_scroll_view"
+      aria-expanded="false"
+    >
+      Open Modal with ScrollView
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example_scroll_view" class="Modal" aria-labelledby="example_scroll_view_title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_scroll_view_title" class="ModalHeader__title">
+            Modal with ScrollView
+          </h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_scroll_view"
+            aria-controls="example_scroll_view"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg class="Icon" width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ScrollView: start -->
+        <div class="ScrollView ScrollView--vertical" data-spirit-toggle="scrollView">
+          <div class="ScrollView__viewport" data-spirit-element="viewport">
+            <div class="ScrollView__content" data-spirit-element="content">
+
+              <!-- ModalBody: start -->
+              <div class="ModalBody">
+                <!-- Content: start -->
+                <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>
+                <!-- Content: end -->
+              </div>
+              <!-- ModalBody: end -->
+
+            </div>
+          </div>
+          <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true"></div>
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
+        <!-- ScrollView: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_scroll_view"
+            >
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_scroll_view"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
 
-    </article>
-    <!-- ModalDialog: end -->
+      </article>
+      <!-- ModalDialog: end -->
 
-  </dialog>
-  <!-- Modal: end -->
+    </dialog>
+    <!-- Modal: end -->
+  
+  </div>
 
 </section>
 
 <section class="docs-Section">
   <h2 class="docs-Heading">Stacking Modals</h2>
 
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_stacking_parent"
-    aria-controls="example_stacking_parent"
-    aria-expanded="false"
-  >
-    Open Modal
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_stacking_parent" class="Modal" aria-labelledby="example_stacking_parent_title">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_stacking_parent_title" class="ModalHeader__title">Modal Title</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_stacking_parent"
-          aria-controls="example_stacking_parent"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <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>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
+  <div class="docs-Stack docs-Stack--start">
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_stacking_parent"
+      aria-controls="example_stacking_parent"
+      aria-expanded="false"
+    >
+      Open Modal
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example_stacking_parent" class="Modal" aria-labelledby="example_stacking_parent_title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_stacking_parent_title" class="ModalHeader__title">Modal Title</h2>
           <button
             type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-toggle="modal"
-            data-spirit-target="#example_stacking_nested"
-            aria-controls="example_stacking_nested"
+            class="Button Button--tertiary Button--square Button--medium"
+            data-spirit-dismiss="modal"
+            data-spirit-target="#example_stacking_parent"
+            aria-controls="example_stacking_parent"
             aria-expanded="false"
           >
-            Open stacked dialog
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <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>
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
-
-    </article>
-    <!-- ModalDialog: end -->
-
-  </dialog>
-  <!-- Modal: end -->
-  <!-- Modal: start -->
-  <dialog id="example_stacking_nested" class="Modal" aria-labelledby="example_stacking_nested_title">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_stacking_nested_title" class="ModalHeader__title">Stacked Modal Title</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_stacking_nested"
-          aria-controls="example_stacking_nested"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <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>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button type="submit" class="Button Button--primary Button--medium">
-            Primary action
-          </button>
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-toggle="modal"
+              data-spirit-target="#example_stacking_nested"
+              aria-controls="example_stacking_nested"
+              aria-expanded="false"
+            >
+              Open stacked dialog
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </article>
+      <!-- ModalDialog: end -->
+
+    </dialog>
+    <!-- Modal: end -->
+    <!-- Modal: start -->
+    <dialog id="example_stacking_nested" class="Modal" aria-labelledby="example_stacking_nested_title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_stacking_nested_title" class="ModalHeader__title">Stacked Modal Title</h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_stacking_nested"
+            aria-controls="example_stacking_nested"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <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>
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button type="submit" class="Button Button--primary Button--medium">
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_stacking_nested"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </article>
+      <!-- ModalDialog: end -->
 
-    </article>
-    <!-- ModalDialog: end -->
+    </dialog>
+    <!-- Modal: end -->
 
-  </dialog>
-  <!-- Modal: end -->
+  </div>
 
 </section>