-
+
G
@@ -147,12 +165,20 @@
- {% icon "Bell" %}
+ {% icon "Notification" %}
-
+
+
+ {% icon "Notification" %}
+
+
+
{% endfor %}
diff --git a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte
new file mode 100644
index 0000000000..038ed1e1c6
--- /dev/null
+++ b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte
@@ -0,0 +1,209 @@
+
+
+
+
+
+
+
+
+
+ | Variant |
+ Example |
+
+
+
+
+ {#each ActivityIndicatorVariants as variant (variant)}
+
+ |
+ {variant || "default"}
+ |
+
+
+ |
+
+ {/each}
+
+
+
+
+
+
+
+
+
+ | Size |
+ Example |
+
+
+
+
+ {#each ActivityIndicatorSizes as size (size)}
+
+ |
+ {size || "default"}
+ |
+
+
+ |
+
+ {/each}
+
+
+
+
+
+
+
+
+
+ | Content |
+ Example |
+
+
+
+
+
+ | Number (3) |
+
+
+ |
+
+
+ | Number (12) |
+
+
+ |
+
+
+ | Number (370) |
+
+
+ |
+
+
+ | Text ("new") |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+ | Content |
+ Example |
+
+
+
+
+
+ | Notifications |
+
+
+
+
+ |
+
+
+
+
diff --git a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte
new file mode 100644
index 0000000000..e458c3e2b7
--- /dev/null
+++ b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte
@@ -0,0 +1,72 @@
+
+
+
+
+
+ {#if content && size !== "sm"}{content}{/if}
+
{label}
+
diff --git a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.test.ts b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.test.ts
new file mode 100644
index 0000000000..eb031ae0d9
--- /dev/null
+++ b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.test.ts
@@ -0,0 +1,81 @@
+import { expect } from "@open-wc/testing";
+import { render, screen } from "@testing-library/svelte";
+
+import ActivityIndicator from "./ActivityIndicator.svelte";
+
+describe("ActivityIndicator", () => {
+ it("should render the indicator with the required label as screen reader text", () => {
+ render(ActivityIndicator, { label: "test activity" });
+ expect(screen.getByText("test activity")).to.exist;
+ });
+
+ it("should render the content when provided", () => {
+ render(ActivityIndicator, { label: "test activity", content: 3 });
+ expect(screen.getByText("3")).to.exist;
+ });
+
+ it("should render text content when provided", () => {
+ render(ActivityIndicator, {
+ label: "test activity",
+ content: "new",
+ });
+ expect(screen.getByText("new")).to.exist;
+ });
+
+ it("should apply the success variant class", () => {
+ render(ActivityIndicator, {
+ label: "test activity",
+ variant: "success",
+ });
+ expect(screen.getByText("test activity").parentElement).to.have.class(
+ "s-activity-indicator__success"
+ );
+ });
+
+ it("should apply the warning variant class", () => {
+ render(ActivityIndicator, {
+ label: "test activity",
+ variant: "warning",
+ });
+ expect(screen.getByText("test activity").parentElement).to.have.class(
+ "s-activity-indicator__warning"
+ );
+ });
+
+ it("should apply the danger variant class", () => {
+ render(ActivityIndicator, {
+ label: "test activity",
+ variant: "danger",
+ });
+ expect(screen.getByText("test activity").parentElement).to.have.class(
+ "s-activity-indicator__danger"
+ );
+ });
+
+ it("should apply the small size class", () => {
+ render(ActivityIndicator, { label: "test activity", size: "sm" });
+ expect(screen.getByText("test activity").parentElement).to.have.class(
+ "s-activity-indicator__sm"
+ );
+ });
+
+ it("should not render content when size is sm", () => {
+ render(ActivityIndicator, {
+ label: "test activity",
+ size: "sm",
+ content: 3,
+ });
+ expect(screen.queryByText("3")).to.not.exist;
+ expect(screen.getByText("test activity")).to.exist;
+ });
+
+ it("should render the indicator with arbitrary classes", () => {
+ render(ActivityIndicator, {
+ label: "test activity",
+ class: "custom-class",
+ });
+ expect(screen.getByText("test activity").parentElement).to.have.class(
+ "custom-class"
+ );
+ });
+});
diff --git a/packages/stacks-svelte/src/components/index.ts b/packages/stacks-svelte/src/components/index.ts
index 7e1b5ebf2d..04a6a216a4 100644
--- a/packages/stacks-svelte/src/components/index.ts
+++ b/packages/stacks-svelte/src/components/index.ts
@@ -1,3 +1,4 @@
+export { default as ActivityIndicator } from "./ActivityIndicator/ActivityIndicator.svelte";
export { default as AwardBling } from "./AwardBling/AwardBling.svelte";
export { default as Avatar } from "./Avatar/Avatar.svelte";
export { default as Button } from "./Button/Button.svelte";