ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #519 from ing-bank/chore/storybook-demos

Browse source 
Chore/storybook demos
This commit is contained in:
Thomas Allmer 2020-01-23 18:32:40 +01:00 committed by GitHub
commit 804b136b3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 374 additions and 334 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.storybook/preview.js
View file

@ -29,7 +29,7 @@ async function run() {
showRoots: true,
storySort: sortEachDepth([
['Intro', 'Forms', 'Buttons', 'Overlays', 'Navigation', 'Localize', 'Icons', '...'],
['Intro', 'Features Overview', '...', 'System'],
['Intro', 'Features Overview', '...', 'Validation', 'System'],
['Overview', '...', '_internals'],
]),
},

2
packages/checkbox-group/README.md
View file

@ -8,7 +8,7 @@ You should use [lion-checkbox](../checkbox/)'s inside this element.
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-checkbox-group) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-checkbox-group--default-story) for a live demo and API documentation
## How to use

4
packages/checkbox-group/stories/index.stories.mdx
View file

@ -37,11 +37,11 @@ Its purpose is to provide a way for users to check **multiple** options amongst
</lion-checkbox-group>
```
> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form)'s serialization result.
> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
## Features
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset), it has all the features a fieldset has.
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
## How to use

2
packages/fieldset/README.md
View file

@ -6,7 +6,7 @@
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-fieldset) for a live demo and documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-fieldset-overview--page) for a live demo and documentation
## How to use

41
packages/fieldset/stories/overview.stories.mdx Normal file
View file

@ -0,0 +1,41 @@
import { Story, Meta, html } from '@open-wc/demoing-storybook';
import '@lion/input/lion-input.js';
import { localize } from '@lion/localize';
import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
import '../lion-fieldset.js';
import './helpers/demo-fieldset-child.js';
<Meta title="Forms/Fieldset/Overview" parameters={{ component: 'lion-fieldset' }} />
# Fieldset
`lion-fieldset` groups multiple input fields or other fieldsets together.
We have three specific fieldset implementations:
- [lion-form](?path=/docs/forms-form-overview--page)
- [lion-checkbox-group](?path=/docs/forms-checkbox-group--default-story)
- [lion-radio-group](?path=/docs/forms-radio-group--default-story)
```html
<lion-fieldset name="nameGroup" label="Name">
<lion-input name="FirstName" label="First Name"></lion-input>
<lion-input name="LastName" label="Last Name"></lion-input>
</lion-fieldset>
```
A native fieldset element should always have a legend-element for a11y purposes.
However, our fieldset element is not native and should not have a legend-element.
Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`.
## Features
- Easy retrieval of form data based on field names
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
- Can have [validate](?path=/docs/forms-validation-overview--page) on fieldset level and shows the validation feedback below the fieldset
- Can disable input fields on fieldset level
- Accessible out of the box
## Examples
For examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples--default-story).

7
packages/form-system/stories/10-intro.stories.mdx
View file

