@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

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

package/src/components/Tabs/Tabs.mdx

@@ -1,373 +0,0 @@
-import { loremIpsum } from 'lorem-ipsum';
-import {
-  md,
-  ComponentDocs,
-  CodeBlock,
-  Code,
-  DocsTable,
-} from '@lighting-beetle/lighter-styleguide';
-import { Preview, DefaultConfigTable } from '../../styleguide/';
-import Tabs, { TabPanel, Tab as TabLink } from './index';
-
-import {
-  defaultConfig as defaultConfigTabs,
-  configDocs as configDocsTabs,
-} from './Tabs.static';
-
-# Tabs
-
-Navigate sections of content in a tabbed interface.
-
-<Preview
-  code={
-    <Tabs>
-      <TabPanel id="tabpanel-1" tab="Tab 1">
-        ...
-      </TabPanel>
-      <TabPanel id="tabpanel-2" tab="Tab 2">
-        ...
-      </TabPanel>
-      <TabPanel id="tabpanel-3" tab="Tab 3">
-        ...
-      </TabPanel>
-      <TabPanel id="tabpanel-4" tab="Tab 4">
-        ...
-      </TabPanel>
-    </Tabs>
-  }
->
-  <Tabs activeTabIndex={2}>
-    {[1, 2, 3, 4].map(item => (
-      <TabPanel
-        key={item.toString()}
-        id={`tabpanel-${item}`}
-        tab={`Tab ${item}`}
-        isDisabled={item === 4 ? true : null}
-      >
-        <p>{loremIpsum({ count: 3 })}</p>
-      </TabPanel>
-    ))}
-  </Tabs>
-</Preview>
-
-# Tabs - links
-
-Tabs can be also use as group of links.
-
-<Preview>
-  <Tabs activeTabIndex={2} isLink>
-    {[1, 2, 3, 4].map(item => (
-      <TabPanel
-        key={item.toString()}
-        id={`tabpanel-${item}`}
-        href="#tabs-links"
-        tab={`Tab ${item}`}
-        isDisabled={item === 4 ? true : null}
-      />
-    ))}
-  </Tabs>
-</Preview>
-
-# Light tabs
-
-<Preview
-  code={
-    <Tabs variant="light">
-      <TabPanel id="tabpanel-1" tab="Tab 1">
-        ...
-      </TabPanel>
-      <TabPanel id="tabpanel-2" tab="Tab 2">
-        ...
-      </TabPanel>
-      <TabPanel id="tabpanel-3" tab="Tab 3">
-        ...
-      </TabPanel>
-      <TabPanel id="tabpanel-4" tab="Tab 4">
-        ...
-      </TabPanel>
-    </Tabs>
-  }
->
-  <Tabs activeTabIndex={2} variant="light">
-    {[1, 2, 3, 4].map(item => (
-      <TabPanel
-        key={item.toString()}
-        id={`tabpanel-light-${item}`}
-        tab={`Tab ${item}`}
-        isDisabled={item === 4 ? true : null}
-      >
-        <p>{loremIpsum({ count: 3 })}</p>
-      </TabPanel>
-    ))}
-  </Tabs>
-</Preview>
-
-## Inverse
-
-<Preview
-  bgTheme="black"
-  code={
-    <>
-      <Tabs colour="inverse">
-        <TabPanel id="tabpanel-1" tab="Tab 1">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-2" tab="Tab 2">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-3" tab="Tab 3">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-4" tab="Tab 4">
-          ...
-        </TabPanel>
-      </Tabs>
-      <Tabs variant="light" colour="inverse">
-        <TabPanel id="tabpanel-5" tab="Tab 5">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-6" tab="Tab 6">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-7" tab="Tab 7">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-8" tab="Tab 8">
-          ...
-        </TabPanel>
-      </Tabs>
-    </>
-  }
->
-  {['standard', 'light'].map(tab => (
-    <Tabs activeTabIndex={2} colour="inverse" key={tab} variant={tab}>
-      {[1, 2, 3, 4].map(item => (
-        <TabPanel
-          key={item.toString()}
-          id={`tabpanel-${tab}-inverse-${item}`}
-          tab={`Tab ${item}`}
-          isDisabled={item === 4 ? true : null}
-        >
-          <p className="bg-black">{loremIpsum({ count: 3 })}</p>
-        </TabPanel>
-      ))}
-    </Tabs>
-  ))}
-</Preview>
-
-## Full width container
-
-<Preview
-  code={
-    <>
-      <Tabs isFullWidth>
-        <TabPanel id="tabpanel-1" tab="Tab 1">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-2" tab="Tab 2">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-3" tab="Tab 3">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-4" tab="Tab 4">
-          ...
-        </TabPanel>
-      </Tabs>
-      <Tabs variant="light" isFullWidth>
-        <TabPanel id="tabpanel-5" tab="Tab 5">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-6" tab="Tab 6">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-7" tab="Tab 7">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-8" tab="Tab 8">
-          ...
-        </TabPanel>
-      </Tabs>
-    </>
-  }
->
-  {['standard', 'light'].map(tab => (
-    <Tabs activeTabIndex={2} isFullWidth key={`fullwidth-${tab}`} variant={tab}>
-      {[1, 2, 3, 4].map(item => (
-        <TabPanel
-          key={item.toString()}
-          id={`tabpanel-${tab}-fullwidth-${item}`}
-          tab={`Tab ${item}`}
-          isDisabled={item === 4 ? true : null}
-        >
-          <p>{loremIpsum({ count: 3 })}</p>
-        </TabPanel>
-      ))}
-    </Tabs>
-  ))}
-</Preview>
-
-## Equal width tabs
-
-<Preview
-  code={
-    <>
-      <Tabs hasEqualTabWidth>
-        <TabPanel id="tabpanel-1" tab="Tab 1">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-2" tab="Tab 2">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-3" tab="Tab 3">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-4" tab="Tab 4">
-          ...
-        </TabPanel>
-      </Tabs>
-      <Tabs variant="light" hasEqualTabWidth>
-        <TabPanel id="tabpanel-5" tab="Tab 5">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-6" tab="Tab 6">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-7" tab="Tab 7">
-          ...
-        </TabPanel>
-        <TabPanel id="tabpanel-8" tab="Tab 8">
-          ...
-        </TabPanel>
-      </Tabs>
-    </>
-  }
->
-  {['standard', 'light'].map(tab => (
-    <Tabs
-      activeTabIndex={2}
-      hasEqualTabWidth
-      key={`equalwidth-${tab}`}
-      variant={tab}
-    >
-      {[1, 2, 3, 4].map(item => (
-        <TabPanel
-          key={item.toString()}
-          id={`tabpanel-${tab}-equalwidth-${item}`}
-          tab={`Tab ${item}`}
-          isDisabled={item === 4 ? true : null}
-        >
-          <p>{loremIpsum({ count: 3 })}</p>
-        </TabPanel>
-      ))}
-    </Tabs>
-  ))}
-</Preview>
-
-## Custom tab content
-
-Only use inline elements as children of the tab titles. The tabs are `<button>` elements which do not allow using block elements inside themselves.
-
-<Preview>
-  <Tabs>
-    <TabPanel
-      id="stylized-tab-1"
-      tab={
-        <React.Fragment>
-          <span className="h3 mb-xsmall">Large tab 1</span>
-          description
-        </React.Fragment>
-      }
-    >
-      <p>{loremIpsum({ count: 5 })}</p>
-    </TabPanel>
-    <TabPanel
-      id="stylized-tab-2"
-      tab={
-        <React.Fragment>
-          <span className="h3 mb-xsmall">Large tab 2</span>
-          description
-        </React.Fragment>
-      }
-    >
-      <p>{loremIpsum({ count: 5 })}</p>
-    </TabPanel>
-  </Tabs>
-</Preview>
-
-## JS module reference
-
-All elements with `[data-tabs]` will be initialised automatically.
-
-## Custom initialization
-
-<CodeBlock language="js">
-  const myTabs = new window.ODS.modules.Tabs(document.getElementById('my-tabs'),
-  config );
-</CodeBlock>
-
-## Default config
-
-<DefaultConfigTable config={defaultConfigTabs} docs={configDocsTabs} />
-
-## Methods
-
-export const methods = [
-  {
-    prop: 'init',
-    type: 'func',
-    default: '() => {}',
-    description: 'Creates a new instance',
-  },
-  {
-    prop: 'destroy',
-    type: 'func',
-    default: '() => {}',
-    description: 'Destroy the instance - remove all listeners',
-  },
-  {
-    prop: 'update',
-    type: 'func',
-    default: '() => {}',
-    description: 'Updates the instance',
-  },
-  {
-    prop: "toggleTab(el: element, state: 'on'/'off')",
-    type: 'func',
-    default: '() => {}',
-    description: 'toggle a tab on or off',
-  },
-  {
-    prop: "toggleTabPanel(el: element, state: 'on'/'off')",
-    type: 'func',
-    default: '() => {}',
-    description: 'toggle a tabpanel on or off',
-  },
-  {
-    prop: 'activateNthTab(index: integer)',
-    type: 'func',
-    default: '() => {}',
-    description: 'activates nth (zero based index) tab and tabpanel',
-  },
-];
-
-<DocsTable data={methods} />
-
-## Props
-
-<ComponentDocs title="<Tabs />" component={Tabs} />
-
-<ComponentDocs
-  title="<TabPanel />"
-  component={TabPanel}
-  excludes={['isActive']}
-/>
-
-## Accessibility
-
-Tabs are implemented according to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel) - [Example 2 Tabs with manual activation](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html)
-
-Notes:
-
-- Optional keyboard interaction (Home, End, Shift + 10, Delete) is not implemented.
-- Tabpanel elements lack aria-labelledby attributes due to a bug in VoiceOver, which reads the label instead of the content of the tabpanel.

