Skip to content

Commit b1e42ed

Browse files
author
Kurt Doherty
committed
feat: add code connect for FolderTabs, PrimaryTabs, SecondaryTabs, and Tooltip 
1 parent 86d3134 commit b1e42ed

15 files changed

Lines changed: 153 additions & 2 deletions

‎figma.config.json‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"codeConnect": {
33
"include": [
4-
"src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,divider,empty-data,features,link,select-native,split-button,tag,tag-group}/**/*.{tsx,jsx}"
4+
"src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,divider,empty-data,features,folder-tabs,link,primary-tabs,secondary-tabs,select-native,split-button,tag,tag-group,tooltip}/**/*.{tsx,jsx}"
55
],
66
"importPaths": {
77
"src/core/*": "@reapit/elements/core/*",
@@ -31,13 +31,25 @@
3131
"<EMPTY_DATA_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=86-1823",
3232
"<FEATURE_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12955-37788",
3333
"<FEATURES_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9645",
34+
"<FOLDER_TAB_ITEM_CONTENT_SM_2XL_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28409",
35+
"<FOLDER_TAB_ITEM_SM_2XL_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28306",
36+
"<FOLDER_TAB_ITEM_CONTENT_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28415",
37+
"<FOLDER_TAB_ITEM_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28421",
38+
"<FOLDER_TABS_SM_2XL_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15254-19347",
39+
"<FOLDER_TABS_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15272-53111",
40+
"<FOLDER_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15254-63400",
3441
"<LINK_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11867-66681",
3542
"<SELECT_NATIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12404-18248",
3643
"<SPLIT_BUTTON_ACTION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9778",
3744
"<SPLIT_BUTTON_MENU_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-10149",
3845
"<SPLIT_BUTTON_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2356-10273",
46+
"<PRIMARY_TAB_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=60-1049",
47+
"<PRIMARY_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7076-9436",
3948
"<TAG_GROUP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=118-6272",
40-
"<TAG_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=55-982"
49+
"<TAG_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=55-982",
50+
"<TOOLTIP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6462-8381",
51+
"<SECONDARY_TAB_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=209-5342",
52+
"<SECONDARY_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7076-9436"
4153
}
4254
}
4355
}

‎src/core/folder-tabs/count-label/count-label.figma.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import figma from '@figma/code-connect'
2+
import { FolderTabs } from '../folder-tabs'
3+
4+
figma.connect(FolderTabs.CountLabel, '<FOLDER_TAB_ITEM_CONTENT_SM_2XL_URL>', {
5+
variant: { Variant: 'Count' },
6+
props: {
7+
children: figma.string('Label'),
8+
count: figma.string('Count'),
9+
},
10+
example: (props) => <FolderTabs.CountLabel count={props.count}>{props.children}</FolderTabs.CountLabel>,
11+
})
12+
13+
figma.connect(FolderTabs.CountLabel, '<FOLDER_TAB_ITEM_CONTENT_XS_URL>', {
14+
variant: { Variant: 'Count' },
15+
props: {
16+
children: figma.string('Label'),
17+
count: figma.string('Count'),
18+
},
19+
example: (props) => <FolderTabs.CountLabel count={props.count}>{props.children}</FolderTabs.CountLabel>,
20+
})

‎src/core/folder-tabs/count-label/count-label.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,5 @@ export function FolderTabCountLabel({ children, count, ...rest }: FolderTabCount
2323
</ElFolderTabCountContainer>
2424
)
2525
}
26+
27+
FolderTabCountLabel.displayName = 'FolderTabs.CountLabel'

