feat(CC-batch-4): updated dual list

Author: mattnolting

packages/code-connect/components/DualListSelector/DualListHeader.figma.tsx

@@ -12,13 +12,18 @@ figma.connect(
       itemInformation: figma.string('Item information'),
 
       // boolean
-      isSearchable: figma.boolean('Has search bar'),
+      isSearchable: figma.boolean('Has search bar', {
+        true: `buildSearchInput(true)`,
+        false: undefined
+      }),
       onSearch: figma.boolean('Has search bar', {
         true: () => {},
         false: undefined
       }),
 
-      hasSort: figma.boolean('Has search bar', {
+      // TODO: FIGMA: Add sort button
+
+      actions: figma.boolean('Has search bar', {
         true: [
           <Button
             variant={ButtonVariant.plain}
@@ -44,11 +49,14 @@ figma.connect(
     example: (props) => (
       // Documentation for DualListHeader can be found at https://www.patternfly.org/components/dual-list-selector
       <DualListSelectorPane
-        searchInput={props.isSearchable}
+        actions={props.actions}
+        listMinHeight="300px"
         onSearch={props.onSearch}
-        actions={props.hasSort}
+        searchInput={props.isSearchable}
         title={props.title}
-      ></DualListSelectorPane>
+      >
+        {props.children}
+      </DualListSelectorPane>
     )
   }
 );

packages/code-connect/components/DualListSelector/DualListItemBaseComponent.figma.tsx

@@ -1,16 +1,80 @@
-import { DualListSelector } from '@patternfly/react-core';
+import {
+  DualListSelector,
+  DualListSelectorList,
+  DualListSelectorPane,
+  DualListSelectorControl,
+  DualListSelectorControlsWrapper
+} from '@patternfly/react-core';
 import figma from '@figma/code-connect';
+import AngleRightIcon from '@patternfly/react-icons/icons/angle-right-icon/dist/esm/icons/angle-right-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/icons/angle-double-right-icon/dist/esm/icons/angle-double-right-icon';
+import AngleDoubleLeftIcon from '@patternfly/react-icons/icons/angle-double-left-icon/dist/esm/icons/angle-double-left-icon';
+import AngleLeftIcon from '@patternfly/react-icons/icons/angle-left-icon/dist/esm/icons/angle-left-icon';
 
 figma.connect(
   DualListSelector,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=29667-231683',
   {
     props: {
-      children: figma.children('*')
+      children: figma.children('Dual list item*')
     },
     example: (props) => (
       // Documentation for DualListSelector can be found at https://www.patternfly.org/components/dual-list-selector
-      <DualListSelector>{props.children}</DualListSelector>
+      // TODO: FIGMA: isTree: figma.boolean('Expandable'),
+      // properties are static now, but will be dynamic once pane is introduced
+      <DualListSelector>
+        {/*
+          TODO: FIGMA: Configure Dual list selector pane
+          > properties are static now, but will be dynamic once pane is introduced
+        */}
+        <DualListSelectorPane
+          title="Available options"
+          searchInput={buildSearchInput(false)}
+          actions={[buildSort(false)]}
+          listMinHeight="300px"
+          isChosen
+          status={() => {}}
+        >
+          <DualListSelectorList>{props.children}</DualListSelectorList>
+        </DualListSelectorPane>
+        {/*
+          TODO: FIGMA: Configure Dual list selector controls
+          properties are static now, but will be dynamic once controls are introduced
+        */}
+        <DualListSelectorControlsWrapper>
+          <DualListSelectorControl
+            isDisabled={false}
+            onClick={() => {}}
+            aria-label="Add selected"
+            icon={<AngleRightIcon />}
+          />
+          <DualListSelectorControl
+            isDisabled={false}
+            onClick={() => {}}
+            aria-label="Add all"
+            icon={<AngleDoubleRightIcon />}
+          />
+          <DualListSelectorControl
+            isDisabled={false}
+            onClick={() => {}}
+            aria-label="Remove all"
+            icon={<AngleDoubleLeftIcon />}
+          />
+          <DualListSelectorControl
+            isDisabled={false}
+            onClick={() => {}}
+            aria-label="Remove selected"
+            icon={<AngleLeftIcon />}
+          />
+        </DualListSelectorControlsWrapper>
+        {/*
+          TODO: FIGMA: Configure Dual list selector pane
+          > properties are static now, but will be dynamic once pane is introduced
+        */}
+        <DualListSelectorPane title="Choose options" status={() => {}}>
+          <DualListSelectorList>{props.children}</DualListSelectorList>
+        </DualListSelectorPane>
+      </DualListSelector>
     )
   }
 );

packages/code-connect/components/DualListSelector/DualListItemTree.figma.tsx

@@ -0,0 +1,39 @@
+import { DualListSelectorListItem } from '@patternfly/react-core';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  DualListSelectorListItem,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=29667-231683',
+  {
+    props: {
+      // string
+      itemText: figma.string('Item text'),
+
+      // boolean
+      isDraggable: figma.boolean('Is Draggable'),
+      draggableButtonAriaLabel: figma.boolean('Is Draggable', {
+        true: 'Draggable list item',
+        false: undefined
+      }),
+
+      // enum
+      isSelected: figma.enum('State', { Selected: true }),
+      children: figma.children('*')
+    },
+    example: (props) => (
+      // TODO: FIGMA: Dual list item types and tree setting should come from this component
+      // Documentation for DualListSelector can be found at https://www.patternfly.org/components/dual-list-selector
+      <DualListSelectorListItem
+        id="dual-list-selector-list-item-id"
+        isSelected={props.isSelected}
+        isDraggable={props.isDraggable}
+        key="dual-list-selector-list-item-key"
+        draggableButtonAriaLabel={props.draggableButtonAriaLabel}
+        onOptionSelect={() => {}}
+      >
+        {props.itemText}
+        {props.children}
+      </DualListSelectorListItem>
+    )
+  }
+);