@ -6,7 +6,7 @@ The Form System allows you to create complex forms with various validations in a
## Features
- Built in [validate](?path=/docs/forms-system-validate-system) for error/warning/info/success
- Built in [validate](?path=/docs/forms-validation-overview--page) for error/warning/info/success
- Formatting of values
- Accessible
@ -15,11 +15,12 @@ For a more in depth description look into the [Form System Overview](?path=/docs
## Packages
| Package | Description |
| ---------------------------------------------------- | ---------------------------------- |
| ---------------------------------------------------- | ------------------------------------------------- |
| [checkbox](?path=/docs/forms-checkbox--default-story) | Checkbox form element |
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | Group of checkboxes |
| [field](?path=/docs/forms-field--default-story) | Base class for all inputs |
| [form](?path=/docs/forms-form--default-story) | Wrapper for multiple form elements |
| [fieldset](?path=/docs/forms-fieldset-overview--page) | Group for form inputs |
| [form](?path=/docs/forms-form-overview--page) | Wrapper for multiple form elements |
| [input](?path=/docs/forms-input--default-story) | Input element for strings |
| [input-amount](?path=/docs/forms-input-amount--default-story) | Input element for amounts |
| [input-date](?path=/docs/forms-input-date--default-story) | Input element for dates |

25
packages/validate/stories/02-ValidationExamples.stories.mdx → packages/form-system/stories/17-Validation-Examples.stories.mdx
View file

@ -1,6 +1,6 @@
import { Meta, Story, html } from '@open-wc/demoing-storybook';
/* eslint-disable import/no-extraneous-dependencies */
import { LionInput } from '@lion/input';
import { LionInput } from '@lion/input/index.js';
import '@lion/input-amount/lion-input-amount.js';
import '@lion/input-date/lion-input-date.js';
import '@lion/input-email/lion-input-email.js';
@ -23,12 +23,15 @@ import {
MinNumber,
Required,
Validator,
} from '../index.js';
} from '@lion/validate';
<Meta title="Forms/Validation Examples" parameters={{ component: 'lion-input' }}/>
<Meta title="Forms/Validation/Examples" parameters={{ component: 'lion-input' }}/>
## Required Validator
The required validator can be put onto every form field element and will make sure that element is not empty.
For an input that may mean that it is not an empty string while for a checkbox group it means at least one checkbox needs to be checked.
<Story name="Required Validator">
{html`
<lion-input .validators=${[new Required()]} label="Required"></lion-input>
@ -41,6 +44,8 @@ import {
## String Validators
Useful on input elements it allows to define how many characters can be entered.
<Story name="String Validators">
{html`
<lion-input
@ -89,9 +94,11 @@ import {
></lion-input>
```
## Number Validators
Number validations assume that it's modelValue is actually a number.
Therefore it may only be used on input that have an appropriate parser/formatter like the input-amount.
<Story name="Number Validators">
{html`
<lion-input-amount
@ -142,6 +149,8 @@ import {
## Date Validators
Date validators work with real javascript dates. Use them on input-date.
<Story name="Date Validators">
{() => {
const today = new Date();
@ -230,6 +239,9 @@ const tomorrow = new Date(year, month, day + 1);
## Validation Types
When defining your own component you can decide to allow for multiple types of validation.
By default only `error` is used however there are certainly use cases where warning or success messages make sense.
<Story name="Validation Types">
{() => {
try {
@ -343,6 +355,9 @@ const tomorrow = new Date(year, month, day + 1);
## Custom Validators
Here is an example how you can make your own validator and providing the error messages directly within.
You can even hard code localization in there if needed or you can use a localization system.
<Story name="Custom Validators">
{() => {
class MyValidator extends Validator {
@ -404,6 +419,8 @@ class MyValidator extends Validator {
## Override default messages
Oftern
<Story name="Override default messages">
{html`
<lion-input

44
packages/form-system/stories/20-System-Overview.stories.mdx
View file

@ -29,8 +29,8 @@ 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 offer:
- [formatting/parsing/serializing](?path=/docs/forms-system-formatting-and-parsing) of view values
- advanced [validation](?path=/docs/forms-system-validate-system) possibilities
- [formatting/parsing/serializing](?path=/docs/forms-system-formatting-and-parsing--parser) of view values
- advanced [validation](?path=/docs/forms-validation-overview--page) possibilities
- creation of advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
- provision of labels and help texts in an easy, declarative manner
- accessibility out of the box <!-- TODO: write how our form system manages to deliver accessible components with all challenges that shadow dom provide -->
@ -40,30 +40,30 @@ On top of this, they offer:
Platform field wrappers add all of the functionality described above to native form elements.
- [LionInput](?path=/docs/forms-input), a wrapper for `<input>`
- [LionTextarea](?path=/docs/forms-textarea), a wrapper for `<textarea>`
- [LionSelect](?path=/docs/forms-select), a wrapper for `<select>`
- [LionRadio](?path=/docs/forms-radio-group), a wrapper for `<input type="radio">`
- [LionCheckbox](?path=/docs/forms-checkbox-group), a wrapper for `<input type="checkbox">`
- [LionInputRange](?path=/docs/forms-input-range), a wrapper for `<input type="range">`
- [LionInput](?path=/docs/forms-input--default-story), a wrapper for `<input>`
- [LionTextarea](?path=/docs/forms-textarea--default-story), a wrapper for `<textarea>`
- [LionSelect](?path=/docs/forms-select--default-story), a wrapper for `<select>`
- [LionRadio](?path=/docs/forms-radio-group--default-story), a wrapper for `<input type="radio">`
- [LionCheckbox](?path=/docs/forms-checkbox-group--default-story), a wrapper for `<input type="checkbox">`
- [LionInputRange](?path=/docs/forms-input-range--default-story), a wrapper for `<input type="range">`
### Dedicated fields
Dedicated fields are less generic fields in a sense that they by default expect a certain type of
modelValue. This means that they have validators, parsers and formatters preconfigured.
- [`LionInputDate`](?path=/docs/forms-input-date)
- [`LionInputDatepicker`](?path=/docs/forms-input-datepicker)
- [`LionInputEmail`](?path=/docs/forms-input-email)
- [`LionInputAmount`](?path=/docs/forms-input-amount)
- [`LionInputIban`](?path=/docs/forms-input-iban)
- [`LionInputDate`](?path=/docs/forms-input-date--default-story)
- [`LionInputDatepicker`](?path=/docs/forms-input-datepicker--default-story)
- [`LionInputEmail`](?path=/docs/forms-input-email--default-story)
- [`LionInputAmount`](?path=/docs/forms-input-amount--default-story)
- [`LionInputIban`](?path=/docs/forms-input-iban--default-story)
### Custom fields
Instead of wrapping native elements, this category of fields contains custom built
form elements.
- [`LionSelectRich`](?path=/docs/forms-select-rich), an advanced (rich) version of `<select>`
- [`LionSelectRich`](?path=/docs/forms-select-rich--default-story), an advanced (rich) version of `<select>`
One could also think of components like:
@ -80,17 +80,17 @@ Fieldsets are groups of fields. They can be considered fields on their own as we
partly share the normalized api via `FormControlMixin`.
Fieldsets are at the base of:
- [`LionFieldset`](?path=/docs/forms-fieldset)
- [`LionForm`](?path=/docs/forms-form)
- [`LionRadioGroup`](?path=/docs/forms-radio-group)
- [`LionCheckboxGroup`](?path=/docs/forms-checkbox-group)
- [`LionFieldset`](?path=/docs/forms-fieldset-overview--page)
- [`LionForm`](?path=/docs/forms-form-overview--page)
- [`LionRadioGroup`](?path=/docs/forms-radio-group--default-story)
- [`LionCheckboxGroup`](?path=/docs/forms-checkbox-group--default-story)
## Other Resources
<!-- TODO: - [`FormControlMixin`] () -->
<!-- TODO: - [`LionField`] () -->
- [Model Value](?path=/docs/forms-system-modelvalue)
- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing)
- [Interaction states](?path=/docs/forms-system-interaction-states)
- [Validation System](?path=/docs/forms-system-validate-system)
- [Model Value](?path=/docs/forms-system-modelvalue--page)
- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing--parser)
- [Interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
- [Validation System](?path=/docs/forms-validation-overview--page)

2
packages/form-system/stories/25-System-ModelValue.stories.mdx
View file

@ -25,4 +25,4 @@ level, via:
> Internal/private concepts like viewValue, formattedValue, serializedValue are therefore not
> recommended as a means of interaction.
For more information about parsing and the Unparseable type, see [Formatting and Parsing](?path=/docs/forms-system-formatting-and-parsing)
For more information about parsing and the Unparseable type, see [Formatting and Parsing](?path=/docs/forms-system-formatting-and-parsing--parser)

4
packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
View file

@ -9,7 +9,7 @@ import './helper-wc/h-output.js';
# Creating a custom field
Custom fields can be created in just a few steps. All you need is an interaction element
(like for instance a slider, a listbox or a combobox) and connect it to the [Field](?path=/docs/forms-system-overview)
(like for instance a slider, a listbox or a combobox) and connect it to the [Field](?path=/docs/forms-system-overview--page)
functionality.
## Prerequisite: an interaction element
@ -25,7 +25,7 @@ it has a tabindex=“0” applied.
## Connecting the interaction element to the field
Now we want to integrate the slider in our form framework to enrich the user interface, get
validation support and get all the other [benefits of LionField](/?path=/docs/forms-system-overview).
validation support and get all the other [benefits of LionField](/?path=/docs/forms-system-overview--page).
We start of by creating a component `<lion-slider>` that extends from `LionField`.
Then we follow the steps below:

118
packages/fieldset/stories/index.stories.mdx → packages/form-system/stories/fieldset-examples.stories.mdx
View file

@ -2,20 +2,11 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook';
import '@lion/input/lion-input.js';
import { localize } from '@lion/localize';
import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
import '../lion-fieldset.js';
import './helpers/demo-fieldset-child.js';
import '@lion/fieldset/lion-fieldset.js';
<Meta title="Forms/Fieldset" parameters={{ component: 'lion-fieldset' }} />
<Meta title="Forms/Fieldset/Examples" parameters={{ component: 'lion-fieldset' }} />
# Fieldset
`lion-fieldset` groups multiple input fields or other fieldsets together.
We have three specific fieldset implementations:
- [lion-form](?path=/docs/forms-form)
- [lion-checkbox-group](?path=/docs/forms-checkbox-group)
- [lion-radio-group](?path=/docs/forms-radio-group)
# Fieldset Examples
<Story name="Default">
{html`
@ -25,34 +16,19 @@ We have three specific fieldset implementations:
}
</style>
<lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="FirstName" label="First Name"></demo-fieldset-child>
<demo-fieldset-child name="LastName" label="Last Name"></demo-fieldset-child>
<lion-input name="FirstName" label="First Name"></lion-input>
<lion-input name="LastName" label="Last Name"></lion-input>
</lion-fieldset>
`}
</Story>
```html
<lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="FirstName" label="First Name"></demo-fieldset-child>
<demo-fieldset-child name="LastName" label="Last Name"></demo-fieldset-child>
<lion-input name="FirstName" label="First Name"></lion-input>
<lion-input name="LastName" label="Last Name"></lion-input>
</lion-fieldset>
```
A native fieldset element should always have a legend-element for a11y purposes.
However, our fieldset element is not native and should not have a legend-element.
Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`.
## Features
- Easy retrieval of form data based on field names
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
- Can have [validate](?path=/docs/forms-system-validate-system) on fieldset level and shows the validation feedback below the fieldset
- Can disable input fields on fieldset level
- Accessible out of the box
## Examples
### With Data
The fieldset's modelValue is an `Object` containing properties where the key is the `name` attribute of the field,
@ -61,8 +37,8 @@ and the value is the `modelValue` of the field.
<Story name="Data">
{html`
<lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
<demo-fieldset-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
Log to Action Logger
</button>
@ -72,8 +48,8 @@ and the value is the `modelValue` of the field.
```html
<lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
<demo-fieldset-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
Log to Action Logger
</button>
@ -93,16 +69,16 @@ When enabling a fieldset, fields that have disabled explicitly set will stay dis
}
return html`
<lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
<demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
<demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
<lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<lion-fieldset name="nameGroup2" label="Name">
<demo-fieldset-child
<lion-input
name="FirstName2"
label="First Name"
.modelValue=${'Foo'}
disabled
></demo-fieldset-child>
<demo-fieldset-child name="LastName2" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
></lion-input>
<lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset>
</lion-fieldset>
<button @click=${toggleDisabled}>
@ -121,16 +97,16 @@ function toggleDisabled() {
```html
<lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
<demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
<demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
<lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<lion-fieldset name="nameGroup2" label="Name">
<demo-fieldset-child
<lion-input
name="FirstName2"
label="First Name"
.modelValue=${'Foo'}
disabled
></demo-fieldset-child>
<demo-fieldset-child name="LastName2" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
></lion-input>
<lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset>
</lion-fieldset>
<button @click=${toggleDisabled}>
@ -147,13 +123,13 @@ Fieldsets can also be nested. The level of nesting will correspond one to one wi
<lion-fieldset>
<div slot="label">Personal data</div>
<lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
<demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
<lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset>
<lion-fieldset name="location" label="Location">
<demo-fieldset-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-fieldset-child>
<lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
</lion-fieldset>
<demo-fieldset-child name="age" label="Age" .modelValue=${21}></demo-fieldset-child>
<lion-input name="age" label="Age" .modelValue=${21}></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
Log everything to Action Logger
</button>
@ -171,13 +147,13 @@ Fieldsets can also be nested. The level of nesting will correspond one to one wi
<lion-fieldset>
<div slot="label">Personal data</div>
<lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
<demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
<lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset>
<lion-fieldset name="location" label="Location">
<demo-fieldset-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-fieldset-child>
<lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
</lion-fieldset>
<demo-fieldset-child name="age" label="Age" .modelValue=${21}></demo-fieldset-child>
<lion-input name="age" label="Age" .modelValue=${21}></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
Log everything to Action Logger
</button>
@ -215,7 +191,7 @@ Try it by typing something in the input, then removing it.
};
return html`
<lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
<demo-fieldset-child name="input1" label="Label"></demo-fieldset-child>
<lion-input name="input1" label="Label"></lion-input>
</lion-fieldset>
`;
}}
@ -243,7 +219,7 @@ const DemoValidator = class extends Validator {
```html
<lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
<demo-fieldset-child name="input1" label="Label"></demo-fieldset-child>
<lion-input name="input1" label="Label"></lion-input>
</lion-fieldset>
```
@ -267,18 +243,18 @@ You can have your fieldset validator take into consideration multiple fields.
};
return html`
<lion-fieldset .validators="${[new IsCatsAndDogs()]}">
<demo-fieldset-child
<lion-input
label="An all time YouTube favorite"
name="input1"
help-text="cats"
>
</demo-fieldset-child>
<demo-fieldset-child
</lion-input>
<lion-input
label="Another all time YouTube favorite"
name="input2"
help-text="dogs"
>
</demo-fieldset-child>
</lion-input>
</lion-fieldset>
`;
}}
@ -303,18 +279,18 @@ const IsCatsAndDogs = class extends Validator {
```html
<lion-fieldset .validators="${[new IsCatsAndDogs()]}">
<demo-fieldset-child
<lion-input
label="An all time YouTube favorite"
name="input1"
help-text="cats"
>
</demo-fieldset-child>
<demo-fieldset-child
</lion-input>
<lion-input
label="Another all time YouTube favorite"
name="input2"
help-text="dogs"
>
</demo-fieldset-child>
</lion-input>
</lion-fieldset>
```
@ -352,20 +328,20 @@ You can have your fieldset validator take into accounts multiple nested fieldset
<lion-fieldset name="outer" .validators=${[new IsCatsDogs()]}>
<lion-fieldset name="inner1">
<label slot="label">Fieldset no. 1</label>
<demo-fieldset-child
<lion-input
label="Write 'cats' here"
name="input1"
>
</demo-fieldset-child>
</lion-input>
</lion-fieldset>
<hr />
<lion-fieldset name="inner2">
<label slot="label">Fieldset no. 2</label>
<demo-fieldset-child
<lion-input
label="Write 'dogs' here"
name="input1"
>
</demo-fieldset-child>
</lion-input>
</lion-fieldset>
</lion-fieldset>
`;
@ -398,20 +374,20 @@ const IsCatsDogs = class extends Validator {
<lion-fieldset name="outer" .validators="${[new IsCatsDogs()]}">
<lion-fieldset name="inner1">
<label slot="label">Fieldset no. 1</label>
<demo-fieldset-child
<lion-input
label="Write 'cats' here"
name="input1"
>
</demo-fieldset-child>
</lion-input>
</lion-fieldset>
<hr />
<lion-fieldset name="inner2">
<label slot="label">Fieldset no. 2</label>
<demo-fieldset-child
<lion-input
label="Write 'dogs' here"
name="input1"
>
</demo-fieldset-child>
</lion-input>
</lion-fieldset>
</lion-fieldset>
```

59
packages/form/stories/index.stories.mdx → packages/form-system/stories/form-examples.stories.mdx
View file

@ -2,15 +2,13 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { Required, MaxLength, loadDefaultFeedbackMessages } from '@lion/validate';
import '@lion/fieldset/lion-fieldset.js';
import '@lion/input/lion-input.js';
import '../lion-form.js';
import './helpers/demo-form-child.js';
import '@lion/form/lion-form.js';
<Meta title="Forms/Form" parameters={{ component: 'lion-form' }} />
<Meta title="Forms/Form/Examples" parameters={{ component: 'lion-form' }} />
# Form
# Form Examples
`lion-form` is a webcomponent that enhances the functionality of the native `form` component.
It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview).
A form can have multiple nested fieldsets.
<Story name="Default">
{html`
@ -18,14 +16,14 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
<form>
<lion-fieldset label="Personal data" name="personalData">
<lion-fieldset label="Full Name" name="fullName">
<demo-form-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-form-child>
<demo-form-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-form-child>
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset>
<lion-fieldset label="Location" name="location">
<demo-form-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-form-child>
<demo-form-child name="city" label="City" .modelValue=${'Amsterdam'}></demo-form-child>
<lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
<lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
</lion-fieldset>
<demo-form-child name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></demo-form-child>
<lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
</lion-fieldset>
<button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
Log to Action Logger
@ -40,14 +38,14 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
<form>
<lion-fieldset label="Personal data" name="personalData">
<lion-fieldset label="Full Name" name="fullName">
<demo-form-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-form-child>
<demo-form-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-form-child>
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset>
<lion-fieldset label="Location" name="location">
<demo-form-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-form-child>
<demo-form-child name="city" label="City" .modelValue=${'Amsterdam'}></demo-form-child>
<lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
<lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
</lion-fieldset>
<demo-form-child name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></demo-form-child>
<lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
</lion-fieldset>
<button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
Log to Action Logger
@ -56,19 +54,6 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
</lion-form>
```
## Features
- Data synchronization with models
- Easy retrieval of form data based on field names
- Advanced validation possibilities
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
- Registration mechanism for [form controls](?path=/docs/forms-system-overview)
- Accessible out of the box
For more information about fields that are designed for lion-form, please read
[Forms](?path=/docs/forms-form).
## Form Submit / Reset
You can control whether a form gets submitted based on validation states.
@ -88,18 +73,18 @@ Same thing goes for resetting the inputs to the original state.
<lion-form id="form2" @submit="${submit}"
><form>
<lion-fieldset label="Name" name="name">
<demo-form-child
<lion-input
name="firstName"
label="First Name"
.validators=${[new Required(), new MaxLength(15)]}
>
</demo-form-child>
<demo-form-child
</lion-input>
<lion-input
name="lastName"
label="Last Name"
.validators=${[new Required(), new MaxLength(15)]}
>
</demo-form-child>
</lion-input>
</lion-fieldset>
<button type="submit">Submit & Reset (if successfully submitted)</button>
<button type="button" @click=${() => document.querySelector('#form2').resetGroup()}>
@ -131,18 +116,18 @@ const submit = () => {
<lion-form id="form2" @submit="${submit}">
<form>
<lion-fieldset label="Name" name="name">
<demo-form-child
<lion-input
name="firstName"
label="First Name"
.validators=${[new Required(), new MaxLength(15)]}
>
</demo-form-child>
<demo-form-child
</lion-input>
<lion-input
name="lastName"
label="Last Name"
.validators=${[new Required(), new MaxLength(15)]}
>
</demo-form-child>
</lion-input>
</lion-fieldset>
<button type="submit">Submit & Reset (if successfully submitted)</button>
<button type="button" @click=${() => console.log(document.querySelector('#form2'))}>

2
packages/form/README.md
View file

@ -6,7 +6,7 @@
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-form) for a live demo and documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-form-overview--page) for a live demo and documentation
## How to use

13
packages/form/stories/helpers/demo-form-child.js
View file

@ -1,13 +0,0 @@
import { LionField } from '@lion/field';
customElements.define(
'demo-form-child',
class extends LionField {
get slots() {
return {
...super.slots,
input: () => document.createElement('input'),
};
}
},
);

33
packages/form/stories/overview.stories.mdx Normal file
View file

@ -0,0 +1,33 @@
import { Story, Meta, html } from '@open-wc/demoing-storybook';
<Meta title="Forms/Form/Overview" />
# Form
`lion-form` is a webcomponent that enhances the functionality of the native `form` component.
It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview--page).
```html
<lion-form id="form">
<form>
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
</form>
</lion-form>
```
## Features
- Data synchronization with models
- Easy retrieval of form data based on field names
- Advanced validation possibilities
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
- Registration mechanism for [form controls](?path=/docs/forms-system-overview--page)
- Accessible out of the box
For more information about fields that are designed for lion-form, please read
[Forms](?path=/docs/forms-system-overview--page).
## Examples
For examples please look at [Form Examples](?path=/docs/forms-form-examples--default-story).

2
packages/input-amount/README.md
View file

@ -6,7 +6,7 @@
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-amount) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-amount--default-story) for a live demo and API documentation
## How to use

4
packages/input-amount/stories/index.stories.mdx
View file

@ -31,13 +31,13 @@ If there are no valid characters in the input whatsoever, it will provide an err
## Features
- Based on [lion-input](?path=/docs/forms-system-overview)
- Based on [lion-input](?path=/docs/forms-system-overview--page)
- Makes use of [formatNumber](?path=/docs/localize-numbers) for formatting and parsing.
- Option to show currency as a suffix
- Option to override locale to change the formatting and parsing
- Option to provide additional format options overrides
- Default label in different languages
- Can make use of number specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
- Can make use of number specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
- IsNumber (default)
- MinNumber
- MaxNumber

2
packages/input-date/README.md
View file

@ -6,7 +6,7 @@
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-date) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-date--default-story) for a live demo and API documentation
## How to use

6
packages/input-date/stories/index.stories.mdx
View file

@ -25,11 +25,11 @@ import '../lion-input-date.js';
## Features
- Based on [lion-input](?path=/docs/forms-input)
- Makes use of [formatDate](?path=/docs/localize-dates) for formatting and parsing.
- Based on [lion-input](?path=/docs/forms-input--default-story)
- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
- Option to override locale to change the formatting and parsing
- Default label in different languages
- Can make use of date specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
- IsDate (default)
- MinDate
- MaxDate

2
packages/input-datepicker/README.md
View file

@ -5,7 +5,7 @@ For an input field with a big range, such as `birthday-input`, a datepicker is n
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-datepicker) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-datepicker--default-story) for a live demo and API documentation
## How to use

