@flipdish/ui-library 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Button/index.cjs +4 -1
- package/dist/components/atoms/Button/index.cjs.map +1 -1
- package/dist/components/atoms/Button/index.d.ts +2 -0
- package/dist/components/atoms/Button/index.d.ts.map +1 -1
- package/dist/components/atoms/Button/index.js +4 -1
- package/dist/components/atoms/Button/index.js.map +1 -1
- package/dist/components/atoms/Checkbox/index.cjs +4 -2
- package/dist/components/atoms/Checkbox/index.cjs.map +1 -1
- package/dist/components/atoms/Checkbox/index.d.ts +3 -1
- package/dist/components/atoms/Checkbox/index.d.ts.map +1 -1
- package/dist/components/atoms/Checkbox/index.js +4 -2
- package/dist/components/atoms/Checkbox/index.js.map +1 -1
- package/dist/components/atoms/Input/index.cjs +7 -4
- package/dist/components/atoms/Input/index.cjs.map +1 -1
- package/dist/components/atoms/Input/index.d.ts +6 -2
- package/dist/components/atoms/Input/index.d.ts.map +1 -1
- package/dist/components/atoms/Input/index.js +7 -4
- package/dist/components/atoms/Input/index.js.map +1 -1
- package/dist/components/atoms/RadioButton/index.cjs +8 -4
- package/dist/components/atoms/RadioButton/index.cjs.map +1 -1
- package/dist/components/atoms/RadioButton/index.d.ts +8 -3
- package/dist/components/atoms/RadioButton/index.d.ts.map +1 -1
- package/dist/components/atoms/RadioButton/index.js +8 -4
- package/dist/components/atoms/RadioButton/index.js.map +1 -1
- package/dist/components/atoms/Toggle/index.cjs +4 -2
- package/dist/components/atoms/Toggle/index.cjs.map +1 -1
- package/dist/components/atoms/Toggle/index.d.ts +3 -1
- package/dist/components/atoms/Toggle/index.d.ts.map +1 -1
- package/dist/components/atoms/Toggle/index.js +4 -2
- package/dist/components/atoms/Toggle/index.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.cjs +3 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.cjs.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.js +3 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs +9 -5
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts +5 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js +9 -5
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.cjs +4 -2
- package/dist/components/molecules/Breadcrumbs/index.cjs.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.d.ts +8 -2
- package/dist/components/molecules/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.js +4 -2
- package/dist/components/molecules/Breadcrumbs/index.js.map +1 -1
- package/dist/components/molecules/Pagination/components/pagination-base.cjs +11 -4
- package/dist/components/molecules/Pagination/components/pagination-base.cjs.map +1 -1
- package/dist/components/molecules/Pagination/components/pagination-base.d.ts +8 -1
- package/dist/components/molecules/Pagination/components/pagination-base.d.ts.map +1 -1
- package/dist/components/molecules/Pagination/components/pagination-base.js +11 -4
- package/dist/components/molecules/Pagination/components/pagination-base.js.map +1 -1
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.cjs +16 -16
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.cjs.map +1 -1
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.d.ts +8 -8
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.d.ts.map +1 -1
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.js +16 -16
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.js.map +1 -1
- package/dist/components/molecules/ProgressSteps/index.cjs +19 -12
- package/dist/components/molecules/ProgressSteps/index.cjs.map +1 -1
- package/dist/components/molecules/ProgressSteps/index.d.ts +3 -3
- package/dist/components/molecules/ProgressSteps/index.d.ts.map +1 -1
- package/dist/components/molecules/ProgressSteps/index.js +19 -12
- package/dist/components/molecules/ProgressSteps/index.js.map +1 -1
- package/dist/components/molecules/ProgressSteps/progressSteps.types.d.ts +10 -0
- package/dist/components/molecules/ProgressSteps/progressSteps.types.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.js.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.js.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.js.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.js.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.js.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.js.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.cjs +4 -2
- package/dist/components/molecules/Select/components/multi-select.cjs.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.d.ts +1 -1
- package/dist/components/molecules/Select/components/multi-select.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.js +4 -2
- package/dist/components/molecules/Select/components/multi-select.js.map +1 -1
- package/dist/components/molecules/Select/components/select-item.cjs +6 -3
- package/dist/components/molecules/Select/components/select-item.cjs.map +1 -1
- package/dist/components/molecules/Select/components/select-item.d.ts +3 -1
- package/dist/components/molecules/Select/components/select-item.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/select-item.js +6 -3
- package/dist/components/molecules/Select/components/select-item.js.map +1 -1
- package/dist/components/molecules/Select/components/select-shared.cjs.map +1 -1
- package/dist/components/molecules/Select/components/select-shared.d.ts +6 -0
- package/dist/components/molecules/Select/components/select-shared.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/select-shared.js.map +1 -1
- package/dist/components/molecules/Select/index.cjs +6 -4
- package/dist/components/molecules/Select/index.cjs.map +1 -1
- package/dist/components/molecules/Select/index.d.ts +1 -1
- package/dist/components/molecules/Select/index.d.ts.map +1 -1
- package/dist/components/molecules/Select/index.js +6 -4
- package/dist/components/molecules/Select/index.js.map +1 -1
- package/dist/components/molecules/Tabs/index.cjs +24 -8
- package/dist/components/molecules/Tabs/index.cjs.map +1 -1
- package/dist/components/molecules/Tabs/index.d.ts +17 -7
- package/dist/components/molecules/Tabs/index.d.ts.map +1 -1
- package/dist/components/molecules/Tabs/index.js +24 -8
- package/dist/components/molecules/Tabs/index.js.map +1 -1
- package/dist/components/organisms/ActivityFeed/index.cjs +8 -2
- package/dist/components/organisms/ActivityFeed/index.cjs.map +1 -1
- package/dist/components/organisms/ActivityFeed/index.d.ts +3 -1
- package/dist/components/organisms/ActivityFeed/index.d.ts.map +1 -1
- package/dist/components/organisms/ActivityFeed/index.js +8 -2
- package/dist/components/organisms/ActivityFeed/index.js.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.cjs +5 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.d.ts +2 -0
- package/dist/components/organisms/CommandMenu/components/command-menu-item.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.js +5 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.js.map +1 -1
- package/dist/components/organisms/CommandMenu/index.cjs +6 -4
- package/dist/components/organisms/CommandMenu/index.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/index.d.ts +8 -2
- package/dist/components/organisms/CommandMenu/index.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/index.js +6 -4
- package/dist/components/organisms/CommandMenu/index.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.cjs +3 -2
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.d.ts +6 -1
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.js +3 -2
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.cjs +9 -6
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.d.ts +10 -2
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.js +9 -6
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-button.cjs +2 -2
- package/dist/components/organisms/HeaderNavigation/components/nav-button.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-button.d.ts +3 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-button.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-button.js +2 -2
- package/dist/components/organisms/HeaderNavigation/components/nav-button.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-item.cjs +4 -4
- package/dist/components/organisms/HeaderNavigation/components/nav-item.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-item.d.ts +3 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-item.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-item.js +4 -4
- package/dist/components/organisms/HeaderNavigation/components/nav-item.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-list.cjs +9 -3
- package/dist/components/organisms/HeaderNavigation/components/nav-list.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-list.d.ts +3 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-list.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-list.js +9 -3
- package/dist/components/organisms/HeaderNavigation/components/nav-list.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/headerNavigation.types.d.ts +17 -8
- package/dist/components/organisms/HeaderNavigation/headerNavigation.types.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/index.cjs +9 -2
- package/dist/components/organisms/HeaderNavigation/index.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/index.d.ts +10 -1
- package/dist/components/organisms/HeaderNavigation/index.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/index.js +10 -3
- package/dist/components/organisms/HeaderNavigation/index.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.cjs +2 -2
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.d.ts +8 -2
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.js +2 -2
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs +15 -5
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts +12 -2
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js +15 -5
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-button.cjs +2 -2
- package/dist/components/organisms/SidebarNavigation/components/nav-button.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-button.d.ts +3 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-button.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-button.js +2 -2
- package/dist/components/organisms/SidebarNavigation/components/nav-button.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-item.cjs +4 -4
- package/dist/components/organisms/SidebarNavigation/components/nav-item.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-item.d.ts +3 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-item.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-item.js +4 -4
- package/dist/components/organisms/SidebarNavigation/components/nav-item.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-list.cjs +9 -3
- package/dist/components/organisms/SidebarNavigation/components/nav-list.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-list.d.ts +3 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-list.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-list.js +9 -3
- package/dist/components/organisms/SidebarNavigation/components/nav-list.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.cjs +1 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.d.ts +3 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.js +1 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.cjs +10 -6
- package/dist/components/organisms/SidebarNavigation/index.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.d.ts +7 -1
- package/dist/components/organisms/SidebarNavigation/index.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.js +11 -7
- package/dist/components/organisms/SidebarNavigation/index.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/sidebarNavigation.types.d.ts +21 -8
- package/dist/components/organisms/SidebarNavigation/sidebarNavigation.types.d.ts.map +1 -1
- package/dist/components/organisms/Table/index.cjs +13 -8
- package/dist/components/organisms/Table/index.cjs.map +1 -1
- package/dist/components/organisms/Table/index.d.ts +17 -3
- package/dist/components/organisms/Table/index.d.ts.map +1 -1
- package/dist/components/organisms/Table/index.js +13 -8
- package/dist/components/organisms/Table/index.js.map +1 -1
- package/dist/utilities/testIdUtils/index.cjs +70 -0
- package/dist/utilities/testIdUtils/index.cjs.map +1 -0
- package/dist/utilities/testIdUtils/index.d.ts +57 -0
- package/dist/utilities/testIdUtils/index.d.ts.map +1 -0
- package/dist/utilities/testIdUtils/index.js +58 -0
- package/dist/utilities/testIdUtils/index.js.map +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerNavigation.types.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/HeaderNavigation/headerNavigation.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"headerNavigation.types.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/HeaderNavigation/headerNavigation.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gGAAgG;IAChG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4FAA4F;IAC5F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACjF,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,EAAE,IAAI,CAAC;CACf,CAAC"}
|
|
@@ -6,6 +6,7 @@ var FlipdishLogo = require('@flipdish/ui-library/components/atoms/FlipdishLogo')
|
|
|
6
6
|
var Input = require('@flipdish/ui-library/components/atoms/Input');
|
|
7
7
|
var Tabs = require('@flipdish/ui-library/components/molecules/Tabs');
|
|
8
8
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
9
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
9
10
|
var mobileHeader = require('./components/mobile-header.cjs');
|
|
10
11
|
var navAccountCard = require('./components/nav-account-card.cjs');
|
|
11
12
|
var navButton = require('./components/nav-button.cjs');
|
|
@@ -22,8 +23,14 @@ const isItemActive = (href, activeUrl) => {
|
|
|
22
23
|
return true;
|
|
23
24
|
return false;
|
|
24
25
|
};
|
|
25
|
-
const HeaderNavigationBase = ({ activeUrl, items, subItems, hideBorder = false, actions, centered = false, secondaryType = 'buttons', footerItems = [], account, }) => {
|
|
26
|
+
const HeaderNavigationBase = ({ activeUrl, items, subItems, hideBorder = false, actions, centered = false, secondaryType = 'buttons', footerItems = [], account, 'data-testid': dataTestId, }) => {
|
|
26
27
|
const isActive = (item) => item.current ?? isItemActive(item.href, activeUrl);
|
|
28
|
+
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'header-navigation', rootName: 'header-navigation' });
|
|
29
|
+
// The mobile drawer and the desktop header both render the same nav items; re-root the
|
|
30
|
+
// drawer subtree under `drawer` so their derived testids don't collide in the DOM.
|
|
31
|
+
const drawerTestId = testIdUtils.joinTestId(rootTestId, 'drawer');
|
|
32
|
+
const navItemTestId = (item, base = rootTestId) => item['data-testid'] ?? testIdUtils.joinTestId(base, `nav-item-${item.id ?? testIdUtils.slugifyTestId(item.label)}`);
|
|
33
|
+
const subNavItemTestId = (item) => item['data-testid'] ?? testIdUtils.joinTestId(rootTestId, `sub-nav-${item.id ?? testIdUtils.slugifyTestId(item.label)}`);
|
|
27
34
|
const activeParent = items.find((item) => isActive(item) || item.items?.some((sub) => isItemActive(sub.href, activeUrl)));
|
|
28
35
|
const activeSubNavItems = subItems || activeParent?.items;
|
|
29
36
|
const showSecondaryNav = activeSubNavItems && activeSubNavItems.length > 0;
|
|
@@ -34,7 +41,7 @@ const HeaderNavigationBase = ({ activeUrl, items, subItems, hideBorder = false,
|
|
|
34
41
|
}))
|
|
35
42
|
: [];
|
|
36
43
|
const activeTabKey = activeSubNavItems?.find((item) => isActive(item))?.label;
|
|
37
|
-
return (jsxRuntime.jsxs(
|
|
44
|
+
return (jsxRuntime.jsxs(testIdUtils.TestIdProvider, { value: rootTestId, children: [jsxRuntime.jsx(mobileHeader.MobileNavigationHeader, { testIdPrefix: rootTestId, children: jsxRuntime.jsxs("aside", { className: "flex h-full max-w-full flex-col overflow-auto bg-primary pt-4", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 px-4", children: [jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm" }), jsxRuntime.jsx(Input.Input, { size: "md", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg })] }), jsxRuntime.jsx(navList.NavList, { items: items, activeUrl: activeUrl, className: "flex-1", testIdPrefix: drawerTestId }), (footerItems.length > 0 || account) && (jsxRuntime.jsxs("div", { className: "mt-auto flex flex-col gap-3 p-4", children: [footerItems.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-col", children: footerItems.map((item) => (jsxRuntime.jsx(navItem.NavItemBase, { type: "link", href: item.href, icon: item.icon, badge: item.badge, current: isActive(item), "data-testid": navItemTestId(item, drawerTestId), children: item.label }, item.label))) })), account && (jsxRuntime.jsx(navAccountCard.NavAccountCard, { items: account.accounts, selectedAccountId: account.selectedAccountId, menuItems: account.menuItems, bottomMenuItems: account.bottomMenuItems }))] }))] }) }), jsxRuntime.jsxs("header", { className: "max-lg:hidden", children: [jsxRuntime.jsx("section", { className: cx.cx('flex h-16 w-full items-center justify-center bg-primary', (!hideBorder || showSecondaryNav) && 'border-b border-secondary'), children: jsxRuntime.jsxs("div", { className: cx.cx('flex w-full max-w-container items-center pr-3 pl-4 md:px-8', centered && 'gap-8'), children: [jsxRuntime.jsx("div", { className: cx.cx('flex items-center', centered ? 'flex-1' : 'mr-4'), children: jsxRuntime.jsx("a", { "aria-label": "Go to homepage", href: "/", className: "rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm" }) }) }), jsxRuntime.jsx("nav", { children: jsxRuntime.jsx("ul", { className: "flex items-center gap-0.5", children: items.map((item) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(navButton.NavButton, { current: isActive(item), href: item.href, "data-testid": navItemTestId(item), children: item.label }) }, item.label))) }) }), (actions || centered) && jsxRuntime.jsx("div", { className: cx.cx('flex items-center gap-3', centered ? 'flex-1 justify-end' : 'ml-auto'), children: actions })] }) }), showSecondaryNav && (jsxRuntime.jsx("section", { className: cx.cx('flex w-full items-center justify-center bg-primary', !hideBorder && 'border-b border-secondary'), children: secondaryType === 'tabs' ? (jsxRuntime.jsx("div", { className: "w-full max-w-container px-8 pt-3", children: jsxRuntime.jsx(Tabs.Tabs, { selectedKey: activeTabKey, children: jsxRuntime.jsx(Tabs.TabList, { size: "sm", type: "underline", items: tabItems, className: "-mb-px before:hidden" }) }) })) : (jsxRuntime.jsxs("div", { className: cx.cx('flex h-16 w-full max-w-container items-center gap-8 px-8', centered ? 'justify-center' : 'justify-between'), children: [jsxRuntime.jsx("nav", { children: jsxRuntime.jsx("ul", { className: cx.cx('flex items-center gap-0.5', centered && 'justify-center'), children: activeSubNavItems.map((item) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(navButton.NavButton, { href: item.href, current: isActive(item), "data-testid": subNavItemTestId(item), children: item.label }) }, item.label))) }) }), !centered && jsxRuntime.jsx(Input.Input, { shortcut: true, "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg, size: "sm", className: "max-w-70" })] })) }))] })] }));
|
|
38
45
|
};
|
|
39
46
|
|
|
40
47
|
exports.NavAccountCard = navAccountCard.NavAccountCard;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/HeaderNavigation/index.tsx"],"sourcesContent":[null],"names":["_jsxs","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/HeaderNavigation/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","joinTestId","slugifyTestId","_jsxs","TestIdProvider","_jsx","MobileNavigationHeader","FlipdishLogo","Input","SearchLg","NavList","NavItemBase","NavAccountCard","cx","NavButton","Tabs","TabList"],"mappings":"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"}
|
|
@@ -31,6 +31,10 @@ type NavItem = {
|
|
|
31
31
|
badge?: ReactNode;
|
|
32
32
|
/** List of sub-items to display. */
|
|
33
33
|
items?: NavItem[];
|
|
34
|
+
/** Stable id used to derive this item's `data-testid` (falls back to a slug of `label`). */
|
|
35
|
+
id?: string;
|
|
36
|
+
/** Overrides the derived `data-testid` for this item. */
|
|
37
|
+
'data-testid'?: string;
|
|
34
38
|
};
|
|
35
39
|
export interface HeaderNavigationBaseProps {
|
|
36
40
|
/** URL of the currently active item. */
|
|
@@ -59,6 +63,11 @@ export interface HeaderNavigationBaseProps {
|
|
|
59
63
|
footerItems?: NavItem[];
|
|
60
64
|
/** Account configuration for the card at the bottom of the mobile drawer. When omitted the account card is not rendered. */
|
|
61
65
|
account?: NavAccountData;
|
|
66
|
+
/**
|
|
67
|
+
* Overrides the root `data-testid`. Defaults to `fd-header-navigation`. Child
|
|
68
|
+
* elements derive their testids from this prefix (e.g. `<root>--nav-item-orders`).
|
|
69
|
+
*/
|
|
70
|
+
'data-testid'?: string;
|
|
62
71
|
}
|
|
63
|
-
export declare const HeaderNavigationBase: ({ activeUrl, items, subItems, hideBorder, actions, centered, secondaryType, footerItems, account, }: HeaderNavigationBaseProps) => import("react").JSX.Element;
|
|
72
|
+
export declare const HeaderNavigationBase: ({ activeUrl, items, subItems, hideBorder, actions, centered, secondaryType, footerItems, account, "data-testid": dataTestId, }: HeaderNavigationBaseProps) => import("react").JSX.Element;
|
|
64
73
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/HeaderNavigation/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/HeaderNavigation/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAkB,KAAK,sBAAsB,EAAE,KAAK,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAKjH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,sBAAsB,EAAE,KAAK,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACjI,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,wDAAwD;IACxD,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,gFAAgF;IAChF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACrC,iDAAiD;IACjD,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;CAC5C,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,4FAA4F;IAC5F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,MAAM,WAAW,yBAAyB;IACxC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAEnC,wFAAwF;IACxF,WAAW,CAAC,EAAE,OAAO,EAAE,CAAC;IAExB,4HAA4H;IAC5H,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,GAAI,gIAWlC,yBAAyB,gCAmI3B,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { jsxs,
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { SearchLg } from '@flipdish/ui-icons';
|
|
3
3
|
import { FlipdishLogo } from '@flipdish/ui-library/components/atoms/FlipdishLogo';
|
|
4
4
|
import { Input } from '@flipdish/ui-library/components/atoms/Input';
|
|
5
5
|
import { Tabs, TabList } from '@flipdish/ui-library/components/molecules/Tabs';
|
|
6
6
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
7
|
+
import { useResolvedTestId, joinTestId, TestIdProvider, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
7
8
|
import { MobileNavigationHeader } from './components/mobile-header.js';
|
|
8
9
|
import { NavAccountCard } from './components/nav-account-card.js';
|
|
9
10
|
export { NavAccountMenu } from './components/nav-account-card.js';
|
|
@@ -21,8 +22,14 @@ const isItemActive = (href, activeUrl) => {
|
|
|
21
22
|
return true;
|
|
22
23
|
return false;
|
|
23
24
|
};
|
|
24
|
-
const HeaderNavigationBase = ({ activeUrl, items, subItems, hideBorder = false, actions, centered = false, secondaryType = 'buttons', footerItems = [], account, }) => {
|
|
25
|
+
const HeaderNavigationBase = ({ activeUrl, items, subItems, hideBorder = false, actions, centered = false, secondaryType = 'buttons', footerItems = [], account, 'data-testid': dataTestId, }) => {
|
|
25
26
|
const isActive = (item) => item.current ?? isItemActive(item.href, activeUrl);
|
|
27
|
+
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'header-navigation', rootName: 'header-navigation' });
|
|
28
|
+
// The mobile drawer and the desktop header both render the same nav items; re-root the
|
|
29
|
+
// drawer subtree under `drawer` so their derived testids don't collide in the DOM.
|
|
30
|
+
const drawerTestId = joinTestId(rootTestId, 'drawer');
|
|
31
|
+
const navItemTestId = (item, base = rootTestId) => item['data-testid'] ?? joinTestId(base, `nav-item-${item.id ?? slugifyTestId(item.label)}`);
|
|
32
|
+
const subNavItemTestId = (item) => item['data-testid'] ?? joinTestId(rootTestId, `sub-nav-${item.id ?? slugifyTestId(item.label)}`);
|
|
26
33
|
const activeParent = items.find((item) => isActive(item) || item.items?.some((sub) => isItemActive(sub.href, activeUrl)));
|
|
27
34
|
const activeSubNavItems = subItems || activeParent?.items;
|
|
28
35
|
const showSecondaryNav = activeSubNavItems && activeSubNavItems.length > 0;
|
|
@@ -33,7 +40,7 @@ const HeaderNavigationBase = ({ activeUrl, items, subItems, hideBorder = false,
|
|
|
33
40
|
}))
|
|
34
41
|
: [];
|
|
35
42
|
const activeTabKey = activeSubNavItems?.find((item) => isActive(item))?.label;
|
|
36
|
-
return (jsxs(
|
|
43
|
+
return (jsxs(TestIdProvider, { value: rootTestId, children: [jsx(MobileNavigationHeader, { testIdPrefix: rootTestId, children: jsxs("aside", { className: "flex h-full max-w-full flex-col overflow-auto bg-primary pt-4", children: [jsxs("div", { className: "flex flex-col gap-5 px-4", children: [jsx(FlipdishLogo, { size: "sm" }), jsx(Input, { size: "md", "aria-label": "Search", placeholder: "Search", icon: SearchLg })] }), jsx(NavList, { items: items, activeUrl: activeUrl, className: "flex-1", testIdPrefix: drawerTestId }), (footerItems.length > 0 || account) && (jsxs("div", { className: "mt-auto flex flex-col gap-3 p-4", children: [footerItems.length > 0 && (jsx("div", { className: "flex flex-col", children: footerItems.map((item) => (jsx(NavItemBase, { type: "link", href: item.href, icon: item.icon, badge: item.badge, current: isActive(item), "data-testid": navItemTestId(item, drawerTestId), children: item.label }, item.label))) })), account && (jsx(NavAccountCard, { items: account.accounts, selectedAccountId: account.selectedAccountId, menuItems: account.menuItems, bottomMenuItems: account.bottomMenuItems }))] }))] }) }), jsxs("header", { className: "max-lg:hidden", children: [jsx("section", { className: cx('flex h-16 w-full items-center justify-center bg-primary', (!hideBorder || showSecondaryNav) && 'border-b border-secondary'), children: jsxs("div", { className: cx('flex w-full max-w-container items-center pr-3 pl-4 md:px-8', centered && 'gap-8'), children: [jsx("div", { className: cx('flex items-center', centered ? 'flex-1' : 'mr-4'), children: jsx("a", { "aria-label": "Go to homepage", href: "/", className: "rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(FlipdishLogo, { size: "sm" }) }) }), jsx("nav", { children: jsx("ul", { className: "flex items-center gap-0.5", children: items.map((item) => (jsx("li", { children: jsx(NavButton, { current: isActive(item), href: item.href, "data-testid": navItemTestId(item), children: item.label }) }, item.label))) }) }), (actions || centered) && jsx("div", { className: cx('flex items-center gap-3', centered ? 'flex-1 justify-end' : 'ml-auto'), children: actions })] }) }), showSecondaryNav && (jsx("section", { className: cx('flex w-full items-center justify-center bg-primary', !hideBorder && 'border-b border-secondary'), children: secondaryType === 'tabs' ? (jsx("div", { className: "w-full max-w-container px-8 pt-3", children: jsx(Tabs, { selectedKey: activeTabKey, children: jsx(TabList, { size: "sm", type: "underline", items: tabItems, className: "-mb-px before:hidden" }) }) })) : (jsxs("div", { className: cx('flex h-16 w-full max-w-container items-center gap-8 px-8', centered ? 'justify-center' : 'justify-between'), children: [jsx("nav", { children: jsx("ul", { className: cx('flex items-center gap-0.5', centered && 'justify-center'), children: activeSubNavItems.map((item) => (jsx("li", { children: jsx(NavButton, { href: item.href, current: isActive(item), "data-testid": subNavItemTestId(item), children: item.label }) }, item.label))) }) }), !centered && jsx(Input, { shortcut: true, "aria-label": "Search", placeholder: "Search", icon: SearchLg, size: "sm", className: "max-w-70" })] })) }))] })] }));
|
|
37
44
|
};
|
|
38
45
|
|
|
39
46
|
export { HeaderNavigationBase, NavAccountCard, NavItemBase };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/HeaderNavigation/index.tsx"],"sourcesContent":[null],"names":["_jsxs","
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/HeaderNavigation/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -13,14 +13,14 @@ var sidebarMenuButton = require('./sidebar-menu-button.cjs');
|
|
|
13
13
|
* Consumers who supply their own header instead should set `showMobileHeader={false}`
|
|
14
14
|
* and embed a {@link SidebarMenuButton}.
|
|
15
15
|
*/
|
|
16
|
-
const MobileNavigationHeader = ({ isOpen, onOpenChange, controls }) => (jsxRuntime.jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-secondary p-3 pl-4 lg:hidden", children: [jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm" }), jsxRuntime.jsx(sidebarMenuButton.SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls })] }));
|
|
16
|
+
const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, 'data-testid': dataTestId }) => (jsxRuntime.jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-secondary p-3 pl-4 lg:hidden", children: [jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm" }), jsxRuntime.jsx(sidebarMenuButton.SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
|
|
17
17
|
/**
|
|
18
18
|
* The controlled slide-over drawer that holds the mobile navigation. Its open
|
|
19
19
|
* state is owned by `SidebarNavigation`, so it can be driven by either the
|
|
20
20
|
* built-in header or an externally-embedded {@link SidebarMenuButton}. Hidden at
|
|
21
21
|
* `lg` and up, where the fixed rail takes over.
|
|
22
22
|
*/
|
|
23
|
-
const MobileNavigationDrawer = ({ isOpen, onOpenChange, id, children }) => (jsxRuntime.jsx(reactAriaComponents.ModalOverlay, { isDismissable: true, isOpen: isOpen, onOpenChange: onOpenChange, className: ({ isEntering, isExiting }) => cx.cx('fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden', isEntering && 'duration-300 ease-in-out animate-in fade-in', isExiting && 'duration-200 ease-in-out animate-out fade-out'), children: ({ state }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": "Close navigation menu", onPress: () => state.close(), className: "fixed top-2.5 right-3 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2", children: jsxRuntime.jsx(uiIcons.X, { className: "size-6" }) }), jsxRuntime.jsx(reactAriaComponents.Modal, { className: "w-full max-w-74 cursor-auto will-change-transform", children: jsxRuntime.jsx(reactAriaComponents.Dialog, { id: id, className: "h-dvh outline-hidden focus:outline-hidden", children: children }) })] })) }));
|
|
23
|
+
const MobileNavigationDrawer = ({ isOpen, onOpenChange, id, children, 'aria-label': ariaLabel = 'Navigation menu', 'data-testid': dataTestId, }) => (jsxRuntime.jsx(reactAriaComponents.ModalOverlay, { isDismissable: true, isOpen: isOpen, onOpenChange: onOpenChange, className: ({ isEntering, isExiting }) => cx.cx('fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden', isEntering && 'duration-300 ease-in-out animate-in fade-in', isExiting && 'duration-200 ease-in-out animate-out fade-out'), children: ({ state }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": "Close navigation menu", "data-testid": dataTestId, onPress: () => state.close(), className: "fixed top-2.5 right-3 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2", children: jsxRuntime.jsx(uiIcons.X, { className: "size-6" }) }), jsxRuntime.jsx(reactAriaComponents.Modal, { className: "w-full max-w-74 cursor-auto will-change-transform", children: jsxRuntime.jsx(reactAriaComponents.Dialog, { id: id, "aria-label": ariaLabel, className: "h-dvh outline-hidden focus:outline-hidden", children: children }) })] })) }));
|
|
24
24
|
|
|
25
25
|
exports.MobileNavigationDrawer = MobileNavigationDrawer;
|
|
26
26
|
exports.MobileNavigationHeader = MobileNavigationHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile-header.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","FlipdishLogo","SidebarMenuButton","AriaModalOverlay","cx","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"mobile-header.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","FlipdishLogo","SidebarMenuButton","AriaModalOverlay","cx","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;;;AAoBA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAA+B,MAC/HA,eAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,kGAAkG,EAAA,QAAA,EAAA,CAClHC,cAAA,CAACC,yBAAY,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,CAAG,EAC1BD,cAAA,CAACE,mCAAiB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,CAAA,EAAA,CACjH;AAgBX;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,aAAa,EAAE,UAAU,GACG,MAC5BF,eAACG,gCAAgB,EAAA,EACf,aAAa,EAAA,IAAA,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnCC,KAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTL,eAAA,CAAAM,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEL,cAAA,CAACM,0BAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAAA,aAAA,EACrB,UAAU,EACvB,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjON,cAAA,CAACO,SAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbP,cAAA,CAACQ,yBAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtER,cAAA,CAACS,0BAAU,IAAC,EAAE,EAAE,EAAE,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAC7F,QAAQ,EAAA,CACE,EAAA,CACH,CAAA,EAAA,CACX,CACJ,EAAA,CACgB;;;;;"}
|
|
@@ -6,6 +6,8 @@ interface MobileNavigationHeaderProps {
|
|
|
6
6
|
onOpenChange: (open: boolean) => void;
|
|
7
7
|
/** ID of the drawer this header's toggle controls, for `aria-controls`. */
|
|
8
8
|
controls?: string;
|
|
9
|
+
/** Test id applied to the hamburger toggle. */
|
|
10
|
+
'data-testid'?: string;
|
|
9
11
|
}
|
|
10
12
|
/**
|
|
11
13
|
* The built-in mobile top bar: Flipdish logo + hamburger toggle, shown below the
|
|
@@ -13,7 +15,7 @@ interface MobileNavigationHeaderProps {
|
|
|
13
15
|
* Consumers who supply their own header instead should set `showMobileHeader={false}`
|
|
14
16
|
* and embed a {@link SidebarMenuButton}.
|
|
15
17
|
*/
|
|
16
|
-
export declare const MobileNavigationHeader: ({ isOpen, onOpenChange, controls }: MobileNavigationHeaderProps) => import("react").JSX.Element;
|
|
18
|
+
export declare const MobileNavigationHeader: ({ isOpen, onOpenChange, controls, "data-testid": dataTestId }: MobileNavigationHeaderProps) => import("react").JSX.Element;
|
|
17
19
|
interface MobileNavigationDrawerProps extends PropsWithChildren {
|
|
18
20
|
/** Controlled open state of the drawer. */
|
|
19
21
|
isOpen: boolean;
|
|
@@ -21,6 +23,10 @@ interface MobileNavigationDrawerProps extends PropsWithChildren {
|
|
|
21
23
|
onOpenChange: (open: boolean) => void;
|
|
22
24
|
/** ID applied to the drawer dialog, so a toggle can reference it via `aria-controls`. */
|
|
23
25
|
id?: string;
|
|
26
|
+
/** Accessible name for the drawer dialog, announced to screen readers. */
|
|
27
|
+
'aria-label'?: string;
|
|
28
|
+
/** Test id applied to the drawer's close button. */
|
|
29
|
+
'data-testid'?: string;
|
|
24
30
|
}
|
|
25
31
|
/**
|
|
26
32
|
* The controlled slide-over drawer that holds the mobile navigation. Its open
|
|
@@ -28,6 +34,6 @@ interface MobileNavigationDrawerProps extends PropsWithChildren {
|
|
|
28
34
|
* built-in header or an externally-embedded {@link SidebarMenuButton}. Hidden at
|
|
29
35
|
* `lg` and up, where the fixed rail takes over.
|
|
30
36
|
*/
|
|
31
|
-
export declare const MobileNavigationDrawer: ({ isOpen, onOpenChange, id, children }: MobileNavigationDrawerProps) => import("react").JSX.Element;
|
|
37
|
+
export declare const MobileNavigationDrawer: ({ isOpen, onOpenChange, id, children, "aria-label": ariaLabel, "data-testid": dataTestId, }: MobileNavigationDrawerProps) => import("react").JSX.Element;
|
|
32
38
|
export {};
|
|
33
39
|
//# sourceMappingURL=mobile-header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile-header.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,UAAU,2BAA2B;IACnC,oFAAoF;IACpF,MAAM,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"mobile-header.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,UAAU,2BAA2B;IACnC,oFAAoF;IACpF,MAAM,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,+DAA+D,2BAA2B,gCAKhI,CAAC;AAEF,UAAU,2BAA4B,SAAQ,iBAAiB;IAC7D,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,wFAAwF;IACxF,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,yFAAyF;IACzF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,6FAOpC,2BAA2B,gCAgC7B,CAAC"}
|
|
@@ -11,14 +11,14 @@ import { SidebarMenuButton } from './sidebar-menu-button.js';
|
|
|
11
11
|
* Consumers who supply their own header instead should set `showMobileHeader={false}`
|
|
12
12
|
* and embed a {@link SidebarMenuButton}.
|
|
13
13
|
*/
|
|
14
|
-
const MobileNavigationHeader = ({ isOpen, onOpenChange, controls }) => (jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-secondary p-3 pl-4 lg:hidden", children: [jsx(FlipdishLogo, { size: "sm" }), jsx(SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls })] }));
|
|
14
|
+
const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, 'data-testid': dataTestId }) => (jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-secondary p-3 pl-4 lg:hidden", children: [jsx(FlipdishLogo, { size: "sm" }), jsx(SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
|
|
15
15
|
/**
|
|
16
16
|
* The controlled slide-over drawer that holds the mobile navigation. Its open
|
|
17
17
|
* state is owned by `SidebarNavigation`, so it can be driven by either the
|
|
18
18
|
* built-in header or an externally-embedded {@link SidebarMenuButton}. Hidden at
|
|
19
19
|
* `lg` and up, where the fixed rail takes over.
|
|
20
20
|
*/
|
|
21
|
-
const MobileNavigationDrawer = ({ isOpen, onOpenChange, id, children }) => (jsx(ModalOverlay, { isDismissable: true, isOpen: isOpen, onOpenChange: onOpenChange, className: ({ isEntering, isExiting }) => cx('fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden', isEntering && 'duration-300 ease-in-out animate-in fade-in', isExiting && 'duration-200 ease-in-out animate-out fade-out'), children: ({ state }) => (jsxs(Fragment, { children: [jsx(Button, { "aria-label": "Close navigation menu", onPress: () => state.close(), className: "fixed top-2.5 right-3 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(X, { className: "size-6" }) }), jsx(Modal, { className: "w-full max-w-74 cursor-auto will-change-transform", children: jsx(Dialog, { id: id, className: "h-dvh outline-hidden focus:outline-hidden", children: children }) })] })) }));
|
|
21
|
+
const MobileNavigationDrawer = ({ isOpen, onOpenChange, id, children, 'aria-label': ariaLabel = 'Navigation menu', 'data-testid': dataTestId, }) => (jsx(ModalOverlay, { isDismissable: true, isOpen: isOpen, onOpenChange: onOpenChange, className: ({ isEntering, isExiting }) => cx('fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden', isEntering && 'duration-300 ease-in-out animate-in fade-in', isExiting && 'duration-200 ease-in-out animate-out fade-out'), children: ({ state }) => (jsxs(Fragment, { children: [jsx(Button, { "aria-label": "Close navigation menu", "data-testid": dataTestId, onPress: () => state.close(), className: "fixed top-2.5 right-3 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(X, { className: "size-6" }) }), jsx(Modal, { className: "w-full max-w-74 cursor-auto will-change-transform", children: jsx(Dialog, { id: id, "aria-label": ariaLabel, className: "h-dvh outline-hidden focus:outline-hidden", children: children }) })] })) }));
|
|
22
22
|
|
|
23
23
|
export { MobileNavigationDrawer, MobileNavigationHeader };
|
|
24
24
|
//# sourceMappingURL=mobile-header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile-header.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaModalOverlay","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"mobile-header.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaModalOverlay","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;AAoBA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAA+B,MAC/HA,IAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,kGAAkG,EAAA,QAAA,EAAA,CAClHC,GAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,CAAG,EAC1BA,GAAA,CAAC,iBAAiB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,CAAA,EAAA,CACjH;AAgBX;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,aAAa,EAAE,UAAU,GACG,MAC5BA,IAACC,YAAgB,EAAA,EACf,aAAa,EAAA,IAAA,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnC,EAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTF,IAAA,CAAAG,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAACG,MAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAAA,aAAA,EACrB,UAAU,EACvB,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjOH,GAAA,CAACI,CAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbJ,GAAA,CAACK,KAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtEL,GAAA,CAACM,MAAU,IAAC,EAAE,EAAE,EAAE,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAC7F,QAAQ,EAAA,CACE,EAAA,CACH,CAAA,EAAA,CACX,CACJ,EAAA,CACgB;;;;"}
|
|
@@ -5,22 +5,32 @@ var uiIcons = require('@flipdish/ui-icons');
|
|
|
5
5
|
var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
|
|
6
6
|
var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
|
|
7
7
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
8
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
8
9
|
var React = require('react');
|
|
9
10
|
var reactAriaComponents = require('react-aria-components');
|
|
10
11
|
|
|
12
|
+
/** Derive a menu item's testid: explicit override wins, else `<prefix>--menu-item-<id|slug(label)>`. */
|
|
13
|
+
const menuItemTestId = (prefix, item) => item['data-testid'] ?? testIdUtils.joinTestId(prefix, `menu-item-${item.id ?? testIdUtils.slugifyTestId(item.label)}`);
|
|
11
14
|
const POPOVER_ANIMATION = ({ isEntering, isExiting }) => cx.cx('origin-(--trigger-anchor-point) will-change-transform', isEntering &&
|
|
12
15
|
'duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', isExiting &&
|
|
13
16
|
'duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5');
|
|
14
17
|
const NavAccountCardMenuItem = ({ icon: Icon, label, shortcut, ...buttonProps }) => (jsxRuntime.jsx("button", { ...buttonProps, className: cx.cx('group/item w-full cursor-pointer px-1.5 focus:outline-hidden', buttonProps.className), children: jsxRuntime.jsxs("div", { className: cx.cx('flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover', 'outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2'), children: [jsxRuntime.jsxs("div", { className: "flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover", children: [Icon && jsxRuntime.jsx(Icon, { className: "size-5 text-fg-quaternary group-hover/item:text-fg-quaternary_hover" }), " ", label] }), shortcut && (jsxRuntime.jsx("kbd", { className: "flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset", children: shortcut }))] }) }));
|
|
15
|
-
const NavAccountMenu = ({ className, menuItems = [], bottomMenuItems = [],
|
|
16
|
-
const
|
|
18
|
+
const NavAccountMenu = ({ className, menuItems = [], bottomMenuItems = [], testIdPrefix, ...dialogProps }) => {
|
|
19
|
+
const prefix = testIdPrefix ?? testIdUtils.rootTestId('nav-account-menu');
|
|
20
|
+
return (jsxRuntime.jsxs(reactAriaComponents.Dialog, { ...dialogProps, className: cx.cx('w-66 rounded-xl bg-secondary_alt shadow-lg ring ring-secondary_alt outline-hidden', className), children: [menuItems.length > 0 && (jsxRuntime.jsx("div", { className: "rounded-xl bg-primary ring-1 ring-secondary", children: jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5 py-1.5", children: menuItems.map((item) => (jsxRuntime.jsx(NavAccountCardMenuItem, { label: item.label, icon: item.icon, shortcut: item.shortcut, onClick: item.onClick, "data-testid": menuItemTestId(prefix, item) }, item.label))) }) })), bottomMenuItems.length > 0 && (jsxRuntime.jsx("div", { className: "pt-1 pb-1.5", children: bottomMenuItems.map((item) => (jsxRuntime.jsx(NavAccountCardMenuItem, { label: item.label, icon: item.icon, shortcut: item.shortcut, onClick: item.onClick, "data-testid": menuItemTestId(prefix, item) }, item.label))) }))] }));
|
|
21
|
+
};
|
|
22
|
+
const NavAccountCard = ({ popoverPlacement, account, avatarRounded, menuItems, bottomMenuItems, variant = 'full', 'data-testid': dataTestId, }) => {
|
|
17
23
|
const triggerRef = React.useRef(null);
|
|
18
24
|
const isDesktop = useBreakpoints.useBreakpoint('lg');
|
|
19
|
-
|
|
25
|
+
// The trigger is icon/avatar-only with no visible text, so it needs an explicit
|
|
26
|
+
// accessible name (and doubles as the testid anchor for automated tests).
|
|
27
|
+
const accountTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'account', rootName: 'nav-account-card' });
|
|
28
|
+
const triggerLabel = `${account.name} account menu`;
|
|
29
|
+
const menu = jsxRuntime.jsx(NavAccountMenu, { menuItems: menuItems, bottomMenuItems: bottomMenuItems, testIdPrefix: accountTestId });
|
|
20
30
|
if (variant === 'avatar') {
|
|
21
|
-
return (jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { className: ({ isPressed, isFocused }) => cx.cx('group relative inline-flex rounded-full', (isPressed || isFocused) && 'outline-2 outline-offset-2 outline-focus-ring'), children: jsxRuntime.jsx(Avatar.Avatar, { border: true, status: account.status, src: account.avatar, size: "md", alt: account.name, rounded: avatarRounded }) }), jsxRuntime.jsx(reactAriaComponents.Popover, { placement: popoverPlacement ?? 'right bottom', offset: 8, crossOffset: 6, className: POPOVER_ANIMATION, children: menu })] }));
|
|
31
|
+
return (jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": triggerLabel, ...testIdUtils.testIdProps(accountTestId), className: ({ isPressed, isFocused }) => cx.cx('group relative inline-flex rounded-full', (isPressed || isFocused) && 'outline-2 outline-offset-2 outline-focus-ring'), children: jsxRuntime.jsx(Avatar.Avatar, { border: true, status: account.status, src: account.avatar, size: "md", alt: account.name, rounded: avatarRounded }) }), jsxRuntime.jsx(reactAriaComponents.Popover, { placement: popoverPlacement ?? 'right bottom', offset: 8, crossOffset: 6, className: POPOVER_ANIMATION, children: menu })] }));
|
|
22
32
|
}
|
|
23
|
-
return (jsxRuntime.jsxs("div", { ref: triggerRef, className: "relative flex items-center gap-3 rounded-xl bg-primary p-3 ring-1 ring-secondary ring-inset", children: [jsxRuntime.jsx(Avatar.AvatarLabelGroup, { size: "md", src: account.avatar, title: account.name, subtitle: account.email, status: account.status, rounded: avatarRounded }), jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { className: "absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md p-1.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 pressed:bg-primary_hover pressed:text-fg-quaternary_hover", children: jsxRuntime.jsx(uiIcons.ChevronSelectorVertical, { className: "size-4 shrink-0 stroke-[2.25px]" }) }), jsxRuntime.jsx(reactAriaComponents.Popover, { placement: popoverPlacement ?? (isDesktop ? 'right bottom' : 'top right'), triggerRef: triggerRef, offset: 8, className: POPOVER_ANIMATION, children: menu })] })] }));
|
|
33
|
+
return (jsxRuntime.jsxs("div", { ref: triggerRef, className: "relative flex items-center gap-3 rounded-xl bg-primary p-3 ring-1 ring-secondary ring-inset", children: [jsxRuntime.jsx(Avatar.AvatarLabelGroup, { size: "md", src: account.avatar, title: account.name, subtitle: account.email, status: account.status, rounded: avatarRounded }), jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": triggerLabel, ...testIdUtils.testIdProps(accountTestId), className: "absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md p-1.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 pressed:bg-primary_hover pressed:text-fg-quaternary_hover", children: jsxRuntime.jsx(uiIcons.ChevronSelectorVertical, { className: "size-4 shrink-0 stroke-[2.25px]" }) }), jsxRuntime.jsx(reactAriaComponents.Popover, { placement: popoverPlacement ?? (isDesktop ? 'right bottom' : 'top right'), triggerRef: triggerRef, offset: 8, className: POPOVER_ANIMATION, children: menu })] })] }));
|
|
24
34
|
};
|
|
25
35
|
|
|
26
36
|
exports.NavAccountCard = NavAccountCard;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-account-card.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"sourcesContent":[null],"names":["cx","_jsx","_jsxs","AriaDialog","useRef","useBreakpoint","AriaDialogTrigger","AriaButton","Avatar","AriaPopover","AvatarLabelGroup","ChevronSelectorVertical"],"mappings":"
|
|
1
|
+
{"version":3,"file":"nav-account-card.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"sourcesContent":[null],"names":["joinTestId","slugifyTestId","cx","_jsx","_jsxs","rootTestId","AriaDialog","useRef","useBreakpoint","useResolvedTestId","AriaDialogTrigger","AriaButton","testIdProps","Avatar","AriaPopover","AvatarLabelGroup","ChevronSelectorVertical"],"mappings":"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"}
|
|
@@ -23,6 +23,10 @@ export type NavAccountMenuItemType = {
|
|
|
23
23
|
shortcut?: string;
|
|
24
24
|
/** Click handler. */
|
|
25
25
|
onClick?: () => void;
|
|
26
|
+
/** Stable id used to derive the menu item's default `data-testid`. Falls back to a slug of `label`. */
|
|
27
|
+
id?: string;
|
|
28
|
+
/** Overrides the derived `data-testid`. */
|
|
29
|
+
'data-testid'?: string;
|
|
26
30
|
};
|
|
27
31
|
/**
|
|
28
32
|
* Account configuration for the sidebar. The menu exposes the profile/settings
|
|
@@ -35,13 +39,17 @@ export type NavAccountData = {
|
|
|
35
39
|
menuItems?: NavAccountMenuItemType[];
|
|
36
40
|
/** Bottom-section menu items (e.g. Log out). */
|
|
37
41
|
bottomMenuItems?: NavAccountMenuItemType[];
|
|
42
|
+
/** Overrides the account card's derived `data-testid`. */
|
|
43
|
+
'data-testid'?: string;
|
|
38
44
|
};
|
|
39
|
-
export declare const NavAccountMenu: ({ className, menuItems, bottomMenuItems, ...dialogProps }: AriaDialogProps & {
|
|
45
|
+
export declare const NavAccountMenu: ({ className, menuItems, bottomMenuItems, testIdPrefix, ...dialogProps }: AriaDialogProps & {
|
|
40
46
|
className?: string;
|
|
41
47
|
menuItems?: NavAccountMenuItemType[];
|
|
42
48
|
bottomMenuItems?: NavAccountMenuItemType[];
|
|
49
|
+
/** Resolved testid of the account card, used to derive each menu item's default testid. */
|
|
50
|
+
testIdPrefix?: string;
|
|
43
51
|
}) => import("react").JSX.Element;
|
|
44
|
-
export declare const NavAccountCard: ({ popoverPlacement, account, avatarRounded, menuItems, bottomMenuItems, variant, }: {
|
|
52
|
+
export declare const NavAccountCard: ({ popoverPlacement, account, avatarRounded, menuItems, bottomMenuItems, variant, "data-testid": dataTestId, }: {
|
|
45
53
|
popoverPlacement?: Placement;
|
|
46
54
|
/** The account to display. */
|
|
47
55
|
account: NavAccountType;
|
|
@@ -57,5 +65,7 @@ export declare const NavAccountCard: ({ popoverPlacement, account, avatarRounded
|
|
|
57
65
|
* @default 'full'
|
|
58
66
|
*/
|
|
59
67
|
variant?: "full" | "avatar";
|
|
68
|
+
/** Overrides the derived `data-testid` on the account menu trigger. */
|
|
69
|
+
"data-testid"?: string;
|
|
60
70
|
}) => import("react").JSX.Element;
|
|
61
71
|
//# sourceMappingURL=nav-account-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-account-card.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"nav-account-card.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,EAAkB,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvF,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,MAAM,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uGAAuG;IACvG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,0CAA0C;IAC1C,OAAO,EAAE,cAAc,CAAC;IACxB,uEAAuE;IACvE,SAAS,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACrC,gDAAgD;IAChD,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC3C,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AA0CF,eAAO,MAAM,cAAc,GAAI,yEAM5B,eAAe,GAAG;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACrC,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC3C,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,gCAsCA,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,+GAQ5B;IACD,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,8BAA8B;IAC9B,OAAO,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,SAAS,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACrC,gDAAgD;IAChD,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,uEAAuE;IACvE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,gCA4DA,CAAC"}
|
|
@@ -3,22 +3,32 @@ import { ChevronSelectorVertical } from '@flipdish/ui-icons';
|
|
|
3
3
|
import { Avatar, AvatarLabelGroup } from '@flipdish/ui-library/components/atoms/Avatar';
|
|
4
4
|
import { useBreakpoint } from '@flipdish/ui-library/hooks/useBreakpoints';
|
|
5
5
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
6
|
+
import { useResolvedTestId, testIdProps, rootTestId, joinTestId, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
6
7
|
import { useRef } from 'react';
|
|
7
8
|
import { DialogTrigger, Button, Popover, Dialog } from 'react-aria-components';
|
|
8
9
|
|
|
10
|
+
/** Derive a menu item's testid: explicit override wins, else `<prefix>--menu-item-<id|slug(label)>`. */
|
|
11
|
+
const menuItemTestId = (prefix, item) => item['data-testid'] ?? joinTestId(prefix, `menu-item-${item.id ?? slugifyTestId(item.label)}`);
|
|
9
12
|
const POPOVER_ANIMATION = ({ isEntering, isExiting }) => cx('origin-(--trigger-anchor-point) will-change-transform', isEntering &&
|
|
10
13
|
'duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', isExiting &&
|
|
11
14
|
'duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5');
|
|
12
15
|
const NavAccountCardMenuItem = ({ icon: Icon, label, shortcut, ...buttonProps }) => (jsx("button", { ...buttonProps, className: cx('group/item w-full cursor-pointer px-1.5 focus:outline-hidden', buttonProps.className), children: jsxs("div", { className: cx('flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover', 'outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2'), children: [jsxs("div", { className: "flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover", children: [Icon && jsx(Icon, { className: "size-5 text-fg-quaternary group-hover/item:text-fg-quaternary_hover" }), " ", label] }), shortcut && (jsx("kbd", { className: "flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset", children: shortcut }))] }) }));
|
|
13
|
-
const NavAccountMenu = ({ className, menuItems = [], bottomMenuItems = [],
|
|
14
|
-
const
|
|
16
|
+
const NavAccountMenu = ({ className, menuItems = [], bottomMenuItems = [], testIdPrefix, ...dialogProps }) => {
|
|
17
|
+
const prefix = testIdPrefix ?? rootTestId('nav-account-menu');
|
|
18
|
+
return (jsxs(Dialog, { ...dialogProps, className: cx('w-66 rounded-xl bg-secondary_alt shadow-lg ring ring-secondary_alt outline-hidden', className), children: [menuItems.length > 0 && (jsx("div", { className: "rounded-xl bg-primary ring-1 ring-secondary", children: jsx("div", { className: "flex flex-col gap-0.5 py-1.5", children: menuItems.map((item) => (jsx(NavAccountCardMenuItem, { label: item.label, icon: item.icon, shortcut: item.shortcut, onClick: item.onClick, "data-testid": menuItemTestId(prefix, item) }, item.label))) }) })), bottomMenuItems.length > 0 && (jsx("div", { className: "pt-1 pb-1.5", children: bottomMenuItems.map((item) => (jsx(NavAccountCardMenuItem, { label: item.label, icon: item.icon, shortcut: item.shortcut, onClick: item.onClick, "data-testid": menuItemTestId(prefix, item) }, item.label))) }))] }));
|
|
19
|
+
};
|
|
20
|
+
const NavAccountCard = ({ popoverPlacement, account, avatarRounded, menuItems, bottomMenuItems, variant = 'full', 'data-testid': dataTestId, }) => {
|
|
15
21
|
const triggerRef = useRef(null);
|
|
16
22
|
const isDesktop = useBreakpoint('lg');
|
|
17
|
-
|
|
23
|
+
// The trigger is icon/avatar-only with no visible text, so it needs an explicit
|
|
24
|
+
// accessible name (and doubles as the testid anchor for automated tests).
|
|
25
|
+
const accountTestId = useResolvedTestId({ testId: dataTestId, segment: 'account', rootName: 'nav-account-card' });
|
|
26
|
+
const triggerLabel = `${account.name} account menu`;
|
|
27
|
+
const menu = jsx(NavAccountMenu, { menuItems: menuItems, bottomMenuItems: bottomMenuItems, testIdPrefix: accountTestId });
|
|
18
28
|
if (variant === 'avatar') {
|
|
19
|
-
return (jsxs(DialogTrigger, { children: [jsx(Button, { className: ({ isPressed, isFocused }) => cx('group relative inline-flex rounded-full', (isPressed || isFocused) && 'outline-2 outline-offset-2 outline-focus-ring'), children: jsx(Avatar, { border: true, status: account.status, src: account.avatar, size: "md", alt: account.name, rounded: avatarRounded }) }), jsx(Popover, { placement: popoverPlacement ?? 'right bottom', offset: 8, crossOffset: 6, className: POPOVER_ANIMATION, children: menu })] }));
|
|
29
|
+
return (jsxs(DialogTrigger, { children: [jsx(Button, { "aria-label": triggerLabel, ...testIdProps(accountTestId), className: ({ isPressed, isFocused }) => cx('group relative inline-flex rounded-full', (isPressed || isFocused) && 'outline-2 outline-offset-2 outline-focus-ring'), children: jsx(Avatar, { border: true, status: account.status, src: account.avatar, size: "md", alt: account.name, rounded: avatarRounded }) }), jsx(Popover, { placement: popoverPlacement ?? 'right bottom', offset: 8, crossOffset: 6, className: POPOVER_ANIMATION, children: menu })] }));
|
|
20
30
|
}
|
|
21
|
-
return (jsxs("div", { ref: triggerRef, className: "relative flex items-center gap-3 rounded-xl bg-primary p-3 ring-1 ring-secondary ring-inset", children: [jsx(AvatarLabelGroup, { size: "md", src: account.avatar, title: account.name, subtitle: account.email, status: account.status, rounded: avatarRounded }), jsxs(DialogTrigger, { children: [jsx(Button, { className: "absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md p-1.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 pressed:bg-primary_hover pressed:text-fg-quaternary_hover", children: jsx(ChevronSelectorVertical, { className: "size-4 shrink-0 stroke-[2.25px]" }) }), jsx(Popover, { placement: popoverPlacement ?? (isDesktop ? 'right bottom' : 'top right'), triggerRef: triggerRef, offset: 8, className: POPOVER_ANIMATION, children: menu })] })] }));
|
|
31
|
+
return (jsxs("div", { ref: triggerRef, className: "relative flex items-center gap-3 rounded-xl bg-primary p-3 ring-1 ring-secondary ring-inset", children: [jsx(AvatarLabelGroup, { size: "md", src: account.avatar, title: account.name, subtitle: account.email, status: account.status, rounded: avatarRounded }), jsxs(DialogTrigger, { children: [jsx(Button, { "aria-label": triggerLabel, ...testIdProps(accountTestId), className: "absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md p-1.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 pressed:bg-primary_hover pressed:text-fg-quaternary_hover", children: jsx(ChevronSelectorVertical, { className: "size-4 shrink-0 stroke-[2.25px]" }) }), jsx(Popover, { placement: popoverPlacement ?? (isDesktop ? 'right bottom' : 'top right'), triggerRef: triggerRef, offset: 8, className: POPOVER_ANIMATION, children: menu })] })] }));
|
|
22
32
|
};
|
|
23
33
|
|
|
24
34
|
export { NavAccountCard, NavAccountMenu };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-account-card.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaDialog","AriaDialogTrigger","AriaButton","AriaPopover"],"mappings":"
|
|
1
|
+
{"version":3,"file":"nav-account-card.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaDialog","AriaDialogTrigger","AriaButton","AriaPopover"],"mappings":";;;;;;;;;AAuDA;AACA,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,IAA4B,KAClE,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,MAAM,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC;AAEhG,MAAM,iBAAiB,GAAG,CAAC,EAAE,UAAU,EAAE,SAAS,EAA+C,KAC/F,EAAE,CACA,uDAAuD,EACvD,UAAU;AACR,IAAA,+JAA+J,EACjK,SAAS;AACP,IAAA,6JAA6J,CAChK;AAEH,MAAM,sBAAsB,GAAG,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,KAAK,EACL,QAAQ,EACR,GAAG,WAAW,EAKqB,MACnCA,mBAAY,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,8DAA8D,EAAE,WAAW,CAAC,SAAS,CAAC,EAAA,QAAA,EAC3HC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,iGAAiG,EACjG,iGAAiG,CAClG,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uFAAuF,EAAA,QAAA,EAAA,CACnG,IAAI,IAAID,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qEAAqE,EAAA,CAAG,EAAA,GAAA,EAAG,KAAK,IACrG,EACL,QAAQ,KACPA,aAAK,SAAS,EAAC,sGAAsG,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAO,CACvI,CAAA,EAAA,CACG,EAAA,CACC,CACV;MAEY,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,YAAY,EACZ,GAAG,WAAW,EAOf,KAAI;IACH,MAAM,MAAM,GAAG,YAAY,IAAI,UAAU,CAAC,kBAAkB,CAAC;AAE7D,IAAA,QACEC,IAAA,CAACC,MAAU,EAAA,EAAA,GAAK,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,mFAAmF,EAAE,SAAS,CAAC,aACvI,SAAS,CAAC,MAAM,GAAG,CAAC,KACnBF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAC1C,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,MAClBA,GAAA,CAAC,sBAAsB,EAAA,EAErB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,iBACR,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,EAAA,EALpC,IAAI,CAAC,KAAK,CAMf,CACH,CAAC,GACE,EAAA,CACF,CACP,EAEA,eAAe,CAAC,MAAM,GAAG,CAAC,KACzBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,YACzB,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,MACxBA,GAAA,CAAC,sBAAsB,EAAA,EAErB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,aAAA,EACR,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,IALpC,IAAI,CAAC,KAAK,CAMf,CACH,CAAC,EAAA,CACE,CACP,CAAA,EAAA,CACU;AAEjB;AAEO,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,OAAO,EACP,aAAa,EACb,SAAS,EACT,eAAe,EACf,OAAO,GAAG,MAAM,EAChB,aAAa,EAAE,UAAU,GAmB1B,KAAI;AACH,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC/C,IAAA,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC;;;AAIrC,IAAA,MAAM,aAAa,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAC;AACjH,IAAA,MAAM,YAAY,GAAG,CAAA,EAAG,OAAO,CAAC,IAAI,eAAe;AAEnD,IAAA,MAAM,IAAI,GAAGA,GAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,GAAI;AAEpH,IAAA,IAAI,OAAO,KAAK,QAAQ,EAAE;QACxB,QACEC,KAACE,aAAiB,EAAA,EAAA,QAAA,EAAA,CAChBH,IAACI,MAAU,EAAA,EAAA,YAAA,EACG,YAAY,EAAA,GACpB,WAAW,CAAC,aAAa,CAAC,EAC9B,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAClC,EAAE,CAAC,yCAAyC,EAAE,CAAC,SAAS,IAAI,SAAS,KAAK,+CAA+C,CAAC,EAAA,QAAA,EAG5HJ,IAAC,MAAM,EAAA,EAAC,MAAM,EAAA,IAAA,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,MAAM,EAAE,IAAI,EAAC,IAAI,EAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,EAAA,CAAI,EAAA,CACxG,EACbA,GAAA,CAACK,OAAW,IAAC,SAAS,EAAE,gBAAgB,IAAI,cAAc,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,iBAAiB,YAChH,IAAI,EAAA,CACO,CAAA,EAAA,CACI;IAExB;IAEA,QACEJ,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,6FAA6F,EAAA,QAAA,EAAA,CAC3HD,GAAA,CAAC,gBAAgB,IACf,IAAI,EAAC,IAAI,EACT,GAAG,EAAE,OAAO,CAAC,MAAM,EACnB,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,QAAQ,EAAE,OAAO,CAAC,KAAK,EACvB,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,OAAO,EAAE,aAAa,EAAA,CACtB,EAEFC,IAAA,CAACE,aAAiB,EAAA,EAAA,QAAA,EAAA,CAChBH,GAAA,CAACI,MAAU,EAAA,EAAA,YAAA,EACG,YAAY,EAAA,GACpB,WAAW,CAAC,aAAa,CAAC,EAC9B,SAAS,EAAC,0UAA0U,EAAA,QAAA,EAEpVJ,GAAA,CAAC,uBAAuB,EAAA,EAAC,SAAS,EAAC,iCAAiC,EAAA,CAAG,EAAA,CAC5D,EACbA,GAAA,CAACK,OAAW,EAAA,EACV,SAAS,EAAE,gBAAgB,KAAK,SAAS,GAAG,cAAc,GAAG,WAAW,CAAC,EACzE,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,iBAAiB,EAAA,QAAA,EAE3B,IAAI,EAAA,CACO,CAAA,EAAA,CACI,CAAA,EAAA,CAChB;AAEV;;;;"}
|
|
@@ -5,12 +5,12 @@ var Tooltip = require('@flipdish/ui-library/components/atoms/Tooltip');
|
|
|
5
5
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
6
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
7
|
|
|
8
|
-
const NavButton = ({ current, selected, label, href, icon: Icon, className, tooltipPlacement = 'right', onClick, children, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, }) => {
|
|
8
|
+
const NavButton = ({ current, selected, label, href, icon: Icon, className, tooltipPlacement = 'right', onClick, children, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'data-testid': dataTestId, }) => {
|
|
9
9
|
const iconOnly = !children;
|
|
10
10
|
// `current` means "this is the current page" (→ aria-current); `selected` is the
|
|
11
11
|
// brand-highlight state (open/selected section), which may differ from the page.
|
|
12
12
|
const isSelected = selected ?? current;
|
|
13
|
-
return (jsxRuntime.jsx(Tooltip.Tooltip, { isDisabled: !label, title: label, placement: tooltipPlacement, children: jsxRuntime.jsxs(reactAriaComponents.Link, { href: href, "aria-label": label, "aria-current": current ? 'page' : undefined, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, onClick: onClick, className: cx.cx('group/item relative flex w-full cursor-pointer items-center justify-center gap-1 rounded-md bg-transparent outline-focus-ring transition duration-100 ease-linear select-none hover:bg-secondary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2', isSelected && 'bg-brand-primary hover:bg-brand-primary', iconOnly ? 'size-9' : 'px-2 py-1.5', className), children: [Icon && (jsxRuntime.jsx(Icon, { "aria-hidden": "true", className: cx.cx('size-5 shrink-0 text-fg-quaternary transition-inherit-all group-hover/item:text-fg-quaternary_hover', isSelected && 'text-fg-brand-primary group-hover/item:text-fg-brand-primary') })), children && (jsxRuntime.jsx("span", { className: cx.cx('px-0.5 text-sm font-semibold transition duration-100 ease-linear group-hover/item:text-secondary_hover', isSelected && 'text-brand-secondary'), children: children }))] }) }));
|
|
13
|
+
return (jsxRuntime.jsx(Tooltip.Tooltip, { isDisabled: !label, title: label, placement: tooltipPlacement, children: jsxRuntime.jsxs(reactAriaComponents.Link, { href: href, "aria-label": label, "aria-current": current ? 'page' : undefined, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "data-testid": dataTestId, onClick: onClick, className: cx.cx('group/item relative flex w-full cursor-pointer items-center justify-center gap-1 rounded-md bg-transparent outline-focus-ring transition duration-100 ease-linear select-none hover:bg-secondary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2', isSelected && 'bg-brand-primary hover:bg-brand-primary', iconOnly ? 'size-9' : 'px-2 py-1.5', className), children: [Icon && (jsxRuntime.jsx(Icon, { "aria-hidden": "true", className: cx.cx('size-5 shrink-0 text-fg-quaternary transition-inherit-all group-hover/item:text-fg-quaternary_hover', isSelected && 'text-fg-brand-primary group-hover/item:text-fg-brand-primary') })), children && (jsxRuntime.jsx("span", { className: cx.cx('px-0.5 text-sm font-semibold transition duration-100 ease-linear group-hover/item:text-secondary_hover', isSelected && 'text-brand-secondary'), children: children }))] }) }));
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
exports.NavButton = NavButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-button.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-button.tsx"],"sourcesContent":[null],"names":["_jsx","Tooltip","_jsxs","AriaLink","cx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"nav-button.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-button.tsx"],"sourcesContent":[null],"names":["_jsx","Tooltip","_jsxs","AriaLink","cx"],"mappings":";;;;;;;AAoCO,MAAM,SAAS,GAAG,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EAAE,IAAI,EACV,SAAS,EACT,gBAAgB,GAAG,OAAO,EAC1B,OAAO,EACP,QAAQ,EACR,eAAe,EAAE,YAAY,EAC7B,eAAe,EAAE,YAAY,EAC7B,aAAa,EAAE,UAAU,GACV,KAAI;AACnB,IAAA,MAAM,QAAQ,GAAG,CAAC,QAAQ;;;AAG1B,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO;IAEtC,QACEA,cAAA,CAACC,eAAO,EAAA,EAAC,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAA,QAAA,EACpEC,eAAA,CAACC,wBAAQ,IACP,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,KAAK,EAAA,cAAA,EACH,OAAO,GAAG,MAAM,GAAG,SAAS,EAAA,eAAA,EAC3B,YAAY,EAAA,eAAA,EACZ,YAAY,EAAA,aAAA,EACd,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEC,KAAE,CACX,kRAAkR,EAClR,UAAU,IAAI,yCAAyC,EACvD,QAAQ,GAAG,QAAQ,GAAG,aAAa,EACnC,SAAS,CACV,EAAA,QAAA,EAAA,CAEA,IAAI,KACHJ,cAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EACS,MAAM,EAClB,SAAS,EAAEI,KAAE,CACX,qGAAqG,EACrG,UAAU,IAAI,8DAA8D,CAC7E,EAAA,CACD,CACH,EAEA,QAAQ,KACPJ,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEI,KAAE,CACX,wGAAwG,EACxG,UAAU,IAAI,sBAAsB,CACrC,EAAA,QAAA,EAEA,QAAQ,EAAA,CACJ,CACR,CAAA,EAAA,CACQ,EAAA,CACH;AAEd;;;;"}
|
|
@@ -24,9 +24,11 @@ interface NavButtonProps {
|
|
|
24
24
|
'aria-expanded'?: boolean;
|
|
25
25
|
/** ID of the region this button controls when it acts as a disclosure trigger. */
|
|
26
26
|
'aria-controls'?: string;
|
|
27
|
+
/** Test id applied to the rendered link element. */
|
|
28
|
+
'data-testid'?: string;
|
|
27
29
|
/** Content to display. */
|
|
28
30
|
children?: ReactNode;
|
|
29
31
|
}
|
|
30
|
-
export declare const NavButton: ({ current, selected, label, href, icon: Icon, className, tooltipPlacement, onClick, children, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, }: NavButtonProps) => import("react").JSX.Element;
|
|
32
|
+
export declare const NavButton: ({ current, selected, label, href, icon: Icon, className, tooltipPlacement, onClick, children, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "data-testid": dataTestId, }: NavButtonProps) => import("react").JSX.Element;
|
|
31
33
|
export {};
|
|
32
34
|
//# sourceMappingURL=nav-button.d.ts.map
|