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

packages/terra-avatar/CHANGELOG.md

@@ -3,6 +3,9 @@ ChangeLog
 
 Unreleased
 ----------
+### Breaking Changes
+* Removed Shared User subcomponent
+* Added Generic subcomponent with a new variant prop that can be `single-user`, `shared-user`, or `provider`.
 
 2.25.0 - (August 21, 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="Location 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.25.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,91 @@
+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 SingleUser from '../example/generic/single-user/GenericSingleUser';
+import SingleUserSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/generic/single-user/GenericSingleUser';
+import SingleUserSize from '../example/generic/single-user/GenericSingleUserSize';
+import SingleUserSizeSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/generic/single-user/GenericSingleUserSize';
+import SingleUserColorVariants from '../example/generic/single-user/GenericSingleUserColorVariants';
+import SingleUserColorVariantsSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/generic/single-user/GenericSingleUserColorVariants';
+
+import SharedUser from '../example/generic/shared-user/GenericSharedUser';
+import SharedUserSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/generic/shared-user/GenericSharedUser';
+import SharedUserSize from '../example/generic/shared-user/GenericSharedUserSize';
+import SharedUserSizeSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/generic/shared-user/GenericSharedUserSize';
+import SharedUserColorVariants from '../example/generic/shared-user/GenericSharedUserColorVariants';
+import SharedUserColorVariantsSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/generic/shared-user/GenericSharedUserColorVariants';
+
+import Provider from '../example/generic/provider/Provider';
+import ProviderSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/generic/provider/Provider';
+import ProviderSize from '../example/generic/provider/ProviderSize';
+import ProviderSizeSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/generic/provider/ProviderSize';
+import ProviderColorVariants from '../example/generic/provider/ProviderColorVariants';
+import ProviderColorVariantsSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/generic/provider/ProviderColorVariants';
+
+const DocPage = () => (
+  <DocTemplate
+    packageName={name}
+    packageVersion={version}
+    readme={ReadMe}
+    srcPath={`https://github.com/cerner/terra-core/tree/master/packages/${name}`}
+    examples={[
+      {
+        title: 'Single User - Default',
+        example: <SingleUser />,
+        source: SingleUserSrc,
+      },
+      {
+        title: 'Single User - Override Size',
+        example: <SingleUserSize />,
+        source: SingleUserSizeSrc,
+      },
+      {
+        title: 'Single User - Toggle Color Variants - Theme Specific',
+        example: <SingleUserColorVariants />,
+        source: SingleUserColorVariantsSrc,
+      },
+      {
+        title: 'Shared User - Default',
+        example: <SharedUser />,
+        source: SharedUserSrc,
+      },
+      {
+        title: 'Shared User - Override Size',
+        example: <SharedUserSize />,
+        source: SharedUserSizeSrc,
+      },
+      {
+        title: 'Shared User - Toggle Color Variants - Theme Specific',
+        example: <SharedUserColorVariants />,
+        source: SharedUserColorVariantsSrc,
+      },
+      {
+        title: 'Provider - Default',
+        example: <Provider />,
+        source: ProviderSrc,
+      },
+      {
+        title: 'Provider - Override Size',
+        example: <ProviderSize />,
+        source: ProviderSizeSrc,
+      },
+      {
+        title: 'Provider - Toggle Color Variants - Theme Specific',
+        example: <ProviderColorVariants />,
+        source: ProviderColorVariantsSrc,
+      },
+    ]}
+    propsTables={[
+      {
+        componentName: 'Generic',
+        componentSrc: GenericSrc,
+      },
+    ]}
+  />
+);
+
+export default DocPage;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Generic } from 'terra-avatar';
+
+const AvatarProvider = () => (
+  <Generic variant="provider" alt="Provider" />
+);
+
+export default AvatarProvider;

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Generic } from 'terra-avatar';
+
+const AvatarSize = () => (
+  <Generic variant="provider" alt="Provider" size="2em" />
+);
+
+export default AvatarSize;

packages/terra-avatar/src/terra-dev-site/doc/example/shared-user/SharedUser.jsx → packages/terra-avatar/src/terra-dev-site/doc/example/generic/shared-user/GenericSharedUser.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { SharedUser } from 'terra-avatar';
+import { Generic } from 'terra-avatar';
 
 const AvatarSharedUser = () => (
-  <SharedUser alt="Shared User" />
+  <Generic variant="shared-user" alt="Shared User" />
 );
 
 export default AvatarSharedUser;

packages/terra-avatar/src/terra-dev-site/doc/example/generic/shared-user/GenericSharedUserColorVariants.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Generic } from 'terra-avatar';
+import ColorVariantsWrapper from 'terra-avatar/lib/terra-dev-site/doc/example/common/ColorVariantsWrapper';
+
+const propTypes = { color: PropTypes.string };
+
+const GenericUserColorVariants = ({
+  ...props
+}) => (
+  <Generic variant="shared-user" alt="Shared User" color={props.color} />
+);
+
+GenericUserColorVariants.propTypes = propTypes;
+export default ColorVariantsWrapper(GenericUserColorVariants);

packages/terra-avatar/src/terra-dev-site/doc/example/generic/shared-user/GenericSharedUserSize.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Generic } from 'terra-avatar';
+
+const AvatarSize = () => (
+  <Generic variant="shared-user" alt="Shared User" size="2em" />
+);
+
+export default AvatarSize;

packages/terra-avatar/src/terra-dev-site/doc/example/generic/single-user/GenericSingleUser.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Generic } from 'terra-avatar';
+
+const AvatarSingleUser = () => (
+  <Generic variant="single-user" alt="Single User" />
+);
+
+export default AvatarSingleUser;

packages/terra-avatar/src/terra-dev-site/doc/example/generic/single-user/GenericSingleUserColorVariants.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Generic } from 'terra-avatar';
+import ColorVariantsWrapper from 'terra-avatar/lib/terra-dev-site/doc/example/common/ColorVariantsWrapper';
+
+const propTypes = { color: PropTypes.string };
+
+const GenericUserColorVariants = ({
+  ...props
+}) => (
+  <Generic variant="single-user" alt="Single User" color={props.color} />
+);
+
+GenericUserColorVariants.propTypes = propTypes;
+export default ColorVariantsWrapper(GenericUserColorVariants);

packages/terra-avatar/src/terra-dev-site/doc/example/generic/single-user/GenericSingleUserSize.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Generic } from 'terra-avatar';
+
+const AvatarSize = () => (
+  <Generic variant="single-user" alt="Single User" size="2em" />
+);
+
+export default AvatarSize;