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

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

@@ -0,0 +1,23 @@
+import figma from '@figma/code-connect';
+import { DataList } from '@patternfly/react-core';
+
+// TODO: DESIGN: Separate examples, rename files to match their react counterparts.
+// Documentation for DataList can be found at https://www.patternfly.org/components/data-list
+
+figma.connect(
+  DataList,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-80542',
+  {
+    props: {
+      // enum
+      isCompact: figma.enum('Size', { Compact: true }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <DataList aria-label="DataList example" isCompact={props.isCompact}>
+        {props.children}
+      </DataList>
+    )
+  }
+);

packages/code-connect/components/DataList/_1BuildItYourselfBasicRows.figma.tsx

@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect';
+import { DataListItem, DataListItemRow } from '@patternfly/react-core';
+
+figma.connect(
+  DataListItemRow,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-69488&m=dev',
+  {
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => (
+      // aria-labelledby should point to an ID within the DataListItemRow/DataListItemCell
+      <DataListItem aria-labelledby="child-text-id">
+        <DataListItemRow rowid="<row-id>">{props.children}</DataListItemRow>
+      </DataListItem>
+    )
+  }
+);

packages/code-connect/components/DataList/_1BuildItYourselfClickableRows.figma.tsx

@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import { DataListItem, DataListItemRow } from '@patternfly/react-core';
+
+// Documentation for DataListItemRow can be found at https://www.patternfly.org/components/data-list
+
+figma.connect(
+  DataListItemRow,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-96947',
+  {
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => (
+      // aria-labelledby should point to an ID within the DataListItemRow/DataListItemCell
+      <DataListItem aria-labelledby="child-text-id">
+        <DataListItemRow rowid="<row-id>">{props.children}</DataListItemRow>
+      </DataListItem>
+    )
+  }
+);

packages/code-connect/components/DataList/_1BuildItYourselfDraggableRows.figma.tsx

@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect';
+import { DataList } from '@patternfly/react-core';
+
+// Documentation for DataListItemRow can be found at https://www.patternfly.org/components/data-list
+// This variant has been refactored to use the DragDropSort component.
+// In order to use this variant, you must wrap the DataList component in a DragDropSort component.
+
+figma.connect(
+  DataList,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=19618-55289',
+  {
+    example: () =>
+      'Draggable DataList variant has been refactored to use the DragDropSort component. The design is the same, but the implementation is different. This component variant requires refactoring to work within the new context. For more information, see the example at https://www.patternfly.org/components/data-list/#draggable.'
+    //   Code example:
+    //   <DragDropSort
+    //   items={items}
+    //   onDrop={(_, newItems) => {
+    //     setItems(newItems);
+    //   }}
+    //   variant="DataList"
+    //   overlayProps={{ isCompact: true }}
+    // >
+    //   <DataList aria-label="draggable data list example" isCompact {...props} />
+    // </DragDropSort>
+  }
+);

packages/code-connect/components/DataList/_2BaseComponentsActionCell.figma.tsx

@@ -0,0 +1,16 @@
+import figma from '@figma/code-connect';
+import { DataListAction } from '@patternfly/react-core';
+
+// Documentation for DataListItemRow can be found at https://www.patternfly.org/components/data-list
+
+figma.connect(
+  DataListAction,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6596-33965',
+  {
+    example: () => (
+      <DataListAction aria-labelledby="item1 action1" id="action1" aria-label="Actions">
+        'Action'
+      </DataListAction>
+    )
+  }
+);

packages/code-connect/components/DataList/_2BaseComponentsContentCell.figma.tsx

@@ -0,0 +1,44 @@
+import figma from '@figma/code-connect';
+import { Icon, DataListCell, DataListItem, DataListItemCells, DataListItemRow } from '@patternfly/react-core';
+
+// TODO: DESIGN: Either name layers uniquely or create a dataListCell component to house
+// Documentation for DataList can be found at https://www.patternfly.org/components/data-list
+
+figma.connect(
+  DataListCell,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6596-33934',
+  {
+    props: {
+      showDescriptionText: figma.boolean('Show description text'),
+
+      // enum
+      isIcon: figma.enum('Type', {
+        'Filled - Plain text': true
+      }),
+      isFilled: figma.enum('Type', {
+        'Filled - Plain text': true,
+        'Filled - Link text': true
+      }),
+
+      primaryContent: 'Main content',
+      secondaryContent: 'Second content block'
+    },
+    example: (props) => (
+      <DataListItem aria-labelledby="item1">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell isIcon={true} key="icon-content">
+                <Icon name="info" />
+              </DataListCell>,
+              <DataListCell key="primary-content">
+                <span id="item1">{props.primaryContent}</span>
+              </DataListCell>,
+              <DataListCell key="secondary-content">{props.secondaryContent}</DataListCell>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+    )
+  }
+);

packages/code-connect/components/DataList/_2BaseComponentsControlCell.figma.tsx

@@ -0,0 +1,49 @@
+import figma from '@figma/code-connect';
+import {
+  // DataListAction,
+  DataListCheck,
+  DataListControl,
+  DataListToggle
+} from '@patternfly/react-core';
+
+// TODO: 2. Base Components/Control cell - These cells need unique names. Either create components for DataListCell,
+// DataListToggle, DataListDragButton, DataListAction, DataListCheck
+// These component specifics are unreachable unless separated into their own entities
+// Documentation for DataListControl can be found at https://www.patternfly.org/components/data-list
+
+// const selectableCell = {
+//   <DataListCheck id="ex1-item1" aria-labelledby="ex1-item1" name="ex1-item1" />
+//   return (
+//     <>
+//       {props.isSelectable}
+//       {props.isExpandable}
+//       {props.isDraggable}
+//       <DataListAction aria-labelledby="item1 action1" id="action1" aria-label="Actions">
+//         {props.children}
+//       </DataListAction>
+//     </>
+//   );
+// };
+
+figma.connect(
+  DataListControl,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6596-34013',
+  {
+    props: {
+      isExpandable: figma.boolean('Row expansion', {
+        true: <DataListToggle onClick={() => {}} isExpanded={false} id="toggle1" aria-controls="expand1" />,
+        false: undefined
+      }),
+      isSelectable: figma.boolean('Row select', {
+        true: <DataListCheck id="check-item1" aria-labelledby="item1" name="item1" />,
+        false: undefined
+      })
+    },
+    example: (props) => (
+      <>
+        {props.isSelectable}
+        {props.isExpandable}
+      </>
+    )
+  }
+);

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

@@ -0,0 +1,27 @@
+import { DescriptionList } from '@patternfly/react-core';
+import figma from '@figma/code-connect';
+
+// Documentation for DescriptionList can be found at https://www.patternfly.org/components/description-list
+
+figma.connect(
+  DescriptionList,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1121-3946',
+  {
+    props: {
+      // enum
+      isCompact: figma.enum('Spacing', { Compact: true }),
+      isFluid: figma.enum('Orientation', { 'Horizontal - Fluid': true }),
+      isHorizontal: figma.enum('Orientation', {
+        'Horizontal - Fixed': true,
+        'Horizontal - Fluid': true
+      }),
+
+      children: figma.children('Description list item')
+    },
+    example: (props) => (
+      <DescriptionList isFluid={props.isFluid} isCompact={props.isCompact} isHorizontal={props.isHorizontal}>
+        {props.children}
+      </DescriptionList>
+    )
+  }
+);

packages/code-connect/components/DescriptionList/DescriptionListInCard.figma.tsx

@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import { Card, DescriptionList, DescriptionListTerm, DescriptionListDescription } from '@patternfly/react-core';
+
+// Note: DescriptionList displaySize prop is set by displaySize.
+// Note: DescriptionList label and description are not dynamic. DescriptionList list label composition doesn't currently align with the React component.
+// Note: DescriptionListLabel requires updates to the React component to support dynamic composition.
+// TODO: DESIGN: Separate card and description list size properties.
+// Documentation for DescriptionList can be found at https://www.patternfly.org/components/description-list-in-card
+
+figma.connect(
+  DescriptionList,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4421-28234&m=dev',
+  {
+    props: {
+      displaySize: figma.enum('Card size', {
+        Small: 'default',
+        Default: 'lg',
+        Large: '2xl'
+      }),
+      isHorizontal: figma.enum('Orientation', { Horizontal: true })
+    },
+    example: (props) => (
+      <DescriptionList isHorizontal={props.isHorizontal} displaySize={props.displaySize}>
+        <Card component="div">
+          <DescriptionListTerm>Input label</DescriptionListTerm>
+          <DescriptionListDescription>Description list item</DescriptionListDescription>
+        </Card>
+      </DescriptionList>
+    )
+  }
+);

packages/code-connect/components/DescriptionList/DescriptionListItem.figma.tsx

@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect';
+import { DescriptionListGroup, DescriptionListDescription } from '@patternfly/react-core';
+
+// Documentation for DescriptionListGroup can be found at https://www.patternfly.org/components/description-list
+
+figma.connect(
+  DescriptionListGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1121-3571',
+  {
+    props: {
+      term: figma.children('Term label'),
+      description: figma.string('✏️ Content')
+    },
+
+    example: (props) => (
+      <DescriptionListGroup>
+        {props.term}
+        <DescriptionListDescription>{props.description}</DescriptionListDescription>
+      </DescriptionListGroup>
+    )
+  }
+);

packages/code-connect/components/DescriptionList/TermLabel.figma.tsx

@@ -0,0 +1,97 @@
+import {
+  DescriptionListTerm,
+  DescriptionListTermHelpText,
+  DescriptionListTermHelpTextButton,
+  Popover
+} from '@patternfly/react-core';
+import figma from '@figma/code-connect';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+
+// TODO: DESIGN: Convert inline edit and help text to variants rather than booleans.
+// Note: We don't currently have support for inline edit + help text + icon, therefore current Figma config is not supported.
+// Documentation for DescriptionListTerm can be found at https://www.patternfly.org/components/description-list
+
+figma.connect(
+  DescriptionListTerm,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=36279-2532',
+  {
+    variant: { 'Inline edit toggle': true, 'Has help text': false },
+    props: {
+      label: figma.string('✏️ Label')
+    },
+    example: (props) => (
+      <DescriptionListTerm>
+        <form className="pf-v6-c-inline-edit" id="single-inline-edit-with-label-example">
+          <div className="pf-v6-c-inline-edit__group">
+            <label
+              className="pf-v6-c-inline-edit__label"
+              id="single-inline-edit-with-label-example-label"
+              htmlFor="single-inline-edit-with-label-example-input"
+            >
+              {props.label}
+            </label>
+            <div className="pf-v6-c-inline-edit__action pf-m-enable-editable">
+              <button
+                className="pf-v6-c-button pf-m-plain"
+                type="button"
+                id="single-inline-edit-with-label-example-edit-button"
+                aria-label="Edit"
+                aria-labelledby="single-inline-edit-with-label-example-label single-inline-edit-with-label-example-edit-button"
+              >
+                <span className="pf-v6-c-button__icon">
+                  <i className="fas fa-pencil-alt" aria-hidden="true"></i>
+                </span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </DescriptionListTerm>
+    )
+  }
+);
+
+figma.connect(
+  DescriptionListTerm,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=36279-2532',
+  {
+    variant: { 'Has help text': true, 'Inline edit toggle': false },
+    props: {
+      // string
+      label: figma.string('✏️ Label'),
+
+      // enum
+      icon: figma.enum('Icon ⎆', {
+        true: <CodeBranchIcon />,
+        false: undefined
+      })
+    },
+    example: (props) => (
+      <DescriptionListTermHelpText>
+        <Popover headerContent={<div>{props.label}</div>} bodyContent={<div>This is the help text</div>}>
+          <DescriptionListTermHelpTextButton>
+            {props.icon}
+            {props.label}
+          </DescriptionListTermHelpTextButton>
+        </Popover>
+      </DescriptionListTermHelpText>
+    )
+  }
+);
+
+figma.connect(
+  DescriptionListTerm,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=36279-2532',
+  {
+    props: {
+      // string
+      label: figma.string('✏️ Label'),
+
+      // enum
+      icon: figma.enum('Icon ⎆', {
+        true: <CodeBranchIcon />,
+        false: undefined
+      })
+    },
+    example: (props) => <DescriptionListTerm icon={props.icon}>{props.label}</DescriptionListTerm>
+  }
+);