feat(CC-forms): added and validated forms

packages/code-connect/components/Forms/BasicFormDemo.figma.tsx

@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { Form } from '@patternfly/react-core';
+
+// Documentation for Form can be found at https://www.patternfly.org/components/forms
+
+figma.connect(
+  Form,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1577-2965&t=IzSunfrnw18ti37Y-11',
+  {
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => <Form>{props.children}</Form>
+  }
+);

packages/code-connect/components/Forms/Checkbox.figma.tsx

@@ -0,0 +1,53 @@
+import figma from '@figma/code-connect';
+import { Checkbox } from '@patternfly/react-core';
+
+// Documentation for Checkbox can be found at https://www.patternfly.org/components/forms/checkbox
+
+figma.connect(
+  Checkbox,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=157-3078',
+  {
+    props: {
+      // nested props
+      isChecked: figma.nestedProps('Checkbox Input', {
+        checked: figma.enum('State', {
+          Checked: true,
+          'Checked Disabled': true
+        }),
+        mixed: figma.enum('State', {
+          Mixed: 'null',
+          'Mixed disabled': 'null'
+        })
+      }),
+
+      // boolean
+      description: figma.boolean('Description', {
+        true: figma.string('✏️ Description'),
+        false: undefined
+      }),
+
+      // enum
+      ariaLabel: figma.enum('Type', { Standalone: 'Standalone input' }),
+      isDisabled: figma.enum('State', {
+        'Unchecked Disabled': true,
+        'Checked Disabled': true,
+        'Mixed disabled': true
+      }),
+      labelPlacement: figma.enum('Label placement', { Reversed: 'start' }),
+      toggleLabel: figma.enum('Type', { 'With Label': figma.string('✏️ Toggle label') })
+    },
+    example: (props) => (
+      <Checkbox
+        aria-label={props.ariaLabel}
+        description={props.description}
+        id="check"
+        isChecked={props.isChecked.checked}
+        isDisabled={props.isDisabled}
+        labelPosition={props.labelPlacement}
+        label={props.toggleLabel}
+        name="check"
+        onChange={() => {}}
+      />
+    )
+  }
+);

packages/code-connect/components/Forms/CheckboxGroup.figma.tsx

@@ -0,0 +1,54 @@
+import figma from '@figma/code-connect';
+import { FormGroup, FormGroupLabelHelp, Popover } from '@patternfly/react-core';
+
+// Documentation for CheckboxGroup can be found at https://www.patternfly.org/components/forms/checkbox-group
+
+figma.connect(
+  FormGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1577-4455',
+  {
+    props: {
+      label: figma.boolean('Label', {
+        true: figma.nestedProps('Input Label', {
+          isRequired: figma.boolean('Required', {
+            true: true,
+            false: undefined
+          }),
+          hasHelperText: figma.boolean('Help Icon', {
+            true: (
+              <Popover headerContent={'Popover header content'} bodyContent={'Popover body content'}>
+                <FormGroupLabelHelp aria-label="More info for name field" />
+              </Popover>
+            ),
+            false: undefined
+          }),
+          text: figma.string('✏️ Label text')
+        }),
+        false: undefined
+      }),
+      helperText: figma.boolean('Helper text', {
+        true: figma.children('HelperText'),
+        false: undefined
+      }),
+      isInline: figma.enum('Layout', {
+        Horizontal: true,
+        'Default (vertical)': false
+      }),
+
+      checkboxes: figma.children('Checkbox')
+    },
+    example: (props) => (
+      <FormGroup
+        fieldId="form-checkbox-group"
+        isInline={props.isInline}
+        isRequired={props.label?.isRequired}
+        label={props.label?.text}
+        labelInfo="Additional label info"
+        role="group"
+        labelHelp={props.label?.hasHelperText}
+      >
+        {props.checkboxes}
+      </FormGroup>
+    )
+  }
+);

packages/code-connect/components/Forms/CheckboxInput.figma.tsx

