diff --git a/packages/code-connect/components/Button/BlockButton.figma.tsx b/packages/code-connect/components/Button/BlockButton.figma.tsx new file mode 100644 index 00000000000..065c8fef389 --- /dev/null +++ b/packages/code-connect/components/Button/BlockButton.figma.tsx @@ -0,0 +1,17 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; + +// Block Button +figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-800', { + props: { + buttonText: figma.string('Text'), + isClicked: figma.enum('State', { Clicked: true }), + isDisabled: figma.enum('State', { Disabled: true }), + iconPosition: figma.boolean('Icon at end', { true: 'end', false: undefined }) + }, + example: (props) => ( + + ) +}); diff --git a/packages/code-connect/components/Button/Button.figma.tsx b/packages/code-connect/components/Button/Button.figma.tsx new file mode 100644 index 00000000000..65c025fd173 --- /dev/null +++ b/packages/code-connect/components/Button/Button.figma.tsx @@ -0,0 +1,87 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; +import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; + +// Documentation for Button can be found at https://www.patternfly.org/components/button + +figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-678', { + props: { + // string + buttonText: figma.string('Text'), + + // boolean + icon: figma.boolean('Icon at start', { + true: , + false: undefined + }), + iconPosition: figma.boolean('Icon at end', { + true: 'end', + false: undefined + }), + countOptions: figma.boolean('Count', { + true: { + count: '00', + isRead: false, + className: 'custom-badge-unread' + } + }), + + // enum + isClicked: figma.enum('State', { Clicked: true }), + id: figma.enum('Type', { + Progress: 'loading-button', + 'Secondary progress': 'loading-button' + }), + isDanger: figma.enum('Type', { + Danger: true, + 'Secondary danger': true + }), + isDisabled: figma.enum('State', { Disabled: true }), + isExpanded: figma.enum('State', { Expanded: true }), + isLoading: figma.enum('State', { + Progress: { + loadingProps: { + spinnerAriaValueText: 'Spinner aria value text', + spinnerAriaLabelledBy: 'Spinner aria labelled by', + spinnerAriaLabel: 'Spinner aria label', + isLoading: true + }, + onClick: () => {} + }, + 'Secondary progress': { + loadingProps: { + spinnerAriaValueText: 'Spinner aria value text', + spinnerAriaLabelledBy: 'Spinner aria labelled by', + spinnerAriaLabel: 'Spinner aria label', + isLoading: true + }, + onClick: () => {} + } + }), + size: figma.enum('Size', { Small: 'sm' }), + variant: figma.enum('Type', { + Primary: 'primary', + Secondary: 'secondary', + Tertiary: 'tertiary', + Warning: 'warning', + 'Secondary danger': 'secondary', + 'Secondary progress': 'secondary' + }) + }, + example: (props) => ( + + ) +}); diff --git a/packages/code-connect/components/Button/CTAButton.figma.tsx b/packages/code-connect/components/Button/CTAButton.figma.tsx new file mode 100644 index 00000000000..ec94d6ee664 --- /dev/null +++ b/packages/code-connect/components/Button/CTAButton.figma.tsx @@ -0,0 +1,23 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; +import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; + +// CTA Button +figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-778', { + props: { + buttonText: figma.string('Text'), + icon: figma.enum('Type', { Inline: }), + iconPosition: figma.enum('Type', { Inline: 'end' }), + variant: figma.enum('Type', { + Primary: 'primary', + Secondary: 'secondary', + Tertiary: 'tertiary', + Link: 'link' + }) + }, + example: (props) => ( + + ) +}); diff --git a/packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx b/packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx new file mode 100644 index 00000000000..3b5914164d9 --- /dev/null +++ b/packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx @@ -0,0 +1,20 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; +import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; + +// Icon Button +figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-736', { + props: { + isClicked: figma.enum('State', { Clicked: true }), + isDisabled: figma.enum('State', { Disabled: true }), + noPadding: figma.enum('Type', { 'No padding': true }) + }, + example: (props) => ( + + ) + } +); diff --git a/packages/code-connect/components/Button/LinkButton.figma.tsx b/packages/code-connect/components/Button/LinkButton.figma.tsx new file mode 100644 index 00000000000..99f59e472b1 --- /dev/null +++ b/packages/code-connect/components/Button/LinkButton.figma.tsx @@ -0,0 +1,50 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; + +// Link Button +figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-745', { + props: { + countOptions: figma.enum('Type', { + 'Button with count': { + count: '00', + isRead: false + } + }), + isClicked: figma.enum('State', { Clicked: true }), + isDisabled: figma.enum('State', { Disabled: true }), + isDanger: figma.enum('Type', { Danger: true }), + icon: figma.boolean('Icon at start', { + true: figma.children('IconWrapper'), + false: undefined + }), + iconPosition: figma.boolean('Icon at end', { + true: 'end', + false: undefined + }), + isLoading: figma.enum('Type', { Progress: true }), + size: figma.enum('Size', { Small: 'sm' }), + variant: figma.enum('Type', { + Primary: 'primary', + Secondary: 'secondary', + Tertiary: 'tertiary', + Warning: 'warning', + 'Secondary danger': 'secondary', + 'Secondary progress': 'secondary' + }) + }, + example: (props) => ( + + ) +}); diff --git a/packages/code-connect/components/Button/StatefulButton.figma.tsx b/packages/code-connect/components/Button/StatefulButton.figma.tsx new file mode 100644 index 00000000000..df6f853e1e3 --- /dev/null +++ b/packages/code-connect/components/Button/StatefulButton.figma.tsx @@ -0,0 +1,28 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; + +// Stateful Button +figma.connect( + Button, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=5805-20130', + { + props: { + state: figma.enum('Type', { + Read: 'read', + Unread: 'unread', + 'Unread - Needs attention': 'attention' + }), + icon: figma.boolean('Icon', { + true: , + false: undefined + }), + count: figma.string('Value') + }, + example: (props) => ( + + ) + } +); diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 2537e14be2b..a366fb46c32 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/Button/*.tsx"], + "documentUrlSubstitutions": { + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components" + }, "paths": { "src/components": "src/components" }, @@ -30,4 +27,4 @@ } } } -} \ No newline at end of file +}