feat(CC-batch-7): added batch 7

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

@@ -0,0 +1,54 @@
+import figma from '@figma/code-connect';
+import {
+  NotificationDrawer,
+  NotificationDrawerBody,
+  NotificationDrawerGroupList,
+  NotificationDrawerList
+} from '@patternfly/react-core';
+
+// Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer
+
+// Default
+figma.connect(
+  NotificationDrawer,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7172-99015',
+  {
+    props: {
+      // children
+      notificationDrawerHeader: figma.children('Notification drawer header'),
+      notificationDrawerItems: figma.children(['Notifications', 'Notification drawer item'])
+    },
+    example: (props) => (
+      // Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer
+      <NotificationDrawer>
+        {props.notificationDrawerHeader}
+        <NotificationDrawerBody>
+          <NotificationDrawerList>{props.notificationDrawerItems}</NotificationDrawerList>
+        </NotificationDrawerBody>
+      </NotificationDrawer>
+    )
+  }
+);
+
+// Grouped
+figma.connect(
+  NotificationDrawer,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7172-99015',
+  {
+    variant: { Type: 'Grouped' },
+    props: {
+      // children
+      notificationDrawerHeader: figma.children('Notification drawer header'),
+      notificationDrawerGroup: figma.children('Notification drawer groups')
+    },
+    example: (props) => (
+      // Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer
+      <NotificationDrawer>
+        {props.notificationDrawerHeader}
+        <NotificationDrawerBody>
+          <NotificationDrawerGroupList>{props.notificationDrawerGroup}</NotificationDrawerGroupList>
+        </NotificationDrawerBody>
+      </NotificationDrawer>
+    )
+  }
+);

packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx

@@ -0,0 +1,42 @@
+import figma from '@figma/code-connect';
+import { NotificationDrawerGroup, NotificationDrawerList } from '@patternfly/react-core';
+
+// TODO: DESIGN: Split unread count into a separate prop
+
+figma.connect(
+  NotificationDrawerGroup,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3172-18190',
+  {
+    props: {
+      // string
+      headingText: figma.string('Group title'),
+      count: 3,
+
+      // boolean
+      badgeProps: figma.boolean('Has count', {
+        true: figma.nestedProps('Badge', {
+          count: figma.string('Text')
+        }),
+        false: { count: undefined }
+      }),
+
+      // enum
+      isExpanded: figma.enum('Type', {
+        Collapsed: false,
+        Expanded: true
+      }),
+
+      children: figma.children('Notification drawer item')
+    },
+    example: (props) => (
+      <NotificationDrawerGroup
+        title={props.headingText}
+        isExpanded={props.isExpanded}
+        count={props.badgeProps.count}
+        onExpand={() => {}}
+      >
+        <NotificationDrawerList>{props.children}</NotificationDrawerList>
+      </NotificationDrawerGroup>
+    )
+  }
+);

packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx

@@ -0,0 +1,62 @@
+import figma from '@figma/code-connect';
+import { Dropdown, DropdownItem, DropdownList, MenuToggle, NotificationDrawerHeader } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons//ellipsis-v-icon';
+
+figma.connect(
+  NotificationDrawerHeader,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3170-17841',
+  {
+    props: {
+      // boolean
+      hasActionsMenu: figma.boolean('Has actions menu', {
+        true: {
+          dropdown: (
+            <Dropdown
+              onSelect={() => {}}
+              isOpen={false}
+              onOpenChange={() => {}}
+              popperProps={{ position: 'right' }}
+              toggle={(refToggle) => (
+                <MenuToggle
+                  ref={refToggle}
+                  isExpanded={false}
+                  onClick={() => {}}
+                  variant="plain"
+                  aria-label={`Basic example header kebab toggle`}
+                  icon={<EllipsisVIcon />}
+                />
+              )}
+            >
+              <DropdownList>
+                <DropdownItem>Item 1</DropdownItem>
+                <DropdownItem>Item 2</DropdownItem>
+                <DropdownItem>Item 3</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          ),
+          onClose: () => {}
+        },
+        false: {
+          dropdown: undefined,
+          onClose: undefined
+        }
+      }),
+      showUnreadCount: figma.boolean('Show unread count', {
+        true: 3,
+        false: NaN
+      }),
+
+      // string
+      headingText: figma.string('Heading text')
+    },
+    example: (props) => (
+      <NotificationDrawerHeader
+        count={props.showUnreadCount}
+        onClose={props.hasActionsMenu.onClose}
+        title={props.headingText}
+      >
+        {props.hasActionsMenu.dropdown}
+      </NotificationDrawerHeader>
+    )
+  }
+);

packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx

