Merge pull request #1330 from Bynder/feature/GC-3802-Add-pending-stat…

…e-to-the-nameplate-UI-component-actual 💄 GC-3802 Add pending state to the nameplate UI component
Bynder · Dec 12, 2023 · 88cec25 · 88cec25
2 parents b4ec4bb + d6ebdbb
commit 88cec25
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/lib/src/components/personSearch/PersonSearch.tsx b/lib/src/components/personSearch/PersonSearch.tsx
@@ -73,6 +73,7 @@ export function PersonSearch({
                         highlightText={searchValue}
                         colour={person.colour}
                         key={person.email}
+                        pending={person.pending}
                       />
                     ))}
                   </DropdownContent.Body>

diff --git a/lib/src/modules/person/Person.tsx b/lib/src/modules/person/Person.tsx
@@ -18,6 +18,7 @@ export function Person({
   colour,
   locked,
   lockedTooltipText,
+  pending,
 }: any) {
   const classes = cx("gui-person", className, {
     "gui-person-selected": selected,
@@ -44,6 +45,11 @@ export function Person({
         </div>
         {!!subtitle && (
           <div className="gui-person-subtitle">
+            {pending && (
+              <>
+                <span className="gui-person-pending">Pending</span> •{" "}
+              </>
+            )}
             {shouldHighlightSubtitle ? (
               <TextHighlighter highlight={highlightText} text={subtitle} />
             ) : (
@@ -81,4 +87,5 @@ Person.defaultProps = {
   highlightText: "",
   locked: false,
   lockedTooltipText: "",
+  pending: false,
 };
diff --git a/lib/src/modules/person/person.scss b/lib/src/modules/person/person.scss
@@ -61,3 +61,7 @@
 .gui-person-bordered {
   @apply border border-t-0 border-l-0 border-r-0 border-solid border-neutral-90;
 }
+
+.gui-person-pending {
+  @apply text-purple-primary;
+}
diff --git a/lib/src/prefabs/assigneeDropdown/AssigneeDropdown.stories.tsx b/lib/src/prefabs/assigneeDropdown/AssigneeDropdown.stories.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import {
   AssigneeDropdown as AssigneeDropdownComponent,
-  Person,
   DropdownContent,
+  Person,
 } from "lib";
 // @ts-expect-error TS(2307): Cannot find module 'stories/styleguide/StoryItem' ... Remove this comment to see the full error message
 import StoryItem from "stories/styleguide/StoryItem";
@@ -23,10 +23,21 @@ export function AssigneeDropdown(args: any) {
     subtitle: faker.internet.email(),
     avatarUrl: faker.image.avatar(),
     selected: faker.random.boolean(),
+    pending: false,
   });
 
-  const assigned = [getPerson(), getPerson()];
-  const unassigned = [getPerson(), getPerson(), getPerson(), getPerson()];
+  const assigned = [
+    { ...getPerson(), pending: true },
+    getPerson(),
+    getPerson(),
+  ];
+  const unassigned = [
+    { ...getPerson(), pending: true },
+    getPerson(),
+    getPerson(),
+    getPerson(),
+    getPerson(),
+  ];
 
   return (
     <StoryItem
@@ -45,6 +56,7 @@ export function AssigneeDropdown(args: any) {
               subtitle={assignee.subtitle}
               avatarUrl={assignee.avatarUrl}
               selected={assignee.selected}
+              pending={assignee.pending}
               interactive
               bordered
             />
@@ -58,6 +70,7 @@ export function AssigneeDropdown(args: any) {
               subtitle={unassignee.subtitle}
               avatarUrl={unassignee.avatarUrl}
               selected={unassignee.selected}
+              pending={unassignee.pending}
               interactive
               bordered
             />