feat(spinner): css changes and data attrs

.changeset/small-queens-breathe.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Spinner: Style using data attributes

packages/css/spinner.css

@@ -1,42 +1,58 @@
 .ds-spinner {
   --dsc-spinner-background: var(--ds-color-neutral-surface-default);
-  --dsc-spinner-stroke: var(--ds-color-accent-base-default);
+  --dsc-spinner-stroke: var(--ds-color-neutral-border-default);
+  --dsc-spinner-size: var(--ds-sizing-11);
+  --dsc-spinner-animation-duration: 2s;
 
+  width: var(--dsc-spinner-size);
+  height: var(--dsc-spinner-size);
   animation: ds-spinner-rotate-animation linear infinite;
-  animation-duration: 2s;
+  animation-duration: var(--dsc-spinner-animation-duration);
+
+  &[data-color='accent'] {
+    --dsc-spinner-stroke: var(--ds-color-accent-base-default);
+  }
+
+  &[data-size='2xs'] {
+    --dsc-spinner-size: var(--ds-sizing-3);
+  }
+
+  &[data-size='xs'] {
+    --dsc-spinner-size: var(--ds-sizing-5);
+  }
+
+  &[data-size='sm'] {
+    --dsc-spinner-size: var(--ds-sizing-8);
+  }
+
+  &[data-size='lg'] {
+    --dsc-spinner-size: var(--ds-sizing-15);
+  }
+
+  &[data-size='xl'] {
+    --dsc-spinner-size: var(--ds-sizing-22);
+  }
+}
+
+.ds-spinner__background {
+  stroke: var(--dsc-spinner-background);
 }
 
 .ds-spinner__circle {
   stroke: var(--dsc-spinner-stroke);
   stroke-dasharray: 1px, 200px;
   transform-origin: center;
   animation: ds-spinner-stroke-animation ease-in-out infinite;
-  animation-duration: 2s;
+  animation-duration: var(--dsc-spinner-animation-duration);
 }
 
 /* Prefers reduced motion needs longer animation,
 but don't remove it since it is not decorative.
 */
 @media (prefers-reduced-motion: reduce) {
   .ds-spinner {
-    animation-duration: 6s;
+    --dsc-spinner-animation-duration: 6s;
   }
-
-  .ds-spinner__circle {
-    animation-duration: 6s;
-  }
-}
-
-.ds-spinner--neutral {
-  --dsc-spinner-stroke: var(--ds-color-neutral-border-default);
-}
-
-.ds-spinner--accent {
-  --dsc-spinner-stroke: var(--ds-color-accent-base-default);
-}
-
-.ds-spinner__background {
-  stroke: var(--dsc-spinner-background);
 }
 
 @keyframes ds-spinner-rotate-animation {

packages/react/src/components/Spinner/Spinner.test.tsx

@@ -9,9 +9,10 @@ beforeAll(() => {
 describe('spinner', (): void => {
   it('should render with default medium size', (): void => {
     render(<Spinner title='Loading' />);
-    expect(screen.getByTitle('Loading').parentElement).toHaveStyle({
-      width: '40px',
-    });
+    expect(screen.getByTitle('Loading').parentElement).toHaveAttribute(
+      'data-size',
+      'md',
+    );
   });
 
   it('should render with title "loading', (): void => {

packages/react/src/components/Spinner/Spinner.tsx

@@ -3,17 +3,6 @@ import type * as React from 'react';
 
 import { useSynchronizedAnimation } from '../../utilities';
 
-const sizeMap: {
-  [key in NonNullable<SpinnerProps['size']>]: number;
-} = {
-  '2xs': 13,
-  xs: 20,
-  sm: 27,
-  md: 40,
-  lg: 56,
-  xl: 79,
-};
-
 export type SpinnerProps = {
   /** Spinner title  */
   title: string;
@@ -36,7 +25,6 @@ export const Spinner = ({
   color = 'neutral',
   size = 'md',
   className,
-  style,
   ...rest
 }: SpinnerProps): JSX.Element => {
   const svgRef = useSynchronizedAnimation<SVGSVGElement>(
@@ -49,10 +37,11 @@ export const Spinner = ({
 
   return (
     <svg
-      className={cl('ds-spinner', `ds-spinner--${color}`, className)}
-      style={{ width: sizeMap[size], height: sizeMap[size], ...style }}
+      className={cl('ds-spinner', className)}
       viewBox='0 0 50 50'
       ref={svgRef}
+      data-color={color}
+      data-size={size}
       {...rest}
     >
       <title>{title}</title>