feat(annotation): Add icon indicator for AnnotationActivity (#3176)

* feat(annotation): Add icon indicator for AnnotationActivity

* feat(annotation): Refactor badge icons to be part of Avatar

* feat(annotation): Align badge sizes with avatar size

As design system recommends, verified with Designers

Author: jankowiakdawid

src/components/avatar/Avatar.js.flow

@@ -18,6 +18,12 @@ type Props = {
      * Required if "name" is not specified.
      */
     avatarUrl?: ?string,
+    /**
+     * Icon React Element that will be shown as a badge in bottom right corner of Avatar.
+     *
+     * Will not be used if `shouldShowExternal` and `isExternal` is true, then GlobalBadge will be shown.
+     */
+    badgeIcon?: React.Element<any>,
     /** classname to add to the container element. */
     className?: string,
     /** Users id */
@@ -36,7 +42,16 @@ type Props = {
     size?: $Keys<typeof SIZES>,
 };
 
-function Avatar({ avatarUrl, className, name, id, isExternal, shouldShowExternal = false, size = '' }: Props) {
+function Avatar({
+    avatarUrl,
+    badgeIcon,
+    className,
+    name,
+    id,
+    isExternal,
+    shouldShowExternal = false,
+    size = '',
+}: Props) {
     const [hasImageErrored, setHasImageErrored] = React.useState<boolean>(false);
     const [prevAvatarUrl, setPrevAvatarUrl] = React.useState<$PropertyType<Props, 'avatarUrl'>>(null);
 
@@ -68,13 +83,15 @@ function Avatar({ avatarUrl, className, name, id, isExternal, shouldShowExternal
         avatar = <UnknownUserAvatar className="avatar-icon" />;
     }
 
+    let badge = null;
+    if (shouldShowExternal && isExternal) {
+        badge = <GlobeBadge16 className="bdl-Avatar-externalBadge" />;
+    } else if (badgeIcon) {
+        badge = <div className="bdl-Avatar-badge bdl-Avatar-iconBadge">{badgeIcon}</div>;
+    }
+
     return (
-        <Badgeable
-            className={classes}
-            bottomRight={
-                shouldShowExternal && isExternal ? <GlobeBadge16 className="bdl-Avatar-externalBadge" /> : undefined
-            }
-        >
+        <Badgeable className={classes} bottomRight={badge}>
             <span role="presentation">{avatar}</span>
         </Badgeable>
     );

src/components/avatar/Avatar.scss

@@ -55,6 +55,22 @@
         }
     }
 
+    &.avatar--iconBadge {
+        .bdl-Avatar-iconBadge {
+            border-width: 2px;
+
+            & > svg {
+                width: 12px;
+                height: 12px;
+            }
+        }
+
+        @include Badgeable-bottomRightBadge {
+            bottom: -4px;
+            left: calc(100% - 10px);
+        }
+    }
+
     @for $i from 1 through length($avatar-colors) {
         .avatar-initials[data-bg-idx='#{$i - 1}'] {
             background-color: nth($avatar-colors, $i);
@@ -81,6 +97,20 @@
                 left: calc(100% - 10px);
             }
         }
+
+        &.avatar--iconBadge {
+            line-height: 0; // .badgeable-container has `line-height: 1 which evaluates to 13px which is too much for small badge
+
+            @include Badgeable-bottomRightBadge {
+                bottom: -4px;
+                left: calc(100% - 10px);
+            }
+
+            .bdl-Avatar-iconBadge > svg {
+                width: 8px;
+                height: 8px;
+            }
+        }
     }
 
     &.avatar--large {
@@ -90,9 +120,21 @@
         .avatar-initials {
             font-size: 14px;
         }
+
+        &.avatar--iconBadge {
+            @include Badgeable-bottomRightBadge {
+                left: calc(100% - 14px);
+            }
+
+            .bdl-Avatar-iconBadge > svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
     }
 }
 
+.bdl-Avatar-badge,
 .bdl-Avatar-externalBadge {
     background-color: $white;
     border-color: $white;

src/components/avatar/Avatar.stories.tsx

@@ -1,4 +1,8 @@
 import * as React from 'react';
+import IconVerified from '../../icons/general/IconVerified';
+import IconTaskGeneral from '../../icons/two-toned/IconTaskGeneral';
+import IconAnnotation from '../../icons/two-toned/IconAnnotation';
+
 import Avatar from './Avatar';
 import notes from './Avatar.stories.md';
 
@@ -34,6 +38,47 @@ export const markedAsExternal = () => (
     </div>
 );
 
+export const withBadges = () => (
+    <div>
+        <Avatar id={1} name="Aaron Levie" badgeIcon={<IconTaskGeneral />} size="large" />
+        <br />
+        <Avatar id={1} name="Aaron Levie" badgeIcon={<IconTaskGeneral />} />
+        <br />
+        <Avatar id={1} name="Aaron Levie" badgeIcon={<IconTaskGeneral />} size="small" />
+        <br />
+        <br />
+
+        <Avatar id={1} name="Aaron Levie" badgeIcon={<IconAnnotation />} size="large" />
+        <br />
+        <Avatar id={1} name="Aaron Levie" badgeIcon={<IconAnnotation />} />
+        <br />
+        <Avatar id={1} name="Aaron Levie" badgeIcon={<IconAnnotation />} size="small" />
+        <br />
+        <br />
+
+        <Avatar
+            badgeIcon={<IconVerified className="completed" title="Verified user" />}
+            id={1}
+            name="Aaron Levie"
+            size="large"
+        />
+        <br />
+        <Avatar
+            avatarUrl="data:image/jpeg;base64,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"
+            badgeIcon={<IconVerified className="completed" title="Verified user" />}
+            id={1}
+            name="Aaron Levie"
+        />
+        <br />
+        <Avatar
+            badgeIcon={<IconVerified className="completed" title="Verified user" />}
+            id={1}
+            name="Aaron Levie"
+            size="small"
+        />
+    </div>
+);
+
 export const withMultipleAvatars = () => (
     <div>
         <Avatar id={1} name="Aaron Levie" />

src/components/avatar/Avatar.tsx

@@ -17,6 +17,12 @@ export interface AvatarProps {
      * Required if "name" is not specified.
      */
     avatarUrl?: string | null;
+    /**
+     * Icon React Element that will be shown as a badge in bottom right corner of Avatar.
+     *
+     * Will not be used if `shouldShowExternal` and `isExternal` is true, then GlobalBadge will be shown.
+     */
+    badgeIcon?: React.ReactElement;
     /** classname to add to the container element. */
     className?: string;
     /** Users id */
@@ -35,14 +41,27 @@ export interface AvatarProps {
     size?: keyof typeof SIZES | '';
 }
 
-function Avatar({ avatarUrl, className, name, id, isExternal, shouldShowExternal = false, size = '' }: AvatarProps) {
+function Avatar({
+    avatarUrl,
+    badgeIcon,
+    className,
+    name,
+    id,
+    isExternal,
+    shouldShowExternal = false,
+    size = '',
+}: AvatarProps) {
     const [hasImageErrored, setHasImageErrored] = React.useState<boolean>(false);
     const [prevAvatarUrl, setPrevAvatarUrl] = React.useState<AvatarProps['avatarUrl']>(null);
 
     const classes = classNames([
         'avatar',
         className,
-        { [`avatar--${size}`]: size && SIZES[size], 'avatar--isExternal': shouldShowExternal && isExternal },
+        {
+            [`avatar--${size}`]: size && SIZES[size],
+            'avatar--isExternal': shouldShowExternal && isExternal,
+            'avatar--iconBadge': !!badgeIcon,
+        },
     ]);
 
     // Reset hasImageErrored state when avatarUrl changes
@@ -67,13 +86,15 @@ function Avatar({ avatarUrl, className, name, id, isExternal, shouldShowExternal
         avatar = <UnknownUserAvatar className="avatar-icon" />;
     }
 
+    let badge = null;
+    if (shouldShowExternal && isExternal) {
+        badge = <GlobeBadge16 className="bdl-Avatar-externalBadge" />;
+    } else if (badgeIcon) {
+        badge = <div className="bdl-Avatar-badge bdl-Avatar-iconBadge">{badgeIcon}</div>;
+    }
+
     return (
-        <Badgeable
-            className={classes}
-            bottomRight={
-                shouldShowExternal && isExternal ? <GlobeBadge16 className="bdl-Avatar-externalBadge" /> : undefined
-            }
-        >
+        <Badgeable className={classes} bottomRight={badge}>
             <span>{avatar}</span>
         </Badgeable>
     );

src/elements/content-sidebar/activity-feed/Avatar.js

@@ -9,6 +9,7 @@ import type { GetAvatarUrlCallback } from '../../common/flowTypes';
 import type { User } from '../../../common/types/core';
 
 type Props = {
+    badgeIcon?: React.Element<any>,
     className?: string,
     getAvatarUrl?: GetAvatarUrlCallback,
     user: User,
@@ -61,11 +62,13 @@ class Avatar extends React.PureComponent<Props, State> {
     }
 
     render() {
-        const { user, className }: Props = this.props;
+        const { badgeIcon, className, user }: Props = this.props;
         const { avatarUrl }: State = this.state;
         const { id, name } = user;
 
-        return <AvatarComponent avatarUrl={avatarUrl} className={className} id={id} name={name} />;
+        return (
+            <AvatarComponent avatarUrl={avatarUrl} badgeIcon={badgeIcon} className={className} id={id} name={name} />
+        );
     }
 }
 

src/elements/content-sidebar/activity-feed/__tests__/__snapshots__/Avatar.test.js.snap

@@ -10,6 +10,7 @@ exports[`elements/content-sidebar/ActivityFeed/Avatar should render the avatar w
 
 exports[`elements/content-sidebar/ActivityFeed/Avatar should set the avatarUrl state from user prop 1`] = `
 <Badgeable
+  bottomRight={null}
   className="avatar"
 >
   <span>

src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js

@@ -23,6 +23,8 @@ import type { Annotation, AnnotationPermission, FeedItemStatus } from '../../../
 import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
 import type { SelectorItems, User } from '../../../../common/types/core';
 
+import IconAnnotation from '../../../../icons/two-toned/IconAnnotation';
+
 import './AnnotationActivity.scss';
 
 type Props = {
@@ -138,8 +140,8 @@ const AnnotationActivity = ({
                         'bcs-is-pending': isPending || error,
                     })}
                 >
-                    <Media.Figure>
-                        <Avatar getAvatarUrl={getAvatarUrl} user={createdByUser} />
+                    <Media.Figure className="bcs-AnnotationActivity-avatar">
+                        <Avatar getAvatarUrl={getAvatarUrl} user={createdByUser} badgeIcon={<IconAnnotation />} />
                     </Media.Figure>
                     <Media.Body>
                         <div className="bcs-AnnotationActivity-headline">

src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.scss

@@ -1,4 +1,5 @@
 @import '../../../common/variables';
+@import '../../mixins';
 
 .bcs-AnnotationActivity {
     position: relative;
@@ -16,6 +17,10 @@
     }
 }
 
+.bcs-AnnotationActivity-avatar {
+    position: relative;
+}
+
 .bcs-AnnotationActivity-headline {
     // Because the annotation menu is absolutely positioned,
     // this padding reserves that space so long headlines won't overlap with the menu

src/elements/content-sidebar/activity-feed/task-new/AvatarGroupAvatar.js

@@ -40,13 +40,17 @@ const AvatarGroupAvatar = React.memo<Props>(({ user, status, getAvatarUrl, class
         data-testid="avatar-group-avatar-container"
         {...rest}
     >
-        <Avatar className="bcs-AvatarGroupAvatar-avatar" user={user} getAvatarUrl={getAvatarUrl} />
-        <StatusIcon
-            status={status}
-            className={`bcs-AvatarGroupAvatar-statusIcon ${camelCase(status)}`}
-            height={12}
-            width={12}
-            title={<FormattedMessage {...messages.taskAssignmentCompleted} />}
+        <Avatar
+            badgeIcon={
+                <StatusIcon
+                    className={`${camelCase(status)}`}
+                    status={status}
+                    title={<FormattedMessage {...messages.taskAssignmentCompleted} />}
+                />
+            }
+            className="bcs-AvatarGroupAvatar-avatar"
+            getAvatarUrl={getAvatarUrl}
+            user={user}
         />
     </div>
 ));

src/elements/content-sidebar/activity-feed/task-new/AvatarGroupAvatar.scss

@@ -1,5 +1,5 @@
 @import '../../../common/variables';
-@import './mixins';
+@import '../../mixins';
 
 $bcs-AvatarGroupAvatar-avatar-size: 32px;
 
@@ -16,7 +16,3 @@ $bcs-AvatarGroupAvatar-avatar-size: 32px;
     width: 100%;
     height: 100%;
 }
-
-.bcs-AvatarGroupAvatar-statusIcon {
-    @include avatar-badge-icon;
-}