-
Notifications
You must be signed in to change notification settings - Fork 6
/
textfield-variants.stories.js
69 lines (56 loc) 路 1.83 KB
/
textfield-variants.stories.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import '@vonage/vwc-textfield/vwc-textfield.js';
import '@vonage/vwc-icon';
import { html } from 'lit-element';
import { spread } from '@open-wc/lit-helpers';
const Template = (args) =>
html`<vwc-textfield ...=${spread(args)} @keydown=${handleKeyDown} @change=${onChange} @input=${onInput}>`;
export const Default = Template.bind({});
Default.args = { label: 'e.g. username', value: 'Initial value', placeholder: 'Placeholder' };
export const CharCounter = Template.bind({});
CharCounter.args = { label: 'Limited value', dense: '', charCounter: '', maxLength: 18 };
export const Dense = Template.bind({});
Dense.args = { dense: '', label: 'VWC Textfield' };
export const PillShape = Template.bind({});
PillShape.args = { shape: 'pill', dense: '', label: 'VWC Textfield', helper: 'helper message' };
export const Disabled = Template.bind({});
Disabled.args = { disabled: '', label: 'Hint test', value: 'Text' };
export const Validation = Template.bind({});
Validation.args = {
label: 'Numbers only',
required: '',
pattern: '[0-9]+',
validationMessage: 'Numbers only',
helper: 'State your numbers, please!',
value: 'Text'
};
export const AutoValidation = Template.bind({});
AutoValidation.args = {
label: 'Numbers only',
autoValidate: '',
required: '',
pattern: '[0-9]+',
validationMessage: 'Numbers only',
helper: 'State your numbers, please!',
value: 'Text'
};
export const Icon = Template.bind({});
Icon.args = {
icon: 'search',
iconTrailing: 'close-small-line',
dense: '',
shape: 'pill',
placeholder: 'Search',
helper: 'Please enter your legal ID',
validationMessage: 'Numbers only'
};
export const Autofocus = Template.bind({});
Autofocus.args = { label: 'e.g. username', autofocus: true };
function handleKeyDown(e) {
e.stopPropagation();
}
function onChange() {
console.log('change');
}
function onInput() {
console.log('input');
}