From 8915b93b557268cddc044d9d12242d5bc27c89c0 Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Thu, 29 Sep 2022 09:40:18 -0500
Subject: [PATCH 01/10] feat(avatar): adds props for custom icons and color

---
 .../components/avatar/_preview.html.erb       | 26 +++++++++++++++++++
 .../app/sage_tokens/sage_schemas.rb           |  2 ++
 .../sage_components/_sage_avatar.html.erb     |  4 +--
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/docs/app/views/examples/components/avatar/_preview.html.erb b/docs/app/views/examples/components/avatar/_preview.html.erb
index 1fb997c05e..21332d95a1 100644
--- a/docs/app/views/examples/components/avatar/_preview.html.erb
+++ b/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: "megaphone",
+    size: "90px",
+    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" } %>
diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb b/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb
index d37ed2c464..21842c2ac3 100644
--- a/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb
+++ b/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] }],
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
index 65760f6dc5..bc7aada56f 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
@@ -36,9 +36,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 %>

From f1cf205680f250279ac9373845c022a663c22ac1 Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Thu, 29 Sep 2022 11:10:14 -0500
Subject: [PATCH 02/10] fix(avatar): updates logic for styling purposes

---
 docs/app/views/examples/components/avatar/_preview.html.erb   | 4 ++--
 .../app/views/sage_components/_sage_avatar.html.erb           | 1 +
 packages/sage-assets/lib/stylesheets/components/_avatar.scss  | 4 ++++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/app/views/examples/components/avatar/_preview.html.erb b/docs/app/views/examples/components/avatar/_preview.html.erb
index 21332d95a1..d58a797083 100644
--- a/docs/app/views/examples/components/avatar/_preview.html.erb
+++ b/docs/app/views/examples/components/avatar/_preview.html.erb
@@ -102,8 +102,8 @@
   <%= sage_component SageAvatar, {
     badge: true,
     badge_color: "purple-300",
-    badge_icon: "megaphone",
-    size: "90px",
+    badge_icon: "super-admin",
+    size: "80px",
     image: {
       alt: "Court's profile image",
       src: "avatar/court.png",
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
index bc7aada56f..c70ae88fc2 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
+++ b/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 %>
diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
index 27c6d20d62..92bdc1263a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss
+++ b/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 {

From 21de9a4604b4ef9e1d2b729687e46f2bc480596e Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Wed, 5 Oct 2022 16:48:28 -0500
Subject: [PATCH 03/10] feat(avatar): adds custom badge icon and color props to
 component in React

---
 packages/sage-react/lib/Avatar/Avatar.jsx       | 12 ++++++++++--
 packages/sage-react/lib/Avatar/Avatar.story.jsx | 14 +++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/sage-react/lib/Avatar/Avatar.jsx b/packages/sage-react/lib/Avatar/Avatar.jsx
index a4a6e971a6..06ef8ce2d3 100644
--- a/packages/sage-react/lib/Avatar/Avatar.jsx
+++ b/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)),
diff --git a/packages/sage-react/lib/Avatar/Avatar.story.jsx b/packages/sage-react/lib/Avatar/Avatar.story.jsx
index 6983a484eb..6c4b468052 100644
--- a/packages/sage-react/lib/Avatar/Avatar.story.jsx
+++ b/packages/sage-react/lib/Avatar/Avatar.story.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { selectArgs } from '../story-support/helpers';
+import { SageTokens } from '../configs';
 import { Avatar } from './Avatar';
+import { Icon } from '../Icon';
 
 export default {
   title: 'Sage/Avatar',
@@ -17,7 +19,9 @@ export default {
   },
   argTypes: {
     ...selectArgs({
-      color: Avatar.COLORS
+      badgeColor: SageTokens.COLOR_SLIDERS,
+      badgeIcon: SageTokens.ICONS,
+      color: Avatar.COLORS,
     })
   }
 };
@@ -27,3 +31,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: Icon.COLORS.YELLOW_300,
+  badgeIcon: Icon.ICONS.ARCHIVE,
+  size: '64px',
+};

