feat(CC-batch-5): verification complete

Author: mattnolting

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

@@ -1,5 +1,6 @@
 import figma from '@figma/code-connect';
 import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 // TODO: FIGMA: Add Empty state footer
 // TODO: FIGMA: Consolodate empty state examples
@@ -24,10 +25,6 @@ figma.connect(
       title: figma.string('Header text'),
 
       // enum
-      icon: figma.enum('Type', {
-        Default: 'CubesIcon', // placeholder icon
-        Loading: 'Spinner'
-      }),
       status: figma.enum('Type', {
         Custom: 'custom',
         Warning: 'warning',
@@ -43,14 +40,12 @@ figma.connect(
         'Extra large': 'xl'
       }),
 
-      // children
-      actions: figma.children(['Button', 'Link Button'])
+      actions: figma.children('Empty state footer')
     },
     example: (props) => (
-      // Documentation for EmptyState can be found at https://www.patternfly.org/components/empty-state
       <EmptyState
         headingLevel="h4"
-        icon={props.icon as any}
+        icon={<PlusCircleIcon />}
         variant={props.variant}
         status={props.status}
         titleText={props.title}

packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx

@@ -2,6 +2,11 @@ import figma from '@figma/code-connect';
 import { ExpandableSection } from '@patternfly/react-core';
 
 // TODO: FIGMA: Create toggle component
+// onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
+// isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
+
+// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
+
 const toggleContent = `
     <div>
     <span>You can also use icons </span>
@@ -33,10 +38,7 @@ figma.connect(
       children: figma.children('*')
     },
     example: (props) => (
-      // Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
       <ExpandableSection
-        // onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
-        // isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
         isIndented={props.isIndented}
         toggleContent={props.toggleContent}
         toggleTextCollapsed={props.toggleTextCollapsed}

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

@@ -3,10 +3,12 @@ import { ExpandableSection } from '@patternfly/react-core';
 
 // TODO: FIGMA: This component needs to be overhauled. Using the base component approach present in
 // other components would significantly reduce complexity.
+// TODO: FIGMA: Create toggle component
+// onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
+// isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
 
-// TODO: FIGMA:
+// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
 
-// TODO: FIGMA: Create toggle component
 const toggleContent = `
     <div>
     <span>You can also use icons </span>
@@ -23,7 +25,7 @@ figma.connect(
   {
     props: {
       // enum
-      isIndented: figma.enum('State', { 'Expanded Indent': true }),
+      expandedContentSectionText: figma.string('Expanded Text'),
       isDetached: figma.enum('State', { 'Expand Detached': true }),
       isExpanded: figma.enum('State', {
         'Expanded Basic': true,
@@ -32,41 +34,33 @@ figma.connect(
         'Expanded Custom Content': true,
         'Expanded Custom with Component swap': true
       }),
+      isIndented: figma.enum('State', { 'Expanded Indent': true }),
       toggleContent: figma.enum('State', {
         'Default Custom Content': toggleContent,
         'Expanded Custom Content': toggleContent,
         'Expanded Custom with Component swap': toggleContent
       }),
+      toggleTextCollapsed: figma.enum('State', {
+        Default: figma.string('Toggle Text More'),
+        Hover: figma.string('Toggle Text More'),
+        'Default Custom Content': figma.string('Toggle Text More')
+      }),
       toggleTextExpanded: figma.enum('State', {
         'Expanded Basic': figma.string('Toggle Text Less'),
         'Expand Detached': figma.string('Toggle Text Less'),
         'Expanded Indent': figma.string('Toggle Text Less'),
         'Expanded Custom Content': figma.string('Toggle Text Less'),
         'Expanded Custom with Component swap': figma.string('Toggle Text Less')
-      }),
-      expandedContentSectionText: figma.enum('State', {
-        'Expanded Basic': figma.string('Expanded Text'),
-        'Expand Detached': figma.string('Expanded Text'),
-        'Expanded Indent': figma.string('Expanded Text'),
-        'Expanded Custom Content': figma.string('Expanded Text'),
-        'Expanded Custom with Component swap': figma.string('Expanded Text')
-      }),
-      toggleTextCollapsed: figma.enum('State', {
-        Default: figma.string('Toggle Text More'),
-        Hover: figma.string('Toggle Text More'),
-        'Default Custom Content': figma.string('Toggle Text More')
       })
     },
     example: (props) => (
-      // Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
       <ExpandableSection
-        // onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
-        // isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
+        isDetached={props.isDetached}
+        isExpanded={props.isExpanded}
         isIndented={props.isIndented}
         toggleContent={props.toggleContent}
-        toggleTextCollapsed={props.toggleTextCollapsed}
+        toggleText={props.toggleTextCollapsed}
         toggleTextExpanded={props.toggleTextExpanded}
-        variant="truncate"
       >
         {props.expandedContentSectionText}
       </ExpandableSection>

packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx

@@ -12,15 +12,13 @@ figma.connect(
       toggleTextExpanded: figma.string('Toggle Text Less'),
 
       // boolean
-      isIndented: figma.enum('State', {
-        'Expanded Indent': true
-      }),
       isExpanded: figma.enum('State', {
         Expanded: true,
         'Expand Uncontrolled': true,
         'Expanded Indent': true,
         'Expanded Custom Content': true
       }),
+      isIndented: figma.enum('State', { 'Expanded Indent': true }),
 
       children: figma.children('*')
     },

packages/code-connect/components/FileUpload/MultipleFileUpload.figma.tsx

@@ -17,20 +17,22 @@ import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 figma.connect(
   FileUpload,
-  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8949-96128&m=dev',
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8949-96128',
   {
     props: {
-      isHorizontal: figma.enum('Layout', { Horizontal: true }),
+      // static
       titleText: 'Drag and drop files here',
       titleTextSeparator: 'or',
       infoText: 'Accepted file types: JPEG, Doc, PDF, PNG',
+
+      // enum
+      isHorizontal: figma.enum('Layout', { Horizontal: true }),
+
       children: figma.children('*')
     },
     example: (props) => (
       // Documentation for FileUpload can be found at https://www.patternfly.org/components/file-upload
       <MultipleFileUpload
-        isHorizontal={props.isHorizontal}
-        onFileDrop={() => {}}
         dropzoneProps={{
           accept: {
             'image/jpeg': ['.jpg', '.jpeg'],
@@ -39,18 +41,20 @@ figma.connect(
             'image/png': ['.png']
           }
         }}
+        isHorizontal={props.isHorizontal}
+        onFileDrop={() => {}}
       >
         <MultipleFileUploadMain
+          infoText={props.infoText}
           titleIcon={<UploadIcon />}
           titleText={props.titleText}
           titleTextSeparator={props.titleTextSeparator}
-          infoText={props.infoText}
         />
 
         <MultipleFileUploadStatus
-          statusToggleText="Status toggle text"
-          statusToggleIcon="StatusToggleIcon"
           aria-label="Current uploads"
+          statusToggleIcon="StatusToggleIcon"
+          statusToggleText="Status toggle text"
         >
           <MultipleFileUploadStatusItem
             file="file-upload-file"

packages/code-connect/components/FileUpload/SimpleFileUpload.figma.tsx

@@ -7,7 +7,7 @@ import { FileUpload, FileUploadHelperText, HelperText, HelperTextItem } from '@p
 
 figma.connect(
   FileUpload,
-  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8949-96043&m=dev',
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8949-96043',
   {
     props: {
       // boolean

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

@@ -9,6 +9,8 @@ import {
   DropdownItem,
   Divider
 } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import MenuToggle from '@patternfly/react-core/dist/js/components/MenuToggle/MenuToggle';
 
 // TODO: FIGMA: Use dropdown from figma for actions
 // TODO: FIGMA: Create hint title
@@ -17,68 +19,72 @@ import {
 
 // Note: Figma will not render conditional props within React components.
 // This means that the <HintTitle>, <HintBody>, and <HintFooter> tags will not be properly render figma.string()
-
-const actions = (
-  <Dropdown
-    isOpen={false} // should use an 'isOpen' state variable
-    onSelect={() => {}} // need to define an onSelect handler
-    onOpenChange={() => {}}
-    toggle={() => {}}
-  >
-    <DropdownList>
-      <DropdownItem value={0} key="action">
-        Action
-      </DropdownItem>
-      <DropdownItem
-        value={1}
-        key="link"
-        to="#default-link2"
-        // Prevent the default onClick functionality for example purposes
-        onClick={(ev: any) => ev.preventDefault()}
-      >
-        Link
-      </DropdownItem>
-      <DropdownItem value={2} isDisabled key="disabled action">
-        Disabled Action
-      </DropdownItem>
-      <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
-        Disabled Link
-      </DropdownItem>
-      <Divider component="li" key="separator" />
-      <DropdownItem value={4} key="separated action">
-        Separated Action
-      </DropdownItem>
-      <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
-        Separated Link
-      </DropdownItem>
-    </DropdownList>
-  </Dropdown>
-);
+// Documentation for Hint can be found at https://www.patternfly.org/components/hint
 
 figma.connect(
   Hint,
-  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1118-3329&t=IzSunfrnw18ti37Y-11',
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1118-3329',
   {
     props: {
-      // string
-      hintTitle: figma.boolean('Show Title', {
-        true: <HintTitle>{figma.string('✏️ Title')}</HintTitle>,
-        false: undefined
+      // Pre-defined title options (enum works, boolean with JSX doesn't)
+      hintTitle: figma.enum('Show Title', {
+        false: undefined,
+        true: <HintTitle>Hint title</HintTitle>
       }),
-      hintBody: figma.boolean('Show Body', {
-        true: <HintBody>{figma.string('✏️ Body')}</HintBody>,
-        false: undefined
-      }),
-      hintFooter: figma.boolean('Show Footer', {
-        true: <HintFooter>{figma.instance('Inline link')}</HintFooter>,
-        false: undefined
+
+      // Pre-defined body options
+      hintBody: figma.enum('Show Body', {
+        false: undefined,
+        true: <HintBody>This is hint body text that provides helpful information.</HintBody>
       }),
 
-      actions: figma.instance('Swap button')
+      // Pre-defined footer options
+      hintFooter: figma.enum('Show Footer', {
+        false: undefined,
+        true: <HintFooter>Footer content or link</HintFooter>
+      })
     },
     example: (props) => (
-      // Documentation for Hint can be found at https://www.patternfly.org/components/hint
-      <Hint actions={actions}>
+      <Hint
+        actions={
+          <Dropdown
+            isOpen={false}
+            onSelect={() => {}}
+            onOpenChange={() => {}}
+            toggle={() => (
+              <MenuToggle
+                aria-label="With title example kebab toggle"
+                variant="plain"
+                onClick={() => {}}
+                isExpanded={false}
+                icon={<EllipsisVIcon />}
+              />
+            )}
+          >
+            <DropdownList>
+              <DropdownItem value={0} key="action">
+                Action
+              </DropdownItem>
+              <DropdownItem value={1} key="link" to="#default-link2" onClick={() => {}}>
+                Link
+              </DropdownItem>
+              <DropdownItem value={2} isDisabled key="disabled action">
+                Disabled Action
+              </DropdownItem>
+              <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
+                Disabled Link
+              </DropdownItem>
+              <Divider component="li" key="separator" />
+              <DropdownItem value={4} key="separated action">
+                Separated Action
+              </DropdownItem>
+              <DropdownItem value={5} key="separated link" to="#default-link6" onClick={() => {}}>
+                Separated Link
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        }
+      >
         {props.hintTitle}
         {props.hintBody}
         {props.hintFooter}