Merge pull request #1338 from Bynder/feature/GC-3901-UI-for-pending-u…

…sers-assigned-within-Item-Editor-workflow-dropdown ✨ Render pending ui within avatar popover text and participants
Bynder · Jan 9, 2024 · 8549540 · 8549540
2 parents e22e631 + 51f28be
commit 8549540
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 6 deletions.
diff --git a/lib/Avatar/AvatarWithPopover.tsx b/lib/Avatar/AvatarWithPopover.tsx
@@ -20,6 +20,7 @@ export function AvatarWithPopover({
   name,
   children,
   overlayPosition,
+  pending,
   ...rest
 }: any) {
   const id = uuid();
@@ -35,7 +36,7 @@ export function AvatarWithPopover({
     >
       <span id={id} role="button">
         <Avatar
-          email={email}
+          email={`${pending ? "Pending • " : ""}${email}`}
           name={name}
           {...rest}
           className="gui-avatar--with-toggle"

diff --git a/lib/Avatar/stories/Avatar.stories.tsx b/lib/Avatar/stories/Avatar.stories.tsx
@@ -3,10 +3,10 @@ import React from "react";
 import faker from "faker";
 import {
   Avatar as AvatarComponent,
-  AvatarWithPopover,
-  ParticipantInfo,
   AvatarInformation,
+  AvatarWithPopover,
   Button,
+  ParticipantInfo,
 } from "../../index";
 import StoryItem from "../../../stories/styleguide/StoryItem";
 import { AvatarGroupMock } from "./AvatarGroupMock";
@@ -83,6 +83,33 @@ export function Avatar(args: any) {
         </AvatarComponent>
       </StoryItem>
 
+      <StoryItem
+        title="AvatarComponent (with inline information) who is pending"
+        description="An avatar can display the users name & email inline and displays if they are pending"
+      >
+        <AvatarComponent
+          {...props}
+          additional={
+            <Button types={["link-danger", "size-sm"]} clickHandler={() => {}}>
+              Link type
+            </Button>
+          }
+        >
+          <AvatarInformation name={props.name} email={props.email} pending />
+        </AvatarComponent>
+      </StoryItem>
+
+      <StoryItem
+        title="AvatarComponent (with popover) who is pending"
+        description="An avatar can show a tooltip on hover that also shows pending status."
+      >
+        <div className="gui-h-display-flex">
+          <AvatarWithPopover {...props} pending>
+            <ParticipantInfo name={props.name} email={props.email} pending />
+          </AvatarWithPopover>
+        </div>
+      </StoryItem>
+
       <StoryItem
         title="AvatarComponent Groups"
         description="An avatar group has a toggle to show extra users."

diff --git a/lib/ParticipantInfo/index.tsx b/lib/ParticipantInfo/index.tsx
@@ -1,10 +1,22 @@
 import React from "react";
 
-export function ParticipantInfo({ name, email }: any) {
+export interface ParticipantInfoProps {
+  name: string;
+  email: string;
+  pending?: boolean;
+}
+
+export function ParticipantInfo({
+  name,
+  email,
+  pending = false,
+}: ParticipantInfoProps) {
   return (
     <div className="gui-participant_info">
       <p className="gui-participant_info__name">{name}</p>
-      <p className="gui-participant_info__email">{email}</p>
+      <p className="gui-participant_info__email">{`${
+        pending ? "Pending • " : ""
+      }${email}`}</p>
     </div>
   );
 }

diff --git a/stories/components/ParticipantInfo.stories.tsx b/stories/components/ParticipantInfo.stories.tsx
@@ -17,7 +17,12 @@ export function ParticipantInfo() {
         <ParticipantInfoComponent
           name="Angus Edwardson"
           email="example@gmail.com"
-          pillboxText="Assigned"
+        />
+        <br />
+        <ParticipantInfoComponent
+          name="Alan Turing"
+          email="alan@turing.com"
+          pending
         />
       </StoryItem>
     </div>