From 664b9365a54764bbb2589b67c774ed70c5a19857 Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Thu, 6 Oct 2022 10:16:29 -0500
Subject: [PATCH 04/10] chore: updates story token usage

---
 packages/sage-react/lib/Avatar/Avatar.story.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/sage-react/lib/Avatar/Avatar.story.jsx b/packages/sage-react/lib/Avatar/Avatar.story.jsx
index 6c4b468052..fdf16a8a37 100644
--- a/packages/sage-react/lib/Avatar/Avatar.story.jsx
+++ b/packages/sage-react/lib/Avatar/Avatar.story.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { selectArgs } from '../story-support/helpers';
 import { SageTokens } from '../configs';
 import { Avatar } from './Avatar';
-import { Icon } from '../Icon';
 
 export default {
   title: 'Sage/Avatar',
@@ -35,7 +34,7 @@ WithBadge.args = { badge: true, size: '64px' };
 export const CustomBadge = Template.bind({});
 CustomBadge.args = {
   badge: true,
-  badgeColor: Icon.COLORS.YELLOW_300,
-  badgeIcon: Icon.ICONS.ARCHIVE,
+  badgeColor: SageTokens.COLOR_SLIDERS.YELLOW_400,
+  badgeIcon: SageTokens.ICONS.DANGER_FILLED,
   size: '64px',
 };

From 51ec37acff88a45ae56c4de304eac59e48ac61bf Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Tue, 11 Oct 2022 12:47:57 -0500
Subject: [PATCH 05/10] feat(avatar): adds new props for background and
 foreground icon colors

---
 .../examples/components/avatar/_preview.html.erb    |  8 +++++---
 docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb |  3 ++-
 .../app/views/sage_components/_sage_avatar.html.erb | 13 ++++++++++---
 .../lib/stylesheets/components/_avatar.scss         |  4 ++++
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/docs/app/views/examples/components/avatar/_preview.html.erb b/docs/app/views/examples/components/avatar/_preview.html.erb
index d58a797083..d4945dd493 100644
--- a/docs/app/views/examples/components/avatar/_preview.html.erb
+++ b/docs/app/views/examples/components/avatar/_preview.html.erb
@@ -90,7 +90,8 @@
 <div class="sage-avatar-wrapper">
   <%= sage_component SageAvatar, {
     badge: true,
-    badge_color: "black",
+    badge_foregroundColor: "yellow",
+    badge_backgroundColor: "#4232a8",
     badge_icon: "play-circle",
     size: "80px",
     image: {
@@ -101,8 +102,9 @@
   } %>
   <%= sage_component SageAvatar, {
     badge: true,
-    badge_color: "purple-300",
-    badge_icon: "super-admin",
+    badge_foregroundColor: "red-300",
+    badge_backgroundColor: "#fff",
+    badge_icon: "danger",
     size: "80px",
     image: {
       alt: "Court's profile image",
diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb b/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb
index 21842c2ac3..ba658abdd8 100644
--- a/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb
+++ b/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb
@@ -31,7 +31,8 @@ module SageSchemas
 
   AVATAR = {
     badge: [:optional, NilClass, TrueClass],
-    badge_color: [:optional, NilClass, SageSchemas::COLOR_SLIDER],
+    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],
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
index c70ae88fc2..3b01392f82 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
@@ -26,7 +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 %>
+    <%= "sage-avatar--custom-badge" if component.badge_backgroundColor || component.badge_foregroundColor || component.badge_icon %>
     <%= component.generated_css_classes %>
   "
   <%= component.generated_html_attributes.html_safe %>
@@ -35,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: component.badge_icon ? component.badge_icon : "check-circle-filled",
         size: badge_icon_size,
-        color: component.badge_color ? component.badge_color : "primary-300",
+        color: component.badge_foregroundColor ? component.badge_foregroundColor : "primary-300",
       } %>
     </div>
   <% end %>
diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
index 92bdc1263a..67454e4503 100644
--- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
@@ -160,6 +160,10 @@ $-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;
   }

From 82bc9a2b9af3ed7c2bdc9ed793fb82cdbdcdcbe9 Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Tue, 11 Oct 2022 13:33:08 -0500
Subject: [PATCH 06/10] docs(avatar): adds new props to props table

---
 .../examples/components/avatar/_props.html.erb | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/docs/app/views/examples/components/avatar/_props.html.erb b/docs/app/views/examples/components/avatar/_props.html.erb
index 97f4f42958..cc4a28a1ad 100644
--- a/docs/app/views/examples/components/avatar/_props.html.erb
+++ b/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. If not set, will default to `primary-300`.') %></td>
+  <td><%= md("Hex color string or `#{SageTokens::COLORS.inspect()}`") %></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('

From 894dd2661600fd0fb40f94e9d23f12ce2baf1120 Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Wed, 12 Oct 2022 10:32:28 -0500
Subject: [PATCH 07/10] feat(avatar): adds new badge props to React component

---
 .../components/avatar/_props.html.erb         |  4 +--
 packages/sage-react/lib/Avatar/Avatar.jsx     | 28 +++++++++++++++----
 .../sage-react/lib/Avatar/Avatar.story.jsx    |  5 ++--
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/docs/app/views/examples/components/avatar/_props.html.erb b/docs/app/views/examples/components/avatar/_props.html.erb
index cc4a28a1ad..6647ce0277 100644
--- a/docs/app/views/examples/components/avatar/_props.html.erb
+++ b/docs/app/views/examples/components/avatar/_props.html.erb
@@ -12,8 +12,8 @@
 </tr>
 <tr>
   <td><%= md('`badge_foregroundColor`') %></td>
-  <td><%= md('Sets the badge icon stroke/fill color. If not set, will default to `primary-300`.') %></td>
-  <td><%= md("Hex color string or `#{SageTokens::COLORS.inspect()}`") %></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>
diff --git a/packages/sage-react/lib/Avatar/Avatar.jsx b/packages/sage-react/lib/Avatar/Avatar.jsx
index 06ef8ce2d3..cd60e358e2 100644
--- a/packages/sage-react/lib/Avatar/Avatar.jsx
+++ b/packages/sage-react/lib/Avatar/Avatar.jsx
@@ -7,7 +7,8 @@ import { AVATAR_COLORS } from './configs';
 
 export const Avatar = ({
   badge,
-  badgeColor,
+  badgeBackgroundColor,
+  badgeForegroundColor,
   badgeIcon,
   className,
   centered,
@@ -22,11 +23,19 @@ export const Avatar = ({
     className,
     {
       'sage-avatar--centered': centered,
-      'sage-avatar--custom-badge': badgeColor || badgeIcon,
+      '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) {
@@ -59,10 +68,15 @@ export const Avatar = ({
   return (
     <div className={classNames} style={style} {...rest}>
       {badge && (
-        <div className="sage-avatar__badge">
+        <div
+          className={badgeClassnames}
+          style={(badgeBackgroundColor && badgeBackgroundColor !== '') && ({
+            '--badge-custom-bg-color': badgeBackgroundColor
+          })}
+        >
           <Icon
             icon={badgeIcon || Icon.ICONS.CHECK_CIRCLE_FILLED}
-            color={badgeColor || Icon.COLORS.PRIMARY_300}
+            color={badgeForegroundColor || Icon.COLORS.PRIMARY_300}
             size={setBadgeSize()}
           />
         </div>
@@ -81,7 +95,8 @@ Avatar.COLORS = AVATAR_COLORS;
 
 Avatar.defaultProps = {
   badge: false,
-  badgeColor: null,
+  badgeBackgroundColor: null,
+  badgeForegroundColor: null,
   badgeIcon: null,
   centered: false,
   className: '',
@@ -93,7 +108,8 @@ Avatar.defaultProps = {
 
 Avatar.propTypes = {
   badge: PropTypes.bool,
-  badgeColor: PropTypes.oneOf(Object.values(SageTokens.COLOR_SLIDERS)),
+  badgeBackgroundColor: PropTypes.string,
+  badgeForegroundColor: PropTypes.oneOf(Object.values(SageTokens.COLOR_SLIDERS)),
   badgeIcon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
   centered: PropTypes.bool,
   className: PropTypes.string,
diff --git a/packages/sage-react/lib/Avatar/Avatar.story.jsx b/packages/sage-react/lib/Avatar/Avatar.story.jsx
index fdf16a8a37..540d455232 100644
--- a/packages/sage-react/lib/Avatar/Avatar.story.jsx
+++ b/packages/sage-react/lib/Avatar/Avatar.story.jsx
@@ -18,7 +18,7 @@ export default {
   },
   argTypes: {
     ...selectArgs({
-      badgeColor: SageTokens.COLOR_SLIDERS,
+      badgeForegroundColor: SageTokens.COLOR_SLIDERS,
       badgeIcon: SageTokens.ICONS,
       color: Avatar.COLORS,
     })
@@ -34,7 +34,8 @@ WithBadge.args = { badge: true, size: '64px' };
 export const CustomBadge = Template.bind({});
 CustomBadge.args = {
   badge: true,
-  badgeColor: SageTokens.COLOR_SLIDERS.YELLOW_400,
+  badgeBackgroundColor: '#333',
+  badgeForegroundColor: 'red-200',
   badgeIcon: SageTokens.ICONS.DANGER_FILLED,
   size: '64px',
 };

From 03f1d7cab45108d4ad01d42f4d6fb8fe4354e7bd Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Wed, 12 Oct 2022 16:26:28 -0500
Subject: [PATCH 08/10] test(avatar): adds spec file for Avatar

---
 .../sage-react/lib/Avatar/Avatar.spec.jsx     | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 packages/sage-react/lib/Avatar/Avatar.spec.jsx

diff --git a/packages/sage-react/lib/Avatar/Avatar.spec.jsx b/packages/sage-react/lib/Avatar/Avatar.spec.jsx
new file mode 100644
index 0000000000..40dd2774a6
--- /dev/null
+++ b/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');
+  });
+});

From 4fae3bd15f302cff20211c33823eb0c8ba3b49d9 Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Wed, 12 Oct 2022 16:31:45 -0500
Subject: [PATCH 09/10] fix(avatar): updates badge style conditional to prevent
 storybook issue

---
 packages/sage-react/lib/Avatar/Avatar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sage-react/lib/Avatar/Avatar.jsx b/packages/sage-react/lib/Avatar/Avatar.jsx
index cd60e358e2..d62f65cd55 100644
--- a/packages/sage-react/lib/Avatar/Avatar.jsx
+++ b/packages/sage-react/lib/Avatar/Avatar.jsx
@@ -70,8 +70,8 @@ export const Avatar = ({
       {badge && (
         <div
           className={badgeClassnames}
-          style={(badgeBackgroundColor && badgeBackgroundColor !== '') && ({
-            '--badge-custom-bg-color': badgeBackgroundColor
+          style={({
+            '--badge-custom-bg-color': badgeBackgroundColor || ''
           })}
         >
           <Icon

From 69f8f72a290d9d7e6602bfe5c70e447f8daa9595 Mon Sep 17 00:00:00 2001
From: Ashley E <ashleyne92@gmail.com>
Date: Thu, 13 Oct 2022 09:36:57 -0500
Subject: [PATCH 10/10] chore: removes unneeded parentheses

---
 packages/sage-react/lib/Avatar/Avatar.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/sage-react/lib/Avatar/Avatar.jsx b/packages/sage-react/lib/Avatar/Avatar.jsx
index d62f65cd55..b5fd0bb5c6 100644
--- a/packages/sage-react/lib/Avatar/Avatar.jsx
+++ b/packages/sage-react/lib/Avatar/Avatar.jsx
@@ -70,9 +70,7 @@ export const Avatar = ({
       {badge && (
         <div
           className={badgeClassnames}
-          style={({
-            '--badge-custom-bg-color': badgeBackgroundColor || ''
-          })}
+          style={{ '--badge-custom-bg-color': badgeBackgroundColor || '' }}
         >
           <Icon
             icon={badgeIcon || Icon.ICONS.CHECK_CIRCLE_FILLED}