diff --git a/packages/code-connect/components/DataList/DataList.figma.tsx b/packages/code-connect/components/DataList/DataList.figma.tsx new file mode 100644 index 00000000000..cceb9c61217 --- /dev/null +++ b/packages/code-connect/components/DataList/DataList.figma.tsx @@ -0,0 +1,23 @@ +import figma from '@figma/code-connect'; +import { DataList } from '@patternfly/react-core'; + +// TODO: DESIGN: Separate examples, rename files to match their react counterparts. +// Documentation for DataList can be found at https://www.patternfly.org/components/data-list + +figma.connect( + DataList, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-80542', + { + props: { + // enum + isCompact: figma.enum('Size', { Compact: true }), + + children: figma.children('*') + }, + example: (props) => ( + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/DataList/_1BuildItYourselfBasicRows.figma.tsx b/packages/code-connect/components/DataList/_1BuildItYourselfBasicRows.figma.tsx new file mode 100644 index 00000000000..6c8d4ecfe33 --- /dev/null +++ b/packages/code-connect/components/DataList/_1BuildItYourselfBasicRows.figma.tsx @@ -0,0 +1,18 @@ +import figma from '@figma/code-connect'; +import { DataListItem, DataListItemRow } from '@patternfly/react-core'; + +figma.connect( + DataListItemRow, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-69488&m=dev', + { + props: { + children: figma.children('*') + }, + example: (props) => ( + // aria-labelledby should point to an ID within the DataListItemRow/DataListItemCell + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/DataList/_1BuildItYourselfClickableRows.figma.tsx b/packages/code-connect/components/DataList/_1BuildItYourselfClickableRows.figma.tsx new file mode 100644 index 00000000000..f06513ba576 --- /dev/null +++ b/packages/code-connect/components/DataList/_1BuildItYourselfClickableRows.figma.tsx @@ -0,0 +1,20 @@ +import figma from '@figma/code-connect'; +import { DataListItem, DataListItemRow } from '@patternfly/react-core'; + +// Documentation for DataListItemRow can be found at https://www.patternfly.org/components/data-list + +figma.connect( + DataListItemRow, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-96947', + { + props: { + children: figma.children('*') + }, + example: (props) => ( + // aria-labelledby should point to an ID within the DataListItemRow/DataListItemCell + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/DataList/_1BuildItYourselfDraggableRows.figma.tsx b/packages/code-connect/components/DataList/_1BuildItYourselfDraggableRows.figma.tsx new file mode 100644 index 00000000000..f1c90db7194 --- /dev/null +++ b/packages/code-connect/components/DataList/_1BuildItYourselfDraggableRows.figma.tsx @@ -0,0 +1,26 @@ +import figma from '@figma/code-connect'; +import { DataList } from '@patternfly/react-core'; + +// Documentation for DataListItemRow can be found at https://www.patternfly.org/components/data-list +// This variant has been refactored to use the DragDropSort component. +// In order to use this variant, you must wrap the DataList component in a DragDropSort component. + +figma.connect( + DataList, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=19618-55289', + { + example: () => + 'Draggable DataList variant has been refactored to use the DragDropSort component. The design is the same, but the implementation is different. This component variant requires refactoring to work within the new context. For more information, see the example at https://www.patternfly.org/components/data-list/#draggable.' + // Code example: + // { + // setItems(newItems); + // }} + // variant="DataList" + // overlayProps={{ isCompact: true }} + // > + // + // + } +); diff --git a/packages/code-connect/components/DataList/_2BaseComponentsActionCell.figma.tsx b/packages/code-connect/components/DataList/_2BaseComponentsActionCell.figma.tsx new file mode 100644 index 00000000000..75c18d6e8bf --- /dev/null +++ b/packages/code-connect/components/DataList/_2BaseComponentsActionCell.figma.tsx @@ -0,0 +1,16 @@ +import figma from '@figma/code-connect'; +import { DataListAction } from '@patternfly/react-core'; + +// Documentation for DataListItemRow can be found at https://www.patternfly.org/components/data-list + +figma.connect( + DataListAction, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6596-33965', + { + example: () => ( + + 'Action' + + ) + } +); diff --git a/packages/code-connect/components/DataList/_2BaseComponentsContentCell.figma.tsx b/packages/code-connect/components/DataList/_2BaseComponentsContentCell.figma.tsx new file mode 100644 index 00000000000..a7d4356a90e --- /dev/null +++ b/packages/code-connect/components/DataList/_2BaseComponentsContentCell.figma.tsx @@ -0,0 +1,44 @@ +import figma from '@figma/code-connect'; +import { Icon, DataListCell, DataListItem, DataListItemCells, DataListItemRow } from '@patternfly/react-core'; + +// TODO: DESIGN: Either name layers uniquely or create a dataListCell component to house +// Documentation for DataList can be found at https://www.patternfly.org/components/data-list + +figma.connect( + DataListCell, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6596-33934', + { + props: { + showDescriptionText: figma.boolean('Show description text'), + + // enum + isIcon: figma.enum('Type', { + 'Filled - Plain text': true + }), + isFilled: figma.enum('Type', { + 'Filled - Plain text': true, + 'Filled - Link text': true + }), + + primaryContent: 'Main content', + secondaryContent: 'Second content block' + }, + example: (props) => ( + + + + + , + + {props.primaryContent} + , + {props.secondaryContent} + ]} + /> + + + ) + } +); diff --git a/packages/code-connect/components/DataList/_2BaseComponentsControlCell.figma.tsx b/packages/code-connect/components/DataList/_2BaseComponentsControlCell.figma.tsx new file mode 100644 index 00000000000..c709bd6ed9f --- /dev/null +++ b/packages/code-connect/components/DataList/_2BaseComponentsControlCell.figma.tsx @@ -0,0 +1,49 @@ +import figma from '@figma/code-connect'; +import { + // DataListAction, + DataListCheck, + DataListControl, + DataListToggle +} from '@patternfly/react-core'; + +// TODO: 2. Base Components/Control cell - These cells need unique names. Either create components for DataListCell, +// DataListToggle, DataListDragButton, DataListAction, DataListCheck +// These component specifics are unreachable unless separated into their own entities +// Documentation for DataListControl can be found at https://www.patternfly.org/components/data-list + +// const selectableCell = { +// +// return ( +// <> +// {props.isSelectable} +// {props.isExpandable} +// {props.isDraggable} +// +// {props.children} +// +// +// ); +// }; + +figma.connect( + DataListControl, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6596-34013', + { + props: { + isExpandable: figma.boolean('Row expansion', { + true: {}} isExpanded={false} id="toggle1" aria-controls="expand1" />, + false: undefined + }), + isSelectable: figma.boolean('Row select', { + true: , + false: undefined + }) + }, + example: (props) => ( + <> + {props.isSelectable} + {props.isExpandable} + + ) + } +); diff --git a/packages/code-connect/components/DescriptionList/DescriptionList.figma.tsx b/packages/code-connect/components/DescriptionList/DescriptionList.figma.tsx new file mode 100644 index 00000000000..4bca6969712 --- /dev/null +++ b/packages/code-connect/components/DescriptionList/DescriptionList.figma.tsx @@ -0,0 +1,27 @@ +import { DescriptionList } from '@patternfly/react-core'; +import figma from '@figma/code-connect'; + +// Documentation for DescriptionList can be found at https://www.patternfly.org/components/description-list + +figma.connect( + DescriptionList, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1121-3946', + { + props: { + // enum + isCompact: figma.enum('Spacing', { Compact: true }), + isFluid: figma.enum('Orientation', { 'Horizontal - Fluid': true }), + isHorizontal: figma.enum('Orientation', { + 'Horizontal - Fixed': true, + 'Horizontal - Fluid': true + }), + + children: figma.children('Description list item') + }, + example: (props) => ( + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/DescriptionList/DescriptionListInCard.figma.tsx b/packages/code-connect/components/DescriptionList/DescriptionListInCard.figma.tsx new file mode 100644 index 00000000000..7d20dcc5fc8 --- /dev/null +++ b/packages/code-connect/components/DescriptionList/DescriptionListInCard.figma.tsx @@ -0,0 +1,31 @@ +import figma from '@figma/code-connect'; +import { Card, DescriptionList, DescriptionListTerm, DescriptionListDescription } from '@patternfly/react-core'; + +// Note: DescriptionList displaySize prop is set by displaySize. +// Note: DescriptionList label and description are not dynamic. DescriptionList list label composition doesn't currently align with the React component. +// Note: DescriptionListLabel requires updates to the React component to support dynamic composition. +// TODO: DESIGN: Separate card and description list size properties. +// Documentation for DescriptionList can be found at https://www.patternfly.org/components/description-list-in-card + +figma.connect( + DescriptionList, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4421-28234&m=dev', + { + props: { + displaySize: figma.enum('Card size', { + Small: 'default', + Default: 'lg', + Large: '2xl' + }), + isHorizontal: figma.enum('Orientation', { Horizontal: true }) + }, + example: (props) => ( + + + Input label + Description list item + + + ) + } +); diff --git a/packages/code-connect/components/DescriptionList/DescriptionListItem.figma.tsx b/packages/code-connect/components/DescriptionList/DescriptionListItem.figma.tsx new file mode 100644 index 00000000000..57dacad9031 --- /dev/null +++ b/packages/code-connect/components/DescriptionList/DescriptionListItem.figma.tsx @@ -0,0 +1,22 @@ +import figma from '@figma/code-connect'; +import { DescriptionListGroup, DescriptionListDescription } from '@patternfly/react-core'; + +// Documentation for DescriptionListGroup can be found at https://www.patternfly.org/components/description-list + +figma.connect( + DescriptionListGroup, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1121-3571', + { + props: { + term: figma.children('Term label'), + description: figma.string('✏️ Content') + }, + + example: (props) => ( + + {props.term} + {props.description} + + ) + } +); diff --git a/packages/code-connect/components/DescriptionList/TermLabel.figma.tsx b/packages/code-connect/components/DescriptionList/TermLabel.figma.tsx new file mode 100644 index 00000000000..d5b4b140ec9 --- /dev/null +++ b/packages/code-connect/components/DescriptionList/TermLabel.figma.tsx @@ -0,0 +1,97 @@ +import { + DescriptionListTerm, + DescriptionListTermHelpText, + DescriptionListTermHelpTextButton, + Popover +} from '@patternfly/react-core'; +import figma from '@figma/code-connect'; +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; + +// TODO: DESIGN: Convert inline edit and help text to variants rather than booleans. +// Note: We don't currently have support for inline edit + help text + icon, therefore current Figma config is not supported. +// Documentation for DescriptionListTerm can be found at https://www.patternfly.org/components/description-list + +figma.connect( + DescriptionListTerm, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=36279-2532', + { + variant: { 'Inline edit toggle': true, 'Has help text': false }, + props: { + label: figma.string('✏️ Label') + }, + example: (props) => ( + +
+
+ +
+ +
+
+
+ + ) + } +); + +figma.connect( + DescriptionListTerm, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=36279-2532', + { + variant: { 'Has help text': true, 'Inline edit toggle': false }, + props: { + // string + label: figma.string('✏️ Label'), + + // enum + icon: figma.enum('Icon ⎆', { + true: , + false: undefined + }) + }, + example: (props) => ( + + {props.label}} bodyContent={
This is the help text
}> + + {props.icon} + {props.label} + + + + ) + } +); + +figma.connect( + DescriptionListTerm, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=36279-2532', + { + props: { + // string + label: figma.string('✏️ Label'), + + // enum + icon: figma.enum('Icon ⎆', { + true: , + false: undefined + }) + }, + example: (props) => {props.label} + } +); diff --git a/packages/code-connect/components/Divider/Divider.figma.tsx b/packages/code-connect/components/Divider/Divider.figma.tsx new file mode 100644 index 00000000000..18189ce4f65 --- /dev/null +++ b/packages/code-connect/components/Divider/Divider.figma.tsx @@ -0,0 +1,61 @@ +import figma from '@figma/code-connect'; +import { Divider, Flex, FlexItem } from '@patternfly/react-core'; + +// Documentation for Divider can be found at https://www.patternfly.org/components/divider + +figma.connect( + Divider, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2764-6708', + { + props: { + // TODO: Figma allows optional insets, but default to insetMd + inset: figma.boolean('With insets', { + true: { default: 'insetMd' }, + false: { default: 'insetNone' } + }), + // TODO: This is a good example of how properties in Figma and props in React would benefit from naming consistency + // React is looking for orientation, figma is defining orientation as 'Direction' + orientation: figma.enum('Direction', { + Horizontal: { default: undefined }, + Vertical: { default: 'vertical' } + }) + }, + example: (props) => ( + + first item + + + ) + } +); + +figma.connect( + Divider, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2764-6708', + { + props: { + // TODO: Figma allows optional insets, but default to insetMd + inset: figma.boolean('With insets', { + true: { default: 'insetMd' }, + false: { default: 'insetNone' } + }), + // TODO: This is a good example of how properties in Figma and props in React would benefit from naming consistency + // React is looking for orientation, figma is defining orientation as 'Direction' + orientation: figma.enum('Direction', { + Horizontal: { default: undefined }, + Vertical: { default: 'vertical' } + }) + }, + example: (props) => ( + + ) + } +); diff --git a/packages/code-connect/components/Drawer/Drawer.figma.tsx b/packages/code-connect/components/Drawer/Drawer.figma.tsx new file mode 100644 index 00000000000..d2b54f2ed8a --- /dev/null +++ b/packages/code-connect/components/Drawer/Drawer.figma.tsx @@ -0,0 +1,74 @@ +import figma from '@figma/code-connect'; +import { + Drawer, + DrawerActions, + DrawerCloseButton, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerPanelBody, + DrawerPanelContent, + DrawerPanelDescription +} from '@patternfly/react-core'; + +// TODO: DESIGN: Drawer is not using base components, rather it's using layers. Layers should be replaced with base components. +// Panel content is currently static. Once updated to components, it will be updated to be dynamic. +// Documentation for Drawer can be found at https://www.patternfly.org/components/drawer + +figma.connect( + Drawer, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8034-7676', + { + props: { + // boolean + isExpanded: true, + colorVariant: figma.enum('Background', { + Secondary: 'secondary', + Primary: undefined + }), + + // enum + isInline: figma.enum('Type', { Inline: true }), + position: figma.enum('Position', { + 'Left In Main Content Area': 'start', + 'Right - Full Page': undefined, + 'Left - Full Page': 'start', + 'Right Full Page': undefined, + 'Bottom Full Page': 'bottom', + 'Bottom In Main Content Area': 'bottom', + 'Right In Main Content Area': undefined + }) + + // Once updatedted to use child components, this will be used to render content. + // panelContent: figma.children(['Drawer Header', 'Drawer Tabs', 'Drawer Content']) + }, + example: (props) => ( + {}} + > + + + Drawer panel header + + {}} /> + + + Drawer panel description + Drawer panel body + + } + > + Drawer body content + + + ) + } +); diff --git a/packages/code-connect/components/Drawer/DrawerContent.figma.tsx b/packages/code-connect/components/Drawer/DrawerContent.figma.tsx new file mode 100644 index 00000000000..c9fe8b29897 --- /dev/null +++ b/packages/code-connect/components/Drawer/DrawerContent.figma.tsx @@ -0,0 +1,15 @@ +import figma from '@figma/code-connect'; +import { DrawerContent } from '@patternfly/react-core'; + +// Documentation for DrawerContent can be found at https://www.patternfly.org/components/drawer + +figma.connect( + DrawerContent, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=35627-47890', + { + props: { + panelContent: figma.children('*') + }, + example: (props) => + } +); diff --git a/packages/code-connect/components/DualListSelector/DualListHeader.figma.tsx b/packages/code-connect/components/DualListSelector/DualListHeader.figma.tsx new file mode 100644 index 00000000000..bfca4eb4ce8 --- /dev/null +++ b/packages/code-connect/components/DualListSelector/DualListHeader.figma.tsx @@ -0,0 +1,65 @@ +import figma from '@figma/code-connect'; +import { Button, ButtonVariant, DualListSelectorPane, SearchInput } from '@patternfly/react-core'; +import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; + +// Documentation for DualListHeader can be found at https://www.patternfly.org/components/dual-list-selector + +figma.connect( + DualListSelectorPane, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=21279-116172', + { + props: { + icon: , // placeholder icon + + // string + itemInformation: figma.string('Item information'), + title: figma.string('Header text'), + + // boolean + onSearch: figma.boolean('Has search bar', { + true: () => {}, + false: undefined + }), + isSearchable: figma.boolean('Has search bar', { + true: ( + {}} onClear={() => {}} aria-label={paneSearchLabel} /> + ), + false: undefined + }), + actions: figma.boolean('Has search bar', { + true: [ +