chore: code review changes

Author: geotrev

packages/avatars/src/elements/Avatar.spec.tsx

@@ -7,12 +7,10 @@
 
 import React from 'react';
 import { render, cleanup } from 'garden-test-utils';
-import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
 import { Avatar } from './Avatar';
 
-const activeBoxShadow = DEFAULT_THEME.shadows.sm(
-  getColor({ hue: 'crimson', shade: 700, theme: DEFAULT_THEME })!
-);
+const activeBoxShadow = DEFAULT_THEME.shadows.sm(PALETTE.crimson[700]);
 
 describe('Avatar', () => {
   afterEach(cleanup);

packages/avatars/src/styled/StyledAvatar.spec.tsx

@@ -11,7 +11,6 @@ import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 import { StyledAvatar } from './StyledAvatar';
 import { StyledStatusIndicator } from './StyledStatusIndicator';
-import { css } from 'styled-components';
 
 describe('StyledAvatar', () => {
   it('renders the expected element', () => {
@@ -37,7 +36,7 @@ describe('StyledAvatar', () => {
       const { container } = render(<StyledAvatar $status="away" $surfaceColor="red" />);
 
       expect(container.firstChild).toHaveStyleRule('color', 'red', {
-        modifier: css`&&`
+        modifier: '&&'
       });
     });
 

packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts

@@ -26,6 +26,6 @@ export const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase)
 `;
 
 StyledStandaloneStatusIndicator.defaultProps = {
-  type: 'offline',
+  $type: 'offline',
   theme: DEFAULT_THEME
 };

packages/avatars/src/styled/StyledStatusIndicator.spec.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render } from 'garden-test-utils';
-import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
 
 import { StyledStatusIndicator } from './StyledStatusIndicator';
 
@@ -94,54 +94,48 @@ describe('StyledStatusIndicator', () => {
     describe('away', () => {
       it('renders away style', () => {
         const { container } = render(<StyledStatusIndicator $type="away" />);
-        const color = getColor({ hue: 'orange', shade: 500, theme: DEFAULT_THEME });
 
-        expect(container.firstChild).toHaveStyleRule('background-color', color);
+        expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.orange[500]);
       });
     });
 
     describe('transfers', () => {
       it('renders transfers style', () => {
         const { container } = render(<StyledStatusIndicator $type="transfers" />);
-        const color = getColor({ hue: 'azure', shade: 500, theme: DEFAULT_THEME });
 
-        expect(container.firstChild).toHaveStyleRule('background-color', color);
+        expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.azure[500]);
       });
     });
 
     describe('active', () => {
       it('renders active style', () => {
         const { container } = render(<StyledStatusIndicator $type="active" />);
-        const color = getColor({ hue: 'crimson', shade: 700, theme: DEFAULT_THEME });
 
         expect(container.firstChild).toHaveStyleRule('height', '16px');
-        expect(container.firstChild).toHaveStyleRule('background-color', color);
+        expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.crimson[700]);
       });
 
       it('renders active style with small size', () => {
         const { container } = render(<StyledStatusIndicator $type="active" $size="small" />);
-        const color = getColor({ hue: 'crimson', shade: 700, theme: DEFAULT_THEME });
 
         expect(container.firstChild).toHaveStyleRule('height', '12px');
-        expect(container.firstChild).toHaveStyleRule('background-color', color);
+        expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.crimson[700]);
       });
     });
 
     describe('available', () => {
       it('renders available style', () => {
         const { container } = render(<StyledStatusIndicator $type="available" />);
-        const color = getColor({ hue: 'mint', shade: 500, theme: DEFAULT_THEME });
 
-        expect(container.firstChild).toHaveStyleRule('background-color', color);
+        expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.mint[500]);
       });
     });
 
     describe('offline', () => {
       it('renders offline style', () => {
         const { container } = render(<StyledStatusIndicator $type="offline" />);
-        const color = getColor({ hue: 'grey', shade: 500, theme: DEFAULT_THEME });
 
-        expect(container.firstChild).toHaveStyleRule('border-color', `${color}`);
+        expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.grey[500]);
       });
     });
   });

packages/avatars/src/styled/utility.ts

@@ -24,20 +24,15 @@ export function getStatusColor(
   theme: IStyledStatusIndicatorProps['theme'],
   type?: IStyledStatusIndicatorProps['$type']
 ): string {
-  switch (type) {
-    case 'active':
-      return getColor({ hue: 'crimson', light: { shade: 700 }, dark: { shade: 600 }, theme });
-    case 'available':
-      return getColor({ hue: 'mint', light: { shade: 500 }, dark: { shade: 400 }, theme });
-    case 'away':
-      return getColor({ hue: 'orange', light: { shade: 500 }, dark: { shade: 400 }, theme });
-    case 'transfers':
-      return getColor({ hue: 'azure', light: { shade: 500 }, dark: { shade: 400 }, theme });
-    case 'offline':
-      return getColor({ hue: 'grey', light: { shade: 500 }, dark: { shade: 400 }, theme });
-    default:
-      return 'transparent';
-  }
+  return (
+    {
+      active: getColor({ hue: 'crimson', light: { shade: 700 }, dark: { shade: 600 }, theme }),
+      available: getColor({ hue: 'mint', light: { shade: 500 }, dark: { shade: 400 }, theme }),
+      away: getColor({ hue: 'orange', light: { shade: 500 }, dark: { shade: 400 }, theme }),
+      transfers: getColor({ hue: 'azure', light: { shade: 500 }, dark: { shade: 400 }, theme }),
+      offline: getColor({ hue: 'grey', light: { shade: 500 }, dark: { shade: 400 }, theme })
+    }[type as string] || 'transparent'
+  );
 }
 
 export function getStatusBorderOffset(props: IStyledStatusIndicatorProps): string {