93 lines
2.7 KiB
JavaScript
93 lines
2.7 KiB
JavaScript
import { storiesOf, html } from '@open-wc/demoing-storybook';
|
|
import { LitElement } from '@lion/core';
|
|
|
|
import { LocalizeMixin } from '@lion/localize';
|
|
|
|
import '../lion-input-switch.js';
|
|
import '../lion-button-switch.js';
|
|
import '@lion/form/lion-form.js';
|
|
|
|
storiesOf('Forms|Switch', module)
|
|
.add(
|
|
'All text slots',
|
|
() => html`
|
|
<lion-input-switch label="Label" help-text="Help text"> </lion-input-switch>
|
|
`,
|
|
)
|
|
.add(
|
|
'Disabled',
|
|
() => html`
|
|
<lion-input-switch label="Disabled label" disabled> </lion-input-switch>
|
|
`,
|
|
)
|
|
.add('Validation', () => {
|
|
const isTrue = value => value && value.checked && value.checked === true;
|
|
const isTrueValidator = (...factoryParams) => [
|
|
(...params) => ({
|
|
isTrue: isTrue(...params),
|
|
}),
|
|
...factoryParams,
|
|
];
|
|
const tagName = 'lion-switch-validation-demo';
|
|
if (!customElements.get(tagName)) {
|
|
customElements.define(
|
|
tagName,
|
|
class extends LocalizeMixin(LitElement) {
|
|
static get localizeNamespaces() {
|
|
const result = [
|
|
{
|
|
'lion-validate+isTrue': () =>
|
|
Promise.resolve({
|
|
info: {
|
|
isTrue: 'You will not get the latest news!',
|
|
},
|
|
}),
|
|
},
|
|
...super.localizeNamespaces,
|
|
];
|
|
return result;
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<lion-form id="postsForm" @submit="${this.submit}">
|
|
<form>
|
|
<lion-input-switch name="emailAddress" label="Share email address">
|
|
</lion-input-switch>
|
|
<lion-input-switch name="subjectField" label="Show subject field" checked>
|
|
</lion-input-switch>
|
|
<lion-input-switch name="characterCount" label="Character count">
|
|
</lion-input-switch>
|
|
<lion-input-switch
|
|
name="newsletterCheck"
|
|
label="* Subscribe to newsletter"
|
|
.infoValidators="${[isTrueValidator()]}"
|
|
>
|
|
</lion-input-switch>
|
|
<button type="submit">
|
|
Submit
|
|
</button>
|
|
</form>
|
|
</lion-form>
|
|
`;
|
|
}
|
|
|
|
submit() {
|
|
const form = this.shadowRoot.querySelector('#postsForm');
|
|
if (form.errorState === false) {
|
|
console.log(form.serializeGroup());
|
|
}
|
|
}
|
|
},
|
|
);
|
|
}
|
|
return html`
|
|
<lion-switch-validation-demo></lion-switch-validation-demo>
|
|
`;
|
|
})
|
|
.add(
|
|
'Button',
|
|
() => html`
|
|
<lion-button-switch></lion-button-switch>
|
|
`,
|
|
);
|