4
packages/input-datepicker/stories/index.stories.mdx
View file

@ -30,9 +30,9 @@ We encourage using the standard [lion-input-date](?path=/docs/form-component-inp
- Input field with a datepicker to help to choose a date
- Based on [lion-input-date](?path=/docs/form-component-input-date)
- Makes use of [lion-calendar](?path=/docs/calendar-standalone) inside the datepicker
- Makes use of [formatDate](?path=/docs/localize-dates) for formatting and parsing.
- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
- Option to overwrite locale to change the formatting and parsing
- Can make use of date specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
- IsDate (default)
- MinDate
- MaxDate

2
packages/input-email/README.md
View file

@ -6,7 +6,7 @@
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-email) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-email--default-story) for a live demo and API documentation
## How to use

4
packages/input-email/stories/index.stories.mdx
View file

@ -24,8 +24,8 @@ import '../lion-input-email.js';
## Features
- Based on [lion-input](?path=/docs/forms-input)
- Makes use of email [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
- Based on [lion-input](?path=/docs/forms-input--default-story)
- Makes use of email [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
- IsEmail (default)
## How to use

2
packages/input-iban/README.md
View file

@ -6,7 +6,7 @@
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-iban) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-iban--default-story) for a live demo and API documentation
## How to use

4
packages/input-iban/stories/index.stories.mdx
View file

