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

package/src/components/Forms/RangeSlider/RangeSlider.mdx

@@ -1,304 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Code, Preview } from '../../../styleguide/';
-
-import Field from '../Field';
-
-import RangeSlider from './';
-import defaultConfig from './data';
-
-export const basicConfig = {
-  start: [0],
-  range: {
-    min: 0,
-    max: 50,
-  },
-  connect: [true, false],
-};
-
-# RangeSlider
-
-Interactive widget used a replacement for `input[type=range]` using
-[noUiSlider](https://refreshless.com/nouislider/)
-
-<Preview>
-  <RangeSlider config={basicConfig} />
-</Preview>
-
-## RangeSlider Field
-
-1. [**Label**](/components/forms/captions/label) (mandatory)
-1. [**Tooltip**](/components/fomrs/captions/tooltip) (optional)
-1. [**Hint**](/components/forms/captions/hing) (optional)
-1. **Before Element** arbitrary content before the slider, useful for [output values](#output-values) (optional)
-1. **RangeSlider** control itself
-   - Track - visualises range that handle(s) can travel along (mandatory)
-   - Handle(s) - one or more handles used to select desired value (mandatory)
-   - Pips - points along the slider (optional)
-1. **After Element** arbitrary content after the slider, useful for [output values](#output-values) or custom pips (optional)
-1. [**Messages**](/components/fomrs/captions/messge) (optional)
-
-<Preview>
-  <Field
-    control={{
-      id: 'rangeslider-field',
-      type: 'range',
-      config: {
-        start: [0],
-        range: {
-          min: 0,
-          max: 10,
-        },
-        connect: [true, false],
-        handleAttributes: [
-          {
-            'aria-labelledby': 'rangeslider-field-label',
-            'aria-describedby':
-              'rangeslider-field-hint rangeslider-field-tooltip rangeslider-field-message-0',
-          },
-        ],
-        pips: {
-          mode: 'values',
-          values: [0, 10],
-          stepped: false,
-          density: 100,
-        },
-      },
-      elementBefore: <p className="mb-xsmall">Before element</p>,
-      elementAfter: <p className="mb-small">After element</p>,
-    }}
-    tooltip="Helpful tooltip"
-    label="How much would you like?"
-    hint="Some helpful hint text"
-    messages={[
-      {
-        type: 'error',
-        text: 'You have selected zero. Please have at least one.',
-      },
-    ]}
-  />
-</Preview>
-
-## Width
-
-### Default
-
-<Preview>
-  <RangeSlider config={basicConfig} />
-</Preview>
-
-### Fullwidth
-
-<Preview>
-  <RangeSlider width="fullwidth" config={basicConfig} />
-</Preview>
-
-## Output values
-
-By default, the `<RangeSlider />` component renders hidden input fields with
-current value of each handle.
-
-### Initialize
-
-`RangeSlider.static.js` expects hidden `input` elements with a `name` property consisting of the `id` of the rangeslider element and the `index` of the handle, delimited by a dash.
-
-`<input type="hidden" name="rangeslider-0" />`
-
-### Accesing instance
-
-Initialized RangeSlider is stored in `ODS_RangeSlider` property of the element. So by accessing this property, for example by `document.getElementById('id-1').ODS_RangeSlider`, you get access to RangeSlider config, element itself, it inputs and outputs and instance which contains [noUiSlider](https://refreshless.com/nouislider/) itself. Through this you can for example get or set RangeSlider value `document.getElementById('id-1').ODS_RangeSlider.instance.set(10)`.
-
-### Display
-
-To display the values for the user, place an element anywhere in the document
-and assign it an id equal to the rangeslider element, index of the handle and
-"output", delimited by a dash.
-
-`<div id="rangeslider-0-output" />`
-
-### Formatting
-
-By default, the value of the input is formatted to zero decimal places and can
-be overriden using the `format` property in config. The config format expects a
-[wNumb](https://refreshless.com/wnumb/) config object.
-
-You can format the output by passing a [wNumb](https://refreshless.com/wnumb/)
-config object to `data-format` attribute of the output element.
-
-<Preview>
-  <div id="range-output-preview-0-output" />
-  <div
-    id="range-output-preview-1-output"
-    data-format={JSON.stringify({
-      decimals: 2,
-      mark: ',',
-      thousand: ' ',
-      prefix: '',
-      suffix: ' MB',
-    })}
-  />
-  <RangeSlider
-    id="range-output-preview"
-    config={{
-      start: [0, 30],
-      range: {
-        min: 0,
-        max: 100,
-      },
-      connect: [false, true, false],
-    }}
-  />
-</Preview>
-
-## Accessibility
-
-[noUiSlider](https://refreshless.com/nouislider/) provides keyboard operability and screenreader support. Authors must provide accessible names for slider handles and create relationship between handles and captioning elements.
-
-## Assign relationship between slider handle and Captions
-
-RangeSlider uses hidden fields that are populated with user selected values. We can't point related information to those hidden fields, but the JS generated handles. Each handle must have it's own accessible name. Hint, tooltip and validation messages (captions) must be also in relationship with the handle elements.
-
-This is achieved defining `aria-label`, `aria-labelledby` and `aria-describedby` attributes for each handle using `handleAttributes` property of the [`config` object](#config).
-
-### Label
-
-Since our rendered input is hidden, the `label` element is replaced by a `span`.
-
-```diff
-- <label for="input-id" class="label form-field__label">Label</label>
-+ <span id="input-label" class="label form-field__label">Label</span>
-```
-
-The relationship is then defined in the config object using `aria-labelledby`
-
-```javascript
-{
-  start: [0],
-  range: {
-    min: 0,
-    max: 100,
-  },
-  connect: [true, false],
-  handleAttributes: [{
-    { 'aria-labelledby': 'input-label' }
-  }]
-}
-```
-
-#### Multiple handles
-
-In case multiple handles are present, we need to create a different accessible name for each handle, as they represent different parts of the range. Screenreader users must be able to distinguish which handle they are using and what does the handle represent.
-
-```javascript
-{
-  start: [0, 20],
-  range: {
-    min: 0,
-    max: 100,
-  },
-  connect: [true, false],
-  handleAttributes: [
-    { 'aria-label': 'Price from' },
-    { 'aria-label': 'Price to' },
-  ]
-}
-```
-
-### Hint, Tooltip and Messages
-
-Hint, tooltip and messages must also be in relationship with the handle using `aria-describedby`. When multiple handles are used, authors are responsible to pick whether it makes more sense to describe all or just some of the handles.
-
-```javascript
-  ...
-  handleAttributes: [
-    {
-      'aria-label': 'Price from',
-      'aria-describedby': 'hint-id tooltip-id message-0'
-    },
-    {
-      'aria-label': 'Price from',
-      'aria-describedby': 'hint-id message-1' // in this case, second handle is not descrbied by a tooltip and has a separate message.
-    }
-  ]
-  ...
-```
-
-## JS Module Reference
-
-All elements with `[data-rangeslider]` will be initialised automatically on [`DOMContentLoaded` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event).
-
-### Config
-
-The module is configured either by passing a JSON string representing a [noUiSlider config](https://refreshless.com/nouislider/slider-options/) object through `[data-rangeslider]` attribute or during [manual initialisation](#manual-initialisation).
-
-When configuring the module through `[data-rangeslider]`, the format attribute expects a [wNumb](https://refreshless.com/wnumb/) config object instead of a function. In case you need a custom formatting fuction, omit the `data-rangeslider` attribute and [initialize the module manually](#manual-initialisation).
-
-### Default config
-
-```javascript
-{
-  start: [0],
-  connect: false,
-  range: {
-    min: 0,
-    max: 100,
-  },
-  cssPrefix: 'range-slider',
-  cssClasses: {
-    target: '__target',
-    base: '__base',
-    origin: '__origin',
-    handle: '__handle',
-    handleLower: '__handle--lower',
-    handleUpper: '__handle--upper',
-    touchArea: '__touch-area',
-    horizontal: '--horizontal',
-    vertical: '--vertical',
-    background: '__background',
-    connect: '__connect',
-    connects: '__connects',
-    ltr: '--ltr',
-    rtl: '--rtl',
-    draggable: '--draggable',
-    drag: '--state-drag',
-    tap: '--state-tap',
-    active: '--active',
-    tooltip: '__tooltip',
-    pips: '__pips',
-    pipsHorizontal: '__pips--horizontal',
-    pipsVertical: '__pips--vertical',
-    marker: '__marker',
-    markerHorizontal: '__marker--horizontal',
-    markerVertical: '__marker--vertical',
-    markerNormal: '__marker--normal',
-    markerLarge: '__marker--large',
-    markerSub: '__marker--sub',
-    value: '__value',
-    valueHorizontal: '__value--horizontal',
-    valueVertical: '__value--vertical',
-    valueNormal: '__value--normal',
-    valueLarge: '__value--large',
-    valueSub: '__value--sub',
-  },
-  format: {
-    decimals: 0,
-  },
-}
-```
-
-### Manual initialisation
-
-```javascript
-const myRangeSlider = new window.myApp.RangeSlider(
-  document.getElementById('my-rangeslider'),
-  config
-);
-```
-
-## Props
-
-<ComponentDocs title="<RangeSlider />" component={RangeSlider} />
-
-## Notes
-
-`<RangeSlider />` currently DOES NOT SUPPORT vertical and rtl ortientations and tooltips.

package/src/components/Forms/Select/Select.mdx

@@ -1,106 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-
-import Field from '../Field';
-import Select from './';
-
-export const options = ['Option 1', 'Option 2', 'Option 3'];
-
-# Select
-
-Select is a control that provides a finite menu of options. One option is always selected, a select cannot be empty.
-
-Select is used when the user does not need to see all available options.
-
-## Select Field
-
-A Select Field consists of:
-
-1. [**Label**](/components/forms/captions/label) (mandatory)
-2. [**Tooltip**](/components/fomrs/captions/tooltip) (optional)
-3. [**Hint**](/components/forms/captions/hing) (optional)
-4. **Select** control itself
-5. [**Messages**](/components/fomrs/captions/messge) (optional)
-
-<Preview>
-  <Field
-    control={{ type: 'select', id: 'select', options }}
-    label="Example select"
-    hint="Hint on what to fill in"
-    messages={[{ type: 'warning', text: 'A validation message' }]}
-  />
-</Preview>
-
-## States
-
-### Disabled
-
-Cannot be focused, does not receive `click` events and is not submitted with the form.
-
-<Preview>
-  <Select isDisabled options={options} />
-</Preview>
-
-### Invalid
-
-Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/captions/message#error).
-
-<Preview>
-  <Select isInvalid options={options} />
-</Preview>
-
-## Widths
-
-### Default
-
-Default width matches widths of other form controls.
-
-<Preview>
-  <Select options={options} />
-</Preview>
-
-### 12ch
-
-Narrow select. Truncnates very long options to maintain it's width.
-
-<Preview>
-  <Select
-    width="12ch"
-    options={[...options, 'very very long option gets truncnated']}
-  />
-</Preview>
-
-### Shrink
-
-Shrink matches the control witdh to the longest available option.
-
-<Preview>
-  <Select width="shrink" options={['1', '2', '3 is longer']} />
-</Preview>
-
-### Fullwidth
-
-Fill the available container.
-
-<Preview>
-  <Select width="fullwidth" options={options} />
-</Preview>
-
-## Sizes
-
-### Default
-
-<Preview>
-  <Select options={options} />
-</Preview>
-
-### Large
-
-<Preview>
-  <Select size="large" options={options} />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Select />" component={Select} />

package/src/components/Forms/TextArea/TextArea.mdx

@@ -1,109 +0,0 @@
-import { Code, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-
-import Field from '../Field';
-import TextArea from './';
-
-# TextArea
-
-Textarea field allows users to enter and edit long textual data.
-
-<Field control={{ type: 'textarea' }} label="Example textarea" />
-
-## TextArea Field
-
-A TextArea Field consists of:
-
-1. [**Label**](/components/forms/captions/label) (mandatory)
-2. [**Tooltip**](/components/fomrs/captions/tooltip) (optional)
-3. [**Hint**](/components/forms/captions/hing) (optional)
-4. **TextArea** control itself
-5. [**Messages**](/components/fomrs/captions/messge) (optional)
-
-<Preview>
-  <Field
-    control={{ type: 'textarea' }}
-    label="Example textarea"
-    hint="Hint on what to fill in"
-    messages={[{ type: 'warning', text: 'A validation message' }]}
-  />
-</Preview>
-
-## Control sizes
-
-### Large
-
-<Preview>
-  <TextArea id="size-large" size="large" />
-</Preview>
-
-## Control widths
-
-Control width should correspond with the lenght of the expected answer. Controls always provide horizontal space for [success indicator](#success).
-
-See [fieldset documentation](/components/forms/fieldset) for specific usage
-
-export const widths = {
-  default: {
-    value: 'Default width',
-  },
-  fullwidth: {
-    value: 'Full width input value on the full width of the screen',
-  },
-};
-
-<React.Fragment>
-  {Object.entries(widths).map(([width, { value, type }]) => (
-    <React.Fragment key={width}>
-      <h3 className="mb-none">{width[0].toUpperCase() + width.slice(1)}</h3>
-      <Preview>
-        <TextArea id={width} width={width} defaultValue={value} type={type} />
-      </Preview>
-    </React.Fragment>
-  ))}
-</React.Fragment>
-
-## Control states
-
-### Default
-
-<Preview>
-  <TextArea id="input-example" placeholder="Placeholder text" />
-</Preview>
-
-### Disabled
-
-Cannot be focused, does not receive `click` events and is not submitted with the form. Avoid if possible. Disabled fields are not announced by screenreaders.
-
-<Preview>
-  <TextArea id="disabled" isDisabled />
-</Preview>
-
-### Read only
-
-User cannot change the value of the input, but it remains focusable and is submitted with the form.
-
-<Preview>
-  <TextArea id="readonly" isReadonly />
-</Preview>
-
-### Invalid
-
-Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/captions/message#error).
-
-<Preview>
-  <TextArea id="invalid" isInvalid />
-</Preview>
-
-### Success
-
-Filed passed inline validation and the user is encouraged to continue.
-
-<Preview>
-  <TextArea id="valid" isValid />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<TextArea />" component={TextArea} />

package/src/components/Forms/TextInput/TextInput.mdx

@@ -1,153 +0,0 @@
-import { Code, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-
-import Field from '../Field';
-import TextInput from './';
-
-# TextInput
-
-Input field allows users to enter and edit textual data.
-
-<Field control={{ type: 'text' }} label="Example text input" />
-
-## TextInput Field
-
-A TextInput Field consists of:
-
-1. [**Label**](/components/forms/captions/label) (mandatory)
-2. [**Tooltip**](/components/fomrs/captions/tooltip) (optional)
-3. [**Hint**](/components/forms/captions/hing) (optional)
-4. **TextInput** control itself
-5. [**Messages**](/components/fomrs/captions/messge) (optional)
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Example text input"
-    hint="Hint on what to fill in"
-    messages={[{ type: 'warning', text: 'A validation message' }]}
-  />
-</Preview>
-
-## Control Types
-
-Although the **input element** `type` attribute can receive [various values](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#<TextInput>_types), the **TextInput component** is meant for direct text entry and only supports the following types:
-
-- email
-- hidden
-- password
-- search
-- tel
-- text
-- url
-
-<Preview>
-  <TextInput id="type-email" htmlType="email" defaultValue="email" />
-  <br />
-  <TextInput id="type-hidden" htmlType="hidden" defaultValue="hidden" />
-  <br />
-  <TextInput id="type-password" htmlType="password" defaultValue="password" />
-  <br />
-  <TextInput id="type-search" htmlType="search" defaultValue="search" />
-  <br />
-  <TextInput id="type-tel" htmlType="tel" defaultValue="tel" />
-  <br />
-  <TextInput id="type-text" htmlType="text" defaultValue="text" />
-  <br />
-  <TextInput id="type-url" htmlType="url" defaultValue="url" />
-  <br />
-</Preview>
-
-## Recommendations
-
-- Match virtual keyboard with expected data.
-  - `type="email"` when asking for an email address puts the @ sign directly on the main keyboard.
-  - `pattern="[0-9]*" inputmode="numeric"` attributes opens numeric keyboard. avoid using `type="number"` when the requested information is not a pure number that can be incremented (e.g. phone number, ZIP code, etc.). [Why not to use input type="number"](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/)
-
-## Control sizes
-
-### Large
-
-<Preview>
-  <TextInput id="size-large" size="large" />
-</Preview>
-
-## Control widths
-
-Control width should correspond with the lenght of the expected answer. Controls always provide horizontal space for [success indicator](#success).
-
-See [fieldset documentation](/components/forms/fieldset) for specific usage
-
-export const widths = {
-  '3ch': {
-    value: '3ch',
-  },
-  '8ch': {
-    value: '8 chars',
-  },
-  '12ch': {
-    value: '12 characters',
-  },
-  default: {
-    value: 'Default width',
-  },
-  fullwidth: {
-    value: 'Full width input value on the full width of the screen',
-  },
-};
-
-<React.Fragment>
-  {Object.entries(widths).map(([width, { value, type }]) => (
-    <React.Fragment key={width}>
-      <h3 className="mb-none">{width[0].toUpperCase() + width.slice(1)}</h3>
-      <Preview>
-        <TextInput id={width} width={width} defaultValue={value} type={type} />
-      </Preview>
-    </React.Fragment>
-  ))}
-</React.Fragment>
-
-## Control states
-
-### Default
-
-<Preview>
-  <TextInput id="input-example" placeholder="Placeholder text" />
-</Preview>
-
-### Disabled
-
-Cannot be focused, does not receive `click` events and is not submitted with the form. Avoid if possible. Disabled fields are not announced by screenreaders.
-
-<Preview>
-  <TextInput id="disabled" isDisabled />
-</Preview>
-
-### Read only
-
-User cannot change the value of the input, but it remains focusable and is submitted with the form.
-
-<Preview>
-  <TextInput id="readonly" isReadonly />
-</Preview>
-
-### Invalid
-
-Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/captions/message#error).
-
-<Preview>
-  <TextInput id="invalid" isInvalid />
-</Preview>
-
-### Success
-
-Filed passed inline validation and the user is encouraged to continue.
-
-<Preview>
-  <TextInput id="valid" isValid />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<TextInput />" component={TextInput} />

package/src/components/Gauge/Gauge.mdx

@@ -1,35 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Code, Preview } from '../../styleguide/';
-import Gauge from './';
-import GaugeMaker from './GaugeMaker';
-
-# Gauge
-
-Stylized display of a scalar value within a known range. Often used to compare a single, important value between multiple product versions.
-
-The gauge consists of:
-
-- **Dial**: SVG element, the face of the gauge meter
-- **Display**: Gray denominator of the maximum value
-- **Indicator**: Black "needle" which shows the value
-- **Text**: Textual representation of the value
-
-<Preview>
-  <Gauge percentage={70}>
-    <div className="h1 mb-xsmall">500</div>
-    <div className="bold">
-      Mbit/s <br />
-      sťahovanie
-    </div>
-  </Gauge>
-</Preview>
-
-## Calculating your svg values
-
-Gauge presentaion is done using `svg`. Due to visual complexity, math is needed to display each value correctly. Use the widget below to set your value and copy the code.
-
-<GaugeMaker />
-
-## Props
-
-<ComponentDocs component={Gauge} />