Skip to content

Commit c98090e

Browse files
RohitRaj011RohitRaj011
committed
feat: ActionMenuStories - refactor story to include trailing item
1 parent 7497b37 commit c98090e

File tree

2 files changed

+156
-105
lines changed

2 files changed

+156
-105
lines changed

‎src/stories/ActionMenu.stories.tsx

Lines changed: 155 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,167 @@
1414
* limitations under the License.
1515
*/
1616

17+
import { useState } from 'react'
1718
import { action } from '@storybook/addon-actions'
1819
import type { Meta, StoryObj } from '@storybook/react'
1920

2021
import { ActionMenu, ActionMenuProps, Icon } from '@devtron-labs/devtron-fe-common-lib'
2122

22-
const Component = (props: ActionMenuProps) => (
23-
<div className="flex w-100" style={{ height: '90vh' }}>
24-
<ActionMenu {...props} />
25-
</div>
26-
)
23+
type ActionMenuItems =
24+
| 'value-1'
25+
| 'value-2'
26+
| 'value-3'
27+
| 'value-4'
28+
| 'value-5'
29+
| 'group-value-1'
30+
| 'group-value-2'
31+
| 'group-value-3'
32+
| 'group-value-4'
33+
| 'group-value-5'
34+
35+
type BaseComponentPropsType = Omit<ActionMenuProps<ActionMenuItems>, 'options'>
36+
37+
const BaseComponent = (props: BaseComponentPropsType) => {
38+
const [isChecked, setIsChecked] = useState(false)
39+
40+
const handleChange = () => setIsChecked(!isChecked)
41+
42+
const options: ActionMenuProps<ActionMenuItems>['options'] = [
43+
{
44+
items: [
45+
{
46+
id: 'value-1',
47+
label: 'Label 1',
48+
startIcon: {
49+
name: 'ic-cube',
50+
},
51+
},
52+
],
53+
},
54+
{
55+
groupLabel: 'Group 1',
56+
items: [
57+
{
58+
id: 'group-value-1',
59+
label: 'Group Label 1',
60+
startIcon: {
61+
name: 'ic-cube',
62+
},
63+
isDisabled: true,
64+
},
65+
{
66+
id: 'group-value-2',
67+
label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit',
68+
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
69+
tooltipProps: {
70+
content: 'There is an error',
71+
},
72+
type: 'negative',
73+
},
74+
{
75+
id: 'group-value-3',
76+
label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit',
77+
},
78+
{
79+
id: 'group-value-4',
80+
label: 'Group Label 4',
81+
},
82+
{
83+
id: 'group-value-5',
84+
startIcon: {
85+
name: 'ic-cube',
86+
},
87+
trailingItem: {
88+
type: 'icon',
89+
config: {
90+
name: 'ic-cube',
91+
},
92+
},
93+
tooltipProps: {
94+
content: 'Tooltip content for value 5',
95+
},
96+
label: "Trailing Item: 'icon'",
97+
description:
98+
'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.',
99+
},
100+
],
101+
},
102+
{
103+
items: [
104+
{
105+
id: 'value-2',
106+
label: "Trailing Item: 'text'",
107+
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
108+
tooltipProps: {
109+
content: 'There is an error',
110+
},
111+
trailingItem: {
112+
type: 'text',
113+
config: {
114+
value: 'Label',
115+
icon: {
116+
name: 'ic-cube',
117+
},
118+
},
119+
},
120+
},
121+
{
122+
id: 'value-3',
123+
label: "Trailing Item: 'text'",
124+
trailingItem: {
125+
type: 'text',
126+
config: {
127+
value: 'Label',
128+
},
129+
},
130+
},
131+
{
132+
id: 'value-4',
133+
label: "Trailing Item: 'switch'",
134+
trailingItem: {
135+
type: 'switch',
136+
config: {
137+
name: 'action-menu-switch',
138+
ariaLabel: 'action-menu-switch',
139+
dataTestId: 'action-menu-switch',
140+
isChecked,
141+
onChange: handleChange,
142+
},
143+
},
144+
},
145+
{
146+
id: 'value-5',
147+
startIcon: {
148+
name: 'ic-cube',
149+
},
150+
trailingItem: {
151+
type: 'counter',
152+
config: {
153+
value: 1,
154+
},
155+
},
156+
tooltipProps: {
157+
content: 'Tooltip content for value 5',
158+
},
159+
label: "Trailing Item: 'counter'",
160+
description:
161+
'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.',
162+
},
163+
],
164+
},
165+
]
166+
167+
const baseProps = { ...props, options } as ActionMenuProps
168+
169+
return (
170+
<div className="flex w-100" style={{ height: '90vh' }}>
171+
<ActionMenu {...baseProps} />
172+
</div>
173+
)
174+
}
27175

