From 3a0c71e6aaea23f75f709130df086cd117525edc Mon Sep 17 00:00:00 2001 From: qa46hx Date: Thu, 23 Jan 2020 15:48:52 +0100 Subject: [PATCH 1/6] chore(overlays): improve overlay-system storybook demo --- .../overlays/stories/20-index.stories.mdx | 90 +++++++-------- .../40-system-configuration.stories.mdx | 104 +++++++++--------- .../stories/applyDemoOverlayStyles.js | 2 +- ...demo-overlay.js => demo-overlay-system.js} | 4 +- 4 files changed, 100 insertions(+), 100 deletions(-) rename packages/overlays/stories/{lion-demo-overlay.js => demo-overlay-system.js} (86%) diff --git a/packages/overlays/stories/20-index.stories.mdx b/packages/overlays/stories/20-index.stories.mdx index 207f980d7..13a1e6c51 100644 --- a/packages/overlays/stories/20-index.stories.mdx +++ b/packages/overlays/stories/20-index.stories.mdx @@ -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'; - + # Overlay System @@ -23,24 +23,24 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa {html` - + -
- Hello! You can close this notification here: - +
+ Hello! You can close this notification here: +
- + `} ```html - + -
+
Hello! You can close this notification here:
- + ``` ## Features @@ -132,9 +132,9 @@ _defineOverlayConfig() { or declaratively in your template with the `.config` property ```html - + -
+
Hello! You can close this notification here:
- + ``` ### Responsive switching @@ -157,7 +157,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo {html` - { if (window.innerWidth >= 600) { @@ -176,12 +176,12 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo ⨯
- + `} ```html - { if (window.innerWidth >= 600) { @@ -192,7 +192,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo }} > -
+
Hello! You can close this notification here:
- + ``` 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
- +
Hello! You can close this notification here: @@ -272,7 +272,7 @@ Below is another demo where you can toggle between configurations using buttons. ⨯
- + `} @@ -293,9 +293,9 @@ Change config to: Dropdown
- + -
+
Hello! You can close this notification here:
- + ``` ## 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: ${appState.opened} - +
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 ⨯
- + `; }} @@ -357,9 +357,9 @@ function onOpenClosed(ev) {
appState.opened: ${openedStateNode}
- + -
+
Hello! You can close this notification here:
- + ``` ## Intercepting open/close @@ -391,13 +391,13 @@ the `before-close` or `before-open` events. blockOverlay = !blockOverlay; refs.statusButton.textContent = blockOverlay; }}">${blockOverlay} - +
Hello! You can close this notification here:
- + `; }} @@ -413,13 +413,13 @@ the `before-close` or `before-open` events. ``` ```html - +
Hello! You can close this notification here:
- + ``` @@ -495,7 +495,7 @@ Below an example is shown with the `isBlocking` option, which makes use of the O {html` - +
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
- - + +
Hello! You can close this notification here:
- + `} ```html - + -
+
Hello! You can close this notification here:
- + - +
Hello! You can close this notification here:
- + ``` diff --git a/packages/overlays/stories/40-system-configuration.stories.mdx b/packages/overlays/stories/40-system-configuration.stories.mdx index ad3699137..0e7827da3 100644 --- a/packages/overlays/stories/40-system-configuration.stories.mdx +++ b/packages/overlays/stories/40-system-configuration.stories.mdx @@ -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'; - + # Overlay System - Configuration @@ -21,7 +21,7 @@ or in the `global-overlays` container at the bottom of the ``. Local: {html` - +
Hello! You can close this notification here: @@ -32,12 +32,12 @@ Local: ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -48,13 +48,13 @@ Local: ⨯
- + ``` Global: {html` - +
Hello! You can close this notification here: @@ -65,12 +65,12 @@ Global: ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -81,7 +81,7 @@ Global: ⨯
- + ``` ## trapsKeyboardFocus @@ -95,7 +95,7 @@ You use the feature on any type of overlay. {html` - +
@@ -108,12 +108,12 @@ You use the feature on any type of overlay. ⨯
- + `} ```html - +
@@ -126,7 +126,7 @@ You use the feature on any type of overlay. ⨯
- + ``` ## hidesOnEsc @@ -137,7 +137,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled. {html` - +
Hello! You can close this notification here: @@ -148,12 +148,12 @@ Boolean property. Will allow closing the overlay on ESC key when enabled. ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -164,7 +164,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled. ⨯
- + ``` ## hidesOnOutsideClick @@ -173,7 +173,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten {html` - +
Hello! You can close this notification here: @@ -184,12 +184,12 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -200,7 +200,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten ⨯
- + ``` ## elementToFocusAfterHide @@ -211,7 +211,7 @@ In the example, we focus the body instead of the `invokerNode`. {html` - +
Hello! You can close this notification here: @@ -222,12 +222,12 @@ In the example, we focus the body instead of the `invokerNode`. ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -238,7 +238,7 @@ In the example, we focus the body instead of the `invokerNode`. ⨯
- + ``` ## hasBackdrop @@ -258,7 +258,7 @@ This currently only supports CSS Animations, because it relies on the `animation {html` - +
Hello! You can close this notification here: @@ -269,12 +269,12 @@ This currently only supports CSS Animations, because it relies on the `animation ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -285,7 +285,7 @@ This currently only supports CSS Animations, because it relies on the `animation ⨯
- + ``` ## isBlocking @@ -305,13 +305,13 @@ This currently only supports CSS Animations, because it relies on the `animation {html` - +
- + -
+
Hello! You can close this notification here:
- +
Hello! You can close this notification here:
- + `} ```html - +
- + -
+
Hello! You can close this notification here:
- +
Hello! You can close this notification here:
- + ``` 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 ` {html` - +
Hello! You can close this notification here: @@ -383,12 +383,12 @@ Boolean property. When true, prevents scrolling content that is outside of the ` ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -399,7 +399,7 @@ Boolean property. When true, prevents scrolling content that is outside of the ` ⨯
- + ``` ## viewportConfig @@ -420,7 +420,7 @@ Options: {html` - +
Hello! You can close this notification here: @@ -431,12 +431,12 @@ Options: ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -447,7 +447,7 @@ Options: ⨯
- + ``` @@ -471,7 +471,7 @@ Here's a succinct overview of some often used popper properties: {html` -
- + `} ```js -
- + ``` > Note: popperConfig reflects Popper.js API diff --git a/packages/overlays/stories/applyDemoOverlayStyles.js b/packages/overlays/stories/applyDemoOverlayStyles.js index 4abcba59c..8d31eec47 100644 --- a/packages/overlays/stories/applyDemoOverlayStyles.js +++ b/packages/overlays/stories/applyDemoOverlayStyles.js @@ -7,7 +7,7 @@ const applyDemoOverlayStyles = () => { padding: 10px; } - .demo-overlay--second { + .demo-overlay--blocking { background-color: pink; } `; diff --git a/packages/overlays/stories/lion-demo-overlay.js b/packages/overlays/stories/demo-overlay-system.js similarity index 86% rename from packages/overlays/stories/lion-demo-overlay.js rename to packages/overlays/stories/demo-overlay-system.js index 003e0dec1..14c52cb49 100644 --- a/packages/overlays/stories/lion-demo-overlay.js +++ b/packages/overlays/stories/demo-overlay-system.js @@ -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); From e9611c6a3ee701e9e0264eb661e8bdfe7ffdcb02 Mon Sep 17 00:00:00 2001 From: qa46hx Date: Thu, 23 Jan 2020 15:49:29 +0100 Subject: [PATCH 2/6] chore(localize): improve localize storybook demo --- .../stories/50-system-overview.stories.mdx | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/localize/stories/50-system-overview.stories.mdx b/packages/localize/stories/50-system-overview.stories.mdx index 6975ee32b..e863e245f 100644 --- a/packages/localize/stories/50-system-overview.stories.mdx +++ b/packages/localize/stories/50-system-overview.stories.mdx @@ -41,48 +41,48 @@ Localization data modules for `my-hello-component` might look like these: - `/path/to/my-hello-component/translations/en-GB.js` - ```js - export default { - greeting: 'Hello {name}!', - }; - ``` +```js +export default { + greeting: 'Hello {name}!', +}; +``` - `/path/to/my-hello-component/translations/nl-NL.js` - ```js - export default { - greeting: 'Hallo {name}!', - }; - ``` +```js +export default { + greeting: 'Hallo {name}!', +}; +``` The approach with ES modules is great because it allows to simply reuse basic locale data and override only the needed parts for more specific locales. - `/path/to/my-family-component/translations/en.js` - ```js - export default { - havePartnerQuestion: 'Do you have a partner?', - haveChildrenQuestion: 'Do you have children?', - }; - ``` +```js +export default { + havePartnerQuestion: 'Do you have a partner?', + haveChildrenQuestion: 'Do you have children?', +}; +``` - `/path/to/my-family-component/translations/en-GB.js` - ```js - import en from './en.js'; - export default en; - ``` +```js +import en from './en.js'; +export default en; +``` - `/path/to/my-family-component/translations/en-US.js` - ```js - import en from './en.js'; +```js +import en from './en.js'; - export default { - ...en, - haveChildrenQuestion: 'Do you have kids?', - }; - ``` +export default { + ...en, + haveChildrenQuestion: 'Do you have kids?', +}; +``` ### Loading data From 32980e0180c38633902cd1ee6837750c63766409 Mon Sep 17 00:00:00 2001 From: qa46hx Date: Thu, 23 Jan 2020 15:49:54 +0100 Subject: [PATCH 3/6] chore(switch): improve storybook demo --- packages/switch/stories/index.stories.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/switch/stories/index.stories.mdx b/packages/switch/stories/index.stories.mdx index 793de32a7..47c76b267 100644 --- a/packages/switch/stories/index.stories.mdx +++ b/packages/switch/stories/index.stories.mdx @@ -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'})]}" > `; }} @@ -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'})]}" > ``` From 9de016240ea749b731111dfa380373367cbae66f Mon Sep 17 00:00:00 2001 From: Thomas Allmer Date: Thu, 23 Jan 2020 17:01:34 +0100 Subject: [PATCH 4/6] fix(validate): move demos to form-system to avoid circular dependencies --- .storybook/preview.js | 2 +- .../17-Validation-Examples.stories.mdx} | 43 +++++++++++++------ ...rview.stories.mdx => Overview.stories.mdx} | 2 +- 3 files changed, 32 insertions(+), 15 deletions(-) rename packages/{validate/stories/02-ValidationExamples.stories.mdx => form-system/stories/17-Validation-Examples.stories.mdx} (91%) rename packages/validate/stories/{01-ValidateSystemOverview.stories.mdx => Overview.stories.mdx} (99%) diff --git a/.storybook/preview.js b/.storybook/preview.js index e5e9a38c0..69cccf7ce 100755 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -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'], ]), }, diff --git a/packages/validate/stories/02-ValidationExamples.stories.mdx b/packages/form-system/stories/17-Validation-Examples.stories.mdx similarity index 91% rename from packages/validate/stories/02-ValidationExamples.stories.mdx rename to packages/form-system/stories/17-Validation-Examples.stories.mdx index 77235d573..b6177d87e 100644 --- a/packages/validate/stories/02-ValidationExamples.stories.mdx +++ b/packages/form-system/stories/17-Validation-Examples.stories.mdx @@ -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'; - + ## 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. + {html` @@ -41,6 +44,8 @@ import { ## String Validators +Useful on input elements it allows to define how many characters can be entered. + {html` ``` - ## 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. + {html` {() => { 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. + {() => { try { @@ -287,16 +299,16 @@ const tomorrow = new Date(year, month, day + 1); ```js - try { - class MyTypesInput extends LionInput { - static get validationTypes() { - return ['error', 'warning', 'info', 'success']; - } - } - customElements.define('my-types-input', MyTypesInput); - } catch (err) { - // expected as it is a demo +try { + class MyTypesInput extends LionInput { + static get validationTypes() { + return ['error', 'warning', 'info', 'success']; } + } + customElements.define('my-types-input', MyTypesInput); +} catch (err) { + // expected as it is a demo +} ``` ```html @@ -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. + {() => { class MyValidator extends Validator { @@ -404,6 +419,8 @@ class MyValidator extends Validator { ## Override default messages +Oftern + {html` + # Validation From ddd1a72ba752c9798885d9c8cd7706a69ed3abb2 Mon Sep 17 00:00:00 2001 From: Thomas Allmer Date: Thu, 23 Jan 2020 17:24:45 +0100 Subject: [PATCH 5/6] fix: move demos to form-system to avoid circular dependencies --- .../fieldset/stories/overview.stories.mdx | 41 ++++++ .../stories/fieldset-examples.stories.mdx} | 118 +++++++----------- .../stories/form-examples.stories.mdx} | 59 ++++----- .../form/stories/helpers/demo-form-child.js | 13 -- packages/form/stories/overview.stories.mdx | 33 +++++ 5 files changed, 143 insertions(+), 121 deletions(-) create mode 100644 packages/fieldset/stories/overview.stories.mdx rename packages/{fieldset/stories/index.stories.mdx => form-system/stories/fieldset-examples.stories.mdx} (67%) rename packages/{form/stories/index.stories.mdx => form-system/stories/form-examples.stories.mdx} (63%) delete mode 100644 packages/form/stories/helpers/demo-form-child.js create mode 100644 packages/form/stories/overview.stories.mdx 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
- - + + - - + + - +