[DSS-157] Avatar - Custom Icon and Color

docs/app/views/examples/components/avatar/_preview.html.erb

@@ -86,6 +86,34 @@
   } %>
 </div>
 
+<h3>Avatar Badges with Custom Color and Icon</h3>
+<div class="sage-avatar-wrapper">
+  <%= sage_component SageAvatar, {
+    badge: true,
+    badge_foregroundColor: "yellow",
+    badge_backgroundColor: "#4232a8",
+    badge_icon: "play-circle",
+    size: "80px",
+    image: {
+      alt: "Court's profile image",
+      src: "avatar/court.png",
+      id: "custom_id"
+    }
+  } %>
+  <%= sage_component SageAvatar, {
+    badge: true,
+    badge_foregroundColor: "red-300",
+    badge_backgroundColor: "#fff",
+    badge_icon: "danger",
+    size: "80px",
+    image: {
+      alt: "Court's profile image",
+      src: "avatar/court.png",
+      id: "custom_id"
+    }
+  } %>
+</div>
+
 <h3>Custom Colors</h3>
 <div class="sage-avatar-wrapper">
   <%= sage_component SageAvatar, { size: "24px",  color: "purple" } %>

docs/app/views/examples/components/avatar/_props.html.erb

@@ -4,6 +4,24 @@
   <td><%= md('Boolean') %></td>
   <td><%= md('`false`') %></td>
 </tr>
