@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

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

package/src/components/Tile/Tile.mdx

@@ -1,163 +0,0 @@
-import {
-  CodeBlock,
-  ComponentDocs,
-  Note,
-} from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-
-import Tile from './index';
-import Grid, { GridCol } from '../Grid/index';
-import BlockAction, {
-  BlockActionControl,
-  BlockActionIndicator,
-  BlockActionOverride,
-} from '../BlockAction';
-import Link from '../Link';
-import Button from '../Button';
-
-export const colors = ['default', 'black'];
-
-# Tile
-
-Tile fills container and allows us to set background image, icon or to align children. Used mostly in Carousel or Grid components.
-
-<Preview bgTheme="gray">
-  <Grid rowGapSize="medium">
-    {['device-tablet', 'device-tv', 'device-smart-phone'].map((icon, index) => (
-      <GridCol size={{ xs: 6, md: 4, lg: 3 }} key={index.toString()}>
-        <Tile
-          key={index.toString()}
-          backgroundIcon={{
-            name: icon,
-          }}
-        >
-          <p>Tile {index + 1}</p>
-        </Tile>
-      </GridCol>
-    ))}
-  </Grid>
-</Preview>
-
-## Color
-
-<Preview bgTheme="gray">
-  <Grid rowGapSize="medium">
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="White (default) color" />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="Black color" color="black" />
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Background
-
-You can set background image or icon aligned to bottom and center of tile.
-
-<Preview>
-  <Grid rowGapSize="medium">
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile
-        backgroundImage={{
-          src: 'https://placehold.co/320x320',
-          alt: 'Gray square with dimensions',
-        }}
-      >
-        <p>Background Image</p>
-      </Tile>
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile
-        color="black"
-        backgroundIcon={{
-          name: 'device-tablet',
-        }}
-      >
-        <p>Background Icon</p>
-      </Tile>
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile
-        backgroundIcon={{
-          name: 'device-tablet',
-        }}
-        backgroundImage={{
-          src: 'https://placehold.co/320x320',
-          alt: 'Gray square with dimensions',
-        }}
-      >
-        <p>Both background Icon and Image</p>
-      </Tile>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Alignment
-
-Children can be aligned using hAlign and vAlign props.
-
-<Preview bgTheme="gray">
-  <Grid rowGapSize="medium">
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="Default (left)" />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="Center vertical" vAlign="center" />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="Center horizontal" hAlign="center" />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="End" vAlign="end" />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile vAlign="space-between">
-        <p>Space</p>
-        <p>between</p>
-      </Tile>
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile
-        children="Center center alignment"
-        vAlign="center"
-        hAlign="center"
-      />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile hAlign="center" vAlign="space-between">
-        <p>Center</p>
-        <p>space-between</p>
-      </Tile>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Block Link example
-
-<Preview bgTheme="gray">
-  <Grid>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <BlockAction>
-        <Tile>
-          <h3 hasMdxLink={false}>
-            <BlockActionControl>
-              <Link href="#">Block heading</Link>
-            </BlockActionControl>
-          </h3>
-          <p>Lorem Ipsum</p>
-          <BlockActionOverride>
-            <Button>Override button</Button>
-          </BlockActionOverride>
-        </Tile>
-      </BlockAction>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Tile />" component={Tile} />
-
-## Accessibility