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

chore(lion-switch): show info type validator (#598)

Browse source
This commit is contained in:
Stijn Van Asschodt 2020-02-26 15:13:50 +01:00 committed by GitHub
parent 4840f05275
commit 476fef679b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { Story, Meta, html } from '@open-wc/demoing-storybook'; import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { Validator } from '@lion/validate'; import { Validator } from '@lion/validate';
import { LionSwitch } from '../src/LionSwitch';
import '../lion-switch.js'; import '../lion-switch.js';
<Meta title="Buttons/Switch" /> <Meta title="Buttons/Switch" />
@ -75,19 +76,26 @@ Simple example that illustrates where validation feedback will be displayed.
return "You won't get the latest news!"; return "You won't get the latest news!";
} }
}; };
class CustomSwitch extends LionSwitch {
static get validationTypes() {
return [...super.validationTypes, 'info'];
}
}
customElements.define('custom-switch', CustomSwitch)
return html` return html`
<lion-switch <custom-switch
id="newsletterCheck" id="newsletterCheck"
name="newsletterCheck" name="newsletterCheck"
label="Subscribe to newsletter" label="Subscribe to newsletter"
.validators="${[new IsTrue(null, {type: 'info'})]}" .validators="${[new IsTrue(null, {type: 'info'})]}"
></lion-switch> ></custom-switch>
`; `;
}} }}
</Story> </Story>
```js ```js
import { Validator } from '@lion/validate'; import { Validator } from '@lion/validate';
import { LionSwitch } from '@lion/switch/src/LionSwitch';
const IsTrue = class extends Validator { const IsTrue = class extends Validator {
constructor(...args) { constructor(...args) {
@ -101,13 +109,20 @@ const IsTrue = class extends Validator {
return "You won't get the latest news!"; return "You won't get the latest news!";
} }
}; };
class CustomSwitch extends LionSwitch {
static get validationTypes() {
return [...super.validationTypes, 'info'];
}
}
customElements.define('custom-switch', CustomSwitch);
``` ```
```html ```html
<lion-switch <custom-switch
id="newsletterCheck" id="newsletterCheck"
name="newsletterCheck" name="newsletterCheck"
label="Subscribe to newsletter" label="Subscribe to newsletter"
.validators="${[new IsTrue(null, {type: 'info'})]}" .validators="${[new IsTrue(null, {type: 'error'})]}"
></lion-switch> ></custom-switch>
``` ```