feat(CC-batch-5): updated required props

Author: mattnolting

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

@@ -1,76 +1,64 @@
 import figma from '@figma/code-connect';
-import { EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core';
 
 // TODO: FIGMA: Add Empty state footer
 // TODO: FIGMA: Consolodate empty state examples
+// TODO: FIGMA: Add empty state footer
+// TODO: FIGMA: Add empty state actions
+// TODO: FIGMA: Add empty state icon
+// TODO: FIGMA: Add empty state title
+// TODO: FIGMA: Add empty state body
+// TODO: FIGMA: Add empty state variant
+// TODO: FIGMA: Add empty state status
+// TODO: FIGMA: Add empty state isLoading
+// Based on Code Connect's limitations, this component needs to be overhauled. Using the base component approach present in
+// other components would significantly reduce complexity.
 
 figma.connect(
   EmptyState,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7896-37441',
   {
     props: {
       // string
-      title: figma.string('Header text'),
       body: figma.string('Body text'),
+      title: figma.string('Header text'),
 
       // enum
+      icon: figma.enum('Type', {
+        Default: 'CubesIcon', // placeholder icon
+        Loading: 'Spinner'
+      }),
+      status: figma.enum('Type', {
+        Custom: 'custom',
+        Warning: 'warning',
+        Success: 'success',
+        Danger: 'danger',
+        Info: 'info'
+      }),
       variant: figma.enum('Size', {
         Basic: undefined,
         'Extra small': 'xs',
         Small: 'sm',
         Large: 'lg',
         'Extra large': 'xl'
       }),
-      // "custom" | "warning" | "success" | "danger" | "info"
-      status: figma.enum('Type', {
-        Basic: {
-          icon: CubesIcon,
-          type: undefined
-        },
-        Create: {
-          icon: PlusCircleIcon,
-          type: 'custom'
-        },
-        'No results': {
-          icon: SearchIcon,
-          type: 'custom'
-        },
-        Success: {
-          icon: CheckCircleIcon,
-          type: 'success'
-        },
-        Error: {
-          icon: ExclamationCircleIcon,
-          type: 'danger'
-        },
-        Permissions: {
-          icon: LockIcon,
-          type: undefined
-        },
-        Danger: {
-          icon: Spinner,
-          type: undefined
-        }
-      }),
-      isLoading: figma.enum('Type', { Loading: 'Spinner' })
+
+      // children
+      actions: figma.children(['Button', 'Link Button'])
     },
     example: (props) => (
       // Documentation for EmptyState can be found at https://www.patternfly.org/components/empty-state
       <EmptyState
-        status={props.status.type}
-        titleText={props.title}
-        variant={props.variant}
         headingLevel="h4"
-        icon={props.status.icon}
+        icon={props.icon as any}
+        variant={props.variant}
+        status={props.status}
+        titleText={props.title}
       >
         <EmptyStateBody>{props.body}</EmptyStateBody>
-        {/* <EmptyStateFooter>{props.children}</EmptyStateFooter> */}
+        <EmptyStateFooter>
+          <EmptyStateActions>{props.actions}</EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     )
   }

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

@@ -1,36 +1,47 @@
 import figma from '@figma/code-connect';
 import { ExpandableSection } from '@patternfly/react-core';
 
+// TODO: FIGMA: Create toggle component
+const toggleContent = `
+    <div>
+    <span>You can also use icons </span>
+    <CheckCircleIcon />
+    <span> or badges </span>
+    <Badge isRead={true}>4</Badge>
+    <span> !</span>
+  </div>
+`;
+
 figma.connect(
   ExpandableSection,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146',
   {
     props: {
-      // string
+      // enum
+      isIndented: figma.enum('State', { 'Expanded Indent': true }),
+      toggleContent: figma.enum('State', { Expanded: toggleContent }),
       toggleTextCollapsed: figma.enum('State', { Collapsed: figma.string('Toggle Text More') }),
       toggleTextExpanded: figma.enum('State', { Expanded: figma.string('Toggle Text Less') }),
 
       // boolean
-      isExpanded: figma.enum('State', { Expanded: true }),
-      propsExpandedContentSectionText: figma.enum('State', {
+      expandedContentSectionText: figma.enum('State', {
         Default: figma.string('Default Truncate Text'),
         Expanded: figma.string('Expanded Truncate Text')
       }),
-
-      // enum
-      expandedContentSectionText: figma.enum('State', { 'Expanded Truncate': true }),
+      isExpanded: figma.enum('State', { Expanded: true }),
 
       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}
         toggleTextExpanded={props.toggleTextExpanded}
-        onToggle={() => {}}
         variant="truncate"
-        isExpanded={props.isExpanded}
-        toggleContent={props.children}
       >
         {props.expandedContentSectionText}
       </ExpandableSection>

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

@@ -1,6 +1,11 @@
 import figma from '@figma/code-connect';
 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:
+
 // TODO: FIGMA: Create toggle component
 const toggleContent = `
     <div>
@@ -55,7 +60,8 @@ figma.connect(
     example: (props) => (
       // Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
       <ExpandableSection
-        isExpanded={props.isExpanded}
+        // 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/ExpandableSectionDisclosure.figma.tsx

@@ -8,8 +8,8 @@ figma.connect(
     props: {
       // string
       expandedContentSectionText: figma.string('Expanded Text'),
-      toggleTextExpanded: figma.string('Toggle Text Less'),
       toggleTextCollapsed: figma.string('Toggle Text More'),
+      toggleTextExpanded: figma.string('Toggle Text Less'),
 
       // boolean
       isIndented: figma.enum('State', {
@@ -29,10 +29,10 @@ figma.connect(
       <ExpandableSection
         isExpanded={props.isExpanded}
         isIndented={props.isIndented}
+        toggleContent={props.children}
         toggleTextCollapsed={props.toggleTextCollapsed}
         toggleTextExpanded={props.toggleTextExpanded}
         variant="truncate"
-        toggleContent={props.children}
       >
         {props.expandedContentSectionText}
       </ExpandableSection>

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

@@ -6,6 +6,7 @@ import {
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem
 } from '@patternfly/react-core';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 // TODO: FIGMA: Add status toggle text
 // TODO: FIGMA: Add status toggle icon
@@ -20,42 +21,43 @@ figma.connect(
   {
     props: {
       isHorizontal: figma.enum('Layout', { Horizontal: true }),
-
-      state: figma.enum('State', {
-        Default: 'default',
-        'Drag over': 'drag-over',
-        'Uploading + Collapsed': 'uploading---collapsed',
-        'Uploaded + Collapsed': 'uploaded---collapsed',
-        'Failed upload + Collapsed': 'failed-upload---collapsed',
-        'Uploading + Expanded': 'uploading---expanded',
-        'Uploaded + Expanded': 'uploaded---expanded',
-        'Failed Upload + Expanded': 'failed-upload---expanded'
-      }),
-
-      statusIcons: ['inProgress', 'success', 'danger']
+      titleText: 'Drag and drop files here',
+      titleTextSeparator: 'or',
+      infoText: 'Accepted file types: JPEG, Doc, PDF, PNG',
+      children: figma.children('*')
     },
     example: (props) => (
       // Documentation for FileUpload can be found at https://www.patternfly.org/components/file-upload
-      <MultipleFileUpload onFileDrop={() => {}} isHorizontal={props.isHorizontal}>
+      <MultipleFileUpload
+        isHorizontal={props.isHorizontal}
+        onFileDrop={() => {}}
+        dropzoneProps={{
+          accept: {
+            'image/jpeg': ['.jpg', '.jpeg'],
+            'application/msword': ['.doc'],
+            'application/pdf': ['.pdf'],
+            'image/png': ['.png']
+          }
+        }}
+      >
         <MultipleFileUploadMain
-          titleIcon={'<UploadIcon />'}
-          titleText="Drag and drop files here"
-          titleTextSeparator="or"
-          infoText="Accepted file types: JPEG, Doc, PDF, PNG"
+          titleIcon={<UploadIcon />}
+          titleText={props.titleText}
+          titleTextSeparator={props.titleTextSeparator}
+          infoText={props.infoText}
         />
 
         <MultipleFileUploadStatus
-          statusToggleText={'${successfullyReadFileCount} of ${currentFiles.length} files uploaded'}
-          statusToggleIcon={'statusIcon'}
+          statusToggleText="Status toggle text"
+          statusToggleIcon="StatusToggleIcon"
           aria-label="Current uploads"
         >
           <MultipleFileUploadStatusItem
-            file={file}
-            key={file.name}
+            file="file-upload-file"
+            key="file-upload-key"
             onClearClick={() => {}}
             onReadSuccess={() => {}}
             onReadFail={() => {}}
-            progressHelperText={'${file.name} is being read'}
           />
         </MultipleFileUploadStatus>
       </MultipleFileUpload>

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

@@ -23,19 +23,22 @@ figma.connect(
               <HelperTextItem id="helper-text-example-helpText">Upload a CSV file</HelperTextItem>
             </HelperText>
           </FileUploadHelperText>
-        )
+        ),
+        false: undefined
       }),
 
       // enum
-      allowEditingUploadedText: figma.enum('State', {
-        'Uploaded + Not Editable': false,
-        'Uploaded + Editable': true
-      }),
+      allowEditingUploadedText: figma.enum('State', { 'Uploaded + Editable': true }),
       isDragActive: figma.enum('State', {
         'Drag state': true,
         false: undefined
       }),
-      isLoading: figma.enum('State', { 'In progress upload': true })
+      isLoading: figma.enum('State', { 'In progress upload': true }),
+      isValidated: figma.enum('State', {
+        'Invalid upload': 'error',
+        'Uploaded + Editable': 'success',
+        'Uploaded + Not Editable': 'success'
+      })
     },
     example: (props) => (
       // Documentation for FileUpload can be found at https://www.patternfly.org/components/file-upload
@@ -45,6 +48,7 @@ figma.connect(
         aria-label="File upload example"
         browseButtonText="Upload"
         isLoading={props.isLoading}
+        validated={props.isValidated}
         isDragActive={props.isDragActive}
         hideDefaultPreview={props.hideDefaultPreview}
         allowEditingUploadedText={props.allowEditingUploadedText}

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

@@ -7,10 +7,8 @@ import {
   DropdownList,
   Dropdown,
   DropdownItem,
-  Divider,
-  MenuToggle
+  Divider
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 // TODO: FIGMA: Use dropdown from figma for actions
 // TODO: FIGMA: Create hint title
@@ -22,19 +20,10 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 const actions = (
   <Dropdown
-    isOpen={isOpen}
-    onSelect={onSelect}
-    onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
-    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-      <MenuToggle
-        ref={toggleRef}
-        aria-label="Without title example kebab toggle"
-        variant="plain"
-        onClick={onToggle}
-        isExpanded={isOpen}
-        icon={<EllipsisVIcon />}
-      />
-    )}
+    isOpen={false} // should use an 'isOpen' state variable
+    onSelect={() => {}} // need to define an onSelect handler
+    onOpenChange={() => {}}
+    toggle={() => {}}
   >
     <DropdownList>
       <DropdownItem value={0} key="action">