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

package/src/components/Forms/Label/Label.mdx

@@ -1,95 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-import Link from '../../Link';
-import Field from '../Field';
-
-import Label from './';
-
-# Label
-
-Every input needs a label. A label provides instructions what to fill inside an input. Each label must be visually and programatically associated with an input.
-
-Learn how to write [label copy](/copy/form-labels)
-
-<Preview>
-  <Label htmlFor="label-example">Example label</Label>
-</Preview>
-
-## Labelling required inputs
-
-E-Commerce checkouts need to mark both required and optional fields explicitly. In other cases like a login or newsletter subscribtion it is not needed because of context, previous experience of the user and low number of fields.
-
-Try to avoid optional fields in forms. But if you use them, you should at least clearly distinguish which input fields cannot be left blank by the user.
-
-### How to mark required fields
-
-If you need to mark field as a required, rather than mentioning "required" next to every header, use an asterisk with screenreader text.
-
-### How to mark optional fields
-
-Mark the optional fields in checkout or registration process with "optional" in words next to the label.
-
-<Preview>
-  <Label htmlFor="optional-example">
-    Example label <span className="reset-font-weight">(optional)</span>
-  </Label>
-  <br />
-  <Label htmlFor="optional-example">
-    Example label *<span className="sr-only">required</span>
-  </Label>
-  <br />
-</Preview>
-
-## Links and buttons in labels
-
-Don't place interactive elements inside a label. Touchscreen devices often remove click listeners on label descendants, rendering them useless.
-
-Interactive elements should be placed next to the label element, making sure that both label and action texts are provide meaningful information to screenreaders on their own. This is usually done with visually hiding portions of the instructions.
-
-<Preview>
-  <Label htmlFor="terms">
-    Agree with<span className="visually-hidden"> terms and conditions</span>
-  </Label>{' '}
-  <Link href="#">terms and conditions</Link>
-</Preview>
-
-## Using in fields
-
-<Preview>
-  <Field control={{ type: 'text' }} label="Label" />
-</Preview>
-
-<Preview>
-  <Field control={{ type: 'checkbox' }} label="Label" />
-</Preview>
-
-### With action
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Label"
-    labelAfter={
-      <React.Fragment>
-        <Link href="#">action</Link> (optional)
-      </React.Fragment>
-    }
-  />
-</Preview>
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox' }}
-    label={
-      <React.Fragment>
-        Agree with<span className="visually-hidden"> terms and conditions</span>
-      </React.Fragment>
-    }
-    labelAfter={<Link href="#">terms and conditions</Link>}
-  />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Label />" component={Label} />

package/src/components/Forms/Message/Message.mdx

@@ -1,40 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../../styleguide/';
-
-import Message from './';
-
-# Message
-
-Provide feedback to user input. Please also check [validation copy docs](/copy/form-validation).
-
-<Preview>
-  <Message>A message to you, Rudy</Message>
-</Preview>
-
-## Variants
-
-### Info (default)
-
-Provides assurance or guidance to the user.
-
-<Preview>
-  <Message>A message to you, Rudy</Message>
-</Preview>
-
-### Error
-
-An error message should display instruction on how to fix an input error. Error messages are displayed under an input until the error is fixed.
-
-<Preview>
-  <Message type="error">Stop your messing around</Message>
-</Preview>
-
-### Warning
-
-They are fundamentally different in nature from error messages as they **only alert** the user to potential problems but doesn’t prevent them from proceeding. This makes warnings ideal for inputs that tend to follow certain patterns, yet can’t be validated without invoking false negatives.
-
-<Preview>
-  <Message type="warning">Better think of your future</Message>
-</Preview>
-
-<ComponentDocs title="<Message />" component={Message} />

package/src/components/Forms/Radio/Radio.mdx

@@ -1,98 +0,0 @@
-import { Code, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-
-import Fieldset from '../Fieldset';
-import Field from '../Field';
-import Radio from './';
-
-# Radio
-
-A Radio input is an interface for choosing one option from a limited amount of choices.
-
-Radios are used as a group and presented inside a [Fieldset](/components/fomrs/fieldset).
-
-Consider using a [Select](/components/forms/select) when there are more than 5 options and the options do not need additional explanation.
-
-## Anatomy of a Radio Fieldset
-
-A Radio Fieldset consists of:
-
-- **Legend** (mandatory)
-- **Description** (optional)
-- **Radio filelds** (mandatory)
-  - **Control**
-    - **Radio** 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 an option">
-    <Field
-      control={{ type: 'radio', name: 'option-picker' }}
-      tooltip="Helpful tooltip"
-      label="Option 1"
-      hint="Helpful hint"
-      messages={[
-        { type: 'warning', text: 'Picking this option may cause problems' },
-      ]}
-    />
-    <Field
-      control={{ type: 'radio', name: 'option-picker' }}
-      tooltip="Helpful tooltip"
-      label="Option 2"
-      hint="Helpful hint"
-    />
-  </Fieldset>
-</Preview>
-
-## Control sizes
-
-### Large
-
-<Preview>
-  <Radio size="large" id="large" name="large" />
-</Preview>
-
-## Control states
-
-### Default
-
-<Preview>
-  <Radio id="default" name="default" />
-</Preview>
-
-### States
-
-#### Checked
-
-<Preview>
-  <Radio id="checked" name="checked" isChecked />
-</Preview>
-
-#### Disabled
-
-Cannot be focused, does not receive `click` events and is not submitted with the form.
-
-<Preview>
-  <Radio id="disabled" name="disabled" isDisabled />
-  <br />
-  <Radio id="checked-disabled" name="disabled" isChecked isDisabled />
-</Preview>
-
-#### Invalid
-
-Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/captions/message#error).
-
-<Preview>
-  <Radio id="invalid" name="invalid" isInvalid />
-  <br />
-  <Radio id="invalid-checked" name="invalid" isInvalid isChecked />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Radio />" component={Radio} />

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