[terra-avatar] Changed Shared user variant to Generic Avatar variant (#…

…2620)

* Changed Shared user to Generic Avatar Varaint

* Added upgrade Guide for Breaking Changes

* Upgrade Guide Corrections

* export added for constants

* Changed Examples for Generic Icon

* Updating documentation for Generic variant

Co-Authored-By: Derek Yu <yuderekyu@gmail.com>

* Update packages/terra-avatar/CHANGELOG.md

Co-Authored-By: Matt Henkes <mjhenkes@gmail.com>

* removed theme variables update from upgrade guide

* Added user Icon example in upgrade guide

* updated changelogs and upgrade guide

* corrections to changelog and upgradeguide

* Update CONTRIBUTORS.md

* Update screenshots

Co-authored-by: Derek Yu <yuderekyu@gmail.com>
Co-authored-by: Matt Henkes <mjhenkes@gmail.com>
Co-authored-by: Ryan Manuel <rfmanuel@gmail.com>
Co-authored-by: Jeremy Fuksa <hello@orangefla.me>
Co-authored-by: Manuel,Ryan <Ryan.Manuel@Cerner.com>

CONTRIBUTORS.md

@@ -16,6 +16,7 @@ Cerner Corporation
 - Nikhil Agrawal [@nagrawal3]
 - Emily Rohrbough [@emilyrohrbough]
 - Neil Pfeiffer [@neilpfeiffer]
+- Jeremy Fuksa [@jeremyfuksa]
 - David Schoonover [@dkschoonover]
 - Christian Alten [@cwalten]
 - Viren Sawant [@viren140290]

packages/terra-avatar/CHANGELOG.md

@@ -3,6 +3,11 @@ ChangeLog
 
 Unreleased
 ----------
+### Breaking Changes
+* To Make all User avatars available in same variant `generic` subcomponent has been added.
+* `generic` subcomponent replaces the `sharedUser` subcomponent.
+* `generic` subcomponent contains a `variant` prop that toggles between `single-user`, `shared-user`, and `provider` user avatar.
+* `user` avatar has been moved into `generic` sub-comopnent with varaint name `single-user`.
 
 2.36.0 - (March 10, 2020)
 ------------------

packages/terra-avatar/package.json

@@ -2,7 +2,7 @@
   "name": "terra-avatar",
   "main": "lib/index.js",
   "version": "2.36.0",
-  "description": "Contains components that represent a person, location or entity. Variants include Avatar, Facility, and SharedUser.",
+  "description": "Contains components that represent a person, location or entity. Variants include Avatar, Facility, and Generic.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cerner/terra-core.git"

packages/terra-avatar/src/common/Avatar.module.scss

@@ -60,6 +60,12 @@
       height: 100%;
       width: 100%;
     }
+
+    &.provider {
+      background-image: var(--terra-avatar-icon-provider-background-image, inline-svg("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='#fff' d='M24 28.9c4.7 0 8.5-3.8 8.5-8.5s-3.8-8.5-8.5-8.5-8.5 3.8-8.5 8.5 3.8 8.5 8.5 8.5zm6 2.9v4.4c0 .3.2.9.9 1.6.6.5.6 1.3.6 1.3v4.5c0 .4-.3.8-.8.8-.4 0-.8-.3-.8-.8v-5.2h-1.5v5.2c0 .4-.3.8-.8.8-.4 0-.8-.3-.8-.8V39s0-.8.6-1.3c.8-.6.9-1.2.9-1.6v-4.7c-.8-.2-1.6-.2-2.4-.2h-4.1c-.8 0-1.6.1-2.4.2v6.9c1.3.3 2.2 1.5 2.2 2.9 0 1.7-1.3 3-3 3s-3-1.3-3-3c0-1.4 1-2.6 2.2-2.9v-6.5c-5 1.7-8.6 6.4-8.6 11.9V48h29.3v-4.3c.1-5.5-3.5-10.2-8.5-11.9zm-12.8 9.4c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5-.7-1.5-1.5-1.5-1.5.7-1.5 1.5z'/></svg>"));
+      height: 100%;
+      width: 100%;
+    }
     /* stylelint-enable string-quotes */
   }
 

packages/terra-avatar/src/common/AvatarUtils.jsx

