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

package/src/components/Forms/Fieldset/Fieldset.mdx

@@ -1,178 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-import Bar, { BarItem } from '../../Bar';
-import Field from '../Field';
-
-import Fieldset from './';
-
-import {
-  deliveryFields,
-  deliveryValues,
-  inlineDateFields,
-  separateMessages,
-  inlineErrorFields,
-  deliveryStateFields,
-} from './docsData';
-
-# Fieldset
-
-Related inputs should be wrapped by a fieldset. For example when asking for address, the fields are closely related and should be grouped together.
-
-The legend element **must** be the first descendant of the fieldset.
-
-export const DeliveryFields = ({ items }) => (
-  <>
-    {items.map(item => (
-      <Field {...item} key={item.label} />
-    ))}
-  </>
-);
-
-<Preview>
-  <Fieldset legend="Adresa doručenia">
-    <DeliveryFields items={deliveryFields} />
-  </Fieldset>
-</Preview>
-
-## Fieldset main error
-
-In case of whole fieldset problem, we define main fieldset error above fieldset itself.
-
-<Preview>
-  <Fieldset
-    legend="Adresa doručenia"
-    messages={[
-      {
-        type: 'error',
-        isMain: true,
-        text: 'Adresa doručenia je prázdna. Vypíšte polia adresy doručenia.',
-      },
-    ]}
-  >
-    <DeliveryFields items={deliveryFields} />
-  </Fieldset>
-</Preview>
-
-## Block field errors
-
-In case of only separate field problems, we show field errors under corresponding
-field as usual.
-
-<Preview>
-  <Fieldset legend="Adresa doručenia">
-    <DeliveryFields items={deliveryStateFields} />
-  </Fieldset>
-</Preview>
-
-## Known date with description
-
-Manual entry date fields are used when users knows or can look up the date
-without using a calendar (e.g. birthday, document validity dates).
-
-A fieldset can be described by referencing the describing element via
-`aria-describedby` on the `fieldset` element.
-
-export const description = (
-  <p id="birthday-description">Napríklad 29. 8. 1944</p>
-);
-
-export const Fields = ({ items }) => (
-  <Bar className="mb-none">
-    {items.map(item => (
-      <BarItem key={item.label}>
-        <Field {...item} />
-      </BarItem>
-    ))}
-  </Bar>
-);
-
-<Preview>
-  <Fieldset
-    legend="Deň narodenia"
-    legendProps={{ className: 'mb-small' }}
-    aria-describedby="birthday-description"
-    description={description}
-  >
-    <Fields items={inlineDateFields} />
-  </Fieldset>
-</Preview>
-
-## Fieldset main error
-
-In case of whole fieldset problem, we define main fieldset error above fieldset itself.
-
-<Preview>
-  <Fieldset
-    legend="Dátum narodenia"
-    legendProps={{ className: 'mb-small' }}
-    aria-describedby="birthday-description"
-    messages={[
-      {
-        type: 'error',
-        isMain: true,
-        text: 'Vypíšte "Dátum narodenia".',
-      },
-    ]}
-    description={description}
-  >
-    <Fields items={inlineDateFields} />
-  </Fieldset>
-</Preview>
-
-## Inline fields errors
-
-In case of separate field problems, inline field errors are stacked under the
-fieldset in order of the fields and fields style changes to error state style.
-
-<Preview>
-  <Fieldset
-    legend="Deň narodenia"
-    legendProps={{ className: 'mb-small' }}
-    aria-describedby="birthday-description"
-    messages={separateMessages}
-    description={description}
-  >
-    <Fields items={inlineErrorFields} />
-  </Fieldset>
-</Preview>
-
-## Legend as h1
-
-When a form is the only element on the page, the first level heading can be placed inside the legend.
-
-<Preview>
-  <Fieldset legend={<h1>Kam to bude?</h1>}>
-    <Field label="Mesto" control={{ type: 'text' }} />
-  </Fieldset>
-</Preview>
-
-## Complex layouts
-
-The [HTML5 spec defines](https://html.spec.whatwg.org/#the-legend-element) dictates, that a `legend` can only be used as the first child of a fieldset element. Moreover, `fieldset` and `legend` are [replaced elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), making them very difficult to style (for example flexbox does not work here).
-
-Fortunately, this can be solved using ARIA. The `fieldset`s implicit role is `group`, while `legend` serves as a label.
-
-<Preview>
-  <div role="group" aria-labelledby="group-label">
-    <Bar>
-      <BarItem>
-        <div id="group-label">Sort by: </div>
-      </BarItem>
-      <BarItem>
-        <Field label="Price" control={{ type: 'radio', name: 'filter' }} />
-      </BarItem>
-      <BarItem>
-        <Field label="Alphabet" control={{ type: 'radio', name: 'filter' }} />
-      </BarItem>
-    </Bar>
-  </div>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Fieldset />" component={Fieldset} />
-
-## Accessibility
-
-Fieldsets group inputs into logic parts of a form. A screenreader usually announces the filedset legend along with the label of each nested input, which helps users stay in context when tabbing through different inputs within a fieldset. For example a color switch would consist of radio buttons wrapped in a fieldset, with a legend reading "Color". A screenreader would then read each input's label prefixed with the legend contnets (e.g. Color blue, color red, color green...).

package/src/components/Forms/File/File.mdx

@@ -1,88 +0,0 @@
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../../styleguide';
-
-import Field from '../Field';
-import File from './File';
-
-# File
-
-File input allows uploading one or multiple files.
-
-<Field
-  control={{ type: 'file' }}
-  label="Upload a file"
-/>
-
-## File Field
-
-A File 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. **File** control itself
-5. **List of selected files** (visible after selecting file/files)
-6. [**Messages**](/components/fomrs/captions/messge) (optional)
-
-<Preview>
-  <Field
-    control={{ type: 'file', accept: '.pdf'}}
-    label="Upload your CV"
-    hint="Please use a PDF file"
-    messages={[ { type: 'warning', text: 'An example warning message' }]}
-  />
-</Preview>
-
-## Control States
-
-### Disabled
-
-Cannot be focused, does not receive `click` events and is not submitted with the form. 
-
-<Preview>
-  <File id="file-disabled" isDisabled />
-</Preview>
-
-### Invalid
-
-Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/field#hint-tooltip-and-messages).
-
-<Preview>
-  <File id="file-invalid" isInvalid />
-</Preview>
-
-## Sizes
-
-### Large
-
-<Preview>
-  <File id="file-size-large" size="large" />
-</Preview>
-
-## JS Module Reference
-
-The JS Module is responsible for updating label text with the selected file name.
-
-All elements matching `input[type="file"].file-input` selector with a unique `name` attribute will be initialised automatically.
-
-**`input[name]`** must be specified for the JS module to initialize.
-
-### Custom initialization
-
-```javascript
-const myFileInput = new window.ODS.modules.File( document.getElementById('myFileInput') );
-```
-
-### Methods
-
-- **init()** - handles initialization
-- **destroy()** - destroys the instance
-- **update()** - destroys and initializes the instance again
-
-## Props
-
-<ComponentDocs component={File} />
-
-## Accessibility
-
-Bootsted implementation changes the input label text to the file name of selected file. Once user selects a file, they loose the context and therefore this implementation is considered bad usability and violates at least one WCAG success criterion - [3.3.2 Labels or Instructions - Level A](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html).

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