@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/Forms/Checkbox/Checkbox.mdx

@@ -1,139 +0,0 @@
-import { Code, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-
-import Link from '../../Link';
-import Fieldset from '../Fieldset';
-import Field from '../Field';
-import Checkbox from './';
-
-# Checkbox
-
-A checkbox is an interface for making one or more selections from multiple options, or providing a boolean answer.
-
-Based on context, checkbox can be used as a [standalone field](#anatomy-of-a-standalone-checkbox-field) or a [multi-choice fieldset](#anatomy-of-a-checkbox-fieldset).
-
-## Anatomy of a standalone Checkbox Field
-
-A Checkobx Field is usually used for consents (terms and conditions, competition rules, etc.) and consists of:
-
-- **Control**
-  - **Checkbox** control itself
-- **Description**
-  - [**Label**](/components/forms/captions/label) (mandatory)
-  - [**Tooltip**](/components/forms/captions/tooltip) (optional)
-  - [**Hint**](/components/forms/captions/hint) (optional)
-  - [**Messages**](/components/forms/captions/message) (optional)
-
-<Preview>
-  <Field
-    control={{ type: 'checkbox' }}
-    tooltip="Helpful tooltip"
-    label="I agree with Terms and Conditions"
-    labelAfter="(mandatory)"
-    hint={
-      <>
-        <Link href="#">read the Terms and conditions document</Link>
-      </>
-    }
-    messages={[
-      { type: 'error', text: 'This is mandatory, no way around that.' },
-    ]}
-  />
-</Preview>
-
-## Anatomy of a Checkbox Fieldset
-
-A Checkbox Fieldset is usually used in flows with various number of options (checkout settings, multi-choice consents, etc.) and consists of:
-
-- **Legend** (mandatory)
-- **Description** (optional)
-- **Checkbox Fields** (mandatory)
-  - **Control**
-    - **Checkbox** 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 your favorites">
-    <Field
-      control={{ type: 'checkbox' }}
-      tooltip="Helpful tooltip"
-      label="Option 1"
-      hint="Helpful hint"
-      messages={[
-        {
-          type: 'warning',
-          text: 'Delivery of this option might take some time.',
-        },
-      ]}
-    />
-    <Field
-      control={{ type: 'checkbox' }}
-      tooltip="Helpful tooltip"
-      label="Option 2"
-      hint="Helpful hint"
-    />
-  </Fieldset>
-</Preview>
-
-## Control sizes
-
-### Large
-
-<Preview>
-  <Checkbox id="size-large" size="large" />
-</Preview>
-
-## Control states
-
-### Default
-
-<Preview>
-  <Checkbox id="checkbox-example" />
-</Preview>
-
-### Checked
-
-<Preview>
-  <Checkbox id="checked" isChecked />
-</Preview>
-
-### Disabled
-
-Cannot be focused, does not receive `click` events and is not submitted with the form.
-
-<Preview>
-  <Checkbox id="disabled" isDisabled />
-  <br />
-  <Checkbox id="disabled-checked" isChecked isDisabled />
-</Preview>
-
-### Invalid
-
-Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/captions/message#error).
-
-<Preview>
-  <Checkbox id="invalid" isInvalid />
-  <br />
-  <Checkbox id="invalid-checked" isChecked isInvalid />
-</Preview>
-
-## Toggle
-
-Displays Checkbox as toogle switch.
-
-<Preview>
-  <Checkbox id="toggle" isToggle={true} />
-  <br />
-  <Checkbox id="checked-toggle" isToggle={true} isChecked={true} />
-  <br />
-  <Checkbox id="disablead-toggle" isToggle={true} isDisabled={true} />
-  <br />
-  <Checkbox id="invalid-toggle" isToggle={true} isInvalid={true} />
-</Preview>
-
-<ComponentDocs title="Checkbox" component={Checkbox} />

package/src/components/Forms/DatePicker/DatePicker.mdx

@@ -1,149 +0,0 @@
-import { ComponentDocs, CodeBlock } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../../styleguide';
-import { objectToString } from '../../../utils/helpers';
-import Alert from '../../Alert';
-import Link from '../../Link';
-
-import Field from '../Field';
-import DatePicker from './';
-import { defaultConfig as defaultConfigDatePicker } from './DatePicker.static';
-
-# DatePicker
-
-<Alert
-  title="You might not need a date picker"
-  description={
-    <>
-      Entering known dates, such as birthday, ID expiration date and other date
-      that a user already knows or can look up wihtout using a calendar should
-      be done using a{' '}
-      <Link href="/components/forms/fieldset#known-date-with-description">
-        date input
-      </Link>
-    </>
-  }
-/>
-
-## Datepicker Field
-
-1. [**Label**](/components/forms/captions/label) (mandatory)
-2. [**Tooltip**](/components/forms/captions/tooltip) (optional)
-3. [**Hint**](/components/forms/captions/hint) (optional)
-4. **DatePicker** control group
-
-- Input field (for user interaction)
-- Hidden input (for storing and sending a YYYY-MM-DD value)
-- Calendar texts
-- Calendar widget toggle button
-- Calendar widget
-  - Year select
-  - Month select
-  - Pagination
-  - Calendar
-
-5. [**Messages**](/components/forms/captions/message) (optional)
-
-<Preview>
-  <Field
-    tooltip="Example tooltip"
-    label="Example datepicker"
-    hint="Hint message"
-    control={{
-      type: 'datepicker',
-      name: 'datepicker-name',
-      id: 'datepicker-id',
-    }}
-    messages={[
-      {
-        text: 'Error message',
-        type: 'error',
-      },
-    ]}
-  />
-</Preview>
-
-## Datepicker Component
-
-<Preview>
-  <DatePicker name="datepicker-name" id="datepicker-id" />
-</Preview>
-
-## Disable dates
-
-You can disable dates using `disabledDayFn` function in DayPicker config object. But in some cases it can be more effective to use
-`data-enabled-days` and pass string of dates with format YYYY-MM-DD separated by commas. In this case all dates except the ones
-you passed will be disabled. `data-enabled-days` will override `disabledDayFn` if both are set.
-
-<Preview>
-  <DatePicker
-    name="datepicker-name"
-    id="datepicker-id"
-    enabledDays={[
-      new Date().toISOString().slice(0, 10),
-      new Date(new Date().getTime() + 2 * 24 * 3600000)
-        .toISOString()
-        .slice(0, 10),
-      new Date(new Date().getTime() + 5 * 24 * 3600000)
-        .toISOString()
-        .slice(0, 10),
-    ]}
-    dayPickrConfig={{
-      firstDayOfWeek: 0,
-    }}
-  />
-</Preview>
-
-## User input and output data
-
-Datepicker supports manual input and selecting a date from a calendar. Selecting/entering a date populates the hidden field with a YYYY-MM-DD value.
-
-Manual input parses the input string, and if it succeeds, it selects the corresponding date. The parser can be customized, but does not handle errors - error handling must be done by your app. The default parser enables slovak locale (D. M. YYYY).
-
-## Config
-
-DatePicker is backed with [daypickr](https://www.npmjs.com/package/daypickr) package.
-This package contains it's own default configuration that is partially overriden by configuration in this project (see [Default config](/components/forms/datepicker#default-config) bellow).
-To see all configuration options visit previously mentioned [daypickr](https://www.npmjs.com/package/daypickr) package.
-
-### Default config
-
-<CodeBlock language="js">{objectToString(defaultConfigDatePicker)}</CodeBlock>
-
-## Initialization
-
-### Automatic initialization
-
-The datepicker in rendered inside an empty div, which specifies the Input field id and Hidden input name.
-
-<CodeBlock language="js">
-  {`<div
-  data-datepicker
-  class="datepicker control-group"
-  data-datepicker-id="input-id"
-  data-datepicker-name="hidden-input-name"
-></div>`}
-</CodeBlock>
-
-### Custom initialization
-
-In case you need custom configuration (e.g. disabling ceratain dates or chainging the range), remove the `data-datepicker` atrribute and initialize the module manually.
-
-Ideally, you should do this after everything else was succesfuly initialized, e.g. on `ODSLoaded` event.
-
-<CodeBlock language="js">
-  {`window.addEventListener('ODSLoaded', () => {
-    // DatePicker initialization
-    const myDatePicker = new window.ODS.modules.DatePicker(
-    document.getElementById('my-datepicker'), 
-    customConfigObject)
-})`}
-</CodeBlock>
-
-### Methods
-
-- **init()** - handles initialization
-- **destroy()** - destroys the instance
-
-## Props
-
-<ComponentDocs title="<DatePicker />" component={DatePicker} />

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