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

package/src/components/Divider/Divider.mdx

@@ -1,65 +0,0 @@
-import { ComponentDocs } from "@lighting-beetle/lighter-styleguide";
-
-import { Preview } from "../../styleguide/";
-
-import Card, { CardHeader, CardSection } from "../Card";
-import { headerColors } from "../Card/CardHeader";
-import Divider from "../Divider";
-import Button from "../Button";
-import { Image } from "../Image";
-import Grid, { GridCol } from "../Grid";
-
-# Divider
-
-Divider serves as an option for horizontal division of spaces/elements/contents.
-
-## Example
-
-<Preview>
-  <Divider />
-</Preview>
-
-## Width
-
-Width of the divider line can be reduced to 1 pixel using `.divider__line--thin` class.
-
-<Preview>
-  <Divider />
-  <Divider thinLine />
-</Preview>
-
-## Content
-
-Divider can hold different contents if you need to visualise separation with
-something like a word or icon, you can do it here.
-
-<Preview>
-  <Divider />
-  <Divider icon="add" />
-  <Divider content={<strong>custom text</strong>} />
-</Preview>
-
-## Color
-
-If you need to use divider on **non-white backgrounds** use
-`.divider--black` or `.divider--white` class
-
-Default color is gray and it's used on white backgrounds only
-
-<Preview>
-  <Divider />
-  <Divider icon="add" />
-  <Divider content={<strong>custom text</strong>} />
-  <div className="bg-black">
-    <Divider color="white" />
-    <Divider color="white" icon="add" />
-    <Divider color="white" content={<strong>custom text</strong>} />
-  </div>
-  <Divider color="black" />
-  <Divider color="black" icon="add" />
-  <Divider color="black" content={<strong>custom text</strong>} />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Divider />" component={Divider} />

package/src/components/Dropdown/Dropdown.mdx

