- {initials}
+
+ {showTooltip && tooltipText && (
+
setShowTooltip(false) }}
+ />
+ )}
+
+
);
}
diff --git a/src/avatar/loading-dots/index.tsx b/src/avatar/loading-dots/index.tsx
new file mode 100644
index 0000000..6777707
--- /dev/null
+++ b/src/avatar/loading-dots/index.tsx
@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from "clsx";
+import styles from "./styles.css.js";
+
+interface LoadingDotsProps {
+ color?: string;
+}
+
+export default function LoadingDots({ color }: LoadingDotsProps) {
+ return (
+ // "gen-ai" class is added so that the gradient background animates.
+
+ );
+}
diff --git a/src/avatar/loading-dots/motion.scss b/src/avatar/loading-dots/motion.scss
new file mode 100644
index 0000000..72c2e32
--- /dev/null
+++ b/src/avatar/loading-dots/motion.scss
@@ -0,0 +1,112 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use "../../internal/shared" as shared;
+@use "../../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
+
+.gen-ai {
+ &::before {
+ content: "";
+ position: absolute;
+ inline-size: inherit;
+ block-size: inherit;
+ inset-block-start: 50%;
+ inset-inline-start: 50%;
+ transform: translate(-50%, -50%);
+ background: cs.$color-background-avatar-gen-ai;
+
+ @include shared.with-motion {
+ animation: gradientMove cs.$motion-duration-avatar-gen-ai-gradient infinite
+ cs.$motion-easing-avatar-gen-ai-gradient;
+ }
+ }
+
+ @include shared.with-direction("rtl") {
+ &::before {
+ @include shared.with-motion {
+ animation: gradientMoveReverse cs.$motion-duration-avatar-gen-ai-gradient infinite
+ cs.$motion-easing-avatar-gen-ai-gradient;
+ }
+ }
+ }
+}
+
+// Gradient rotation animation
+@keyframes gradientMove {
+ 0% {
+ transform: translate(-50%, -50%) rotate(0deg);
+ }
+
+ 50% {
+ block-size: 44px;
+ inline-size: 44px;
+ }
+
+ 100% {
+ transform: translate(-50%, -50%) rotate(360deg);
+ }
+}
+
+@keyframes gradientMoveReverse {
+ 0% {
+ transform: translate(-50%, -50%) rotate(360deg);
+ inset-inline-start: -50%;
+ }
+
+ 50% {
+ block-size: 44px;
+ inline-size: 44px;
+ inset-inline-start: -100%;
+ }
+
+ 100% {
+ transform: translate(-50%, -50%) rotate(0deg);
+ inset-inline-start: -50%;
+ }
+}
+
+.dot {
+ @include shared.with-motion {
+ animation: dotsDancing cs.$motion-duration-avatar-loading-dots infinite ease-in-out;
+ }
+}
+
+// Dots dancing animation
+.dot:nth-child(1) {
+ @include shared.with-motion {
+ animation-delay: 100ms;
+ }
+}
+
+.dot:nth-child(2) {
+ @include shared.with-motion {
+ animation-delay: 200ms;
+ }
+}
+
+.dot:nth-child(3) {
+ @include shared.with-motion {
+ animation-delay: 300ms;
+ }
+}
+
+.dot:last-child {
+ @include shared.with-motion {
+ margin-inline-end: 0;
+ }
+}
+
+@keyframes dotsDancing {
+ 0% {
+ transform: translateY(0px);
+ }
+
+ 28% {
+ transform: translateY(-4px);
+ }
+
+ 44% {
+ transform: translateY(0px);
+ }
+}
diff --git a/src/avatar/loading-dots/styles.scss b/src/avatar/loading-dots/styles.scss
new file mode 100644
index 0000000..373fc79
--- /dev/null
+++ b/src/avatar/loading-dots/styles.scss
@@ -0,0 +1,34 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use "../../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
+@use '../mixins.scss' as mixins;
+@use './motion.scss';
+
+$dot-size: 4px;
+
+.root {
+ inline-size: inherit;
+ block-size: inherit;
+ @include mixins.border-radius-avatar;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.typing {
+ align-items: center;
+ justify-content: space-between;
+ display: flex;
+ inline-size: 18px;
+}
+
+.dot {
+ background-color: cs.$color-text-avatar;
+ @include mixins.border-radius-avatar;
+ block-size: $dot-size;
+ inline-size: $dot-size;
+}
diff --git a/src/avatar/mixins.scss b/src/avatar/mixins.scss
new file mode 100644
index 0000000..1326dc0
--- /dev/null
+++ b/src/avatar/mixins.scss
@@ -0,0 +1,11 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@mixin border-radius-avatar {
+ border-start-start-radius: 50%;
+ border-start-end-radius: 50%;
+ border-end-start-radius: 50%;
+ border-end-end-radius: 50%;
+}
diff --git a/src/avatar/styles.scss b/src/avatar/styles.scss
index 93f2b4f..7ec4f0d 100644
--- a/src/avatar/styles.scss
+++ b/src/avatar/styles.scss
@@ -1,3 +1,51 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
+@use "./mixins.scss" as mixins;
+@use "../internal/shared" as shared;
+
+$avatar-size: 28px;
+
.root {
- /* used in test-utils */
+ @include shared.styles-reset;
+
+ color: cs.$color-text-avatar;
+ block-size: $avatar-size;
+ inline-size: $avatar-size;
+ position: relative;
+ @include mixins.border-radius-avatar;
+
+ &.avatar-color-default {
+ background-color: cs.$color-background-avatar-default;
+ }
+
+ &.avatar-color-gen-ai {
+ background: cs.$color-background-avatar-gen-ai;
+ }
+
+ &.initials {
+ font-family: cs.$font-family-base;
+ font-size: cs.$font-size-body-s;
+ line-height: cs.$line-height-body-s;
+ font-weight: cs.$font-weight-heading-l;
+ }
+
+ &:focus {
+ outline: none;
+
+ @include shared.when-visible {
+ @include shared.focus-highlight(1px, 50%);
+ }
+ }
+}
+
+.content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ block-size: inherit;
+ inline-size: inherit;
+ overflow: hidden;
}
diff --git a/src/internal/shared.scss b/src/internal/shared.scss
index 0c54dcb..257c1e9 100644
--- a/src/internal/shared.scss
+++ b/src/internal/shared.scss
@@ -51,3 +51,31 @@
@content;
}
}
+
+@mixin styles-reset {
+ border-collapse: separate;
+ border-spacing: 0;
+ box-sizing: border-box;
+ caption-side: top;
+ cursor: auto;
+ direction: inherit;
+ empty-cells: show;
+ font-family: serif;
+ font-size: medium;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: 400;
+ font-stretch: normal;
+ line-height: normal;
+ hyphens: none;
+ letter-spacing: normal;
+ list-style: disc outside none;
+ tab-size: 8;
+ text-align: start;
+ text-indent: 0;
+ text-shadow: none;
+ text-transform: none;
+ visibility: visible;
+ white-space: normal;
+ word-spacing: normal;
+}
diff --git a/src/test-utils/dom/avatar/index.ts b/src/test-utils/dom/avatar/index.ts
index 7f96dbe..1ee9188 100644
--- a/src/test-utils/dom/avatar/index.ts
+++ b/src/test-utils/dom/avatar/index.ts
@@ -1,8 +1,14 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
+import TooltipWrapper from "@cloudscape-design/components/test-utils/dom/internal/tooltip";
import { ComponentWrapper } from "@cloudscape-design/test-utils-core/dom";
+import createWrapper from "..";
import avatarStyles from "../../../avatar/styles.selectors.js";
export default class AvatarWrapper extends ComponentWrapper {
static rootSelector: string = avatarStyles.root;
+
+ findTooltip(): TooltipWrapper | null {
+ return createWrapper().findComponent(`.${TooltipWrapper.rootSelector}`, TooltipWrapper);
+ }
}
diff --git a/test/functional/avatar/simple.test.ts b/test/functional/avatar/simple.test.ts
deleted file mode 100644
index 29c93b5..0000000
--- a/test/functional/avatar/simple.test.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import { BasePageObject } from "@cloudscape-design/browser-test-tools/page-objects";
-import { describe, expect, test } from "vitest";
-import createWrapper from "../../../lib/components/test-utils/selectors";
-import { setupTest } from "../../utils";
-
-const wrapper = createWrapper();
-const avatarWrapper = wrapper.findAvatar();
-
-describe("avatar functional tests", () => {
- test(
- "renders",
- setupTest("/index.html#/avatar/simple", BasePageObject, async (page) => {
- await expect(page.getElementsText(avatarWrapper.toSelector())).resolves.toEqual(["GW"]);
- }),
- );
-});