Chatwoot/app/javascript/shared/components/ui/MultiselectDropdown.stories.js
Sivin Varghese f2b5e328bb
feat: Update agent and team multi-select with new multi-select dropdown (#2516)
* feat: Update agent/team multiselect styles

* Component name fixes

* Adds key control for our multiselect dropdown and component name spell fix

* Minor fixes

* Review fixes

* Minor fixes

* Minor fixes

* Review fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
2021-07-29 17:44:37 +05:30

65 lines
1.3 KiB
JavaScript

import { action } from '@storybook/addon-actions';
import Dropdown from './MultiselectDropdown';
export default {
title: 'Components/Dropdown/Multiselect Dropdown',
component: Dropdown,
argTypes: {
options: {
control: {
type: 'object',
},
},
selectedItem: {
control: {
type: 'object',
},
},
multiselectorTitle: {
control: {
type: 'text',
},
},
multiselectorPlaceholder: {
control: {
type: 'text',
},
},
noSearchResult: {
control: {
type: 'text',
},
},
inputPlaceholder: {
control: {
type: 'text',
},
},
},
};
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Dropdown },
template: '<dropdown v-bind="$props" @click="onClick"></dropdown>',
});
export const MultiselectDropdown = Template.bind({});
MultiselectDropdown.args = {
onClick: action('Opened'),
options: [
{
id: 1,
availability_status: 'online',
name: 'James Philip',
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
},
],
selectedItem: {
id: 1,
availability_status: 'online',
name: 'James Philip',
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
},
};