‎src/core/folder-tabs/folder-tabs.figma.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { FolderTabs } from './folder-tabs'
2+
import figma from '@figma/code-connect'
3+
4+
// NOTE: This is the top-most folder tabs component in Figma
5+
figma.connect(FolderTabs, '<FOLDER_TABS_URL>', {
6+
props: {
7+
children: figma.children('Folder tabs'),
8+
},
9+
example: (props) => <FolderTabs>{props.children}</FolderTabs>,
10+
})
11+
12+
// NOTE: These two are the two breakpoint-specific folder tab components in Figma
13+
figma.connect(FolderTabs, '<FOLDER_TABS_SM_2XL_URL>', {
14+
props: {
15+
children: figma.children('Tab *'),
16+
},
17+
example: (props) => <FolderTabs>{props.children}</FolderTabs>,
18+
})
19+
20+
figma.connect(FolderTabs, '<FOLDER_TABS_XS_URL>', {
21+
props: {
22+
children: figma.children('Tab *'),
23+
},
24+
example: (props) => <FolderTabs>{props.children}</FolderTabs>,
25+
})

‎src/core/folder-tabs/tab/tab.figma.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import figma from '@figma/code-connect'
2+
import { FolderTabs } from '../folder-tabs'
3+
4+
figma.connect(FolderTabs.Item, '<FOLDER_TAB_ITEM_SM_2XL_URL>', {
5+
props: {
6+
children: figma.children('↳Content'),
7+
},
8+
example: (props) => (
9+
<FolderTabs.Item aria-current={false} href="#replace-me">
10+
{props.children}
11+
</FolderTabs.Item>
12+
),
13+
})
14+
15+
figma.connect(FolderTabs.Item, '<FOLDER_TAB_ITEM_XS_URL>', {
16+
props: {
17+
children: figma.children('↳Content'),
18+
},
19+
example: (props) => (
20+
<FolderTabs.Item aria-current={false} href="#replace-me">
21+
{props.children}
22+
</FolderTabs.Item>
23+
),
24+
})

‎src/core/folder-tabs/tab/tab.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,5 @@ export function FolderTab({ children, ...rest }: FolderTab.Props) {
3030
</ElFolderTab>
3131
)
3232
}
33+
34+
FolderTab.displayName = 'FolderTabs.Item'

‎src/core/primary-tabs/primary-tabs-item.figma.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import figma from '@figma/code-connect'
2+
import { PrimaryTabs } from './primary-tabs'
3+
4+
figma.connect(PrimaryTabs.Item, '<PRIMARY_TAB_URL>', {
5+
props: {
6+
children: figma.string('Tab name'),
7+
},
8+
example: (props) => (
9+
<PrimaryTabs.Item aria-current={false} href="#replace-me">
10+
{props.children}
11+
</PrimaryTabs.Item>
12+
),
13+
})

‎src/core/primary-tabs/primary-tabs-item.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,5 @@ export function PrimaryTabsItem(props: PrimaryTabsItem.Props) {
2020
</ElPrimaryTabsListItem>
2121
)
2222
}
23+
24+
PrimaryTabsItem.displayName = 'PrimaryTabs.Item'

‎src/core/primary-tabs/primary-tabs.figma.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import figma from '@figma/code-connect'
2+
import { PrimaryTabs } from './primary-tabs'
3+
4+
figma.connect(PrimaryTabs, '<PRIMARY_TABS_URL>', {
5+
variant: { Variant: 'Default' },
6+
props: {
7+
children: figma.children('Tab item'),
8+
},
9+
example: (props) => <PrimaryTabs>{props.children}</PrimaryTabs>,
10+
})

‎src/core/secondary-tabs/secondary-tabs-item.figma.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import figma from '@figma/code-connect'
2+
import { SecondaryTabs } from './secondary-tabs'
3+
4+
figma.connect(SecondaryTabs.Item, '<SECONDARY_TAB_URL>', {
5+
props: {
6+
children: figma.string('Tab name'),
7+
},
8+
example: (props) => (
9+
<SecondaryTabs.Item aria-current={false} href="#replace-me">
10+
{props.children}
11+
</SecondaryTabs.Item>
12+
),
13+
})

0 commit comments

Comments
 (0)