@ -26,9 +26,9 @@ Its purpose is to provide a way for users to fill in an IBAN (International Bank
## Features
- Based on [lion-input](?path=/docs/forms-input)
- Based on [lion-input](?path=/docs/forms-input--default-story)
- Default label in different languages
- Makes use of IBAN specific [validate](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
- Makes use of IBAN specific [validate](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
- IsIBAN (default)
- IsCountryIBAN
- Parses IBANs automatically

2
packages/input-range/README.md
View file

@ -7,7 +7,7 @@ Its purpose is to provide a way for users to select one value from a range of va
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-range) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-range--default-story) for a live demo and API documentation
## How to use

2
packages/input-range/stories/index.stories.mdx
View file

@ -26,7 +26,7 @@ Its purpose is to provide a way for users to select one value from a range of va
## Features
- Based on [lion-input](?path=/docs/forms-input).
- Based on [lion-input](?path=/docs/forms-input--default-story).
- Shows `modelValue` and `unit` above the range input.
- Shows `min` and `max` value after the range input.
- Can hide the `min` and `max` value via `no-min-max-labels`.

2
packages/input/README.md
View file

@ -6,7 +6,7 @@
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input--default-story) for a live demo and API documentation
## How to use

6
packages/input/stories/index.stories.mdx
View file

