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

package/src/components/Forms/FormTooltip.mdx

@@ -1,51 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import { InfoTooltip } from '../Tooltip';
-
-import Field from './Field';
-
-
-# Form Tooltip
-
-After exhausting the possibilities of [label](/components/forms/captions/label) and [hint](/components/forms/captions/hint), the last resort is to use a tooltip.
-
-Tooltips cannot contain interactive elements such as hyperlinks and buttons. If your information requires them, use a [hint](/components/forms/captions/hint) instead.
-
-A form tooltip is a [small info tooltip](http://localhost:3000/components/tooltip#medium-info-tooltip) placed next to the field label:
-
- - The tooltip should open to the right using `[data-tooltip-placement="right"]` attribute
- - The tooltip must be refferenced using `[aria-describedby="tooltip-id"]` attribute on the control (input) element.
-
-<Preview>
-  <InfoTooltip placement="right">Help text</InfoTooltip>
-</Preview>
-
-## Using in Fields
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Service number"
-    tooltip="Your service number is shown on the first page of your contract and each invoice."
-  />
-</Preview>
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox' }}
-    label="I understand"
-    tooltip="Tooltips cannot contain interactive elements and should not be used for terms and conditions."
-  />
-</Preview>
-
-## Accessibility
-
-To enable screenreader support, it is important to reference the tooltip from the control (input) element using `aria-describedby`.
-
-Simplified example:
-
-```
-<input aria-describedby="tooltip-id" type="text" />
-<span id="tooltip-id" class="tooltip" role="tooltip" hidden data-tooltip="true">...</span>
-```

package/src/components/Forms/Forms.mdx

@@ -1,48 +0,0 @@
-# Forms
-
-Forms represent the arrangement of controls, captions and fields used to collect information and user input.
-
-### Controls
-
-Controls provide the core functionality of entering and submitting a value. They do not carry any layout and spacing rules other than those needed for input.
-
-- [TextInput](/components/forms/text-input) Textual data input
-- [Textarea](/components/forms/textarea) Longer textual data input
-- [Select](/components/forms/select) Pick from more than three options
-- [Radio](/components/forms/radio) Pick from three or less options
-- [Checkbox](/components/forms/checkbox) Pick one or more options
-- [Autocomplete](/components/forms/autocomplete) Pick one option from many using typeahead
-- [RangeSlider](/components/forms/range-slider) Pick a value from provided range
-<!-- - [Submit Button](/components/forms/submit) Submit eneterd values -->
-
-### Captions
-
-These provide descriptions and instructions on what values, how and why should users enter into each control.
-
-- [Label](/components/forms/captions/label)
-- [Hint](/components/forms/captions/hint)
-- [Message](/components/forms/captions/message)
-- [Tooltip](/components/forms/captions/tooltip)
-- [Label copy](/copy/form-labels)
-
-### Scaffolding
-
-- [ControlGroup (addons)](/components/forms/addons) - Prefixes and suffixes
-- [Field](/components/forms/field) - Arrangement of controls and captions
-- [Fieldset](/components/forms/fieldset) - Groups of related fields
-
-### Validation
-
-Verification of user input to ensure provided data is well formatted and contains all required information.
-
-- [Message](/components/forms/captions/message)
-- [Validation copy](/copy/form-validation)
-
-## Further reading
-
-- [Creating Accessible Forms - Labels](https://webaim.org/techniques/forms/)
-- [Web Accessibility Tutorials - Forms](https://www.w3.org/WAI/tutorials/forms/)
-- [Form design patterns book](https://formdesignpatterns.com/)
-- [Using aria-labelledby to concatenate a label from several text nodes](https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html)
-- [Web Accessibility Tutorials - Form Instructions](https://www.w3.org/WAI/tutorials/forms/instructions/)
-- [Creating Accessible Forms - Advanced Form Labeling](https://webaim.org/techniques/forms/advanced)

package/src/components/Forms/Group/Group.mdx

@@ -1,146 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-import TextInput from '../../Forms/TextInput';
-import Autocomplete from '../../Forms/Autocomplete';
-import Button from '../../Button';
-import Group from './';
-
-# Seach Icon
-
-Add search icon to element using `.input--search-icon`. Icon is visible when element is not focused and doesn't have value.
-It's required to set empty placeholder. Usage with placeholder is described in [the example below](#search-icon-with-placeholder). Does not apply for radios and checkboxes.
-
-<Preview>
-  <Autocomplete
-    id="search-autocomplete"
-    options={[
-      '',
-      'apple',
-      'apricot',
-      'banana',
-      'blueberry',
-      'fig',
-      'lime',
-      'lemon',
-      'mango',
-      'orange',
-      'raspberry',
-      'watermelon',
-    ]}
-    autocompleteConfig={{
-      customInputClassName: 'input--search-icon',
-    }}
-    placeholder=""
-  />
-  <br />
-  <TextInput
-    id="search-1"
-    htmlType="text"
-    className="input--search-icon"
-    placeholder=""
-  />
-  <br />
-  <TextInput
-    id="search-2"
-    htmlType="text"
-    defaultValue="has value"
-    placeholder=""
-    className="input--search-icon"
-  />
-</Preview>
-
-## Search icon with placeholder
-
-When using displaying search icon on input with placeholder, it's required to set the `.input--search-icon-with-placeholder` class on the input element.
-Does not apply for radios and checkboxes.
-
-### Usage with Autocomplete
-
-<Preview>
-  <Autocomplete
-    id="search-autocomplete"
-    options={[
-      '',
-      'apple',
-      'apricot',
-      'banana',
-      'blueberry',
-      'fig',
-      'lime',
-      'lemon',
-      'mango',
-      'orange',
-      'raspberry',
-      'watermelon',
-    ]}
-    data-autocomplete-config={JSON.stringify({
-      customInputClassName: 'input--search-icon-with-placeholder',
-      placeholder: "Select fruit"
-    })}
-    placeholder=""
-  />
-</Preview>
-
-### Usage with TextInput
-
-Regular input
-
-<Preview>
-  <TextInput
-    id="search-1"
-    htmlType="text"
-    className="input--search-icon-with-placeholder"
-    placeholder="Search"
-  />
-</Preview>
-
-Large input
-<Preview>
-  <TextInput
-    id="search-1"
-    htmlType="text"
-    className="input--search-icon-with-placeholder text-input--large"
-    placeholder="Search"
-  />
-</Preview>
-
-# Control Group
-
-Add prefixes and suffixes to control elements. Does not apply for radios and checkboxes.
-
-## Example
-
-<Preview>
-  <Group
-    prefix="€"
-    suffix="per piece"
-    control={{ type: 'text', id: 'group-1' }}
-  />
-</Preview>
-
-### Variants
-
-#### With Button
-
-<Preview>
-  <Group
-    suffix={<Button type="primary">Ok</Button>}
-    control={{ type: 'text', id: 'group-2' }}
-  />
-</Preview>
-
-#### Size
-
-<Preview>
-  <Group
-    size="large"
-    prefix="€"
-    suffix={['kg', <Button>Send</Button>]}
-    control={{ type: 'text', size: 'large', id: 'group-3' }}
-  />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Group />" component={Group} />

package/src/components/Forms/Hint/Hint.mdx

@@ -1,40 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-import Link from '../../Link';
-import Field from '../Field';
-
-
-import Hint from './';
-
-
-# Hint
-
-Provide instructions on how to fill a form field. Unlike a placeholder, hint stays visible even while the user is typing. 
-
-Hints improve experience when the field expects special formatting or can help users fint the required information (e.g. a contract number or SN). Using a properly worded hint can also reduce anxiety when filling in sensitive information.
-
-<Preview>
-  <Hint>Fill the field like this</Hint>
-</Preview>
-
-## Using in Fields
-
-Hint **must** be reffered to using `aria-describedby` attribute on the input element. Without it, screenreader users will not be able to conveniently reach the provided help text.
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Service number"
-    hint="Your service number is shown on the first page of your contract and each invoice."
-  />
-</Preview>
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox' }}
-    label="I understand"
-    hint={<React.Fragment>By checking this, you declare you understand the <Link href="#">important document</Link>.</React.Fragment>}
-  />
-</Preview>
-

package/src/components/Forms/InputStepper/InputStepper.mdx

@@ -1,147 +0,0 @@
-import { Code, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-
-import Field from '../Field';
-import Bar, { BarItem } from '../../Bar';
-import { InfoTooltip } from '../../Tooltip';
-import Icon from '../../Icon';
-import InputStepper from './InputStepper';
-
-## InputStepper Field
-
-<Preview>
-  <Field
-    control={{
-      type: 'input-stepper',
-      config: { min: 2, max: 10, defaultValue: 3 },
-    }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'info', text: 'Info message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-## Layout
-
-If you want different layout use Bar component.
-
-<Preview>
-  <div class="form-field">
-    <Bar className={'mb-small'} space={'small'}>
-      <BarItem className={'form-field__description mb-none'} canShrink>
-        <label for="id-2" class="label form-field__label" id="id-2-label">
-          Field label
-        </label>
-        &nbsp;
-        <InfoTooltip>Field tooltip with further explanation</InfoTooltip>
-      </BarItem>
-      <BarItem>
-        <InputStepper
-          id="id-2"
-          className={'form-field__control'}
-        ></InputStepper>
-      </BarItem>
-    </Bar>
-    <p class="hint form-field__hint" id="id-2-hint">
-      Field instructions
-    </p>
-    <p class="message" id="id-2-message-0">
-      <Icon name="info" size="medium" color="info" className="message__icon" />
-      Info message
-    </p>
-  </div>
-</Preview>
-
-## InputStepper config
-
-By default minimum value is 1, maximum value is 999 and defaultValue is 1. You can override these values by passing JSON string to `data-inputstepper`.
-
-<Preview>
-  <InputStepper
-    id="stepper-1"
-    config={{
-      min: 2,
-      max: 10,
-      defaultValue: 3,
-    }}
-  ></InputStepper>
-</Preview>
-
-## InputStepper disabled
-
-Outside of disabled attributes on input and buttons, dont forget to add class `input-stepper--disabled` to `<div/>` wrapper, otherwise disabled attributes will be removed during component initialization.
-
-<Preview>
-  <InputStepper isDisabled={true} id="disabled">
-    {' '}
-  </InputStepper>
-</Preview>
-
-## InputStepper with non editable input
-
-When `nonEditableInput` config is used, input is replaced only with text number and user cannot change it by typing.
-
-<Preview>
-  <InputStepper
-    id="stepper-non-editable"
-    nonEditableInput>
-  </InputStepper>
-
-</Preview>
-
-## InputStepper inverse
-
-InputStepper can be used on dark background by adding class `input-stepper--inverse`, but default behaviour on black backgound is also set.
-
-<Preview bgTheme="black">
-  <InputStepper isInverse className={'mb-medium'} id="inverse-1"></InputStepper>
-  <InputStepper
-    isDisabled={true}
-    id="inverse-2"
-    isInverse
-    className={'mb-medium'}
-  ></InputStepper>
-  <div className="bg-black">
-    <InputStepper id="inverse-3"> </InputStepper>
-  </div>
-</Preview>
-
-## JS Module Reference
-
-All elements with `[data-inputstepper]` 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 config object through `[data-inputstepper]` attribute or during [manual initialisation](#manual-initialisation).
-
-### Default config
-
-```javascript
-{
-  nonEditableInput: false,
-  min: 1,
-  max: 999,
-  defaultValue: 1,
-}
-```
-
-### Manual initialisation
-
-```javascript
-const myInputStepper = new window.myApp.InputStepper(
-  document.getElementById('my-inputstepper'),
-  config
-);
-```
-
-### Methods
-
-- **init()** - handles initialization
-- **destroy()** - destroys the instance
-- **update()** - destroys and initializes the instance again
-
-## Props
-
-<ComponentDocs title="<InputStepper />" component={InputStepper} />

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