@orfeas126/box-ui-elements
Version:
Box UI Elements
49 lines (45 loc) • 1.63 kB
Flow
import React, { useState } from 'react';
import PillCloud from './PillCloud';
import notes from './PillCloud.stories.md';
const pills = [
{ value: 0, displayText: 'Box' },
{ value: 1, displayText: 'Fox' },
{ value: 2, displayText: 'Socks' },
{ value: 3, displayText: 'Flocks' },
{ value: 4, displayText: 'Chalks' },
{ value: 5, displayText: 'Locks' },
{ value: 6, displayText: 'long pill, very very long pill, so long that it breaks css boundaries' },
{ value: 7, displayText: 'Rocks' },
{ value: 8, displayText: 'Crocs' },
{ value: 9, displayText: 'Mox' },
{ value: 10, displayText: 'Stalks' },
{ value: 11, displayText: 'Clocks' },
{ value: 12, displayText: 'Lox' },
{ value: 13, displayText: 'Blocks' },
{ value: 14, displayText: 'Ox' },
{ value: 15, displayText: 'another long pill, very very long pill, so long that it breaks css boundaries' },
];
export const regular = () => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const [selectedOption, setSelectedOption] = useState(pills[5]);
return (
<div>
<PillCloud
onSelect={option => {
setSelectedOption(option);
}}
options={pills}
selectedOptions={[selectedOption]}
buttonProps={{ 'data-button-type': 'pill-btn' }}
/>
<div id="pill-cloud-output">Selected Pill: {selectedOption.displayText}</div>
</div>
);
};
export default {
title: 'Components/PillCloud',
component: PillCloud,
parameters: {
notes,
},
};