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

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

@@ -36,8 +36,7 @@ const meta: Meta<typeof Button> = {
       control: 'select',
       options: Object.keys(buttonConfig.variants.size),
       type: 'string',
-      description:
-        'The size of the button. Defaults to `Large`. This variant does not apply to the `Icon` variant.',
+      description: 'The size of the button. Defaults to `Large`.',
     },
     wrapping: {
       control: 'radio',
@@ -351,25 +350,3 @@ export const TextWithIconInverted: Story = {
     color: 'Inverted',
   },
 }
-
-export const Icon: Story = {
-  args: {
-    onPress: fn(),
-    children: <MaterialIcon icon="favorite" size={24} />,
-    variant: 'Icon',
-  },
-}
-
-export const IconWithColor: Story = {
-  args: {
-    onPress: fn(),
-    children: (
-      <MaterialIcon
-        icon="check_circle"
-        size={24}
-        color="Icon/Feedback/Success"
-      />
-    ),
-    variant: 'Icon',
-  },
-}

packages/design-system/lib/components/Button/Button.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { Button as ButtonRAC } from 'react-aria-components'
 
 import { variants } from './variants'

packages/design-system/lib/components/Button/button.module.css

@@ -6,6 +6,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: var(--Space-x05);
 
   &:disabled {
     cursor: unset;
@@ -166,11 +167,3 @@
 .variant-text.color-inverted:disabled {
   color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
 }
-
-.variant-icon {
-  background-color: transparent;
-  border-color: transparent;
-  color: inherit;
-  padding: 0;
-  margin: 0;
-}

packages/design-system/lib/components/Button/variants.ts

@@ -16,7 +16,6 @@ export const config = {
       Tertiary: styles['variant-tertiary'],
       Inverted: styles['variant-inverted'],
       Text: styles['variant-text'],
-      Icon: styles['variant-icon'],
     },
     color: {
       Primary: styles['color-primary'],