import { Story, Meta } from '@storybook/react';
import React, { useState } from 'react';
import { Button } from "../Button/Button";
import { Dropdown, DropdownProps, ItemSelection } from './Dropdown';
export default {
title: 'Components/Atoms/Dropdown',
component: Dropdown,
argTypes: {
listItems: {
description: 'The items to list in the dropdown. Must follow the prescribed data structure'
},
onItemClick: {
description: 'Function to call on dropdown item click'
},
dropdownMethod: {
description: 'How to trigger the dropdown, either through hover or click',
},
placement: {
description: 'Where to place the dropdown in relation to its child component',
},
visible: {
description: 'Whether the dropdown is visible on the child component or not'
},
className: {
description: 'A CSS class that can be passed in to override the component\'s native styling, from root'
},
}
} as Meta;
const BTC_LOGO = ;
const ETH_LOGO = ;
const ZENO_LOGO = ;
const LIST_ITEMS = [
{
value: '1st menu item',
isDisabled: true
},
{
value: '2nd menu item',
},
{
value: 3
}
];
const COIN_ITEMS = [
{
value: BTC {BTC_LOGO}
},
{
value: ETH {ETH_LOGO}
},
{
value: ZENO {ZENO_LOGO}
},
];
const Template: Story = (args) => {
const [selected, setSelected] = useState(0);
const onItemSelect = (item: ItemSelection) => {
let index = parseInt(item.key);
setSelected(index);
}
return (