@@ -0,0 +1,32 @@
+// import figma from '@figma/code-connect';
+// import { Checkbox } from '@patternfly/react-core';
+
+// // Documentation for Checkbox can be found at https://www.patternfly.org/components/forms/text-area
+
+// figma.connect(
+//   Checkbox,
+//   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=157-1280',
+//   {
+//     props: {
+//       isChecked: figma.enum('State', {
+//         Checked: true,
+//         'Checked Disabled': true
+//       }),
+//       isDisabled: figma.enum('State', {
+//         'Unchecked Disabled': true,
+//         'Checked Disabled': true,
+//         'Mixed disabled': true
+//       })
+//     },
+//     example: (props) => (
+//       <Checkbox
+//         id="checkbox-input-id"
+//         isChecked={props.isChecked}
+//         isDisabled={props.isDisabled}
+//         label="Checkbox input"
+//         name="check1"
+//         onChange={() => {}}
+//       />
+//     )
+//   }
+// );

packages/code-connect/components/Forms/FieldGroup.figma.tsx

@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { FormFieldGroupExpandable } from '@patternfly/react-core';
+
+// Documentation for FormFieldGroupExpandable can be found at https://www.patternfly.org/components/forms/field-group
+
+figma.connect(
+  FormFieldGroupExpandable,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=17114-21566',
+  {
+    props: {
+      children: figma.children(['Text inputs', 'HelperText'])
+    },
+    example: (props) => <FormFieldGroupExpandable>{props.children}</FormFieldGroupExpandable>
+  }
+);

packages/code-connect/components/Forms/FieldGroupHeader.figma.tsx

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import { FormFieldGroupExpandable, FormFieldGroupHeader } from '@patternfly/react-core';
+
+// TODO: DESIGN: Separate textTitleText and titleDescription into separate props
+// TODO: DESIGN: Separate form field group expandable and non-expandable
+// TODO: DESIGN: Separate action buttons
+// Documentation for FormGroup can be found at https://www.patternfly.org/components/forms
+
+figma.connect(
+  FormFieldGroupExpandable,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=17114-21473',
+  {
+    props: {
+      actions: figma.textContent('Action buttons'),
+      isExpanded: figma.enum('Type', { 'expandable - open': true }),
+      titleDescription: 'Description',
+      titleText: {
+        // text: figma.string('Title'),
+        id: 'field-group-title-id',
+        text: 'Title'
+      }
+      // titleDescription: figma.string('Description'),
+    },
+    example: (props) => (
+      <FormFieldGroupHeader
+        actions={props.actions}
+        titleDescription={props.titleDescription}
+        titleText={props.titleText}
+      />
+    )
+  }
+);

packages/code-connect/components/Forms/FieldGroupHeaderNested.figma.tsx

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import { FormFieldGroupExpandable, FormFieldGroupHeader } from '@patternfly/react-core';
+
+// TODO: DESIGN: Separate textTitleText and titleDescription into separate props
+// TODO: DESIGN: Separate form field group expandable and non-expandable
+// TODO: DESIGN: Separate action buttons
+// Documentation for FormGroup can be found at https://www.patternfly.org/components/forms
+
+figma.connect(
+  FormFieldGroupExpandable,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=17114-21536&t=IzSunfrnw18ti37Y-11',
+  {
+    props: {
+      // string literal
+      titleText: {
+        // text: figma.string('Title'),
+        id: 'field-group-title-id',
+        text: 'Title'
+      },
+
+      // titleDescription: figma.string('Description'),
+      titleDescription: 'Description',
+
+      // enum
+      isExpanded: figma.enum('Type', { 'expandable - open': true }),
+
+      // text content
+      actions: figma.textContent('Action buttons')
+    },
+    example: (props) => <FormFieldGroupHeader titleText={props.titleText} titleDescription={props.titleDescription} />
+  }
+);

packages/code-connect/components/Forms/HelperText.figma.tsx

