Skip to content

Commit fb4a2cc

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-5): added batch 5 components
1 parent e62933d commit fb4a2cc

10 files changed

Lines changed: 559 additions & 0 deletions

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import figma from '@figma/code-connect';
2+
import { EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core';
3+
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
4+
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
5+
import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
6+
import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
7+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
8+
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
9+
10+
// TODO: FIGMA: Add Empty state footer
11+
// TODO: FIGMA: Consolodate empty state examples
12+
13+
figma.connect(
14+
EmptyState,
15+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7896-37441',
16+
{
17+
props: {
18+
// string
19+
title: figma.string('Header text'),
20+
body: figma.string('Body text'),
21+
22+
// enum
23+
variant: figma.enum('Size', {
24+
Basic: undefined,
25+
'Extra small': 'xs',
26+
Small: 'sm',
27+
Large: 'lg',
28+
'Extra large': 'xl'
29+
}),
30+
// "custom" | "warning" | "success" | "danger" | "info"
31+
status: figma.enum('Type', {
32+
Basic: {
33+
icon: CubesIcon,
34+
type: undefined
35+
},
36+
Create: {
37+
icon: PlusCircleIcon,
38+
type: 'custom'
39+
},
40+
'No results': {
41+
icon: SearchIcon,
42+
type: 'custom'
43+
},
44+
Success: {
45+
icon: CheckCircleIcon,
46+
type: 'success'
47+
},
48+
Error: {
49+
icon: ExclamationCircleIcon,
50+
type: 'danger'
51+
},
52+
Permissions: {
53+
icon: LockIcon,
54+
type: undefined
55+
},
56+
Danger: {
57+
icon: Spinner,
58+
type: undefined
59+
}
60+
}),
61+
isLoading: figma.enum('Type', { Loading: 'Spinner' })
62+
},
63+
example: (props) => (
64+
// Documentation for EmptyState can be found at https://www.patternfly.org/components/empty-state
65+
<EmptyState
66+
status={props.status.type}
67+
titleText={props.title}
68+
variant={props.variant}
69+
headingLevel="h4"
70+
icon={props.status.icon}
71+
>
72+
<EmptyStateBody>{props.body}</EmptyStateBody>
73+
{/* <EmptyStateFooter>{props.children}</EmptyStateFooter> */}
74+
</EmptyState>
75+
)
76+
}
77+
);

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import figma from '@figma/code-connect';
2+
import { ExpandableSection } from '@patternfly/react-core';
3+
4+
figma.connect(
5+
ExpandableSection,
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146',
7+
{
8+
props: {
9+
// string
10+
toggleTextCollapsed: figma.enum('State', { Collapsed: figma.string('Toggle Text More') }),
11+
toggleTextExpanded: figma.enum('State', { Expanded: figma.string('Toggle Text Less') }),
12+
13+
// boolean
14+
isExpanded: figma.enum('State', { Expanded: true }),
15+
propsExpandedContentSectionText: figma.enum('State', {
16+
Default: figma.string('Default Truncate Text'),
17+
Expanded: figma.string('Expanded Truncate Text')
18+
}),
19+
20+
// enum
21+
expandedContentSectionText: figma.enum('State', { 'Expanded Truncate': true }),
22+
23+
children: figma.children('*')
24+
},
25+
example: (props) => (
26+
// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
27+
<ExpandableSection
28+
toggleTextCollapsed={props.toggleTextCollapsed}
29+
toggleTextExpanded={props.toggleTextExpanded}
30+
onToggle={() => {}}
31+
variant="truncate"
32+
isExpanded={props.isExpanded}
33+
toggleContent={props.children}
34+
>
35+
{props.expandedContentSectionText}
36+
</ExpandableSection>
37+
)
38+
}
39+
);

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import figma from '@figma/code-connect';
2+
import { ExpandableSection } from '@patternfly/react-core';
3+
4+
// TODO: FIGMA: Create toggle component
5+
const toggleContent = `
6+
<div>
7+
<span>You can also use icons </span>
8+
<CheckCircleIcon />
9+
<span> or badges </span>
10+
<Badge isRead={true}>4</Badge>
11+
<span> !</span>
12+
</div>
13+
`;
14+
15+
figma.connect(
16+
ExpandableSection,
17+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
18+
{
19+
props: {
20+
// enum
21+
isIndented: figma.enum('State', { 'Expanded Indent': true }),
22+
isDetached: figma.enum('State', { 'Expand Detached': true }),
23+
isExpanded: figma.enum('State', {
24+
'Expanded Basic': true,
25+
'Expand Detached': true,
26+
'Expanded Indent': true,
27+
'Expanded Custom Content': true,
28+
'Expanded Custom with Component swap': true
29+
}),
30+
toggleContent: figma.enum('State', {
31+
'Default Custom Content': toggleContent,
32+
'Expanded Custom Content': toggleContent,
33+
'Expanded Custom with Component swap': toggleContent
34+
}),
35+
toggleTextExpanded: figma.enum('State', {
36+
'Expanded Basic': figma.string('Toggle Text Less'),
37+
'Expand Detached': figma.string('Toggle Text Less'),
38+
'Expanded Indent': figma.string('Toggle Text Less'),
39+
'Expanded Custom Content': figma.string('Toggle Text Less'),
40+
'Expanded Custom with Component swap': figma.string('Toggle Text Less')
41+
}),
42+
expandedContentSectionText: figma.enum('State', {
43+
'Expanded Basic': figma.string('Expanded Text'),
44+
'Expand Detached': figma.string('Expanded Text'),
45+
'Expanded Indent': figma.string('Expanded Text'),
46+
'Expanded Custom Content': figma.string('Expanded Text'),
47+
'Expanded Custom with Component swap': figma.string('Expanded Text')
48+
}),
49+
toggleTextCollapsed: figma.enum('State', {
50+
Default: figma.string('Toggle Text More'),
51+
Hover: figma.string('Toggle Text More'),
52+
'Default Custom Content': figma.string('Toggle Text More')
53+
})
54+
},
55+
example: (props) => (
56+
// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
57+
<ExpandableSection
58+
isExpanded={props.isExpanded}
59+
isIndented={props.isIndented}
60+
toggleContent={props.toggleContent}
61+
toggleTextCollapsed={props.toggleTextCollapsed}
62+
toggleTextExpanded={props.toggleTextExpanded}
63+
variant="truncate"
64+
>
65+
{props.expandedContentSectionText}
66+
</ExpandableSection>
67+
)
68+
}
69+
);

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import figma from '@figma/code-connect';
2+
import { ExpandableSection } from '@patternfly/react-core';
3+
4+
figma.connect(
5+
ExpandableSection,
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
7+
{
8+
props: {
9+
// string
10+
expandedContentSectionText: figma.string('Expanded Text'),
11+
toggleTextExpanded: figma.string('Toggle Text Less'),
12+
toggleTextCollapsed: figma.string('Toggle Text More'),
13+
14+
// boolean
15+
isIndented: figma.enum('State', {
16+
'Expanded Indent': true
17+
}),
18+
isExpanded: figma.enum('State', {
19+
Expanded: true,
20+
'Expand Uncontrolled': true,
21+
'Expanded Indent': true,
22+
'Expanded Custom Content': true
23+
}),
24+
25+
children: figma.children('*')
26+
},
27+
example: (props) => (
28+
// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
29+
<ExpandableSection
30+
isExpanded={props.isExpanded}
31+
isIndented={props.isIndented}
32+
toggleTextCollapsed={props.toggleTextCollapsed}
33+
toggleTextExpanded={props.toggleTextExpanded}
34+
variant="truncate"
35+
toggleContent={props.children}
36+
>
37+
{props.expandedContentSectionText}
38+
</ExpandableSection>
39+
)
40+
}
41+
);

‎packages/code-connect/components/FileUpload/MultipleFileUpload.figma.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import figma from '@figma/code-connect';
2+
import {
3+
FileUpload,
4+
MultipleFileUpload,
5+
MultipleFileUploadMain,
6+
MultipleFileUploadStatus,
7+
MultipleFileUploadStatusItem
8+
} from '@patternfly/react-core';
9+
10+
// TODO: FIGMA: Add status toggle text
11+
// TODO: FIGMA: Add status toggle icon
12+
// TODO: FIGMA: Add text separator
13+
// TODO: FIGMA: Add info text
14+
// TODO: FIGMA: Add status toggle text
15+
// TODO: FIGMA: Add status toggle icon
16+
17+
figma.connect(
18+
FileUpload,
19+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8949-96128&m=dev',
20+
{
21+
props: {
22+
isHorizontal: figma.enum('Layout', { Horizontal: true }),
23+
24+
state: figma.enum('State', {
25+
Default: 'default',
26+
'Drag over': 'drag-over',
27+
'Uploading + Collapsed': 'uploading---collapsed',
28+
'Uploaded + Collapsed': 'uploaded---collapsed',
29+
'Failed upload + Collapsed': 'failed-upload---collapsed',
30+
'Uploading + Expanded': 'uploading---expanded',
31+
'Uploaded + Expanded': 'uploaded---expanded',
32+
'Failed Upload + Expanded': 'failed-upload---expanded'
33+
}),
34+
35+
statusIcons: ['inProgress', 'success', 'danger']
36+
},
37+
example: (props) => (
38+
// Documentation for FileUpload can be found at https://www.patternfly.org/components/file-upload
39+
<MultipleFileUpload onFileDrop={() => {}} isHorizontal={props.isHorizontal}>
40+
<MultipleFileUploadMain
41+
titleIcon={'<UploadIcon />'}
42+
titleText="Drag and drop files here"
43+
titleTextSeparator="or"
44+
infoText="Accepted file types: JPEG, Doc, PDF, PNG"
45+
/>
46+
47+
<MultipleFileUploadStatus
48+
statusToggleText={'${successfullyReadFileCount} of ${currentFiles.length} files uploaded'}
49+
statusToggleIcon={'statusIcon'}
50+
aria-label="Current uploads"
51+
>
52+
<MultipleFileUploadStatusItem
53+
file={file}
54+
key={file.name}
55+
onClearClick={() => {}}
56+
onReadSuccess={() => {}}
57+
onReadFail={() => {}}
58+
progressHelperText={'${file.name} is being read'}
59+
/>
60+
</MultipleFileUploadStatus>
61+
</MultipleFileUpload>
62+
)
63+
}
64+
);

‎packages/code-connect/components/FileUpload/SimpleFileUpload.figma.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import figma from '@figma/code-connect';
2+
import { FileUpload, FileUploadHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
3+
4+
// TODO: FIGMA: Add filename placeholder
5+
// TODO: FIGMA: Add browse button text
6+
// TODO: FIGMA: Add FileUploadHelperText
7+
8+
figma.connect(
9+
FileUpload,
10+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8949-96043&m=dev',
11+
{
12+
props: {
13+
// boolean
14+
showHelperText: figma.boolean('Show helper text'),
15+
hideDefaultPreview: figma.boolean('Show text preview box', {
16+
true: false,
17+
false: true
18+
}),
19+
helperText: figma.boolean('Show helper text', {
20+
true: (
21+
<FileUploadHelperText>
22+
<HelperText>
23+
<HelperTextItem id="helper-text-example-helpText">Upload a CSV file</HelperTextItem>
24+
</HelperText>
25+
</FileUploadHelperText>
26+
)
27+
}),
28+
29+
// enum
30+
allowEditingUploadedText: figma.enum('State', {
31+
'Uploaded + Not Editable': false,
32+
'Uploaded + Editable': true
33+
}),
34+
isDragActive: figma.enum('State', {
35+
'Drag state': true,
36+
false: undefined
37+
}),
38+
isLoading: figma.enum('State', { 'In progress upload': true })
39+
},
40+
example: (props) => (
41+
// Documentation for FileUpload can be found at https://www.patternfly.org/components/file-upload
42+
<FileUpload
43+
id="file-upload-id"
44+
type="text"
45+
aria-label="File upload example"
46+
browseButtonText="Upload"
47+
isLoading={props.isLoading}
48+
isDragActive={props.isDragActive}
49+
hideDefaultPreview={props.hideDefaultPreview}
50+
allowEditingUploadedText={props.allowEditingUploadedText}
51+
onFileInputChange={() => {}}
52+
onDataChange={() => {}}
53+
onTextChange={() => {}}
54+
onReadStarted={() => {}}
55+
onReadFinished={() => {}}
56+
onClearClick={() => {}}
57+
>
58+
{props.helperText}
59+
</FileUpload>
60+
)
61+
}
62+
);

0 commit comments

Comments
 (0)