✨ Add pending state to comment form and user search

lib/Comment/CommentForm.tsx

@@ -1,15 +1,15 @@
-import React, { useState, useRef, useContext, useEffect } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 // @ts-expect-error TS(7016): Could not find a declaration file for module 'reac... Remove this comment to see the full error message
 import { Mention, MentionsInput } from "react-mentions";
 import cx from "classnames";
 import {
-  Comment,
   Avatar,
   AvatarInformation,
-  ShortcutTrigger,
   ButtonPrimary,
-  useLoader,
   ButtonTertiary,
+  Comment,
+  ShortcutTrigger,
+  useLoader,
 } from "lib";
 import Icon from "../Icon";
 import { CommentFailed } from "./CommentFailed";
@@ -137,6 +137,7 @@ function CommentForm({
                 <AvatarInformation
                   email={`@${suggestion.display}`}
                   name={suggestion.name}
+                  pending={suggestion.pending}
                 />
               </Avatar>
             )}

lib/UserSearch/UserSearchList.tsx

@@ -40,6 +40,7 @@ function UserSearchList({
                     name={user.name}
                   />
                 }
+                pending={user.pending}
               />
             </Avatar>
           </Dropdown.Action>

stories/components/UserSearch.stories.tsx

@@ -1,54 +1,61 @@
-import React from 'react';
-import { UserSearch as UserSearchComponent } from '../../lib';
-import StoryItem from '../styleguide/StoryItem';
+import React from "react";
+import { UserSearch as UserSearchComponent } from "../../lib";
+import StoryItem from "../styleguide/StoryItem";
 
 const mockUser = {
   id: 2,
-  name: 'Bruce',
+  name: "Bruce",
   avatar:
-    'https://gathercontent-production-avatars.s3-us-west-2.amazonaws.com/208205_yHGd7vA5HRxsnMQpES4UzjJ7Yxgn6Bp54165gqksRXyDJhuOnW88H6djhLJeE2BZ.jpg',
-  initials: 'BB',
-  display: 'brucebanner',
-  email: '[email protected]'
+    "https://gathercontent-production-avatars.s3-us-west-2.amazonaws.com/208205_yHGd7vA5HRxsnMQpES4UzjJ7Yxgn6Bp54165gqksRXyDJhuOnW88H6djhLJeE2BZ.jpg",
+  initials: "BB",
+  display: "brucebanner",
+  email: "[email protected]",
 };
 
 const mockUsers = [
   mockUser,
   {
-    id: 'saul',
-    display: 'saulgoodman',
-    name: 'Saul Goodman',
-    initials: 'SG',
-    email: '[email protected]'
+    id: 1337,
+    name: "Alan Turing",
+    initials: "AT",
+    display: "Alan T.",
+    email: "[email protected]",
+    pending: "true",
   },
   {
-    id: '456',
-    display: 'jessepinkman',
-    name: 'Jesse Pinkman',
-    email: '[email protected]',
-    initials: 'JP',
-    url:
-      'https://d3iw72m71ie81c.cloudfront.net/2eae47ef-6f37-46fe-a02b-52cff401a8f9-me.jpg'
-  }
+    id: "saul",
+    display: "saulgoodman",
+    name: "Saul Goodman",
+    initials: "SG",
+    email: "[email protected]",
+  },
+  {
+    id: "456",
+    display: "jessepinkman",
+    name: "Jesse Pinkman",
+    email: "[email protected]",
+    initials: "JP",
+    url: "https://d3iw72m71ie81c.cloudfront.net/2eae47ef-6f37-46fe-a02b-52cff401a8f9-me.jpg",
+  },
 ];
 
 export default {
-  title: 'Legacy/User Search',
+  title: "Legacy/User Search",
   component: UserSearchComponent,
   args: {
     displayEmail: true,
     useDisplayToggle: false,
-    subheading: '',
-    noUserDisplay: 'Looks like there are no people!',
-    searchHeading: 'Search...',
-    minUserLength: 0
+    subheading: "",
+    noUserDisplay: "Looks like there are no people!",
+    searchHeading: "Search...",
+    minUserLength: 0,
   },
   argTypes: {
-    addUser: { action: 'User was clicked' }
-  }
+    addUser: { action: "User was clicked" },
+  },
 };
 
-export const UserSearch = (args: any) => {
+export function UserSearch(args: any) {
   return (
     <div>
       <StoryItem
@@ -57,10 +64,10 @@ export const UserSearch = (args: any) => {
       >
         <UserSearchComponent
           users={mockUsers}
-          selectedUserIds={['456']}
+          selectedUserIds={["456"]}
           {...args}
         />
       </StoryItem>
     </div>
   );
-};
+}