DocSpace-buildtools/packages/asc-web-components/input-with-chips/input-with-chips.stories.js

53 lines
1.3 KiB
JavaScript

import React from "react";
import InputWithChips from ".";
const Options = [
{ label: "Ivan Petrov", value: "myname@gmul.com" },
{ label: "Donna Cross", value: "myname45@gmul.com" },
{ label: "myname@gmul.co45", value: "myname@gmul.co45" },
{ label: "Lisa Cooper", value: "myn348ame@gmul.com" },
{ label: "myname19@gmail.com", value: "myname19@gmail.com" },
{ label: "myname@gmail.com", value: "myname@gmail.com" },
{
label: "mynameiskonstantine1353434@gmail.com",
value: "mynameiskonstantine1353434@gmail.com",
},
{
label: "mynameiskonstantine56454864846455488875454654846454@gmail.com",
value: "mynameiskonstantine56454864846455488875454654846454@gmail.com",
},
{
label: "mynameiskonstantine3246@gmail.com",
value: "mynameiskonstantine3246@gmail.com",
},
];
const Wrapper = (props) => (
<div
style={{
height: "220px",
}}
>
{props.children}
</div>
);
const Template = (args) => (
<Wrapper>
<InputWithChips {...args} />
</Wrapper>
);
export const Default = Template.bind({});
Default.args = {
options: Options,
onChange: (selected) => console.log(selected),
placeholder: "Invite people by name or email",
};
export const Empty = Template.bind({});
Empty.args = {
options: [],
placeholder: "Type your chips...",
};