feat: Avatar

pages/avatar/permutations.page.tsx

@@ -0,0 +1,54 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Avatar } from "../../lib/components";
+import { TestBed } from "../app/test-bed";
+import { ScreenshotArea } from "../screenshot-area";
+
+const customIconSvg = (
+  <svg
+    className="w-6 h-6 text-gray-800 dark:text-white"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="m8 9 3 3-3 3m5 0h3M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"
+    />
+  </svg>
+);
+
+export default function AvatarPage() {
+  return (
+    <ScreenshotArea>
+      <h1>Avatar</h1>
+      <main>
+        <TestBed>
+          <Avatar ariaLabel="User avatar" />
+          <Avatar color="gen-ai" iconName="gen-ai" ariaLabel="User avatar" />
+
+          <Avatar initials="GW" ariaLabel="User avatar GW" tooltipText="User avatar" />
+          <Avatar color="gen-ai" initials="GW" ariaLabel="Gen AI assistant GW" tooltipText="Gen AI assistant" />
+
+          <Avatar loading={true} ariaLabel="User avatar typing" tooltipText="User avatar typing" />
+          <Avatar
+            color="gen-ai"
+            loading={true}
+            ariaLabel="Gen AI assistant generating response"
+            tooltipText="Gen AI assistant generating response"
+          />
+
+          <Avatar iconSvg={customIconSvg} ariaLabel="Avatar loading" />
+          <Avatar color="gen-ai" iconSvg={customIconSvg} ariaLabel="Gen AI assistant loading" />
+        </TestBed>
+      </main>
+    </ScreenshotArea>
+  );
+}

pages/avatar/simple.page.tsx

@@ -1,19 +1,43 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import SpaceBetween from "@cloudscape-design/components/space-between";
+import Toggle from "@cloudscape-design/components/toggle";
+import { useState } from "react";
 import { Avatar } from "../../lib/components";
