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

package/src/components/Skeleton/Skeleton.mdx

@@ -1,90 +0,0 @@
-
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Skeleton from './index';
-import Card, { CardSection } from '../Card';
-import Grid, { GridCol } from '../Grid';
-
-# Skeleton
-
-Basic loading indicator used as placeholder of the loaded component
-
-<Preview>
-  <Skeleton />
-</Preview>
-
-## Usage
-
-Feel free to adjust the size of the skeleton with [Grid component](/components/grid).
-
-<Preview>
-  <Grid>
-    <GridCol size={6}>
-      <Skeleton className="h2" />
-    </GridCol>
-  </Grid>
-  <h2>
-    <Skeleton />
-  </h2>
-</Preview>
-
-To simulate the structure of the component being loaded, mix up some skeletons
-
-<Preview>
-  <Card>
-    <CardSection>
-      <Grid>
-        <GridCol size={8}>
-          <Skeleton className="h2" />
-        </GridCol>
-      </Grid>
-      <Grid>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol size={6}><Skeleton /></GridCol>
-      </Grid>
-    </CardSection>
-  </Card>
-</Preview>
-
-<Preview>
-  <Grid>
-    {[1,2,3].map(item => (
-      <GridCol key={item.toString()} size={{ md: 6, lg: 4}}>
-        <Card>
-          <CardSection>
-            <Grid justifyHeight>
-              <GridCol size={6}>
-                <Skeleton />
-              </GridCol>
-              <GridCol size="auto">
-                <Grid>
-                  <GridCol>
-                    <Skeleton className="h2" />
-                  </GridCol>
-                </Grid>
-                <Grid>
-                  {[1,2,3,4,5,6,7].map(item => (
-                    <GridCol key={item.toString()}><Skeleton /></GridCol>
-                  ))}
-                  <GridCol size={6}><Skeleton /></GridCol>
-                </Grid>
-              </GridCol>
-            </Grid>
-          </CardSection>
-        </Card>
-      </GridCol>
-    ))}
-  </Grid>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Skeleton />" component={Skeleton} />
-
-## Accessibility
-
-You should announce the loading state using aria-busy in the appropriate live region

package/src/components/SkipLink/SkipLink.mdx

@@ -1,23 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview, Code } from '../../styleguide/';
-import SkipLink from './';
-
-# Skip link
-
-Provides keyboard users to skip parts of a webpage. Usually a skip link is used as a first element of a page and points to main content. This allows users to skip main navigation and dive into subject matter of the requested page.
-
-The link is visually hidden until it's focused by keyboard.
-
-## Example
-
-<Preview>
-  <SkipLink href="#example-skip-link-target" />
-
-  <div id="example-skip-link-target">
-    Skip link target element
-  </div>
-</Preview>
-
-## Props
-
-<ComponentDocs component={SkipLink} />

package/src/components/Stepbar/Stepbar.mdx