@@ -1,260 +0,0 @@
-import Dropdown, {
-  DropdownToggleButton,
-  DropdownItem,
-  DropdownDivider,
-} from './index';
-import Grid, { GridCol } from '../Grid';
-import {
-  ComponentDocs,
-  Code,
-  CodeBlock,
-  Note,
-} from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-import Bar, { BarItem } from './../Bar';
-import Button from './../Button';
-import Icon from './../Icon';
-import Table from './../Table';
-import Tooltip, { InfoTooltip } from './';
-import Select from '../Forms/Select/index';
-
-# Dropdown
-
-It's required to use `id` on dropdown a toogle button for it to work. `id` of dropdown should follow pattern `dropdown-<name>`
-and for toggle buttons `id` pattern `btn-<name>` should be used.
-
-<Preview>
-  <Dropdown
-    id="1"
-    hasSpacing={false}
-    button={{
-      iconName: 'menu-arrow',
-      children: 'Dropdown',
-      iconPosition: 'right',
-    }}
-  >
-    <DropdownItem href="#">Laborum laboris amet minim.</DropdownItem>
-    <DropdownItem disabled href="#">
-      Quis adipisicing eu consectetur.
-    </DropdownItem>
-    <DropdownDivider />
-    <DropdownItem href="#">Deserunt id consectetur esse in.</DropdownItem>
-  </Dropdown>
-</Preview>
-
-## Dropdown Interactive
-
-Dropdown menu with Interactive functionality eg. forms, buttons etc. should not close after click inside of dropdown component. This can be achieved with attribute `[data-dropdown-interactive]`.
-
-<Preview>
-  <Dropdown
-    id="2"
-    hasSpacing={false}
-    isInteractive
-    button={{
-      iconName: 'menu-arrow',
-      children: 'Dropdown',
-      iconPosition: 'right',
-    }}
-  >
-    <DropdownItem href="#">Laborum laboris amet minim.</DropdownItem>
-    <DropdownItem disabled href="#">
-      Quis adipisicing eu consectetur.
-    </DropdownItem>
-    <DropdownDivider />
-    <DropdownItem href="#">Deserunt id consectetur esse in.</DropdownItem>
-  </Dropdown>
-</Preview>
-
-## Focus Trap
-
-Prevents user from leaving the Dropdown using keyboard without closing the Dropdown. Can be achieved with attribute `[data-dropdown-focus-trap]`. In this case Dropdown can be
-close by using `Escape` key, but it's also recommended to use close button. Close buttons `id` needs to follow pattern `close-btn-<name>` for it to work.
-
-<Preview>
-  <Dropdown
-    id="3"
-    hasFocusTrap
-    isInteractive
-    button={{
-      iconName: 'menu-arrow',
-      children: 'With focus trap',
-      iconPosition: 'right',
-    }}
-  >
-    <Select id="select-in-dropdown" style={{ width: '100px' }}>
-      <option>Item 1</option>
-      <option>Item 2</option>
-    </Select>
-  </Dropdown>
-</Preview>
-
-## Position
-
-Dropdown can be aligned to left, right or center side of toggle button.
-
-<Preview>
-  <Grid>
-    <GridCol size={{ md: 4 }}>
-      <Dropdown
-        isInteractive
-        id="4"
-        button={{
-          children: 'Aligned to left',
-        }}
-      >
-        <p>Told ya I'm aligned to left...</p>
-      </Dropdown>
-    </GridCol>
-    <GridCol size={{ md: 4 }}>
-      <Dropdown
-        isInteractive
-        id="5"
-        placement="center"
-        button={{
-          children: 'Aligned to center',
-        }}
-      >
-        <p>Told ya I'm aligned to center...</p>
-      </Dropdown>
-    </GridCol>
-    <GridCol size={{ md: 4 }}>
-      <Dropdown
-        isInteractive
-        id="6"
-        placement="right"
-        button={{
-          children: 'Aligned to right',
-        }}
-      >
-        <p>Told ya I'm aligned to right...</p>
-      </Dropdown>
-    </GridCol>
-  </Grid>
-</Preview>
-
-<ComponentDocs title="<Dropdown />" component={Dropdown} />
-<ComponentDocs title="<DropdownItem />" component={DropdownItem} />
-<ComponentDocs
-  title="<DropdownToggleButton />"
-  component={DropdownToggleButton}
-/>
-<ComponentDocs title="<DropdownDivider />" component={DropdownDivider} />
-
-## JS module reference
-
-All elements with `[data-dropdown]` attribute will be initialised automatically.
-
-### Custom initialisation
-
-```js
-const instance = new window.ODS.modules.Dropdown(
-  document.getElementByUd('my-dropdown'),
-  config
-);
-```
-
-#### Config
-
-<Table
-  className="text-small"
-  headers={[
-    {
-      key: 'col1',
-      label: 'Name',
-    },
-    {
-      key: 'col2',
-      label: 'Description.',
-    },
-  ]}
-  rows={[
-    {
-      col1: 'popperOptions - object',
-      col2: (
-        <React.Fragment>
-          <p className="text-small">
-            <a href="https://popper.js.org/popper-documentation.html#defaults">
-              Popper.js
-            </a>{' '}
-            options object.
-          </p>
-          Default:
-          <CodeBlock>
-            {`{
-  placement: 'bottom-start',
-  strategy: 'absolute',
-  modifiers: [
-    {
-      name: 'eventListeners',
-      options: {
-        scroll: false,
-        resize: false,
-      },
-    },
-    {
-      name: 'flip',
-      options: {
-        fallbackPlacements: ['bottom-end', 'bottom-start', 'bottom'],
-      },
-    },
-    {
-      name: 'offset',
-      options: {
-        offset: [0, -1],
-      },
-    },
-  ],
-  }`}
-          </CodeBlock>
-        </React.Fragment>
-      ),
-    },
-  ]}
-/>
-
-### Methods
-
-<Table
-  className="text-small"
-  headers={[
-    {
-      key: 'col1',
-      label: 'Name',
-    },
-    {
-      key: 'col2',
-      label: 'Description.',
-    },
-  ]}
-  rows={[
-    {
-      col1: 'init',
-      col2: 'Creates a new instance',
-    },
-    {
-      col1: 'destroy',
-      col2: 'Destroy the instance - removes all listeners, destroys Popper.js instance and removes the dialog element',
-    },
-    {
-      col1: 'update',
-      col2: 'Updates Popper.js instance',
-    },
-    {
-      col1: 'handleVisibility',
-      col2: 'Shows / hide the Dropdown dialog',
-    },
-    {
-      col1: 'handleKeyPress',
-      col2: 'Handle key press events',
-    },
-    {
-      col1: 'handleClick',
-      col2: 'Handle click events',
-    },
-    {
-      col1: 'static getInstance(el: element)',
-      col2: 'Get instance of `Dropdown` attached to specific DOM element (usually `[data-dropdown]`).',
-    },
-  ]}
-/>

