From b9eb9a5e48b39c747ef9997ac194ae725007f02c Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Sat, 9 Jul 2022 14:03:55 +0530
Subject: [PATCH] feat: Support square variants of thumbnail and avatar
 components (#5003)

---
 .../dashboard/components/widgets/Avatar.vue   |  7 ++-
 .../components/widgets/Thumbnail.stories.js   | 61 +++++++++++++++++++
 .../components/widgets/Thumbnail.vue          | 12 +++-
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/dashboard/components/widgets/Thumbnail.stories.js

diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index 1d67842a2..daf044288 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -40,13 +40,18 @@ export default {
       type: Boolean,
       default: true,
     },
+    variant: {
+      type: String,
+      default: 'circle',
+    },
   },
   computed: {
     style() {
       let style = {
         width: `${this.size}px`,
         height: `${this.size}px`,
-        borderRadius: this.rounded ? '50%' : 0,
+        borderRadius:
+          this.variant === 'square' ? 'var(--border-radius-large)' : '50%',
         lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
         fontSize: `${Math.floor(this.size / 2.5)}px`,
       };
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.stories.js b/app/javascript/dashboard/components/widgets/Thumbnail.stories.js
new file mode 100644
index 000000000..a6fc55f8a
--- /dev/null
+++ 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({});
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index d12a927ef..ea0e0f99a 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -12,6 +12,7 @@
       :username="username"
       :class="thumbnailClass"
       :size="avatarSize"
+      :variant="variant"
     />
     <img
       v-if="badge === 'instagram_direct_message'"
@@ -119,6 +120,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    variant: {
+      type: String,
+      default: 'circle',
+    },
   },
   data() {
     return {
@@ -145,7 +150,9 @@ export default {
     },
     thumbnailClass() {
       const classname = this.hasBorder ? 'border' : '';
-      return `user-thumbnail ${classname}`;
+      const variant =
+        this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square';
+      return `user-thumbnail ${classname} ${variant}`;
     },
   },
   watch: {
@@ -173,6 +180,9 @@ export default {
 
   .user-thumbnail {
     border-radius: 50%;
+    &.thumbnail-square {
+      border-radius: var(--border-radius-large);
+    }
     height: 100%;
     width: 100%;
     box-sizing: border-box;