From 783642e4570280ffc178d0ce9710498ff2321f02 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Sun, 8 Sep 2024 22:30:28 +0200
Subject: [PATCH] feat(progressSpinner): add progress spinner component

RISDEV-4815
---
 src/primevue/index.ts                         |  4 +++-
 .../progressSpinner.stories.ts                | 22 +++++++++++++++++++
 .../progressSpinner/progressSpinner.ts        | 14 ++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/primevue/progressSpinner/progressSpinner.stories.ts
 create mode 100644 src/primevue/progressSpinner/progressSpinner.ts

diff --git a/src/primevue/index.ts b/src/primevue/index.ts
index 36ac2a0..37ab678 100644
--- a/src/primevue/index.ts
+++ b/src/primevue/index.ts
@@ -1,11 +1,12 @@
 import "./global.css";
 
 import button from "./button/button";
+import fileUpload from "./fileUpload/fileUpload";
 import inputGroup from "./inputGroup/inputGroup";
 import inputGroupAddon from "./inputGroup/inputGroupAddon";
 import inputText from "./inputText/inputText";
 import password from "./password/password";
-import fileUpload from "./fileUpload/fileUpload";
+import progressSpinner from "./progressSpinner/progressSpinner";
 
 export const RisUiTheme = {
   button,
@@ -14,4 +15,5 @@ export const RisUiTheme = {
   inputGroupAddon,
   password,
   fileUpload,
+  progressSpinner,
 };
diff --git a/src/primevue/progressSpinner/progressSpinner.stories.ts b/src/primevue/progressSpinner/progressSpinner.stories.ts
new file mode 100644
index 0000000..67c1884
--- /dev/null
+++ b/src/primevue/progressSpinner/progressSpinner.stories.ts
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/vue3";
+import ProgressSpinner from "primevue/progressspinner";
+import { html } from "@/lib/tags.ts";
+
+const meta: Meta<typeof ProgressSpinner> = {
+  component: ProgressSpinner,
+
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { ProgressSpinner },
+    setup() {
+      return { args };
+    },
+    template: html`<ProgressSpinner />`,
+  }),
+};
diff --git a/src/primevue/progressSpinner/progressSpinner.ts b/src/primevue/progressSpinner/progressSpinner.ts
new file mode 100644
index 0000000..b91968a
--- /dev/null
+++ b/src/primevue/progressSpinner/progressSpinner.ts
@@ -0,0 +1,14 @@
+import { ProgressSpinnerPassThroughOptions } from "primevue/progressspinner";
+import { tw } from "@/lib/tags.ts";
+
+const progressSpinner: ProgressSpinnerPassThroughOptions = {
+  root: {
+    class: tw`relative mx-auto inline-block h-28 w-28 animate-spin`,
+  },
+
+  circle: {
+    class: tw`fill-transparent stroke-current stroke-[4px] text-blue-800 [stroke-dasharray:200] [stroke-dashoffset:100]`,
+  },
+};
+
+export default progressSpinner;