[DSS-157] Avatar - Custom Icon and Color

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

@@ -86,6 +86,32 @@
   } %>
 </div>
 
+<h3>Avatar Badges with Custom Color and Icon</h3>
+<div class="sage-avatar-wrapper">
+  <%= sage_component SageAvatar, {
+    badge: true,
+    badge_color: "black",
+    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_color: "purple-300",
+    badge_icon: "super-admin",
+    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/lib/sage_rails/app/sage_tokens/sage_schemas.rb

@@ -31,6 +31,8 @@ module SageSchemas
 
   AVATAR = {
     badge: [:optional, NilClass, TrueClass],
+    badge_color: [:optional, NilClass, SageSchemas::COLOR_SLIDER],
+    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_icon || component.badge_color %>
     <%= component.generated_css_classes %>
   "
   <%= component.generated_html_attributes.html_safe %>
@@ -36,9 +37,9 @@ end
   <% if component.badge %>
     <div class="sage-avatar__badge">
       <%= 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_color ? component.badge_color : "primary-300",
       } %>
     </div>
   <% end %>

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

@@ -163,6 +163,10 @@ $-avatar-group-item-sizes: (
   i {
     display: flex;
   }
+
+  .sage-avatar--custom-badge & {
+    border: 0;
+  }
 }
 
 .sage-avatar__initials {

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

@@ -1,11 +1,14 @@
 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,
+  badgeColor,
+  badgeIcon,
   className,
   centered,
   color,
@@ -19,6 +22,7 @@ export const Avatar = ({
     className,
     {
       'sage-avatar--centered': centered,
+      'sage-avatar--custom-badge': badgeColor || badgeIcon,
       [`sage-avatar--${color}`]: color,
     }
   );
@@ -57,8 +61,8 @@ export const Avatar = ({
       {badge && (
         <div className="sage-avatar__badge">
           <Icon
-            icon={Icon.ICONS.CHECK_CIRCLE_FILLED}
-            color={Icon.COLORS.PRIMARY_300}
+            icon={badgeIcon || Icon.ICONS.CHECK_CIRCLE_FILLED}
+            color={badgeColor || Icon.COLORS.PRIMARY_300}
             size={setBadgeSize()}
           />
         </div>
@@ -77,6 +81,8 @@ Avatar.COLORS = AVATAR_COLORS;
 
 Avatar.defaultProps = {
   badge: false,
+  badgeColor: null,
+  badgeIcon: null,
   centered: false,
   className: '',
   color: AVATAR_COLORS.DEFAULT,
@@ -87,6 +93,8 @@ Avatar.defaultProps = {
 
 Avatar.propTypes = {
   badge: PropTypes.bool,
+  badgeColor: 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.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
+      badgeColor: SageTokens.COLOR_SLIDERS,
+      badgeIcon: SageTokens.ICONS,
+      color: Avatar.COLORS,
     })
   }
 };
@@ -27,3 +30,11 @@ 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,
+  badgeColor: SageTokens.COLOR_SLIDERS.YELLOW_400,
+  badgeIcon: SageTokens.ICONS.DANGER_FILLED,
+  size: '64px',
+};