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

package/src/components/Link/Link.mdx

@@ -1,238 +0,0 @@
-import { ComponentDocs } from "@lighting-beetle/lighter-styleguide";
-
-import { Preview } from "../../styleguide/";
-import Icon from "../Icon";
-
-import Link from "./Link";
-
-# Link
-
-Links are basic navigation elements that provide interactive text-based navigation. They are always underlined and have consistent styling across the application. Standalone links are bold by default, but when used inline with other text, they inherit the font weight from their parent element.
-
-## Basic Usage
-
-<Preview>
-  <a href="/" className="">
-    Standalone link
-  </a>
-  <p>
-    Links in text{" "}
-    <a href="/" className="">
-      inherit font weight
-    </a>
-  </p>
-  <p>
-    Links in text that are{" "}
-    <a href="/" className="">
-      way too long and need to wrap at the end of the line so it will not break
-      the paragraph of text
-    </a>
-  </p>
-</Preview>
-
-## Link Class Behavior
-
-Default Link styling is automatically applied to all `<a>` elements except those with specific classes: `.btn`, `.list__control`, `.tab-list__tab`, `.stepbar__link`, `.osk-breadcrumbs__link`, `.skip-link`, `.dropdown__item`, `.carousel-promotions__slide`, and elements within `.osk-footer` or `.megamenu-header`. To force Link styling on these elements, use the `.link` class.
-
-<Preview>
-  <div className="megamenu-header">
-    <a href="/" className="">
-      Link in megamenu (no styling)
-    </a>
-    <br />
-    <Link href="/">Link with class .link in megamenu</Link>
-  </div>
-</Preview>
-
-## Color Variants
-
-### Default (Black)
-
-The standard link color that works on light backgrounds.
-
-<Preview>
-  <a href="/" className="">
-    Default Link
-  </a>
-</Preview>
-
-### Orange
-
-**Accessibility Warning**: Orange links on white background do not meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) due to insufficient contrast between white and orange brand colors.
-
-<Preview>
-  <a className="link--orange" href="/">
-    Orange Link
-  </a>
-</Preview>
-
-### Inverse (White)
-
-For use on dark backgrounds.
-
-<Preview bgTheme="black">
-  <div className="bg-black">
-    <a href="/">Inverse link without class .link--is-inverse</a>
-  </div>
-  <a className="link--is-inverse" href="/">
-    Inverse Link
-  </a>
-  <div className="bg-black">
-    <a className="link--orange" href="/">
-      Orange Inverse link without class .link--is-inverse
-    </a>
-  </div>
-  <a className="link--is-inverse link--orange" href="/">
-    Orange Inverse Link
-  </a>
-</Preview>
-
-### Black
-
-Link stays black even during focus and hover. Should be used on orange backgrounds.
-
-<Preview>
-  <div className="bg-orange">
-    <a className="link--black" href="/">
-      Black Link
-    </a>
-  </div>
-</Preview>
-
-### Default Important
-
-When white background is used inside black background, links automatically use inverse styling and become white (invisible). Use `.link--default` class to force default black styling.
-
-<Preview bgTheme="black">
-  <div className="bg-black">
-    <div className="bg-white">
-      <div className="d-block">
-        <a href="/">I don't have class link--default {":("}</a>
-        <a className="color-black">{"<-- there's a link"}</a>
-      </div>
-      <a className="link--default" href="/">
-        I do have class link--default {":)"}
-      </a>
-    </div>
-  </div>
-</Preview>
-
-## Icon Integration
-
-### With Icons
-
-Links can include icons positioned to the left or right of the text.
-
-<Preview>
-  <a href="/">
-    <Icon name="chevron-left" className="link__icon-left" />
-    Back
-  </a>
-  <br />
-  <a href="/">
-    Next
-    <Icon name="chevron-right" className="link__icon-right" />
-  </a>
-  <br />
-  <br />
-  <a href="/">
-    <Icon name="chevron-left" size="large" className="link__icon-left" />
-    Back
-  </a>
-  <br />
-  <a href="/">
-    Next
-    <Icon name="chevron-right" size="large" className="link__icon-right" />
-  </a>
-</Preview>
-
-## Element Types
-
-### Render as Button
-
-When a Link doesn't navigate but controls the document (e.g., opens a modal), it can be rendered as a `button` element.
-
-<Preview>
-  <Link tag="button">Perform click action</Link>
-</Preview>
-
-## Use Cases
-
-### 1. Navigation Links
-
-- **Primary navigation**: Main menu items, breadcrumbs
-- **Secondary navigation**: Footer links, sidebar navigation
-- **Inline navigation**: Links within content text
-
-### 2. Action Links
-
-- **Modal triggers**: Opening dialogs, popups, or overlays
-- **Form submissions**: Submit buttons styled as links
-- **Toggle actions**: Show/hide content, expand/collapse sections
-
-### 3. External Links
-
-- **Social media**: Links to external platforms
-- **Documentation**: Links to help pages, guides
-- **Partner sites**: Affiliate or partner website links
-
-### 4. Download Links
-
-- **File downloads**: PDFs, documents, media files
-- **Software downloads**: Applications, tools, utilities
-
-### 5. Email Links
-
-- **Contact information**: Email addresses with mailto: protocol
-- **Support links**: Direct email to support teams
-
-### 6. Phone Links
-
-- **Contact numbers**: Phone numbers with tel: protocol
-- **Support hotlines**: Direct calling to support
-
-### 7. Back/Forward Navigation
-
-- **Breadcrumb navigation**: Previous page links
-- **Wizard steps**: Next/previous step navigation
-- **Pagination**: Page navigation controls
-
-### 8. Contextual Links
-
-- **Related content**: "See also" links
-- **Reference links**: Citations, sources, footnotes
-- **Cross-references**: Links to related sections
-
-### 9. Call-to-Action Links
-
-- **Primary CTAs**: "Get Started", "Learn More", "Sign Up"
-- **Secondary CTAs**: "Cancel", "Back", "Skip"
-
-### 10. Accessibility Links
-
-- **Skip links**: Jump to main content
-- **Accessibility help**: Screen reader support links
-
-## Accessibility
-
-### Color Contrast
-
-Orange links on white background do not meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) due to insufficient contrast between white and orange brand colors.
-
-### Focus States
-
-All links have visible focus states with proper contrast and outline styling.
-
-### Screen Reader Support
-
-- Links are properly announced to screen readers
-- Icon-only links should include descriptive text
-- External links should indicate they open in new windows
-
-### Keyboard Navigation
-
-- All links are keyboard accessible
-- Focus order follows logical document flow
-- Focus indicators are clearly visible
-
-<ComponentDocs component={Link} />

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/List/tests/ListItem.unit.test.js

