Skip to content

Commit f20f8f8

Browse files
mattnoltingmattnolting
committed
feat(CC-menu): added menu
1 parent 87ddd2d commit f20f8f8

File tree

6 files changed

+615
-0
lines changed

6 files changed

+615
-0
lines changed

‎packages/code-connect/components/Menu/Menu.figma.tsx

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
import figma from '@figma/code-connect';
2+
import {
3+
Divider,
4+
DrilldownMenu,
5+
Menu,
6+
MenuContent,
7+
MenuGroup,
8+
MenuItem,
9+
MenuItemAction,
10+
MenuList
11+
} from '@patternfly/react-core';
12+
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
13+
14+
// Documentation for Menu can be found at https://www.patternfly.org/components/menu
15+
16+
const drilldownMenuModel = {
17+
id: 'drilldown-drilldownMenuStart',
18+
children: (
19+
<DrilldownMenu id="drilldown-drilldownMenuStart">
20+
<MenuItem itemId="group:start_rollout_breadcrumb" direction="up">
21+
Start rollout
22+
</MenuItem>
23+
<Divider component="li" />
24+
<MenuItem
25+
itemId="group:app_grouping"
26+
description="Groups A-C"
27+
direction="down"
28+
drilldownMenu={
29+
<DrilldownMenu id="drilldown-drilldownMenuStartGrouping">
30+
<MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
31+
Application grouping
32+
</MenuItem>
33+
<Divider component="li" />
34+
<MenuItem itemId="group_a">Group A</MenuItem>
35+
<MenuItem itemId="group_b">Group B</MenuItem>
36+
<MenuItem itemId="group_c">Group C</MenuItem>
37+
</DrilldownMenu>
38+
}
39+
>
40+
Application grouping
41+
</MenuItem>
42+
<MenuItem itemId="count">Count</MenuItem>
43+
<MenuItem
44+
itemId="group:labels"
45+
direction="down"
46+
drilldownMenu={
47+
<DrilldownMenu id="drilldown-drilldownMenuStartLabels">
48+
<MenuItem itemId="group:labels_breadcrumb" direction="up">
49+
Labels
50+
</MenuItem>
51+
<Divider component="li" />
52+
<MenuItem itemId="label_1">Label 1</MenuItem>
53+
<MenuItem itemId="label_2">Label 2</MenuItem>
54+
<MenuItem itemId="label_3">Label 3</MenuItem>
55+
</DrilldownMenu>
56+
}
57+
>
58+
Labels
59+
</MenuItem>
60+
<MenuItem itemId="annotations">Annotations</MenuItem>
61+
</DrilldownMenu>
62+
)
63+
};
64+
65+
figma.connect(
66+
Menu,
67+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585',
68+
{
69+
variant: { Menu: 'Titled Groups' },
70+
props: {
71+
children: figma.children('*')
72+
},
73+
example: (props) => (
74+
<Menu>
75+
<MenuContent>
76+
<MenuGroup label="Menu group label" labelHeadingLevel="h3">
77+
<MenuList>{props.children}</MenuList>
78+
</MenuGroup>
79+
<Divider />
80+
<MenuGroup label="Menu group label" labelHeadingLevel="h3">
81+
<MenuList>{props.children}</MenuList>
82+
</MenuGroup>
83+
</MenuContent>
84+
</Menu>
85+
)
86+
}
87+
);
88+
89+
figma.connect(
90+
Menu,
91+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585',
92+
{
93+
props: {
94+
...drilldownMenuModel,
95+
96+
// boolean
97+
showSearchInput: figma.boolean('Show search input', {
98+
true: true,
99+
false: undefined
100+
}),
101+
102+
// enum
103+
isPlain: figma.enum('Menu', { 'Plain Menu': true }),
104+
105+
actions: figma.enum('Menu', {
106+
'With Actions': (
107+
<MenuItemAction icon={<CodeBranchIcon />} actionId="code" onClick={() => {}} aria-label="Code" />
108+
)
109+
}),
110+
111+
onSelect: figma.enum('Menu', { 'Option Select': () => {} }),
112+
113+
// enum
114+
drilldown: figma.enum('Menu', {
115+
Basic: {
116+
containsDrilldown: false,
117+
drilldownItemPath: undefined,
118+
drilledInMenus: undefined,
119+
activeMenu: undefined,
120+
onDrillIn: undefined,
121+
onDrillOut: undefined,
122+
drilldownMenu: undefined,
123+
onGetMenuHeight: undefined
124+
},
125+
'Plain Menu': {
126+
containsDrilldown: false,
127+
drilldownItemPath: undefined,
128+
drilledInMenus: undefined,
129+
activeMenu: undefined,
130+
onDrillIn: undefined,
131+
onDrillOut: undefined,
132+
drilldownMenu: undefined,
133+
onGetMenuHeight: undefined
134+
},
135+
'With Actions': {
136+
containsDrilldown: false,
137+
drilldownItemPath: undefined,
138+
drilledInMenus: undefined,
139+
activeMenu: undefined,
140+
onDrillIn: undefined,
141+
onDrillOut: undefined,
142+
drilldownMenu: undefined,
143+
onGetMenuHeight: undefined
144+
},
145+
'With Separator': {
146+
containsDrilldown: false,
147+
drilldownItemPath: undefined,
148+
drilledInMenus: undefined,
149+
activeMenu: undefined,
150+
onDrillIn: undefined,
151+
onDrillOut: undefined,
152+
onGetMenuHeight: undefined
153+
},
154+
'With Links': {
155+
containsDrilldown: false,
156+
drilldownItemPath: undefined,
157+
drilledInMenus: undefined,
158+
activeMenu: undefined,
159+
onDrillIn: undefined,
160+
onDrillOut: undefined,
161+
drilldownMenu: undefined,
162+
onGetMenuHeight: undefined,
163+
onSelect: undefined
164+
},
165+
'Option Select': {
166+
containsDrilldown: false,
167+
drilldownItemPath: undefined,
168+
drilledInMenus: undefined,
169+
activeMenu: undefined,
170+
onDrillIn: undefined,
171+
onDrillOut: undefined,
172+
drilldownMenu: undefined,
173+
onGetMenuHeight: undefined,
174+
onSelect: undefined
175+
},
176+
'Item Checkbox': {
177+
containsDrilldown: false,
178+
drilldownItemPath: undefined,
179+
drilledInMenus: undefined,
180+
activeMenu: undefined,
181+
onDrillIn: undefined,
182+
onDrillOut: undefined,
183+
drilldownMenu: undefined,
184+
onGetMenuHeight: undefined,
185+
onSelect: undefined
186+
},
187+
'With favorites': {
188+
containsDrilldown: false,
189+
drilldownItemPath: undefined,
190+
drilledInMenus: undefined,
191+
activeMenu: undefined,
192+
onDrillIn: undefined,
193+
onDrillOut: undefined,
194+
drilldownMenu: undefined,
195+
onGetMenuHeight: undefined,
196+
onSelect: undefined
197+
},
198+
Danger: {
199+
containsDrilldown: false,
200+
drilldownItemPath: undefined,
201+
drilledInMenus: undefined,
202+
activeMenu: undefined,
203+
onDrillIn: undefined,
204+
onDrillOut: undefined,
205+
drilldownMenu: undefined,
206+
onGetMenuHeight: undefined,
207+
onSelect: undefined
208+
},
209+
'Drill Down Breadcrumbs': {
210+
containsDrilldown: true,
211+
drilldownItemPath: 'drilldownPath',
212+
drilledInMenus: 'menuDrilledIn',
213+
activeMenu: 'activeMenu',
214+
onDrillIn: () => {},
215+
onDrillOut: () => {},
216+
drilldownMenu: drilldownMenuModel,
217+
onGetMenuHeight: () => {},
218+
onSelect: () => {}
219+
},
220+
'Drill Down Start': {
221+
containsDrilldown: true,
222+
drilldownItemPath: 'drilldownPath',
223+
drilledInMenus: 'menuDrilledIn',
224+
activeMenu: 'activeMenu',
225+
onDrillIn: () => {},
226+
onDrillOut: () => {},
227+
drilldownMenu: drilldownMenuModel,
228+
onGetMenuHeight: () => {},
229+
onSelect: () => {}
230+
},
231+
'Drill Down Return': {
232+
containsDrilldown: true,
233+
drilldownItemPath: 'drilldownPath',
234+
drilledInMenus: 'menuDrilledIn',
235+
activeMenu: 'activeMenu',
236+
onDrillIn: () => {},
237+
onDrillOut: () => {},
238+
drilldownMenu: drilldownMenuModel,
239+
onGetMenuHeight: () => {},
240+
onSelect: () => {}
241+
}
242+
}),
243+
244+
// menu: figma.enum('Menu', {
245+
// // Basic: 'basic',
246+
// // 'Plain Menu': 'plain-menu',
247+
// 'With Actions': 'with-actions',
248+
// 'With Separator': 'with-separator',
249+
// 'With Links': 'with-links',
250+
// 'With Icons': 'with-icons',
251+
// 'Titled Groups': 'titled-groups',
252+
// 'Drill Down Start': 'drill-down-start',
253+
// 'Drill Down Return': 'drill-down-return',
254+
// 'Option Select': 'option-select',
255+
// 'Item Checkbox': 'item-checkbox',
256+
// 'With favorites': 'with-favorites',
257+
// Danger: 'danger',
258+
// 'Drill Down Breadcrumbs': 'drill-down-breadcrumbs'
259+
// }),
260+
261+
children: figma.children('*')
262+
},
263+
264+
example: (props) => (
265+
<Menu
266+
activeItemId="<activeItemId>"
267+
// activeMenu={props.drilldown.activeMenu}
268+
onSelect={props.onSelect}
269+
isPlain={props.isPlain}
270+
actions={props.actions}
271+
showSearchInput={props.showSearchInput}
272+
role="listbox"
273+
containsDrilldown={props.drilldown.containsDrilldown}
274+
drilldownItemPath={props.drilldown.drilldownItemPath}
275+
drilledInMenus={props.drilldown.drilledInMenus}
276+
onDrillIn={props.drilldown.onDrillIn}
277+
onDrillOut={props.drilldown.onDrillOut}
278+
onGetMenuHeight={props.drilldown.onGetMenuHeight}
279+
>
280+
<MenuContent>
281+
<MenuList>{props.children}</MenuList>
282+
</MenuContent>
283+
</Menu>
284+
)
285+
}
286+
);

0 commit comments

Comments
 (0)