@@ -8,7 +8,7 @@ const cx = classNames.bind(styles);
 const AVATAR_VARIANTS = {
   USER: 'user',
   FACILITY: 'facility',
-  SHARED_USER: 'shared-user',
+  GENERIC: 'generic',
 };
 
 const COLOR_VARIANTS = [

packages/terra-avatar/src/index.js

@@ -1,6 +1,6 @@
 import Avatar from './variants/Avatar';
 import Facility from './variants/Facility';
-import SharedUser from './variants/SharedUser';
+import Generic from './variants/Generic';
 
 export default Avatar;
-export { Facility, SharedUser };
+export { Facility, Generic };

packages/terra-avatar/src/terra-dev-site/doc/avatar/About.1.doc.mdx

@@ -4,7 +4,7 @@ import { Badge } from 'terra-avatar/package.json?dev-site-package';
 
 # About terra-avatar
 
-The `terra-avatar` package contains three components: `Avatar`, `Facility`, and `SharedUser`. View their respective documentation tabs for information on accepted props and examples.
+The `terra-avatar` package contains three components: `Avatar`, `Facility`, and `Generic`. View their respective documentation tabs for information on accepted props and examples.
 
 ## Getting Started
 
@@ -26,7 +26,22 @@ This component requires the following peer dependencies be installed in your app
 ## Usage
 
 ```jsx
-import Avatar, { Facility, SharedUser } from 'terra-avatar';
+import React from 'react';
+import Avatar, { Facility, Generic } from 'terra-avatar';
+
+<Avatar
+  alt="User"
+  image="https://path/to/image.jpg"
+/>
+
+<Facility
+  alt="Location"
+  image="https://path/to/image.jpg"
+/>
+
+<Generic
+  alt="Generic"
+/>
 ```
 
 ## Component Features

packages/terra-avatar/src/terra-dev-site/doc/avatar/Generic.4.doc.mdx

@@ -0,0 +1,40 @@
+import { Badge } from 'terra-avatar/package.json?dev-site-package';
+
+import GenericAvatarVariants from '../example/generic/GenericAvatarVariants?dev-site-example';
+
+import GenericPropsTable from 'terra-avatar/src/variants/Generic?dev-site-props-table';
+
+<Badge />
+
+# Generic
+
+The `Generic` variant represents multiple users - it displays a shared user icon in a circular frame.
+
+## Getting Started
+
+- Install with [npmjs](https://www.npmjs.com):
+  - `npm install terra-avatar`
+
+## Usage
+
+```jsx
+import React from 'react';
+import { Generic } from 'terra-avatar';
+
+<Generic
+  alt="Generic Users"
+/>
+```
+
+## Component Features
+
+ * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/contributing/terra-ui/component-standards#cross-browser-support)
+ * [Mobile Support](https://engineering.cerner.com/terra-ui/contributing/terra-ui/component-standards#mobile-support)
+
+[View component source code](https://github.com/cerner/terra-core/tree/master/packages/terra-avatar)
+
+## Examples
+<GenericAvatarVariants title="Generic Avatar - Icons" />
+
+## Shared User Props
+<GenericPropsTable />

packages/terra-avatar/src/terra-dev-site/doc/avatar/UpgradeGuide.5.doc.mdx

@@ -3,6 +3,50 @@ import { Badge } from 'terra-avatar/package.json?dev-site-package';
 <Badge />
 
 # terra-avatar Upgrade Guide
+## Changes from version 2 to version 3
+
+### Reason for upgrade
+* To group all user avatars in single variant `shared-user` has been replaced with `generic` sub-component
+* To keep adding new user avatars like `provider` easier new `generic` sub-component has been added with all user avatars as variants. 
+
+### Removed
+* `Shared User` subcomponent From Avatar
+
+### Added
+* The `generic` subcomponent that replaces the `sharedUser` subcomponent with a new `variant` prop that can be `single-user`, `shared-user`, or `provider`.
+* `variant` prop will take values for sub-variants `single-user`, `shared-user` and `provider`.
+* `user` avatar has been moved into `generic` sub-comopnent with varaint name `single-user`.
+
+### Steps to uplift to V3
+1. Use a named export for Generic variant.
+2. Use variant prop of Generic to set sub-variant icons like `single-user`, `shared-user` and `provider` for Avatar.
+
+#### V2 Code
+```javascript
+import { SharedUser} from 'terra-avatar';
+
+<SharedUser alt="Patient 1" />
+```
+
+```javascript
+import { Avatar} from 'terra-avatar';
+
+<Avatar id="user-avatar" alt="user"/>
+```
+
+#### V3 Code
+```javascript
+import { Generic } from 'terra-avatar'
+
+<Generic variant="shared-user" alt="Patient 1" />
+```
+
+```javascript
+import { Generic} from 'terra-avatar';
+
+<Generic variant="single-user" alt="Patient 1" />
+```
+
 ## Changes from version 1 to version 2
 
 ### Props
@@ -88,3 +132,4 @@ import Avatar, { Facility } from 'terra-avatar'
 <Avatar alt="Patient 1" initials="AA" />
 <Facility alt="Location 1" />
 ```
+

packages/terra-avatar/src/terra-dev-site/doc/example/generic/GenericAvatarVariants.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Generic } from 'terra-avatar';
+import GenericAvatarVariantsWrapper from 'terra-avatar/lib/terra-dev-site/doc/example/generic/GenericAvatarVariantsWrapper';
+
+const propTypes = { color: PropTypes.string, size: PropTypes.string, variant: PropTypes.string };
+
+const GenericAvatarVariants = ({
+  ...props
+}) => (
+  <Generic variant={props.variant} alt={props.variant} color={props.color} size={props.size} />
+);
+
+GenericAvatarVariants.propTypes = propTypes;
+export default GenericAvatarVariantsWrapper(GenericAvatarVariants);

packages/terra-avatar/src/terra-dev-site/doc/example/generic/GenericAvatarVariantsWrapper.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+function GenericAvatarVariantsWrapper(WrappedComponent) {
+  return class GenericVariants extends React.Component {
+    constructor(props) {
+      super(props);
+      this.handleOnSelect = this.handleOnSelect.bind(this);
+      this.state = { colorVariant: 'auto', size: undefined, variant: 'single-user' };
+    }
+
+    handleOnSelect(event) {
+      this.setState({ [event.target.name]: event.target.value });
+    }
+
+    render() {
+      return (
+        <div>
+          <WrappedComponent color={this.state.colorVariant} variant={this.state.variant} size={this.state.size} {...this.props} />
+          <p><label htmlFor="variant">Select a generic variant type:</label></p>
+          <select id="variant" name="variant" value={this.state.variant} onChange={this.handleOnSelect}>
+            <option value="single-user">Single-User</option>
+            <option value="shared-user">Shared-User</option>
+            <option value="provider">Provider</option>
+          </select>
+          <p><label htmlFor="colorVariant">Select a color variant:</label></p>
+          <select id="colorVariant" name="colorVariant" value={this.state.colorVariant} onChange={this.handleOnSelect}>
+            <option value="auto">Auto</option>
+            <option value="neutral">Neutral</option>
+            <option value="one">One</option>
+            <option value="two">Two</option>
+            <option value="three">Three</option>
+            <option value="four">Four</option>
+            <option value="five">Five</option>
+            <option value="six">Six</option>
+            <option value="seven">Seven</option>
+            <option value="eight">Eight</option>
+            <option value="nine">Nine</option>
+            <option value="ten">Ten</option>
+          </select>
+          <p><label htmlFor="size">Select a size:</label></p>
+          <select id="size" name="size" value={this.state.size} onChange={this.handleOnSelect}>
+            <option value="1em">Default</option>
+            <option value="2em">2em</option>
+            <option value="3em">3em</option>
+          </select>
+        </div>
+      );
+    }
+  };
+}
+
+export default GenericAvatarVariantsWrapper;

packages/terra-avatar/src/terra-dev-site/test/avatar/generic/Provider.test.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Generic } from '../../../../index';
+
+export default () => <Generic variant="provider" id="provider" alt="provider" color="seven" />;

packages/terra-avatar/src/terra-dev-site/test/avatar/generic/SharedUser.test.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Generic } from '../../../../index';
+
+export default () => <Generic id="shared-user" variant="shared-user" alt="shared user" color="eight" />;

packages/terra-avatar/src/terra-dev-site/test/avatar/generic/SingleUser.test.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Generic } from '../../../../index';
+
+export default () => <Generic id="single-user" alt="single user" color="four" />;