feat(BOOK-113): Synced hover/focus states for buttons and added better examples to storybook

* fix(BOOK-113): Updated hover colors after blend/mix has been removed

Approved-by: Christel Westerberg

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
-import { expect, fn } from 'storybook/test'
+import { expect } from 'storybook/test'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { IconButton } from './IconButton'
@@ -15,35 +15,53 @@ const meta: Meta<typeof IconButton> = {
         disable: true,
       },
     },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
     theme: {
       control: 'select',
       options: Object.keys(config.variants.theme),
-      default: 'Primary',
+      table: {
+        defaultValue: {
+          summary: config.defaultVariants.theme,
+        },
+        type: {
+          summary: 'string',
+          detail: Object.keys(config.variants.theme).join(' | '),
+        },
+      },
     },
     style: {
       control: 'select',
       options: Object.keys(config.variants.style),
-      default: 'Normal',
-      type: 'string',
-      description: `The style variant is only applied on certain variants. The examples below shows the possible combinations of variants and style variants.`,
-    },
-    wrapping: {
-      control: 'select',
-      options: Object.keys(config.variants.wrapping),
-      default: undefined,
+      table: {
+        defaultValue: {
+          summary: config.defaultVariants.style,
+        },
+        type: {
+          summary: 'string',
+          detail: Object.keys(config.variants.style).join(' | '),
+        },
+      },
+      description:
+        'The style variant is only applied on certain variants. The examples below shows the possible combinations of variants and style variants.',
     },
   },
 }
 
+const globalStoryPropsInverted = {
+  backgrounds: { value: 'scandicPrimaryDark' },
+}
 export default meta
 
 type Story = StoryObj<typeof IconButton>
 
-export const PrimaryDefault: Story = {
+export const Default: Story = {
   args: {
-    onPress: fn(),
+    onPress: () => alert('Icon button pressed!'),
     children: <MaterialIcon icon="search" size={24} color="CurrentColor" />,
-    theme: 'Primary',
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(canvas.getByRole('button'))
@@ -51,9 +69,20 @@ export const PrimaryDefault: Story = {
   },
 }
 
+export const Primary: Story = {
+  args: {
+    ...Default.args,
+    theme: 'Primary',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
+}
+
 export const PrimaryDisabled: Story = {
   args: {
-    ...PrimaryDefault.args,
+    ...Primary.args,
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -62,9 +91,9 @@ export const PrimaryDisabled: Story = {
   },
 }
 
-export const InvertedDefault: Story = {
+export const Inverted: Story = {
   args: {
-    onPress: fn(),
+    ...Default.args,
     children: (
       <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
     ),
@@ -78,7 +107,7 @@ export const InvertedDefault: Story = {
 
 export const InvertedDisabled: Story = {
   args: {
-    ...InvertedDefault.args,
+    ...Inverted.args,
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -89,7 +118,7 @@ export const InvertedDisabled: Story = {
 
 export const InvertedElevated: Story = {
   args: {
-    ...InvertedDefault.args,
+    ...Inverted.args,
     style: 'Elevated',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -110,8 +139,9 @@ export const InvertedElevatedDisabled: Story = {
 }
 
 export const InvertedMuted: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    ...InvertedDefault.args,
+    ...Inverted.args,
     children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
     style: 'Muted',
   },
@@ -123,6 +153,7 @@ export const InvertedMuted: Story = {
 }
 
 export const InvertedMutedDisabled: Story = {
+  globals: globalStoryPropsInverted,
   args: {
     ...InvertedMuted.args,
     isDisabled: true,
@@ -136,7 +167,7 @@ export const InvertedMutedDisabled: Story = {
 
 export const InvertedFaded: Story = {
   args: {
-    ...InvertedDefault.args,
+    ...Inverted.args,
     style: 'Faded',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -158,7 +189,7 @@ export const InvertedFadedDisabled: Story = {
 
 export const TertiaryElevated: Story = {
   args: {
-    onPress: fn(),
+    ...Default.args,
     children: <MaterialIcon icon="arrow_back" size={24} color="CurrentColor" />,
     theme: 'Tertiary',
     style: 'Elevated',
@@ -182,7 +213,7 @@ export const TertiaryDisabled: Story = {
 
 export const BlackMuted: Story = {
   args: {
-    onPress: fn(),
+    ...Default.args,
     children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
     theme: 'Black',
   },