feat(SW-1255): Add loading state to button component

packages/design-system/lib/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,104 @@
+import 'react-material-symbols/rounded'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Spinner } from './Spinner'
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof Spinner>
+
+function Wrapper({
+  children,
+  backgroundColor,
+}: {
+  children: React.ReactNode
+  backgroundColor?: string
+}) {
+  return (
+    <div
+      style={{
+        height: '200px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const Default: Story = {
+  args: {
+    color: 'Accent',
+    size: 'Medium',
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+}
+
+export const Inverted: Story = {
+  args: {
+    color: 'Inverted',
+    size: 'Medium',
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper backgroundColor="var(--Icon-Interactive-Default)">
+        <Story />
+      </Wrapper>
+    ),
+  ],
+}
+
+export const Small: Story = {
+  args: {
+    size: 'Small',
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+}
+
+export const Medium: Story = {
+  args: {
+    size: 'Medium',
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+}
+
+export const Large: Story = {
+  args: {
+    size: 'Large',
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+}