From 9c1e782c0fae08e8241c989ea3450d4cdb4ac3ad Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 14 Nov 2024 10:34:09 +0100
Subject: [PATCH] Add story

---
 v2/pink-sb/src/lib/index.ts                   |  1 +
 .../src/stories/Skeleton.stories.svelte       | 34 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 v2/pink-sb/src/stories/Skeleton.stories.svelte

diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
index 22314eb3a..3e3c2a56e 100644
--- a/v2/pink-sb/src/lib/index.ts
+++ b/v2/pink-sb/src/lib/index.ts
@@ -19,6 +19,7 @@ export { default as ActionList } from './action-list/index.js';
 export { default as Upload } from './upload/index.js';
 export { default as Dialog } from './Dialog.svelte';
 export { default as Empty } from './Empty.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
 export { default as Keyboard } from './Keyboard.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Pagination } from './Pagination.svelte';
diff --git a/v2/pink-sb/src/stories/Skeleton.stories.svelte b/v2/pink-sb/src/stories/Skeleton.stories.svelte
new file mode 100644
index 000000000..7c320389a
--- /dev/null
+++ b/v2/pink-sb/src/stories/Skeleton.stories.svelte
@@ -0,0 +1,34 @@
+<script context="module" lang="ts">
+    import { Skeleton } from '$lib/index.js';
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+    import { Story } from '@storybook/addon-svelte-csf';
+
+    export const meta: MetaProps = {
+        title: 'Components/Skeleton',
+        component: Skeleton,
+        args: {
+            variant: 'circle',
+            width: 44,
+            height: 12
+        },
+        argTypes: {
+            variant: {
+                options: ['circle', 'square', 'line'],
+                control: { type: 'select' }
+            }
+        }
+    };
+</script>
+
+<div class="wrapper">
+    <Story name="Default" let:args>
+        <Skeleton {...args} />
+    </Story>
+</div>
+
+<style>
+    .wrapper {
+        margin: 100px auto;
+        width: 400px;
+    }
+</style>