feat: add spinner (#74)

Signed-off-by: Lukas.J.Han <[email protected]>

packages/core/lib/components/Spinner.tsx

@@ -0,0 +1,69 @@
+import { Color, getTextColorClassname } from '../colors/color.type';
+
+export type SpinnerProps = {
+  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+  color?: Color;
+  className?: string;
+};
+
+export const Spinner = ({
+  size = 'medium',
+  color,
+  className = '',
+}: SpinnerProps) => {
+  const sizeStyles: { style: string; fontSize: 'l' | 'm' | 's' | 'xs' } = {
+    'x-small': {
+      style: 'w-4 h-4',
+      fontSize: 's' as const,
+    },
+    small: {
+      style: 'w-5 h-5',
+      fontSize: 'm' as const,
+    },
+    medium: {
+      style: 'w-6 h-6',
+      fontSize: 'm' as const,
+    },
+    large: {
+      style: 'w-7 h-7',
+      fontSize: 'l' as const,
+    },
+    'x-large': {
+      style: 'w-8 h-8',
+      fontSize: 'l' as const,
+    },
+  }[size];
+
+  const colorStyles = color ? getTextColorClassname(color) : '';
+
+  const spinnerStyles = `
+    ${sizeStyles.style} 
+    ${colorStyles}
+    ${className}
+  `;
+
+  return (
+    <div className={spinnerStyles} role="status" aria-hidden="true">
+      <svg
+        className="animate-spin"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="9"
+          stroke="currentColor"
+          strokeWidth="2"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M12 2a10 10 0 0110 10 10 10 0 01-5 8.66l-1-1.73a8 8 0 004-6.93 8 8 0 00-8-8V2z"
+        ></path>
+      </svg>
+    </div>
+  );
+};

packages/core/lib/index.ts

@@ -11,6 +11,7 @@ import { colors } from './colors/color';
 import { Button } from './components/Button';
 import { LinkButton } from './components/LinkButton';
 import { Tag } from './components/Tag';
+import { Spinner } from './components/Spinner';
 
 export { Display, Heading, Title, Body, Detail, Label, Link, colors };
-export { Button, LinkButton, Tag };
+export { Button, LinkButton, Tag, Spinner };

stories/core/Spinner.stories.ts

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Spinner } from '../../packages/core/lib';
+
+const meta = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['x-small', 'small', 'medium', 'large', 'x-large'],
+      },
+    },
+  },
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Primary: Story = {
+  args: {
+    size: 'medium',
+    color: 'primary',
+  },
+};
+
+export const SuccessColors: Story = {
+  args: {
+    size: 'medium',
+    color: 'success',
+  },
+};
+
+export const xSmall: Story = {
+  args: {
+    size: 'x-small',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'medium',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+  },
+};
+
+export const xLarge: Story = {
+  args: {
+    size: 'x-large',
+  },
+};