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

package/src/components/Forms/Field/Field.mdx

@@ -1,383 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-import Button from '../../Button';
-import BlockAction, {
-  BlockActionControl,
-  BlockActionIndicator,
-} from '../../BlockAction';
-import Bar, { BarItem } from '../../Bar';
-import ToggleCheckbox from '../../../docs/utils/ToggleCheckbox';
-
-import Field from './Field';
-
-# Field
-
-Scaffolding for Controls and Captions
-
-## Required minimum
-
-### TextInput
-
-<Preview>
-  <Field control={{ type: 'text' }} label="Field label" />
-</Preview>
-
-### Radio
-
-<Preview>
-  <Field control={{ type: 'radio', name: 'radio-field' }} label="Field label" />
-</Preview>
-
-### Checkbox
-
-<Preview>
-  <Field control={{ type: 'checkbox' }} label="Field label" />
-</Preview>
-
-### File
-
-<Preview>
-  <Field control={{ type: 'file' }} label="Field label" />
-</Preview>
-
-### Select
-
-<Preview>
-  <Field
-    control={{ type: 'select', options: ['option 1', 'option 2', 'option 3'] }}
-    label="Field label"
-  />
-</Preview>
-
-### Range
-
-<Preview>
-  <Field
-    control={{
-      type: 'range',
-      id: 'range-field',
-      config: {
-        start: [0],
-        range: {
-          min: 0,
-          max: 100,
-        },
-        connect: [true, false],
-        handleAttributes: [{ 'aria-labelledby': 'range-field-label' }],
-      },
-    }}
-    label="Field label"
-  />
-</Preview>
-
-### DatePicker
-
-<Preview>
-  <Field
-    control={{
-      type: 'datepicker',
-    }}
-    label="Field label"
-  />
-</Preview>
-
-### Group
-
-<Preview>
-  <Field
-    control={{
-      type: 'group',
-      control: { type: 'text' },
-      prefix: 'lorem',
-      suffix: ['ipsum', <Button htmlType="button">Ok</Button>],
-    }}
-    label="Field label"
-  />
-</Preview>
-
-## Hint, Tooltip and Messages
-
-### TextInput
-
-#### Error state
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Donec id elit non mi porta gravida at eget metus."
-    hint="Field instructions"
-    messages={[{ type: 'error', text: 'Error message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-#### Warning state
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'warning', text: 'Warning message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-#### Success state
-
-<Preview>
-  <Field
-    control={{ type: 'text', isValid: true }}
-    label="Field label"
-    hint="Field instructions"
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Radio
-
-<Preview>
-  <Field
-    control={{ type: 'radio', name: 'radio-field-2' }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Checkbox
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox' }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-#### Checkbox Toggle
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox', isToggle: true }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### File
-
-<Preview>
-  <Field
-    control={{ type: 'file' }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Select
-
-<Preview>
-  <Field
-    control={{ type: 'select', options: ['option 1', 'option 2', 'option 3'] }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'error', text: 'Error message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-  <Field
-    control={{ type: 'select', options: ['option 1', 'option 2', 'option 3'] }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'warning', text: 'Warning message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Range
-
-<Preview>
-  <Field
-    control={{
-      type: 'range',
-      config: {
-        start: [0],
-        range: {
-          min: 0,
-          max: 100,
-        },
-        connect: [true, false],
-      },
-    }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### DatePicker
-
-<Preview>
-  <Field
-    control={{
-      type: 'datepicker',
-    }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[
-      { type: 'warning', text: 'Warning message' },
-      { type: 'error', text: 'Error message' },
-    ]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Group
-
-#### Warning
-
-<Preview>
-  <Field
-    control={{
-      type: 'group',
-      control: { type: 'text' },
-      prefix: 'lorem',
-      suffix: ['ipsum', <Button htmlType="button">Ok</Button>],
-    }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'error', text: 'Error message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-### Warning
-
-<Preview>
-  <Field
-    control={{
-      type: 'group',
-      control: { type: 'text' },
-      prefix: 'lorem',
-      suffix: ['ipsum', <Button htmlType="button">Ok</Button>],
-    }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'warning', text: 'Warning message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-#### Success
-
-<Preview>
-  <Field
-    control={{
-      type: 'group',
-      control: { type: 'text', isValid: true },
-      prefix: 'lorem',
-      suffix: ['ipsum', <Button htmlType="button">Ok</Button>],
-    }}
-    label="Field label"
-    hint="Field instructions"
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-## Stepper
-
-<Preview>
-  <Field
-    control={{ type: 'input-stepper' }}
-    label="Field label"
-    hint="Field instructions"
-    messages={[{ type: 'info', text: 'Info message' }]}
-    tooltip="Field tooltip with further explanation"
-  />
-</Preview>
-
-## Fill parent
-
-Because Checkbox/Radio input styling, we are not able to fill the parent using `.block-action__control`. We can do this using class `.radiocheck--fill`, thanks to which Checkbox
-fill whole space of parent element with set position. In this case `position: relative`
-of `.card` prevents element from further expanding. Disadvantage is that we can't have another interactive element inside of this card.
-
-<Preview>
-  <BlockAction>
-    <BlockActionIndicator>
-      <div className="card border border--gray" id="checkbox-no-fill-border">
-        <div className="card__section">
-          <div class="form-field form-field--radiocheck">
-            <div class="form-field__control">
-              <BlockActionControl>
-                <input
-                  type="checkbox"
-                  className="checkbox block-action__control"
-                  id="checkbox-no-fill"
-                  name="checkbox-no-fill"
-                ></input>
-              </BlockActionControl>
-              <div className="checkbox-display"></div>
-            </div>
-            <div class="form-field__description">
-              <label
-                for="checkbox-no-fill"
-                class="label form-field__label"
-                id="checkbox-no-fill-label"
-              >
-                Whole element is not clickable
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </BlockActionIndicator>
-  </BlockAction>
-  <div className="card border border--gray border-hover" id="checkbox-border">
-    <div className="card__section">
-      <div class="form-field form-field--radiocheck">
-        <div class="form-field__control">
-          <ToggleCheckbox />
-          <div className="checkbox-display"></div>
-        </div>
-        <div class="form-field__description">
-          <label
-            for="checkbox-fill"
-            class="label form-field__label"
-            id="checkbox-fill-label"
-          >
-            Whole element is clickable
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Field />" component={Field} />

package/src/components/Forms/Field/tests/Group.Field.conformance.test.js

@@ -1,47 +0,0 @@
-import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
-
-import { Button } from "../../../Button";
-import { Field } from "..";
-
-const controlConfig = {
-  type: "group",
-  prefix: "€",
-  suffix: ["kg", <Button key="test">Send</Button>],
-  control: { type: "text" },
-};
-
-const example = (
-  <>
-    <Field label="Field Label" control={controlConfig} />
-    <Field label="Field Label" control={controlConfig} tooltip="info tooltip" />
-    <Field
-      label="Field Label"
-      hint="Field hint with long text"
-      control={controlConfig}
-    />
-    <Field
-      label="Field Label"
-      control={controlConfig}
-      messages={[
-        { type: "info", text: "Info message with lorem ipsum long text ipsum" },
-      ]}
-    />
-    <div id="root-tooltips" />
-  </>
-);
-
-it("is valid html", () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate({
-    rules: {
-      "no-inline-style": "off",
-      "attribute-boolean-style": "off",
-    },
-  });
-});
-
-it("is accessible", async () => {
-  const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
-});

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).