@bonprix-ds/react-side-navigation 1.2.0 → 1.3.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/src/SideNavigation.d.ts +7 -2
- package/dist/src/SideNavigation.js +15 -15
- package/dist/src/SideNavigation.js.map +1 -1
- package/dist/src/SideNavigationRoot.d.ts +1 -1
- package/dist/src/SideNavigationRoot.js +22 -24
- package/dist/src/SideNavigationRoot.js.map +1 -1
- package/package.json +8 -10
|
@@ -11,6 +11,11 @@ interface SideNavigationItemBaseProps {
|
|
|
11
11
|
/** The icon to display in front of the list item. Either a name of one icon from our icon set or an inline `<svg>` element. */
|
|
12
12
|
icon?: IconOrElement;
|
|
13
13
|
/** Should be set to `true`, if the current page is equal to the link in this item. */
|
|
14
|
+
current?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Should be set to `true`, if the current page is equal to the link in this item.
|
|
17
|
+
* @deprecated [side-navigation-item-active] Use `current` instead.
|
|
18
|
+
*/
|
|
14
19
|
active?: boolean;
|
|
15
20
|
}
|
|
16
21
|
type SideNavigationItemProps<C extends ElementType> = SideNavigationItemBaseProps & {
|
|
@@ -21,11 +26,11 @@ declare const SideNavigation: {
|
|
|
21
26
|
(props: SideNavigationProps): React.JSX.Element;
|
|
22
27
|
displayName: string;
|
|
23
28
|
Section: {
|
|
24
|
-
({ children, title, hideTitle, titleLevel }: SideNavigationSectionProps): React.JSX.Element;
|
|
29
|
+
({ children, title, hideTitle, titleLevel: TitleLevel }: SideNavigationSectionProps): React.JSX.Element;
|
|
25
30
|
displayName: string;
|
|
26
31
|
};
|
|
27
32
|
Item: {
|
|
28
|
-
<C extends ElementType>({ children, icon, active, component, ...props }: SideNavigationItemProps<C>): React.JSX.Element;
|
|
33
|
+
<C extends ElementType>({ children, icon, current: currentProp, active, component, ...props }: SideNavigationItemProps<C>): React.JSX.Element;
|
|
29
34
|
displayName: string;
|
|
30
35
|
};
|
|
31
36
|
};
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import e from "./SideNavigationRoot.js";
|
|
2
2
|
import "react";
|
|
3
3
|
import { IconSlot as t } from "@bonprix-ds/react-icon";
|
|
4
|
-
import n from "@bonprix-ds/
|
|
4
|
+
import { warnDeprecated as n } from "@bonprix-ds/utils/deprecation";
|
|
5
5
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
6
6
|
//#region src/SideNavigation.tsx
|
|
7
|
-
var a = ({ children: e, title: t, hideTitle:
|
|
8
|
-
"aria-label":
|
|
9
|
-
className: "
|
|
10
|
-
children: [!
|
|
11
|
-
|
|
12
|
-
component: o,
|
|
13
|
-
color: "on-bg-mid",
|
|
7
|
+
var a = ({ children: e, title: t, hideTitle: n = !1, titleLevel: a = "h4" }) => /* @__PURE__ */ i("li", {
|
|
8
|
+
"aria-label": n ? t : void 0,
|
|
9
|
+
className: "mb-2 flex flex-col gap-3 border-b border-clr-bg-main-light pb-3 last:border-none",
|
|
10
|
+
children: [!n && /* @__PURE__ */ r(a, {
|
|
11
|
+
className: "typography-h6 my-0 text-start text-clr-on-bg-mid",
|
|
14
12
|
children: t
|
|
15
13
|
}), /* @__PURE__ */ r("ul", {
|
|
16
14
|
className: "flex flex-col gap-3 ps-1",
|
|
@@ -18,19 +16,21 @@ var a = ({ children: e, title: t, hideTitle: a = !1, titleLevel: o = "h4" }) =>
|
|
|
18
16
|
})]
|
|
19
17
|
});
|
|
20
18
|
a.displayName = "SideNavigation.Section";
|
|
21
|
-
var o = ({ children: e, icon:
|
|
22
|
-
let
|
|
19
|
+
var o = ({ children: e, icon: a, current: o, active: s, component: c = "a", ...l }) => {
|
|
20
|
+
let u = c;
|
|
21
|
+
s !== void 0 && n("side-navigation-item-active");
|
|
22
|
+
let d = o ?? s, f = [
|
|
23
23
|
"typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2",
|
|
24
24
|
"no-underline hover:underline underline-offset-[30%]",
|
|
25
25
|
"focus-visible:outline outline-clr-on-bg-high outline-offset-2 outline-2 radius-2 rounded-sm",
|
|
26
26
|
"aria-current-page:underline aria-current-page:decoration-[15%]"
|
|
27
27
|
].join(" ");
|
|
28
|
-
return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ i(
|
|
29
|
-
...
|
|
30
|
-
className:
|
|
31
|
-
"aria-current":
|
|
28
|
+
return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ i(u, {
|
|
29
|
+
...l,
|
|
30
|
+
className: f,
|
|
31
|
+
"aria-current": d ? "page" : void 0,
|
|
32
32
|
children: [/* @__PURE__ */ r(t, {
|
|
33
|
-
icon:
|
|
33
|
+
icon: a,
|
|
34
34
|
className: "h-5 w-5 fill-clr-on-bg-high"
|
|
35
35
|
}), /* @__PURE__ */ r("span", { children: e })]
|
|
36
36
|
}) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavigation.js","names":[],"sources":["../../src/SideNavigation.tsx"],"sourcesContent":["import React, { ComponentProps, ElementType, ReactNode } from \"react\";\n\nimport { IconSlot, type IconOrElement } from \"@bonprix-ds/react-icon\";\nimport
|
|
1
|
+
{"version":3,"file":"SideNavigation.js","names":["SideNavigationRoot","SideNavigationSection","TitleLevel","hideTitle","title","SideNavigationItem","currentProp","props","Component","component","active","warnDeprecated","current","classNames","IconSlot","SideNavigation"],"sources":["../../src/SideNavigation.tsx"],"sourcesContent":["import React, { ComponentProps, ElementType, ReactNode } from \"react\";\n\nimport { IconSlot, type IconOrElement } from \"@bonprix-ds/react-icon\";\nimport { warnDeprecated } from \"@bonprix-ds/utils/deprecation\";\n\nimport SideNavigationRoot, { type NavigationTitle, type SideNavigationProps } from \"./SideNavigationRoot\";\n\nexport type { SideNavigationProps } from \"./SideNavigationRoot\";\n\ninterface SideNavigationSectionProps extends NavigationTitle {\n children: ReactNode;\n}\n\nconst SideNavigationSection = ({ children, title, hideTitle = false, titleLevel: TitleLevel = \"h4\" }: SideNavigationSectionProps) => {\n return (\n <li\n aria-label={hideTitle ? title : undefined}\n className=\"mb-2 flex flex-col gap-3 border-b border-clr-bg-main-light pb-3 last:border-none\"\n >\n {!hideTitle && <TitleLevel className=\"typography-h6 my-0 text-start text-clr-on-bg-mid\">{title}</TitleLevel>}\n <ul className=\"flex flex-col gap-3 ps-1\">{children}</ul>\n </li>\n );\n};\n\nSideNavigationSection.displayName = \"SideNavigation.Section\";\n\ninterface SideNavigationItemBaseProps {\n /** The text content of the list item. */\n children: string;\n /** The icon to display in front of the list item. Either a name of one icon from our icon set or an inline `<svg>` element. */\n icon?: IconOrElement;\n /** Should be set to `true`, if the current page is equal to the link in this item. */\n current?: boolean;\n /**\n * Should be set to `true`, if the current page is equal to the link in this item.\n * @deprecated [side-navigation-item-active] Use `current` instead.\n */\n active?: boolean;\n}\n\ntype SideNavigationItemProps<C extends ElementType> = SideNavigationItemBaseProps & {\n /** The semantic component to render the Link. Preferrably `\"a\"`, `\"button\"` or something like `Link` from NextJS. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, keyof SideNavigationItemBaseProps | \"component\">;\n\nconst SideNavigationItem = <C extends ElementType>({\n children,\n icon,\n current: currentProp,\n active,\n component = \"a\" as C,\n ...props\n}: SideNavigationItemProps<C>) => {\n const Component: ElementType = component;\n if (active !== undefined) warnDeprecated(\"side-navigation-item-active\");\n const current = currentProp ?? active;\n const classNames = [\n \"typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2\",\n \"no-underline hover:underline underline-offset-[30%]\",\n \"focus-visible:outline outline-clr-on-bg-high outline-offset-2 outline-2 radius-2 rounded-sm\",\n \"aria-current-page:underline aria-current-page:decoration-[15%]\",\n ].join(\" \");\n return (\n <li>\n <Component {...props} className={classNames} aria-current={current ? \"page\" : undefined}>\n <IconSlot icon={icon} className=\"h-5 w-5 fill-clr-on-bg-high\" />\n <span>{children}</span>\n </Component>\n </li>\n );\n};\n\nSideNavigationItem.displayName = \"SideNavigation.Item\";\n\nconst SideNavigation = (props: SideNavigationProps) => <SideNavigationRoot {...props} />;\n\nSideNavigation.displayName = \"SideNavigation\";\n\nSideNavigation.Section = SideNavigationSection;\nSideNavigation.Item = SideNavigationItem;\n\nexport default SideNavigation;\n"],"mappings":";;;;;;AAaA,IAAMC,KAAyB,EAAE,aAAU,UAAO,eAAY,IAAO,YAAYC,IAAa,WAE1F,kBAAC,MAAD;CACE,cAAYC,IAAYC,IAAQ,KAAA;CAChC,WAAU;CAFZ,UAAA,CAIG,CAACD,KAAa,kBAACD,GAAD;EAAY,WAAU;EAAoD,UAAAE;CAAkB,CAAA,GAC3G,kBAAC,MAAD;EAAI,WAAU;EAA4B;CAAa,CAAA,CACrD;;AAIR,EAAsB,cAAc;AAqBpC,IAAMC,KAA6C,EACjD,aACA,SACA,SAASC,GACT,WACA,eAAY,KACZ,GAAGC,QAC6B;CAChC,IAAMC,IAAyBC;CAC/B,AAAIC,MAAW,KAAA,KAAWC,EAAe,6BAA6B;CACtE,IAAMC,IAAUN,KAAeI,GACzBG,IAAa;EACjB;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OACE,kBAAC,MAAD,EAAA,UACE,kBAACL,GAAD;EAAW,GAAID;EAAO,WAAWM;EAAY,gBAAcD,IAAU,SAAS,KAAA;EAA9E,UAAA,CACE,kBAACE,GAAD;GAAgB;GAAM,WAAU;EAA+B,CAAA,GAC/D,kBAAC,QAAD,EAAO,YAAe,CAAA,CACb;CACT,CAAA,EAAA,CAAA;AAER;AAEA,EAAmB,cAAc;AAEjC,IAAMC,KAAkB,MAA+B,kBAACf,GAAD,EAAoB,GAAIO,EAAQ,CAAA;AAEvF,EAAe,cAAc,kBAE7B,EAAe,UAAUN,GACzB,EAAe,OAAOI"}
|
|
@@ -13,7 +13,7 @@ export interface SideNavigationProps extends NavigationTitle {
|
|
|
13
13
|
skipLinkTarget?: string;
|
|
14
14
|
}
|
|
15
15
|
declare const SideNavigationRoot: {
|
|
16
|
-
({ children, title, hideTitle, titleLevel, skipLinkLabel, skipLinkTarget, }: SideNavigationProps): React.JSX.Element | null;
|
|
16
|
+
({ children, title, hideTitle, titleLevel: TitleHeading, skipLinkLabel, skipLinkTarget, }: SideNavigationProps): React.JSX.Element | null;
|
|
17
17
|
displayName: string;
|
|
18
18
|
};
|
|
19
19
|
export default SideNavigationRoot;
|
|
@@ -1,46 +1,44 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "react";
|
|
3
|
-
import e from "@bonprix-ds/react-
|
|
4
|
-
import t from "@bonprix-ds/
|
|
5
|
-
import {
|
|
6
|
-
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
3
|
+
import e from "@bonprix-ds/react-button";
|
|
4
|
+
import { useBreakpointDown as t } from "@bonprix-ds/utils";
|
|
5
|
+
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
7
6
|
//#region src/SideNavigationRoot.tsx
|
|
8
|
-
var
|
|
7
|
+
var i = (e) => {
|
|
9
8
|
let t = document.getElementById(e);
|
|
10
9
|
t && (t.tabIndex < 0 && !t.hasAttribute("tabindex") && t.setAttribute("tabindex", "-1"), t.focus());
|
|
11
|
-
},
|
|
12
|
-
...
|
|
13
|
-
className: "preflight relative
|
|
10
|
+
}, a = ({ children: a, title: o, hideTitle: s = !1, titleLevel: c = "h3", skipLinkLabel: l = "Navigation überspringen", skipLinkTarget: u }) => t("m") ? null : /* @__PURE__ */ r("nav", {
|
|
11
|
+
...s ? { "aria-label": o } : { "aria-labelledby": "side-navigation-header" },
|
|
12
|
+
className: "preflight relative h-screen w-fit min-w-[18.75rem] max-w-[31.25rem] overflow-auto bg-clr-bg-main pe-2 ps-6 pt-6",
|
|
14
13
|
"data-bpds": "side-navigation",
|
|
15
14
|
children: [
|
|
16
|
-
|
|
17
|
-
className: "absolute
|
|
18
|
-
children: /* @__PURE__ */
|
|
15
|
+
u && /* @__PURE__ */ n("div", {
|
|
16
|
+
className: "absolute end-2 start-8 top-1 bg-clr-bg-main [clip-path:inset(50%)] focus-within:[clip-path:none]",
|
|
17
|
+
children: /* @__PURE__ */ n(e, {
|
|
19
18
|
variant: "secondary",
|
|
20
19
|
component: "a",
|
|
21
|
-
href: `#${
|
|
22
|
-
onClick: () =>
|
|
20
|
+
href: `#${u}`,
|
|
21
|
+
onClick: () => i(u),
|
|
23
22
|
contentWidth: !0,
|
|
24
|
-
children:
|
|
23
|
+
children: l
|
|
25
24
|
})
|
|
26
25
|
}),
|
|
27
|
-
!
|
|
28
|
-
className: "pt-3
|
|
29
|
-
children: /* @__PURE__ */
|
|
30
|
-
|
|
31
|
-
component: l,
|
|
26
|
+
!s && /* @__PURE__ */ n("div", {
|
|
27
|
+
className: "pb-6 pt-3",
|
|
28
|
+
children: /* @__PURE__ */ n(c, {
|
|
29
|
+
className: "typography-bonprix-h4 my-0 text-balance text-start text-clr-on-bg-high",
|
|
32
30
|
id: "side-navigation-header",
|
|
33
|
-
children:
|
|
31
|
+
children: o
|
|
34
32
|
})
|
|
35
33
|
}),
|
|
36
|
-
/* @__PURE__ */
|
|
34
|
+
/* @__PURE__ */ n("ul", {
|
|
37
35
|
className: "flex flex-col gap-3",
|
|
38
|
-
children:
|
|
36
|
+
children: a
|
|
39
37
|
})
|
|
40
38
|
]
|
|
41
39
|
});
|
|
42
|
-
|
|
40
|
+
a.displayName = "SideNavigation";
|
|
43
41
|
//#endregion
|
|
44
|
-
export {
|
|
42
|
+
export { a as default };
|
|
45
43
|
|
|
46
44
|
//# sourceMappingURL=SideNavigationRoot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavigationRoot.js","names":[],"sources":["../../src/SideNavigationRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode } from \"react\";\n\nimport Button from \"@bonprix-ds/react-button\";\nimport
|
|
1
|
+
{"version":3,"file":"SideNavigationRoot.js","names":["Button","focusSkipLinkTarget","target","id","SideNavigationRoot","TitleHeading","useBreakpointDown","hideTitle","title","skipLinkTarget","skipLinkLabel"],"sources":["../../src/SideNavigationRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode } from \"react\";\n\nimport Button from \"@bonprix-ds/react-button\";\nimport type { TitleLevel } from \"@bonprix-ds/utils\";\nimport { useBreakpointDown } from \"@bonprix-ds/utils\";\n\nexport interface NavigationTitle {\n title: string;\n hideTitle?: boolean;\n titleLevel?: TitleLevel;\n}\n\nexport interface SideNavigationProps extends NavigationTitle {\n children: ReactNode;\n /** The label for the skip link. */\n skipLinkLabel?: string;\n /** The `id` of the element the skip link jumps to, e.g. `\"main-content\"`. If that element isn't focusable, it gets `tabindex=\"-1\"` on activation, so the focus actually moves there. */\n skipLinkTarget?: string;\n}\n\n// Following a fragment link only focuses the target if it is focusable, otherwise\n// just the scroll position and the sequential focus starting point move.\nconst focusSkipLinkTarget = (id: string) => {\n const target = document.getElementById(id);\n if (!target) return;\n // tabIndex is -1 for elements that aren't natively focusable; never touch an existing tabindex\n if (target.tabIndex < 0 && !target.hasAttribute(\"tabindex\")) target.setAttribute(\"tabindex\", \"-1\");\n target.focus();\n};\n\nconst SideNavigationRoot = ({\n children,\n title,\n hideTitle = false,\n titleLevel: TitleHeading = \"h3\",\n skipLinkLabel = \"Navigation überspringen\",\n skipLinkTarget,\n}: SideNavigationProps) => {\n if (useBreakpointDown(\"m\")) return null;\n const labelAttribute = hideTitle ? { \"aria-label\": title } : { \"aria-labelledby\": \"side-navigation-header\" };\n return (\n <nav\n {...labelAttribute}\n className=\"preflight relative h-screen w-fit min-w-[18.75rem] max-w-[31.25rem] overflow-auto bg-clr-bg-main pe-2 ps-6 pt-6\"\n data-bpds=\"side-navigation\"\n >\n {skipLinkTarget && (\n <div className=\"absolute end-2 start-8 top-1 bg-clr-bg-main [clip-path:inset(50%)] focus-within:[clip-path:none]\">\n <Button\n variant=\"secondary\"\n component=\"a\"\n href={`#${skipLinkTarget}`}\n onClick={() => focusSkipLinkTarget(skipLinkTarget)}\n contentWidth\n >\n {skipLinkLabel}\n </Button>\n </div>\n )}\n {!hideTitle && (\n <div className=\"pb-6 pt-3\">\n <TitleHeading className=\"typography-bonprix-h4 my-0 text-balance text-start text-clr-on-bg-high\" id=\"side-navigation-header\">\n {title}\n </TitleHeading>\n </div>\n )}\n <ul className=\"flex flex-col gap-3\">{children}</ul>\n </nav>\n );\n};\n\nSideNavigationRoot.displayName = \"SideNavigation\";\n\nexport default SideNavigationRoot;\n"],"mappings":";;;;;;AAwBA,IAAMC,KAAuB,MAAe;CAC1C,IAAMC,IAAS,SAAS,eAAeC,CAAE;CACzC,AAAKD,MAEDA,EAAO,WAAW,KAAK,CAACA,EAAO,aAAa,UAAU,KAAGA,EAAO,aAAa,YAAY,IAAI,GACjGA,EAAO,MAAM;AACf,GAEME,KAAsB,EAC1B,aACA,UACA,eAAY,IACZ,YAAYC,IAAe,MAC3B,mBAAgB,2BAChB,wBAEIC,EAAkB,GAAG,IAAU,OAGjC,kBAAC,OAAD;CACE,GAHmBC,IAAY,EAAE,cAAcC,EAAM,IAAI,EAAE,mBAAmB,yBAAyB;CAIvG,WAAU;CACV,aAAU;CAHZ,UAAA;EAKGC,KACC,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAACT,GAAD;IACE,SAAQ;IACR,WAAU;IACV,MAAM,IAAIS;IACV,eAAeR,EAAoBQ,CAAc;IACjD,cAAA;IAEC,UAAAC;GACK,CAAA;EACL,CAAA;EAEN,CAACH,KACA,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAACF,GAAD;IAAc,WAAU;IAAyE,IAAG;IACjG,UAAAG;GACW,CAAA;EACX,CAAA;EAEP,kBAAC,MAAD;GAAI,WAAU;GAAuB;EAAa,CAAA;CAC/C;;AAIT,EAAmB,cAAc"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-side-navigation",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "SideNavigation component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -32,20 +32,18 @@
|
|
|
32
32
|
"provenance": true
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@bonprix-ds/react-button": "1.1.
|
|
36
|
-
"@bonprix-ds/react-icon": "1.2.
|
|
37
|
-
"@bonprix-ds/
|
|
38
|
-
"@bonprix-ds/utils": "0.2.2"
|
|
35
|
+
"@bonprix-ds/react-button": "1.1.2",
|
|
36
|
+
"@bonprix-ds/react-icon": "1.2.2",
|
|
37
|
+
"@bonprix-ds/utils": "0.3.0"
|
|
39
38
|
},
|
|
40
39
|
"devDependencies": {
|
|
41
40
|
"@types/react": "19.3.0",
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"vite": "8.3.0"
|
|
41
|
+
"vite": "8.3.2",
|
|
42
|
+
"@bonprix-ds/vite-config": "0.0.0"
|
|
45
43
|
},
|
|
46
44
|
"peerDependencies": {
|
|
47
|
-
"react": "^19
|
|
48
|
-
"react-dom": "^19
|
|
45
|
+
"react": "^19",
|
|
46
|
+
"react-dom": "^19",
|
|
49
47
|
"tailwind-variants": "0.3.1"
|
|
50
48
|
},
|
|
51
49
|
"scripts": {
|