@flipdish/ui-library 0.23.0 → 0.24.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/molecules/Breadcrumbs/components/breadcrumb-item.cjs +3 -3
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts +6 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js +3 -3
- 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 +7 -6
- package/dist/components/molecules/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.js +5 -3
- package/dist/components/molecules/Breadcrumbs/index.js.map +1 -1
- package/dist/components/molecules/EmptyState/index.cjs +2 -1
- package/dist/components/molecules/EmptyState/index.cjs.map +1 -1
- package/dist/components/molecules/EmptyState/index.d.ts.map +1 -1
- package/dist/components/molecules/EmptyState/index.js +3 -2
- package/dist/components/molecules/EmptyState/index.js.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.cjs +2 -1
- package/dist/components/molecules/Select/components/multi-select.cjs.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.js +3 -2
- package/dist/components/molecules/Select/components/multi-select.js.map +1 -1
- package/dist/components/molecules/Tabs/index.cjs +7 -4
- package/dist/components/molecules/Tabs/index.cjs.map +1 -1
- package/dist/components/molecules/Tabs/index.d.ts +12 -2
- package/dist/components/molecules/Tabs/index.d.ts.map +1 -1
- package/dist/components/molecules/Tabs/index.js +6 -5
- package/dist/components/molecules/Tabs/index.js.map +1 -1
- package/dist/components/organisms/CommandMenu/index.cjs +2 -9
- package/dist/components/organisms/CommandMenu/index.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/index.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/index.js +3 -10
- package/dist/components/organisms/CommandMenu/index.js.map +1 -1
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.cjs +25 -0
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.cjs.map +1 -0
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.d.ts +19 -0
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.d.ts.map +1 -0
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.js +23 -0
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.js.map +1 -0
- package/dist/components/organisms/PageHeader/index.cjs +38 -3
- package/dist/components/organisms/PageHeader/index.cjs.map +1 -1
- package/dist/components/organisms/PageHeader/index.d.ts +78 -3
- package/dist/components/organisms/PageHeader/index.d.ts.map +1 -1
- package/dist/components/organisms/PageHeader/index.js +40 -1
- package/dist/components/organisms/PageHeader/index.js.map +1 -1
- package/dist/components/templates/PageLayout/index.cjs +8 -10
- package/dist/components/templates/PageLayout/index.cjs.map +1 -1
- package/dist/components/templates/PageLayout/index.d.ts +7 -5
- package/dist/components/templates/PageLayout/index.d.ts.map +1 -1
- package/dist/components/templates/PageLayout/index.js +8 -10
- package/dist/components/templates/PageLayout/index.js.map +1 -1
- package/dist/utilities/__internal__/childrenUtils/children.utils.cjs +22 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.cjs.map +1 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.d.ts +12 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.d.ts.map +1 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.js +20 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/organisms/PageHeader/components/page-header-simple.cjs +0 -16
- package/dist/components/organisms/PageHeader/components/page-header-simple.cjs.map +0 -1
- package/dist/components/organisms/PageHeader/components/page-header-simple.d.ts +0 -26
- package/dist/components/organisms/PageHeader/components/page-header-simple.d.ts.map +0 -1
- package/dist/components/organisms/PageHeader/components/page-header-simple.js +0 -14
- package/dist/components/organisms/PageHeader/components/page-header-simple.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C,MAAM,WAAW,oBAAoB;IACnC,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,qFAAqF;IACrF,EAAE,EAAE,MAAM,CAAC;IACX,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACrC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yFAAyF;IACzF,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,sJAYxB,eAAe,gCAmFjB,CAAC"}
|
|
@@ -1,2 +1,41 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { ArrowLeft } from '@flipdish/ui-icons';
|
|
3
|
+
import { Button } from '@flipdish/ui-library/components/atoms/Button';
|
|
4
|
+
import { Divider } from '@flipdish/ui-library/components/atoms/Divider';
|
|
5
|
+
import { Breadcrumbs } from '@flipdish/ui-library/components/molecules/Breadcrumbs';
|
|
6
|
+
import { Select } from '@flipdish/ui-library/components/molecules/Select';
|
|
7
|
+
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
8
|
+
import { useResolvedTestId, TestIdProvider, slugifyTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
9
|
+
import { useState } from 'react';
|
|
10
|
+
import { PageHeaderTabNav } from './components/page-header-tab-nav.js';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Page-level header that anchors every page: a title (`h1`) with optional breadcrumbs
|
|
14
|
+
* (a back link below `lg`), supporting text, action buttons, section tabs and a divider.
|
|
15
|
+
* Navigation (breadcrumbs, tabs) is data-driven because the header re-renders it per
|
|
16
|
+
* breakpoint; actions are a slot because the header only positions them. Spans the full
|
|
17
|
+
* width of its container — `PageLayout` owns the page padding.
|
|
18
|
+
*
|
|
19
|
+
* @summary page header with title, breadcrumbs, actions and section tabs
|
|
20
|
+
*/
|
|
21
|
+
const PageHeader = ({ title, description, breadcrumbs, actions, tabs, selectedTab, defaultSelectedTab, onTabChange, withDivider = false, className, 'data-testid': dataTestId, }) => {
|
|
22
|
+
const pageHeaderTestId = useResolvedTestId({ testId: dataTestId, segment: 'page-header', rootName: 'page-header' });
|
|
23
|
+
const hasTabs = Boolean(tabs?.length);
|
|
24
|
+
const backCrumb = breadcrumbs
|
|
25
|
+
?.slice(0, -1)
|
|
26
|
+
.reverse()
|
|
27
|
+
.find((crumb) => crumb.href);
|
|
28
|
+
// Uncontrolled fallback so the desktop strip and the mobile select always agree on the selection.
|
|
29
|
+
const [internalSelectedTab, setInternalSelectedTab] = useState(defaultSelectedTab);
|
|
30
|
+
const resolvedSelectedTab = selectedTab ?? internalSelectedTab ?? tabs?.[0]?.id ?? '';
|
|
31
|
+
const selectTab = (id) => {
|
|
32
|
+
setInternalSelectedTab(id);
|
|
33
|
+
onTabChange?.(id);
|
|
34
|
+
};
|
|
35
|
+
return (jsx(TestIdProvider, { value: pageHeaderTestId, children: jsxs("div", { "data-testid": pageHeaderTestId, className: cx('flex w-full flex-col gap-4', className), children: [breadcrumbs && breadcrumbs.length > 0 && (jsx(Breadcrumbs, { divider: "slash", className: "max-lg:hidden", children: breadcrumbs.map((crumb) => (jsx(Breadcrumbs.Item, {
|
|
36
|
+
// Pin the segment to the label so an icon-only crumb keeps `--item-<label>` rather than falling back to its href.
|
|
37
|
+
id: crumb.id ?? slugifyTestId(crumb.label), href: crumb.href, icon: crumb.icon, "aria-label": crumb.hideLabel ? crumb.label : undefined, children: crumb.hideLabel ? undefined : crumb.label }, crumb.id ?? crumb.label))) })), backCrumb?.href && (jsx("div", { className: "flex lg:hidden", children: jsx(Button, { href: backCrumb.href, color: "link-gray", size: "sm", iconLeading: ArrowLeft, "data-testid": joinTestId(pageHeaderTestId, 'back'), children: backCrumb.label }) })), jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:items-start lg:gap-x-4 lg:gap-y-5", children: [jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:min-w-80", children: [jsx("h1", { className: "text-xl font-semibold text-primary lg:text-display-xs", children: title }), description && jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsx("div", { className: "flex flex-row-reverse flex-wrap items-center justify-end gap-3 lg:flex-row lg:justify-start", children: actions })] }), hasTabs && tabs && (jsxs(Fragment, { children: [jsx(PageHeaderTabNav, { className: "max-lg:hidden", tabs: tabs, selectedTab: resolvedSelectedTab, onSelect: selectTab, "aria-label": title, "data-testid": joinTestId(pageHeaderTestId, 'tabs') }), jsx(Select, { className: "w-full lg:hidden", size: "md", "aria-label": title, value: resolvedSelectedTab, onChange: (key) => key !== null && selectTab(String(key)), "data-testid": joinTestId(pageHeaderTestId, 'tabs-select'), children: tabs.map((tab) => (jsx(Select.Item, { id: tab.id, label: tab.label, isDisabled: tab.isDisabled }, tab.id))) })] })), withDivider && !hasTabs && jsx(Divider, {})] }) }));
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export { PageHeader };
|
|
2
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -5,16 +5,14 @@ var ErrorBoundary = require('@flipdish/ui-library/providers/ErrorBoundary');
|
|
|
5
5
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
6
6
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
7
7
|
|
|
8
|
+
/** English fallback copy — consumers localise via `renderError`. TODO(i18n): source from ui-library's translation layer once one exists. */
|
|
9
|
+
const DefaultPageError = ({ testId }) => (jsxRuntime.jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full flex-col items-center gap-2 py-2xl text-center", children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-primary", children: "Something went wrong" }), jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: "An unexpected error occurred while loading this page." })] }));
|
|
8
10
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Page-shaped template that standardises the MFE's page chrome: the centered `<main>`
|
|
16
|
-
* scroll container, an optional header region, and a page-scoped error boundary keyed
|
|
17
|
-
* by `pageName`. Consumers drop their page content in as children.
|
|
11
|
+
* Page-shaped template that standardises the MFE's page chrome: a full-width `<main>`
|
|
12
|
+
* that owns the page padding (16px on mobile, 24px from `lg`) and the 16px gap between
|
|
13
|
+
* header and content, an optional header region, and a page-scoped error boundary keyed
|
|
14
|
+
* by `pageName`. Consumers drop their page content in as children — it stretches to the
|
|
15
|
+
* full content width, so children should not add their own horizontal padding.
|
|
18
16
|
*
|
|
19
17
|
* The boundary wraps `children` only, not the header: content (data-fetching, forms,
|
|
20
18
|
* dynamic logic) is where throws realistically happen, and keeping the header outside
|
|
@@ -27,7 +25,7 @@ const DefaultPageError = ({ testId }) => (jsxRuntime.jsxs("div", { role: "alert"
|
|
|
27
25
|
*/
|
|
28
26
|
const PageLayout = ({ pageName, header, children, renderError, onError, className, 'data-testid': dataTestId, }) => {
|
|
29
27
|
const pageLayoutTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'page-layout', rootName: 'page-layout' });
|
|
30
|
-
return (jsxRuntime.jsxs("main", { "data-testid": pageLayoutTestId, className: cx.cx('flex w-full flex-col
|
|
28
|
+
return (jsxRuntime.jsxs("main", { "data-testid": pageLayoutTestId, className: cx.cx('flex w-full flex-col gap-md p-md lg:p-xl', className), children: [header, jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsxRuntime.jsx(DefaultPageError, { testId: testIdUtils.joinTestId(pageLayoutTestId, 'error') }), children: children })] }));
|
|
31
29
|
};
|
|
32
30
|
|
|
33
31
|
exports.PageLayout = PageLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","useResolvedTestId","cx","ErrorBoundary","joinTestId"],"mappings":";;;;;;;AAmCA
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","useResolvedTestId","cx","ErrorBoundary","joinTestId"],"mappings":";;;;;;;AAmCA;AACA,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACvDA,eAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,CAC3GC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA0B,EAC5EA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;;;;;AAeG;MACU,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAe;AAC/B,IAAA,MAAM,gBAAgB,GAAGC,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAEnH,IAAA,QACEF,eAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAmB,gBAAgB,EAAE,SAAS,EAAEG,KAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACtG,MAAM,EAEPF,cAAA,CAACG,2BAAa,EAAA,EACZ,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIH,cAAA,CAAC,gBAAgB,EAAA,EAAC,MAAM,EAAEI,sBAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAA,CAAI,EAAA,QAAA,EAEnI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}
|
|
@@ -7,8 +7,8 @@ export interface PageLayoutProps {
|
|
|
7
7
|
*/
|
|
8
8
|
pageName: string;
|
|
9
9
|
/**
|
|
10
|
-
* Header region. Compose `<
|
|
11
|
-
*
|
|
10
|
+
* Header region. Compose `<PageHeader>` (or a feature wrapper around it) here.
|
|
11
|
+
* Rendered OUTSIDE the error boundary so page chrome (breadcrumbs, back link)
|
|
12
12
|
* stays usable when the content below throws.
|
|
13
13
|
*/
|
|
14
14
|
header?: ReactNode;
|
|
@@ -30,9 +30,11 @@ export interface PageLayoutProps {
|
|
|
30
30
|
'data-testid'?: string;
|
|
31
31
|
}
|
|
32
32
|
/**
|
|
33
|
-
* Page-shaped template that standardises the MFE's page chrome:
|
|
34
|
-
*
|
|
35
|
-
*
|
|
33
|
+
* Page-shaped template that standardises the MFE's page chrome: a full-width `<main>`
|
|
34
|
+
* that owns the page padding (16px on mobile, 24px from `lg`) and the 16px gap between
|
|
35
|
+
* header and content, an optional header region, and a page-scoped error boundary keyed
|
|
36
|
+
* by `pageName`. Consumers drop their page content in as children — it stretches to the
|
|
37
|
+
* full content width, so children should not add their own horizontal padding.
|
|
36
38
|
*
|
|
37
39
|
* The boundary wraps `children` only, not the header: content (data-fetching, forms,
|
|
38
40
|
* dynamic logic) is where throws realistically happen, and keeping the header outside
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IACvE,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IACvE,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAUD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,GAAI,6FAQxB,eAAe,KAAG,SAgBpB,CAAC"}
|
|
@@ -3,16 +3,14 @@ import { ErrorBoundary } from '@flipdish/ui-library/providers/ErrorBoundary';
|
|
|
3
3
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
4
4
|
import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
5
5
|
|
|
6
|
+
/** English fallback copy — consumers localise via `renderError`. TODO(i18n): source from ui-library's translation layer once one exists. */
|
|
7
|
+
const DefaultPageError = ({ testId }) => (jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full flex-col items-center gap-2 py-2xl text-center", children: [jsx("h2", { className: "text-lg font-semibold text-primary", children: "Something went wrong" }), jsx("p", { className: "text-md text-tertiary", children: "An unexpected error occurred while loading this page." })] }));
|
|
6
8
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Page-shaped template that standardises the MFE's page chrome: the centered `<main>`
|
|
14
|
-
* scroll container, an optional header region, and a page-scoped error boundary keyed
|
|
15
|
-
* by `pageName`. Consumers drop their page content in as children.
|
|
9
|
+
* Page-shaped template that standardises the MFE's page chrome: a full-width `<main>`
|
|
10
|
+
* that owns the page padding (16px on mobile, 24px from `lg`) and the 16px gap between
|
|
11
|
+
* header and content, an optional header region, and a page-scoped error boundary keyed
|
|
12
|
+
* by `pageName`. Consumers drop their page content in as children — it stretches to the
|
|
13
|
+
* full content width, so children should not add their own horizontal padding.
|
|
16
14
|
*
|
|
17
15
|
* The boundary wraps `children` only, not the header: content (data-fetching, forms,
|
|
18
16
|
* dynamic logic) is where throws realistically happen, and keeping the header outside
|
|
@@ -25,7 +23,7 @@ const DefaultPageError = ({ testId }) => (jsxs("div", { role: "alert", "data-tes
|
|
|
25
23
|
*/
|
|
26
24
|
const PageLayout = ({ pageName, header, children, renderError, onError, className, 'data-testid': dataTestId, }) => {
|
|
27
25
|
const pageLayoutTestId = useResolvedTestId({ testId: dataTestId, segment: 'page-layout', rootName: 'page-layout' });
|
|
28
|
-
return (jsxs("main", { "data-testid": pageLayoutTestId, className: cx('flex w-full flex-col
|
|
26
|
+
return (jsxs("main", { "data-testid": pageLayoutTestId, className: cx('flex w-full flex-col gap-md p-md lg:p-xl', className), children: [header, jsx(ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsx(DefaultPageError, { testId: joinTestId(pageLayoutTestId, 'error') }), children: children })] }));
|
|
29
27
|
};
|
|
30
28
|
|
|
31
29
|
export { PageLayout };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAmCA
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAmCA;AACA,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACvDA,IAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,CAC3GC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA0B,EAC5EA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;;;;;AAeG;MACU,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAe;AAC/B,IAAA,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAEnH,IAAA,QACED,IAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAmB,gBAAgB,EAAE,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACtG,MAAM,EAEPC,GAAA,CAAC,aAAa,EAAA,EACZ,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIA,GAAA,CAAC,gBAAgB,EAAA,EAAC,MAAM,EAAE,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAA,CAAI,EAAA,QAAA,EAEnI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* `Children.toArray` that also unwraps Fragments, so `<>...</>`-wrapped children are counted
|
|
7
|
+
* and inspected as their actual items. Pure JS, no DOM dependency — works on web and React
|
|
8
|
+
* Native. INTERNAL: import as `#internal/utilities/childrenUtils/children.utils`.
|
|
9
|
+
*
|
|
10
|
+
* Unwrapped items are re-keyed with the JSON-encoded path of Fragment keys above them, so
|
|
11
|
+
* siblings stay unique after flattening. Plain concatenation is ambiguous: Fragment `a` +
|
|
12
|
+
* child `b` and a sibling keyed `a.$b` would both produce `.$a.$b`.
|
|
13
|
+
*/
|
|
14
|
+
const flattenChildren = (children, keyPath = []) => React.Children.toArray(children).flatMap((child) => {
|
|
15
|
+
if (React.isValidElement(child) && child.type === React.Fragment) {
|
|
16
|
+
return flattenChildren(child.props.children, [...keyPath, String(child.key ?? '')]);
|
|
17
|
+
}
|
|
18
|
+
return keyPath.length && React.isValidElement(child) ? React.cloneElement(child, { key: JSON.stringify([...keyPath, String(child.key ?? '')]) }) : child;
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
exports.flattenChildren = flattenChildren;
|
|
22
|
+
//# sourceMappingURL=children.utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"children.utils.cjs","sources":["../../../../src/utilities/__internal__/childrenUtils/children.utils.ts"],"sourcesContent":[null],"names":["Children","isValidElement","Fragment","cloneElement"],"mappings":";;;;AAEA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAAG,CAAC,QAAmB,EAAE,OAAA,GAA6B,EAAE,KAClFA,cAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;IAC3C,IAAIC,oBAAc,CAA2B,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAKC,cAAQ,EAAE;QAC9E,OAAO,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;IACrF;AACA,IAAA,OAAO,OAAO,CAAC,MAAM,IAAID,oBAAc,CAAC,KAAK,CAAC,GAAGE,kBAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK;AAC9I,CAAC;;;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* `Children.toArray` that also unwraps Fragments, so `<>...</>`-wrapped children are counted
|
|
4
|
+
* and inspected as their actual items. Pure JS, no DOM dependency — works on web and React
|
|
5
|
+
* Native. INTERNAL: import as `#internal/utilities/childrenUtils/children.utils`.
|
|
6
|
+
*
|
|
7
|
+
* Unwrapped items are re-keyed with the JSON-encoded path of Fragment keys above them, so
|
|
8
|
+
* siblings stay unique after flattening. Plain concatenation is ambiguous: Fragment `a` +
|
|
9
|
+
* child `b` and a sibling keyed `a.$b` would both produce `.$a.$b`.
|
|
10
|
+
*/
|
|
11
|
+
export declare const flattenChildren: (children: ReactNode, keyPath?: readonly string[]) => ReactNode[];
|
|
12
|
+
//# sourceMappingURL=children.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"children.utils.d.ts","sourceRoot":"","sources":["../../../../src/utilities/__internal__/childrenUtils/children.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GAAI,UAAU,SAAS,EAAE,UAAS,SAAS,MAAM,EAAO,KAAG,SAAS,EAM5F,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Children, isValidElement, Fragment, cloneElement } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* `Children.toArray` that also unwraps Fragments, so `<>...</>`-wrapped children are counted
|
|
5
|
+
* and inspected as their actual items. Pure JS, no DOM dependency — works on web and React
|
|
6
|
+
* Native. INTERNAL: import as `#internal/utilities/childrenUtils/children.utils`.
|
|
7
|
+
*
|
|
8
|
+
* Unwrapped items are re-keyed with the JSON-encoded path of Fragment keys above them, so
|
|
9
|
+
* siblings stay unique after flattening. Plain concatenation is ambiguous: Fragment `a` +
|
|
10
|
+
* child `b` and a sibling keyed `a.$b` would both produce `.$a.$b`.
|
|
11
|
+
*/
|
|
12
|
+
const flattenChildren = (children, keyPath = []) => Children.toArray(children).flatMap((child) => {
|
|
13
|
+
if (isValidElement(child) && child.type === Fragment) {
|
|
14
|
+
return flattenChildren(child.props.children, [...keyPath, String(child.key ?? '')]);
|
|
15
|
+
}
|
|
16
|
+
return keyPath.length && isValidElement(child) ? cloneElement(child, { key: JSON.stringify([...keyPath, String(child.key ?? '')]) }) : child;
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
export { flattenChildren };
|
|
20
|
+
//# sourceMappingURL=children.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"children.utils.js","sources":["../../../../src/utilities/__internal__/childrenUtils/children.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAAG,CAAC,QAAmB,EAAE,OAAA,GAA6B,EAAE,KAClF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;IAC3C,IAAI,cAAc,CAA2B,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC9E,OAAO,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;IACrF;AACA,IAAA,OAAO,OAAO,CAAC,MAAM,IAAI,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK;AAC9I,CAAC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var uiIcons = require('@flipdish/ui-icons');
|
|
5
|
-
var Button = require('@flipdish/ui-library/components/atoms/Button');
|
|
6
|
-
var Input = require('@flipdish/ui-library/components/atoms/Input');
|
|
7
|
-
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
8
|
-
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
9
|
-
|
|
10
|
-
const PageHeaderSimple = ({ title, description, breadcrumbs, backLabel, backHref = '#', actions, showSearch = false, withDivider = false, className, 'data-testid': dataTestId, }) => {
|
|
11
|
-
const pageHeaderTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'page-header-simple', rootName: 'page-header-simple' });
|
|
12
|
-
return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: pageHeaderTestId, children: jsxRuntime.jsxs("div", { "data-testid": pageHeaderTestId, className: cx.cx('relative flex w-full max-w-container flex-col gap-4 bg-primary px-md lg:px-2xl', className), children: [breadcrumbs && jsxRuntime.jsx("div", { className: "max-lg:hidden", children: breadcrumbs }), backLabel && (jsxRuntime.jsx("div", { className: "flex lg:hidden", children: jsxRuntime.jsx(Button.Button, { href: backHref, color: "link-gray", size: "xs", iconLeading: uiIcons.ArrowLeft, children: backLabel }) })), jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col gap-4 lg:flex-row', withDivider && 'border-b border-secondary pb-4'), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [title && jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-primary", children: title }), description && jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsxRuntime.jsx("div", { className: "flex items-start gap-3", children: actions }), showSearch && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input.Input, { className: "w-full md:hidden", size: "md", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'search-mobile') }), jsxRuntime.jsx(Input.Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'search-desktop') })] }))] })] }) }));
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
exports.PageHeaderSimple = PageHeaderSimple;
|
|
16
|
-
//# sourceMappingURL=page-header-simple.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"page-header-simple.cjs","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","TestIdProvider","_jsxs","cx","Button","ArrowLeft","_Fragment","Input","SearchLg","joinTestId"],"mappings":";;;;;;;;;AA+BO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACH,KAAI;AAC1B,IAAA,MAAM,gBAAgB,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC;AAEjI,IAAA,QACEC,cAAA,CAACC,0BAAc,IAAC,KAAK,EAAE,gBAAgB,EAAA,QAAA,EACrCC,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,gBAAgB,EAAE,SAAS,EAAEC,KAAE,CAAC,gFAAgF,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC3I,WAAW,IAAIH,wBAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,YAC7BA,cAAA,CAACI,aAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAEC,iBAAS,EAAA,QAAA,EACvE,SAAS,EAAA,CACH,EAAA,CACL,CACP,EAEDH,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,EAAA,QAAA,EAAA,CACpGD,yBAAK,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAA,CAC1C,KAAK,IAAIF,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,sBAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,GAAK,CAAA,EAAA,CAClE,EAEL,OAAO,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,EAAA,CAAO,EAElE,UAAU,KACTE,eAAA,CAAAI,mBAAA,EAAA,EAAA,QAAA,EAAA,CAEEN,eAACO,WAAK,EAAA,EACJ,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAEC,gBAAQ,EAAA,aAAA,EACDC,sBAAU,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAAA,CAC1D,EAGFT,eAACO,WAAK,EAAA,EACJ,QAAQ,EAAA,IAAA,EACR,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,IAAI,gBACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAEC,gBAAQ,EAAA,aAAA,EACDC,sBAAU,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAC3D,CAAA,EAAA,CACD,CACJ,IACG,CAAA,EAAA,CACF,EAAA,CACS;AAErB;;;;"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
|
-
export interface PageHeaderSimpleProps {
|
|
3
|
-
/** Page title (rendered as the `h1`). */
|
|
4
|
-
title?: string;
|
|
5
|
-
/** Supporting text shown beneath the title. */
|
|
6
|
-
description?: string;
|
|
7
|
-
/**
|
|
8
|
-
* Breadcrumb trail shown on desktop — pass a complete `<Breadcrumbs>` element so the
|
|
9
|
-
* caller owns the items, divider and `type`. Hidden below the `lg` breakpoint.
|
|
10
|
-
*/
|
|
11
|
-
breadcrumbs?: ReactNode;
|
|
12
|
-
/** Mobile "back" link label. When set, a back link replaces the breadcrumbs below `lg`. */
|
|
13
|
-
backLabel?: string;
|
|
14
|
-
backHref?: string;
|
|
15
|
-
/** Action buttons rendered to the right of the title on desktop. */
|
|
16
|
-
actions?: ReactNode;
|
|
17
|
-
/** Render the search inputs (mobile + desktop). */
|
|
18
|
-
showSearch?: boolean;
|
|
19
|
-
/** Render the divider beneath the title row. */
|
|
20
|
-
withDivider?: boolean;
|
|
21
|
-
className?: string;
|
|
22
|
-
/** Overrides the `data-testid` (defaults to `fd-page-header-simple`). */
|
|
23
|
-
'data-testid'?: string;
|
|
24
|
-
}
|
|
25
|
-
export declare const PageHeaderSimple: ({ title, description, breadcrumbs, backLabel, backHref, actions, showSearch, withDivider, className, "data-testid": dataTestId, }: PageHeaderSimpleProps) => import("react").JSX.Element;
|
|
26
|
-
//# sourceMappingURL=page-header-simple.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"page-header-simple.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,GAAI,mIAW9B,qBAAqB,gCAoDvB,CAAC"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { ArrowLeft, SearchLg } from '@flipdish/ui-icons';
|
|
3
|
-
import { Button } from '@flipdish/ui-library/components/atoms/Button';
|
|
4
|
-
import { Input } from '@flipdish/ui-library/components/atoms/Input';
|
|
5
|
-
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
6
|
-
import { useResolvedTestId, TestIdProvider, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
7
|
-
|
|
8
|
-
const PageHeaderSimple = ({ title, description, breadcrumbs, backLabel, backHref = '#', actions, showSearch = false, withDivider = false, className, 'data-testid': dataTestId, }) => {
|
|
9
|
-
const pageHeaderTestId = useResolvedTestId({ testId: dataTestId, segment: 'page-header-simple', rootName: 'page-header-simple' });
|
|
10
|
-
return (jsx(TestIdProvider, { value: pageHeaderTestId, children: jsxs("div", { "data-testid": pageHeaderTestId, className: cx('relative flex w-full max-w-container flex-col gap-4 bg-primary px-md lg:px-2xl', className), children: [breadcrumbs && jsx("div", { className: "max-lg:hidden", children: breadcrumbs }), backLabel && (jsx("div", { className: "flex lg:hidden", children: jsx(Button, { href: backHref, color: "link-gray", size: "xs", iconLeading: ArrowLeft, children: backLabel }) })), jsxs("div", { className: cx('flex flex-col gap-4 lg:flex-row', withDivider && 'border-b border-secondary pb-4'), children: [jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [title && jsx("h1", { className: "text-xl font-semibold text-primary", children: title }), description && jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsx("div", { className: "flex items-start gap-3", children: actions }), showSearch && (jsxs(Fragment, { children: [jsx(Input, { className: "w-full md:hidden", size: "md", "aria-label": "Search", placeholder: "Search", icon: SearchLg, "data-testid": joinTestId(pageHeaderTestId, 'search-mobile') }), jsx(Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: SearchLg, "data-testid": joinTestId(pageHeaderTestId, 'search-desktop') })] }))] })] }) }));
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export { PageHeaderSimple };
|
|
14
|
-
//# sourceMappingURL=page-header-simple.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"page-header-simple.js","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AA+BO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACH,KAAI;AAC1B,IAAA,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC;AAEjI,IAAA,QACEA,GAAA,CAAC,cAAc,IAAC,KAAK,EAAE,gBAAgB,EAAA,QAAA,EACrCC,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,gBAAgB,EAAE,SAAS,EAAE,EAAE,CAAC,gFAAgF,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC3I,WAAW,IAAID,aAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,YAC7BA,GAAA,CAAC,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAE,SAAS,EAAA,QAAA,EACvE,SAAS,EAAA,CACH,EAAA,CACL,CACP,EAEDC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,EAAA,QAAA,EAAA,CACpGA,cAAK,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAA,CAC1C,KAAK,IAAID,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,WAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,GAAK,CAAA,EAAA,CAClE,EAEL,OAAO,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,EAAA,CAAO,EAElE,UAAU,KACTC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAEEF,IAAC,KAAK,EAAA,EACJ,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAE,QAAQ,EAAA,aAAA,EACD,UAAU,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAAA,CAC1D,EAGFA,IAAC,KAAK,EAAA,EACJ,QAAQ,EAAA,IAAA,EACR,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,IAAI,gBACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAE,QAAQ,EAAA,aAAA,EACD,UAAU,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAC3D,CAAA,EAAA,CACD,CACJ,IACG,CAAA,EAAA,CACF,EAAA,CACS;AAErB;;;;"}
|