fix(avatars): update avatar CSS for badge animation (#363)

...also fix demo page to use `isSystem` (not `system`) for system avatars.

Author: jzempel

packages/avatars/package.json

@@ -29,7 +29,7 @@
     "styled-components": "^4.2.0"
   },
   "devDependencies": {
-    "@zendeskgarden/css-avatars": "5.0.0",
+    "@zendeskgarden/css-avatars": "6.0.0",
     "@zendeskgarden/react-theming": "^6.0.1"
   },
   "keywords": [

packages/avatars/src/Avatar.example.md

@@ -27,7 +27,7 @@ const StyledSvgAvatar = styled(Avatar)`
     </Col>
     <Col md>
       <h3>System</h3>
-      <Avatar system>
+      <Avatar isSystem>
         <img src="images/system.png" alt="System avatar" />
       </Avatar>
     </Col>
@@ -75,22 +75,22 @@ const StyledSvgAvatar = styled(Avatar)`
   </Row>
   <Row alignItems="center" justifyContent="center">
     <Col md>
-      <Avatar size="extrasmall" system>
+      <Avatar size="extrasmall" isSystem>
         <img src="images/system.png" alt="System Avatar" />
       </Avatar>
     </Col>
     <Col md>
-      <Avatar size="small" system>
+      <Avatar size="small" isSystem>
         <img src="images/system.png" alt="System Avatar" />
       </Avatar>
     </Col>
     <Col md>
-      <Avatar system>
+      <Avatar isSystem>
         <img src="images/system.png" alt="System Avatar" />
       </Avatar>
     </Col>
     <Col md>
-      <Avatar size="large" system>
+      <Avatar size="large" isSystem>
         <img src="images/system.png" alt="System Avatar" />
       </Avatar>
     </Col>

packages/avatars/src/Avatar.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyledAvatar, StyledBadge } from './styled';
+import { StyledAvatar } from './styled';
 
 const SIZE = {
   EXTRASMALL: 'extrasmall',
@@ -27,40 +27,28 @@ const STATUS = {
 const Avatar = ({ isSystem, size, status, children, badge, ...other }) => {
   let computedStatus = status;
 
-  if (status === STATUS.AVAILABLE && badge !== undefined) {
+  if (status === STATUS.AVAILABLE && badge) {
     computedStatus = STATUS.ACTIVE;
   }
 
-  const FormattedBadge = () => {
-    if (status === undefined || status === STATUS.AWAY) {
-      return null;
-    }
-
-    if (computedStatus === STATUS.AVAILABLE) {
-      return <StyledBadge />;
-    }
-
-    return <StyledBadge>{badge}</StyledBadge>;
-  };
-
   return (
     <StyledAvatar
       isSystem={isSystem}
       size={size}
       status={computedStatus}
+      data-badge={badge}
       aria-live="polite"
       {...other}
     >
       {children}
-      <FormattedBadge />
     </StyledAvatar>
   );
 };
 
 Avatar.propTypes = {
   /** Applies system styling */
   isSystem: PropTypes.bool,
-  badge: PropTypes.node,
+  badge: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
   size: PropTypes.oneOf([SIZE.EXTRASMALL, SIZE.SMALL, SIZE.LARGE]),
   status: PropTypes.oneOf([STATUS.AVAILABLE, STATUS.AWAY]),
   children: PropTypes.node

packages/avatars/src/Avatar.spec.js

@@ -35,19 +35,15 @@ describe('Avatar', () => {
   });
 
   it('applies active styling if provided with badge', () => {
-    const { container } = render(
-      <Avatar status="available" badge={<span data-test-id="badge">2</span>} />
-    );
+    const { container } = render(<Avatar status="available" badge="2" />);
 
     expect(container.firstChild).toHaveClass('is-active');
   });
 
   it('renders badge if provided with status', () => {
-    const { getByTestId } = render(
-      <Avatar status="available" badge={<span data-test-id="badge">2</span>} />
-    );
+    const { container } = render(<Avatar status="available" badge="2" />);
 
-    expect(getByTestId('badge')).not.toBeUndefined();
+    expect(container.firstChild).toHaveAttribute('data-badge');
   });
 
   it('does not render badge if away status is provided', () => {

packages/avatars/src/styled.js

@@ -58,19 +58,6 @@ StyledAvatar.propTypes = {
   status: PropTypes.oneOf([STATUS.AVAILABLE, STATUS.ACTIVE, STATUS.AWAY])
 };
 
-const BADGE_COMPONENT_ID = 'avatars.badge';
-
-/**
- * Accepts all `<figcaption>` attributes
- */
-export const StyledBadge = styled.figcaption.attrs({
-  'data-garden-id': BADGE_COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION,
-  className: AvatarStyles['c-avatar__badge']
-})`
-  ${props => retrieveTheme(BADGE_COMPONENT_ID, props)};
-`;
-
 const TEXT_COMPONENT_ID = 'avatars.text';
 
 /**

packages/avatars/src/styled.spec.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
-import { StyledAvatar, StyledBadge, StyledText } from './styled';
+import { StyledAvatar, StyledText } from './styled';
 
 describe('Styled Elements', () => {
   describe('StyledAvatar', () => {
@@ -52,14 +52,6 @@ describe('Styled Elements', () => {
     });
   });
 
-  describe('StyledBadge', () => {
-    it('renders badge styling by default', () => {
-      const { container } = render(<StyledBadge />);
-
-      expect(container.firstChild).toHaveClass(`c-avatar__badge`);
-    });
-  });
-
   describe('StyledText', () => {
     it('renders text styling by default', () => {
       const { container } = render(<StyledText />);