@@ -1,104 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { ListItem } from '../ListItem';
-
-const controlProps1 = {
-  className: 'test-class',
-};
-const controlProps2 = {
-  className: 'test-class',
-  href: 'test',
-};
-
-//conditional wrapper component inside ListItem requires child to render
-describe('rendering ListItem', () => {
-  describe('initial state', () => {
-    it('has default class list__item', () => {
-      const { getByTestId } = render(
-        <ListItem data-testid="test-id">test-child</ListItem>
-      );
-      expect(getByTestId('test-id')).toHaveClass('list__item');
-    });
-  });
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByText } = render(
-        <ListItem data-testid="test-id">test-child</ListItem>
-      );
-      expect(getByText('test-child')).toBeInTheDocument();
-    });
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <ListItem data-testid="test-id" className="test-class">
-          test-child
-        </ListItem>
-      );
-      expect(getByTestId('test-id')).toHaveClass('list__item');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    it('renders button with type button when controlProps without href is passed', () => {
-      const { getByRole } = render(
-        <ListItem data-testid="test-id" controlProps={controlProps1}>
-          test-child
-        </ListItem>
-      );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button').getAttribute('type')).toBe('button');
-    });
-    it('renders button with class from controlProps.className when passed', () => {
-      const { getByRole } = render(
-        <ListItem data-testid="test-id" controlProps={controlProps1}>
-          test-child
-        </ListItem>
-      );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button')).toHaveClass('test-class');
-    });
-    it('renders button with class from controlProps.className when passed', () => {
-      const { getByRole } = render(
-        <ListItem data-testid="test-id" controlProps={controlProps1}>
-          test-child
-        </ListItem>
-      );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button')).toHaveClass('test-class');
-    });
-    it('children are rendered inside button element when button is rendered', () => {
-      const { getByRole } = render(
-        <ListItem data-testid="test-id" controlProps={controlProps1}>
-          test-child
-        </ListItem>
-      );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button').textContent).toBe('test-child');
-    });
-    it('renders anchor without type when controlProps with href is passed', () => {
-      const { getByRole } = render(
-        <ListItem data-testid="test-id" controlProps={controlProps2}>
-          test-child
-        </ListItem>
-      );
-      expect(getByRole('link')).toBeInTheDocument();
-      expect(getByRole('link').getAttribute('type')).toBeFalsy();
-    });
-    it('renders anchor with class from controlProps.className when passed', () => {
-      const { getByRole } = render(
-        <ListItem data-testid="test-id" controlProps={controlProps2}>
-          test-child
-        </ListItem>
-      );
-      expect(getByRole('link')).toBeInTheDocument();
-      expect(getByRole('link')).toHaveClass('test-class');
-    });
-    it('children are rendered inside anchor element when anchor is rendered', () => {
-      const { getByRole } = render(
-        <ListItem data-testid="test-id" controlProps={controlProps2}>
-          test-child
-        </ListItem>
-      );
-      expect(getByRole('link')).toBeInTheDocument();
-      expect(getByRole('link').textContent).toBe('test-child');
-    });
-  });
-});

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