From a4ba0e3fac9d8160965b2e6650aca70167c7797a Mon Sep 17 00:00:00 2001 From: Kurt Doherty Date: Tue, 16 Sep 2025 15:37:15 +1000 Subject: [PATCH 1/2] feat: add code connect for `SideBar` and `TopBar` --- figma.config.json | 19 +++++++++- .../collapse-button/collapse-button.figma.tsx | 6 +++ .../collapse-button/collapse-button.tsx | 2 + .../menu-list/menu-list-group.figma.tsx | 26 +++++++++++++ .../side-bar/menu-list/menu-list-group.tsx | 2 + .../menu-list/menu-list-item.figma.tsx | 21 ++++++++++ .../side-bar/menu-list/menu-list-item.tsx | 2 + .../side-bar/menu-list/menu-list.figma.tsx | 9 +++++ src/core/side-bar/menu-list/menu-list.tsx | 2 + src/core/side-bar/side-bar.figma.tsx | 10 +++++ .../submenu/submenu-list-item.figma.tsx | 19 ++++++++++ .../side-bar/submenu/submenu-list-item.tsx | 2 + src/core/side-bar/submenu/submenu.figma.tsx | 9 +++++ src/core/side-bar/submenu/submenu.tsx | 2 + .../top-bar/avatar-button/avatar-button.tsx | 4 +- .../top-bar/avatar-menu/avatar-menu.figma.tsx | 9 +++++ src/core/top-bar/avatar-menu/avatar-menu.tsx | 2 + .../top-bar/brand-logo/brand-logo.figma.tsx | 27 +++++++++++++ src/core/top-bar/brand-logo/brand-logo.tsx | 2 + .../main-nav/main-nav-list-item.figma.tsx | 19 ++++++++++ .../top-bar/main-nav/main-nav-list-item.tsx | 2 + .../main-nav-menu-list-item.figma.tsx | 19 ++++++++++ .../main-nav/main-nav-menu-list-item.tsx | 2 + src/core/top-bar/main-nav/main-nav.figma.tsx | 9 +++++ src/core/top-bar/main-nav/main-nav.tsx | 2 + .../nav-search-button/nav-search-button.tsx | 2 + .../nav-search-icon-item.tsx | 2 + .../top-bar/nav-search/nav-search.figma.tsx | 11 ++++++ src/core/top-bar/nav-search/nav-search.tsx | 2 + .../secondary-nav-list-item.figma.tsx | 27 +++++++++++++ .../secondary-nav/secondary-nav-list-item.tsx | 2 + .../secondary-nav-menu-list-item.tsx | 2 + .../secondary-nav/secondary-nav.figma.tsx | 9 +++++ .../top-bar/secondary-nav/secondary-nav.tsx | 2 + src/core/top-bar/top-bar.figma.tsx | 38 +++++++++++++++++++ src/storybook/changelog.mdx | 1 + 36 files changed, 322 insertions(+), 4 deletions(-) create mode 100644 src/core/side-bar/collapse-button/collapse-button.figma.tsx create mode 100644 src/core/side-bar/menu-list/menu-list-group.figma.tsx create mode 100644 src/core/side-bar/menu-list/menu-list-item.figma.tsx create mode 100644 src/core/side-bar/menu-list/menu-list.figma.tsx create mode 100644 src/core/side-bar/side-bar.figma.tsx create mode 100644 src/core/side-bar/submenu/submenu-list-item.figma.tsx create mode 100644 src/core/side-bar/submenu/submenu.figma.tsx create mode 100644 src/core/top-bar/avatar-menu/avatar-menu.figma.tsx create mode 100644 src/core/top-bar/brand-logo/brand-logo.figma.tsx create mode 100644 src/core/top-bar/main-nav/main-nav-list-item.figma.tsx create mode 100644 src/core/top-bar/main-nav/main-nav-menu-list-item.figma.tsx create mode 100644 src/core/top-bar/main-nav/main-nav.figma.tsx create mode 100644 src/core/top-bar/nav-search/nav-search.figma.tsx create mode 100644 src/core/top-bar/secondary-nav/secondary-nav-list-item.figma.tsx create mode 100644 src/core/top-bar/secondary-nav/secondary-nav.figma.tsx create mode 100644 src/core/top-bar/top-bar.figma.tsx diff --git a/figma.config.json b/figma.config.json index 0a93bea2a..6b3059517 100644 --- a/figma.config.json +++ b/figma.config.json @@ -1,7 +1,7 @@ { "codeConnect": { "include": [ - "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,dialog,divider,drawer,empty-data,features,filter-bar,folder-tabs,label-text,link,menu,page-header,pagination,primary-tabs,secondary-tabs,select-native,split-button,status-indicator,supplementary-info,tag,tag-group,tooltip}/**/*.{tsx,jsx}" + "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,dialog,divider,drawer,empty-data,features,filter-bar,folder-tabs,label-text,link,menu,page-header,pagination,primary-tabs,secondary-tabs,select-native,side-bar,split-button,status-indicator,supplementary-info,tag,tag-group,tooltip,top-bar}/**/*.{tsx,jsx}" ], "importPaths": { "src/core/*": "@reapit/elements/core/*", @@ -56,6 +56,12 @@ "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13349-12535", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13350-15766", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6364-9402", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35369", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35439", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35460", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35359", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35396", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35522", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12404-18248", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9778", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-10149", @@ -71,7 +77,16 @@ "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11918-14126", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=118-6272", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=55-982", - "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6462-8381" + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6462-8381", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-34995", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12158-7298", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12255-8601", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-34964", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-34935", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-34950", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-34981", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35003", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35070" } } } diff --git a/src/core/side-bar/collapse-button/collapse-button.figma.tsx b/src/core/side-bar/collapse-button/collapse-button.figma.tsx new file mode 100644 index 000000000..4db8fecf9 --- /dev/null +++ b/src/core/side-bar/collapse-button/collapse-button.figma.tsx @@ -0,0 +1,6 @@ +import figma from '@figma/code-connect' +import { SideBar } from '../side-bar' + +figma.connect(SideBar.CollapseButton, '', { + example: () => , +}) diff --git a/src/core/side-bar/collapse-button/collapse-button.tsx b/src/core/side-bar/collapse-button/collapse-button.tsx index c00dc4452..b5bffe2ff 100644 --- a/src/core/side-bar/collapse-button/collapse-button.tsx +++ b/src/core/side-bar/collapse-button/collapse-button.tsx @@ -66,3 +66,5 @@ export function SideBarCollapseButton({ id, onClick, ...props }: SideBarCollapse ) } + +SideBarCollapseButton.displayName = 'SideBar.CollapseButton' diff --git a/src/core/side-bar/menu-list/menu-list-group.figma.tsx b/src/core/side-bar/menu-list/menu-list-group.figma.tsx new file mode 100644 index 000000000..3a820783a --- /dev/null +++ b/src/core/side-bar/menu-list/menu-list-group.figma.tsx @@ -0,0 +1,26 @@ +import figma from '@figma/code-connect' +import { SideBar } from '../side-bar' + +figma.connect(SideBar.MenuGroup, '', { + variant: { Type: 'Expandable' }, + props: { + ariaCurrent: figma.enum('Selected', { + true: 'page', + false: false, + }), + children: figma.children('Submenu'), + expanded: figma.boolean('Expanded'), + summary: figma.nestedProps('Main item', { + label: figma.string('Label'), + icon: figma.instance('Icon'), + }), + }, + example: (props) => ( + {props.summary.label}} + > + {props.children} + + ), +}) diff --git a/src/core/side-bar/menu-list/menu-list-group.tsx b/src/core/side-bar/menu-list/menu-list-group.tsx index 5279e0c81..b0cef62a2 100644 --- a/src/core/side-bar/menu-list/menu-list-group.tsx +++ b/src/core/side-bar/menu-list/menu-list-group.tsx @@ -26,4 +26,6 @@ export function SideBarMenuListGroup({ children, ...props }: SideBarMenuListGrou ) } +SideBarMenuListGroup.displayName = 'SideBar.MenuGroup' + SideBarMenuListGroup.Summary = SideBarMenuGroup.Summary diff --git a/src/core/side-bar/menu-list/menu-list-item.figma.tsx b/src/core/side-bar/menu-list/menu-list-item.figma.tsx new file mode 100644 index 000000000..399da3678 --- /dev/null +++ b/src/core/side-bar/menu-list/menu-list-item.figma.tsx @@ -0,0 +1,21 @@ +import figma from '@figma/code-connect' +import { SideBar } from '../side-bar' + +figma.connect(SideBar.MenuItem, '', { + variant: { Type: 'Simple' }, + props: { + ariaCurrent: figma.enum('Selected', { + true: 'page', + false: false, + }), + item: figma.nestedProps('Main item', { + label: figma.string('Label'), + icon: figma.instance('Icon'), + }), + }, + example: (props) => ( + + {props.item.label} + + ), +}) diff --git a/src/core/side-bar/menu-list/menu-list-item.tsx b/src/core/side-bar/menu-list/menu-list-item.tsx index 98399eb8f..72cf63b67 100644 --- a/src/core/side-bar/menu-list/menu-list-item.tsx +++ b/src/core/side-bar/menu-list/menu-list-item.tsx @@ -25,3 +25,5 @@ export function SideBarMenuListItem({ children, ...props }: SideBarMenuListItem. ) } + +SideBarMenuListItem.displayName = 'SideBar.MenuItem' diff --git a/src/core/side-bar/menu-list/menu-list.figma.tsx b/src/core/side-bar/menu-list/menu-list.figma.tsx new file mode 100644 index 000000000..ca825eb83 --- /dev/null +++ b/src/core/side-bar/menu-list/menu-list.figma.tsx @@ -0,0 +1,9 @@ +import figma from '@figma/code-connect' +import { SideBar } from '../side-bar' + +figma.connect(SideBar.MenuList, '', { + props: { + children: figma.children('*'), + }, + example: (props) => {props.children}, +}) diff --git a/src/core/side-bar/menu-list/menu-list.tsx b/src/core/side-bar/menu-list/menu-list.tsx index 1d62f9f7c..b6199b750 100644 --- a/src/core/side-bar/menu-list/menu-list.tsx +++ b/src/core/side-bar/menu-list/menu-list.tsx @@ -22,6 +22,8 @@ export function SideBarMenuList({ children, ...rest }: SideBarMenuList.Props) { return {children} } +SideBarMenuList.displayName = 'SideBar.MenuList' + SideBarMenuList.Item = SideBarMenuListItem SideBarMenuList.Group = SideBarMenuListGroup SideBarMenuList.GroupSummary = SideBarMenuListGroup.Summary diff --git a/src/core/side-bar/side-bar.figma.tsx b/src/core/side-bar/side-bar.figma.tsx new file mode 100644 index 000000000..bb9ca765e --- /dev/null +++ b/src/core/side-bar/side-bar.figma.tsx @@ -0,0 +1,10 @@ +import figma from '@figma/code-connect' +import { SideBar } from './side-bar' + +figma.connect(SideBar, '', { + props: { + menuList: figma.children('Menu list'), + collapseButton: figma.children('Collapse button'), + }, + example: (props) => {props.menuList}, +}) diff --git a/src/core/side-bar/submenu/submenu-list-item.figma.tsx b/src/core/side-bar/submenu/submenu-list-item.figma.tsx new file mode 100644 index 000000000..a1a0244e5 --- /dev/null +++ b/src/core/side-bar/submenu/submenu-list-item.figma.tsx @@ -0,0 +1,19 @@ +import figma from '@figma/code-connect' +import { SideBar } from '../side-bar' + +figma.connect(SideBar.SubmenuItem, '', { + props: { + ariaCurrent: figma.enum('State', { + Default: false, + Focus: false, + Hover: false, + Select: 'page', + }), + children: figma.string('Label'), + }, + example: (props) => ( + + {props.children} + + ), +}) diff --git a/src/core/side-bar/submenu/submenu-list-item.tsx b/src/core/side-bar/submenu/submenu-list-item.tsx index 6fa9e715d..630183cf0 100644 --- a/src/core/side-bar/submenu/submenu-list-item.tsx +++ b/src/core/side-bar/submenu/submenu-list-item.tsx @@ -25,3 +25,5 @@ export function SideBarSubmenuListItem({ children, ...props }: SideBarSubmenuLis ) } + +SideBarSubmenuListItem.displayName = 'SideBar.SubmenuItem' diff --git a/src/core/side-bar/submenu/submenu.figma.tsx b/src/core/side-bar/submenu/submenu.figma.tsx new file mode 100644 index 000000000..07902bd65 --- /dev/null +++ b/src/core/side-bar/submenu/submenu.figma.tsx @@ -0,0 +1,9 @@ +import figma from '@figma/code-connect' +import { SideBar } from '../side-bar' + +figma.connect(SideBar.Submenu, '', { + props: { + children: figma.children('*'), + }, + example: (props) => {props.children}, +}) diff --git a/src/core/side-bar/submenu/submenu.tsx b/src/core/side-bar/submenu/submenu.tsx index 217025c79..7d847ea4f 100644 --- a/src/core/side-bar/submenu/submenu.tsx +++ b/src/core/side-bar/submenu/submenu.tsx @@ -24,4 +24,6 @@ export function SideBarSubmenu({ children, ...rest }: SideBarSubmenu.Props) { return {children} } +SideBarSubmenu.displayName = 'SideBar.Submenu' + SideBarSubmenu.Item = SideBarSubmenuListItem diff --git a/src/core/top-bar/avatar-button/avatar-button.tsx b/src/core/top-bar/avatar-button/avatar-button.tsx index a652f7efa..faf285e2f 100644 --- a/src/core/top-bar/avatar-button/avatar-button.tsx +++ b/src/core/top-bar/avatar-button/avatar-button.tsx @@ -1,5 +1,5 @@ import { cx } from '@linaria/core' -import { Avatar } from '../../avatar/avatar' +import { Avatar } from '#src/core/avatar' import { elTopBarAvatarButton } from './styles' import type { ButtonHTMLAttributes, ReactNode } from 'react' @@ -31,7 +31,7 @@ export function TopBarAvatarButton({ }: TopBarAvatarButton.Props) { return ( diff --git a/src/core/top-bar/avatar-menu/avatar-menu.figma.tsx b/src/core/top-bar/avatar-menu/avatar-menu.figma.tsx new file mode 100644 index 000000000..dc8b7de37 --- /dev/null +++ b/src/core/top-bar/avatar-menu/avatar-menu.figma.tsx @@ -0,0 +1,9 @@ +import figma from '@figma/code-connect' +import { TopBar } from '../top-bar' + +figma.connect(TopBar.AvatarMenu, '', { + props: { + children: figma.string('Initials'), + }, + example: (props) => TODO: add menu items, +}) diff --git a/src/core/top-bar/avatar-menu/avatar-menu.tsx b/src/core/top-bar/avatar-menu/avatar-menu.tsx index 85bbfcb5d..267e78aa7 100644 --- a/src/core/top-bar/avatar-menu/avatar-menu.tsx +++ b/src/core/top-bar/avatar-menu/avatar-menu.tsx @@ -38,3 +38,5 @@ export function TopBarAvatarMenu({ children, id, initials, maxWidth, maxHeight, ) } + +TopBarAvatarMenu.displayName = 'TopBar.AvatarMenu' diff --git a/src/core/top-bar/brand-logo/brand-logo.figma.tsx b/src/core/top-bar/brand-logo/brand-logo.figma.tsx new file mode 100644 index 000000000..11de24ef0 --- /dev/null +++ b/src/core/top-bar/brand-logo/brand-logo.figma.tsx @@ -0,0 +1,27 @@ +import figma from '@figma/code-connect' +import { TopBar } from '../top-bar' + +figma.connect(TopBar.BrandLogo, '', { + props: { + brand: figma.enum('Brand', { + Reapit: 'Reapit', + 'Console Owner': 'Console Owner', + 'Console Pay': 'Console Pay', + 'Console Tenant': 'Console Tenant', + 'Reapit Connect': 'Reapit Connect', + 'Reapit Projector': 'Reapit Projector', + 'Reapit Sales': 'Reapit Sales', + 'Reapit Lettings': 'Reapit Lettings', + 'Reapit PM': 'Reapit PM', + 'PM Demo': 'PM Demo', + 'PM Sales': 'PM Sales', + 'PM Inspect': 'PM Inspect', + 'Reapit Forms': 'Reapit Forms', + 'Reapit Websites': 'Reapit Websites', + 'Reapit Proposals': 'Reapit Proposals', + KeyWhere: 'KeyWhere', + 'Auto Responder': 'Auto Responder', + }), + }, + example: (props) => , +}) diff --git a/src/core/top-bar/brand-logo/brand-logo.tsx b/src/core/top-bar/brand-logo/brand-logo.tsx index e760b59a1..9a503127b 100644 --- a/src/core/top-bar/brand-logo/brand-logo.tsx +++ b/src/core/top-bar/brand-logo/brand-logo.tsx @@ -24,3 +24,5 @@ export function BrandLogo({ appName, href = '/', ...rest }: BrandLogo.Props) { ) } + +BrandLogo.displayName = 'TopBar.BrandLogo' diff --git a/src/core/top-bar/main-nav/main-nav-list-item.figma.tsx b/src/core/top-bar/main-nav/main-nav-list-item.figma.tsx new file mode 100644 index 000000000..7fd05b4b5 --- /dev/null +++ b/src/core/top-bar/main-nav/main-nav-list-item.figma.tsx @@ -0,0 +1,19 @@ +import figma from '@figma/code-connect' +import { TopBar } from '../top-bar' + +figma.connect(TopBar.NavItem, '', { + props: { + ariaCurrent: figma.enum('State', { + Default: false, + Focus: false, + Hover: false, + Select: 'page', + }), + label: figma.string('Label'), + }, + example: (props) => ( + + {props.label} + + ), +}) diff --git a/src/core/top-bar/main-nav/main-nav-list-item.tsx b/src/core/top-bar/main-nav/main-nav-list-item.tsx index 40ee8a1db..c529fd2dd 100644 --- a/src/core/top-bar/main-nav/main-nav-list-item.tsx +++ b/src/core/top-bar/main-nav/main-nav-list-item.tsx @@ -20,3 +20,5 @@ export function TopBarMainNavListItem(props: TopBarMainNavListItem.Props) { ) } + +TopBarMainNavListItem.displayName = 'TopBar.NavItem' diff --git a/src/core/top-bar/main-nav/main-nav-menu-list-item.figma.tsx b/src/core/top-bar/main-nav/main-nav-menu-list-item.figma.tsx new file mode 100644 index 000000000..00888b60d --- /dev/null +++ b/src/core/top-bar/main-nav/main-nav-menu-list-item.figma.tsx @@ -0,0 +1,19 @@ +import figma from '@figma/code-connect' +import { TopBar } from '../top-bar' + +figma.connect(TopBar.NavMenuItem, '', { + props: { + ariaCurrent: figma.enum('State', { + Default: false, + Focus: false, + Hover: false, + Select: 'page', + }), + label: figma.textContent('Label'), + }, + example: (props) => ( + + TODO: Add menu items + + ), +}) diff --git a/src/core/top-bar/main-nav/main-nav-menu-list-item.tsx b/src/core/top-bar/main-nav/main-nav-menu-list-item.tsx index 650bf35bd..fdae25562 100644 --- a/src/core/top-bar/main-nav/main-nav-menu-list-item.tsx +++ b/src/core/top-bar/main-nav/main-nav-menu-list-item.tsx @@ -35,3 +35,5 @@ export function TopBarMainNavMenuListItem({ children, id, label, ...rest }: TopB ) } + +TopBarMainNavMenuListItem.displayName = 'TopBar.NavMenuItem' diff --git a/src/core/top-bar/main-nav/main-nav.figma.tsx b/src/core/top-bar/main-nav/main-nav.figma.tsx new file mode 100644 index 000000000..e57a604e8 --- /dev/null +++ b/src/core/top-bar/main-nav/main-nav.figma.tsx @@ -0,0 +1,9 @@ +import figma from '@figma/code-connect' +import { TopBar } from '../top-bar' + +figma.connect(TopBar.MainNav, '', { + props: { + children: figma.children('*'), + }, + example: (props) => {props.children}, +}) diff --git a/src/core/top-bar/main-nav/main-nav.tsx b/src/core/top-bar/main-nav/main-nav.tsx index 6c2a40633..479280702 100644 --- a/src/core/top-bar/main-nav/main-nav.tsx +++ b/src/core/top-bar/main-nav/main-nav.tsx @@ -31,5 +31,7 @@ export function TopBarMainNav({ 'aria-label': ariaLabel = 'Main navigation', chi ) } +TopBarMainNav.displayName = 'TopBar.MainNav' + TopBarMainNav.Item = TopBarMainNavListItem TopBarMainNav.MenuItem = TopBarMainNavMenuListItem diff --git a/src/core/top-bar/nav-search-button/nav-search-button.tsx b/src/core/top-bar/nav-search-button/nav-search-button.tsx index c22b085e7..d63ab2ea0 100644 --- a/src/core/top-bar/nav-search-button/nav-search-button.tsx +++ b/src/core/top-bar/nav-search-button/nav-search-button.tsx @@ -48,3 +48,5 @@ export function TopBarNavSearchButton({ shortcut, onClick, ...rest }: TopBarNavS ) } + +TopBarNavSearchButton.displayName = 'TopBar.SearchButton' diff --git a/src/core/top-bar/nav-search-icon-item/nav-search-icon-item.tsx b/src/core/top-bar/nav-search-icon-item/nav-search-icon-item.tsx index f8f716fb9..432627e02 100644 --- a/src/core/top-bar/nav-search-icon-item/nav-search-icon-item.tsx +++ b/src/core/top-bar/nav-search-icon-item/nav-search-icon-item.tsx @@ -17,3 +17,5 @@ export namespace TopBarNavSearchIconItem { export function TopBarNavSearchIconItem({ 'aria-label': ariaLabel, ...rest }: TopBarNavSearchIconItem.Props) { return } /> } + +TopBarNavSearchIconItem.displayName = 'TopBar.SearchIconItem' diff --git a/src/core/top-bar/nav-search/nav-search.figma.tsx b/src/core/top-bar/nav-search/nav-search.figma.tsx new file mode 100644 index 000000000..6eac5a423 --- /dev/null +++ b/src/core/top-bar/nav-search/nav-search.figma.tsx @@ -0,0 +1,11 @@ +import figma from '@figma/code-connect' +import { TopBar } from '../top-bar' + +figma.connect(TopBar.NavSearch, '', { + example: () => ( + {}} />} + iconItem={ {}} />} + /> + ), +}) diff --git a/src/core/top-bar/nav-search/nav-search.tsx b/src/core/top-bar/nav-search/nav-search.tsx index f941285fb..f84c752d2 100644 --- a/src/core/top-bar/nav-search/nav-search.tsx +++ b/src/core/top-bar/nav-search/nav-search.tsx @@ -31,5 +31,7 @@ export function TopBarNavSearch({ button, iconItem, ...rest }: TopBarNavSearch.P ) } +TopBarNavSearch.displayName = 'TopBar.NavSearch' + TopBarNavSearch.Button = TopBarNavSearchButton TopBarNavSearch.IconItem = TopBarNavSearchIconItem diff --git a/src/core/top-bar/secondary-nav/secondary-nav-list-item.figma.tsx b/src/core/top-bar/secondary-nav/secondary-nav-list-item.figma.tsx new file mode 100644 index 000000000..c0bbe8820 --- /dev/null +++ b/src/core/top-bar/secondary-nav/secondary-nav-list-item.figma.tsx @@ -0,0 +1,27 @@ +import figma from '@figma/code-connect' +import { TopBar } from '../top-bar' + +figma.connect(TopBar.NavIconItem, '', { + props: { + ariaCurrent: figma.enum('State', { + Default: false, + Focus: false, + Hover: false, + Select: 'page', + }), + tooltip: figma.nestedProps('Tooltip', { + description: figma.string('Description'), + }), + hasBadge: figma.boolean('Badge'), + icon: figma.instance('Icon'), + }, + example: (props) => ( + + ), +}) diff --git a/src/core/top-bar/secondary-nav/secondary-nav-list-item.tsx b/src/core/top-bar/secondary-nav/secondary-nav-list-item.tsx index 6e36b7eee..43e6beeed 100644 --- a/src/core/top-bar/secondary-nav/secondary-nav-list-item.tsx +++ b/src/core/top-bar/secondary-nav/secondary-nav-list-item.tsx @@ -20,3 +20,5 @@ export function TopBarSecondaryNavListItem(props: TopBarSecondaryNavListItem.Pro ) } + +TopBarSecondaryNavListItem.displayName = 'TopBar.NavIconItem' diff --git a/src/core/top-bar/secondary-nav/secondary-nav-menu-list-item.tsx b/src/core/top-bar/secondary-nav/secondary-nav-menu-list-item.tsx index 32893469c..7e372117b 100644 --- a/src/core/top-bar/secondary-nav/secondary-nav-menu-list-item.tsx +++ b/src/core/top-bar/secondary-nav/secondary-nav-menu-list-item.tsx @@ -43,3 +43,5 @@ export function TopBarSecondaryNavMenuListItem({ ) } + +TopBarSecondaryNavMenuListItem.displayName = 'TopBar.NavIconMenuItem' diff --git a/src/core/top-bar/secondary-nav/secondary-nav.figma.tsx b/src/core/top-bar/secondary-nav/secondary-nav.figma.tsx new file mode 100644 index 000000000..94f94d8c2 --- /dev/null +++ b/src/core/top-bar/secondary-nav/secondary-nav.figma.tsx @@ -0,0 +1,9 @@ +import figma from '@figma/code-connect' +import { TopBar } from '../top-bar' + +figma.connect(TopBar.SecondaryNav, '', { + props: { + children: figma.children('*'), + }, + example: (props) => {props.children}, +}) diff --git a/src/core/top-bar/secondary-nav/secondary-nav.tsx b/src/core/top-bar/secondary-nav/secondary-nav.tsx index a5ae214fe..069302495 100644 --- a/src/core/top-bar/secondary-nav/secondary-nav.tsx +++ b/src/core/top-bar/secondary-nav/secondary-nav.tsx @@ -35,5 +35,7 @@ export function TopBarSecondaryNav({ ) } +TopBarSecondaryNav.displayName = 'TopBar.SecondaryNav' + TopBarSecondaryNav.Item = TopBarSecondaryNavListItem TopBarSecondaryNav.MenuItem = TopBarSecondaryNavMenuListItem diff --git a/src/core/top-bar/top-bar.figma.tsx b/src/core/top-bar/top-bar.figma.tsx new file mode 100644 index 000000000..33fa85a00 --- /dev/null +++ b/src/core/top-bar/top-bar.figma.tsx @@ -0,0 +1,38 @@ +import { AppSwitcher } from '../app-switcher' +import figma from '@figma/code-connect' +import { TopBar } from './top-bar' + +figma.connect(TopBar, '', { + props: { + appSwitcher: figma.boolean('App switcher', { + true: TODO: add app switcher menu content, + false: undefined, + }), + avatarButton: figma.children('Avatar button'), + brandLogo: figma.children('Brand logo'), + mainNav: figma.children('Main nav'), + search: figma.boolean('Search', { + // NOTE: We do this instead of using figma.children because the search icon button in + // Figma is just a nav icon item and we can't differentiate it from the other nav icon + // item present as an instance layer in the top bar's XS breakpoint variant. + true: ( + {}} />} + iconItem={ {}} />} + /> + ), + false: undefined, + }), + secondaryNav: figma.children('Secondary nav'), + }, + example: (props) => ( + + ), +}) diff --git a/src/storybook/changelog.mdx b/src/storybook/changelog.mdx index ff5ec547e..39e5c25a5 100644 --- a/src/storybook/changelog.mdx +++ b/src/storybook/changelog.mdx @@ -29,6 +29,7 @@ Beta versions should be relatively stable but subject to occssional breaking cha - **feat:** Added Figma Code Connect for `Dialog`, `Drawer`, and `Menu`. - **feat:** Added Figma Code Connect for `LabelText`, `PageHeader` and `Pagination`. Includes the following breaking changes: - Renamed `breadcrumbs` prop on `PageHeader` to `navigation` to better align with Figma component. +- **feat:** Added Figma Code Connect for `SideBr` and `TopBar`. ### **5.0.0-beta.51 - 12/09/25** From 666059ed63e53e6d7ea1b9cf253f7785a28b5cee Mon Sep 17 00:00:00 2001 From: Kurt Doherty Date: Tue, 16 Sep 2025 15:49:58 +1000 Subject: [PATCH 2/2] fix snapshots --- .../checkbox-group.test.tsx.snap | 207 +++++++++--------- .../__snapshots__/checkbox.test.tsx.snap | 81 ++++--- .../__snapshots__/label.test.tsx.snap | 6 +- .../table-row-selection.test.tsx.snap | 12 +- 4 files changed, 146 insertions(+), 160 deletions(-) diff --git a/src/core/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap b/src/core/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap index 9f49fa58d..7d186f1ac 100644 --- a/src/core/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap +++ b/src/core/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap @@ -4,10 +4,10 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
should match snapshot 1`] = `