feat: Adds storybook for search component. (#2444)

* feat: Adds storybook for search component.

* Review fixes

* Uses woot-label for conv-id

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.stories.js

@@ -0,0 +1,41 @@
+import ResultItem from './ResultItem';
+
+export default {
+  title: 'Components/Search/Result Items',
+  component: ResultItem,
+  argTypes: {
+    conversationId: {
+      defaultValue: '1',
+      control: {
+        type: 'number',
+      },
+    },
+    userName: {
+      defaultValue: 'John davies',
+      control: {
+        type: 'text',
+      },
+    },
+    inboxName: {
+      defaultValue: 'Support',
+      control: {
+        type: 'text',
+      },
+    },
+    timestamp: {
+      defaultValue: '1618046084',
+      control: {
+        type: 'number',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ResultItem },
+  template: '<result-item v-bind="$props"></result-item>',
+});
+
+export const ResultItems = Template.bind({});
+ResultItems.args = {};

app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue

@@ -4,11 +4,15 @@
       <div class="message">
         <i class="ion-ios-chatboxes-outline" />
         <div class="conversation">
-          <div class="name-wrap">
+          <div class="user-wrap">
-            <span class="user-name">{{ userName }}</span>
+            <div class="name-wrap">
-            <div>
+              <span class="sub-block-title">{{ userName }}</span>
-              <span class="conversation-id"># {{ conversationId }}</span>
             </div>
+            <woot-label
+              :title="conversationsId"
+              :small="true"
+              color-scheme="secondary"
+            />
           </div>
           <span class="inbox-name">{{ inboxName }}</span>
         </div>
@@ -69,6 +73,9 @@ export default {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
     }),
+    conversationsId() {
+      return `# ${this.conversationId}`;
+    },
     readableTime() {
       if (!this.timestamp) {
         return '';
@@ -124,10 +131,6 @@ export default {
     .ion-ios-chatboxes-outline {
       color: var(--white);
     }
-    .conversation-id {
-      background: var(--w-50);
-      color: var(--s-500);
-    }
   }
 }
 
@@ -149,35 +152,26 @@ export default {
   padding: var(--space-smaller) var(--space-one);
 }
 
-.name-wrap {
+.user-wrap {
   display: flex;
-  width: 20rem;
 
-  .user-name {
+  .name-wrap {
-    font-size: var(--font-size-default);
+    max-width: 20rem;
-    font-weight: var(--font-weight-bold);
-    margin-right: var(--space-micro);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-  }
 
-  .conversation-id {
+    .sub-block-title {
-    background: var(--w-400);
+      font-weight: var(--font-weight-bold);
-    border-radius: var(--border-radius-normal);
+      margin-right: var(--space-micro);
-    color: var(--w-50);
+    }
-    align-items: center;
-    font-size: var(--font-size-mini);
-    font-weight: var(--font-weight-bold);
-    padding: 0 var(--space-smaller);
-    white-space: nowrap;
   }
 }
 
 .inbox-name {
   border-radius: var(--border-radius-normal);
   color: var(--s-500);
-  font-size: var(--font-size-normal);
+  font-size: var(--font-size-mini);
   font-weight: var(--font-weight-medium);
 }
 

app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.stories.js

@@ -0,0 +1,47 @@
+import SearchMessage from './SearchMessageItem';
+
+export default {
+  title: 'Components/Search/Messages',
+  component: SearchMessage,
+  argTypes: {
+    userName: {
+      defaultValue: 'John davies',
+      control: {
+        type: 'text',
+      },
+    },
+    timestamp: {
+      defaultValue: '1618046084',
+      control: {
+        type: 'number',
+      },
+    },
+    messageType: {
+      control: {
+        type: 'number',
+      },
+    },
+    content: {
+      defaultValue:
+        'some designers and developers around the web know this and have put together a bunch of text generators',
+      control: {
+        type: 'text',
+      },
+    },
+    searchTerm: {
+      defaultValue: 'developers',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { SearchMessage },
+  template: '<search-message v-bind="$props"></-item>',
+});
+
+export const Messages = Template.bind({});
+Messages.args = {};

app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue

@@ -3,7 +3,7 @@
     <div class="search-message">
       <div class="user-wrap">
         <div class="name-wrap">
-          <span class="user-name">{{ userName }}</span>
+          <span class="text-block-title">{{ userName }}</span>
           <div>
             <i v-if="isOutgoingMessage" class="ion-headphone" />
           </div>
@@ -109,10 +109,9 @@ export default {
 
 .name-wrap {
   display: flex;
-  width: 22rem;
+  max-width: 22rem;
 
-  .user-name {
+  .text-block-title {
-    font-size: var(--font-size-small);
     font-weight: var(--font-weight-bold);
     text-overflow: ellipsis;
     overflow: hidden;
@@ -141,6 +140,7 @@ p {
 .message-content {
   font-size: var(--font-size-small);
   margin-bottom: var(--space-micro);
+  margin-top: var(--space-micro);
   padding: 0;
   line-height: 1.35;
   overflow-wrap: break-word;