package/src/components/Tag/Tag.mdx

@@ -1,52 +0,0 @@
-import { ComponentDocs, Code } from "@lighting-beetle/lighter-styleguide";
-
-import { Preview } from "../../styleguide/";
-import Tag, { colors } from "./Tag";
-import Icon from "../Icon";
-
-# Tag
-
-Tag is used to highlight short and concise information, usually one word. Breaks into multiple lines when necessary.
-
-<Preview>
-  <Tag>Short text</Tag>
-</Preview>
-
-## Color
-
-<Preview>
-  <ul className="list-unstyled">
-    <li>
-      <Tag>default</Tag>
-    </li>
-    {colors.map((color) => (
-      <li key={color}>
-        <Tag color={color}>{color}</Tag>
-      </li>
-    ))}
-  </ul>
-</Preview>
-
-## Round
-
-<Preview>
-  <Tag isRound>round</Tag>
-</Preview>
-
-## Text wrapping
-
-Tag content can span multiple lines. Use soft hyphens to control where the text can wrap.
-
-Our code preview does not show the soft hyphen character explicitly. The word markup is: `Naj&shy;ne&shy;zre&shy;vo&shy;lu&shy;cio&shy;na&shy;li&shy;zo&shy;va&shy;teľ&shy;nej&shy;šie&shy;mu`.
-
-<Preview>
-  <div style={{ width: "150px" }}>
-    <Tag className="text-wrap">
-      Naj&shy;ne&shy;zre&shy;vo&shy;lu&shy;cio&shy;na&shy;li&shy;zo&shy;va&shy;teľ&shy;nej&shy;šie&shy;mu
-    </Tag>
-  </div>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Tag />" component={Tag} />

