Skip to content

Commit beae7dd

Browse files
mattnoltingmattnolting
committed
feat(CC-expandable-section): separated expandable section variants
1 parent f0bf2bc commit beae7dd

File tree

3 files changed

+335
-0
lines changed

3 files changed

+335
-0
lines changed

‎packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import figma from '@figma/code-connect';
2+
import { ExpandableSection } from '@patternfly/react-core';
3+
4+
// // TODO: DESIGN: Create toggle component
5+
// // onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
6+
// // isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
7+
8+
// // Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
9+
10+
figma.connect(
11+
ExpandableSection,
12+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146',
13+
{
14+
props: {
15+
toggleText: figma.string('Toggle Text More')
16+
},
17+
example: (props) => (
18+
<ExpandableSection
19+
isExpanded={isExpanded}
20+
onToggle={() => {}}
21+
toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
22+
>
23+
This content is visible only when the component is expanded.
24+
</ExpandableSection>
25+
)
26+
}
27+
);
28+
29+
figma.connect(
30+
ExpandableSection,
31+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146',
32+
{
33+
variant: { State: 'Expanded' },
34+
props: {
35+
toggleText: figma.string('Toggle Text Less'),
36+
defaultContentSectionText: figma.string('Default Truncate Text')
37+
},
38+
example: (props) => (
39+
<ExpandableSection
40+
isExpanded={isExpanded}
41+
onToggle={() => {}}
42+
toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
43+
variant="truncate"
44+
>
45+
{props.defaultContentSectionText}
46+
</ExpandableSection>
47+
)
48+
}
49+
);

