Skip to content

Commit a758242

Browse files
RohitRaj011RohitRaj011
authored
Merge pull request #2704 from devtron-labs/feat/action-menu
feat: ActionMenu Storybook
2 parents b587538 + bb564a2 commit a758242

File tree

3 files changed

+122
-54
lines changed

3 files changed

+122
-54
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.13.0-pre-4",
7+
"@devtron-labs/devtron-fe-common-lib": "1.13.0-pre-5",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/stories/ActionMenu.stories.tsx

Lines changed: 117 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,30 @@
1717
import { action } from '@storybook/addon-actions'
1818
import type { Meta, StoryObj } from '@storybook/react'
1919

20-
import { ActionMenu, ActionMenuProps, Button, Icon } from '@devtron-labs/devtron-fe-common-lib'
20+
import { ActionMenu, ActionMenuProps, Icon } from '@devtron-labs/devtron-fe-common-lib'
21+
22+
const Component = (props: ActionMenuProps) => (
23+
<div className="flex w-100" style={{ height: '90vh' }}>
24+
<ActionMenu {...props} />
25+
</div>
26+
)
2127

2228
const meta = {
23-
component: ActionMenu,
29+
component: Component,
30+
argTypes: {
31+
position: {
32+
control: 'radio',
33+
options: ['bottom', 'top', 'left', 'right'],
34+
},
35+
alignment: {
36+
control: 'radio',
37+
options: ['start', 'middle', 'end'],
38+
},
39+
disableDescriptionEllipsis: {
40+
control: 'boolean',
41+
type: 'boolean',
42+
},
43+
},
2444
} satisfies Meta<ActionMenuProps>
2545

2646
export default meta
@@ -29,40 +49,52 @@ type Story = StoryObj<typeof meta>
2949

