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

packages/terra-avatar/CHANGELOG.md

@@ -3,6 +3,9 @@ ChangeLog
 
 Unreleased
 ----------
+### Breaking Changes
+* `generic` subcomponent  replaces the `sharedUser` subcomponent
+* `generic` subcomponent contains a `variant` prop that toggles between `single-user`, `shared-user`, and `provider`.
 
 2.26.0 - (September 6, 2019)
 ------------------

packages/terra-avatar/docs/README.md

@@ -1,6 +1,6 @@
 # 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
 
@@ -28,7 +28,7 @@ This component requires the following peer dependencies be installed in your app
 
 ```jsx
 import React from 'react';
-import Avatar, { Facility, SharedUser } from 'terra-avatar';
+import Avatar, { Facility, Generic } from 'terra-avatar';
 
 <Avatar
   alt="User"
@@ -40,8 +40,8 @@ import Avatar, { Facility, SharedUser } from 'terra-avatar';
   image="https://path/to/image.jpg"
 />
 
-<SharedUser
-  alt="Shared-User"
+<Generic
+  alt="Generic"
 />
 ```
 

packages/terra-avatar/docs/shared-user.md → packages/terra-avatar/docs/generic.md

@@ -1,20 +1,19 @@
-# Shared User
+# Generic
 
-The `SharedUser` variant represents multiple users - it displays a shared user icon in a circular frame.
+The `Generic` variant represents multiple variants like `single-user`, `shared-user`, `provider` - it displays a specified variant 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 { SharedUser } from 'terra-avatar';
+import { Generic } from 'terra-avatar';
 
-<SharedUser
-  alt="shared users"
+<Generic
+  alt="Generic Users"
 />
 ```
 

packages/terra-avatar/docs/upgrade-guide.md

@@ -1,4 +1,36 @@
 # terra-avatar Upgrade Guide
+## Changes from version 2 to version 3
+
+### 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 this will take values for sub-variants `single-user`, `shared-user` and `provider`.
+
+### Changes to CSS Custom Properties
+
+#### Added
+* --terra-avatar-icon-provider-background-image
+
+### 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" />
+```
+
+#### V3 Code
+```javascript
+import { Generic } from 'terra-avatar'
+
+<Generic variant="shared-user" alt="Patient 1" />
+```
+
 ## Changes from version 1 to version 2
 
 ### Props
@@ -84,3 +116,4 @@ import Avatar, { Facility } from 'terra-avatar'
 <Avatar alt="Patient 1" initials="AA" />
 <Facility alt="Location 1" />
 ```
+

packages/terra-avatar/package.json

@@ -2,7 +2,7 @@
   "name": "terra-avatar",
   "main": "lib/index.js",
   "version": "2.26.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

@@ -58,6 +58,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/Generic.d.doc.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import DocTemplate from 'terra-doc-template';
+import ReadMe from '../../../../docs/generic.md';
+import { name, version } from '../../../../package.json';
+
+// Component Source
+import GenericSrc from '!raw-loader!../../../../src/variants/Generic.jsx';
+import GenericAvatarVariants from '../example/generic/GenericAvatarVariants';
+import GenericAvatarVariantsSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/generic/GenericAvatarVariants';
+
+const DocPage = () => (
+  <DocTemplate
+    packageName={name}
+    packageVersion={version}
+    readme={ReadMe}
+    srcPath={`https://github.com/cerner/terra-core/tree/master/packages/${name}`}
+    examples={[
+      {
+        title: 'Generic Avatar - Icons',
+        example: <GenericAvatarVariants />,
+        source: GenericAvatarVariantsSrc,
+      },
+    ]}
+    propsTables={[
+      {
+        componentName: 'Generic',
+        componentSrc: GenericSrc,
+      },
+    ]}
+  />
+);
+
+export default DocPage;

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" />;