From d0c6d1d875379a592c3f4f32d182adbea18c719b Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Thu, 24 Apr 2025 11:32:54 +0200
Subject: [PATCH] fix: update spinner to use svg instead

---
 .../lib/components/Button/Button.tsx          |  19 +++-
 .../components/Spinner/Spinner.stories.tsx    | 103 ++++--------------
 .../lib/components/Spinner/Spinner.tsx        |  33 ++++--
 .../lib/components/Spinner/spinner.module.css |  54 +--------
 .../lib/components/Spinner/variants.ts        |  15 +--
 5 files changed, 69 insertions(+), 155 deletions(-)

diff --git a/packages/design-system/lib/components/Button/Button.tsx b/packages/design-system/lib/components/Button/Button.tsx
index 773a32f4c..86bf399e3 100644
--- a/packages/design-system/lib/components/Button/Button.tsx
+++ b/packages/design-system/lib/components/Button/Button.tsx
@@ -5,6 +5,7 @@ import { variants } from './variants'
 import type { ButtonProps } from './types'
 import { Spinner } from '../Spinner'
 import styles from './button.module.css'
+import { SpinnerProps } from '../Spinner/Spinner'
 
 export function Button({
   variant,
@@ -15,7 +16,6 @@ export function Button({
   typography,
   className,
   children,
-  isPending,
   ...props
 }: ButtonProps) {
   const classNames = variants({
@@ -27,15 +27,28 @@ export function Button({
     className,
   })
 
+  let spinnerType: SpinnerProps['type'] = 'Dark'
+
+  switch (color) {
+    case 'Primary':
+      spinnerType = 'Dark'
+      break
+    case 'Inverted':
+      spinnerType = 'White'
+      break
+    default:
+      spinnerType = 'Dark'
+  }
+
   return (
-    <ButtonRAC {...props} className={classNames} isPending={isPending}>
+    <ButtonRAC {...props} className={classNames}>
       {({ isPending }) => {
         return (
           <>
             {children}
             {isPending && (
               <div className={styles.spinnerWrapper}>
-                <Spinner size="Small" color="CurrentColor" />
+                <Spinner size={20} type={spinnerType} />
               </div>
             )}
           </>
diff --git a/packages/design-system/lib/components/Spinner/Spinner.stories.tsx b/packages/design-system/lib/components/Spinner/Spinner.stories.tsx
index bc09d0fa5..37dc317b1 100644
--- a/packages/design-system/lib/components/Spinner/Spinner.stories.tsx
+++ b/packages/design-system/lib/components/Spinner/Spinner.stories.tsx
@@ -7,98 +7,35 @@ import { Spinner } from './Spinner'
 const meta: Meta<typeof Spinner> = {
   title: 'Components/Spinner',
   component: Spinner,
-  argTypes: {},
+  argTypes: {
+    type: {
+      control: 'text',
+    },
+    size: {
+      control: 'number',
+    },
+  },
 }
 
 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 Dark: Story = {
+  args: {
+    type: 'Dark',
+    size: 40,
+  },
 }
 
-export const Default: Story = {
+export const White: Story = {
   args: {
-    color: 'Accent',
-    size: 'Medium',
+    type: 'White',
+    size: 40,
   },
-  decorators: [
-    (Story) => (
-      <Wrapper>
-        <Story />
-      </Wrapper>
-    ),
-  ],
-}
-
-export const Inverted: Story = {
-  args: {
-    color: 'Inverted',
-    size: 'Medium',
+  parameters: {
+    backgrounds: {
+      default: 'Scandic Primary Dark',
+    },
   },
-  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>
-    ),
-  ],
 }
diff --git a/packages/design-system/lib/components/Spinner/Spinner.tsx b/packages/design-system/lib/components/Spinner/Spinner.tsx
index 32dc1388a..92746a449 100644
--- a/packages/design-system/lib/components/Spinner/Spinner.tsx
+++ b/packages/design-system/lib/components/Spinner/Spinner.tsx
@@ -1,21 +1,34 @@
-import { VariantProps } from 'class-variance-authority'
 import styles from './spinner.module.css'
+import { VariantProps } from 'class-variance-authority'
 
 import { variants } from './variants'
 
-type SpinnerProps = VariantProps<typeof variants>
+export interface SpinnerProps extends VariantProps<typeof variants> {
+  size?: number
+}
 
-export function Spinner({ color, size }: SpinnerProps) {
+export function Spinner({ type, size = 20 }: SpinnerProps) {
   const classNames = variants({
-    color,
-    size,
+    type,
   })
 
   return (
-    <div className={classNames}>
-      {[...Array(8)].map((_, i) => (
-        <div key={i} className={styles.dot} />
-      ))}
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 20 21"
+      fill="none"
+      className={classNames}
+    >
+      <circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" />
+      <circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" />
+      <circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" />
+      <circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" />
+      <circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" />
+      <circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" />
+      <circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" />
+      <circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" />
+    </svg>
   )
 }
diff --git a/packages/design-system/lib/components/Spinner/spinner.module.css b/packages/design-system/lib/components/Spinner/spinner.module.css
index dd60a9f04..f8d3dddb8 100644
--- a/packages/design-system/lib/components/Spinner/spinner.module.css
+++ b/packages/design-system/lib/components/Spinner/spinner.module.css
@@ -1,84 +1,42 @@
 .spinner {
   display: inline-block;
-  position: relative;
-
-  --size: 20px;
-  --dot-size: 3px;
-
-  width: var(--size);
-  height: var(--size);
 }
 
-.size-small {
-  --size: 20px;
-}
-
-.size-medium {
-  --size: 30px;
-  --dot-size: 5px;
-}
-
-.size-large {
-  --size: 40px;
-  --dot-size: 6px;
-}
-
-.spinner .dot {
-  transform-origin: calc(var(--size) / 2) calc(var(--size) / 2);
+.dot {
   animation: spinnerAnimation 0.8s linear infinite;
+  transform-origin: center;
 }
 
-.spinner .dot::after {
-  content: ' ';
-  display: block;
-  position: absolute;
-  top: calc(var(--dot-size) / 2);
-  left: var(--dot-size);
-  width: var(--dot-size);
-  height: var(--dot-size);
-  border-radius: 50%;
-  background-color: currentColor;
+.dark .dot {
+  fill: var(--Icon-Interactive-Default);
 }
 
-.accent .dot::after {
-  background-color: var(--Icon-Interactive-Default);
-}
-
-.inverted .dot::after {
-  background-color: var(--Icon-Inverted);
+.white .dot {
+  fill: var(--Icon-Inverted);
 }
 
 .dot:nth-child(1) {
-  transform: rotate(0deg);
   animation-delay: -0.7s;
 }
-
 .dot:nth-child(2) {
-  transform: rotate(45deg);
   animation-delay: -0.6s;
 }
 .dot:nth-child(3) {
-  transform: rotate(90deg);
   animation-delay: -0.5s;
 }
 .dot:nth-child(4) {
-  transform: rotate(135deg);
   animation-delay: -0.4s;
 }
 .dot:nth-child(5) {
-  transform: rotate(180deg);
   animation-delay: -0.3s;
 }
 .dot:nth-child(6) {
-  transform: rotate(225deg);
   animation-delay: -0.2s;
 }
 .dot:nth-child(7) {
-  transform: rotate(270deg);
   animation-delay: -0.1s;
 }
 .dot:nth-child(8) {
-  transform: rotate(315deg);
   animation-delay: 0s;
 }
 
diff --git a/packages/design-system/lib/components/Spinner/variants.ts b/packages/design-system/lib/components/Spinner/variants.ts
index 87e2764e5..ee43570da 100644
--- a/packages/design-system/lib/components/Spinner/variants.ts
+++ b/packages/design-system/lib/components/Spinner/variants.ts
@@ -4,20 +4,13 @@ import styles from './spinner.module.css'
 
 export const config = {
   variants: {
-    color: {
-      Accent: styles.accent,
-      Inverted: styles.inverted,
-      CurrentColor: 'currentColor',
-    },
-    size: {
-      Small: styles['size-small'],
-      Medium: styles['size-medium'],
-      Large: styles['size-large'],
+    type: {
+      Dark: styles.dark,
+      White: styles.white,
     },
   },
   defaultVariants: {
-    color: 'Accent',
-    size: 'Medium',
+    type: 'Dark',
   },
 } as const