package/src/components/Expander/Expander.mdx

@@ -1,153 +0,0 @@
-import {
-  ComponentDocs,
-  Code,
-  Note,
-  md,
-} from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-import Expander from './index';
-import Icon from '../Icon';
-
-# Expander
-
-The Expander component is used to hide and show content. It can be used to reduce the amount of content visible on the page by default, making it easier for users to find what they are looking for.
-
-## Basic Usage
-
-<Preview>
-  <Expander summary="Show details">
-    This is the content that will be hidden until the user clicks the summary
-    text.
-  </Expander>
-</Preview>
-
-## Changing the summary text
-
-Add the `summaryOpened` prop to change the text displayed when the content is visible.
-
-<Preview>
-  <Expander summary="Show details" summaryOpened="Hide details">
-    This is the content that will be hidden until the user clicks the summary
-    text.
-  </Expander>
-</Preview>
-
-## IsInverted
-
-The `isInverted` prop can be used to change the color of the summary text.
-
-<Preview bgTheme="black">
-  <Expander summary="Show details on black background" isInverse>
-    This is the content that will be hidden until the user clicks the summary
-    text. <Icon name="money-box" size="large" color="orange" />{' '}
-    <Icon name="money-box" size="large" color="orange" />{' '}
-    <Icon name="money-box" size="large" color="orange" />
-  </Expander>
-</Preview>
-
-## Custom Icon
-
-Use the `renderSummary` prop to customize the summary icon. Icon is rotating thanks to `data-summary-icon` attribute, which needs to be present on the icon.
-
-<Preview>
-  <Expander
-    summary="Wave them like you just don't care"
-    renderSummary={({ summary }) => (
-      <>
-        <span>{summary}</span>{' '}
-        <Icon name="accessibility-motor" data-summary-icon size="medium" />
-      </>
-    )}
-  >
-    This is the content that will be hidden until the user clicks the summary
-    text.
-  </Expander>
-</Preview>
-
-## Custom Summary text
-
-Use the `renderSummary` and `renderSummaryOpened` props to customize the summary text. Icons does not rotate in this case.
-
-<Preview>
-  <Expander
-    summary="This is the custom summary text"
-    renderSummary={({ summary }) => (
-      <>
-        <p className="h3 mb-none">{summary}</p>{' '}
-        <Icon name="money-box" size="large" color="info" />
-      </>
-    )}
-    summaryOpened="Hide the custom summary text"
-    renderSummaryOpened={({ summaryOpened }) => (
-      <>
-        <p className="h3 mb-none">{summaryOpened}</p>{' '}
-        <Icon name="birthday" size="large" color="danger" />
-      </>
-    )}
-  >
-    This is the content that will be hidden until the user clicks the summary
-    text.
-  </Expander>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Expander />" component={Expander} />
-
-## JS module reference
-
-All elements with `[data-expander]` will be initialised automatically.
-
-### Custom initialization
-
-```javascript
-const myAccordion = new window.ODS.modules.Expander(
-  document.getElementById('my-expander')
-);
-```
-
-### 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: 'update',
-      type: 'func',
-      default: '() => {}',
-      description: 'Destroys the instance and calls a fresh init().',
-    },
-    {
-      prop: 'toggle',
-      type: 'func',
-      default: '() => {}',
-      description: 'Toggle the visibility of the content.',
-    },
-  ]}
-/>
-
-## Accessibility
-
-The Expander component uses the `<details>` and `<summary>` HTML elements, which are natively supported by most screen readers. This ensures that the component is accessible to users who rely on assistive technologies.
-
-<Note>
-  Ensure that the `summaryText` prop provides a clear and concise description of
-  the content that will be revealed.
-</Note>

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

