Merged in fix/BOOK-293-button-variants (pull request #3371)

fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): inherit color for icon


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg

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

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { expect, fn } from 'storybook/test'
 
-import { MaterialIcon, MaterialIconProps } from '../Icons/MaterialIcon'
 import { IconButton } from './IconButton'
+import { iconButtonIconNames, IconButtonProps } from './types'
 import { config } from './variants'
 
 const meta: Meta<typeof IconButton> = {
@@ -12,13 +12,10 @@ const meta: Meta<typeof IconButton> = {
   argTypes: {
     onPress: {
       table: {
-        disable: true,
-      },
-    },
-    children: {
-      table: {
-        disable: true,
+        type: { summary: 'function' },
+        defaultValue: { summary: 'undefined' },
       },
+      description: 'Callback function to handle button press events.',
     },
     variant: {
       control: 'select',
@@ -58,43 +55,25 @@ const meta: Meta<typeof IconButton> = {
         },
       },
     },
+    iconName: {
+      control: 'select',
+      options: iconButtonIconNames,
+      table: {
+        type: { summary: iconButtonIconNames.join(' | ') },
+        defaultValue: { summary: 'undefined' },
+      },
+      description: 'Name of the Material Icon to use as icon.',
+    },
+    isDisabled: {
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
 }
 
-const buttonAndIconSizesMap = Object.keys(config.variants.size).map<{
-  size: keyof typeof config.variants.size
-  iconSize: number
-}>((key) => {
-  const typedKey = key as keyof typeof config.variants.size
-  switch (typedKey) {
-    case 'sm':
-      return {
-        size: typedKey,
-        iconSize: 16,
-      }
-    case 'md':
-      return {
-        size: typedKey,
-        iconSize: 20,
-      }
-    case 'lg':
-      return {
-        size: typedKey,
-        iconSize: 24,
-      }
-    case 'xl':
-      return {
-        size: typedKey,
-        iconSize: 28,
-      }
-    default:
-      return {
-        size: typedKey,
-        iconSize: 24,
-      }
-  }
-})
-
 const globalStoryPropsInverted = {
   backgrounds: { value: 'scandicPrimaryDark' },
 }
@@ -104,11 +83,11 @@ type Story = StoryObj<typeof IconButton>
 
 function renderAllSizesFn(
   args: Story['args'],
-  iconName: MaterialIconProps['icon'] = 'search'
+  iconName: IconButtonProps['iconName'] = 'search'
 ) {
   return (
     <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-      {buttonAndIconSizesMap.map(({ size, iconSize }) => (
+      {Object.keys(config.variants.size).map((size) => (
         <div
           style={{
             display: 'flex',
@@ -118,13 +97,12 @@ function renderAllSizesFn(
           }}
           key={size}
         >
-          <IconButton {...args} size={size} key={size}>
-            <MaterialIcon
-              icon={iconName}
-              size={iconSize}
-              color="CurrentColor"
-            />
-          </IconButton>
+          <IconButton
+            {...args}
+            iconName={iconName}
+            size={size as keyof typeof config.variants.size}
+            key={size}
+          />
           <span>{size}</span>
         </div>
       ))}
@@ -135,7 +113,7 @@ function renderAllSizesFn(
 export const Default: Story = {
   args: {
     onPress: fn(),
-    children: <MaterialIcon icon="search" size={24} color="CurrentColor" />,
+    iconName: 'search',
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(canvas.getByRole('button'))
@@ -283,6 +261,7 @@ export const Examples: Story = {
     )
   },
 }
+
 export const Filled: Story = {
   args: {
     ...Default.args,
@@ -319,9 +298,7 @@ export const FilledOnDarkBackground: Story = {
 export const FilledWithEmphasis: Story = {
   args: {
     ...Filled.args,
-    children: (
-      <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
-    ),
+    iconName: 'arrow_forward',
     emphasis: true,
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -344,9 +321,7 @@ export const FilledWithEmphasisDisabled: Story = {
 export const Outlined: Story = {
   args: {
     ...Default.args,
-    children: (
-      <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
-    ),
+    iconName: 'arrow_forward',
     variant: 'Outlined',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -369,9 +344,7 @@ export const OutlinedDisabled: Story = {
 export const Elevated: Story = {
   args: {
     ...Default.args,
-    children: (
-      <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
-    ),
+    iconName: 'arrow_forward',
     variant: 'Elevated',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -395,9 +368,7 @@ export const Faded: Story = {
   globals: globalStoryPropsInverted,
   args: {
     ...Default.args,
-    children: (
-      <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
-    ),
+    iconName: 'arrow_forward',
     variant: 'Faded',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -422,9 +393,7 @@ export const Muted: Story = {
   globals: globalStoryPropsInverted,
   args: {
     ...Default.args,
-    children: (
-      <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
-    ),
+    iconName: 'arrow_forward',
     variant: 'Muted',
   },
   play: async ({ canvas, userEvent, args }) => {