@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/Modal/Modal.mdx

@@ -1,565 +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,
-  ModalProductHeader, ModalCloseButton
-} from ".";
-import { Divider } from "../Divider";
-import { Bar, BarItem } from "../Bar";
-import { Tag } from "../Tag";
-
-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>
-
-## Product header
-
-Use the product header to display product information with an optional image, similar to the Card component's product header.
-
-<Preview>
-  <Button data-a11y-dialog-show="modal-product-header">
-    Open Modal with product header
-  </Button>
-  <Modal
-    id="modal-product-header"
-    actions={actionButtons}
-    renderHeader={() => (
-      <>
-        <ModalCloseButton />
-        <ModalProductHeader
-          image={<img src="/images/product-1.svg" alt="Product" />}
-        >
-          <p className="bold color-orange">Odporúčame</p>
-          <Bar space="small" className="mb-none">
-            <BarItem>
-              <h2 className="h4 mb-none">Prémiový paušál</h2>
-            </BarItem>
-            <BarItem>
-              <Tag color="black">5G</Tag>
-            </BarItem>
-          </Bar>
-          <p className="h2 color-orange mb-none thin">∞ GB</p>
-        </ModalProductHeader>
-        <Divider thinLine />
-      </>
-    )}
-  >
-    <p className="h5 mb">
-      V paušále získate 200 GB plnou rýchlosťou, potom 20 Mbit/s
-    </p>
-    <h3 className="h4">S paušálom</h3>
-    <ul className="list--marker-orange">
-      <li>
-        nekonečné dáta, po prečerpaní 200 GB pokračujete s rýchlosťou 20
-        Mbit/s, dáta v EÚ podliehajú regulácii
-      </li>
-      <li>
-        nekonečné volania v SR a v EÚ (Zóna 1), medzinárodné volania do EÚ
-        a do Zóny 1 sú spoplatnené sumou 0,03 € za minútu
-      </li>
-      <li>nekonečné SMS/MMS v SR/EÚ/Zóna 1</li>
-      <li>prístup do 5G siete</li>
-      <li>možnosť dokúpiť ďalších 5 GB len za 5,13 €</li>
-      <li>možnosť bezplatnej aktivácie služby Online ochrana Basic</li>
-      <li>bezplatné založenie skupiny Navzájom zadarmo</li>
-    </ul>
-    {parse(loremIpsum({ count: 2, units: "paragraph", format: "html" }))}
-  </Modal>
-</Preview>
-
-<Preview>
-  <Button data-a11y-dialog-show="modal-product-header-small">
-    Open Modal with compact product header
-  </Button>
-  <Modal
-    id="modal-product-header-small"
-    actions={actionButtons}
-    renderHeader={() => (
-      <>
-        <ModalCloseButton />
-        <ModalProductHeader
-          space="small"
-          image={<img src="/images/product-2.svg" alt="Product" />}
-        >
-          <Bar space="small" className="mb-none">
-            <BarItem>
-              <h2 className="h3 mb-none">Veľký paušál</h2>
-            </BarItem>
-            <BarItem>
-              <Tag color="black">5G</Tag>
-            </BarItem>
-          </Bar>
-          <p className="h2 color-orange mb-none thin">∞ GB</p>
-        </ModalProductHeader>
-        <Divider thinLine />
-      </>
-    )}
-  >
-    <p className="h5 mb">
-      V paušále získate 200 GB plnou rýchlosťou, potom 20 Mbit/s
-    </p>
-    <h3 className="h4">S paušálom</h3>
-    <ul className="list--marker-orange">
-      <li>
-        nekonečné dáta, po prečerpaní 200 GB pokračujete s rýchlosťou 20
-        Mbit/s, dáta v EÚ podliehajú regulácii
-      </li>
-      <li>
-        nekonečné volania v SR a v EÚ (Zóna 1), medzinárodné volania do EÚ
-        a do Zóny 1 sú spoplatnené sumou 0,03 € za minútu
-      </li>
-      <li>nekonečné SMS/MMS v SR/EÚ/Zóna 1</li>
-      <li>prístup do 5G siete</li>
-      <li>možnosť dokúpiť ďalších 5 GB len za 5,13 €</li>
-      <li>možnosť bezplatnej aktivácie služby Online ochrana Basic</li>
-      <li>bezplatné založenie skupiny Navzájom zadarmo</li>
-    </ul>
-    {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} />
-
-<ComponentDocs title="<ModalProductHeader />" component={ModalProductHeader} />
-
-## 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/Pagination/Pagination.mdx

@@ -1,45 +0,0 @@
-import {ComponentDocs,  Preview, Note, md } from '@lighting-beetle/lighter-styleguide';
-import Pagination from './index';
-
-# Pagination
-
-export const getItems = (count = 10, current = Math.ceil(count / 2)) => [...Array(count).fill('').map((_, i) => i+1)].map(n => ({
-  label: `${n}`,
-  ariaLabel: `Strana ${n}`,
-  href: `/?page=${n}`,
-  ...(current === n ? {isActive: true } : {}),
-}));
-
-export const label = "Výber stránok";
-
-Pagination is used to separate long lists or pages into more readable chunks and reduce server load by rendering a limited amount of items.
-
-The maximum of visible items is 5. 
-
-<Preview>
-  <Pagination label={label} items={getItems(10)} />
-</Preview>
-
-## Separators
-
-Separators are used when there is more than 5 items and the active page is not near the first or last item.
-
-<Preview>
-  <Pagination label={label} items={getItems(10, 3)} />
-  <Pagination label={label} items={getItems(10)} />
-  <Pagination label={label} items={getItems(10, 9)} />
-</Preview>
-
-## Compact
-
-Compact pagination is used in confined spaces, such as cards. First and last elements are replaced with an icon and separators are removed.
-
-<Preview>
-  <Pagination label={label} items={getItems(10, 1)} isCompact />
-  <Pagination label={label} items={getItems(10, 2)} isCompact />
-  <Pagination label={label} items={getItems(10)} isCompact />
-  <Pagination label={label} items={getItems(10, 9)} isCompact />
-  <Pagination label={label} items={getItems(10, 10)} isCompact />
-</Preview>
-
-<ComponentDocs title="<Pagination />" component={Pagination} />

package/src/components/Pill/Pill.mdx

@@ -1,41 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import Icon from '../Icon';
-
-import Pill from './Pill';
-
-# Pill
-
-Put numbers in it.
-
-<Preview>
-  <Pill>1</Pill>
-</Preview>
-
-## Sizes
-
-Pill size is determined by font size inherited from ancestor elements.
-
-<Preview>
-  <h1>This many: <Pill>1</Pill></h1>
-  <h2>I have more: <Pill>2</Pill></h2>
-  <p><Pill className="large">3</Pill></p>
-  <p>Max 3 digits please. <Pill>123</Pill></p>
-</Preview>
-
-## Matching size with icons
-
-While pill size is determined by typography, [icons have fixes sizes](/components/icon#sizes), icon images usually contain a bit of whitespace around the paths themselves. This makes it nearly impossible to match icon and pill sizes, especially when the icon path has an oval shape.
-
-In case there is no way to alter the design, you might want to reuse icon sizing classes. Note that due to whitespace in the icon, the sizes will never match perfectly. Some icons work better than others. Icons with circular shape don't work well, as the size difference becomes more apparent.
-
-<Preview>
-  <Pill className="icon--large">1</Pill>{' '}<Icon name="fast_delivery" size="large" />
-  <br /><br />
-  <Pill className="icon--large">2</Pill>{' '}<Icon name="funny" size="large" />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Pill />" component={Pill} />