Fix/SW-1563 accessibility

* fix(SW-1563): Added new IconButton component to the design system and removed Icon variant inside the Button component * fix(SW-1563): Added buttons around clickable images and changed to design system components * fix(SW-1563): Renamed variants to match Figma * fix(SW-1563): Renamed AriaButton to ButtonRAC Approved-by: Michael Zetterberg Approved-by: Matilda Landström
2025-05-02 06:27:30 +00:00
parent efcbde1647
commit 8b32abbefc
32 changed files with 909 additions and 547 deletions
--- a/packages/design-system/lib/components/IconButton/variants.ts
+++ b/packages/design-system/lib/components/IconButton/variants.ts
@@ -0,0 +1,78 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './iconButton.module.css'
+
+const variantKeys = {
+  theme: {
+    Primary: 'Primary',
+    Tertiary: 'Tertiary',
+    Inverted: 'Inverted',
+    Black: 'Black',
+  },
+  style: {
+    Normal: 'Normal',
+    Muted: 'Muted',
+    Elevated: 'Elevated',
+    Faded: 'Faded',
+  },
+} as const
+
+export const config = {
+  variants: {
+    theme: {
+      [variantKeys.theme.Primary]: styles['theme-primary'],
+      [variantKeys.theme.Tertiary]: styles['theme-tertiary'],
+      [variantKeys.theme.Inverted]: styles['theme-inverted'],
+      [variantKeys.theme.Black]: styles['theme-black'],
+    },
+    // Some variants cannot be used in combination with certain style variants.
+    // The style variant will be applied using the compoundVariants.
+    style: {
+      [variantKeys.style.Normal]: '',
+      [variantKeys.style.Muted]: '',
+      [variantKeys.style.Elevated]: '',
+      [variantKeys.style.Faded]: '',
+    },
+  },
+  compoundVariants: [
+    // Primary should only use Normal
+    { theme: variantKeys.theme.Primary, className: styles['style-normal'] },
+
+    // Tertiary should only use Elevated
+    {
+      theme: variantKeys.theme.Tertiary,
+      className: styles['style-elevated'],
+    },
+
+    // Black should only use Muted
+    { theme: variantKeys.theme.Black, className: styles['style-muted'] },
+
+    // Inverted can use any style variant
+    {
+      theme: variantKeys.theme.Inverted,
+      style: variantKeys.style.Normal,
+      className: styles['style-normal'],
+    },
+    {
+      theme: variantKeys.theme.Inverted,
+      style: variantKeys.style.Muted,
+      className: styles['style-muted'],
+    },
+    {
+      theme: variantKeys.theme.Inverted,
+      style: variantKeys.style.Elevated,
+      className: styles['style-elevated'],
+    },
+    {
+      theme: variantKeys.theme.Inverted,
+      style: variantKeys.style.Faded,
+      className: styles['style-faded'],
+    },
+  ],
+  defaultVariants: {
+    theme: variantKeys.theme.Primary,
+    style: variantKeys.style.Normal,
+  },
+}
+
+export const variants = cva(styles.iconButton, config)