@@ -0,0 +1,29 @@
+import figma from '@figma/code-connect';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+// Documentation for HelperText can be found at https://www.patternfly.org/components/helper-text
+
+figma.connect(
+  HelperText,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=151-1670&t=lyan2LLnXsDppzjo-11',
+  {
+    props: {
+      // string
+      helperText: figma.string('✏️ Helper text'),
+
+      // enum
+      variant: figma.enum('Type', {
+        Default: undefined,
+        Indeterminate: 'indeterminate',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error'
+      })
+    },
+    example: (props) => (
+      <HelperText>
+        <HelperTextItem variant={props.variant}>{props.helperText}</HelperTextItem>
+      </HelperText>
+    )
+  }
+);

packages/code-connect/components/Forms/InputField.figma.tsx

@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect';
+import { FormGroup } from '@patternfly/react-core';
+
+// Documentation for FormGroup can be found at https://www.patternfly.org/components/text-input
+
+figma.connect(
+  FormGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=157-788',
+  {
+    props: {
+      // nested props
+      label: figma.nestedProps('Input Label', { text: figma.string('✏️ Label text') }),
+
+      // children
+      children: figma.children('Text inputs')
+    },
+
+    example: (props) => (
+      <FormGroup label={props.label.text} type="text" aria-label="Text input example">
+        {props.children}
+      </FormGroup>
+    )
+  }
+);

packages/code-connect/components/Forms/InputGroup.figma.tsx

@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect';
+import { InputGroup } from '@patternfly/react-core';
+
+// TODO: DESIGN: InputGroupItems is not using TextInput, it's using text layers
+// For this component to work properly, components should be nested within the InputGroupItem component
+// TODO: DESIGN: Remove or populate `Text` and `Button` variants with actual components
+// Documentation for InputGroup can be found at https://www.patternfly.org/components/input-group
+
+figma.connect(
+  InputGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=12700-4200',
+  {
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => <InputGroup>{props.children}</InputGroup>
+  }
+);

packages/code-connect/components/Forms/InputGroupItems.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect';
+import { InputGroupItem } from '@patternfly/react-core';
+import CircleIcon from '@patternfly/react-icons/icons/circle-icon/dist/esm/icons/circle-icon';
+
+// Documentation for InputGroup can be found at https://www.patternfly.org/components/input-group
+
+figma.connect(
+  InputGroupItem,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=176-2806',
+  {
+    props: {
+      inputGroupContent: figma.enum('Type', {
+        Text: figma.string('✏️ Input text'),
+        Icon: <CircleIcon />,
+        Button: figma.children('Button'),
+        Dropdown: figma.children('Menu Toggle')
+      })
+    },
+    example: (props) => <InputGroupItem>{props.inputGroupContent}</InputGroupItem>
+  }
+);

packages/code-connect/components/Forms/InputLabel.figma.tsx

@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect';
+import { FormGroup, FormGroupLabelHelp, Popover } from '@patternfly/react-core';
+
+// Documentation for FormGroup can be found at https://www.patternfly.org/components/forms/form-group
+
+figma.connect(
+  FormGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=151-1566',
+  {
+    props: {
+      isRequired: figma.boolean('Required'),
+      labelText: figma.string('✏️ Label text'),
+      labelHelp: figma.boolean('Help Icon', {
+        true: (
+          <Popover headerContent={'Popover header content'} bodyContent={'Popover body Content'}>
+            <FormGroupLabelHelp aria-label="More info for name field" />
+          </Popover>
+        ),
+        false: undefined
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => <FormGroup>{props.children}</FormGroup>
+  }
+);

packages/code-connect/components/Forms/LabeledInputGroup.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect';
+import { FormGroup } from '@patternfly/react-core';
+
+// Documentation for FormGroup can be found at https://www.patternfly.org/components/labeled-input-group
+
+figma.connect(
+  FormGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=176-3526',
+  {
+    props: {
+      // boolean
+      helperText: figma.boolean('Helper text'),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      // Documentation for FormGroup can be found at https://www.patternfly.org/components/labeled-input-group
+      <FormGroup>{props.children}</FormGroup>
+    )
+  }
+);