From c9e3b720d560f15dab98c3d3040f30c734949e4b Mon Sep 17 00:00:00 2001
From: Titani Labaj <39532947+tlabaj@users.noreply.github.com>
Date: Wed, 17 Jan 2024 15:11:22 -0500
Subject: [PATCH] feat(Avatar): Penta updates (#9954)

---
 .../src/components/Avatar/Avatar.tsx          | 18 ++++--
 .../Avatar/__tests__/Avatar.test.tsx          | 16 ++----
 .../src/components/Avatar/examples/Avatar.md  | 55 ++-----------------
 .../Avatar/examples/AvatarBasic.tsx           |  5 ++
 .../Avatar/examples/AvatarBordered.tsx        |  5 ++
 .../Avatar/examples/AvatarSizeVariations.tsx  | 21 +++++++
 .../components/Avatar/examples/example.css    |  3 -
 7 files changed, 53 insertions(+), 70 deletions(-)
 create mode 100644 packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx
 create mode 100644 packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx
 create mode 100644 packages/react-core/src/components/Avatar/examples/AvatarSizeVariations.tsx
 delete mode 100644 packages/react-core/src/components/Avatar/examples/example.css

diff --git a/packages/react-core/src/components/Avatar/Avatar.tsx b/packages/react-core/src/components/Avatar/Avatar.tsx
index 4a53aa1e023..8aba318f43d 100644
--- a/packages/react-core/src/components/Avatar/Avatar.tsx
+++ b/packages/react-core/src/components/Avatar/Avatar.tsx
@@ -4,23 +4,31 @@ import { css } from '@patternfly/react-styles';
 
 export interface AvatarProps
   extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
-  /** Additional classes added to the Avatar. */
+  /** Additional classes added to the avatar. */
   className?: string;
-  /** Attribute that specifies the URL of the image for the Avatar. */
+  /** Attribute that specifies the URL of the image for the avatar. */
   src?: string;
-  /** Attribute that specifies the alternate text of the image for the Avatar. */
+  /** Attribute that specifies the alternate text of the image for the avatar. */
   alt: string;
+  /** Flag to indicate the avatar should have a border. */
+  isBordered?: boolean;
   /** Size variant of avatar. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export const Avatar: React.FunctionComponent<AvatarProps> = ({
-  className = '',
+  className,
   src = '',
   alt,
+  isBordered,
   size,
   ...props
 }: AvatarProps) => (
-  <img src={src} alt={alt} className={css(styles.avatar, styles.modifiers[size], className)} {...props} />
+  <img
+    src={src}
+    alt={alt}
+    className={css(styles.avatar, styles.modifiers[size], isBordered && styles.modifiers.bordered, className)}
+    {...props}
+  />
 );
 Avatar.displayName = 'Avatar';
diff --git a/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx b/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx
index 11d5d133426..79326b1896e 100644
--- a/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx
+++ b/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx
@@ -12,22 +12,14 @@ test('Renders simple avatar', () => {
   expect(screen.getByTestId('avatar').firstChild).toBeVisible();
 });
 
-// TODO: Need to be updated as part of issue #9880
-test('Renders without any modifier class when border and size props are not passed', () => {
+test('Renders without any modifier class when isBordered and size props are not passed', () => {
   render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass(styles.avatar, { exact: true });
 });
 
-// TODO: Need to be updated/removed as part of issue #9880
-xtest('Renders with class name pf-m-light when "light" is passed as border prop', () => {
-  render(<Avatar alt="avatar" />);
-  expect(screen.getByRole('img')).toHaveClass('pf-m-light');
-});
-
-// TODO: Need to be updated/removed as part of issue #9880
-xtest('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
-  render(<Avatar alt="avatar" />);
-  expect(screen.getByRole('img')).toHaveClass('pf-m-dark');
+test('Renders with class name pf-m-bordered when isBordered is passed', () => {
+  render(<Avatar alt="avatar" isBordered />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-bordered');
 });
 
 test('Renders with class name pf-m-xl when "xl" is passed as size prop', () => {
diff --git a/packages/react-core/src/components/Avatar/examples/Avatar.md b/packages/react-core/src/components/Avatar/examples/Avatar.md
index 114ee961fdd..96252f41fe9 100644
--- a/packages/react-core/src/components/Avatar/examples/Avatar.md
+++ b/packages/react-core/src/components/Avatar/examples/Avatar.md
@@ -6,65 +6,20 @@ propComponents: ['Avatar']
 ---
 
 import avatarImg from '../../assets/avatarImg.svg';
-import avatarImgDark from '../../assets/avatarImgDark.svg';
-import './example.css';
 
 ## Examples
 
 ### Basic
 
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
-
-<Avatar src={avatarImg} alt="avatar" />;
-```
-
-### Size variations
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
-
-<React.Fragment>
-  Small
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="sm" />
-  <br />
-  Medium
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="md" />
-  <br />
-  Large
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="lg" />
-  <br />
-  Extra Large
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="xl" />
-</React.Fragment>;
+```ts file="./AvatarBasic.tsx"
 ```
 
-### Bordered - light
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+### Bordered 
 
-// TODO: Need to be updated/removed as part of issue #9880
-<Avatar src={avatarImg} alt="avatar" />;
+```ts file="./AvatarBordered.tsx"
 ```
 
-### Bordered - dark
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImgDark from '../../assets/avatarImgDark.svg';
+### Size variations
 
-// TODO: Need to be updated/removed as part of issue #9880
-<Avatar src={avatarImgDark} alt="avatar" />;
+```ts file="./AvatarSizeVariations.tsx"
 ```
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx b/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx
new file mode 100644
index 00000000000..42c0f343576
--- /dev/null
+++ b/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<Avatar src={avatarImg} alt="avatar" />;
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx b/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx
new file mode 100644
index 00000000000..bc181e9a192
--- /dev/null
+++ b/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<Avatar src={avatarImg} alt="avatar" isBordered />;
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarSizeVariations.tsx b/packages/react-core/src/components/Avatar/examples/AvatarSizeVariations.tsx
new file mode 100644
index 00000000000..0d8964830f8
--- /dev/null
+++ b/packages/react-core/src/components/Avatar/examples/AvatarSizeVariations.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<React.Fragment>
+  Small
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="sm" />
+  <br />
+  Medium
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="md" />
+  <br />
+  Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="lg" />
+  <br />
+  Extra Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="xl" />
+</React.Fragment>;
diff --git a/packages/react-core/src/components/Avatar/examples/example.css b/packages/react-core/src/components/Avatar/examples/example.css
deleted file mode 100644
index d45b62c03aa..00000000000
--- a/packages/react-core/src/components/Avatar/examples/example.css
+++ /dev/null
@@ -1,3 +0,0 @@
-#ws-react-c-avatar-bordered---dark {
-  background: var(--pf-v5-global--BackgroundColor--dark-100);
-}