package/src/components/Testimonial/Testimonial.mdx

@@ -1,41 +0,0 @@
-import { md, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview, DefaultConfigTable } from '../../styleguide/';
-import Testimonial from './index';
-import { loremIpsum } from 'lorem-ipsum';
-
-# Testimonial
-
-Wraps text in quotation marks.
-
-<Preview>
-  <Testimonial>
-    Esse velit magna mollit ex duis esse cupidatat eu qui anim minim in.
-    Deserunt minim ut laboris nulla. Adipisicing do incididunt laboris commodo
-    tempor cillum consequat qui occaecat.
-  </Testimonial>
-</Preview>
-
-## Color
-
-<Preview>
-  <Testimonial color="orange">I'm orange....</Testimonial>
-</Preview>
-
-## Tag
-
-In some cases, when you have multiple children, you can use div instead of paragraph as wrapper.
-
-<Preview>
-  <Testimonial isDiv>
-    <p>
-      Esse velit magna mollit ex duis esse cupidatat eu qui anim minim in.
-      Deserunt minim ut laboris nulla. Adipisicing do incididunt laboris commodo
-      tempor cillum consequat qui occaecat.
-    </p>
-    <p className="align-right">Albert Einstein (probably)</p>
-  </Testimonial>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Testimonial />" component={Testimonial} />