81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import { storiesOf } from "@storybook/react";
|
|
import React from "react";
|
|
|
|
import Form from "@saleor/components/Form";
|
|
import MultiSelectField from "@saleor/components/MultiSelectField";
|
|
import CardDecorator from "../../CardDecorator";
|
|
import Decorator from "../../Decorator";
|
|
|
|
const choices = [
|
|
{ label: "Apparel", value: "1" },
|
|
{ label: "Groceries", value: "2" },
|
|
{ label: "Books", value: "3" },
|
|
{ label: "Accessories", value: "4" }
|
|
];
|
|
|
|
storiesOf("Generics / MultiSelectField", module)
|
|
.addDecorator(CardDecorator)
|
|
.addDecorator(Decorator)
|
|
.add("with no value", () => (
|
|
<MultiSelectField choices={choices} onChange={undefined} />
|
|
))
|
|
.add("with value", () => (
|
|
<MultiSelectField
|
|
choices={choices}
|
|
onChange={undefined}
|
|
value={[choices[0].value]}
|
|
/>
|
|
))
|
|
.add("with label", () => (
|
|
<MultiSelectField
|
|
choices={choices}
|
|
onChange={undefined}
|
|
label="Lorem ipsum"
|
|
/>
|
|
))
|
|
.add("with hint", () => (
|
|
<MultiSelectField
|
|
choices={choices}
|
|
onChange={undefined}
|
|
hint="Lorem ipsum"
|
|
/>
|
|
))
|
|
.add("with label and hint", () => (
|
|
<MultiSelectField
|
|
choices={choices}
|
|
onChange={undefined}
|
|
label="Lorem"
|
|
hint="Ipsum"
|
|
/>
|
|
))
|
|
.add("with value, label and hint", () => (
|
|
<MultiSelectField
|
|
choices={choices}
|
|
onChange={undefined}
|
|
value={[choices[0].value]}
|
|
label="Lorem"
|
|
hint="Ipsum"
|
|
/>
|
|
))
|
|
.add("with error hint", () => (
|
|
<MultiSelectField
|
|
choices={choices}
|
|
onChange={undefined}
|
|
hint="Lorem error"
|
|
error={true}
|
|
/>
|
|
))
|
|
.add("interactive", () => (
|
|
<Form initial={{ data: [choices[0].value] }}>
|
|
{({ change, data }) => (
|
|
<MultiSelectField
|
|
choices={choices}
|
|
onChange={change}
|
|
value={data.data}
|
|
label="Lorem"
|
|
hint="Ipsum"
|
|
name="data"
|
|
/>
|
|
)}
|
|
</Form>
|
|
));
|