Fix deprecated storybook args

packages/design-system/src/components/button.stories.tsx

@@ -116,25 +116,19 @@ export const Button = ({
 );
 
 Button.argTypes = {
-  children: { defaultValue: "Button", control: "text" },
-  color: {
-    defaultValue: "primary",
-    control: { type: "inline-radio", options: colors },
-  },
-  prefix: {
-    defaultValue: "undefined",
-    control: { type: "inline-radio", options: Object.keys(iconsMap) },
-  },
-  suffix: {
-    defaultValue: "undefined",
-    control: { type: "inline-radio", options: Object.keys(iconsMap) },
-  },
-  disabled: { defaultValue: false, control: "boolean" },
-  state: {
-    defaultValue: "auto",
-    control: {
-      type: "inline-radio",
-      options: states,
-    },
-  },
+  children: { control: "text" },
+  color: { control: "inline-radio", options: colors },
+  prefix: { control: "inline-radio", options: Object.keys(iconsMap) },
+  suffix: { control: "inline-radio", options: Object.keys(iconsMap) },
+  disabled: { control: "boolean" },
+  state: { control: "inline-radio", options: states },
+};
+
+Button.args = {
+  children: "Button",
+  color: "primary",
+  prefix: "undefined",
+  suffix: "undefined",
+  disabled: false,
+  state: "auto",
 };

packages/design-system/src/components/label.stories.tsx

@@ -100,10 +100,13 @@ const LabelStory: ComponentStory<typeof Label> = ({
 export { LabelStory as Label };
 
 LabelStory.argTypes = {
-  children: { defaultValue: "Label text", control: "text" },
-  color: {
-    defaultValue: "default",
-    control: { type: "inline-radio", options: colors },
-  },
-  disabled: { defaultValue: false, control: "boolean" },
+  children: { control: "text" },
+  color: { control: "inline-radio", options: colors },
+  disabled: { control: "boolean" },
+};
+
+LabelStory.args = {
+  children: "Label text",
+  color: "default",
+  disabled: false,
 };

packages/design-system/src/components/primitives/dnd/sortable-list.stories.tsx

@@ -216,7 +216,8 @@ export default {
   },
   argTypes: {
     direction: {
-      control: { type: "select", options: ["horizontal", "vertical", "wrap"] },
+      control: "select",
+      options: ["horizontal", "vertical", "wrap"],
     },
   },
 } as ComponentMeta<typeof SortableList>;

packages/design-system/src/components/small-icon-button.stories.tsx

@@ -32,7 +32,7 @@ export const Demo = ({
           <StoryGrid horizontal key={variant}>
             {states.map((state) => (
               <SmallIconButton
-                key={state}
+                key={state ?? "undefined"}
                 title={`${variant} ${state}`}
                 icon={<TrashIcon />}
                 state={state}
@@ -50,7 +50,7 @@ export const Demo = ({
           <StoryGrid horizontal key={variant}>
             {states.map((state) => (
               <SmallIconButton
-                key={state}
+                key={state ?? "undefined"}
                 title={`${variant} ${state}`}
                 icon={<TrashIcon />}
                 state={state}
@@ -66,25 +66,17 @@ export const Demo = ({
 );
 
 Demo.argTypes = {
-  icon: {
-    defaultValue: "<MenuIcon>",
-    control: { type: "inline-radio", options: Object.keys(iconsMap) },
-  },
-  variant: {
-    defaultValue: "normal",
-    control: { type: "inline-radio", options: smallIconButtonVariants },
-  },
-  state: {
-    defaultValue: undefined,
-    control: {
-      type: "inline-radio",
-      options: states,
-    },
-  },
-  focused: {
-    defaultValue: false,
-    control: { type: "boolean" },
-  },
+  icon: { control: "inline-radio", options: Object.keys(iconsMap) },
+  variant: { control: "inline-radio", options: smallIconButtonVariants },
+  state: { control: "inline-radio", options: states },
+  focused: { control: "boolean" },
+};
+
+Demo.args = {
+  icon: "<MenuIcon>",
+  variant: "normal",
+  state: undefined,
+  focused: false,
 };
 
 Demo.storyName = "Small Icon Button";

packages/design-system/src/components/small-toggle-button.stories.tsx

@@ -115,22 +115,17 @@ export const Demo = ({
 );
 
 Demo.argTypes = {
-  variant: {
-    defaultValue: "normal",
-    control: { type: "inline-radio", options: smallToggleButtonVariants },
-  },
-  pressed: {
-    defaultValue: false,
-    control: { type: "boolean" },
-  },
-  disabled: {
-    defaultValue: false,
-    control: { type: "boolean" },
-  },
-  focused: {
-    defaultValue: false,
-    control: { type: "boolean" },
-  },
+  variant: { control: "inline-radio", options: smallToggleButtonVariants },
+  pressed: { control: "boolean" },
+  disabled: { control: "boolean" },
+  focused: { control: "boolean" },
+};
+
+Demo.args = {
+  variant: "normal",
+  pressed: false,
+  disabled: false,
+  focused: false,
 };
 
 Demo.storyName = "Small Toggle Button";

packages/design-system/src/components/toggle-button.stories.tsx

@@ -53,14 +53,13 @@ export const Demo = ({
 );
 
 Demo.argTypes = {
-  variant: {
-    defaultValue: "default",
-    control: { type: "inline-radio", options: toggleButtonVariants },
-  },
-  disabled: {
-    defaultValue: false,
-    control: { type: "boolean" },
-  },
+  variant: { control: "inline-radio", options: toggleButtonVariants },
+  disabled: { control: "boolean" },
+};
+
+Demo.args = {
+  variant: "default",
+  disabled: false,
 };
 
 Demo.storyName = "Toggle Button";

packages/design-system/src/components/toggle-group.stories.tsx

@@ -130,15 +130,9 @@ export const Demo = ({
 );
 
 Demo.argTypes = {
-  type: {
-    control: { type: "inline-radio", options: ["single", "multiple"] },
-  },
-  color: {
-    control: { type: "inline-radio", options: toggleGroupColors },
-  },
-  disabled: {
-    control: { type: "boolean" },
-  },
+  type: { control: "inline-radio", options: ["single", "multiple"] },
+  color: { control: "inline-radio", options: toggleGroupColors },
+  disabled: { control: "boolean" },
 };
 
 Demo.storyName = "Toggle Group";

packages/icons/src/index.stories.tsx

@@ -58,9 +58,9 @@ export default {
   title: "All Icons",
   component: Icons,
   argTypes: {
-    testColor: {
-      name: "Test color",
-      defaultValue: false,
-    },
+    testColor: { control: "boolean", name: "Test color" },
+  },
+  args: {
+    testColor: false,
   },
 };