@@ -1,137 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Stepbar from './index';
-
-# Stepbar
-
-Stepped navigation for multi step processes.
-
-<Preview>
-  <Stepbar
-    steps={[
-      {
-        title: 'Paušál',
-        href: '#',
-      },
-      {
-        title: 'Internet',
-        href: '#',
-        isCurrent: true,
-      },
-      {
-        title: 'TV (nepovinné)',
-        href: '#',
-      },
-    ]}
-  />
-</Preview>
-
-## Dark variant
-
-<Preview>
-  <div className="section bg-black mb-small">
-    <Stepbar
-      variant="dark"
-      steps={[
-        {
-          title: 'Paušál',
-          href: '#',
-        },
-        {
-          title: 'default behaviour on black background',
-          href: '#',
-          isCurrent: true,
-        },
-        {
-          title: 'TV (nepovinné)',
-          href: '#',
-        },
-      ]}
-    />
-  </div>
-  <Stepbar
-    variant="inverse"
-    steps={[
-      {
-        title: 'Paušál',
-        href: '#',
-      },
-      {
-        title: 'with class .stepbar--inverse',
-        href: '#',
-        isCurrent: true,
-      },
-      {
-        title: 'TV (nepovinné)',
-        href: '#',
-      },
-    ]}
-  />
-</Preview>
-
-## Step links
-
-Previous step links must point to a related part of the stepped process, ideally the first interactive element.
-
-<Preview>
-  <Stepbar
-    steps={[
-      {
-        title: 'Paušál',
-        href: '/components/stepbar#form-element',
-      },
-      {
-        title: 'Internet',
-        href: '#form-element',
-        isCurrent: true,
-      },
-      {
-        title: 'TV (nepovinné)',
-        href: '#',
-      },
-    ]}
-  />
-  <input type="text" id="form-element" placeholder="stepped form input" />
-</Preview>
-
-## Responsive behaviour
-
-On small viewports, steps are displayed as rectangles without titles. As the width of screen increases, the title of the active element is shown, and arrows are added. Finnaly titles of non-active steps can be shown using the responsive `--wide-[md/lg/xl]` modifier.
-
-- xs: item titles are hidden, only numbers are visible.
-- sm: current item title is visible
-- md and larger: optionally show all step titles
-
-<Preview>
-  <Stepbar
-    showTitlesFrom="lg"
-    steps={[
-      {
-        title: 'Paušál',
-        href: '#',
-      },
-      {
-        title: 'Internet',
-        href: '#',
-        isCurrent: true,
-      },
-      {
-        title: 'Televízia',
-        href: '#',
-      },
-      {
-        title: 'Doručenie',
-        href: '#',
-      },
-      {
-        title: 'Platba',
-        href: '#',
-      },
-    ]}
-  />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Stepbar />" component={Stepbar} />

package/src/components/Sticker/Sticker.mdx

