feat: ActionMenuStories - update story wrt component updates

Author: RohitRaj011

src/stories/ActionMenu.stories.tsx

@@ -17,7 +17,7 @@
 import { action } from '@storybook/addon-actions'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ActionMenu, ActionMenuProps, Button, Icon } from '@devtron-labs/devtron-fe-common-lib'
+import { ActionMenu, ActionMenuProps, Icon } from '@devtron-labs/devtron-fe-common-lib'
 
 const Component = (props: ActionMenuProps) => (
     <div className="flex w-100" style={{ height: '90vh' }}>
@@ -51,8 +51,8 @@ const options: ActionMenuProps['options'] = [
     {
         items: [
             {
+                id: 'value-1',
                 label: 'Label 1',
-                value: 'value-1',
                 startIcon: {
                     name: 'ic-cube',
                     color: 'N800',
@@ -64,32 +64,33 @@ const options: ActionMenuProps['options'] = [
         groupLabel: 'Group 1',
         items: [
             {
+                id: 'group-value-1',
                 label: 'Group Label 1',
-                value: 'group-value-1',
                 startIcon: {
                     name: 'ic-cube',
                     color: 'N800',
                 },
                 isDisabled: true,
             },
             {
+                id: 'group-value-2',
                 label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit',
-                value: 'group-value-2',
                 description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
                 tooltipProps: {
                     content: 'There is an error',
                 },
                 type: 'negative',
             },
             {
+                id: 'group-value-3',
                 label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit',
-                value: 'group-value-3',
             },
             {
+                id: 'group-value-4',
                 label: 'Group Label 4',
-                value: 'group-value-4',
             },
             {
+                id: 'group-value-5',
                 startIcon: {
                     name: 'ic-cube',
                     color: 'N800',
@@ -98,7 +99,6 @@ const options: ActionMenuProps['options'] = [
                     name: 'ic-cube',
                     color: 'N800',
                 },
-                value: 'group-value-5',
                 tooltipProps: {
                     content: 'Tooltip content for value 5',
                 },
@@ -111,22 +111,23 @@ const options: ActionMenuProps['options'] = [
     {
         items: [
             {
+                id: 'value-2',
                 label: 'Label 2',
-                value: 'value-2',
                 description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
                 tooltipProps: {
                     content: 'There is an error',
                 },
             },
             {
+                id: 'value-3',
                 label: 'Label 3',
-                value: 'value-3',
             },
             {
+                id: 'value-4',
                 label: 'Label 4',
-                value: 'value-4',
             },
             {
+                id: 'value-5',
                 startIcon: {
                     name: 'ic-cube',
                     color: 'N800',
@@ -135,7 +136,6 @@ const options: ActionMenuProps['options'] = [
                     name: 'ic-cube',
                     color: 'N800',
                 },
-                value: 'value-5',
                 tooltipProps: {
                     content: 'Tooltip content for value 5',
                 },
@@ -149,30 +149,33 @@ const options: ActionMenuProps['options'] = [
 
 export const WithButtonElement: Story = {
     args: {
+        id: 'action-menu-with-button',
         options,
         position: 'bottom',
         alignment: 'start',
         disableDescriptionEllipsis: false,
-        children: <Button text="Open Action Menu" dataTestId="action-menu" />,
         onClick: action('option clicked'),
         isSearchable: true,
+        buttonProps: {
+            text: 'Open Action Menu',
+            dataTestId: 'action-menu',
+        },
     },
 }
 
 export const WithIconButtonElement: Story = {
     args: {
+        id: 'action-menu-with-icon-button',
         options,
         position: 'bottom',
         alignment: 'start',
         disableDescriptionEllipsis: false,
-        children: (
-            <Button
-                icon={<Icon name="ic-cube" color="N800" />}
-                ariaLabel="action-menu"
-                showAriaLabelInTippy={false}
-                dataTestId="action-menu"
-            />
-        ),
         onClick: action('option clicked'),
+        buttonProps: {
+            icon: <Icon name="ic-cube" color="N800" />,
+            ariaLabel: 'action-menu',
+            showAriaLabelInTippy: false,
+            dataTestId: 'action-menu',
+        },
     },
 }