Skip to content

Commit eb6bc49

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-8): new tabs sub-component files
1 parent 0dbd0a7 commit eb6bc49

6 files changed

Lines changed: 196 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ coverage
1010
.tmp
1111
.eslintcache
1212
package-lock.json
13+
.env
1314

1415
# package managers
1516
yarn-error.log

‎packages/code-connect/components/Tabs/SubTabsItemHorizontal.figma.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import figma from '@figma/code-connect';
2+
import { Tabs } from '@patternfly/react-core';
3+
4+
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
5+
6+
figma.connect(
7+
Tabs,
8+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6284&m=dev',
9+
{
10+
props: {
11+
children: figma.children('*'),
12+
isBox: figma.enum('Type', {
13+
Boxed: true,
14+
'Boxed Light': true
15+
})
16+
},
17+
example: (props) => (
18+
<Tabs
19+
aria-label="Horizontal subtabs example"
20+
isSubtab={true}
21+
isBox={props.isBox}
22+
onSelect={() => {}}
23+
role="region"
24+
>
25+
{props.children}
26+
</Tabs>
27+
)
28+
}
29+
);

‎packages/code-connect/components/Tabs/TabItemsHorizontal.figma.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import figma from '@figma/code-connect';
2+
import { Popover, Tab, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
3+
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4+
import { ref } from 'node:process';
5+
6+
// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
7+
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
8+
9+
const shareProps = {
10+
popover: figma.boolean('Help button', {
11+
true: (
12+
<Popover
13+
headerContent={<div>Help popover</div>}
14+
bodyContent={
15+
<div>
16+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
17+
</div>
18+
}
19+
footerContent="Popover footer"
20+
triggerRef={ref}
21+
/>
22+
),
23+
false: undefined
24+
}),
25+
icon: figma.boolean('Icon', {
26+
true: (
27+
<>
28+
<TabTitleIcon>
29+
<HelpIcon />
30+
</TabTitleIcon>{' '}
31+
</>
32+
),
33+
false: undefined
34+
})
35+
};
36+
37+
figma.connect(Tab, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6161', {
38+
props: {
39+
...shareProps,
40+
// string
41+
tabText: figma.string('Tab text'),
42+
43+
// enum
44+
isDisabled: figma.enum('State', { Disabled: true })
45+
},
46+
example: (props) => (
47+
<Tab
48+
eventKey={0}
49+
isDisabled={props.isDisabled}
50+
actions={props.popover}
51+
title={
52+
<>
53+
{props.icon}
54+
<TabTitleText>{props.tabText}</TabTitleText>
55+
</>
56+
}
57+
>
58+
{props.tabText}
59+
</Tab>
60+
)
61+
});

‎packages/code-connect/components/Tabs/TabItemsVertical.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 { Popover, Tab, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
3+
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4+
import { ref } from 'node:process';
5+
6+
// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
7+
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
8+
9+
const shareProps = {
10+
popover: figma.boolean('Help icon', {
11+
true: (
12+
<Popover
13+
headerContent={<div>Help popover</div>}
14+
bodyContent={
15+
<div>
16+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
17+
</div>
18+
}
19+
footerContent="Popover footer"
20+
triggerRef={ref}
21+
/>
22+
),
23+
false: undefined
24+
}),
25+
icon: figma.boolean('Icon at start', {
26+
true: (
27+
<>
28+
<TabTitleIcon>
29+
<HelpIcon />
30+
</TabTitleIcon>
31+
{''}
32+
</>
33+
),
34+
false: undefined
35+
})
36+
};
37+
38+
figma.connect(Tab, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6407', {
39+
props: {
40+
...shareProps,
41+
// string
42+
tabText: figma.string('Text'),
43+
44+
// enum
45+
isDisabled: figma.enum('State', { Disabled: true })
46+
},
47+
example: (props) => (
48+
<Tab
49+
eventKey={0}
50+
isDisabled={props.isDisabled}
51+
actions={props.popover}
52+
title={
53+
<>
54+
{props.icon}
55+
<TabTitleText>{props.tabText}</TabTitleText>
56+
</>
57+
}
58+
>
59+
{props.tabText}
60+
</Tab>
61+
)
62+
});

‎packages/code-connect/components/auto-generate-figma.config.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"codeConnect": {
3+
"include": ["../../**/*.{tsx,jsx}"],
4+
"label": "React",
5+
"interactiveSetupFigmaFileUrl": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components"
6+
}
7+
}

‎packages/code-connect/components/bafigma.config.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"codeConnect": {
3+
"label": "React",
4+
"include": [
5+
"components/NotificationDrawer/*.tsx",
6+
"components/Pagination/*.tsx",
7+
"components/Popover/*.tsx",
8+
"components/SimpleList/*.tsx",
9+
"components/Skeleton/*.tsx"
10+
],
11+
"paths": {
12+
"components": "components"
13+
},
14+
"documentUrlSubstitutions": {
15+
"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components"
16+
},
17+
"aliases": {
18+
"@patternfly/react-core": "."
19+
},
20+
"importPaths": {
21+
"components": "components"
22+
},
23+
"options": {
24+
"instanceSwapper": {
25+
"enabled": true
26+
},
27+
"development": {
28+
"enabled": true,
29+
"verbose": true
30+
},
31+
"production": {
32+
"enabled": false
33+
}
34+
}
35+
}
36+
}

0 commit comments

Comments
 (0)