+<tr>
+  <td><%= md('`badge_backgroundColor`') %></td>
+  <td><%= md('Sets the badge icon background color. Provide either a Sage color name or a custom Hex color value. Use `SageTokens::COLOR_PALETTE` for hex values from the full Sage color palette. If not set, will default to white.') %></td>
+  <td><%= md('String') %></td>
+  <td><%= md('`false`') %></td>
+</tr>
+<tr>
+  <td><%= md('`badge_foregroundColor`') %></td>
+  <td><%= md('Sets the badge icon stroke/fill color. Use `SageTokens::COLOR_SLIDER` for Sage system colors. If not set, will default to `primary-300`.') %></td>
+  <td><%= md('String') %></td>
+  <td><%= md('`false`') %></td>
+</tr>
+<tr>
+  <td><%= md('`badge_icon`') %></td>
+  <td><%= md('Sets a Sage icon. If not set, will defaul to `check-circle-filled`.') %></td>
+  <td><%= md('Boolean') %></td>
+  <td><%= md('`false`') %></td>
+</tr>
 <tr>
   <td><%= md('`color`') %></td>
   <td><%= md('

docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb

@@ -31,6 +31,9 @@ module SageSchemas
 
   AVATAR = {
     badge: [:optional, NilClass, TrueClass],
+    badge_foregroundColor: [:optional, NilClass, Set.new(SageSchemas::COLOR_SLIDER)],
+    badge_backgroundColor: [:optional, NilClass, Set.new(SageTokens::COLORS), String],
+    badge_icon: [:optional, NilClass, SageSchemas::ICON],
     centered: [:optional, NilClass, TrueClass],
     color: [:optional, NilClass, SageSchemas::COLORS],
     image: [:optional, NilClass, { alt: [:optional, NilClass, String], src: String, id: [:optional, NilClass, String] }],

docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb

@@ -26,6 +26,7 @@ end
     sage-avatar
     <%= "sage-avatar--#{component.color}" if component.color %>
     <%= "sage-avatar--centered" if component.centered %>
+    <%= "sage-avatar--custom-badge" if component.badge_backgroundColor || component.badge_foregroundColor || component.badge_icon %>
     <%= component.generated_css_classes %>
   "
   <%= component.generated_html_attributes.html_safe %>
@@ -34,11 +35,18 @@ end
   <% end %>
 >
   <% if component.badge %>
-    <div class="sage-avatar__badge">
+    <div class="
+      sage-avatar__badge
+      <%= "sage-avatar__badge--custom-bg" if component.badge_backgroundColor %>
+      "
+      <% if component.badge_backgroundColor.present? %>
+        style="--badge-custom-bg-color: <%= component.badge_backgroundColor %>"
+      <% end %>
+    >
       <%= sage_component SageIcon, {
-        icon: "check-circle-filled",
+        icon: component.badge_icon ? component.badge_icon : "check-circle-filled",
         size: badge_icon_size,
-        color: "primary-300",
+        color: component.badge_foregroundColor ? component.badge_foregroundColor : "primary-300",
       } %>
     </div>
   <% end %>

packages/sage-assets/lib/stylesheets/components/_avatar.scss

@@ -160,9 +160,17 @@ $-avatar-group-item-sizes: (
   border-radius: sage-border(radius-round);
   border: rem(2px) solid sage-color(white);
 
+  &.sage-avatar__badge--custom-bg {
+    background-color: var(--badge-custom-bg-color);
+  }
+
   i {
     display: flex;
   }
+
+  .sage-avatar--custom-badge & {
+    border: 0;
+  }
 }
 
 .sage-avatar__initials {

packages/sage-react/lib/Avatar/Avatar.jsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { SageTokens } from '../configs';
 import { Icon } from '../Icon';
 import { AVATAR_COLORS } from './configs';
 
 export const Avatar = ({
   badge,
+  badgeBackgroundColor,
+  badgeForegroundColor,
+  badgeIcon,
   className,
   centered,
   color,
@@ -19,10 +23,19 @@ export const Avatar = ({
     className,
     {
       'sage-avatar--centered': centered,
+      'sage-avatar--custom-badge': badgeBackgroundColor || badgeIcon || badgeForegroundColor,
       [`sage-avatar--${color}`]: color,
     }
   );
 
+  const badgeClassnames = classnames(
+    'sage-avatar__badge',
+    className,
+    {
+      'sage-avatar__badge--custom-bg': badgeBackgroundColor
+    }
+  );
+
   const style = {};
 
   if (size) {
@@ -55,10 +68,13 @@ export const Avatar = ({
   return (
     <div className={classNames} style={style} {...rest}>
       {badge && (
-        <div className="sage-avatar__badge">
+        <div
+          className={badgeClassnames}
+          style={{ '--badge-custom-bg-color': badgeBackgroundColor || '' }}
+        >
           <Icon
-            icon={Icon.ICONS.CHECK_CIRCLE_FILLED}
-            color={Icon.COLORS.PRIMARY_300}
+            icon={badgeIcon || Icon.ICONS.CHECK_CIRCLE_FILLED}
+            color={badgeForegroundColor || Icon.COLORS.PRIMARY_300}
             size={setBadgeSize()}
           />
         </div>
@@ -77,6 +93,9 @@ Avatar.COLORS = AVATAR_COLORS;
 
 Avatar.defaultProps = {
   badge: false,
+  badgeBackgroundColor: null,
+  badgeForegroundColor: null,
+  badgeIcon: null,
   centered: false,
   className: '',
   color: AVATAR_COLORS.DEFAULT,
@@ -87,6 +106,9 @@ Avatar.defaultProps = {
 
 Avatar.propTypes = {
   badge: PropTypes.bool,
+  badgeBackgroundColor: PropTypes.string,
+  badgeForegroundColor: PropTypes.oneOf(Object.values(SageTokens.COLOR_SLIDERS)),
+  badgeIcon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
   centered: PropTypes.bool,
   className: PropTypes.string,
   color: PropTypes.oneOf(Object.values(AVATAR_COLORS)),

packages/sage-react/lib/Avatar/Avatar.spec.jsx

@@ -0,0 +1,56 @@
+require('../test/testHelper');
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SageTokens } from '../configs';
+import { Avatar } from './Avatar';
+
+describe('Sage Avatar', () => {
+  it('renders a badge icon when set', () => {
+    const defaultProps = {
+      badge: true,
+      size: '48px',
+    };
+
+    render(<Avatar {...defaultProps} />);
+    const badge = document.querySelector('.sage-avatar__badge');
+    expect(badge).not.toBeNull();
+  });
+
+  it('correctly updates the icon when set', () => {
+    const defaultProps = {
+      badge: true,
+      badgeIcon: SageTokens.ICONS.DANGER_FILLED,
+      size: '48px',
+    };
+
+    render(<Avatar {...defaultProps} />);
+    const badgeIcon = document.querySelector('.sage-icon');
+    expect(badgeIcon).not.toHaveClass('[class*="sage-icon-check-circle-filled-"');
+  });
+
+  it('correctly updates background color when set', () => {
+    const defaultProps = {
+      badge: true,
+      badgeBackgroundColor: '#262',
+      size: '48px',
+    };
+
+    render(<Avatar {...defaultProps} />);
+    const badge = document.querySelector('.sage-avatar__badge--custom-bg');
+    const badgeBackground = window.getComputedStyle(badge).getPropertyValue('--badge-custom-bg-color');
+    expect(badgeBackground).toEqual('#262');
+  });
+
+  it('correctly updates foreground color when set', () => {
+    const defaultProps = {
+      badge: true,
+      badgeForegroundColor: 'sage-300',
+      size: '48px',
+    };
+
+    render(<Avatar {...defaultProps} />);
+    const badgeIcon = document.querySelector('.sage-icon');
+    expect(badgeIcon).toHaveClass('t-sage--color-sage-300');
+  });
+});

packages/sage-react/lib/Avatar/Avatar.story.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { selectArgs } from '../story-support/helpers';
+import { SageTokens } from '../configs';
 import { Avatar } from './Avatar';
 
 export default {
@@ -17,7 +18,9 @@ export default {
   },
   argTypes: {
     ...selectArgs({
-      color: Avatar.COLORS
+      badgeForegroundColor: SageTokens.COLOR_SLIDERS,
+      badgeIcon: SageTokens.ICONS,
+      color: Avatar.COLORS,
     })
   }
 };
@@ -27,3 +30,12 @@ export const Default = Template.bind({});
 
 export const WithBadge = Template.bind({});
 WithBadge.args = { badge: true, size: '64px' };
+
+export const CustomBadge = Template.bind({});
+CustomBadge.args = {
+  badge: true,
+  badgeBackgroundColor: '#333',
+  badgeForegroundColor: 'red-200',
+  badgeIcon: SageTokens.ICONS.DANGER_FILLED,
+  size: '64px',
+};