@orangesk/orange-design-system 1.11.0 → 2.0.0-alpha.0

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

package/src/components/Forms/Autocomplete/Autocomplete.static.js

@@ -1,65 +0,0 @@
-import accessibleAutocomplete from '@orangesk/accessible-autocomplete';
-
-export const defaultConfig = {
-  autoselect: true,
-  /**
-   * defaults to 'autocomplete__menu'
-   * left empty to prevent adding 'undefined' class to html element
-   */
-  wrapperClassName: '',
-  /**
-   * defaults to 'autocomplete__option'
-   * left empty to prevent adding 'undefined' class to html element
-   */
-  menuClassName: '',
-  /**
-   * defaults to 'autocomplete__option'
-   * left empty to prevent adding 'undefined' class to html element
-   */
-  optionClassName: '',
-  customInputClassName: '',
-  displayMenu: 'overlay',
-  tAssistiveHint: () =>
-    'Pre prezeranie výsledkov automatického dopĺňania použite šípky nahor a nadol a pre výber konkrétneho výsledku použite tlačidlo Enter. Pri dotykových zariadeniach použite dotyk alebo potiahnutie prstom do strany.',
-};
-
-export default class Autocomplete {
-  constructor(element, config) {
-    this.element = element;
-    this.config = { ...defaultConfig, ...config };
-    this.onPageshow = this.onPageshow.bind(this);
-    this.instance = null;
-
-    this.init();
-
-    this.element.ODS_Autocomplete = this;
-
-    return this;
-  }
-
-  init() {
-    const elementConfig = JSON.parse(
-      this.element.getAttribute('data-autocomplete-config')
-    );
-    this.config = { ...this.config, ...elementConfig };
-
-    this.element.tagName === 'SELECT'
-      ? accessibleAutocomplete.enhanceSelectElement({
-          selectElement: this.element,
-          ...this.config,
-        })
-      : accessibleAutocomplete({
-          element: this.element,
-          ...this.config,
-        });
-
-    window.addEventListener('pageshow', this.onPageshow);
-  }
-
-  onPageshow(e) {
-    if (e.persisted && window) {
-      // if shown page originates from cache, let's reload it to prevent buggy behavior
-      window.location.reload();
-    }
-  }
-}

package/src/components/Forms/Autocomplete/index.js

@@ -1,3 +0,0 @@
-import './styles/style.scss';
-
-export { default } from './Autocomplete';

package/src/components/Forms/Autocomplete/styles/config.scss

@@ -1,7 +0,0 @@
-@use '../../../../styles/tools/convert.scss';
-@use '../../TextInput/styles/config' as textConfig;
-
-$states: textConfig.$states;
-$sizes: textConfig.$sizes;
-
-$menu-height: convert.to-rem(243px);

package/src/components/Forms/Autocomplete/styles/mixins.scss

@@ -1,77 +0,0 @@
-@use '../../../../styles/tokens/color';
-@use '../../../../styles/tokens/space';
-@use '../../../../styles/tools/convert';
-@use './config';
-
-@mixin menu($height: config.$menu-height) {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  float: left;
-  width: 100%;
-  max-height: $height;
-  padding: 0;
-  margin: -2px 0 0;
-  color: color.$black;
-  background-color: color.$white;
-  background-clip: padding-box;
-  border: 2px solid color.$black;
-  overflow-y: auto;
-
-  &:empty {
-    display: none;
-  }
-}
-
-@mixin menu-visible {
-  display: block;
-}
-
-@mixin menu-hidden {
-  display: none;
-}
-
-@mixin hint {
-  position: absolute;
-}
-
-@mixin option {
-  display: block;
-  position: relative;
-  width: 100%;
-  padding: space.get('small');
-  clear: both;
-  color: color.$black;
-  text-align: inherit;
-  background-color: transparent;
-  border: 0;
-  margin-bottom: 0;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1001;
-  }
-
-  &:first-child {
-    border-top-left-radius: 0;
-    background-clip: padding-box;
-    border-top-right-radius: 0;
-  }
-}
-
-@mixin active-option {
-  color: color.$white;
-  background: color.$black;
-}
-
-@mixin wrapper {
-  position: relative;
-  width: 100%;
-  max-width: convert.to-rem(350px);
-}

package/src/components/Forms/Autocomplete/styles/style.scss

