diff --git a/packages/fieldset/stories/overview.stories.mdx b/packages/fieldset/stories/overview.stories.mdx new file mode 100644 index 000000000..912220f9a --- /dev/null +++ b/packages/fieldset/stories/overview.stories.mdx @@ -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'; + + + +# 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) +- [lion-radio-group](?path=/docs/forms-radio-group) + +```html + + + + +``` + +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 + +For examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples--default-story). diff --git a/packages/fieldset/stories/index.stories.mdx b/packages/form-system/stories/fieldset-examples.stories.mdx similarity index 67% rename from packages/fieldset/stories/index.stories.mdx rename to packages/form-system/stories/fieldset-examples.stories.mdx index bbe60b0c1..00586fa41 100644 --- a/packages/fieldset/stories/index.stories.mdx +++ b/packages/form-system/stories/fieldset-examples.stories.mdx @@ -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'; - + -# 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 {html` @@ -25,34 +16,19 @@ We have three specific fieldset implementations: } - - + + `} ```html - - + + ``` -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. {html` - - + + @@ -72,8 +48,8 @@ and the value is the `modelValue` of the field. ```html - - + + @@ -93,16 +69,16 @@ When enabling a fieldset, fields that have disabled explicitly set will stay dis } return html` - - + + - - + > + @@ -171,13 +147,13 @@ Fieldsets can also be nested. The level of nesting will correspond one to one wi
Personal data
- - + + - + - + @@ -215,7 +191,7 @@ Try it by typing something in the input, then removing it. }; return html` - + `; }} @@ -243,7 +219,7 @@ const DemoValidator = class extends Validator { ```html - + ``` @@ -267,18 +243,18 @@ You can have your fieldset validator take into consideration multiple fields. }; return html` - - - + - + `; }} @@ -303,18 +279,18 @@ const IsCatsAndDogs = class extends Validator { ```html - - - + - + ``` @@ -352,20 +328,20 @@ You can have your fieldset validator take into accounts multiple nested fieldset - - +
- - + `; @@ -398,20 +374,20 @@ const IsCatsDogs = class extends Validator { - - +
- - + ``` diff --git a/packages/form/stories/index.stories.mdx b/packages/form-system/stories/form-examples.stories.mdx similarity index 63% rename from packages/form/stories/index.stories.mdx rename to packages/form-system/stories/form-examples.stories.mdx index 7db65d4f1..1cd2ceac4 100644 --- a/packages/form/stories/index.stories.mdx +++ b/packages/form-system/stories/form-examples.stories.mdx @@ -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'; - + -# 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. {html` @@ -18,14 +16,14 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
- - + + - - + + - +