@@ -0,0 +1,68 @@
+import figma from '@figma/code-connect';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  NotificationDrawerListItem,
+  NotificationDrawerListItemBody,
+  NotificationDrawerListItemHeader
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+// Documentation for NotificationDrawerListItem can be found at https://www.patternfly.org/components/notification-drawer
+
+figma.connect(
+  NotificationDrawerListItem,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3164-16861',
+  {
+    props: {
+      // enum
+      isRead: figma.enum('Type', { Read: true }),
+      isHoverable: figma.enum('State', { Hover: true }),
+      variant: figma.enum('Status', {
+        Info: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Danger: 'danger'
+      }),
+
+      // TODO: DESIGN: Make alert description retrievable via unique layer name or adding a prop to Noficiation Drawer Item
+      alertDescription: 'Description',
+
+      // TODO: DESIGN: Make alert title retrievable via unique layer name or adding a prop to Noficiation Drawer Item
+      alertTitle: 'Notification title'
+    },
+    example: (props) => (
+      <NotificationDrawerListItem isHoverable={props.isHoverable} isRead={props.isRead} variant={props.variant}>
+        <NotificationDrawerListItemHeader title={props.alertTitle} variant={props.variant}>
+          <Dropdown
+            onSelect={() => {}}
+            isOpen={false}
+            onOpenChange={() => {}}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                isExpanded={false}
+                onClick={() => {}}
+                variant="plain"
+                aria-label={`Basic example header kebab toggle`}
+                icon={<EllipsisVIcon />}
+              />
+            )}
+          >
+            <DropdownList>
+              <DropdownItem>Item 1</DropdownItem>
+              <DropdownItem>Item 2</DropdownItem>
+              <DropdownItem>Item 3</DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        </NotificationDrawerListItemHeader>
+        <NotificationDrawerListItemBody timestamp="5 minutes ago">
+          {props.alertDescription}
+        </NotificationDrawerListItemBody>
+      </NotificationDrawerListItem>
+    )
+  }
+);

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

@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import { Pagination } from '@patternfly/react-core';
+
+// TODO: Split perPage and Page into separate properties
+// Documentation for Pagination can be found at https://www.patternfly.org/components/pagination
+
+figma.connect(
+  Pagination,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5047-695',
+  {
+    props: {
+      // enum
+      isExpanded: figma.enum('Menu', { Open: true, Closed: false }),
+      isCompact: figma.enum('Type', { Compact: true, Closed: false }),
+
+      // nested
+      pageQuantity: figma.nestedProps('Page quantity selector', {
+        itemCount: figma.string('Total quantity')
+      })
+    },
+    example: (props) => (
+      <Pagination
+        isCompact={props.isCompact}
+        isDisabled={props.pageQuantity.state}
+        itemCount={props.pageQuantity.itemCount}
+        perPage={20} // this needs to be specified in the figma file
+        page={1} // this needs to be specified in the figma file
+      />
+    )
+  }
+);

packages/code-connect/components/PopOver/Popover.figma.tsx

@@ -0,0 +1,79 @@
+import figma from '@figma/code-connect';
+import { Popover } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+
+// TODO: DESIGN: Add buttons boolean to footerContent
+// TODO: REACT: Add icon support
+// Documentation for Popover can be found at https://www.patternfly.org/components/popover
+
+figma.connect(
+  Popover,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=5857-2066',
+  {
+    // enum
+    props: {
+      // boolean
+      footerContent: figma.boolean('Has footer', {
+        true: figma.string('Popover footer'),
+        false: undefined
+      }),
+      headerIcon: figma.boolean('Show header icon', {
+        true: <BullhornIcon />,
+        false: undefined
+      }),
+
+      // string
+      bodyContent: figma.string('Popover description'),
+      headerContent: figma.string('Popover Heading'),
+
+      // enum
+      position: figma.enum('Position', {
+        'Top-left': 'top-start',
+        'Top-middle': 'top',
+        'Top-right': 'top-end',
+        'Bottom-left': 'bottom-start',
+        'Bottom-middle': 'bottom',
+        'Bottom-right': 'bottom-end'
+      }),
+      status: figma.enum('Status', {
+        Default: {
+          state: undefined,
+          icon: undefined
+        },
+        Success: {
+          state: 'success',
+          icon: <CheckCircleIcon />
+        },
+        Info: {
+          state: 'info',
+          icon: <InfoCircleIcon />
+        },
+        Warning: {
+          state: 'warning',
+          icon: <ExclamationTriangleIcon />
+        },
+        Danger: {
+          state: 'danger',
+          icon: <ExclamationCircleIcon />
+        }
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <Popover
+        alertSeverityVariant={props.status.state}
+        aria-label="Clickable popover"
+        bodyContent={props.bodyContent}
+        footerContent={props.footerContent}
+        headerContent={props.headerContent}
+        headerIcon={props.headerIcon}
+        position={props.position}
+      />
+    )
+  }
+);

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

@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { SimpleList } from '@patternfly/react-core';
+
+// Documentation for SimpleList can be found at https://www.patternfly.org/components/simple-list
+
+figma.connect(
+  SimpleList,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=4410-20691',
+  {
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => <SimpleList aria-label="Simple list example">{props.children}</SimpleList>
+  }
+);

packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx

@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect';
+import { SimpleListGroup } from '@patternfly/react-core';
+
+// Documentation for SimpleListGroup can be found at https://www.patternfly.org/components/simple-list
+
+figma.connect(
+  SimpleListGroup,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=4410-20708',
+  {
+    props: {
+      simpleListItems: figma.children('Simple list item')
+    },
+    example: (props) => (
+      <SimpleListGroup title="List group" id="<simple-list-group-id>">
+        {props.simpleListItems}
+      </SimpleListGroup>
+    )
+  }
+);