diff --git a/.gitignore b/.gitignore
index 07168936c32..1ea1e95aad4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ lerna-debug.log
.history
.vscode
.yo-rc.json
+.env
# IDE - VSCode
.vscode
diff --git a/packages/code-connect/components/Form/BasicFormDemo.figma.tsx b/packages/code-connect/components/Form/BasicFormDemo.figma.tsx
new file mode 100644
index 00000000000..92840db6884
--- /dev/null
+++ b/packages/code-connect/components/Form/BasicFormDemo.figma.tsx
@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect';
+import { Form } from '@patternfly/react-core';
+
+// Documentation for Form can be found at https://www.patternfly.org/components/form
+
+figma.connect(Form, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1577-2965', {
+ props: {
+ // topAlert: figma.boolean('Top alert'),
+ children: figma.children('*')
+ },
+ example: (props) =>
+});
diff --git a/packages/code-connect/components/Form/BasicSearchInput.figma.tsx b/packages/code-connect/components/Form/BasicSearchInput.figma.tsx
new file mode 100644
index 00000000000..262832e6e90
--- /dev/null
+++ b/packages/code-connect/components/Form/BasicSearchInput.figma.tsx
@@ -0,0 +1,52 @@
+import figma from '@figma/code-connect';
+import { SearchInput } from '@patternfly/react-core';
+
+// Documentation for SearchInput can be found at https://www.patternfly.org/components/search-input
+
+figma.connect(
+ SearchInput,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=8065-140137',
+ {
+ props: {
+ placeholder: figma.string('✏️ Placeholder text'),
+ value: figma.string('✏️ Searched text'),
+ resultsCount: figma.boolean('Show count', {
+ true: '3',
+ false: undefined
+ }),
+ showNavigableOptions: figma.boolean('Show navigable options', {
+ true: {
+ isNextNavigationButtonDisabled: `currentResult === 3`,
+ isPreviousNavigationButtonDisabled: `currentResult === 1`,
+ resultsCount: `${currentResult} / ${resultsCount}`,
+ onNextClick: () => {},
+ onPreviousClick: () => {}
+ },
+ false: undefined
+ }),
+ submitSearchButtonLabel: figma.boolean('Show submit button', {
+ true: {
+ label: 'Search',
+ onSearch: () => {}
+ },
+ false: undefined
+ })
+ },
+ example: (props) => (
+ {}}
+ onClear={() => {}}
+ onNextClick={props.showNavigableOptions.onNextClick}
+ onPreviousClick={props.showNavigableOptions.onPreviousClick}
+ onSearch={props.submitSearchButtonLabel.onSearch}
+ placeholder={props.placeholder}
+ resultsCount={props.showNavigableOptions.resultsCount}
+ submitSearchButtonLabel={props.submitSearchButtonLabel.label}
+ value={props.value}
+ />
+ )
+ }
+);
diff --git a/packages/code-connect/components/Form/Checkbox.figma.tsx b/packages/code-connect/components/Form/Checkbox.figma.tsx
new file mode 100644
index 00000000000..17daf28631b
--- /dev/null
+++ b/packages/code-connect/components/Form/Checkbox.figma.tsx
@@ -0,0 +1,41 @@
+import figma from '@figma/code-connect';
+import { Checkbox } from '@patternfly/react-core';
+
+// Documentation for CheckboxInput can be found at https://www.patternfly.org/components/form/checkbox
+
+figma.connect(
+ Checkbox,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=157-3078',
+ {
+ props: {
+ ariaLabel: figma.enum('Type', {
+ Standalone: figma.string('Toggle label')
+ }),
+ label: figma.enum('Type', {
+ 'With label': figma.string('Toggle label')
+ }),
+ labelPosition: figma.enum('Label placement', {
+ End: 'end',
+ Reversed: 'start'
+ }),
+ isDisabled: figma.enum('State', {
+ Disabled: true
+ }),
+ description: figma.boolean('Description', {
+ true: 'Description text',
+ false: undefined
+ })
+ },
+ example: (props) => (
+
+ )
+ }
+);
diff --git a/packages/code-connect/components/Form/CheckboxGroup.figma.tsx b/packages/code-connect/components/Form/CheckboxGroup.figma.tsx
new file mode 100644
index 00000000000..9c3a45793e8
--- /dev/null
+++ b/packages/code-connect/components/Form/CheckboxGroup.figma.tsx
@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect';
+import { FormGroup } from '@patternfly/react-core';
+
+// Documentation for CheckboxGroup can be found at https://www.patternfly.org/components/form
+
+figma.connect(
+ FormGroup,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1577-4455',
+ {
+ props: {
+ label: figma.boolean('Label', {
+ true: 'Input label',
+ false: undefined
+ }),
+ children: figma.children('*')
+ },
+ example: (props) => {props.children}
+ }
+);
diff --git a/packages/code-connect/components/Form/FieldGroup.figma.tsx b/packages/code-connect/components/Form/FieldGroup.figma.tsx
new file mode 100644
index 00000000000..25d3364d6c7
--- /dev/null
+++ b/packages/code-connect/components/Form/FieldGroup.figma.tsx
@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect';
+import { FormGroup } from '@patternfly/react-core';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+ FormGroup,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=17114-21566&m=dev',
+ {
+ props: {
+ nestedOpen: figma.boolean('Nested - Open'),
+ nestedNonExpandable: figma.boolean('Nested - Non expandable'),
+ nestedClosed: figma.boolean('Nested - Closed'),
+ children: figma.children('*')
+ },
+ example: (props) => {props.children}
+ }
+);
diff --git a/packages/code-connect/components/Form/HelperText.figma.tsx b/packages/code-connect/components/Form/HelperText.figma.tsx
new file mode 100644
index 00000000000..aa807fa0179
--- /dev/null
+++ b/packages/code-connect/components/Form/HelperText.figma.tsx
@@ -0,0 +1,44 @@
+import figma from '@figma/code-connect';
+import { FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+
+// Documentation for HelperText can be found at https://www.patternfly.org/components/form
+
+figma.connect(
+ HelperText,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=151-1670',
+ {
+ props: {
+ variant: figma.enum('Type', {
+ Defaut: 'default',
+ Indeterminate: 'indeterminate',
+ Warning: 'warning',
+ Success: 'success',
+ Error: 'error'
+ }),
+ icon: figma.boolean('Icon', {
+ true: figma.enum('Type', {
+ Defaut: ,
+ Indeterminate: ,
+ Warning: ,
+ Success: ,
+ Error:
+ }),
+ false: undefined
+ }),
+ helperText: figma.string('Helper text')
+ },
+ example: (props) => (
+
+
+
+ {props.helperText}
+
+
+
+ )
+ }
+);
diff --git a/packages/code-connect/components/Form/InputField.figma.tsx b/packages/code-connect/components/Form/InputField.figma.tsx
new file mode 100644
index 00000000000..e4afc5bc94f
--- /dev/null
+++ b/packages/code-connect/components/Form/InputField.figma.tsx
@@ -0,0 +1,68 @@
+import figma from '@figma/code-connect';
+import { Button, FormGroup, FormGroupLabelHelp, Popover } from '@patternfly/react-core';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+
+// Documentation for InputField can be found at https://www.patternfly.org/components/form
+
+figma.connect(
+ FormGroup,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=157-788&m=dev',
+ {
+ props: {
+ // boolean
+ label: figma.boolean('Label', {
+ true: 'Input field',
+ false: undefined
+ }),
+ minusIcon: figma.boolean('Minus icon', {
+ true: } variant="plain" hasNoPadding aria-label="Delete field" />,
+ false: undefined
+ }),
+ textInput: figma.children('Text inputs'),
+ helperText: figma.children('HelperText')
+ },
+ example: (props) => (
+
+ The{' '}
+
+ name
+ {' '}
+ of a{' '}
+
+ Person
+
+
+ }
+ bodyContent={
+
+ }
+ >
+
+
+ }
+ isRequired
+ fieldId="simple-form-name-01"
+ >
+ {props.textInput}
+ {props.minusIcon}
+ {props.helperText}
+
+ )
+ }
+);
diff --git a/packages/code-connect/components/Form/InputGroup.figma.tsx b/packages/code-connect/components/Form/InputGroup.figma.tsx
new file mode 100644
index 00000000000..479ab92677f
--- /dev/null
+++ b/packages/code-connect/components/Form/InputGroup.figma.tsx
@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { InputGroup } from '@patternfly/react-core';
+
+// Documentation for InputGroup can be found at https://www.patternfly.org/components/input-group
+
+figma.connect(
+ InputGroup,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=12700-4200',
+ {
+ props: {
+ children: figma.children('Input Group Items')
+ },
+ example: (props) => {props.children}
+ }
+);
diff --git a/packages/code-connect/components/Form/InputGroupItems.figma.tsx b/packages/code-connect/components/Form/InputGroupItems.figma.tsx
new file mode 100644
index 00000000000..6d2d27ff0f9
--- /dev/null
+++ b/packages/code-connect/components/Form/InputGroupItems.figma.tsx
@@ -0,0 +1,49 @@
+import figma from '@figma/code-connect';
+import { InputGroupItem, InputGroupText, TextInput } from '@patternfly/react-core';
+import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
+// Documentation for InputGroupItem can be found at https://www.patternfly.org/components/input-group
+
+figma.connect(
+ InputGroupItem,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=176-2806',
+ {
+ props: {
+ type: figma.enum('Type', {
+ Icon: (
+
+
+
+ ),
+ Text: (
+
+ ),
+ Dropdown: figma.children('*'),
+ Button: figma.children('*')
+ }),
+ state: figma.enum('State', {
+ Disabled: 'disabled',
+ ReadOnly: 'readOnly',
+ Success: 'success',
+ Warning: 'warning',
+ Error: 'error',
+ Selected: 'selected'
+ }),
+ textInput: figma.enum('Type', {
+ Text: (
+
+ )
+ })
+ },
+ example: (props) => {props.type}
+ }
+);
diff --git a/packages/code-connect/components/Form/LabeledInputGroup.figma.tsx b/packages/code-connect/components/Form/LabeledInputGroup.figma.tsx
new file mode 100644
index 00000000000..a966259636f
--- /dev/null
+++ b/packages/code-connect/components/Form/LabeledInputGroup.figma.tsx
@@ -0,0 +1,8 @@
+import figma from '@figma/code-connect';
+
+figma.connect('https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=176-3526', {
+ props: {
+ children: figma.children('*')
+ },
+ example: (props) => <>{props.children}>
+});
diff --git a/packages/code-connect/components/Form/LabeledNumberInput.figma.tsx b/packages/code-connect/components/Form/LabeledNumberInput.figma.tsx
new file mode 100644
index 00000000000..c02153316d2
--- /dev/null
+++ b/packages/code-connect/components/Form/LabeledNumberInput.figma.tsx
@@ -0,0 +1,8 @@
+import figma from '@figma/code-connect';
+
+figma.connect('https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=176-4200&m=dev', {
+ props: {
+ children: figma.children('*')
+ },
+ example: (props) => <>{props.children}>
+});
diff --git a/packages/code-connect/components/Form/NumberInputField.figma.tsx b/packages/code-connect/components/Form/NumberInputField.figma.tsx
new file mode 100644
index 00000000000..18facecae2e
--- /dev/null
+++ b/packages/code-connect/components/Form/NumberInputField.figma.tsx
@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+import { NumberInput } from '@patternfly/react-core';
+
+// Documentation for NumberInput can be found at https://www.patternfly.org/components/number-input
+
+figma.connect(
+ NumberInput,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=176-3706',
+ {
+ props: {
+ value: '90',
+
+ // boolean
+ unitPosition: figma.boolean('Unit at end', {
+ true: 'before',
+ false: undefined
+ }),
+
+ // enum
+ isDisabled: figma.enum('Status', { Disabled: true }),
+ unit: figma.enum('Type', { 'With unit': '%' }),
+ validated: figma.enum('Status', {
+ Warning: 'warning',
+ Error: 'error',
+ Success: 'success'
+ })
+ },
+ example: (props) => (
+ {}}
+ onPlus={() => {}}
+ onChange={() => {}}
+ plusBtnAriaLabel="plus"
+ unit={props.unit}
+ unitPosition={props.unitPosition}
+ validated={props.validated}
+ value={props.value}
+ />
+ )
+ }
+);
diff --git a/packages/code-connect/components/Form/RadioButton.figma.tsx b/packages/code-connect/components/Form/RadioButton.figma.tsx
new file mode 100644
index 00000000000..141debd38e2
--- /dev/null
+++ b/packages/code-connect/components/Form/RadioButton.figma.tsx
@@ -0,0 +1,45 @@
+import figma from '@figma/code-connect';
+import { Radio } from '@patternfly/react-core';
+
+// Documentation for Radio can be found at https://www.patternfly.org/components/form
+
+figma.connect(Radio, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=157-3354', {
+ props: {
+ ariaLabel: figma.enum('Type', {
+ Standalone: figma.string('Toggle label')
+ }),
+ label: figma.enum('Type', {
+ 'With label': figma.string('Toggle label')
+ }),
+ labelPosition: figma.enum('Label placement', {
+ End: 'end',
+ Reversed: 'start'
+ }),
+ isDisabled: figma.enum('State', {
+ Disabled: true
+ }),
+ description: figma.boolean('Description', {
+ true: 'Description text',
+ false: undefined
+ }),
+ check: figma.nestedProps('Checkbox Input', {
+ isChecked: figma.enum('State', {
+ Checked: true,
+ 'Checked disabled': true,
+ Mixed: 'null',
+ 'Mixed disabled': 'null'
+ })
+ })
+ },
+ example: (props) => (
+
+ )
+});
diff --git a/packages/code-connect/components/Form/RadioButtonGroup.figma.tsx b/packages/code-connect/components/Form/RadioButtonGroup.figma.tsx
new file mode 100644
index 00000000000..73500614a5c
--- /dev/null
+++ b/packages/code-connect/components/Form/RadioButtonGroup.figma.tsx
@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect';
+import { FormGroup } from '@patternfly/react-core';
+
+// Documentation for RadioButtonGroup can be found at https://www.patternfly.org/components/form
+
+figma.connect(
+ FormGroup,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1577-4497&m=dev',
+ {
+ props: {
+ label: figma.boolean('Label', {
+ true: 'Input label',
+ false: undefined
+ }),
+ children: figma.children('*')
+ },
+ example: (props) => {props.children}
+ }
+);
diff --git a/packages/code-connect/components/Form/Switch.figma.tsx b/packages/code-connect/components/Form/Switch.figma.tsx
new file mode 100644
index 00000000000..14dbb5df709
--- /dev/null
+++ b/packages/code-connect/components/Form/Switch.figma.tsx
@@ -0,0 +1,46 @@
+import figma from '@figma/code-connect';
+import { Switch } from '@patternfly/react-core';
+
+// Documentation for Switch can be found at https://www.patternfly.org/components/form/switch
+
+figma.connect(
+ Switch,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/9HiAevBhEc2iYY9rxZtovA/PatternFly-6--Components?node-id=157-3431&m=dev',
+ {
+ props: {
+ ariaLabel: figma.enum('Type', {
+ 'With label': 'Togglable option',
+ 'Without label': 'Togglable option for no visible label'
+ }),
+ hasCheckIcon: figma.nestedProps('Switches', {
+ true: figma.boolean('Show check')
+ }),
+ isChecked: figma.enum('State', {
+ On: true,
+ Off: false
+ }),
+ isDisabled: figma.enum('State', {
+ Disabled: true
+ }),
+ isReversed: figma.enum('Label placement', {
+ Reversed: true
+ }),
+ label: figma.enum('Type', {
+ 'With label': 'Togglable option',
+ 'Without label': 'Togglable option for no visible label'
+ })
+ },
+ example: (props) => (
+ {}}
+ />
+ )
+ }
+);
diff --git a/packages/code-connect/components/Form/TextInputs.figma.tsx b/packages/code-connect/components/Form/TextInputs.figma.tsx
new file mode 100644
index 00000000000..e3688a177a2
--- /dev/null
+++ b/packages/code-connect/components/Form/TextInputs.figma.tsx
@@ -0,0 +1,57 @@
+import figma from '@figma/code-connect';
+import { TextInput } from '@patternfly/react-core';
+import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+
+// Documentation for TextInputs can be found at https://www.patternfly.org/components/form
+
+figma.connect(
+ TextInput,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=154-71',
+ {
+ props: {
+ // string
+ placeholder: figma.string('Input text'),
+
+ // boolean
+ customIcon: figma.boolean('Custom icon', {
+ true: ,
+ false: undefined
+ }),
+
+ // enum
+ isDisabled: figma.enum('State', { Disabled: true }),
+ isRequired: figma.enum('State', { Error: true }),
+ readOnlyVariant: figma.enum('State', {
+ 'Read only': 'default',
+ 'Read only plain': 'plain'
+ }),
+ state: figma.enum('State', {
+ Active: 'active',
+ Complete: 'complete',
+ Success: 'success',
+ Warning: 'warning',
+ Error: 'error'
+ }),
+ type: figma.enum('Type', {
+ 'Text box': 'input',
+ 'Text area': 'textarea'
+ }),
+
+ children: figma.children([''])
+ },
+ example: (props) => (
+ {}}
+ placeholder={props.placeholder}
+ readOnlyVariant={props.readOnlyVariant}
+ type={props.type}
+ validated={props.state}
+ value="Value"
+ />
+ )
+ }
+);
diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json
index 2537e14be2b..2d1f5681f6f 100644
--- a/packages/code-connect/figma.config.json
+++ b/packages/code-connect/figma.config.json
@@ -1,13 +1,10 @@
{
"codeConnect": {
"parser": "react",
- "include": [
- "components/DatePicker/*.tsx",
- "components/EmptyState/*.tsx",
- "components/FileUpload/*.tsx",
- "components/Hint/*.tsx",
- "components/InlineEdit/*.tsx"
- ],
+ "include": ["components/Form/*.tsx"],
+ "documentUrlSubstitutions": {
+ "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/9HiAevBhEc2iYY9rxZtovA/PatternFly-6--Components"
+ },
"paths": {
"src/components": "src/components"
},
@@ -30,4 +27,4 @@
}
}
}
-}
\ No newline at end of file
+}