feat(CC-menu): added menu

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

@@ -0,0 +1,234 @@
+import figma from '@figma/code-connect';
+import {
+  Divider,
+  DrilldownMenu,
+  Menu,
+  MenuContent,
+  MenuSearch,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  MenuSearchInput,
+  SearchInput,
+  MenuItemAction
+} from '@patternfly/react-core';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+
+// TODO: DESIGN: Create menu group
+// TODO: DESIGN: Create menu list
+// Documentation for Menu can be found at https://www.patternfly.org/components/menu
+
+figma.connect(
+  Menu,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2590-18585',
+  {
+    props: {
+      hasSearchDivider: figma.boolean('Show search input', {
+        true: <Divider />,
+        false: undefined
+      }),
+      searchInput: figma.boolean('Show search input', {
+        true: (
+          <MenuSearch>
+            <MenuSearchInput>
+              <SearchInput value="Search input" aria-label="Filter menu items" onChange={() => {}} />
+            </MenuSearchInput>
+          </MenuSearch>
+        ),
+        false: undefined
+      }),
+      isPlain: figma.enum('Menu', { 'Plain Menu': true }),
+      menuItems: figma.children('.MenuItem')
+    },
+    example: (props) => (
+      <Menu activeItemId="<active-item-id>" onSelect={() => {}} isPlain={props.isPlain}>
+        {props.searchInput}
+        {props.hasSearchDivider}
+        <MenuContent>
+          <MenuList>{props.menuItems}</MenuList>
+        </MenuContent>
+      </Menu>
+    )
+  }
+);
+
+// static example, grouping components don't exist in Figma design
+figma.connect(
+  Menu,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2590-18585',
+  {
+    variant: { Menu: 'Titled Groups' },
+    props: {
+      // ...sharedProps,
+      isPlain: figma.enum('Menu', { 'Plain Menu': true })
+    },
+    example: (props) => (
+      <Menu activeItemId="<active-item-id>" onSelect={() => {}} isPlain={props.isPlain}>
+        <MenuContent>
+          <MenuGroup>
+            <MenuList>
+              <MenuItem to="#" itemId="<item-id>">
+                Link not in group
+              </MenuItem>
+            </MenuList>
+          </MenuGroup>
+          <Divider />
+          <MenuGroup label="Group 1" labelHeadingLevel="h3">
+            <MenuList>
+              <MenuItem to="#" itemId={1}>
+                Link 1
+              </MenuItem>
+              <MenuItem itemId={2}>Link 2</MenuItem>
+            </MenuList>
+          </MenuGroup>
+          <Divider />
+          <MenuGroup label="Group 2" labelHeadingLevel="h3">
+            <MenuList>
+              <MenuItem to="#" itemId={3}>
+                Link 1
+              </MenuItem>
+              <MenuItem to="#" itemId={4}>
+                Link 2
+              </MenuItem>
+            </MenuList>
+          </MenuGroup>
+        </MenuContent>
+      </Menu>
+    )
+  }
+);
+
+// static example, grouping components don't exist in Figma design
+const drilldownMenuModel = {
+  id: 'drilldown-drilldownMenuStart',
+  children: (
+    <DrilldownMenu id="drilldown-drilldownMenuStart">
+      <MenuItem itemId="group:start_rollout_breadcrumb" direction="up">
+        Start rollout
+      </MenuItem>
+      <Divider component="li" />
+      <MenuItem
+        itemId="group:app_grouping"
+        description="Groups A-C"
+        direction="down"
+        drilldownMenu={
+          <DrilldownMenu id="drilldown-drilldownMenuStartGrouping">
+            <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
+              Application grouping
+            </MenuItem>
+            <Divider component="li" />
+            <MenuItem itemId="group_a">Group A</MenuItem>
+            <MenuItem itemId="group_b">Group B</MenuItem>
+            <MenuItem itemId="group_c">Group C</MenuItem>
+          </DrilldownMenu>
+        }
+      >
+        Application grouping
+      </MenuItem>
+      <MenuItem itemId="count">Count</MenuItem>
+      <MenuItem
+        itemId="group:labels"
+        direction="down"
+        drilldownMenu={
+          <DrilldownMenu id="drilldown-drilldownMenuStartLabels">
+            <MenuItem itemId="group:labels_breadcrumb" direction="up">
+              Labels
+            </MenuItem>
+            <Divider component="li" />
+            <MenuItem itemId="label_1">Label 1</MenuItem>
+            <MenuItem itemId="label_2">Label 2</MenuItem>
+            <MenuItem itemId="label_3">Label 3</MenuItem>
+          </DrilldownMenu>
+        }
+      >
+        Labels
+      </MenuItem>
+      <MenuItem itemId="annotations">Annotations</MenuItem>
+    </DrilldownMenu>
+  )
+};
+
+figma.connect(
+  Menu,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585',
+  {
+    variant: { Menu: 'Drill Down Start' },
+    props: {
+      ...drilldownMenuModel,
+
+      // boolean
+      showSearchInput: figma.boolean('Show search input', {
+        true: true,
+        false: undefined
+      }),
+
+      // enum
+      isPlain: figma.enum('Menu', { 'Plain Menu': true }),
+      actions: figma.enum('Menu', {
+        'With Actions': (
+          <MenuItemAction icon={<CodeBranchIcon />} actionId="code" onClick={() => {}} aria-label="Code" />
+        )
+      }),
+      onSelect: figma.enum('Menu', { 'Option Select': () => {} }),
+      drilldown: figma.enum('Menu', {
+        'Drill Down Breadcrumbs': {
+          containsDrilldown: true,
+          drilldownItemPath: 'drilldownPath',
+          drilledInMenus: 'menuDrilledIn',
+          activeMenu: 'activeMenu',
+          onDrillIn: () => {},
+          onDrillOut: () => {},
+          drilldownMenu: drilldownMenuModel,
+          onGetMenuHeight: () => {},
+          onSelect: () => {}
+        },
+        'Drill Down Start': {
+          containsDrilldown: true,
+          drilldownItemPath: 'drilldownPath',
+          drilledInMenus: 'menuDrilledIn',
+          activeMenu: 'activeMenu',
+          onDrillIn: () => {},
+          onDrillOut: () => {},
+          drilldownMenu: drilldownMenuModel,
+          onGetMenuHeight: () => {},
+          onSelect: () => {}
+        },
+        'Drill Down Return': {
+          containsDrilldown: true,
+          drilldownItemPath: 'drilldownPath',
+          drilledInMenus: 'menuDrilledIn',
+          activeMenu: 'activeMenu',
+          onDrillIn: () => {},
+          onDrillOut: () => {},
+          drilldownMenu: drilldownMenuModel,
+          onGetMenuHeight: () => {},
+          onSelect: () => {}
+        }
+      }),
+
+      children: figma.children('*')
+    },
+
+    example: (props) => (
+      <Menu
+        activeItemId="<activeItemId>"
+        // activeMenu={props.drilldown.activeMenu}
+        onSelect={props.onSelect}
+        isPlain={props.isPlain}
+        actions={props.actions}
+        showSearchInput={props.showSearchInput}
+        role="listbox"
+        containsDrilldown={props.drilldown.containsDrilldown}
+        drilldownItemPath={props.drilldown.drilldownItemPath}
+        drilledInMenus={props.drilldown.drilledInMenus}
+        onDrillIn={props.drilldown.onDrillIn}
+        onDrillOut={props.drilldown.onDrillOut}
+        onGetMenuHeight={props.drilldown.onGetMenuHeight}
+      >
+        <MenuContent>
+          <MenuList>{props.children}</MenuList>
+        </MenuContent>
+      </Menu>
+    )
+  }
+);

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

