@bonprix-ds/react-side-navigation 1.3.2 → 1.3.4
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/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { e as default };
|
|
1
|
+
export { default } from "./src/SideNavigation.js";
|
|
@@ -3,7 +3,7 @@ import "react";
|
|
|
3
3
|
import { IconSlot as t } from "@bonprix-ds/react-icon";
|
|
4
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
|
+
// src/SideNavigation.tsx
|
|
7
7
|
var a = ({ children: e, title: t, hideTitle: n = !1, titleLevel: a = "h4" }) => /* @__PURE__ */ i("li", {
|
|
8
8
|
"aria-label": n ? t : void 0,
|
|
9
9
|
className: "mb-2 flex flex-col gap-3 border-b border-clr-bg-main-light pb-3 last:border-none",
|
|
@@ -19,15 +19,10 @@ a.displayName = "SideNavigation.Section";
|
|
|
19
19
|
var o = ({ children: e, icon: a, current: o, active: s, component: c = "a", ...l }) => {
|
|
20
20
|
let u = c;
|
|
21
21
|
s !== void 0 && n("side-navigation-item-active");
|
|
22
|
-
let d = o ?? s
|
|
23
|
-
"typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2",
|
|
24
|
-
"no-underline hover:underline underline-offset-[30%]",
|
|
25
|
-
"focus-visible:outline outline-clr-on-bg-high outline-offset-2 outline-2 radius-2 rounded-sm",
|
|
26
|
-
"aria-current-page:underline aria-current-page:decoration-[15%]"
|
|
27
|
-
].join(" ");
|
|
22
|
+
let d = o ?? s;
|
|
28
23
|
return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ i(u, {
|
|
29
24
|
...l,
|
|
30
|
-
className:
|
|
25
|
+
className: "typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2 no-underline hover:underline underline-offset-[30%] focus-visible:outline outline-clr-on-bg-high outline-offset-2 outline-2 radius-2 rounded-sm aria-current-page:underline aria-current-page:decoration-[15%]",
|
|
31
26
|
"aria-current": d ? "page" : void 0,
|
|
32
27
|
children: [/* @__PURE__ */ r(t, {
|
|
33
28
|
icon: a,
|
|
@@ -38,7 +33,6 @@ var o = ({ children: e, icon: a, current: o, active: s, component: c = "a", ...l
|
|
|
38
33
|
o.displayName = "SideNavigation.Item";
|
|
39
34
|
var s = (t) => /* @__PURE__ */ r(e, { ...t });
|
|
40
35
|
s.displayName = "SideNavigation", s.Section = a, s.Item = o;
|
|
41
|
-
//#endregion
|
|
42
36
|
export { s as default };
|
|
43
37
|
|
|
44
38
|
//# sourceMappingURL=SideNavigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavigation.js","names":["SideNavigationRoot","SideNavigationSection","TitleLevel","hideTitle","title","SideNavigationItem","currentProp","props","Component","component","active","warnDeprecated","current","
|
|
1
|
+
{"version":3,"file":"SideNavigation.js","names":["SideNavigationRoot","SideNavigationSection","TitleLevel","hideTitle","title","SideNavigationItem","currentProp","props","Component","component","active","warnDeprecated","current","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;CAO/B,OACE,kBAAC,MAAD,EAAA,UACE,kBAACF,GAAD;EAAW,GAAID;EAAO,WAAW;EAAY,gBAAcK,IAAU,SAAS,KAAA;EAA9E,UAAA,CACE,kBAACC,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,kBAACd,GAAD,EAAoB,GAAIO,EAAQ,CAAA;AAEvF,EAAe,cAAc,kBAE7B,EAAe,UAAUN,GACzB,EAAe,OAAOI"}
|
|
@@ -3,7 +3,7 @@ import "react";
|
|
|
3
3
|
import e from "@bonprix-ds/react-button";
|
|
4
4
|
import { useBreakpointDown as t } from "@bonprix-ds/utils";
|
|
5
5
|
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
6
|
-
|
|
6
|
+
// src/SideNavigationRoot.tsx
|
|
7
7
|
var i = (e) => {
|
|
8
8
|
let t = document.getElementById(e);
|
|
9
9
|
t && (t.tabIndex < 0 && !t.hasAttribute("tabindex") && t.setAttribute("tabindex", "-1"), t.focus());
|
|
@@ -38,7 +38,6 @@ var i = (e) => {
|
|
|
38
38
|
]
|
|
39
39
|
});
|
|
40
40
|
a.displayName = "SideNavigation";
|
|
41
|
-
//#endregion
|
|
42
41
|
export { a as default };
|
|
43
42
|
|
|
44
43
|
//# sourceMappingURL=SideNavigationRoot.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-side-navigation",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
4
|
"description": "SideNavigation component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
"provenance": true
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@bonprix-ds/react-button": "1.1.
|
|
36
|
-
"@bonprix-ds/react-icon": "1.3.
|
|
37
|
-
"@bonprix-ds/utils": "0.
|
|
35
|
+
"@bonprix-ds/react-button": "1.1.6",
|
|
36
|
+
"@bonprix-ds/react-icon": "1.3.3",
|
|
37
|
+
"@bonprix-ds/utils": "0.6.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
+
"@bonprix-ds/vite-config": "0.0.0",
|
|
40
41
|
"@types/react": "19.3.0",
|
|
41
|
-
"vite": "8.3.
|
|
42
|
-
"@bonprix-ds/vite-config": "0.0.0"
|
|
42
|
+
"vite": "8.3.5"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": "^19",
|