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

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

@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect';
+import { NotificationDrawer, NotificationDrawerBody, NotificationDrawerList } from '@patternfly/react-core';
+
+figma.connect(
+  NotificationDrawer,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7172-99015',
+  {
+    props: {
+      notificationDrawerHeader: figma.children('Notification drawer header'),
+      notificationDrawerGroup: figma.children('Notification drawer group'),
+      notificationDrawerNotifications: 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>
+          {props.notificationDrawerGroup}
+          <NotificationDrawerList>{props.notificationDrawerNotifications}</NotificationDrawerList>
+        </NotificationDrawerBody>
+      </NotificationDrawer>
+    )
+  }
+);

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

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import { NotificationDrawerGroup, NotificationDrawerList } from '@patternfly/react-core';
+
+// TODO: FIGMA: Split unread count into a separate prop
+
+figma.connect(
+  NotificationDrawerGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3172-18190&m=dev',
+  {
+    props: {
+      showUnreadCount: figma.boolean('Has count', {
+        true: 3,
+        false: NaN
+      }),
+      headingText: figma.string('Group title'),
+      isExpanded: figma.enum('Type', {
+        Collapsed: false,
+        Expanded: true
+      }),
+      hasCount: figma.boolean('Has count', {
+        true: figma.children('Badge'),
+        false: undefined
+      }),
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <NotificationDrawerGroup isExpanded={props.isExpanded} count={props.showUnreadCount} title={props.headingText}>
+        <NotificationDrawerList>{props.children}</NotificationDrawerList>
+      </NotificationDrawerGroup>
+    )
+  }
+);

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

@@ -0,0 +1,63 @@
+import figma from '@figma/code-connect';
+import { Dropdown, DropdownItem, DropdownList, MenuToggle, NotificationDrawerHeader } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/icons/ellipsis-v-icon/dist/esm/icons/ellipsis-v-icon';
+
+figma.connect(
+  NotificationDrawerHeader,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3170-17841&m=dev',
+  {
+    props: {
+      // string
+      headingText: figma.string('Heading text'),
+
+      // boolean
+      hasActionsMenu: figma.boolean('Has actions menu', {
+        true: {
+          dropdown: (
+            <Dropdown
+              onSelect={() => {}}
+              isOpen={false}
+              onOpenChange={() => {}}
+              popperProps={{ position: 'right' }}
+              toggle={() => (
+                <MenuToggle
+                  ref={() => {}}
+                  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
+      })
+    },
+    example: (props) => (
+      <NotificationDrawerHeader
+        count={props.showUnreadCount}
+        onClose={props.hasActionsMenu.onClose}
+        title={props.headingText}
+        srTitle="Notification drawer header"
+      >
+        {props.hasActionsMenu.dropdown}
+      </NotificationDrawerHeader>
+    )
+  }
+);

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

@@ -0,0 +1,88 @@
+import figma from '@figma/code-connect';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  NotificationDrawerListItem,
+  NotificationDrawerListItemBody,
+  NotificationDrawerListItemHeader,
+  Timestamp
+} 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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3164-16861',
+  {
+    props: {
+      timestamp: <Timestamp date={new Date()} />,
+
+      // 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'
+      }),
+
+      // boolean
+      listItemDropdown: {
+        dropdown: (
+          <Dropdown
+            onSelect={() => {}}
+            isOpen={false}
+            onOpenChange={() => {}}
+            popperProps={{ position: 'right' }}
+            toggle={() => (
+              <MenuToggle
+                ref={() => {}}
+                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: () => {}
+      },
+
+      // TODO: FIGMA: Make alert description retrievable via unique layer name or adding a prop to Noficiation Drawer Item
+      alertDescription: 'Description',
+
+      // TODO: FIGMA: 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}
+        onClose={() => {}}
+        variant={props.variant}
+      >
+        <NotificationDrawerListItemHeader
+          srTitle="Notification drawer item"
+          title={props.alertTitle}
+          variant={props.variant}
+        >
+          {props.listItemDropdown.dropdown}
+        </NotificationDrawerListItemHeader>
+        <NotificationDrawerListItemBody timestamp={props.timestamp}>
+          {props.alertDescription}
+        </NotificationDrawerListItemBody>
+      </NotificationDrawerListItem>
+    )
+  }
+);

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

@@ -0,0 +1,32 @@
+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'),
+        state: figma.enum('State', { Disabled: true })
+      })
+    },
+    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,74 @@
+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: FIGMA: 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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5857-2066',
+  {
+    props: {
+      // hasFooter: figma.boolean('Has footer', {}),
+      bodyContent: figma.string('Popover description'),
+      headerContent: figma.string('Popover Heading'),
+      footerContent: figma.boolean('Has footer', {
+        true: 'Popover footer',
+        false: undefined
+      }),
+      headerIcon: figma.boolean('Show header icon', {
+        true: <BullhornIcon />,
+        false: undefined
+      }),
+      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 />
+        }
+      }),
+      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'
+      }),
+
+      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/ListHeading.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect';
+import { SimpleListGroup } from '@patternfly/react-core';
+
+// TODO: FIGMA: Create list group title component
+// Documentation for ListHeading can be found at https://www.patternfly.org/components/simple-list
+
+figma.connect(
+  SimpleListGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20689&m=dev',
+  {
+    props: {
+      listGroupTitle: 'List group title',
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <SimpleListGroup title={props.listGroupTitle} id="<group-id>">
+        {props.children}
+      </SimpleListGroup>
+    )
+  }
+);

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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20691',
+  {
+    props: {
+      children: figma.children(['Simple list group', 'Simple list item'])
+    },
+    example: (props) => <SimpleList aria-label="Simple list example">{props.children}</SimpleList>
+  }
+);

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

@@ -0,0 +1,15 @@
+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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20708',
+  {
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => <SimpleListGroup>{props.children}</SimpleListGroup>
+  }
+);