@@ -1,124 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import { Expander } from '../Expander';
-import { Icon } from '../../Icon';
-
-describe('Expander', () => {
-  it('renders basic expander with summary text', () => {
-    render(<Expander summary="Show details">Content</Expander>);
-    expect(screen.getByText('Show details')).toBeInTheDocument();
-    expect(screen.getByText('Content')).toBeInTheDocument();
-  });
-
-  it('changes summary text when opened', () => {
-    render(
-      <Expander summary="Show details" summaryOpened="Hide details">
-        Content
-      </Expander>
-    );
-
-    expect(screen.getByText('Show details')).toBeInTheDocument();
-
-    // Click to open the expander
-    fireEvent.click(screen.getByText('Show details'));
-
-    expect(screen.getByText('Hide details')).toBeInTheDocument();
-  });
-
-  it('supports inverse mode', () => {
-    const { container } = render(
-      <Expander summary="Show details" colorScheme="dark">
-        Content
-      </Expander>
-    );
-
-    expect(container.querySelector('.expander.is-dark')).toBeInTheDocument();
-  });
-
-  it('renders custom summary with renderSummary prop', () => {
-    render(
-      <Expander
-        summary="Custom summary"
-        renderSummary={({ summary }) => (
-          <>
-            <span data-testid="custom-summary">{summary}</span>
-            <Icon name="accessibility-motor" data-summary-icon size="medium" />
-          </>
-        )}
-      >
-        Content
-      </Expander>
-    );
-
-    expect(screen.getByTestId('custom-summary')).toHaveTextContent(
-      'Custom summary'
-    );
-  });
-
-  it('renders custom summary when opened with renderSummaryOpened prop', () => {
-    render(
-      <Expander
-        summary="Show details"
-        summaryOpened="Hide details"
-        renderSummaryOpened={({ summaryOpened }) => (
-          <>
-            <span data-testid="custom-summary-opened">{summaryOpened}</span>
-            <Icon name="birthday" size="large" color="danger" />
-          </>
-        )}
-      >
-        Content
-      </Expander>
-    );
-
-    // Click to open the expander
-    fireEvent.click(screen.getByText('Show details'));
-
-    expect(screen.getByTestId('custom-summary-opened')).toHaveTextContent(
-      'Hide details'
-    );
-  });
-
-  it('toggles content visibility when clicked', () => {
-    const { container } = render(
-      <Expander summary="Show details">
-        <p data-testid="content">Hidden content</p>
-      </Expander>
-    );
-
-    const details = container.querySelector('details');
-    expect(details).not.toHaveAttribute('open');
-
-    // Click to open
-    fireEvent.click(screen.getByText('Show details'));
-    expect(details).toHaveAttribute('open');
-
-    // Click to close
-    fireEvent.click(screen.getByText('Show details'));
-    expect(details).not.toHaveAttribute('open');
-  });
-
-  it('has default class expander', () => {
-    const { getByTestId } = render(
-      <Expander data-testid="test-id" summary="Show details">
-        Content
-      </Expander>
-    );
-    expect(getByTestId('test-id')).toHaveClass('expander');
-  });
-
-  it('has additional class when className is set', () => {
-    const { getByTestId } = render(
-      <Expander
-        data-testid="test-id"
-        className="test-class"
-        summary="Show details"
-      >
-        Content
-      </Expander>
-    );
-    expect(getByTestId('test-id')).toHaveClass('expander');
-    expect(getByTestId('test-id')).toHaveClass('test-class');
-  });
-});

package/src/components/FeatureAccordion/FeatureAccordion.mdx

@@ -1,33 +0,0 @@
-import { Preview } from '../../styleguide/';
-import FeatureAccordion from './FeatureAccordion';
-
-# Feature Accordion
-
-Feature Accordion je kombinovaná komponenta, ktorá prepája accordion s obrázkami. Umožňuje zobrazovanie rôznych obrázkov na základe aktívneho accordion itemu, pričom zabezpečuje, že môže byť vždy otvorený len jeden item.
-
-## Základné použitie
-
-<Preview>
-  <FeatureAccordion />
-</Preview>
-
-## Funkcionality
-
-- **Prepojenie s obrázkami**: Každý accordion item je prepojený s príslušným obrázkom cez jedinečný identifikátor
-- **Jednočasné otvorenie**: Vždy môže byť otvorený len jeden accordion item
-- **Automatické prepínanie**: Kliknutím na accordion item sa automaticky zobrazí príslušný obrázok
-- **Responsive layout**: Komponenta používa Grid systém pre responzívne rozloženie
-
-## Štruktúra dát
-
-Komponenta očakáva pole objektov s nasledovnou štruktúrou:
-
-```typescript
-interface FeatureItem {
-  id: string;          // Jedinečný identifikátor
-  title: string;       // Titulok accordion itemu  
-  content: ReactNode;  // Obsah accordion itemu
-  imageUrl: string;    // URL obrázka
-  imageAlt: string;    // Alt text pre obrázok
-}
-```