@lion/ui 0.24.0 → 0.26.0

package/docs/fundamentals/systems/form/overview.md

@@ -1,95 +0,0 @@
----
-parts:
-  - Overview
-  - Form
-  - Systems
-title: 'Overview'
-eleventyNavigation:
-  key: Systems >> Form >> Overview
-  title: Overview
-  order: 10
-  parent: Systems >> Form
----
-
-# Overview
-
-This page should be used as a starting point when first using the Form System.
-It provides an overview of its essential building blocks and provides links to detailed explanations of most of its core concepts.
-
-## Building Blocks
-
-Our Form System is built from a set of very fundamental building blocks: `form control`s, `field`s and `fieldset`s.
-
-### Form Controls
-
-`Form control`s are the most fundamental building blocks of our Form System.
-They are the fundament of both `field`s, and `fieldset`s and provide a normalized, predictable API throughout the whole form. Every form element inherits from `FormControlMixin`.
-
-`FormControlMixin` creates the default html structure and accessibility is designed to be used in conjunction with the ValidateMixin and the FormatMixin.
-
-## Fields
-
-Fields (think of an input, textarea, select) are the actual form controls the end user interacts with. They extend `LionField`, which in turn uses the `FormControlMixin`. Fields provide a normalized API for both platform components and custom made form controls.
-
-On top of this, they feature:
-
-- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
-- Advanced [validation](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) possibilities.
-- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/interaction-states.md).
-- Provision of labels and help texts in an easy, declarative manner.
-- Accessibility out of the box.
-- Advanced styling possibilities: map your own Design System to the internal HTML structure.
-  `Form control`s are the most fundamental building block of the Forms. They are the basis of
-  both `field`s and `fieldset`s, and the `form` itself.
-
-### Platform fields (wrappers)
-
-- [LionInput](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md), a wrapper for `<input>`.
-- [LionTextarea](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
-- [LionSelect](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/select/overview.md), a wrapper for `<select>`.
-
-### Custom fields (wrappers)
-
-Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
-
-- [LionCombobox](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/combobox/overview.md), a custom implementation of a combobox.
-- [LionDate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
-- [LionDatepicker](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
-- [LionListbox](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/listbox/overview.md), a custom implementation of a listbox.
-- [LionInputAmount](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
-- [LionInputEmail](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
-- [LionInputIban](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
-- [LionInputRange](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
-- [LionInputStepper](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
-- [LionSelectRich](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
-
-### Choice Input Fields
-
-For form controls which return a `checked-state` you can use the `lion-choice-input` mixin. It is used in:
-
-- [LionCheckbox](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
-- LionOption, an alternative for `<option>`.
-- [LionRadio](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
-- [LionSwitch](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/switch/overview.md), a custom implementation of a switch.
-
-Which contains the following features:
-
-- Get or set the value of the choice - `choiceValue()`.
-- Get or set the modelValue (value and checked-state) of the choice - `.modelValue`.
-- Pre-select an option by setting the `checked` boolean attribute.
-
-## Fieldsets
-
-Fieldsets are groups of fields. They can be considered fields on their own as well, since they partly share the normalized API via `FormControlMixin`. Fieldsets are the basis for:
-
-- [LionFieldset](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
-- [LionForm](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
-- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
-- [LionRadioGroup](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
-
-## Other Resources
-
-- [Model Value](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/model-value.md)
-- [Formatting and parsing](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/formatting-and-parsing.md)
-- [Interaction states](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/interaction-states.md)
-- [Validation System](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md)

package/docs/fundamentals/systems/form/styling.md

@@ -1,92 +0,0 @@
----
-parts:
-  - Styling
-  - Form
-  - Systems
-title: 'Styling'
-eleventyNavigation:
-  key: Systems >> Form >> Styling
-  title: Styling
-  order: 40
-  parent: Systems >> Form
----
-
-# Styling
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-input.js';
-import '@lion/ui/define/lion-button.js';
-```
-
-## Label
-
-Can be provided via the `label` attribute, but the slot can be used to change the html and css of the label.
-A label is always needed to provide an accessible user experience.
-
-```js preview-story
-export const label = () => html`
-  <lion-input>
-    <label slot="label"> Label with <b>html tag</b> inside </label>
-  </lion-input>
-`;
-```
-
-## Input additions
-
-When using an addition to the input you could add `data-label` to add the content connected to the input via `aria-labelledby` or add `data-description` to connect it via the `aria-describedby` when the content is relevant for the screen-reader user to fill in the form field. This won't be necessary for a search icon, since that should already be clear via the label, but it is relevant in case a unit is added behind the input field.
-
-### Prefix
-
-The prefix is used for addons to the input like a minus button in the `input-stepper`.
-
-```html preview-story
-<lion-input label="Prefix">
-  <div slot="prefix" data-description>[prefix]</div>
-</lion-input>
-```
-
-### Suffix
-
-The suffix can be used for addons to the input like a calculator, datepicker or addressbook.
-In these cases a button with an icon is used.
-
-```html preview-story
-<lion-input label="Suffix">
-  <div slot="suffix" data-description>[suffix]</div>
-</lion-input>
-```
-
-### Before
-
-> Before slot does not have an active use case yet.
-
-```html preview-story
-<lion-input label="Before">
-  <div slot="before" data-description>[before]</div>
-</lion-input>
-```
-
-### After
-
-The after is mostly used to add a unit to the input field, such as a currency or percentage.
-
-```html preview-story
-<lion-input label="Amount">
-  <div slot="after" data-description>EUR</div>
-</lion-input>
-<lion-input label="Percentage">
-  <div slot="after" data-description>%</div>
-</lion-input>
-```
-
-### Examples
-
-Due to our custom inputs being Web Components, it is possible to put HTML content inside an input. For example if you want to add a button as a prefix or suffix.
-
-```html preview-story
-<lion-input label="Prefix and suffix">
-  <lion-button slot="prefix">prefix</lion-button>
-  <lion-button slot="suffix">suffix</lion-button>
-</lion-input>
-```

package/docs/fundamentals/systems/form/use-cases.md

@@ -1,187 +0,0 @@
----
-parts:
-  - Use Cases
-  - Form
-  - Systems
-title: 'Use Cases'
-eleventyNavigation:
-  key: Systems >> Form >> Use Cases
-  title: Use Cases
-  order: 50
-  parent: Systems >> Form
----
-
-# Use Cases
-
-This is a meta package to show interaction between various form elements.
-For usage and installation please see the appropriate packages.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-button.js';
-import '@lion/ui/define/lion-checkbox-group.js';
-import '@lion/ui/define/lion-checkbox.js';
-import '@lion/ui/define/lion-combobox.js';
-import '@lion/ui/define/lion-option.js';
-import '@lion/ui/define/lion-fieldset.js';
-import '@lion/ui/define/lion-form.js';
-import '@lion/ui/define/lion-input-amount.js';
-import '@lion/ui/define/lion-input-date.js';
-import '@lion/ui/define/lion-input-datepicker.js';
-import '@lion/ui/define/lion-input-email.js';
-import '@lion/ui/define/lion-input-file.js';
-import '@lion/ui/define/lion-input-tel.js';
-import '@lion/ui/define/lion-input-tel-dropdown.js';
-import '@lion/ui/define/lion-input-iban.js';
-import '@lion/ui/define/lion-input-range.js';
-import '@lion/ui/define/lion-input-stepper.js';
-import '@lion/ui/define/lion-input.js';
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-radio-group.js';
-import '@lion/ui/define/lion-radio.js';
-import '@lion/ui/define/lion-select.js';
-import '@lion/ui/define/lion-select-rich.js';
-import '@lion/ui/define/lion-switch.js';
-import '@lion/ui/define/lion-textarea.js';
-import '@lion/ui/define/lion-button-submit.js';
-import '@lion/ui/define/lion-button-reset.js';
-import { MinLength, Required } from '@lion/ui/form-core.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-```
-
-## Umbrella Form
-
-```js preview-story
-export const main = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-form>
-      <form>
-        <lion-fieldset name="fullName">
-          <lion-input
-            name="firstName"
-            label="First Name"
-            .fieldName="${'first name'}"
-            .validators="${[new Required()]}"
-          ></lion-input>
-          <lion-input
-            name="lastName"
-            label="Last Name"
-            .fieldName="${'last name'}"
-            .validators="${[new Required()]}"
-          ></lion-input>
-        </lion-fieldset>
-        <lion-input-date
-          name="date"
-          label="Date of application"
-          .modelValue="${new Date('2000-12-12')}"
-          .validators="${[new Required()]}"
-        ></lion-input-date>
-        <lion-input-datepicker
-          name="datepicker"
-          label="Date to be picked"
-          .modelValue="${new Date('2020-12-12')}"
-          .validators="${[new Required()]}"
-        ></lion-input-datepicker>
-        <lion-textarea
-          name="bio"
-          label="Biography"
-          .fieldName="${'value'}"
-          .validators="${[new Required(), new MinLength(10)]}"
-          help-text="Please enter at least 10 characters"
-        ></lion-textarea>
-        <lion-input-amount name="money" label="Money"></lion-input-amount>
-        <lion-input-iban name="iban" label="Iban"></lion-input-iban>
-        <lion-input-email name="email" label="Email"></lion-input-email>
-        <lion-input-file name="file" label="File"></lion-input-file>
-        <lion-input-tel name="tel" label="Telephone number"></lion-input-tel>
-        <lion-checkbox-group
-          label="What do you like?"
-          name="checkers"
-          .validators="${[new Required()]}"
-          .fieldName="${'value'}"
-        >
-          <lion-checkbox .choiceValue="${'foo'}" label="I like foo"></lion-checkbox>
-          <lion-checkbox .choiceValue="${'bar'}" label="I like bar"></lion-checkbox>
-          <lion-checkbox .choiceValue="${'baz'}" label="I like baz"></lion-checkbox>
-        </lion-checkbox-group>
-        <lion-radio-group
-          name="dinosaurs"
-          label="Favorite dinosaur"
-          .fieldName="${'dinosaur'}"
-          .validators="${[new Required()]}"
-        >
-          <lion-radio .choiceValue="${'allosaurus'}" label="allosaurus"></lion-radio>
-          <lion-radio .choiceValue="${'brontosaurus'}" label="brontosaurus"></lion-radio>
-          <lion-radio .choiceValue="${'diplodocus'}" label="diplodocus"></lion-radio>
-        </lion-radio-group>
-        <lion-listbox name="favoriteFruit" label="Favorite fruit">
-          <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
-          <lion-option checked .choiceValue="${'Banana'}">Banana</lion-option>
-          <lion-option .choiceValue="${'Mango'}">Mango</lion-option>
-        </lion-listbox>
-        <lion-combobox
-          .validators="${[new Required()]}"
-          name="favoriteMovie"
-          label="Favorite movie"
-          autocomplete="both"
-        >
-          <lion-option checked .choiceValue="${'Rocky'}">Rocky</lion-option>
-          <lion-option .choiceValue="${'Rocky II'}">Rocky II</lion-option>
-          <lion-option .choiceValue="${'Rocky III'}">Rocky III</lion-option>
-          <lion-option .choiceValue="${'Rocky IV'}">Rocky IV</lion-option>
-          <lion-option .choiceValue="${'Rocky V'}">Rocky V</lion-option>
-          <lion-option .choiceValue="${'Rocky Balboa'}">Rocky Balboa</lion-option>
-        </lion-combobox>
-        <lion-select-rich name="favoriteColor" label="Favorite color">
-          <lion-option .choiceValue="${'red'}">Red</lion-option>
-          <lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
-          <lion-option .choiceValue="${'teal'}">Teal</lion-option>
-        </lion-select-rich>
-        <lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
-          <select slot="input">
-            <option value="1">Fire up that loud</option>
-            <option value="2">Another round of shots...</option>
-            <option value="3">Drop down for what?</option>
-          </select>
-        </lion-select>
-        <lion-input-range
-          name="range"
-          min="1"
-          max="5"
-          .modelValue="${2.3}"
-          unit="%"
-          step="0.1"
-          label="Input range"
-        ></lion-input-range>
-        <lion-checkbox-group
-          name="terms"
-          .validators="${[
-            new Required('', {
-              getMessage: () => `Please accept our terms.`,
-            }),
-          ]}"
-        >
-          <lion-checkbox
-            .choiceValue="${'true'}"
-            label="I blindly accept all terms and conditions"
-          ></lion-checkbox>
-        </lion-checkbox-group>
-        <lion-switch name="notifications" label="Notifications"></lion-switch>
-        <lion-input-stepper max="5" min="0" name="rsvp">
-          <label slot="label">RSVP</label>
-          <div slot="help-text">Max. 5 guests</div>
-        </lion-input-stepper>
-        <div class="buttons">
-          <lion-button-submit>Submit</lion-button-submit>
-          <lion-button-reset
-            @click="${ev =>
-              ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}"
-            >Reset</lion-button-reset
-          >
-        </div>
-      </form>
-    </lion-form>
-  `;
-};
-```