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

chore: small storybook updates

Browse source
This commit is contained in:
qa46hx 2020-03-18 09:33:34 +01:00
parent be78f23c00
commit 571baa9c53
3 changed files with 46 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
packages/form-system/stories/17-Validation-Examples.stories.mdx
View file

@ -35,9 +35,11 @@ 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. while for a checkbox group it means at least one checkbox needs to be checked.
<Story name="Required Validator"> <Story name="Required Validator">
{html` {() => {
loadDefaultFeedbackMessages();
return html`
<lion-input .validators=${[new Required()]} label="Required"></lion-input> <lion-input .validators=${[new Required()]} label="Required"></lion-input>
`} `}}
</Story> </Story>
```html ```html
@ -242,7 +244,7 @@ const tomorrow = new Date(year, month, day + 1);
## Validation Types ## Validation Types
When defining your own component you can decide to allow for multiple types of validation. 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. By default only `error` is used, however there are certainly use cases where warning or success messages make sense.
<Story name="Validation Types"> <Story name="Validation Types">
{() => { {() => {
@ -258,29 +260,24 @@ By default only `error` is used however there are certainly use cases where warn
} }
return html` return html`
<style> <style>
my-types-input { .demo-types-input {
border-left: 2px solid #fff; padding: 0.5rem;
} }
my-types-input[shows-feedback-for]:not([shows-feedback-for='']) { .demo-types-input[shows-feedback-for~='success'] {
border-left: 2px dotted red; background-color: #e4ffe4;
border: 1px solid green;
} }
my-types-input[shows-feedback-for~='error'] input { .demo-types-input[shows-feedback-for~='error'] {
outline: 2px solid red; background-color: #ffd4d4;
border: 1px solid red;
} }
my-types-input[shows-feedback-for~='warning'] input { .demo-types-input[shows-feedback-for~='warning'] {
outline: 2px solid orange; background-color: #ffe4d4;
border: 1px solid orange;
} }
lion-validation-feedback[type='success'] { .demo-types-input[shows-feedback-for~='info'] {
color: green; background-color: #d4e4ff;
} border: 1px solid blue;
lion-validation-feedback[type='error'] {
color: red;
}
lion-validation-feedback[type='warning'] {
color: orange;
}
lion-validation-feedback[type='info'] {
color: blue;
} }
</style> </style>
<my-types-input <my-types-input
@ -295,6 +292,7 @@ By default only `error` is used however there are certainly use cases where warn
]}" ]}"
.modelValue="${'exactly'}" .modelValue="${'exactly'}"
label="Validation Types" label="Validation Types"
class="demo-types-input"
></my-types-input> ></my-types-input>
`; `;
}} }}
@ -315,29 +313,24 @@ try {
```html ```html
<style> <style>
my-types-input { .demo-types-input {
border-left: 2px solid #fff; padding: 0.5rem;
} }
my-types-input[shows-feedback-for]:not([shows-feedback-for='']) { .demo-types-input[shows-feedback-for~='success'] {
border-left: 2px dotted red; background-color: #e4ffe4;
border: 1px solid green;
} }
my-types-input[shows-feedback-for~='error'] input { .demo-types-input[shows-feedback-for~='error'] {
outline: 2px solid red; background-color: #ffd4d4;
border: 1px solid red;
} }
my-types-input[shows-feedback-for~='warning'] input { .demo-types-input[shows-feedback-for~='warning'] {
outline: 2px solid orange; background-color: #ffe4d4;
border: 1px solid orange;
} }
lion-validation-feedback[type='success'] { .demo-types-input[shows-feedback-for~='info'] {
color: green; background-color: #d4e4ff;
} border: 1px solid blue;
lion-validation-feedback[type='error'] {
color: red;
}
lion-validation-feedback[type='warning'] {
color: orange;
}
lion-validation-feedback[type='info'] {
color: blue;
} }
</style> </style>
<my-types-input <my-types-input
@ -352,6 +345,7 @@ try {
]}" ]}"
.modelValue="${'exactly'}" .modelValue="${'exactly'}"
label="Validation Types" label="Validation Types"
class="demo-types-input"
></my-types-input> ></my-types-input>
``` ```
@ -421,9 +415,11 @@ class MyValidator extends Validator {
></lion-input> ></lion-input>
``` ```
## Override default messages ## Default messages
Oftern To get default validation messages you need to import and call the `loadDefaultFeedbackMessages` function once in your application.
Sometimes the default messages don't make sense for your input field. In that case you want to override it by adding a `getMessage` function to your validator.
<Story name="Override default messages"> <Story name="Override default messages">
{html` {html`
@ -469,6 +465,8 @@ Oftern
## Override fieldName ## Override fieldName
In the scenario that the default messages are correct, but you only want to change the `fieldName`, this can both be done for a single specific validator or for all at once.
<Story name="Override fieldName"> <Story name="Override fieldName">
{html` {html`
<lion-input <lion-input
@ -584,7 +582,7 @@ class AsyncValidator extends Validator {
}); });
return html` return html`
<lion-input-date <lion-input-date
label="Your birth date" label="Birth date"
help-text="Adjust this date to retrigger validation of the input below..." help-text="Adjust this date to retrigger validation of the input below..."
.modelValue="${beginDate}" .modelValue="${beginDate}"
@model-value-changed="${({ target: { modelValue, errorState } }) => { @model-value-changed="${({ target: { modelValue, errorState } }) => {
@ -595,7 +593,7 @@ class AsyncValidator extends Validator {
}}" }}"
></lion-input-date> ></lion-input-date>
<lion-input-date <lion-input-date
label="Your graduation date" label="Graduation date"
.modelValue="${new Date('09/09/1989')}" .modelValue="${new Date('09/09/1989')}"
.validators="${[minDateValidatorRef]}" .validators="${[minDateValidatorRef]}"
></lion-input-date> ></lion-input-date>

2
packages/localize/stories/50-system-overview.stories.mdx
View file

@ -277,7 +277,7 @@ If you want to optimize the page rendering and you can inline some of your local
```js ```js
// my-inlined-data.js // my-inlined-data.js
import { localize } from 'lion-localize/localize.js'; import { localize } from '@lion/localize';
localize.addData('en-GB', 'my-namespace', { localize.addData('en-GB', 'my-namespace', {
/* data */ /* data */
}); });

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

@ -21,7 +21,7 @@ On top of this, the system was built having accessibility in mind.
For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationale--page). For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationale--page).
<Story name="default"> <Story name="Default">
{html` {html`
<demo-overlay-system> <demo-overlay-system>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
@ -312,7 +312,7 @@ Below is another demo where you can toggle between configurations using buttons.
</Story> </Story>
```js ```js
import { withModalDialogConfig, withBottomSheetConfig, withDropdownConfig } from 'lion/overlays'; import { withModalDialogConfig, withBottomSheetConfig, withDropdownConfig } from '@lion/overlays';
``` ```
```html ```html