mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
35 lines
1.2 KiB
JavaScript
35 lines
1.2 KiB
JavaScript
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
|
|
import Component from "./NumberInput.Story.svelte";
|
|
|
|
export default { title: "NumberInput", decorators: [withKnobs] };
|
|
|
|
export const Default = () => ({
|
|
Component,
|
|
props: {
|
|
id: text("NumberInput id", "number-input-id"),
|
|
name: text("NumberInput name", "number-input-name"),
|
|
label: text("Label (label)", "Number Input label"),
|
|
hideLabel: boolean("Hide label (hideLabel)", false),
|
|
min: number("Minimum value (min)", 0),
|
|
max: number("Maximum value (max)", 100),
|
|
value: number("Value (value)", 50),
|
|
step: number("Step of up/down arrow (step)", 10),
|
|
disabled: boolean("Disabled (disabled)", false),
|
|
readonly: boolean("Read only (readonly)", false),
|
|
invalid: boolean("Show form validation UI (invalid)", false),
|
|
mobile: boolean("Mobile variant (mobile)", false),
|
|
invalidText: text(
|
|
"Form validation UI content (invalidText)",
|
|
"Number is not valid"
|
|
),
|
|
light: boolean("Light variant (light)", false),
|
|
},
|
|
});
|
|
|
|
export const Skeleton = () => ({
|
|
Component,
|
|
props: {
|
|
story: "skeleton",
|
|
hideLabel: boolean("Hide label (hideLabel)", false),
|
|
},
|
|
});
|