|
1 | 1 | import figma from '@figma/code-connect'; |
2 | | -import { DescriptionListGroup, DescriptionListDescription } from '@patternfly/react-core'; |
| 2 | +import { |
| 3 | + DescriptionListGroup, |
| 4 | + DescriptionListTerm, |
| 5 | + DescriptionListTermHelpText, |
| 6 | + DescriptionListDescription, |
| 7 | + Popover, |
| 8 | + DescriptionListTermHelpTextButton |
| 9 | +} from '@patternfly/react-core'; |
| 10 | + |
| 11 | +// Documentation for DescriptionListGroup can be found at https://www.patternfly.org/components/description-list |
| 12 | +/* |
| 13 | + Note: I added a boolean prop to Description List Term to serve as an example for how to properly use booleans and render alternative component configurations. |
| 14 | + This provides several advantages: |
| 15 | + * Unlike variants, we can use booleans to render different component configurations without having to create more variants within the Figma component. |
| 16 | + * Reduces maintainance overhead. |
| 17 | + * Allows for more flexibility in the component's usage. |
| 18 | + * Reduces overall file size and, as a result, improves the overall performance of the component. |
| 19 | +
|
| 20 | + This approach is documented here: <include link> |
| 21 | +*/ |
| 22 | +figma.connect( |
| 23 | + DescriptionListTerm, |
| 24 | + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=36279-2532', |
| 25 | + { |
| 26 | + props: { |
| 27 | + label: figma.string('✏️ Label') |
| 28 | + }, |
| 29 | + example: (props) => <DescriptionListTerm>{props.label}</DescriptionListTerm> |
| 30 | + } |
| 31 | +); |
| 32 | + |
| 33 | +figma.connect( |
| 34 | + DescriptionListTermHelpText, |
| 35 | + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=36279-2532', |
| 36 | + { |
| 37 | + variant: { 'Has help text': true }, |
| 38 | + props: { |
| 39 | + label: figma.string('✏️ Label') |
| 40 | + }, |
| 41 | + example: (props) => ( |
| 42 | + <DescriptionListTermHelpText> |
| 43 | + <Popover headerContent={<div>{props.label}</div>} bodyContent={<div>This is the help text</div>}> |
| 44 | + <DescriptionListTermHelpTextButton>{props.label}</DescriptionListTermHelpTextButton> |
| 45 | + </Popover> |
| 46 | + </DescriptionListTermHelpText> |
| 47 | + ) |
| 48 | + } |
| 49 | +); |
3 | 50 |
|
4 | 51 | figma.connect( |
5 | 52 | DescriptionListGroup, |
6 | 53 | 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1121-3571', |
7 | 54 | { |
8 | 55 | props: { |
9 | | - // string |
10 | | - content: figma.string('✏️ Content'), |
11 | | - |
12 | | - children: figma.children('Term label') |
| 56 | + label: figma.children('Term label') |
13 | 57 | }, |
14 | 58 |
|
15 | 59 | example: (props) => ( |
16 | 60 | <DescriptionListGroup> |
17 | | - {props.children} |
18 | | - <DescriptionListDescription>{props.content}</DescriptionListDescription> |
| 61 | + {props.label} |
| 62 | + <DescriptionListDescription>Description list description</DescriptionListDescription> |
19 | 63 | </DescriptionListGroup> |
20 | 64 | ) |
21 | 65 | } |
|
0 commit comments