-import { TestBed } from "../app/test-bed";
-import { ScreenshotArea } from "../screenshot-area";
 
 export default function AvatarPage() {
+  const [loading, setLoading] = useState(false);
+  const [initials, setInitials] = useState(false);
+
   return (
-    <ScreenshotArea>
+    <>
       <h1>Avatar</h1>
-      <main>
-        <TestBed>
-          <Avatar initials="GW" />
-        </TestBed>
-      </main>
-    </ScreenshotArea>
+      <SpaceBetween size="m">
+        <Avatar
+          color="default"
+          loading={loading}
+          initials={initials ? "TF" : undefined}
+          ariaLabel="User avatar Timothee Fontaka"
+          tooltipText="Timothee Fontaka"
+        />
+        <Avatar
+          color="gen-ai"
+          iconName="gen-ai"
+          loading={loading}
+          initials={initials ? "AI" : undefined}
+          ariaLabel="Avatar Gen AI assistant"
+          tooltipText="Gen AI assistant"
+        />
+
+        <Toggle checked={loading} onChange={({ detail }) => setLoading(detail.checked)}>
+          Loading
+        </Toggle>
+
+        <Toggle checked={initials} onChange={({ detail }) => setInitials(detail.checked)}>
+          Initials
+        </Toggle>
+      </SpaceBetween>
+    </>
   );
 }

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -7,12 +7,190 @@ exports[`definition for avatar matches the snapshot > avatar 1`] = `
   "name": "Avatar",
   "properties": [
     {
+      "description": "Text to describe the avatar for assistive technology.
+When more than one avatar is used, provide a unique label for each.
+For example, "User avatar" and "AI assistant avatar" or "Your avatar" and "User avatar for John Doe".
+If \`tooltipText\` or \`initials\` are used make sure to include them in the \`ariaLabel\`.
+",
+      "name": "ariaLabel",
+      "optional": false,
+      "type": "string",
+    },
+    {
+      "defaultValue": ""default"",
+      "description": "Determines the color of the avatar.
+Use \`gen-ai\` for AI assistants and \`default\` otherwise.",
+      "inlineType": {
+        "name": "AvatarProps.Color",
+        "type": "union",
+        "values": [
+          "default",
+          "gen-ai",
+        ],
+      },
+      "name": "color",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "defaultValue": ""user-profile"",
+      "description": "Specifies the icon to be displayed as Avatar.
+Use \`gen-ai\` icon for AI assistants. By default \`user-profile\` icon is used.
+If you set both \`iconName\` and \`initials\`, \`initials\` will take precedence.
+",
+      "inlineType": {
+        "name": "IconProps.Name",
+        "type": "union",
+        "values": [
+          "add-plus",
+          "anchor-link",
+          "angle-left-double",
+          "angle-left",
+          "angle-right-double",
+          "angle-right",
+          "angle-up",
+          "angle-down",
+          "arrow-left",
+          "arrow-right",
+          "audio-full",
+          "audio-half",
+          "audio-off",
+          "bug",
+          "call",
+          "calendar",
+          "caret-down-filled",
+          "caret-down",
+          "caret-left-filled",
+          "caret-right-filled",
+          "caret-up-filled",
+          "caret-up",
+          "check",
+          "contact",
+          "close",
+          "copy",
+          "delete-marker",
+          "download",
+          "drag-indicator",
+          "edit",
+          "ellipsis",
+          "envelope",
+          "expand",
+          "external",
+          "file-open",
+          "file",
+          "filter",
+          "flag",
+          "folder-open",
+          "folder",
+          "gen-ai",
+          "group-active",
+          "group",
+          "heart",
+          "heart-filled",
+          "insert-row",
+          "key",
+          "keyboard",
+          "lock-private",
+          "menu",
+          "microphone",
+          "microphone-off",
+          "multiscreen",
+          "notification",
+          "redo",
+          "refresh",
+          "remove",
+          "resize-area",
+          "script",
+          "search",
+          "security",
+          "settings",
+          "send",
+          "share",
+          "shrink",
+          "star-filled",
+          "star-half",
+          "star",
+          "status-in-progress",
+          "status-info",
+          "status-negative",
+          "status-pending",
+          "status-positive",
+          "status-stopped",
+          "status-warning",
+          "subtract-minus",
+          "suggestions",
+          "thumbs-down-filled",
+          "thumbs-down",
+          "thumbs-up-filled",
+          "thumbs-up",
+          "ticket",
+          "treeview-collapse",
+          "treeview-expand",
+          "undo",
+          "unlocked",
+          "upload-download",
+          "upload",
+          "user-profile-active",
+          "user-profile",
+          "video-off",
+          "video-on",
+          "video-unavailable",
+          "view-full",
+          "view-horizontal",
+          "view-vertical",
+          "zoom-in",
+          "zoom-out",
+          "zoom-to-fit",
+        ],
+      },
+      "name": "iconName",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon can't be an SVG.
+For SVG icons, use the \`iconSvg\` slot instead.
+If you set both \`iconUrl\` and \`iconSvg\`, \`iconSvg\` will take precedence.
+",
+      "name": "iconUrl",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "The text content shown directly in the avatar's body.
+Can be 1 or 2 symbols long, every subsequent symbol is ignored.
+Use it to define initials that uniquely identify the avatar's owner.
+When you use this property, make sure to include it in the \`ariaLabel\`.
+",
       "name": "initials",
       "optional": true,
       "type": "string",
     },
+    {
+      "description": "When set to true, a loading indicator is shown in avatar.",
+      "name": "loading",
+      "optional": true,
+      "type": "boolean",
+    },
+    {
+      "description": "The text content shown in the avatar's tooltip.
+When you use this property, make sure to include it in the \`ariaLabel\`.
+",
+      "name": "tooltipText",
+      "optional": true,
+      "type": "string",
+    },
+  ],
+  "regions": [
+    {
+      "description": "Specifies the SVG of a custom icon.
+Use this property if the icon you want isn't available.
+If you set both \`iconUrl\` and \`iconSvg\`, \`iconSvg\` will take precedence.
+",
+      "isDefault": false,
+      "name": "iconSvg",
+    },
   ],
-  "regions": [],
   "releaseStatus": "stable",
 }
 `;

src/__tests__/default-props.tsx

@@ -3,7 +3,7 @@
 import type { AvatarProps } from "../../lib/components";
 
 const avatarProps: AvatarProps = {
-  initials: "",
+  ariaLabel: "Avatar",
 };
 export const defaultProps = {
   avatar: avatarProps,