Rename component to AvatarStack

src/components/Avatar/Avatar.module.css

@@ -115,7 +115,7 @@ img.avatar {
 }
 
 .stacked-avatars .avatar:not(:last-child) {
-  /* injected in the document from StackedAvatars.tsx */
+  /* injected in the document from AvatarStack.tsx */
   clip-path: url("#cpdAvatarClip");
 }
 

src/components/Avatar/StackedAvatar.stories.tsx → src/components/Avatar/AvatarStack.stories.tsx

@@ -17,20 +17,20 @@ limitations under the License.
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { StackedAvatars as StackedAvatarsComponent } from "./StackedAvatars";
+import { AvatarStack as AvatarStackComponent } from "./AvatarStack";
 import { Avatar } from "./Avatar";
 
 export default {
   title: "StackedAvatar",
-  component: StackedAvatarsComponent,
+  component: AvatarStackComponent,
   argTypes: {},
   args: {
     size: "64px",
   },
-} as Meta<typeof StackedAvatarsComponent>;
+} as Meta<typeof AvatarStackComponent>;
 
-const Template: StoryFn<typeof StackedAvatarsComponent> = (args) => (
-  <StackedAvatarsComponent {...args}>
+const Template: StoryFn<typeof AvatarStackComponent> = (args) => (
+  <AvatarStackComponent {...args}>
     <Avatar
       name="Alice"
       id="@alice:example.org"
@@ -43,8 +43,8 @@ const Template: StoryFn<typeof StackedAvatarsComponent> = (args) => (
       size="200px"
       src="/images/__test__/kitten2.jpg"
     />
-  </StackedAvatarsComponent>
+  </AvatarStackComponent>
 );
 
-export const StackedAvatars = Template.bind({});
-StackedAvatars.args = {};
+export const AvatarStack = Template.bind({});
+AvatarStack.args = {};

src/components/Avatar/StackedAvatars.test.tsx → src/components/Avatar/AvatarStack.test.tsx

@@ -17,11 +17,11 @@ limitations under the License.
 import { render } from "@testing-library/react";
 import React from "react";
 
-import { StackedAvatars } from "./StackedAvatars";
+import { AvatarStack } from "./AvatarStack";
 
 const originalImage = global.Image;
 
-describe("StackedAvatars", () => {
+describe("AvatarStack", () => {
   beforeEach(() => {
     global.Image = class extends originalImage {
       constructor() {
@@ -44,18 +44,18 @@ describe("StackedAvatars", () => {
 
   it("renders", () => {
     const { asFragment } = render(
-      <StackedAvatars avatars={avatars} size="32px" />
+      <AvatarStack avatars={avatars} size="32px" />
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it("adds the mask to the body", () => {
-    render(<StackedAvatars avatars={avatars} size="32px" />);
+    render(<AvatarStack avatars={avatars} size="32px" />);
 
     // We can't run better assertions as `SVG` loading is mocked out in jest
     expect(document.querySelectorAll("svg")).toHaveLength(1);
 
-    render(<StackedAvatars avatars={avatars} size="32px" />);
+    render(<AvatarStack avatars={avatars} size="32px" />);
 
     // We only one instance of the mask, ever!
     expect(document.querySelectorAll("svg")).toHaveLength(1);

src/components/Avatar/StackedAvatars.tsx → src/components/Avatar/AvatarStack.tsx

@@ -21,23 +21,23 @@ import styles from "./Avatar.module.css";
 
 import AvatarClipPath from "./avatar-clip.mask.svg";
 
-type StackedAvatarsProps = {
+type AvatarStackProps = {
   className?: string;
 };
 
 const AVATAR_MASK_ID = "cpdAvatarClipSvg";
-let stackedAvatarsUsageCount = 0;
+let AvatarStackUsageCount = 0;
 
 /**
  * Renders a stack of avatars and clips the content appropriately.
  *
  * The `type` of avatars should always be set to `round`
  * And all the avatars should have the same size.
  */
-export const StackedAvatars = ({
+export const AvatarStack = ({
   children,
   className,
-}: React.PropsWithChildren<StackedAvatarsProps>): React.JSX.Element => {
+}: React.PropsWithChildren<AvatarStackProps>): React.JSX.Element => {
   /**
    * The `clip-path` property in CSS supports a `path()` function, however
    * that has to use pixel values.
@@ -48,20 +48,20 @@ export const StackedAvatars = ({
    * But this is only supported in Firefox
    * This leaves us with no choice but rendering SVG inline in the HTML document
    * And making sure there is always only a single instance regardless of the
-   * amount of `StackedAvatars` instance in the document.
+   * amount of `AvatarStack` instance in the document.
    */
   useEffect(() => {
-    if (stackedAvatarsUsageCount === 0) {
+    if (AvatarStackUsageCount === 0) {
       const svgMask = renderToStaticMarkup(
         <AvatarClipPath id={AVATAR_MASK_ID} />
       );
       document.body.insertAdjacentHTML("beforeend", svgMask);
     }
-    stackedAvatarsUsageCount++;
+    AvatarStackUsageCount++;
     return () => {
-      stackedAvatarsUsageCount--;
-      if (stackedAvatarsUsageCount <= 0) {
-        // Cleanup the mask if there are no instances of `StackedAvatars` left
+      AvatarStackUsageCount--;
+      if (AvatarStackUsageCount <= 0) {
+        // Cleanup the mask if there are no instances of `AvatarStack` left
         // on the page
         document.getElementById(AVATAR_MASK_ID)?.remove();
       }

src/components/Avatar/__snapshots__/StackedAvatars.test.tsx.snap → src/components/Avatar/__snapshots__/AvatarStack.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StackedAvatars renders 1`] = `
+exports[`AvatarStack renders 1`] = `
 <DocumentFragment>
   <div
     class="stacked-avatars"