396deb2e3b
Co-authored-by: Alex Ghiu <alex.ghiu@ing.com> Co-authored-by: Gerjan van Geest <Gerjan.van.Geest@ing.com> Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com> Co-authored-by: Joren Broekema <joren.broekema@ing.com> Co-authored-by: Erik Kroes <erik.kroes@ing.com>
104 lines
3.7 KiB
JavaScript
104 lines
3.7 KiB
JavaScript
/* eslint-disable import/no-extraneous-dependencies */
|
|
import { storiesOf, html } from '@open-wc/demoing-storybook';
|
|
|
|
import '@lion/radio/lion-radio.js';
|
|
import '../lion-radio-group.js';
|
|
import { Required, Validator, loadDefaultFeedbackMessages } from '@lion/validate';
|
|
|
|
loadDefaultFeedbackMessages();
|
|
|
|
storiesOf('Forms|Radio Group', module)
|
|
.add(
|
|
'Default',
|
|
() => html`
|
|
<lion-radio-group name="dinosGroup" label="Favourite dinosaur">
|
|
<lion-radio name="dinos[]" label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
|
|
<lion-radio name="dinos[]" label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
|
|
<lion-radio name="dinos[]" label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
|
|
</lion-radio-group>
|
|
`,
|
|
)
|
|
.add(
|
|
'Pre Select',
|
|
() => html`
|
|
<lion-radio-group name="dinosGroup" label="Favourite dinosaur">
|
|
<lion-radio name="dinos[]" label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
|
|
<lion-radio name="dinos[]" label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
|
|
<lion-radio
|
|
name="dinos[]"
|
|
label="diplodocus"
|
|
.modelValue=${{ value: 'diplodocus', checked: true }}
|
|
></lion-radio>
|
|
</lion-radio-group>
|
|
`,
|
|
)
|
|
.add(
|
|
'Disabled',
|
|
() => html`
|
|
<lion-radio-group name="dinosGroup" label="Favourite dinosaur" disabled>
|
|
<lion-radio name="dinos[]" label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
|
|
<lion-radio name="dinos[]" label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
|
|
<lion-radio
|
|
name="dinos[]"
|
|
label="diplodocus"
|
|
.modelValue=${{ value: 'diplodocus', checked: true }}
|
|
></lion-radio>
|
|
</lion-radio-group>
|
|
`,
|
|
)
|
|
.add('Validation', () => {
|
|
const validate = () => {
|
|
const radioGroup = document.querySelector('#dinosGroup');
|
|
radioGroup.submitted = !radioGroup.submitted;
|
|
};
|
|
return html`
|
|
<lion-radio-group
|
|
id="dinosGroup"
|
|
name="dinosGroup"
|
|
label="Favourite dinosaur"
|
|
.validators=${[new Required()]}
|
|
>
|
|
<lion-radio name="dinos[]" label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
|
|
<lion-radio name="dinos[]" label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
|
|
<lion-radio name="dinos[]" label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
|
|
</lion-radio-group>
|
|
<button @click="${() => validate()}">Validate</button>
|
|
`;
|
|
})
|
|
.add('Validation Item', () => {
|
|
class IsBrontosaurus extends Validator {
|
|
constructor() {
|
|
super();
|
|
this.name = 'IsBrontosaurus';
|
|
}
|
|
|
|
execute(value) {
|
|
const selectedValue = value['dinos[]'].find(v => v.checked === true);
|
|
const hasError = selectedValue ? selectedValue.value !== 'brontosaurus' : false;
|
|
return hasError;
|
|
}
|
|
|
|
static async getMessage() {
|
|
return 'You need to select "brontosaurus"';
|
|
}
|
|
}
|
|
|
|
const validate = () => {
|
|
const radioGroup = document.querySelector('#dinosGroup');
|
|
radioGroup.submitted = !radioGroup.submitted;
|
|
};
|
|
|
|
return html`
|
|
<lion-radio-group
|
|
id="dinosGroup"
|
|
name="dinosGroup"
|
|
label="Favourite dinosaur"
|
|
.validators=${[new Required(), new IsBrontosaurus()]}
|
|
>
|
|
<lion-radio name="dinos[]" label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
|
|
<lion-radio name="dinos[]" label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
|
|
<lion-radio name="dinos[]" label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
|
|
</lion-radio-group>
|
|
<button @click="${() => validate()}">Validate</button>
|
|
`;
|
|
});
|