28176
const meta = {
29-
component: Component,
177+
component: BaseComponent,
30178
argTypes: {
31179
position: {
32180
control: 'radio',
@@ -41,110 +189,15 @@ const meta = {
41189
type: 'boolean',
42190
},
43191
},
44-
} satisfies Meta<ActionMenuProps>
192+
} satisfies Meta<BaseComponentPropsType>
45193

46194
export default meta
47195

48196
type Story = StoryObj<typeof meta>
49197

50-
const options: ActionMenuProps['options'] = [
51-
{
52-
items: [
53-
{
54-
id: 'value-1',
55-
label: 'Label 1',
56-
startIcon: {
57-
name: 'ic-cube',
58-
},
59-
},
60-
],
61-
},
62-
{
63-
groupLabel: 'Group 1',
64-
items: [
65-
{
66-
id: 'group-value-1',
67-
label: 'Group Label 1',
68-
startIcon: {
69-
name: 'ic-cube',
70-
},
71-
isDisabled: true,
72-
},
73-
{
74-
id: 'group-value-2',
75-
label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit',
76-
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
77-
tooltipProps: {
78-
content: 'There is an error',
79-
},
80-
type: 'negative',
81-
},
82-
{
83-
id: 'group-value-3',
84-
label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit',
85-
},
86-
{
87-
id: 'group-value-4',
88-
label: 'Group Label 4',
89-
},
90-
{
91-
id: 'group-value-5',
92-
startIcon: {
93-
name: 'ic-cube',
94-
},
95-
endIcon: {
96-
name: 'ic-cube',
97-
},
98-
tooltipProps: {
99-
content: 'Tooltip content for value 5',
100-
},
101-
label: 'Group Label 5',
102-
description:
103-
'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.',
104-
},
105-
],
106-
},
107-
{
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-
],
141-
},
142-
]
143-
144198
export const WithButtonElement: Story = {
145199
args: {
146200
id: 'action-menu-with-button',
147-
options,
148201
position: 'bottom',
149202
alignment: 'start',
150203
disableDescriptionEllipsis: false,
@@ -160,7 +213,6 @@ export const WithButtonElement: Story = {
160213
export const WithIconButtonElement: Story = {
161214
args: {
162215
id: 'action-menu-with-icon-button',
163-
options,
164216
position: 'bottom',
165217
alignment: 'start',
166218
disableDescriptionEllipsis: false,
@@ -177,7 +229,6 @@ export const WithIconButtonElement: Story = {
177229
export const WithFooterConfig: Story = {
178230
args: {
179231
id: 'action-menu-with-button',
180-
options,
181232
position: 'bottom',
182233
alignment: 'start',
183234
disableDescriptionEllipsis: false,

‎src/stories/Switch.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ type BaseComponentPropsType = Omit<DTSwitchProps, 'onChange' | 'isChecked'>
2929
const BaseComponent = (props: BaseComponentPropsType) => {
3030
const [isChecked, setIsChecked] = useState<boolean>(false)
3131

32-
const handleChange = () => {
32+
const handleChange: DTSwitchProps['onChange'] = () => {
3333
setIsChecked((prev) => !prev)
3434
}
3535

0 commit comments

Comments
 (0)