3050
const options: ActionMenuProps['options'] = [
3151
{
32-
label: 'Label 1',
33-
value: 'value-1',
34-
startIcon: <Icon name="ic-cube" color="N800" />,
52+
items: [
53+
{
54+
id: 'value-1',
55+
label: 'Label 1',
56+
startIcon: {
57+
name: 'ic-cube',
58+
},
59+
},
60+
],
3561
},
3662
{
37-
label: 'Group label 1',
38-
options: [
63+
groupLabel: 'Group 1',
64+
items: [
3965
{
66+
id: 'group-value-1',
4067
label: 'Group Label 1',
41-
value: 'group-value-1',
42-
startIcon: <Icon name="ic-cube" color="N800" />,
68+
startIcon: {
69+
name: 'ic-cube',
70+
},
4371
isDisabled: true,
4472
},
4573
{
74+
id: 'group-value-2',
4675
label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit',
47-
value: 'group-value-2',
4876
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
4977
tooltipProps: {
5078
content: 'There is an error',
5179
},
5280
type: 'negative',
5381
},
5482
{
83+
id: 'group-value-3',
5584
label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit',
56-
value: 'group-value-3',
5785
},
5886
{
87+
id: 'group-value-4',
5988
label: 'Group Label 4',
60-
value: 'group-value-4',
6189
},
6290
{
63-
startIcon: <Icon name="ic-cube" color="N800" />,
64-
endIcon: <Icon name="ic-cube" color="N800" />,
65-
value: 'group-value-5',
91+
id: 'group-value-5',
92+
startIcon: {
93+
name: 'ic-cube',
94+
},
95+
endIcon: {
96+
name: 'ic-cube',
97+
},
6698
tooltipProps: {
6799
content: 'Tooltip content for value 5',
68100
},
@@ -73,55 +105,91 @@ const options: ActionMenuProps['options'] = [
73105
],
74106
},
75107
{
76-
label: 'Label 2',
77-
value: 'value-2',
78-
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
79-
tooltipProps: {
80-
content: 'There is an error',
81-
},
82-
},
83-
{
84-
label: 'Label 3',
85-
value: 'value-3',
86-
},
87-
{
88-
label: 'Label 4',
89-
value: 'value-4',
90-
},
91-
{
92-
startIcon: <Icon name="ic-cube" color="N800" />,
93-
endIcon: <Icon name="ic-cube" color="N800" />,
94-
value: 'value-5',
95-
tooltipProps: {
96-
content: 'Tooltip content for value 5',
97-
},
98-
label: 'Label 5',
99-
description:
100-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga enim perspiciatis non praesentium itaque magni, animi doloremque ad beatae voluptas quasi repellat eveniet eaque culpa nemo dolorem, pariatur earum illo.',
108+
items: [
109+
{
110+
id: 'value-2',
111+
label: 'Label 2',
112+
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
113+
tooltipProps: {
114+
content: 'There is an error',
115+
},
116+
},
117+
{
118+
id: 'value-3',
119+
label: 'Label 3',
120+
},
121+
{
122+
id: 'value-4',
123+
label: 'Label 4',
124+
},
125+
{
126+
id: 'value-5',
127+
startIcon: {
128+
name: 'ic-cube',
129+
},
130+
endIcon: {
131+
name: 'ic-cube',
132+
},
133+
tooltipProps: {
134+
content: 'Tooltip content for value 5',
135+
},
136+
label: 'Label 5',
137+
description:
138+
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga enim perspiciatis non praesentium itaque magni, animi doloremque ad beatae voluptas quasi repellat eveniet eaque culpa nemo dolorem, pariatur earum illo.',
139+
},
140+
],
101141
},
102142
]
103143

104144
export const WithButtonElement: Story = {
105145
args: {
146+
id: 'action-menu-with-button',
106147
options,
148+
position: 'bottom',
149+
alignment: 'start',
107150
disableDescriptionEllipsis: false,
108-
children: <Button text="Open Action Menu" dataTestId="action-menu" />,
109151
onClick: action('option clicked'),
152+
isSearchable: true,
153+
buttonProps: {
154+
text: 'Open Action Menu',
155+
dataTestId: 'action-menu',
156+
},
110157
},
111158
}
112159

113160
export const WithIconButtonElement: Story = {
114161
args: {
162+
id: 'action-menu-with-icon-button',
163+
options,
164+
position: 'bottom',
165+
alignment: 'start',
166+
disableDescriptionEllipsis: false,
167+
onClick: action('option clicked'),
168+
buttonProps: {
169+
icon: <Icon name="ic-cube" color="N800" />,
170+
ariaLabel: 'action-menu',
171+
showAriaLabelInTippy: false,
172+
dataTestId: 'action-menu',
173+
},
174+
},
175+
}
176+
177+
export const WithFooterConfig: Story = {
178+
args: {
179+
id: 'action-menu-with-button',
115180
options,
181+
position: 'bottom',
182+
alignment: 'start',
116183
disableDescriptionEllipsis: false,
117-
children: (
118-
<Button
119-
icon={<Icon name="ic-cube" color="N800" />}
120-
ariaLabel="action-menu"
121-
showAriaLabelInTippy={false}
122-
dataTestId="action-menu"
123-
/>
124-
),
125184
onClick: action('option clicked'),
185+
isSearchable: true,
186+
buttonProps: {
187+
text: 'Open Action Menu',
188+
dataTestId: 'action-menu',
189+
},
190+
footerConfig: {
191+
type: 'text',
192+
value: 'This is footer',
193+
},
126194
},
127195
}

‎yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1126,10 +1126,10 @@
11261126
dependencies:
11271127
"@jridgewell/trace-mapping" "0.3.9"
11281128

1129-
"@devtron-labs/[email protected]4":
1130-
version "1.13.0-pre-4"
1131-
resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.13.0-pre-4.tgz#333a71f75905a38f4706b698b93089cc08680fa7"
1132-
integrity sha512-DVODh1yAI6KxiANtPW1t6AUyIiKA+PMniMfb/LB2XtBUlEGkAgKWzpbPWdIw0m1Wn+iFwzmUOL2KDQ9I4FYt9g==
1129+
"@devtron-labs/[email protected]5":
1130+
version "1.13.0-pre-5"
1131+
resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.13.0-pre-5.tgz#b120e8a883e25abc15ef45dc541e3d9af8440759"
1132+
integrity sha512-g2h1fxObo9KZyRsZekpB7rF67zsPLK2pVzBdvN9LMoTeCOnmGTcwIXucqQROfAgNkLN5dNqcpR9+hMs4kgTzPw==
11331133
dependencies:
11341134
"@codemirror/lang-json" "6.0.1"
11351135
"@codemirror/lang-yaml" "6.1.2"

0 commit comments

Comments
 (0)