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

chore(form-system): add fields to umbrella form demo

Browse source
This commit is contained in:
Joren Broekema 2020-01-16 15:16:56 +01:00 committed by Thomas Allmer
parent 30a8197f18
commit d634b6cd03
2 changed files with 18 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/form-system/package.json
View file

@ -48,6 +48,8 @@
"@lion/localize": "0.8.5", "@lion/localize": "0.8.5",
"@lion/radio": "0.3.5", "@lion/radio": "0.3.5",
"@lion/radio-group": "0.5.5", "@lion/radio-group": "0.5.5",
"@lion/select": "0.5.5",
"@lion/select-rich": "0.9.7",
"@lion/textarea": "0.5.6", "@lion/textarea": "0.5.6",
"@lion/validate": "0.6.5", "@lion/validate": "0.6.5",
"@open-wc/demoing-storybook": "^1.8.3", "@open-wc/demoing-storybook": "^1.8.3",

19
packages/form-system/stories/15-features-overview.stories.mdx
View file

@ -8,8 +8,12 @@ import '@lion/input-date/lion-input-date.js';
import '@lion/input-email/lion-input-email.js'; import '@lion/input-email/lion-input-email.js';
import '@lion/input-iban/lion-input-iban.js'; import '@lion/input-iban/lion-input-iban.js';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import '@lion/option/lion-option.js';
import '@lion/radio-group/lion-radio-group.js'; import '@lion/radio-group/lion-radio-group.js';
import '@lion/radio/lion-radio.js'; import '@lion/radio/lion-radio.js';
import '@lion/select/lion-select.js';
import '@lion/select-rich/lion-options.js';
import '@lion/select-rich/lion-select-rich.js';
import '@lion/textarea/lion-textarea.js'; import '@lion/textarea/lion-textarea.js';
import { MinLength, Required } from '@lion/validate'; import { MinLength, Required } from '@lion/validate';
@ -41,7 +45,6 @@ For usage and installation please see the appropriate packages.
<lion-input-date <lion-input-date
name="date" name="date"
label="Date of application" label="Date of application"
.modelValue="${'2000-12-12'}"
.validators="${[new Required()]}" .validators="${[new Required()]}"
></lion-input-date> ></lion-input-date>
<lion-textarea <lion-textarea
@ -73,9 +76,15 @@ For usage and installation please see the appropriate packages.
<lion-radio name="dinosaurs[]" value="brontosaurus" label="brontosaurus"></lion-radio> <lion-radio name="dinosaurs[]" value="brontosaurus" label="brontosaurus"></lion-radio>
<lion-radio name="dinosaurs[]" value="diplodocus" label="diplodocus"></lion-radio> <lion-radio name="dinosaurs[]" value="diplodocus" label="diplodocus"></lion-radio>
</lion-radio-group> </lion-radio-group>
<!-- TODO: rich select --> <lion-select-rich name="favoriteColor" label="Favorite color">
<lion-options slot="input">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
</lion-options>
</lion-select-rich>
<lion-select <lion-select
label="Make a selection (rich select)" label="Make a selection (simple select)"
name="lyrics" name="lyrics"
.validators="${[new Required()]}" .validators="${[new Required()]}"
> >
@ -118,8 +127,12 @@ import '@lion/input-date/lion-input-date.js';
import '@lion/input-email/lion-input-email.js'; import '@lion/input-email/lion-input-email.js';
import '@lion/input-iban/lion-input-iban.js'; import '@lion/input-iban/lion-input-iban.js';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import '@lion/option/lion-option.js';
import '@lion/radio-group/lion-radio-group.js'; import '@lion/radio-group/lion-radio-group.js';
import '@lion/radio/lion-radio.js'; import '@lion/radio/lion-radio.js';
import '@lion/select-rich/lion-select-rich.js';
import '@lion/select-rich/lion-options.js';
import '@lion/option/lion-option.js';
import '@lion/textarea/lion-textarea.js'; import '@lion/textarea/lion-textarea.js';
import { MinLength, Required } from '@lion/validate'; import { MinLength, Required } from '@lion/validate';
``` ```