diff --git a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue new file mode 100644 index 000000000..8bf621190 --- /dev/null +++ b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue @@ -0,0 +1,75 @@ + + + + diff --git a/app/javascript/dashboard/components/widgets/stories/ThumbnailGroup.stories.js b/app/javascript/dashboard/components/widgets/stories/ThumbnailGroup.stories.js new file mode 100644 index 000000000..b5dc8e932 --- /dev/null +++ b/app/javascript/dashboard/components/widgets/stories/ThumbnailGroup.stories.js @@ -0,0 +1,69 @@ +import ThumbnailGroup from '../ThumbnailGroup.vue'; + +export default { + title: 'Components/ThumbnailGroup', + component: ThumbnailGroup, + argTypes: { + usersList: { + defaultValue: [ + { + name: 'John', + id: 1, + thumbnail: '', + }, + { + name: 'John', + id: 2, + thumbnail: '', + }, + { + name: 'John', + id: 3, + thumbnail: '', + }, + { + name: 'John', + id: 4, + thumbnail: '', + }, + { + name: 'John', + id: 5, + thumbnail: '', + }, + { + name: 'John', + id: 6, + thumbnail: '', + }, + ], + control: { + type: 'object', + }, + }, + size: { + control: { + type: 'text', + }, + }, + moreThumbnailsText: { + control: { + type: 'text', + default: '2 more', + }, + }, + showMoreThumbnailsCount: { + control: { + type: 'boolean', + }, + }, + }, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { ThumbnailGroup }, + template: '', +}); + +export const Primary = Template.bind({});