mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(components): add TextInput

Browse source
This commit is contained in:
Eric Liu 2019-12-15 15:25:48 -08:00
commit e786e0e78f
8 changed files with 362 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/components/TextInput/TextInput.stories.js Normal file
View file

@ -0,0 +1,89 @@
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
import Component from './TextInput.Story.svelte';
export default { title: 'TextInput', decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
hideLabel: boolean('No label (hideLabel)', false),
labelText: text('Label text (labelText)', 'Text Input label'),
invalid: boolean('Show form validation UI (invalid)', false),
invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
helperText: text('Helper text (helperText)', 'Optional helper text.'),
placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
id: 'text-input'
}
});
export const TogglePasswordVisibility = () => ({
Component,
props: {
story: 'password-visibility',
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
hideLabel: boolean('No label (hideLabel)', false),
labelText: text('Label text (labelText)', 'Text Input label'),
invalid: boolean('Show form validation UI (invalid)', false),
invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
helperText: text('Helper text (helperText)', 'Optional helper text.'),
placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
id: 'text-input',
tooltipPosition: select(
'Tooltip position (tooltipPosition)',
['top', 'right', 'bottom', 'left'],
'bottom'
),
tooltipAlignment: select(
'Tooltip alignment (tooltipAlignment)',
['start', 'center', 'end'],
'center'
),
hidePasswordLabel: text(
'"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
'Hide password'
),
showPasswordLabel: text(
'"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
'Show password'
)
}
});
export const ControlledTogglePasswordVisibility = () => ({
Component,
props: {
story: 'controlled',
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
hideLabel: boolean('No label (hideLabel)', false),
labelText: text('Label text (labelText)', 'Text Input label'),
invalid: boolean('Show form validation UI (invalid)', false),
invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
helperText: text('Helper text (helperText)', 'Optional helper text.'),
placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
id: 'text-input',
tooltipPosition: select(
'Tooltip position (tooltipPosition)',
['top', 'right', 'bottom', 'left'],
'bottom'
),
tooltipAlignment: select(
'Tooltip alignment (tooltipAlignment)',
['start', 'center', 'end'],
'center'
),
hidePasswordLabel: text(
'"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
'Hide password'
),
showPasswordLabel: text(
'"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
'Show password'
)
}
});
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });