feat: Add component for grouped thumbnails (#5796)

2022-11-04 11:08:45 +05:30
parent 4bb5e812ba
commit dc3ee3464b
2 changed files with 144 additions and 0 deletions
--- a/app/javascript/dashboard/components/widgets/stories/ThumbnailGroup.stories.js
+++ 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: '<ThumbnailGroup v-bind="$props"/>',
+});
+
+export const Primary = Template.bind({});