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,24 @@
+import { NotificationDrawerHeader } from '@patternfly/react-core';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  NotificationDrawerHeader,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3170-17841&m=dev',
+  {
+    props: {
+      showUnreadCount: figma.boolean('Show unread count', {
+        true: 3,
+        false: NaN
+      }),
+      hasActionsMenu: figma.boolean('Has actions menu'),
+      unreadCount: figma.string('Unread count'),
+      headingText: figma.string('Heading text'),
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <NotificationDrawerHeader count={props.showUnreadCount} title={props.headingText}>
+        {props.children}
+      </NotificationDrawerHeader>
+    )
+  }
+);

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

@@ -0,0 +1,39 @@
+import figma from '@figma/code-connect';
+import {
+  NotificationDrawerListItem,
+  NotificationDrawerListItemBody,
+  NotificationDrawerListItemHeader
+} from '@patternfly/react-core';
+
+figma.connect(
+  NotificationDrawerListItem,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3164-16861&m=dev',
+  {
+    props: {
+      isRead: figma.enum('Type', {
+        Unread: false,
+        Read: true
+      }),
+      isHoverable: figma.enum('State', {
+        Default: false,
+        Hover: true
+      }),
+      status: figma.enum('Status', {
+        Info: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Danger: 'danger'
+      }),
+      alertTitle: figma.children('Alert title'),
+      alertDescription: figma.children('Description')
+    },
+    example: (props) => (
+      <NotificationDrawerListItem isHoverable={props.isHoverable} isRead={props.isRead} variant={props.status}>
+        <NotificationDrawerListItemHeader title="Notification" srTitle="Notification drawer item">
+          {props.alertTitle}
+        </NotificationDrawerListItemHeader>
+        <NotificationDrawerListItemBody>{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
+
+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) => (
+      // Documentation for Pagination can be found at https://www.patternfly.org/components/pagination
+      <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,69 @@
+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';
+
+// TODO: FIGMA: Add buttons boolean to footerContent
+// TODO: REACT: Add icon support
+
+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: figma.string('Popover footer'),
+        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) => (
+      // Documentation for Popover can be found at https://www.patternfly.org/components/popover
+      <Popover
+        aria-label="Clickable popover"
+        headerContent={props.headerContent}
+        bodyContent={props.bodyContent}
+        footerContent={props.footerContent}
+        position={props.position}
+        headerIcon={props.status.icon}
+        alertSeverityVariant={props.status.state as any}
+      />
+    )
+  }
+);

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

@@ -0,0 +1,16 @@
+import figma from '@figma/code-connect';
+import { SimpleList } from '@patternfly/react-core';
+
+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) => (
+      // Documentation for SimpleList can be found at https://www.patternfly.org/components/simple-list
+      <SimpleList aria-label="Simple list example">{props.children}</SimpleList>
+    )
+  }
+);

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

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

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

@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+import { SimpleListItem } from '@patternfly/react-core';
+
+figma.connect(
+  SimpleListItem,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20664',
+  {
+    props: {
+      text: figma.string('Text'),
+      state: figma.enum('State', {
+        Default: undefined,
+        'Hover - Light': 'hover---light',
+        'Hover - Dark': 'hover---dark',
+        'Selected - Light': 'selected---light',
+        'Selected - Dark': 'selected---dark',
+        Disabled: 'disabled'
+      }),
+      type: figma.enum('Type', {
+        Default: undefined,
+        Link: 'link'
+      })
+    },
+    example: (props) => (
+      // Documentation for SimpleListItem can be found at https://www.patternfly.org/components/simple-list
+      <SimpleListItem>{props.text}</SimpleListItem>
+    )
+  }
+);

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

@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+import { Skeleton } from '@patternfly/react-core';
+
+figma.connect(
+  Skeleton,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-288',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 'sm',
+        M: 'md',
+        L: 'lg',
+        XL: 'xl',
+        '2XL': '2xl',
+        '3XL': '3xl',
+        '4XL': '4xl'
+      }),
+      type: figma.enum('Type', {
+        Rectangle: 'square',
+        Circle: 'circle'
+      })
+    },
+    example: (props) => (
+      // Documentation for Skeleton can be found at https://www.patternfly.org/components/skeleton
+      <Skeleton fontSize={props.size} shape={props.type} screenreaderText="Loading default content" />
+    )
+  }
+);