@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

package/src/components/Modal/Modal.mdx

@@ -0,0 +1,449 @@
+import { loremIpsum } from 'lorem-ipsum';
+import parse from 'html-react-parser';
+import {
+  Note,
+  ComponentDocs,
+  Preview,
+  DocsTable,
+  Code,
+  Link,
+} from '@lighting-beetle/lighter-styleguide';
+
+import Button, { ButtonSecondary } from '../Button';
+import Buttons from '../Buttons';
+import Grid, { GridCol } from '../Grid';
+import Icon from '../Icon';
+import IconList from '../IconList';
+import Image from '../Image';
+import Modal, { ModalHeader, ModalBody, ModalFooter } from '.';
+
+export const actionButtons = [
+  <Button type="primary" data-a11y-dialog-hide key="1">
+    Potvrdiť
+  </Button>,
+  <Button data-a11y-dialog-hide key="2">
+    Zatvoriť
+  </Button>,
+];
+
+export const Checkmarks = ({ count, icon, content, ...other }) => (
+  <Grid className="mb-xlarge" {...other}>
+    {[...Array(count)].map((_, i) => (
+      <GridCol key={i.toString()} size={{ md: 4 }}>
+        <Icon name={icon} size="large" className="mb-small" />
+        {content}
+      </GridCol>
+    ))}
+  </Grid>
+);
+
+export const PopulatedIconList = () => (
+  <IconList
+    items={[
+      {
+        icon: 'money-box',
+        content: loremIpsum({ count: 1, units: 'sentence' }),
+      },
+      {
+        icon: 'antenna',
+        content: loremIpsum({ count: 1, units: 'sentence' }),
+      },
+      {
+        icon: 'buy',
+        content: loremIpsum({ count: 1, units: 'sentence' }),
+      },
+      {
+        icon: 'cinema-ticket-2-for-1',
+        content: loremIpsum({ count: 1, units: 'sentence' }),
+      },
+    ]}
+  />
+);
+
+# Modal
+
+Additional layer floating above the main content which temporarily interrupts current task.
+Requires user interaction before they can proceed.
+
+<Preview>
+  <Button data-a11y-dialog-show="modal">Open Modal</Button>
+  <Modal id="modal" title="Example modal">
+    {parse(loremIpsum({ count: 10, units: 'paragraph', format: 'html' }))}
+  </Modal>
+</Preview>
+
+## Sizes
+
+Adjust spacing and maximum width. Each size comes with a default title size, which can
+be customized when required.
+
+### Small
+
+<Preview>
+  <Button data-a11y-dialog-show="modal-small">Open small Modal</Button>
+  <Modal
+    id="modal-small"
+    size="small"
+    title="Small modal"
+    actions={actionButtons}
+  >
+    {parse(loremIpsum({ count: 1, units: 'paragraph', format: 'html' }))}
+  </Modal>
+</Preview>
+
+### Default
+
+<Preview>
+  <Button data-a11y-dialog-show="modal-default">Open default Modal</Button>
+  <Modal id="modal-default" title="Default modal" actions={actionButtons}>
+    <Checkmarks
+      count={3}
+      icon="checked"
+      content={parse(
+        loremIpsum({ count: 1, units: 'sentence', format: 'html' })
+      )}
+    />
+    <PopulatedIconList />
+  </Modal>
+</Preview>
+
+### Large
+
+<Preview>
+  <Button data-a11y-dialog-show="modal-large">Open large Modal</Button>
+  <Modal
+    id="modal-large"
+    title="Large modal"
+    actions={actionButtons}
+    size="large"
+  >
+    <p className="mb-xlarge">{loremIpsum({ count: 1, units: 'paragraph' })}</p>
+    <Checkmarks
+      count={5}
+      icon="checked"
+      content={parse(
+        loremIpsum({ count: 1, units: 'sentence', format: 'html' })
+      )}
+    />
+    <PopulatedIconList />
+  </Modal>
+</Preview>
+
+## Custom title
+
+Customize the title and other content inside header.
+
+<Preview>
+  <Button data-a11y-dialog-show="modal-custom-title">
+    Open Modal with custom title
+  </Button>
+  <Modal
+    id="modal-custom-title"
+    actions={actionButtons}
+    renderTitle={() => (
+      <>
+        <a href="/" className="mb">
+          <Icon className="link__icon-left" name="chevron-left" />
+          Return to previous step
+        </a>
+        <h2>Modal with custom title and content.</h2>
+        <p className="mb-none">{loremIpsum({ count: 1, units: 'sentence' })}</p>
+      </>
+    )}
+  >
+    {parse(loremIpsum({ count: 10, units: 'paragraph', format: 'html' }))}
+  </Modal>
+</Preview>
+
+## Custom footer
+
+Customize the footer. Should be primary used for specific action button cases.
+
+<Preview>
+  <Button data-a11y-dialog-show="modal-custom-footer">
+    Open Modal with custom footer
+  </Button>
+  <Modal
+    id="modal-custom-footer"
+    actions={actionButtons}
+    title="Modal with custom footer and content"
+    renderFooter={() => (
+      <>
+        <Buttons isStackedOnXs>
+          <Button type="primary">Log in</Button>
+          <Button>Continue as new customer</Button>
+        </Buttons>
+        <button className="link">Other action button</button>
+      </>
+    )}
+  >
+    {parse(loremIpsum({ count: 1, units: 'paragraph', format: 'html' }))}
+  </Modal>
+</Preview>
+
+## Full height on XS
+
+On XS screens (mobile devices), the modal will take the full height of the viewport to maintain a consistent height when the modal contains a flow or multiple steps.
+
+<Preview>
+  <Button data-a11y-dialog-show="modal-full-height">
+    Open full height Modal on XS screen
+  </Button>
+  <Modal
+    id="modal-full-height"
+    title="Full height modal on XS screen"
+    fullHeight
+    actions={actionButtons}
+  >
+    {parse(loremIpsum({ count: 1, units: 'paragraph', format: 'html' }))}
+  </Modal>
+</Preview>
+
+## Sticky footer
+
+Sticky footers do not stick in IE, as it [does not support `position: sticky`](https://caniuse.com/css-sticky).
+
+<Preview>
+  <Button data-a11y-dialog-show="modal-sticky-footer">
+    Open Modal with sticky footer
+  </Button>
+  <Modal
+    id="modal-sticky-footer"
+    size="large"
+    title="Sticky footer"
+    hasStickyFooter
+    actions={actionButtons}
+  >
+    <p className="mb-xlarge">{loremIpsum({ count: 1, units: 'paragraph' })}</p>
+    <Grid className="mb-xlarge">
+      <GridCol size="auto">
+        <Image alt="" src="https://placehold.co/300x300" />
+      </GridCol>
+      <GridCol size="fill">
+        <h3 className="h2" hasMdxLink={false}>
+          {loremIpsum({ count: 4, units: 'word' })}
+        </h3>
+        <IconList
+          items={[...Array(4)].map(i => ({
+            icon: 'tick',
+            content: loremIpsum({ count: 5, units: 'word' }),
+          }))}
+        />
+      </GridCol>
+    </Grid>
+    <h3>{loremIpsum({ count: 3, units: 'word' })}</h3>
+    <Checkmarks
+      count={5}
+      icon="checked"
+      content={parse(
+        loremIpsum({ count: 1, units: 'sentence', format: 'html' })
+      )}
+    />
+    <h3>{loremIpsum({ count: 3, units: 'word' })}</h3>
+    <Checkmarks
+      count={3}
+      icon="battery-charging"
+      content={
+        <React.Fragment>
+          <h4 hasMdxLink={false}>{loremIpsum({ count: 3, units: 'word' })}</h4>
+          <ul>
+            {[...Array(3)].map((_, i) => (
+              <li key={i.toString()}>
+                {loremIpsum({ count: 1, units: 'sentence' })}
+              </li>
+            ))}
+          </ul>
+        </React.Fragment>
+      }
+    />
+    <PopulatedIconList />
+  </Modal>
+</Preview>
+
+## Colorful body
+
+A modal can contain multiple body containers to divide it's content into multiple colorful sections.
+Colorful body provides vertical spacing needed to visually divide each section. Color is added using
+[background color utilities](utilities/color#background-color). Make sure to pick an
+[accessible color combination](http://localhost:3000/fundamentals/color-palette#accessible-combinations).
+
+Use [spacing utilities](/utilities/spacing#resets) to remove top/bottom padding
+when the first/last body element is using default color (white).
+
+<Preview>
+  <Button data-a11y-dialog-show="modal-colorful">
+    Open Modal with colorful body
+  </Button>
+  <Modal
+    id="modal-colorful"
+    title="Colorful modal"
+    size="large"
+    renderBody={title => (
+      <>
+        <ModalBody color="white" className="pt-none">
+          {title}
+          <p className="mb-xlarge">
+            {loremIpsum({ count: 1, units: 'paragraph' })}
+          </p>
+          <Grid className="mb-large">
+            <GridCol size="auto">
+              <Image alt="" src="https://placehold.co/300x300" />
+            </GridCol>
+            <GridCol size="fill">
+              <h3 className="h2" hasMdxLink={false}>
+                {loremIpsum({ count: 4, units: 'word' })}
+              </h3>
+              <IconList
+                items={[...Array(4)].map(i => ({
+                  icon: 'tick',
+                  content: loremIpsum({ count: 5, units: 'word' }),
+                }))}
+              />
+            </GridCol>
+          </Grid>
+        </ModalBody>
+        <ModalBody color="gray">
+          <Checkmarks
+            count={3}
+            icon="battery-charging"
+            className=""
+            content={
+              <React.Fragment>
+                <h4 hasMdxLink={false}>
+                  {loremIpsum({ count: 3, units: 'word' })}
+                </h4>
+                <ul>
+                  {[...Array(3)].map((_, i) => (
+                    <li key={i.toString()}>
+                      {loremIpsum({ count: 1, units: 'sentence' })}
+                    </li>
+                  ))}
+                </ul>
+              </React.Fragment>
+            }
+          />
+        </ModalBody>
+      </>
+    )}
+  />
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Modal />" component={Modal} />
+
+## JS module reference
+
+Modal is backed with [a11y-dialog | see docs](https://github.com/edenspiekermann/a11y-dialog)
+
+If you omit `data-modal` attribute on `<div class="modal" />` element, modal
+won't be initialized and you need to initialize it manually. Then you will have
+access to instance and you can handle modals programatically.
+
+```js
+const instance = new window.ODS.modules.Modal(
+  document.getElementById('my-modal'),
+  config
+);
+```
+
+### Config
+
+<DocsTable
+  data={[
+    {
+      prop: 'classModalIsOpen',
+      type: 'string',
+      default: 'is-active',
+      description: 'Class which indicates that modal is open.',
+    },
+    {
+      prop: 'classModalIsOpenBody',
+      type: 'string',
+      default: 'has-modal',
+      description: 'Class on body which indicates that modal is open.',
+    },
+    {
+      prop: 'root',
+      type: 'string',
+      default: '#root',
+      description:
+        'Root of page content which should be hidden when modal is open.',
+    },
+    {
+      prop: 'modalsRoot',
+      type: 'string',
+      default: '#root-modals',
+      description:
+        "Element on page where modal is to be placed. This elements should placed outside main content (`'root'` option) and usually at the and of body tag.",
+    },
+  ]}
+/>
+
+### Methods
+
+```js
+const instance = document.querySelector(elementSelector).ODS_Modal;
+instance.method();
+```
+
+<DocsTable
+  data={[
+    {
+      prop: 'init',
+      type: 'func',
+      default: '() => {}',
+      description:
+        'Initialize instance. This is called automatically on `new Plugin(el, config)`',
+    },
+    {
+      prop: 'destroy',
+      type: 'func',
+      default: '() => {}',
+      description: 'Destroy the instance - removes all listeners',
+    },
+    {
+      prop: 'update',
+      type: 'func',
+      default: '() => {}',
+      description: 'Updates an instance.',
+    },
+    {
+      prop: 'show',
+      type: 'func',
+      default: '() => {}',
+      description: 'Shows modal programmatically.',
+    },
+    {
+      prop: 'hide',
+      type: 'func',
+      default: '() => {}',
+      description: 'Hides modal programmatically.',
+    },
+    {
+      prop: 'static getInstance',
+      type: 'func',
+      default: 'element => {}',
+      description:
+        'Get instance of `Modal` attached to specific DOM element (usually `[data-modal]`).',
+    },
+  ]}
+/>
+<Note title="Modal triggers">
+  <strong>a11y-dialog</strong> collects all modal openers/triggers with
+  querySelector and add them event listeners after page is loaded. Because of
+  that, is important to keep in mind, that every new opener/trigger added to DOM
+  programatically after page load <strong>will not work</strong>. Workaround is
+  to use instance of Modal component and call <strong>show()</strong> method to
+  open Modal window.
+</Note>
+
+## Accessibility
+
+- Modals should only be opened by activating a `button` element.
+- Opening a modal sets focus on element with `data-a11y-modal-initial-focus`
+  attribute (modal title by default). When not present, focus is set on first
+  focusable element, usually the close button.
+- An open modal traps focus. It must always contain a close button.
+- Pressing ESC or clicking the overlay closes the modal.
+- Closing a modal sets focus back on the activating `button` element.

package/src/components/Modal/Modal.static.ts

@@ -0,0 +1,223 @@
+import A11yDialog from "a11y-dialog";
+import { isTabbable } from "tabbable";
+
+interface ModalConfig {
+  /** Class which indicates that modal is open */
+  classModalIsOpen: string;
+  /** Class on body which indicates that modal is open */
+  classModalIsOpenBody: string;
+  /** Root of page content which should be hidden when modal is open */
+  root: string;
+  /** Move modal into this element selector (must be unique in DOM) */
+  modalsRoot: string;
+}
+
+const defaultConfig = (): ModalConfig => ({
+  /** Class which indicates that modal is open */
+  classModalIsOpen: "is-active",
+  /** Class on body which indicates that modal is open */
+  classModalIsOpenBody: "has-modal",
+  /** Root of page content which should be hidden when modal is open */
+  root: "#root",
+  /** Move modal into this element selector (must be unique in DOM) */
+  modalsRoot: "#root-modals",
+});
+
+interface HTMLElementWithModal extends HTMLElement {
+  ODS_Modal?: Modal;
+}
+
+export default class Modal {
+  element: HTMLElementWithModal;
+  config: ModalConfig;
+  instance!: A11yDialog; // Using definite assignment assertion as it's initialized in init()
+
+  constructor(element: HTMLElement, config?: Partial<ModalConfig>) {
+    this.element = element as HTMLElementWithModal;
+    this.config = { ...defaultConfig(), ...config };
+
+    this.handleShow = this.handleShow.bind(this);
+    this.handleHide = this.handleHide.bind(this);
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this.headerFirstItemSpacing = this.headerFirstItemSpacing.bind(this);
+
+    Modal.moveToModalRoot = Modal.moveToModalRoot.bind(this);
+    Modal.lockBody = Modal.lockBody.bind(this);
+    Modal.unlockBody = Modal.unlockBody.bind(this);
+
+    this.element.ODS_Modal = this;
+
+    this.init();
+
+    return this;
+  }
+
+  static getInstance(el: HTMLElement | null): Modal | null {
+    if (!el) return null;
+    const modalEl = el as HTMLElementWithModal;
+    return modalEl.ODS_Modal || null;
+  }
+
+  handleShow(el: HTMLElement): void {
+    Modal.lockBody();
+    if (el) el.classList.add(this.config.classModalIsOpen);
+
+    // Long modals can have first focusabble element under the fold, so static content above the fold should be focused instead to prevent undesirable scrolling
+    const initialFocusEl = el.querySelector("[data-a11y-dialog-initial-focus]");
+
+    if (!initialFocusEl) {
+      return;
+    }
+
+    // set tabindex to -1 so element can't be focused via keyboard
+    if (!isTabbable(initialFocusEl as HTMLElement)) {
+      initialFocusEl.setAttribute("tabindex", "-1");
+    }
+
+    (initialFocusEl as HTMLElement).focus();
+  }
+
+  handleHide(el: HTMLElement): void {
+    Modal.unlockBody();
+    if (el) el.classList.remove(this.config.classModalIsOpen);
+  }
+
+  show(): void {
+    this.instance.show();
+  }
+
+  hide(): void {
+    this.instance.hide();
+  }
+
+  headerFirstItemSpacing(): void {
+    /**
+     * Target the first element which is not .btn inside .modal__header and add margin-right 40px.
+     * css has its limitations and it is not possible with pseudo selectors
+     */
+    const modalHeader = this.element.querySelector(".modal__header");
+    if (modalHeader) {
+      const firstNonBtnElement = Array.from(modalHeader.children).find(
+        (child) => !child.classList.contains("btn"),
+      );
+      if (firstNonBtnElement) {
+        (firstNonBtnElement as HTMLElement).style.marginRight = "40px";
+      }
+    }
+  }
+
+  init(): void {
+    if (this.config.modalsRoot) {
+      Modal.moveToModalRoot(
+        this.element,
+        document.querySelector(this.config.modalsRoot),
+      );
+    }
+
+    this.instance = new A11yDialog(this.element);
+
+    this.instance.on("show", (event: Event) => {
+      const dialogEl = event.currentTarget as HTMLElement;
+      this.handleShow(dialogEl);
+    });
+
+    this.instance.on("hide", (event: Event) => {
+      const dialogEl = event.currentTarget as HTMLElement;
+      this.handleHide(dialogEl);
+    });
+
+    this.headerFirstItemSpacing();
+  }
+
+  destroy(): void {
+    this.instance.destroy();
+    this.element.ODS_Modal = this;
+  }
+
+  update(): void {
+    this.destroy();
+    this.init();
+  }
+
+  static moveToModalRoot(el: HTMLElement, container: Element | null): void {
+    if (container) {
+      container.appendChild(el);
+    } else {
+      console.warn(
+        `\`modalsRoot: ${(this as unknown as Modal).config?.modalsRoot}\` element is not present in DOM. Modal will be placed inside content which can affect it's styling. Please provide \`modalsRoot\` selector (should be placed outside of main contant, usualy in end of <body /> tag)`,
+      );
+    }
+  }
+
+  static lockBody(className?: string, root?: string): void {
+    const actualClassName =
+      className || (this as unknown as Modal).config?.classModalIsOpenBody;
+    const actualRoot = root || (this as unknown as Modal).config?.root;
+
+    const container = document.querySelector(actualRoot);
+    // store current scrollTop value
+    const scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop;
+    document.body.setAttribute("data-lock-scrolltop", scrollTop.toString());
+
+    // add locking styles to body
+    document.body.style.height = "100%";
+    document.body.style.width = "100%";
+    document.body.style.overflow = "hidden";
+    document.body.style.position = "fixed";
+
+    // add locking styles to scrollTop
+    if (container) {
+      (container as HTMLElement).style.height = "100%";
+      (container as HTMLElement).style.width = "100%";
+      (container as HTMLElement).style.overflow = "hidden";
+      (container as HTMLElement).style.position = "fixed";
+      // scroll page-container to scrollTop position
+      (container as HTMLElement).scrollTop = scrollTop;
+    }
+
+    // add modal class
+    document.body.classList.add(actualClassName);
+
+    // attempt to scroll top fixed position
+    window.requestAnimationFrame(() => {
+      window.scrollTo(0, scrollTop);
+    });
+  }
+
+  static unlockBody(className?: string, root?: string): void {
+    const actualClassName =
+      className || (this as unknown as Modal).config?.classModalIsOpenBody;
+    const actualRoot = root || (this as unknown as Modal).config?.root;
+
+    const container = document.querySelector(actualRoot);
+    const scrollTop = document.body.getAttribute("data-lock-scrolltop") || "0";
+
+    // remove locking styles from body
+    document.body.style.height = "";
+    document.body.style.width = "";
+    document.body.style.overflow = "";
+    document.body.style.position = "";
+
+    // add modal class
+    document.body.classList.remove(actualClassName);
+
+    // remove locking styles from page-container
+    if (container) {
+      (container as HTMLElement).style.height = "";
+      (container as HTMLElement).style.width = "";
+      (container as HTMLElement).style.overflow = "";
+      (container as HTMLElement).style.position = "";
+    }
+
+    // set scroll position back
+    window.requestAnimationFrame(() => {
+      window.scrollTo({
+        left: 0,
+        top: parseInt(scrollTop, 10),
+        behavior: "instant" as ScrollBehavior,
+      });
+    });
+  }
+}