@@ -0,0 +1,125 @@
+import figma from '@figma/code-connect';
+import { Divider, MenuItem, MenuItemAction, MenuFooter } from '@patternfly/react-core';
+// import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+
+// TODO: File bug with Figma CC. The description prop is not working as expected. Strings behind boolean props are working in other components, however they
+// do not work here. My assumption is that prepending/appending periods to the string is causing the issue and as a matter of consistency, should not be used.
+// TODO: DESIGN: "Show Descr.  has a trailing space in the prop. Remove trailing space.
+// doesn't but should
+// description: figma.boolean('Show Descr. ', {
+//   true: 'This is a description',
+//   false: undefined
+// }),
+
+// Menu Item Separator
+figma.connect(
+  MenuItem,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2579-17546',
+  {
+    variant: { 'Menu Item': 'Separator' },
+    props: {},
+    example: () => <Divider />
+  }
+);
+
+// Menu Item Footer
+figma.connect(
+  MenuFooter,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2579-17546',
+  {
+    variant: { 'Menu Item': 'Footer' },
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => <MenuFooter>{props.children}</MenuFooter>
+  }
+);
+
+// Base Menu Item
+// Menu Item Group Header
+figma.connect(
+  MenuItem,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2579-17546',
+  {
+    props: {
+      // string
+      menuItemText: figma.string('Menu item Text'),
+
+      // boolean
+      icon: figma.boolean('Show Leading Icon', { true: <CodeBranchIcon />, false: undefined }),
+      action: figma.boolean('Show action icon', { true: <CogIcon />, false: undefined }),
+
+      // description: figma.boolean('showDescr', { true: figma.string('Descr. Text'), false: undefined }),
+      description: 'This is a description', // figma bug, cannot use string directly, needs to be wrapped in an object
+
+      // enum
+      isDisabled: figma.enum('State', { Disabled: true }),
+      isDanger: figma.enum('Menu Item', { Danger: true }),
+      isExternalLink: figma.enum('Menu Item', { 'With external link on hover': true }),
+      actions: figma.boolean('Show action icon', {
+        true: (
+          <MenuItemAction
+            icon={<CodeBranchIcon />}
+            actionId="code"
+            // eslint-disable-next-line no-console
+            onClick={() => console.log('clicked on code icon')}
+            aria-label="Code"
+          />
+        ),
+        false: undefined
+      }),
+      to: figma.enum('Menu Item', { 'With external link on hover': '#to-link' })
+    },
+    example: (props) => (
+      <MenuItem
+        actions={props.actions}
+        description={props.description} // figma bug, cannot use string directly in boolean props, but should be able to
+        isDanger={props.isDanger}
+        itemId="<menu-item-id>"
+        icon={props.icon}
+        isDisabled={props.isDisabled}
+        isExternalLink={props.isExternalLink}
+        to={props.to}
+      >
+        {props.menuItemText}
+      </MenuItem>
+    )
+  }
+);
+
+figma.connect(
+  MenuItem,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2579-17546',
+  {
+    variant: { 'Menu Item': 'Option Select' },
+    props: {
+      menuItemText: figma.string('Menu item Text'),
+      hasCheckbox: figma.enum('Menu Item', { 'Checkbox select': true }),
+
+      isSelected: figma.enum('State', {
+        Default: undefined,
+        Hover: undefined,
+        Selected: true,
+        Disabled: undefined
+      }),
+
+      isDisabled: figma.enum('State', { Disabled: true })
+    },
+    example: (props) => (
+      <MenuItem
+        hasCheckbox={props.hasCheckbox}
+        icon={<CodeBranchIcon />}
+        isSelected={props.isSelected}
+        isDisabled={props.isDisabled}
+        itemId="<item-id>"
+        onSelect={() => {}}
+        role="listbox"
+        activeItemId="<active-item-id>"
+      >
+        {props.menuItemText}
+      </MenuItem>
+    )
+  }
+);