@ -22,7 +22,7 @@ import '../lion-input.js';
## Features
- Based on [field](?path=/docs/forms-system-overview)
- Based on [field](?path=/docs/forms-system-overview--page)
- Extra visual elements can be added via `slots`
- **label**: can also be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
For example add an `sr-only` class to the label to make it visually hidden.
@ -33,7 +33,7 @@ import '../lion-input.js';
- **before**: does not have an active use case yet, but the option is in place.
- **after**: can be used to show a currency or percentage.
- Delegates attributes like `type`, `disabled`, `placeholder` and `read-only` to the native input.
- Can make us of [validation](?path=/docs/forms-system-validate-system)
- Can make us of [validation](?path=/docs/forms-validation-overview--page)
## How to use
@ -195,7 +195,7 @@ In these cases a button with an icon is used.
## Using validation
The input can be used with [validation](?path=/docs/forms-system-validate-system).
The input can be used with [validation](?path=/docs/forms-validation-overview--page).
On certain conditions, a feedback message can be shown if the input value is invalid.
You can change the locale with the buttons below the field.

4
packages/intros/stories/lion-web-components.stories.mdx
View file

@ -40,9 +40,9 @@ If you need more details these are the actual npm packages we are publishing
| Package | Version | Description |
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
| **-- Forms --** | | |
| [form](?path=/docs/forms-form--default-story) | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements |
| [form](?path=/docs/forms-form-overview--page) | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements |
| [field](?path=/docs/forms-system-overview--page) | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field) | Base Class for all inputs |
| [fieldset](?path=/docs/forms-fieldset--default-story) | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs |
| [fieldset](?path=/docs/forms-fieldset-overview--page) | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs |
| [validate](?path=/docs/form-system-validate-system--page) | [![validate](https://img.shields.io/npm/v/@lion/validate.svg)](https://www.npmjs.com/package/@lion/validate) | Validation for form components |
| [checkbox](?path=/docs/forms-checkbox--default-story) | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox) | Checkbox form element |
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes |

2
packages/localize/stories/10-intro.stories.mdx
View file

@ -23,7 +23,7 @@ Further examples can be seen at [Features Overview Demo](?path=/docs/localize-fe
| --------------------------------------------------------------------- | --------------------------------------------- |
| [Translate Text](?path=/docs/localize-translate-text--function-story) | Load and translate text in multiple languages |
| [Format Numbers](?path=/docs/localize-numbers--formatting) | Format numbers in multiple languages |
| [Format Dates](?path=/docs/localize-dates--formatting) | Format dates in multiple languages |
| [Format Dates](?path=/docs/localize-dates--formatting)--formatting) | Format dates in multiple languages |
## How to use

4
packages/option/stories/index.stories.mdx
View file

@ -6,7 +6,7 @@ import '../lion-option.js';
# Option
`lion-option` is a selectable within a [lion-select-rich](?path=/docs/forms-select-rich)
`lion-option` is a selectable within a [lion-select-rich](?path=/docs/forms-select-rich--default-story)
<Story name="Default">
{html`
@ -117,4 +117,4 @@ This is identical to `lion-checkbox`, `lion-radio` etc.
This also explains the (intended) accessibility violation when viewing these demos in Canvas mode.
For more details on usage, please see [lion-select-rich](?path=/docs/forms-select-rich).
For more details on usage, please see [lion-select-rich](?path=/docs/forms-select-rich--default-story).

78
packages/overlays/stories/20-index.stories.mdx
View file

@ -6,11 +6,11 @@ import {
withModalDialogConfig,
} from '../index.js';
import './lion-demo-overlay.js';
import './demo-overlay-system.js';
import './applyDemoOverlayStyles.js';1
import { ref as r } from './directives/ref.js';
<Meta title="Overlays/System/Overview" parameters={{ component: 'lion-demo-overlay' }} />
<Meta title="Overlays/System/Overview" parameters={{ component: 'demo-overlay-system' }} />
# Overlay System
@ -23,9 +23,9 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
<Story name="default">
{html`
<lion-demo-overlay>
<demo-overlay-system>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -33,14 +33,14 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay>
<demo-overlay-system>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -48,7 +48,7 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## Features
@ -132,9 +132,9 @@ _defineOverlayConfig() {
or declaratively in your template with the `.config` property
```html
<lion-demo-overlay .config=${{ ...withModalDialogConfig() }}>
<demo-overlay-system .config=${{ ...withModalDialogConfig() }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -142,7 +142,7 @@ or declaratively in your template with the `.config` property
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
### Responsive switching
@ -157,7 +157,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
<Story name="Responsive switching">
{html`
<lion-demo-overlay
<demo-overlay-system
.config=${{ ...withBottomSheetConfig() }}
@before-opened=${e => {
if (window.innerWidth >= 600) {
@ -176,12 +176,12 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay
<demo-overlay-system
.config=${{ ...withBottomSheetConfig() }}
@before-opened=${e => {
if (window.innerWidth >= 600) {
@ -192,7 +192,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
}}
>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -200,7 +200,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
Alternative ways to do it is by setting the event listener manually on the `OverlayController` instance.
@ -262,7 +262,7 @@ Below is another demo where you can toggle between configurations using buttons.
Dropdown
</button>
</div>
<lion-demo-overlay id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
<demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -272,7 +272,7 @@ Below is another demo where you can toggle between configurations using buttons.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
@ -293,9 +293,9 @@ Change config to:
Dropdown
</button>
</div>
<lion-demo-overlay id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
<demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -303,7 +303,7 @@ Change config to:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## Opened state
@ -326,7 +326,7 @@ This can be useful e.g. if somewhere in your application you need to rely on thi
}
return html`
appState.opened: <span #openedState=${r(refs)}>${appState.opened}</span>
<lion-demo-overlay .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
<demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
<button slot="invoker">Overlay</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -336,7 +336,7 @@ This can be useful e.g. if somewhere in your application you need to rely on thi
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`;
}}
</Story>
@ -357,9 +357,9 @@ function onOpenClosed(ev) {
<div>
appState.opened: ${openedStateNode}
</div>
<lion-demo-overlay .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
<demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
<button slot="invoker">Overlay</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -367,7 +367,7 @@ function onOpenClosed(ev) {
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## Intercepting open/close
@ -391,13 +391,13 @@ the `before-close` or `before-open` events.
blockOverlay = !blockOverlay;
refs.statusButton.textContent = blockOverlay;
}}">${blockOverlay}</button>
<lion-demo-overlay #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
<demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
<button slot="invoker" @click=${() => console.log('blockOverlay', blockOverlay, 'opened', refs.overlay.opened)}>Overlay</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button @click=${() => refs.overlay.opened = false}>⨯</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`;
}}
</Story>
@ -413,13 +413,13 @@ the `before-close` or `before-open` events.
```
```html
<lion-demo-overlay #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
<demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
<button slot="invoker">Overlay</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button @click=${() => refs.overlay.opened = false}>⨯</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
@ -495,7 +495,7 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
<Story name="OverlaysManager">
{html`
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -508,8 +508,8 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
<button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
</div>
</div>
</lion-demo-overlay>
<lion-demo-overlay id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
</demo-overlay-system>
<demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
<div slot="content" class="demo-overlay demo-overlay--second">
Hello! You can close this notification here:
<button
@ -518,14 +518,14 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content">
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -536,9 +536,9 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
<button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
</div>
</div>
</lion-demo-overlay>
</demo-overlay-system>
<lion-demo-overlay id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
<demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
<div slot="content" class="demo-overlay demo-overlay--second">
Hello! You can close this notification here:
<button
@ -547,5 +547,5 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```

104
packages/overlays/stories/40-system-configuration.stories.mdx
View file

@ -1,9 +1,9 @@
import { Story, Meta, html } from '@open-wc/demoing-storybook';
import './lion-demo-overlay.js';
import './demo-overlay-system.js';
import './applyDemoOverlayStyles.js';
<Meta title="Overlays/System/Configuration" parameters={{ component: 'lion-demo-overlay' }} />
<Meta title="Overlays/System/Configuration" parameters={{ component: 'demo-overlay-system' }} />
# Overlay System - Configuration
@ -21,7 +21,7 @@ or in the `global-overlays` container at the bottom of the `<body>`.
Local:
<Story name="placementMode: local">
{html`
<lion-demo-overlay .config=${{ placementMode: 'local' }}>
<demo-overlay-system .config=${{ placementMode: 'local' }}>
<button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -32,12 +32,12 @@ Local:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ placementMode: 'local' }}>
<demo-overlay-system .config=${{ placementMode: 'local' }}>
<button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -48,13 +48,13 @@ Local:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
Global:
<Story name="placementMode: global">
{html`
<lion-demo-overlay .config=${{ placementMode: 'global' }}>
<demo-overlay-system .config=${{ placementMode: 'global' }}>
<button slot="invoker">Click me to open the global overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -65,12 +65,12 @@ Global:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ placementMode: 'global' }}>
<demo-overlay-system .config=${{ placementMode: 'global' }}>
<button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -81,7 +81,7 @@ Global:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## trapsKeyboardFocus
@ -95,7 +95,7 @@ You use the feature on any type of overlay.
<Story name="trapsKeyboardFocus">
{html`
<lion-demo-overlay .config=${{ trapsKeyboardFocus: true }}>
<demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
<div><a href="#">A focusable anchor</a></div>
@ -108,12 +108,12 @@ You use the feature on any type of overlay.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ trapsKeyboardFocus: true }}>
<demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
<div><a href="#">A focusable anchor</a></div>
@ -126,7 +126,7 @@ You use the feature on any type of overlay.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## hidesOnEsc
@ -137,7 +137,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
<Story name="hidesOnEsc">
{html`
<lion-demo-overlay .config=${{ hidesOnEsc: true }}>
<demo-overlay-system .config=${{ hidesOnEsc: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -148,12 +148,12 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ hidesOnEsc: true }}>
<demo-overlay-system .config=${{ hidesOnEsc: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -164,7 +164,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## hidesOnOutsideClick
@ -173,7 +173,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
<Story name="hidesOnOutsideClick">
{html`
<lion-demo-overlay .config=${{ hidesOnOutsideClick: true }}>
<demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -184,12 +184,12 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ hidesOnOutsideClick: true }}>
<demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -200,7 +200,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## elementToFocusAfterHide
@ -211,7 +211,7 @@ In the example, we focus the body instead of the `invokerNode`.
<Story name="elementToFocusAfterHide">
{html`
<lion-demo-overlay .config=${{ elementToFocusAfterHide: document.body }}>
<demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -222,12 +222,12 @@ In the example, we focus the body instead of the `invokerNode`.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ elementToFocusAfterHide: document.body }}>
<demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -238,7 +238,7 @@ In the example, we focus the body instead of the `invokerNode`.
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## hasBackdrop
@ -258,7 +258,7 @@ This currently only supports CSS Animations, because it relies on the `animation
<Story name="hasBackdrop">
{html`
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -269,12 +269,12 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -285,7 +285,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## isBlocking
@ -305,13 +305,13 @@ This currently only supports CSS Animations, because it relies on the `animation
<Story name="isBlocking">
{html`
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
<div>
<lion-demo-overlay .config=${{ hasBackdrop: true, isBlocking: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
<button slot="invoker">Click me to open another overlay which is blocking</button>
<div slot="content" class="demo-overlay demo-overlay--second">
<div slot="content" class="demo-overlay demo-overlay--blocking">
Hello! You can close this notification here:
<button
class="close-button"
@ -320,7 +320,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
</div>
Hello! You can close this notification here:
<button
@ -330,18 +330,18 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ hasBackdrop: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
<div>
<lion-demo-overlay .config=${{ hasBackdrop: true, isBlocking: true }}>
<demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
<button slot="invoker">Click me to open another overlay which is blocking</button>
<div slot="content" class="demo-overlay demo-overlay--second">
<div slot="content" class="demo-overlay demo-overlay--blocking">
Hello! You can close this notification here:
<button
class="close-button"
@ -350,7 +350,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
</div>
Hello! You can close this notification here:
<button
@ -360,7 +360,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
This example shows nested overlays, but they don't have to be. For example, they could be siblings, or completely unrelated.
@ -372,7 +372,7 @@ Boolean property. When true, prevents scrolling content that is outside of the `
<Story name="preventsScroll">
{html`
<lion-demo-overlay .config=${{ preventsScroll: true }}>
<demo-overlay-system .config=${{ preventsScroll: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -383,12 +383,12 @@ Boolean property. When true, prevents scrolling content that is outside of the `
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ preventsScroll: true }}>
<demo-overlay-system .config=${{ preventsScroll: true }}>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -399,7 +399,7 @@ Boolean property. When true, prevents scrolling content that is outside of the `
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
## viewportConfig
@ -420,7 +420,7 @@ Options:
<Story name="viewportConfig">
{html`
<lion-demo-overlay .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
<demo-overlay-system .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
<button slot="invoker">Click me to open the overlay in the top left corner!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -431,12 +431,12 @@ Options:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```html
<lion-demo-overlay .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
<demo-overlay-system .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
<button slot="invoker">Click me to open the overlay in the top left corner!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
@ -447,7 +447,7 @@ Options:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
@ -471,7 +471,7 @@ Here's a succinct overview of some often used popper properties:
<Story name="popperConfig">
{html`
<lion-demo-overlay .config=${{
<demo-overlay-system .config=${{
placementMode: 'local',
popperConfig: {
/* Placement of content node, relative to invoker node */
@ -514,12 +514,12 @@ Here's a succinct overview of some often used popper properties:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
`}
</Story>
```js
<lion-demo-overlay .config=${{
<demo-overlay-system .config=${{
placementMode: 'local',
popperConfig: {
/* Placement of content node, relative to invoker node */
@ -562,7 +562,7 @@ Here's a succinct overview of some often used popper properties:
⨯
</button>
</div>
</lion-demo-overlay>
</demo-overlay-system>
```
> Note: popperConfig reflects <a href="https://popper.js.org/popper-documentation.html" target="_blank">Popper.js API</a>

2
packages/overlays/stories/applyDemoOverlayStyles.js
View file

@ -7,7 +7,7 @@ const applyDemoOverlayStyles = () => {
padding: 10px;
}
.demo-overlay--second {
.demo-overlay--blocking {
background-color: pink;
}
`;

4
packages/overlays/stories/lion-demo-overlay.js → packages/overlays/stories/demo-overlay-system.js
View file

@ -1,7 +1,7 @@
import { html, LitElement } from '@lion/core';
import { OverlayMixin } from '../src/OverlayMixin.js';
class LionDemoOverlay extends OverlayMixin(LitElement) {
class DemoOverlaySystem extends OverlayMixin(LitElement) {
_defineOverlayConfig() {
return {
placementMode: 'global',
@ -35,4 +35,4 @@ class LionDemoOverlay extends OverlayMixin(LitElement) {
`;
}
}
customElements.define('lion-demo-overlay', LionDemoOverlay);
customElements.define('demo-overlay-system', DemoOverlaySystem);

2
packages/radio-group/README.md
View file

@ -8,7 +8,7 @@ You should use [lion-radio](../radio/)'s inside this element.
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-radio-group) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-radio-group--default-story) for a live demo and API documentation
## How to use

6
packages/radio-group/stories/index.stories.mdx
View file

@ -27,12 +27,12 @@ You should use `<lion-radio>`s inside this element.
</lion-radio-group>
```
- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form)'s serialization result.
- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select) instead
- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--default-story) instead
## Features
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset), it has all the features a fieldset has.
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
- Get or set the checked value of the group:
- modelValue (default) - `checkedValue()`

2
packages/select/README.md
View file

@ -6,7 +6,7 @@
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-select) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-select--default-story) for a live demo and API documentation
## How to use

4
packages/switch/stories/index.stories.mdx
View file

@ -80,7 +80,7 @@ Simple example that illustrates where validation feedback will be displayed.
id="newsletterCheck"
name="newsletterCheck"
label="Subscribe to newsletter"
.validators="${[new IsTrue()]}"
.validators="${[new IsTrue(null, {type: 'info'})]}"
></lion-switch>
`;
}}
@ -108,6 +108,6 @@ const IsTrue = class extends Validator {
id="newsletterCheck"
name="newsletterCheck"
label="Subscribe to newsletter"
.validators="${[new IsTrue()]}"
.validators="${[new IsTrue(null, {type: 'info'})]}"
></lion-switch>
```

2
packages/textarea/README.md
View file

@ -7,7 +7,7 @@ Its purpose is to provide a way for users to write text that is multiple lines l
## Live Demo/Documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-textarea) for a live demo and API documentation
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-textarea--default-story) for a live demo and API documentation
## How to use

4
packages/validate/stories/01-ValidateSystemOverview.stories.mdx → packages/validate/stories/Overview.stories.mdx
View file

@ -1,6 +1,6 @@
import { Meta } from '@open-wc/demoing-storybook';
<Meta title="Forms/System/Validate System" />
<Meta title="Forms/Validation/Overview" />
# Validation
@ -19,7 +19,7 @@ We could therefore say validation happens 'realtime'. This is aligned with the p
Although validation happens realtime under the hood, displaying validity feedback in realtime may
not always lead to the desired User Experience.
Together with [interaction states](?path=/docs/form-system-interaction-states--interaction-states),
Together with [interaction states](?path=/docs/forms-system-interaction-states--interaction-states),
validity states can determine whether a validation message should be shown along the input field.
## Validators