From b67a0057a62de9ecc4d01c53324bf05f4e93e724 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 25 Mar 2025 09:44:27 -0700
Subject: [PATCH] updates spinner

---
 src/components/Spinner/Spinner.mdx            | 12 +++++++++-
 src/components/Spinner/Spinner.stories.svelte | 23 ++++---------------
 src/components/Spinner/Spinner.svelte         |  2 +-
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/components/Spinner/Spinner.mdx b/src/components/Spinner/Spinner.mdx
index fb04d7c7..fc15c31a 100644
--- a/src/components/Spinner/Spinner.mdx
+++ b/src/components/Spinner/Spinner.mdx
@@ -1,4 +1,12 @@
-Simple loading spinner. Use it to help hide long loading times for components that may be loading expensive media files or crunching through lots of data.
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SpinnerStories from './Spinner.stories.svelte';
+
+<Meta of={SpinnerStories} />
+
+# Spinner
+
+The `Spinner` component creates a simple loading spinner. Use it to hide long loading times for components that may be loading expensive media files or crunching through lots of data.
 
 ```svelte
 <script>
@@ -13,3 +21,5 @@ Simple loading spinner. Use it to help hide long loading times for components th
   <p>The real deal is here.</p>
 {/if}
 ```
+
+<Canvas of={SpinnerStories.Demo} />
diff --git a/src/components/Spinner/Spinner.stories.svelte b/src/components/Spinner/Spinner.stories.svelte
index 81b280a8..f29e0b82 100644
--- a/src/components/Spinner/Spinner.stories.svelte
+++ b/src/components/Spinner/Spinner.stories.svelte
@@ -1,15 +1,10 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Spinner from './Spinner.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Utilities/Spinner',
     component: Spinner,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       colour: { control: 'color' },
       ringWidth: { control: { type: 'range', min: 2, max: 20, step: 1 } },
@@ -19,17 +14,7 @@
         control: { type: 'range', min: 5, max: 100, step: 5 },
       },
     },
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <Spinner {...args} />
-  {/snippet}
-</Template>
-
-<Story name="Default" />
+<Story name="Demo" />
diff --git a/src/components/Spinner/Spinner.svelte b/src/components/Spinner/Spinner.svelte
index 54db7079..be6dd41b 100644
--- a/src/components/Spinner/Spinner.svelte
+++ b/src/components/Spinner/Spinner.svelte
@@ -32,7 +32,7 @@
 
 <div
   style:width="100%"
-  style:height="{`${width + containerPadding * 2}px`}"
+  style:height={`${width + containerPadding * 2}px`}
   class="component-container flex items-center justify-center"
 >
   <div