feat: Support square variants of thumbnail and avatar components (#5003)

2022-07-09 14:03:55 +05:30
parent 43f46e96d4
commit b9eb9a5e48
3 changed files with 78 additions and 2 deletions
--- a/app/javascript/dashboard/components/widgets/Thumbnail.stories.js
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.stories.js
@@ -0,0 +1,61 @@
+import Thumbnail from './Thumbnail.vue';
+
+export default {
+  title: 'Components/Thumbnail',
+  component: Thumbnail,
+  argTypes: {
+    src: {
+      control: {
+        type: 'text',
+      },
+    },
+    size: {
+      control: {
+        type: 'text',
+      },
+    },
+    badge: {
+      control: {
+        type: 'select',
+        options: ['fb', 'whatsapp', 'sms', 'twitter-tweet', 'twitter-dm'],
+      },
+    },
+    variant: {
+      control: {
+        type: 'select',
+        options: ['circle', 'square'],
+      },
+    },
+    username: {
+      defaultValue: 'John Doe',
+      control: {
+        type: 'text',
+      },
+    },
+    status: {
+      defaultValue: 'circle',
+      control: {
+        type: 'select',
+        options: ['online', 'busy'],
+      },
+    },
+    hasBorder: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    shouldShowStatusAlways: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Thumbnail },
+  template: '<thumbnail v-bind="$props" @click="onClick">{{label}}</thumbnail>',
+});
+
+export const Primary = Template.bind({});