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) =>
{props.children}
+}); 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: