diff --git a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/InvalidImageAvatar.test.jsx b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/InvalidImageAvatar.test.jsx
deleted file mode 100644
index 41b5c6d01f5..00000000000
--- a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/InvalidImageAvatar.test.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-import Avatar from '../../../../index';
-
-export default () =>
;
diff --git a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/InvalidImageAvatarWithInitials.test.jsx b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/InvalidImageAvatarWithInitials.test.jsx
new file mode 100644
index 00000000000..9f35722dfae
--- /dev/null
+++ b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/InvalidImageAvatarWithInitials.test.jsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import Avatar from '../../../../index';
+
+export default () =>
;
diff --git a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/IsDeceasedAvatar.test.jsx b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/IsDeceasedAvatar.test.jsx
index 43f1db4f6fe..ffcdc904e4d 100644
--- a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/IsDeceasedAvatar.test.jsx
+++ b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/IsDeceasedAvatar.test.jsx
@@ -1,4 +1,4 @@
import React from 'react';
import Avatar from '../../../../index';
-export default () =>
;
+export default () =>
;
diff --git a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/IsDeceasedImageAvatar.test.jsx b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/IsDeceasedImageAvatar.test.jsx
index f9191cad428..47037f2ad6a 100644
--- a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/IsDeceasedImageAvatar.test.jsx
+++ b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/IsDeceasedImageAvatar.test.jsx
@@ -2,4 +2,4 @@ import React from 'react';
import Avatar from '../../../../index';
import exampleAvatarImage from '../../../assets/150x150.jpg';
-export default () =>
;
+export default () =>
;
diff --git a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/OneInitialAvatar.test.jsx b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/OneInitialAvatar.test.jsx
index 125722dfad1..a57d41d89cd 100644
--- a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/OneInitialAvatar.test.jsx
+++ b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/OneInitialAvatar.test.jsx
@@ -1,4 +1,4 @@
import React from 'react';
import Avatar from '../../../../index';
-export default () =>
;
+export default () =>
;
diff --git a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/TwoInitialsAvatar.test.jsx b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/TwoInitialsAvatar.test.jsx
index e1f8b95f0dc..aeba06a2e34 100644
--- a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/TwoInitialsAvatar.test.jsx
+++ b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/TwoInitialsAvatar.test.jsx
@@ -1,4 +1,4 @@
import React from 'react';
import Avatar from '../../../../index';
-export default () =>
;
+export default () =>
;
diff --git a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/UserAvatar.test.jsx b/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/UserAvatar.test.jsx
deleted file mode 100644
index 7332758ffa8..00000000000
--- a/packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/UserAvatar.test.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-import Avatar from '../../../../index';
-
-export default () =>
;
diff --git a/packages/terra-avatar/src/variants/Avatar.jsx b/packages/terra-avatar/src/variants/Avatar.jsx
index 6bad5a3fd11..7288f2d4eae 100644
--- a/packages/terra-avatar/src/variants/Avatar.jsx
+++ b/packages/terra-avatar/src/variants/Avatar.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import styles from '../common/Avatar.module.scss';
import {
- AVATAR_VARIANTS, generateImagePlaceholder, generateImage, setColor,
+ AVATAR_VARIANTS, generateInitials, generateImage, setColor,
} from '../common/AvatarUtils';
const cx = classNames.bind(styles);
@@ -30,7 +30,7 @@ const propTypes = {
/**
* One or two letters to display.
*/
- initials: PropTypes.string,
+ initials: PropTypes.string.isRequired,
/**
* Whether to hide avatar from the accessibility tree.
*/
@@ -49,7 +49,6 @@ const defaultProps = {
color: 'auto',
hashValue: undefined,
image: undefined,
- initials: undefined,
isAriaHidden: false,
isDeceased: false,
size: undefined,
@@ -84,14 +83,19 @@ class Avatar extends React.Component {
} = this.props;
let avatarContent;
+ const avatarParams = {
+ image,
+ alt,
+ isAriaHidden,
+ variant: AVATAR_VARIANTS.USER,
+ handleFallback: this.handleFallback,
+ initials: (initials.length > 2) ? initials.slice(0, 2) : initials,
+ };
if (image) {
- avatarContent = generateImage(image, alt, isAriaHidden, AVATAR_VARIANTS.USER, this.handleFallback);
- } else if (initials && (initials.length === 1 || initials.length === 2)) {
- const avatarTextClassNames = cx('initials');
- avatarContent =
{initials.toUpperCase()};
+ avatarContent = generateImage(avatarParams);
} else {
- avatarContent = generateImagePlaceholder(alt, isAriaHidden, AVATAR_VARIANTS.USER);
+ avatarContent = generateInitials(avatarParams);
}
const attributes = { ...customProps };
diff --git a/packages/terra-avatar/src/variants/Facility.jsx b/packages/terra-avatar/src/variants/Facility.jsx
index 32c982981ec..2cbc116d6d7 100644
--- a/packages/terra-avatar/src/variants/Facility.jsx
+++ b/packages/terra-avatar/src/variants/Facility.jsx
@@ -73,10 +73,18 @@ class Facility extends React.Component {
let facilityContent;
+ const facilityParams = {
+ image,
+ alt,
+ isAriaHidden,
+ variant: AVATAR_VARIANTS.FACILITY,
+ handleFallback: this.handleFallback,
+ };
+
if (image) {
- facilityContent = generateImage(image, alt, isAriaHidden, AVATAR_VARIANTS.FACILITY, this.handleFallback);
+ facilityContent = generateImage(facilityParams);
} else {
- facilityContent = generateImagePlaceholder(alt, isAriaHidden, AVATAR_VARIANTS.FACILITY);
+ facilityContent = generateImagePlaceholder(facilityParams);
}
const attributes = { ...customProps };
const customStyles = size ? ({ fontSize: size, ...attributes.style }) : attributes.style;
diff --git a/packages/terra-avatar/tests/jest/Avatar.test.jsx b/packages/terra-avatar/tests/jest/Avatar.test.jsx
index e57a993c73d..042c4e8f00b 100644
--- a/packages/terra-avatar/tests/jest/Avatar.test.jsx
+++ b/packages/terra-avatar/tests/jest/Avatar.test.jsx
@@ -5,7 +5,7 @@ import exampleProfilePhoto from '../../src/terra-dev-site/assets/150x150.jpg';
describe('Avatar', () => {
// Snapshot Tests
it('should render a default avatar', () => {
- const avatar =
;
+ const avatar =
;
const wrapper = render(avatar);
expect(wrapper).toMatchSnapshot();
});
@@ -22,26 +22,26 @@ describe('Avatar', () => {
expect(wrapper).toMatchSnapshot();
});
- it('should render fallback user avatar when more than two initials are passed in', () => {
+ it('should render two initials avatar when more than two initials are passed in', () => {
const avatar =
;
const wrapper = render(avatar);
expect(wrapper).toMatchSnapshot();
});
it('should render image avatar when image is passed in', () => {
- const avatar =
;
+ const avatar =
;
const wrapper = render(avatar);
expect(wrapper).toMatchSnapshot();
});
- it('should render fallback user avatar when invalid image is passed in', () => {
- const avatar =
;
+ it('should render fallback initials when invalid image is passed in with initials', () => {
+ const avatar =
;
const wrapper = render(avatar);
expect(wrapper).toMatchSnapshot();
});
it('should render an avatar with provided size', () => {
- const avatar =
;
+ const avatar =
;
const wrapper = render(avatar);
expect(wrapper).toMatchSnapshot();
});
@@ -53,31 +53,31 @@ describe('Avatar', () => {
});
it('should render an avatar with color variant one', () => {
- const avatar =
;
+ const avatar =
;
const wrapper = render(avatar);
expect(wrapper).toMatchSnapshot();
});
it('should render an avatar with color variant netural', () => {
- const avatar =
;
+ const avatar =
;
const wrapper = render(avatar);
expect(wrapper).toMatchSnapshot();
});
it('should render an avatar with an automated color variant, based on a hashValue', () => {
- const avatar =
;
+ const avatar =
;
const wrapper = render(avatar);
expect(wrapper).toMatchSnapshot();
});
it('should render an isDeceased avatar', () => {
- const avatar =
;
+ const avatar =
;
const wrapper = render(avatar);
expect(wrapper).toMatchSnapshot();
});
it('should render an avatar with custom props', () => {
- const avatar =
;
+ const avatar =
;
const wrapper = render(avatar);
expect(wrapper).toMatchSnapshot();
});
diff --git a/packages/terra-avatar/tests/jest/__snapshots__/Avatar.test.jsx.snap b/packages/terra-avatar/tests/jest/__snapshots__/Avatar.test.jsx.snap
index 609db4b7409..a69b0de6d9e 100644
--- a/packages/terra-avatar/tests/jest/__snapshots__/Avatar.test.jsx.snap
+++ b/packages/terra-avatar/tests/jest/__snapshots__/Avatar.test.jsx.snap
@@ -8,9 +8,11 @@ exports[`Avatar should render a default avatar 1`] = `
alt="user"
aria-hidden="false"
aria-label="user"
- class="icon user"
+ class="initials"
role="img"
- />
+ >
+ JS
+
`;
@@ -22,9 +24,11 @@ exports[`Avatar should render an avatar with an automated color variant, based o
alt="user"
aria-hidden="false"
aria-label="user"
- class="icon user"
+ class="initials"
role="img"
- />
+ >
+ JS
+