@@ -1,64 +0,0 @@
-@use './config';
-@use './mixins';
-@use '../../TextInput/styles/mixins' as textMixins;
-@use '../../styles/config' as commonConfig;
-@use '../../../../styles/tools/generate';
-
-.autocomplete {
-  &__hint,
-  &__input,
-  &__option {
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  &__wrapper {
-    @include mixins.wrapper();
-  }
-
-  &__input {
-    @include textMixins.base();
-    @include textMixins.states();
-
-    width: 100%;
-    @each $size, $values in config.$sizes {
-      &#{generate.variant-name($size)} {
-        @include textMixins.size($size);
-      }
-    }
-
-    &--focused {
-      @include generate.css-map(commonConfig.$focus);
-
-      box-shadow: none;
-    }
-  }
-
-  &__hint {
-    @include mixins.hint;
-  }
-
-  &__menu {
-    @include mixins.menu;
-
-    &--visible {
-      @include mixins.menu-visible;
-    }
-
-    &--hidden {
-      @include mixins.menu-hidden;
-    }
-  }
-
-  &__option {
-    @include mixins.option;
-
-    &--focused,
-    &.active,
-    &:active,
-    &:focus,
-    &:hover {
-      @include mixins.active-option;
-    }
-  }
-}

package/src/components/Forms/Checkbox/Checkbox.js

@@ -1,74 +0,0 @@
-import React from 'react';
-import { bool, string, oneOf } from 'prop-types';
-import cx from 'classnames';
-
-const propTypes = {
-  /** Html id attribute */
-  id: string.isRequired,
-  /** Checked state. */
-  isChecked: bool,
-  /** Disabled state. */
-  isDisabled: bool,
-  /** Invalid state */
-  isInvalid: bool,
-  /** Checkbox is displayed as Toggle */
-  isToggle: bool,
-  /** Html name attribute. Id is used when not set.*/
-  name: string,
-  /** Size of element. */
-  size: oneOf(['default', 'large']),
-};
-
-const defaultProps = {
-  size: 'default',
-};
-
-const CLASS_ROOT = 'checkbox';
-
-const Checkbox = ({
-  id,
-  isChecked,
-  isDisabled,
-  isInvalid,
-  isToggle,
-  name,
-  size,
-  className,
-  ...other
-}) => {
-  const classes = cx(CLASS_ROOT, className, {
-    [`${CLASS_ROOT}--${size}`]: size !== defaultProps.size,
-    'is-invalid': isInvalid,
-  });
-
-  const inputName = name || id;
-
-  const Checkbox = () => (
-    <>
-      <input
-        className={classes}
-        type="checkbox"
-        id={id}
-        name={inputName}
-        defaultChecked={isChecked}
-        disabled={isDisabled}
-        {...other}
-      />
-      <div className={`${CLASS_ROOT}-display`} />
-    </>
-  );
-
-  return isToggle ? (
-    <div className={isToggle ? 'checkbox--toggle' : ''}>
-      <Checkbox />
-    </div>
-  ) : (
-    <Checkbox />
-  );
-};
-
-Checkbox.propTypes = propTypes;
-Checkbox.defaultProps = defaultProps;
-Checkbox.displayName = 'Checkbox';
-
-export default Checkbox;

package/src/components/Forms/Checkbox/Checkbox.mdx

