@orangesk/orange-design-system 2.0.0-beta.1 → 2.0.0-beta.11

package/src/components/List/List.mdx

@@ -1,216 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { loremIpsum } from 'lorem-ipsum';
-
-import { Preview, Code } from '../../styleguide/';
-import Card, { CardSection } from '../Card';
-import Pill from '../Pill';
-import Bar, { BarItem } from '../Bar';
-import BlockAction, {
-  BlockActionControl,
-  BlockActionOverride,
-  BlockActionIndicator,
-} from '../BlockAction';
-import Button from '../Button';
-import Icon from '../Icon';
-import Link from '../Link';
-
-import List, { ListItem } from './';
-
-# Lists
-
-Vertical scannable group of items, usually labelled with a heading.
-
-## Example
-
-<Preview>
-  <h2>List of items</h2>
-  <List>
-    <ListItem>Laborum laboris amet minim.</ListItem>
-    <ListItem>Quis adipisicing eu consectetur.</ListItem>
-    <ListItem>Et anim sit do nisi.</ListItem>
-    <ListItem>Deserunt id consectetur esse in.</ListItem>
-  </List>
-</Preview>
-
-## Variants
-
-### Default
-
-<Preview>
-  <List>
-    <ListItem>Laborum laboris amet minim.</ListItem>
-    <ListItem>Quis adipisicing eu consectetur.</ListItem>
-    <ListItem>Et anim sit do nisi.</ListItem>
-    <ListItem>Deserunt id consectetur esse in.</ListItem>
-  </List>
-</Preview>
-
-### Small
-
-<Preview>
-  <List size="small">
-    <ListItem>Laborum laboris amet minim.</ListItem>
-    <ListItem>Quis adipisicing eu consectetur.</ListItem>
-    <ListItem>Et anim sit do nisi.</ListItem>
-    <ListItem>Deserunt id consectetur esse in.</ListItem>
-  </List>
-</Preview>
-
-## Color
-
-<Preview>
-  <h2>List of gray items</h2>
-  <List color="gray">
-    <ListItem>Laborum laboris amet minim.</ListItem>
-    <ListItem>Quis adipisicing eu consectetur.</ListItem>
-    <ListItem>Et anim sit do nisi.</ListItem>
-    <ListItem>Deserunt id consectetur esse in.</ListItem>
-  </List>
-</Preview>
-
-### Enclosed
-
-Enclosed lists are usually placed inside a [Card](/components/card)
-and labelled with a heading element in a separate CardSection. The number of items
-can be highlighted with a [Pill](/components/pill).
-
-<Preview bgTheme="gray">
-  <Card>
-    <CardSection color="black">
-      <h2>
-        List of items <Pill className="bg-white">3</Pill>
-      </h2>
-    </CardSection>
-    <List isEnclosed>
-      <ListItem>Laborum laboris amet minim.</ListItem>
-      <ListItem>Quis adipisicing eu consectetur.</ListItem>
-      <ListItem>Et anim sit do nisi.</ListItem>
-    </List>
-  </Card>
-</Preview>
-
-### Readable widths
-
-Use paragraph element `<p>` to create readable containers for text.
-[Line length and wrapping](/utilities/text#line-length-and-wrapping) will not
-work on lists or their children.
-
-<Preview>
-  <List>
-    <ListItem>
-      <strong>Text only, no paragraph used.</strong> Laborum laboris amet minim.
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore
-      perspiciatis iusto quos accusantium placeat optio. Facere harum suscipit
-      provident quia maxime officiis inventore, beatae pariatur architecto quasi
-      quam. Natus, iusto.
-    </ListItem>
-    <ListItem>
-      <p>
-        <strong>Simple paragraph with default width constrains.</strong> Laborum
-        laboris amet minim. Lorem ipsum dolor sit amet consectetur adipisicing
-        elit. Dolore perspiciatis iusto quos accusantium placeat optio. Facere
-        harum suscipit provident quia maxime officiis inventore, beatae pariatur
-        architecto quasi quam. Natus, iusto.
-      </p>
-    </ListItem>
-    <ListItem>
-      <p className="text-narrow">
-        <strong>
-          Paragraph with <Code>.text-narrow</Code> class applied.
-        </strong>{' '}
-        Laborum laboris amet minim. Lorem ipsum dolor sit amet consectetur
-        adipisicing elit. Dolore perspiciatis iusto quos accusantium placeat
-        optio. Facere harum suscipit provident quia maxime officiis inventore,
-        beatae pariatur architecto quasi quam. Natus, iusto.
-      </p>
-    </ListItem>
-    <ListItem>
-      <p className="text-fullwidth">
-        <strong>
-          Paragraph with <Code>.text-fullwidth</Code> class applied.
-        </strong>{' '}
-        Laborum laboris amet minim. Lorem ipsum dolor sit amet consectetur
-        adipisicing elit. Dolore perspiciatis iusto quos accusantium placeat
-        optio. Facere harum suscipit provident quia maxime officiis inventore,
-        beatae pariatur architecto quasi quam. Natus, iusto.
-      </p>
-    </ListItem>
-  </List>
-</Preview>
-
-## Clickable items
-
-Clickable items are always used with a chevron to indicate action.
-
-### Anchor
-
-<Preview>
-  <List>
-    <ListItem controlProps={{ href: '#' }}>
-      Laborum laboris amet minim.
-    </ListItem>
-    <ListItem controlProps={{ href: '#' }}>
-      Quis adipisicing eu consectetur.
-    </ListItem>
-  </List>
-</Preview>
-
-### Button
-
-**💡 Pro tip**: Don't build an expanding list - use an [Accordion](/components/accordion) instead.
-
-<Preview>
-  <List>
-    <ListItem controlProps={{}}>Laborum laboris amet minim.</ListItem>
-    <ListItem controlProps={{}}>Quis adipisicing eu consectetur.</ListItem>
-  </List>
-</Preview>
-
-### Advanced clickable items using BlockAction
-
-Combining [BlockAction](/components/block-action) with ListItems enables use of layout, descriptions and multiple actions per item.
-
-<Preview>
-  <List>
-    {[1, 2, 3].map(item => (
-      <BlockAction key={item.toString()}>
-        <ListItem>
-          <Bar>
-            <BarItem isFilling>
-              <BlockActionControl>
-                <a href="#" className="list__control">
-                  {loremIpsum({ count: 3, units: 'word' })}
-                </a>
-              </BlockActionControl>
-            </BarItem>
-            <BarItem isFilling>
-              <p>{loremIpsum({ count: 12, units: 'word' })}</p>
-            </BarItem>
-            <BarItem>
-              <BlockActionOverride>
-                <Button href="#" size="small">
-                  Override
-                </Button>
-              </BlockActionOverride>
-            </BarItem>
-            <BarItem>
-              <BlockActionIndicator>
-                <Icon name="chevron-right" size="medium" />
-              </BlockActionIndicator>
-            </BarItem>
-          </Bar>
-        </ListItem>
-      </BlockAction>
-    ))}
-  </List>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<List />" component={List} />
-
-<ComponentDocs title="<ListItem />" component={ListItem} />
-
-## Accessibility
-
-The `<List />` component currently only renders as unordered list.

package/src/components/Loader/Loader.mdx

@@ -1,148 +0,0 @@
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-import cx from 'classnames';
-import { Preview } from '../../styleguide/';
-import Loader from './index';
-import Skeleton from '../Skeleton';
-import ToggleButton from '../../docs/utils/ToggleButton';
-
-export const messages = [
-  'Loading.',
-  'Loading..',
-  'Loading...',
-  'Still loading',
-  'Still loading.',
-  'Still loading..',
-  'Still loading...',
-];
-
-# Loader
-
-A simple loader that can cycle different loading messages.
-
-<Preview>
-  <Loader messages={messages}>Loading</Loader>
-  <hr />
-  <Loader size="large" messages={messages}>
-    Large loader
-  </Loader>
-</Preview>
-
-# Inverse colour
-
-Can be used on orange background [together with skeleton](/components/loader/#delay).
-
-<Preview code={<Loader messages={messages}>Loading</Loader>}>
-  <div className="card bg-orange">
-    <div className="card__section">
-      <Loader messages={messages}>Loading</Loader>
-    </div>
-  </div>
-</Preview>
-
-## Button/Loader switch
-
-Buttons and Loaders have the same height for smooth transition without page
-jitter. Loader has no spacing by default. If you are changing button for loader,
-loader needs the same spacing as button to prevent jittering.
-
-export const ToggleLoader = ({ id, size, margin }) => (
-  <div>
-    <ToggleButton
-      type="primary"
-      aria-controls={`loader-${id}`}
-      data-toggle={JSON.stringify([
-        { target: 'self', attribute: 'hidden' },
-        { target: `loader-${id}`, acrion: 'focus' },
-      ])}
-      size={size}
-    >
-      Show loader
-    </ToggleButton>
-    <Loader
-      id={`loader-${id}`}
-      hidden
-      size={size}
-      messages={messages}
-      className={margin}
-      tabIndex="-1"
-      aria-live="polite"
-    >
-      Loader
-    </Loader>
-  </div>
-);
-
-<Preview>
-  <ToggleLoader id="1" />
-  <ToggleLoader id="2" size="large" />
-  <ToggleLoader id="3" margin="mb-medium" />
-  <ToggleLoader id="4" size="large" margin="mb-medium" />
-</Preview>
-
-## Delay
-
-When loading takes more than 5 seconds Loader is shown together with Skeleton
-to inform the user that the section loading is still in progress.
-Use attribute `data-loader-delayed` to delay initialization and to remove
-`.hide` class which is also used.
-
-<Preview>
-  <Loader messages={['Načítavam.', 'Načítavam..', 'Načítavam...']} isDelayed>
-    Načítavam
-  </Loader>
-  <Skeleton></Skeleton>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Loader />" component={Loader} />
-
-## JS module reference
-
-All elements with `[data-loader]` will be initialised automatically.
-
-### Custom initialization
-
-```javascript
-const myAccordion = new window.ODS.modules.Loader(
-  document.getElementById('my-loader'),
-  config
-);
-```
-
-### Methods
-
-```js
-const instance = document.querySelector(elementSelector).ODS_Expander;
-instance.method();
-```
-
-<DocsTable
-  data={[
-    {
-      prop: 'init',
-      type: 'func',
-      default: '() => {}',
-      description:
-        'Initialize an instance. Called automatically on `new BlockAction(el, config)`',
-    },
-    {
-      prop: 'destroy',
-      type: 'func',
-      default: '() => {}',
-      description: 'Destroy the instance - removes all listeners',
-    },
-    {
-      prop: 'cycleMessages',
-      type: 'func',
-      default: '() => {}',
-      description: 'Cycle through messages',
-    },
-  ]}
-/>
-
-## Accessibility
-
-No accessibility testing conducted
-
-## Notes

package/src/components/Megamenu/MegamenuDropdown.tsx

@@ -1,64 +0,0 @@
-import React from "react";
-import { Container } from "../Container";
-import { IconButton } from "../Button";
-import cx from "classnames";
-
-const CLASS_ROOT = "megamenu-dropdown";
-
-interface MegamenuDropdownProps {
-  /** Unique identifier for the dropdown */
-  id: string;
-  /** Title of the dropdown */
-  title: string;
-  /** Icon of the dropdown */
-  icon?: string;
-  /** Additional CSS classes */
-  className?: string;
-  /** Children of the dropdown */
-  children?: React.ReactNode;
-  /** Color scheme of the dropdown */
-  colorScheme?: "light" | "dark";
-}
-
-const MegamenuDropdown = ({
-  id,
-  title,
-  children,
-  className,
-  icon,
-  colorScheme = "light",
-}: MegamenuDropdownProps) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-    },
-    className,
-  );
-  return (
-    <>
-      <IconButton
-        className={`${CLASS_ROOT}__button ${icon ? `only-icon` : ""} ${className}`}
-        aria-expanded="false"
-        iconName={icon ? icon : "chevron-down"}
-        aria-controls={`megamenu-dropdown-content-${id}`}
-        iconPosition="right"
-        id={`icon-toggle-target-${id}`}
-        data-toggle={`[{"target":"#icon-toggle-target-${id}","attribute":"icon","value":"/sprite.svg#${icon ? icon : "chevron-down"}","clickOutside":true}]`}
-      >
-        {icon ? null : title}
-      </IconButton>
-
-      <div
-        className={`${CLASS_ROOT}__content ${classes}`}
-        id={`megamenu-dropdown-content-${id}`}
-        hidden
-      >
-        <Container>{children}</Container>
-      </div>
-    </>
-  );
-};
-
-export default MegamenuDropdown;