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

package/src/components/Modal/Modal.mdx

@@ -1,449 +0,0 @@
-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.js

@@ -1,198 +0,0 @@
-import A11yDialog from 'a11y-dialog';
-import { isTabbable } from 'tabbable';
-
-const defaultConfig = () => ({
-  /** 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',
-});
-
-export default class Modal {
-  constructor(element, config) {
-    this.element = element;
-    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) {
-    return el && el.ODS_Modal ? el.ODS_Modal : null;
-  }
-
-  handleShow(el) {
-    this.constructor.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)) {
-      initialFocusEl.setAttribute('tabindex', '-1');
-    }
-
-    initialFocusEl.focus();
-  }
-
-  handleHide(el) {
-    this.constructor.unlockBody();
-    if (el) el.classList.remove(this.config.classModalIsOpen);
-  }
-
-  show() {
-    this.instance.show();
-  }
-
-  hide() {
-    this.instance.hide();
-  }
-
-  headerFirstItemSpacing() {
-    /**
-     * 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.style.marginRight = '40px';
-      }
-    }
-  }
-
-  init() {
-    if (this.config.modalsRoot) {
-      Modal.moveToModalRoot(
-        this.element,
-        document.querySelector(this.config.modalsRoot)
-      );
-    }
-
-    this.instance = new A11yDialog(
-      this.element,
-      document.querySelector(this.config.root)
-    );
-
-    this.instance.on('show', this.handleShow);
-
-    this.instance.on('hide', this.handleHide);
-
-    this.headerFirstItemSpacing();
-  }
-
-  destroy() {
-    this.instance.destroy();
-    this.element.ODS_Modal = this;
-  }
-
-  update() {
-    this.destroy();
-    this.init();
-  }
-
-  static moveToModalRoot(el, container) {
-    if (container) {
-      container.appendChild(el);
-    } else {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `\`modalsRoot: ${this.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 = this.config.classModalIsOpenBody,
-    root = this.config.root
-  ) {
-    const container = document.querySelector(root);
-    // store current scrollTop value
-    const scrollTop =
-      document.documentElement.scrollTop || document.body.scrollTop;
-    document.body.setAttribute('data-lock-scrolltop', scrollTop);
-
-    // 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) {
-      /* eslint-disable no-param-reassign */
-      container.style.height = '100%';
-      container.style.width = '100%';
-      container.style.overflow = 'hidden';
-      container.style.position = 'fixed';
-      // scroll page-container to scrollTop position
-      container.scrollTop = scrollTop;
-      /* eslint-enable no-param-reassign */
-    }
-
-    // add modal class
-    document.body.classList.add(className);
-
-    // attempt to scroll top fixed position
-    window.requestAnimationFrame(() => {
-      window.scrollTo(0, scrollTop);
-    });
-  }
-
-  static unlockBody(
-    className = this.config.classModalIsOpenBody,
-    root = this.config.root
-  ) {
-    const container = document.querySelector(root);
-    const scrollTop = document.body.getAttribute('data-lock-scrolltop');
-
-    // 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(className);
-
-    // remove locking styles from page-container
-    if (container) {
-      /* eslint-disable no-param-reassign */
-      container.style.height = '';
-      container.style.width = '';
-      container.style.overflow = '';
-      container.style.position = '';
-      /* eslint-enable no-param-reassign */
-    }
-
-    // set scroll position back
-    window.requestAnimationFrame(() => {
-      window.scrollTo({ left: 0, top: scrollTop, behavior: 'instant' });
-    });
-  }
-}

package/src/components/Modal/Title.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { oneOf } from 'prop-types';
-
-const propTypes = {
-  size: oneOf(['small', 'large']),
-};
-
-const ModalTitle = ({ size, children, ...other }) => (
-  <h2
-    className={cx({
-      'display-3': size === 'large',
-      h2: size === 'small',
-    })}
-    {...other}
-  >
-    {children}
-  </h2>
-);
-
-ModalTitle.propTypes = propTypes;
-ModalTitle.displayName = 'ModalTitle';
-
-export default ModalTitle;

package/src/components/Modal/index.js

@@ -1,7 +0,0 @@
-import Modal from './Modal';
-import ModalBody from './Body';
-
-import './styles/style.scss';
-
-export default Modal;
-export { ModalBody };