@bonprix-ds/react-side-navigation 1.0.0 → 1.1.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/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentProps } from 'react';
|
|
2
2
|
import { default as default_2 } from 'react';
|
|
3
3
|
import { ElementType } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { IconOrElement } from '@bonprix-ds/react-icon';
|
|
5
5
|
import { ReactNode } from 'react';
|
|
6
6
|
import { TitleLevel } from '@bonprix-ds/utils';
|
|
7
7
|
|
|
@@ -28,8 +28,8 @@ export default SideNavigation;
|
|
|
28
28
|
declare interface SideNavigationItemBaseProps {
|
|
29
29
|
/** The text content of the list item. */
|
|
30
30
|
children: string;
|
|
31
|
-
/** The icon to display in front of the list item. */
|
|
32
|
-
icon?:
|
|
31
|
+
/** 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. */
|
|
32
|
+
icon?: IconOrElement;
|
|
33
33
|
/** Should be set to `true`, if the current page is equal to the link in this item. */
|
|
34
34
|
active?: boolean;
|
|
35
35
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import e from "./SideNavigationRoot.js";
|
|
2
|
-
import t from "@bonprix-ds/react-icon";
|
|
2
|
+
import { IconSlot as t } from "@bonprix-ds/react-icon";
|
|
3
3
|
import n from "@bonprix-ds/react-typography";
|
|
4
4
|
import "react";
|
|
5
5
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
@@ -29,8 +29,8 @@ var o = ({ children: e, icon: n, active: a, component: o = "a", ...s }) => {
|
|
|
29
29
|
...s,
|
|
30
30
|
className: l,
|
|
31
31
|
"aria-current": a ? "page" : void 0,
|
|
32
|
-
children: [
|
|
33
|
-
|
|
32
|
+
children: [/* @__PURE__ */ r(t, {
|
|
33
|
+
icon: n,
|
|
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
|
|
1
|
+
{"version":3,"file":"SideNavigation.js","names":[],"sources":["../../src/SideNavigation.tsx"],"sourcesContent":["import { IconSlot, type IconOrElement } from \"@bonprix-ds/react-icon\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\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 = \"h4\" }: SideNavigationSectionProps) => {\n return (\n <li aria-label={hideTitle ? title : undefined} className=\"pb-3 border-b border-clr-bg-main-light last:border-none flex flex-col gap-3\">\n {!hideTitle && (\n <Typography variant=\"h6\" component={titleLevel} color=\"on-bg-mid\">\n {title}\n </Typography>\n )}\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 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 active,\n component = \"a\" as C,\n ...props\n}: SideNavigationItemProps<C>) => {\n const Component: ElementType = component;\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={active ? \"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":";;;;;;AAYA,IAAM,KAAyB,EAAE,aAAU,UAAO,eAAY,IAAO,gBAAa,WAE9E,kBAAC,MAAD;CAAI,cAAY,IAAY,IAAQ,KAAA;CAAW,WAAU;CAAzD,UAAA,CACG,CAAC,KACA,kBAAC,GAAD;EAAY,SAAQ;EAAK,WAAW;EAAY,OAAM;EACnD,UAAA;CACS,CAAA,GAEd,kBAAC,MAAD;EAAI,WAAU;EAA4B;CAAa,CAAA,CACrD;;AAIR,EAAsB,cAAc;AAgBpC,IAAM,KAA6C,EACjD,aACA,SACA,WACA,eAAY,KACZ,GAAG,QAC6B;CAChC,IAAM,IAAyB,GACzB,IAAa;EACjB;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;EAAW,GAAI;EAAO,WAAW;EAAY,gBAAc,IAAS,SAAS,KAAA;EAA7E,UAAA,CACE,kBAAC,GAAD;GAAgB;GAAM,WAAU;EAA+B,CAAA,GAC/D,kBAAC,QAAD,EAAO,YAAe,CAAA,CACb;CACT,CAAA,EAAA,CAAA;AAER;AAEA,EAAmB,cAAc;AAEjC,IAAM,KAAkB,MAA+B,kBAAC,GAAD,EAAoB,GAAI,EAAQ,CAAA;AAEvF,EAAe,cAAc,kBAE7B,EAAe,UAAU,GACzB,EAAe,OAAO"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-side-navigation",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "SideNavigation component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"directory": "packages/react/side-navigation"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@bonprix-ds/react-icon": "1.
|
|
33
|
-
"@bonprix-ds/
|
|
34
|
-
"@bonprix-ds/
|
|
32
|
+
"@bonprix-ds/react-icon": "1.2.0",
|
|
33
|
+
"@bonprix-ds/react-typography": "1.0.4",
|
|
34
|
+
"@bonprix-ds/utils": "0.2.2"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"react": "^19.0.0",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"@types/react": "19.2.18",
|
|
44
44
|
"@vitejs/plugin-react": "6.1.1",
|
|
45
45
|
"rollup-preserve-directives": "1.1.3",
|
|
46
|
-
"unplugin-dts": "1.0
|
|
47
|
-
"@microsoft/api-extractor": "7.59.
|
|
46
|
+
"unplugin-dts": "1.1.0",
|
|
47
|
+
"@microsoft/api-extractor": "7.59.1"
|
|
48
48
|
},
|
|
49
49
|
"scripts": {
|
|
50
50
|
"build": "vite build"
|