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

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/Sticker/tests/Sticker.conformance.test.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import { Sticker } from '../';
-
-const example = <Sticker color="black">Black sticker</Sticker>;
-
-it('is valid html', () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate();
-});
-
-it('is accessible', async () => {
-  const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
-});

package/src/components/Sticker/tests/Sticker.unit.test.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { Sticker } from '../Sticker';
-
-describe('rendering Sticker', () => {
-  describe('initial state', () => {
-    it('has default class sticker', () => {
-      const { getByTestId } = render(<Sticker data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('sticker');
-    });
-  });
-
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByText } = render(<Sticker>test</Sticker>);
-      expect(getByText('test')).toBeInTheDocument();
-    });
-
-    it('has class test-class when className is set to test-class', () => {
-      const { getByTestId } = render(
-        <Sticker data-testid="test-id" className="test-class" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    ['black', 'orange'].map(color => {
-      it(`has sticker--${color} class when color is ${color}`, () => {
-        const { container } = render(<Sticker color={color} />);
-        expect(
-          container.getElementsByClassName(`sticker--${color}`).length
-        ).toBe(1);
-      });
-    });
-
-    it('has sticker--small class when size is small', () => {
-      const { container } = render(<Sticker size="small" />);
-      expect(
-        container.getElementsByClassName('sticker--small').length
-      ).toBe(1);
-    });
-  });
-});

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