@@ -1,139 +0,0 @@
-import { Code, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-
-import Link from '../../Link';
-import Fieldset from '../Fieldset';
-import Field from '../Field';
-import Checkbox from './';
-
-# Checkbox
-
-A checkbox is an interface for making one or more selections from multiple options, or providing a boolean answer.
-
-Based on context, checkbox can be used as a [standalone field](#anatomy-of-a-standalone-checkbox-field) or a [multi-choice fieldset](#anatomy-of-a-checkbox-fieldset).
-
-## Anatomy of a standalone Checkbox Field
-
-A Checkobx Field is usually used for consents (terms and conditions, competition rules, etc.) and consists of:
-
-- **Control**
-  - **Checkbox** control itself
-- **Description**
-  - [**Label**](/components/forms/captions/label) (mandatory)
-  - [**Tooltip**](/components/forms/captions/tooltip) (optional)
-  - [**Hint**](/components/forms/captions/hint) (optional)
-  - [**Messages**](/components/forms/captions/message) (optional)
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox' }}
-    tooltip="Helpful tooltip"
-    label="I agree with Terms and Conditions"
-    labelAfter="(mandatory)"
-    hint={
-      <>
-        <Link href="#">read the Terms and conditions document</Link>
-      </>
-    }
-    messages={[
-      { type: 'error', text: 'This is mandatory, no way around that.' },
-    ]}
-  />
-</Preview>
-
-## Anatomy of a Checkbox Fieldset
-
-A Checkbox Fieldset is usually used in flows with various number of options (checkout settings, multi-choice consents, etc.) and consists of:
-
-- **Legend** (mandatory)
-- **Description** (optional)
-- **Checkbox Fields** (mandatory)
-  - **Control**
-    - **Checkbox** control itself
-  - **Description**
-    - [**Label**](/components/forms/captions/label) (mandatory)
-    - [**Tooltip**](/components/fomrs/captions/tooltip) (optional)
-    - [**Hint**](/components/forms/captions/hing) (optional)
-    - [**Messages**](/components/fomrs/captions/messge) (optional)
-
-<Preview>
-  <Fieldset legend="Pick your favorites">
-    <Field
-      control={{ type: 'checkbox' }}
-      tooltip="Helpful tooltip"
-      label="Option 1"
-      hint="Helpful hint"
-      messages={[
-        {
-          type: 'warning',
-          text: 'Delivery of this option might take some time.',
-        },
-      ]}
-    />
-    <Field
-      control={{ type: 'checkbox' }}
-      tooltip="Helpful tooltip"
-      label="Option 2"
-      hint="Helpful hint"
-    />
-  </Fieldset>
-</Preview>
-
-## Control sizes
-
-### Large
-
-<Preview>
-  <Checkbox id="size-large" size="large" />
-</Preview>
-
-## Control states
-
-### Default
-
-<Preview>
-  <Checkbox id="checkbox-example" />
-</Preview>
-
-### Checked
-
-<Preview>
-  <Checkbox id="checked" isChecked />
-</Preview>
-
-### Disabled
-
-Cannot be focused, does not receive `click` events and is not submitted with the form.
-
-<Preview>
-  <Checkbox id="disabled" isDisabled />
-  <br />
-  <Checkbox id="disabled-checked" isChecked isDisabled />
-</Preview>
-
-### Invalid
-
-Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/captions/message#error).
-
-<Preview>
-  <Checkbox id="invalid" isInvalid />
-  <br />
-  <Checkbox id="invalid-checked" isChecked isInvalid />
-</Preview>
-
-## Toggle
-
-Displays Checkbox as toogle switch.
-
-<Preview>
-  <Checkbox id="toggle" isToggle={true} />
-  <br />
-  <Checkbox id="checked-toggle" isToggle={true} isChecked={true} />
-  <br />
-  <Checkbox id="disablead-toggle" isToggle={true} isDisabled={true} />
-  <br />
-  <Checkbox id="invalid-toggle" isToggle={true} isInvalid={true} />
-</Preview>
-
-<ComponentDocs title="Checkbox" component={Checkbox} />

package/src/components/Forms/Checkbox/index.js

@@ -1,3 +0,0 @@
-import './styles/style.scss';
-
-export { default } from './Checkbox';

package/src/components/Forms/Checkbox/styles/config.scss

@@ -1,26 +0,0 @@
-@use '../../../../styles/tokens/color';
-@use '../../styles/config' as commonConfig;
-
-$checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23fff'/%3E%3C/svg%3E");
-$invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23cd3c14'/%3E%3C/svg%3E");
-
-$states: (
-  default: commonConfig.$default,
-  focus: commonConfig.$focus,
-  checked: (
-    border-color: color.$orange-dark,
-    background-color: color.$orange-dark,
-    background-image: $checked-bg,
-    background-size: cover,
-  ),
-  disabled: commonConfig.$disabled,
-  disabled-checked: commonConfig.$disabled-checked,
-  invalid: commonConfig.$invalid,
-  invalid-checked: (
-    background-color: color.$white,
-    background-image: $invalid-checked-bg,
-  ),
-);
-
-$sizes: commonConfig.$radiocheck-sizes;
-

package/src/components/Forms/Checkbox/styles/mixins.scss

@@ -1,2 +0,0 @@
-@use '../../../../styles/tools/generate';
-@use './config';