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

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`,
       };

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({});

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;