diff --git a/lib/src/components/personSearch/PersonSearch.tsx b/lib/src/components/personSearch/PersonSearch.tsx index ad536808c..1caf64dbb 100644 --- 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} /> ))} diff --git a/lib/src/modules/person/Person.tsx b/lib/src/modules/person/Person.tsx index ff30b3c1f..85d6256b8 100644 --- 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({ {!!subtitle && (
+ {pending && ( + <> + Pending •{" "} + + )} {shouldHighlightSubtitle ? ( ) : ( @@ -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 index 5c0df1d98..1adc73c8f 100644 --- 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 index 7ae29c52f..cc28d6b55 100644 --- 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 ( @@ -58,6 +70,7 @@ export function AssigneeDropdown(args: any) { subtitle={unassignee.subtitle} avatarUrl={unassignee.avatarUrl} selected={unassignee.selected} + pending={unassignee.pending} interactive bordered />