@@ -1,50 +0,0 @@
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Sticker from './index';
-import { Bar, BarItem } from '../';
-
-# Sticker
-
-<Preview bgTheme="black">
-  <Sticker>Some content inside</Sticker>
-</Preview>
-
-## Variants
-
-### Colors
-
-<Preview bgTheme="black">
-  <Bar>
-    <BarItem>
-      <Sticker>Default sticker</Sticker>
-    </BarItem>
-    <BarItem>
-      <Sticker color="black">Black sticker</Sticker>
-    </BarItem>
-    <BarItem>
-      <Sticker color="orange">Orange sticker</Sticker>
-    </BarItem>
-  </Bar>
-</Preview>
-
-### Sizes
-
-<Preview bgTheme="black">
-  <Bar>
-    <BarItem>
-      <Sticker>Default sticker</Sticker>
-    </BarItem>
-    <BarItem>
-      <Sticker size="small">Small sticker</Sticker>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Sticker />" component={Sticker} />
-
-## Accessibility
-
-Make sure the information in the sticker is presented in logical order with other conent (e.g. if it shows price, make sure it's before the buy button).

package/src/components/Table/Table.mdx

@@ -1,199 +0,0 @@
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-import Table from './';
-import {
-  headers,
-  rows,
-  unsortedHeaders,
-  ascendingHeaders,
-  descendingHeaders,
-  sortableRows,
-  ascendingRowsByDate,
-  descendingRowsByDate,
-  expandableTableRows,
-  footer,
-  scrollableHeaders,
-  scrollableRows,
-  shrinkHeaders,
-  shrinkRows,
-  fillHeaders,
-  fillRows,
-} from './docsData';
-
-export const defaultProps = {
-  headers,
-  rows,
-};
-
-# Table
-
-<Preview>
-  <Table {...defaultProps} caption={<h2 hasMdxLink={false}>Random data</h2>} />
-</Preview>
-
-## With footer
-
-<Preview>
-  <Table
-    caption={<h3 hasMdxLink={false}>Random data and footer</h3>}
-    {...defaultProps}
-    footers={footer}
-  />
-</Preview>
-
-## Striped
-
-<Preview>
-  <Table
-    {...defaultProps}
-    caption={<h3 hasMdxLink={false}>Random data with striped rows</h3>}
-    isStriped
-  />
-</Preview>
-
-## Shrink / fill cells
-
-<Preview>
-  <Table
-    headers={shrinkHeaders}
-    rows={shrinkRows}
-    caption={<h3 hasMdxLink={false}>Shrink cells to their minimum width</h3>}
-  />
-</Preview>
-
-<Preview>
-  <Table
-    headers={fillHeaders}
-    rows={fillRows}
-    caption={
-      <h3 hasMdxLink={false}>Fill cells to take maximum avialble space</h3>
-    }
-  />
-</Preview>
-
-## Scrollable
-
-Scrollable tables can get wider than their container and scroll horizontally.
-
-How to enable horizontal scrolling:
-
-- Wrap the table in a `<div class="table-scrollable" role="group" />`.
-
-  This enables the scrolling itself.
-
-- Put `data-table` attribute on the `<table />` element.
-
-  This initializes Table.static.js. It observes the table width and makes
-  the wrapping div focusable, when the table width exceeds the wrapping
-  div width and becomes horizontally scrollable.
-  This enables keyboard navigation support.
-
-- Add a table caption and reference it as label from the wrapping div
-  by adding `aria-labelledby="caption-id"`.
-
-  This enables screenreader support.
-
-<Preview>
-  <Table
-    data-table
-    headers={scrollableHeaders}
-    rows={scrollableRows}
-    caption={<h3 hasMdxLink={false}>Scrollable on all viewports</h3>}
-    isScrollable
-  />
-</Preview>
-
-## Sortable
-
-Sortable tables only provide necessary (accessible) markup and styles.
-
-The sorting functionality itself and changing appropriate attributes and text labels
-must be managed by application authors.
-
-The following example shows three example states of sorting by date.
-
-<Preview>
-  <Table
-    caption={<h3 hasMdxLink={false}>Random unsorted data</h3>}
-    headers={unsortedHeaders}
-    rows={sortableRows}
-  />
-  <Table
-    caption={<h3 hasMdxLink={false}>Random sorted data (ascending by Date)</h3>}
-    headers={ascendingHeaders}
-    rows={ascendingRowsByDate}
-  />
-  <Table
-    caption={
-      <h3 hasMdxLink={false}>Random sorted data (descending by Date)</h3>
-    }
-    headers={descendingHeaders}
-    rows={descendingRowsByDate}
-  />
-</Preview>
-
-## Expandable rows
-
-Expandable rows functionality is automatically initialised, on tables
-with `data-table` attribute for `button` elements with `data-subrow-toggle`
-attribute present. Clicking a button expands all rows referenced in `aria-controls`
-and switches it's `aria-expanded` attribute.
-
-<Preview>
-  <Table
-    data-table
-    caption={<h3 hasMdxLink={false}>Random data</h3>}
-    headers={headers}
-    rows={expandableTableRows}
-  />
-</Preview>
-
-## Responsive tables
-
-When building a responsive table which changes CSS display properties of its
-cells or rows, apply `data-table="responsive"` attribute to the `<table />` element.
-`Table.static.js` takes over and sets appropriate `role` attributes. This is necessary
-because browsers tend to destroy semantics on tables that have their CSS display
-properties altered.
-
-- `table` gets `role="table"`
-- `thead`, `tbody` and `tfoot` gets `role="rowgroup"`
-- `tr` gets `role="row"`
-- `td` gets `role="cell"`
-- `th` gets `role="columnheader"`
-- `th[scope=row]` gets `role="rowheader"`
-
-The Table component does not provide any example styles for responsive tables.
-
-## JS module reference
-
-`Table.static.js` provides:
-
-- [expandable-rows](#expandable-rows) functionality
-- attribute management for screenreader and keyboard support in [scrollable tables](#scrollable)
-- assigning aria roles to [responsive tables](#responsive-tables)
-
-All elements with `[data-tables]` will be initialised automatically.
-
-### Custom initialization
-
-```javascript
-const myTable = new window.ODS.modules.Table(
-  document.getElementById('my-table'),
-  config
-);
-```
-
-#### Default config
-
-```javascript
-{
-  expandButtonSelector: '[data-subrow-toggle]', // enable expanding rows for these buttons
-  scrollableContainerSelector: '.table-scrollable', // observe scrollable table width compared to this container
-  responsiveTableSelector: `[data-table="responsive"]`, // implicitly apply aria roles if the table matches this selector
-}
-```
-
-## Props
-
-<ComponentDocs title="<Table />" component={Table} />