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

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

package/src/components/Forms/Autocomplete/Autocomplete.mdx

@@ -1,198 +0,0 @@
-import {
-  ComponentDocs,
-  DocsTable,
-  md,
-  CodeBlock,
-} from '@lighting-beetle/lighter-styleguide';
-
-import { Preview, DefaultConfigTable } from '../../../styleguide';
-import { useStatic } from '../../../utils/hooks';
-import { objectToString } from '../../../utils/helpers';
-import Field from '../Field';
-
-import AutocompleteStatic, {
-  defaultConfig as defaultConfigAutocomplete,
-  configDocs as configDocsAutocomplete,
-} from './Autocomplete.static';
-import Autocomplete from './Autocomplete';
-
-export const fruit = [
-  '',
-  'apple',
-  'apricot',
-  'banana',
-  'blueberry',
-  'fig',
-  'lime',
-  'lemon',
-  'mango',
-  'orange',
-  'raspberry',
-  'watermelon',
-];
-
-export const RenderOnDiv = props => {
-  const [autocompleteRef] = useStatic(AutocompleteStatic);
-  return (
-    <div
-      data-autocomplete
-      ref={autocompleteRef}
-      data-autocomplete-config={JSON.stringify({
-        id: 'on-a-div',
-        source: fruit,
-      })}
-    />
-  );
-};
-
-# Autocomplete
-
-Adds typeahead nad filtering capability to input.
-
-## Autocomplete Field
-
-Autocomplete Field consists of:
-
-1. [**Label**](/components/forms/captions/label) (mandatory)
-2. [**Tooltip**](/components/forms/captions/tooltip) (optional)
-3. [**Hint**](/components/forms/captions/hint) (optional)
-4. **Autocomplete** control itself
-5. [**Messages**](/components/forms/captions/message) (optional)
-
-<Preview>
-  <Field
-    label="Autocomplete"
-    control={{
-      type: 'autocomplete',
-      options: fruit,
-      'data-autocomplete-config': JSON.stringify({ name: 'input-name' }),
-    }}
-    hint="Start typing to search for fruit"
-    messages={[
-      {
-        type: 'warning',
-        text: 'Warning message',
-      },
-    ]}
-    tooltip="Tooltip info"
-  />
-</Preview>
-
-## Progressive enhancement of a select element
-
-If your autocomplete is meant to select from a small list of options (a few hundred), we strongly suggest that you render a `<select>` on the server, and use [progressive enhancement](https://github.com/alphagov/accessible-autocomplete#progressive-enhancement).
-
-ODS Autocomplete wrapper javascript automatically uses progressive enhancement when initalized on a select element.
-
-<Preview>
-  <Autocomplete
-    options={[
-      '',
-      'apple',
-      'apricot',
-      'banana',
-      'blueberry',
-      'fig',
-      'lime',
-      'lemon',
-      'mango',
-      'orange',
-      'raspberry',
-      'watermelon',
-    ]}
-  />
-</Preview>
-
-## Rendering an autocomplete on a div
-
-When rendering a select element is not feasible, for example due to fetching search results via an API, Autocomplete can be rendered inside a div.
-
-<Preview>
-  <Field
-    label="Render on a div"
-    control={{
-      id: 'on-a-div',
-      renderControl: props => <RenderOnDiv {...props} />,
-    }}
-  />
-</Preview>
-
-## With search icon
-
-More about usage with search icon can be found in [Addons documentation](/components/forms/addons).
-
-## JS module reference
-
-Autocomplete is backed with [accessible-autocomplete | see docs](https://alphagov.github.io/accessible-autocomplete)
-
-All elements with `data-autocomplete` attribute will be initialised automatically.
-
-Config can be also passed via `data-autocomplete-config` as a JSON string. Please note that, due to security issues, it is not possible to pass any executable code via this attribute. If you need to configure a filtering function, please initialize Autocomplete manually.
-
-## Manual initialization
-
-<CodeBlock language="js">
-  {`
-const cities = ['Bratislava', 'Banská Bystrica', 'Košice', 'Žilina'];
-const myAutocomplete = new window.myApp.Autocomplete(
-  document.getElementById('my-autocomplete'),
-  { // required config
-    // fuction that populates search results
-    source: (query, populateResults) => {
-      // you can filter filter items based on your preference, for example you
-      // can use indexOf() or startsWith() function inside filter, or any different way to filter items
-      const filteredResults = cities.filter(
-        city => city.toLowerCase().indexOf(query.toLowerCase()) !== -1
-      );
-      populateResults(filteredResults);
-    },
-    // This function will be called when you confirm the option, you can for example change page url
-    // argument is object with name attribute
-    onConfirm: (option) => {
-      if(option) {
-        params.delete('q');
-        params.set('q', option.name);
-        window.location.search = params.toString();
-      }
-    },
-    defaultValue: '',
-    templates: {
-      // inputValue is a function that receives one argument, the currently selected suggestion.
-      // It returns the string value to be inserted into the input.
-      // example
-      inputValue: result => result && result.name ,
-      // suggestion is a function that receives one argument, a suggestion to be displayed.
-      // It is used when rendering suggestions, and should return a string, which can contain HTML.
-      // example
-      suggestion: result => result && \`<strong>\${result.name}</strong>\`,
-    }
-  }
-);`}
-</CodeBlock>
-
-## Config
-
-See Accessible autocomplete documentation: https://alphagov.github.io/accessible-autocomplete/
-
-### Default config
-
-<CodeBlock language="js">{objectToString(defaultConfigAutocomplete)}</CodeBlock>
-
-## Methods
-
-Autocomplete has only one method - `init`. The Accessible Autocomplete plugin does not provide any methods for interacting with its instance.
-
-export const methods = [
-  {
-    prop: 'init',
-    type: 'func',
-    description:
-      'Initialize instance. This is called automatically on `new Plugin(el, config)`',
-  },
-];
-
-<DocsTable data={methods} />
-
-## Props
-
-<ComponentDocs component={Autocomplete} />