‎packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import figma from '@figma/code-connect';
2+
import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
3+
4+
// TODO: DESIGN: This component needs to be overhauled. Using the base component approach present in
5+
// other components would significantly reduce complexity.
6+
// TODO: DESIGN: Create toggle component
7+
// onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
8+
// isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
9+
10+
// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
11+
12+
const customToggleContent = `
13+
<div>
14+
<span>You can also use icons </span>
15+
<CheckCircleIcon />
16+
<span> or badges </span>
17+
<Badge isRead={true}>4</Badge>
18+
<span> !</span>
19+
</div>
20+
`;
21+
22+
figma.connect(
23+
ExpandableSection,
24+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
25+
{
26+
props: {
27+
toggleText: figma.string('Toggle Text More')
28+
},
29+
example: (props) => (
30+
<ExpandableSection
31+
onToggle={() => {}}
32+
toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
33+
>
34+
This content is visible only when the component is expanded.
35+
</ExpandableSection>
36+
)
37+
}
38+
);
39+
40+
figma.connect(
41+
ExpandableSection,
42+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
43+
{
44+
variant: { State: 'Expanded Basic' },
45+
props: {
46+
// enum
47+
expandedContentSectionText: figma.string('Expanded Text'),
48+
toggleText: figma.string('Toggle Text Less')
49+
},
50+
example: (props) => (
51+
<ExpandableSection
52+
isExpanded
53+
onToggle={() => {}}
54+
toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
55+
>
56+
{props.expandedContentSectionText}
57+
</ExpandableSection>
58+
)
59+
}
60+
);
61+
62+
figma.connect(
63+
ExpandableSection,
64+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
65+
{
66+
variant: { State: 'Expand Detached' },
67+
props: {
68+
// enum
69+
expandedContentSectionText: figma.string('Expanded Text'),
70+
toggleText: figma.string('Toggle Text Less'),
71+
toggleId: 'toggle-id',
72+
contentId: 'content-id'
73+
},
74+
example: (props) => (
75+
<Stack hasGutter>
76+
<StackItem>
77+
<ExpandableSection isExpanded={false} isDetached toggleId={props.toggleId} contentId={props.contentId}>
78+
{props.expandedContentSectionText}
79+
</ExpandableSection>
80+
</StackItem>
81+
<StackItem>
82+
<ExpandableSectionToggle
83+
onToggle={() => {}}
84+
toggleId={props.toggleId}
85+
contentId={props.contentId}
86+
direction="up"
87+
>
88+
{isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
89+
</ExpandableSectionToggle>
90+
</StackItem>
91+
</Stack>
92+
)
93+
}
94+
);
95+
96+
figma.connect(
97+
ExpandableSection,
98+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
99+
{
100+
variant: { State: 'Expanded Indent' },
101+
props: {
102+
// enum
103+
expandedContentSectionText: figma.string('Expanded Text'),
104+
toggleText: figma.string('Toggle Text Less'),
105+
toggleId: 'toggle-id',
106+
contentId: 'content-id'
107+
},
108+
example: (props) => (
109+
<ExpandableSection
110+
toggleText={isExpanded ? `${props.toggleText}` : 'Show less indented example content'}
111+
isExpanded={isExpanded}
112+
isIndented
113+
onToggle={() => {}}
114+
>
115+
{props.expandedContentSectionText}
116+
</ExpandableSection>
117+
)
118+
}
119+
);
120+
121+
figma.connect(
122+
ExpandableSection,
123+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
124+
{
125+
variant: { State: 'Default Custom Content' },
126+
example: () => (
127+
<ExpandableSection toggleContent={customToggleContent} isExpanded={isExpanded} onToggle={() => {}}>
128+
This content is visible only when the component is expanded.
129+
</ExpandableSection>
130+
)
131+
}
132+
);
133+
134+
figma.connect(
135+
ExpandableSection,
136+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
137+
{
138+
variant: { State: 'Expanded Custom Content' },
139+
example: () => (
140+
<ExpandableSection toggleContent={customToggleContent} isExpanded={isExpanded} onToggle={() => {}}>
141+
This content is visible only when the component is expanded.
142+
</ExpandableSection>
143+
)
144+
}
145+
);
146+
147+
figma.connect(
148+
ExpandableSection,
149+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
150+
{
151+
variant: { State: 'Expanded Custom with Component swap' },
152+
example: () => (
153+
<ExpandableSection toggleContent={customToggleContent} isExpanded={isExpanded} onToggle={() => {}}>
154+
This content is visible only when the component is expanded.
155+
</ExpandableSection>
156+
)
157+
}
158+
);

‎packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import figma from '@figma/code-connect';
2+
import { ExpandableSection } from '@patternfly/react-core';
3+
4+
const customToggleContent = `
5+
<div>
6+
<span>You can also use icons </span>
7+
<CheckCircleIcon />
8+
<span> or badges </span>
9+
<Badge isRead={true}>4</Badge>
10+
<span> !</span>
11+
</div>
12+
`;
13+
14+
figma.connect(
15+
ExpandableSection,
16+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
17+
{
18+
props: {
19+
toggleText: figma.string('Toggle Text More')
20+
},
21+
example: (props) => (
22+
<ExpandableSection
23+
isExpanded={isExpanded}
24+
onToggle={() => {}}
25+
toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
26+
>
27+
This content is visible only when the component is expanded.
28+
</ExpandableSection>
29+
)
30+
}
31+
);
32+
33+
figma.connect(
34+
ExpandableSection,
35+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
36+
{
37+
variant: { State: 'Expanded' },
38+
props: {
39+
toggleText: figma.string('Toggle Text Less'),
40+
expandedContentSectionText: figma.string('Expanded Text')
41+
},
42+
example: (props) => (
43+
<ExpandableSection
44+
isExpanded={isExpanded}
45+
onToggle={() => {}}
46+
toggleText={isExpanded ? `${props.toggleText}` : 'Show more basic example content'}
47+
>
48+
{props.expandedContentSectionText}
49+
</ExpandableSection>
50+
)
51+
}
52+
);
53+
54+
figma.connect(
55+
ExpandableSection,
56+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
57+
{
58+
variant: { State: 'Expand Uncontrolled' },
59+
props: {
60+
toggleText: figma.string('Toggle Text More'),
61+
expandedContentSectionText: figma.string('Expanded Text')
62+
},
63+
example: (props) => (
64+
<ExpandableSection
65+
isExpanded={isExpanded}
66+
onToggle={() => {}}
67+
toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
68+
>
69+
{props.expandedContentSectionText}
70+
</ExpandableSection>
71+
)
72+
}
73+
);
74+
75+
figma.connect(
76+
ExpandableSection,
77+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
78+
{
79+
variant: { State: 'Expanded Indent' },
80+
props: {
81+
toggleText: figma.string('Toggle Text More'),
82+
expandedContentSectionText: figma.string('Expanded Text')
83+
},
84+
example: (props) => (
85+
<ExpandableSection
86+
isExpanded={isExpanded}
87+
onToggle={() => {}}
88+
toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
89+
>
90+
{props.expandedContentSectionText}
91+
</ExpandableSection>
92+
)
93+
}
94+
);
95+
96+
figma.connect(
97+
ExpandableSection,
98+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
99+
{
100+
variant: { State: 'Default Custom Content' },
101+
example: () => (
102+
<ExpandableSection toggleContent={customToggleContent} isExpanded={false} onToggle={() => {}}>
103+
This content is visible only when the component is expanded.
104+
</ExpandableSection>
105+
)
106+
}
107+
);
108+
109+
figma.connect(
110+
ExpandableSection,
111+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
112+
{
113+
variant: { State: 'Expanded Custom Content' },
114+
props: {
115+
toggleText: figma.string('Toggle Text More'),
116+
expandedContentSectionText: figma.string('Expanded Text')
117+
},
118+
example: (props) => (
119+
<ExpandableSection
120+
isExpanded={isExpanded}
121+
onToggle={() => {}}
122+
toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
123+
>
124+
{props.expandedContentSectionText}
125+
</ExpandableSection>
126+
)
127+
}
128+
);

0 commit comments

Comments
 (0)