Skip to content

Commit c3b3ab0

Browse files
mattnoltingmattnolting
authored
feat(CC-batch-3): added batch 3 (#11829)
* feat(CC-batch-3): added batch 3 * feat(CC-batch-3): lint fix * feat(CC-batch-3): moved directory, updated for review * feat(CC-batch-3): removed previous codeConnect dir from react-core * feat(CC-batch-3): updated urls, added required * feat(CC-batch-3): added code and children to codeEditor * feat(CC-batch-2): updated breadcrumb * feat(CC-batch-3): updated code editor config * feat(CC-batch-3): updated required props * feat(CC-batch-3): verification complete * feat(CC-batch-3): added sr text to status banner * feat(CC-batch-3): review-athon round 1 followup * feat(CC-batch-3): review-athon round 2 followup * feat(CC-batch-3): removed redundant dropdown itesm
1 parent 999dd94 commit c3b3ab0

File tree

10 files changed

+297
-2
lines changed

10 files changed

+297
-2
lines changed

‎packages/code-connect/components/Banner/NonStatusBanner.figma.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import figma from '@figma/code-connect';
2+
import { Banner } from '@patternfly/react-core';
3+
4+
// Documentation for Banner can be found at https://www.patternfly.org/components/banner
5+
6+
figma.connect(
7+
Banner,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-1443',
9+
{
10+
props: {
11+
// string
12+
text: figma.string('✏️ Center text'),
13+
14+
// enum
15+
color: figma.enum('Color', {
16+
Red: 'red',
17+
Orangered: 'orangered',
18+
Orange: 'orange',
19+
Yellow: 'yellow',
20+
Green: 'green',
21+
Teal: 'teal',
22+
Blue: 'blue',
23+
Purple: 'purple'
24+
})
25+
},
26+
example: (props) => <Banner color={props.color}>{props.text}</Banner>
27+
}
28+
);

‎packages/code-connect/components/Banner/StatusBanner.figma.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import figma from '@figma/code-connect';
2+
import { Banner } from '@patternfly/react-core';
3+
4+
// Documentation for Banner can be found at https://www.patternfly.org/components/banner
5+
6+
figma.connect(
7+
Banner,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-937',
9+
{
10+
props: {
11+
// string
12+
text: figma.string('✏️ Center text'),
13+
14+
// enum
15+
status: figma.enum('Status', {
16+
Success: 'success',
17+
Warning: 'warning',
18+
Danger: 'danger',
19+
Info: 'info',
20+
Custom: 'custom'
21+
}),
22+
screenReaderText: figma.enum('Status', {
23+
Success: 'Success banner screen reader text',
24+
Warning: 'Warning banner screen reader text',
25+
Danger: 'Danger banner screen reader text',
26+
Info: 'Info banner screen reader text',
27+
Custom: 'Custom banner screen reader text'
28+
})
29+
},
30+
example: (props) => (
31+
<Banner screenReaderText={props.screenReaderText} status={props.status}>
32+
{props.text}
33+
</Banner>
34+
)
35+
}
36+
);

‎packages/code-connect/components/Brand/FullLogo.figma.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import figma from '@figma/code-connect';
2+
import { Brand } from '@patternfly/react-core';
3+
4+
// Documentation for Brand can be found at https://www.patternfly.org/components/brand
5+
6+
figma.connect(
7+
Brand,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-3689',
9+
{
10+
example: () => (
11+
<Brand src="<path-to-logo>" alt="Patternfly" widths={{ default: '200px', md: '400px', xl: '600px' }} />
12+
)
13+
}
14+
);

‎packages/code-connect/components/Brand/MastheadLogo.figma.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import figma from '@figma/code-connect';
2+
import { Brand } from '@patternfly/react-core';
3+
4+
// Documentation for Brand can be found at https://www.patternfly.org/components/brand
5+
6+
figma.connect(
7+
Brand,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-3644',
9+
{
10+
example: () => (
11+
<Brand src="<path-to-logo>" alt="Patternfly" widths={{ default: '40px', sm: '60px', md: '220px' }}>
12+
<source media="(min-width: 1200px)" srcSet="<path-to-logo>" />
13+
<source media="(min-width: 992px)" srcSet="<path-to-logo>" />
14+
<source media="(min-width: 768px)" srcSet="<path-to-logo>" />
15+
<source media="(min-width: 576px)" srcSet="<path-to-logo>" />
16+
<source media="(min-width: 320px)" srcSet="<path-to-logo>" />
17+
<source srcSet="<path-to-logo>" />
18+
</Brand>
19+
)
20+
}
21+
);

‎packages/code-connect/components/Breadcrumbs/Breadcrumb.figma.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import figma from '@figma/code-connect';
2+
import { Breadcrumb } from '@patternfly/react-core';
3+
4+
// Documentation for Breadcrumb can be found at https://www.patternfly.org/components/breadcrumb
5+
6+
figma.connect(
7+
Breadcrumb,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=3362-283',
9+
{
10+
props: {
11+
children: figma.children('*')
12+
},
13+
example: (props) => <Breadcrumb>{props.children}</Breadcrumb>
14+
}
15+
);

‎packages/code-connect/components/Breadcrumbs/BreadcrumbItem.figma.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import figma from '@figma/code-connect';
2+
import { BreadcrumbItem } from '@patternfly/react-core';
3+
4+
// Documentation for BreadcrumbItem can be found at https://www.patternfly.org/components/breadcrumb
5+
6+
figma.connect(
7+
BreadcrumbItem,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3362-74',
9+
{
10+
props: {
11+
// string
12+
text: figma.string('Text'),
13+
14+
// enum
15+
to: figma.enum('State', {
16+
Link: '#',
17+
Hover: '#'
18+
})
19+
},
20+
example: (props) => <BreadcrumbItem to={props.to}>{props.text}</BreadcrumbItem>
21+
}
22+
);

‎packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import figma from '@figma/code-connect';
2+
import { Badge, BreadcrumbItem, Dropdown, DropdownItem, DropdownList, Icon, MenuToggle } from '@patternfly/react-core';
3+
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
4+
5+
// Documentation for BreadcrumbItem can be found at https://www.patternfly.org/components/breadcrumb
6+
7+
figma.connect(
8+
BreadcrumbItem,
9+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=19922-43760',
10+
{
11+
props: {},
12+
example: () => (
13+
<BreadcrumbItem isDropdown>
14+
<Dropdown
15+
onSelect={() => {}}
16+
onOpenChange={() => {}}
17+
toggle={() => (
18+
<MenuToggle
19+
size="sm"
20+
badge={
21+
<Badge isRead screenReaderText="additional items">
22+
01
23+
</Badge>
24+
}
25+
onClick={() => {}}
26+
isExpanded={false}
27+
variant="plainText"
28+
/>
29+
)}
30+
isOpen={false}
31+
>
32+
<DropdownList>
33+
<DropdownItem
34+
icon={
35+
<Icon shouldMirrorRTL>
36+
<AngleLeftIcon />
37+
</Icon>
38+
}
39+
key="edit"
40+
>
41+
Edit
42+
</DropdownItem>
43+
,
44+
<DropdownItem
45+
icon={
46+
<Icon shouldMirrorRTL>
47+
<AngleLeftIcon />
48+
</Icon>
49+
}
50+
key="action"
51+
>
52+
Deployment
53+
</DropdownItem>
54+
,
55+
<DropdownItem
56+
icon={
57+
<Icon shouldMirrorRTL>
58+
<AngleLeftIcon />
59+
</Icon>
60+
}
61+
key="apps"
62+
>
63+
Applications
64+
</DropdownItem>
65+
</DropdownList>
66+
</Dropdown>
67+
</BreadcrumbItem>
68+
)
69+
}
70+
);

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import figma from '@figma/code-connect';
2+
import { CodeBlock, CodeBlockCode, ExpandableSection, ExpandableSectionToggle } from '@patternfly/react-core';
3+
4+
// TODO: DESIGN: Configure Actions layer to contain CodeBlockAction components
5+
6+
figma.connect(
7+
CodeBlock,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=9802-5857',
9+
{
10+
props: {
11+
editorText: 'code block code',
12+
13+
actions: `action1, action2, action3, action4, action5`,
14+
15+
// boolean
16+
expandableSectionToggle: figma.boolean('Expandable', {
17+
true: (
18+
<ExpandableSectionToggle onToggle={() => {}} contentId="code-block-id">
19+
Show More
20+
</ExpandableSectionToggle>
21+
),
22+
false: undefined
23+
}),
24+
expandableSectionContent: figma.boolean('Expandable', {
25+
true: (
26+
<ExpandableSection isExpanded={true} isDetached contentId="code-block-expand">
27+
Expandable content
28+
</ExpandableSection>
29+
),
30+
false: undefined
31+
})
32+
},
33+
example: (props) => (
34+
<CodeBlock actions={props.actions}>
35+
<CodeBlockCode>
36+
{props.editorText}
37+
{props.expandableSectionContent}
38+
</CodeBlockCode>
39+
{props.expandableSectionToggle}
40+
</CodeBlock>
41+
)
42+
}
43+
);

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import figma from '@figma/code-connect';
2+
import { CodeEditor } from '@patternfly/react-code-editor';
3+
4+
// TODO: DESIGN: Add support for actions, wrap each action in the appropriate compnent
5+
// TODO: DESIGN: When shortcuts is removed, presentation breaks
6+
// TODO: DESIGN: configure options for actions
7+
// TODO: DESIGN: Add viewshortcuts
8+
// TODO: DESIGN: ifshortcuts is true
9+
// Documentation for CodeEditor can be found at https://www.patternfly.org/components/code-editor
10+
11+
figma.connect(
12+
CodeEditor,
13+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=16994-184502',
14+
{
15+
props: {
16+
// boolean
17+
hasCustomControls: '<your-actions-here>',
18+
isUploadEnabled: figma.boolean('Action 1'),
19+
isCopyEnabled: figma.boolean('Action 2'),
20+
isDownloadEnabled: figma.boolean('Action 3'),
21+
showsLineNumbers: figma.boolean('Show Line Numbers'),
22+
23+
// enum
24+
isMinimapVisible: figma.enum('Type', { 'Mini Map': true })
25+
},
26+
example: (props) => (
27+
<>
28+
<CodeEditor
29+
code="code editor contents"
30+
height="400px"
31+
isCopyEnabled={props.isCopyEnabled}
32+
isDownloadEnabled={props.isDownloadEnabled}
33+
isLineNumbersVisible={props.showsLineNumbers}
34+
isMinimapVisible={props.isMinimapVisible}
35+
isUploadEnabled={props.isUploadEnabled}
36+
customControls={props.customControls}
37+
/* if no content is passed to code and isUploadEnabled is true, the editor will be display EmptyState */
38+
/>
39+
</>
40+
)
41+
}
42+
);

‎packages/code-connect/figma.config.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
"codeConnect": {
33
"parser": "react",
44
"include": [
5-
"components/Alert/*.tsx"
5+
"components/Banner/*.tsx",
6+
"components/Brand/*.tsx",
7+
"components/Breadcrumbs/*.tsx",
8+
"components/CodeBlock/*.tsx",
9+
"components/CodeEditor/*.tsx"
610
],
711
"paths": {
812
"src/components": "src/components"
@@ -26,4 +30,4 @@
2630
}
2731
}
2832
}
29-
}
33+
}

0 commit comments

Comments
 (0)