Update interface and add test page.

Author: DaemonCahill

pages/avatar/custom-width.page.tsx

@@ -0,0 +1,65 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from "react";
+
+import Checkbox from "@cloudscape-design/components/checkbox";
+import FormField from "@cloudscape-design/components/form-field";
+import Header from "@cloudscape-design/components/header";
+import Input from "@cloudscape-design/components/input";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+
+import { Avatar } from "../../lib/components";
+
+export default function AvatarImageAndWidth() {
+  const [url, setURL] = useState(
+    "https://static1.colliderimages.com/wordpress/wp-content/uploads/2024/08/deadpool-wolverine-hugh-jackman-mask-reveal.jpg",
+  );
+  const [width, setWidth] = useState("100");
+  const [initials, setInitials] = useState("SO");
+  const [iconName, setIconName] = useState("search");
+  const [loading, setLoading] = useState(false);
+  const [genAI, setGenAI] = useState(false);
+
+  return (
+    <SpaceBetween direction="vertical" size="m">
+      <Header>Input an Image URL and custom size.</Header>
+
+      <SpaceBetween alignItems="center" direction="horizontal" size="m">
+        <FormField label="Width:">
+          <Input onChange={({ detail }) => setWidth(detail.value)} value={width} inputMode="numeric" type="number" />
+        </FormField>
+
+        <FormField label="Image URL">
+          <Input onChange={({ detail }) => setURL(detail.value)} value={url} />
+        </FormField>
+
+        <FormField label="Initials">
+          <Input onChange={({ detail }) => setInitials(detail.value)} value={initials} />
+        </FormField>
+
+        <FormField label="Icon Name">
+          <Input onChange={({ detail }) => setIconName(detail.value)} value={iconName} />
+        </FormField>
+
+        <Checkbox onChange={({ detail }) => setLoading(detail.checked)} checked={loading}>
+          Loading
+        </Checkbox>
+
+        <Checkbox onChange={({ detail }) => setGenAI(detail.checked)} checked={genAI}>
+          Gen AI
+        </Checkbox>
+      </SpaceBetween>
+
+      <Avatar
+        ariaLabel="Various Avatar permutations"
+        color={genAI ? "gen-ai" : "default"}
+        iconName={iconName}
+        imgUrl={url}
+        width={Number(width)}
+        initials={initials}
+        loading={loading}
+      />
+    </SpaceBetween>
+  );
+}

pages/avatar/width-and-image.page.tsx

@@ -70,6 +70,7 @@ export interface AvatarProps {
    * Defines the width of the avatar.
    * This value corresponds to the `width` CSS-property and will center and crop images using `object-fit: cover`.
    * If no width is provided the avatar will use the default width value of 28px.
+   * The height of the avatar will be set to the same value as the width.
    */
   width?: number;
 }