@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

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/Modal/ModalProductBody.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import cx from "classnames";
-
-interface ModalProductBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  subtitleSection?: React.ReactNode;
-  listSection?: React.ReactNode;
-  benefitsSection?: React.ReactNode;
-  extraPaymentsSection?: React.ReactNode;
-}
-
-export const CLASS_ROOT = "modal__product-body";
-
-const ModalProductBody = React.forwardRef<
-  HTMLDivElement,
-  ModalProductBodyProps
->(
-  (
-    {
-      className,
-      subtitleSection,
-      listSection,
-      benefitsSection,
-      extraPaymentsSection,
-      ...other
-    },
-    ref,
-  ) => {
-    const classes = cx(CLASS_ROOT, className);
-
-    const subtitleSectionClass = `${CLASS_ROOT}-subtitle-section`;
-    const listSectionClass = `${CLASS_ROOT}-list-section`;
-    const accordionSectionClass = `${CLASS_ROOT}-accordion-section`;
-
-    return (
-      <div className={classes} ref={ref} {...other}>
-        {subtitleSection && (
-          <div className={subtitleSectionClass}>{subtitleSection}</div>
-        )}
-        {listSection && <div className={listSectionClass}>{listSection}</div>}
-        {benefitsSection && (
-          <div className={accordionSectionClass}>{benefitsSection}</div>
-        )}
-        {extraPaymentsSection && (
-          <div className={listSectionClass}>{extraPaymentsSection}</div>
-        )}
-      </div>
-    );
-  },
-);
-ModalProductBody.displayName = "ModalProductBody";
-
-export { ModalProductBody };

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} />