import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { action } from "@storybook/addon-actions";
import { boolean, text, select, number } from '@storybook/addon-knobs';
import TextField from '../../components/TextField.vue';
import ChecIcon from '../../components/ChecIcon.vue';
import ChecFormField from '../../components/ChecFormField.vue';
import ChecSwitch from '../../components/ChecSwitch.vue';
import ChecSegmentedButtonsGroup from '../../components/ChecSegmentedButtonsGroup.vue';
import { uiIcons } from '../../lib/icons';
# Text Field
# Default
{{
props: {
errored: {
default: boolean('Errored', false)
},
disabled: {
default: boolean('Disabled', false)
},
label: {
default: text('Label', 'Label')
},
multiline: {
default: boolean('Multiline', false)
},
currency: {
default: boolean('Currency', false)
},
required: {
default: boolean('Required', false)
},
type: {
default: select('Type', ['text', 'email', 'password', 'number', 'date', 'color', 'month', 'search', 'tel', 'url', 'week'], 'text')
},
placeholder: {
default: text('Placeholder', ''),
},
icon: {
default: select('Icon', [null, ...Object.keys(uiIcons)]),
},
styleVariant: {
default: select('Style Variant', ['light', 'dark']),
},
background: {
default: select('Background Color', ['light', 'dark']),
},
currencySymbol: {
default: select('Curency Symbol', ['$', '£', '€', '¥', '₹', '฿', 'CHF', 'lei']),
},
appendLabel: {
default: text('Append label', 'Click me'),
},
tooltip: {
default: text('Tooltip copy', 'Lorem Ipsum Dolor'),
},
minimizedLabel: {
default: boolean('Minimized Label Override', false)
},
},
data() {
return { inputValue: '' };
},
computed: {
variant() {
return this.disabled ? 'disabled' : this.errored ? 'error' : '';
}
},
components: {
ChecFormField,
TextField,
},
methods: {
handleClick(e, value) {
return action(`Text field action button was clicked with: ${value}`)();
}
},
template: `
`,
}}
# Multiline
{{
props: {
inputValue: {
default: text('Input Value', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas id pariatur hic? At quod ab necessitatibus sunt!')
},
errored: {
default: boolean('Errored', false)
},
disabled: {
default: boolean('Disabled', false)
},
label: {
default: text('Label', 'Label')
},
multiline: {
default: boolean('Multiline', true)
},
},
computed: {
variant() {
return this.disabled ? 'disabled' : this.errored ? 'error' : '';
}
},
components: {
ChecFormField,
TextField
},
template: `
`,
}}
# Disabled
{{
components: {
ChecFormField,
TextField
},
props: {
label: {
default: text('Label', 'Label')
},
},
template: `
`,
}}
# Dark Variant
{{
components: {
ChecFormField,
TextField
},
props: {
label: {
default: text('Label', 'Label')
},
errored: {
default: boolean('Errored', false)
},
disabled: {
default: boolean('Disabled', false)
},
multiline: {
default: boolean('Multiline', false)
},
required: {
default: boolean('Required', false)
},
},
computed: {
variant() {
return this.disabled ? 'disabled' : this.errored ? 'error' : '';
}
},
template: `
`,
}}
# Error
{{
props: {
inputValue: {
default: text('Input Value', '')
},
label: {
default: text('Label', 'Label')
},
},
components: {
ChecFormField,
TextField
},
template: `
`,
}}
# With action button
{{
props: {
inputValue: {
default: text('Input value', 'Hello world')
},
label: {
default: text('Label', 'Enter your greeting')
},
appendLabel: {
default: text('Append label', 'Click me'),
},
tooltip: {
default: text('Tooltip copy', 'Lorem Ipsum Dolor'),
}
},
methods: {
handleClick(e, value) {
return action(`Text field action button was clicked with: ${value}`)();
}
},
components: {
TextField,
ChecFormField
},
template: `
`
}}
# Utilising right slot
{{
components: {
TextField,
ChecFormField,
ChecIcon,
ChecSwitch,
ChecSegmentedButtonsGroup
},
props: {
variant: {
default: boolean('Disabled', false) ? 'disabled' : '',
},
},
data() {
return {
inputValue: '',
switchState: false,
options: [
{ label: 'Label', value: '1' },
{ label: 'Label', value: '2' },
],
selected: '1',
}
},
template: `
Label
Label
`,
}}
# Currency
{{
props: {
inputValue: {
default: number('Input Value', 0)
},
label: {
default: text('Label', 'Label')
},
errored: {
default: boolean('Errored', false)
},
disabled: {
default: boolean('Disabled', false)
},
currency: {
default: boolean('Currency', true)
},
currencySymbol: {
default: select('Curency Symbol', ['$', '£', '€', '¥', '₹', '฿', 'CHF', 'lei']),
},
},
computed: {
variant() {
return this.disabled ? 'disabled' : this.errored ? 'error' : '';
}
},
components: {
TextField
},
template: `
`,
}}