@bonprix-ds/react-badge-icon-button 1.1.0 → 1.1.1
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 +2 -23
- package/dist/index.js +7 -7
- package/dist/index.js.map +1 -1
- package/dist/src/BadgeIconButton.d.ts +16 -0
- package/package.json +29 -28
package/dist/index.d.ts
CHANGED
|
@@ -1,23 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { ElementType } from 'react';
|
|
4
|
-
import { IconOrElement } from '@bonprix-ds/react-icon';
|
|
5
|
-
|
|
6
|
-
declare const BadgeIconButton: <C extends ElementType = "button">({ amount, label, component, ...props }: BadgeIconButtonProps<C>) => default_2.JSX.Element;
|
|
7
|
-
export default BadgeIconButton;
|
|
8
|
-
|
|
9
|
-
export declare type BadgeIconButtonProps<C extends ElementType = "button"> = BaseProps & {
|
|
10
|
-
/** The semantic component to render the BadgeIconButton. Preferrably `"button"`, `"a"` or something like `Link` from NextJS. Native props will be passed to this component. */
|
|
11
|
-
component?: C;
|
|
12
|
-
} & Omit<ComponentProps<C>, keyof BaseProps | "component">;
|
|
13
|
-
|
|
14
|
-
declare interface BaseProps {
|
|
15
|
-
/** The icon to show. Either a name of one icon from our icon set or an inline `<svg>` element. */
|
|
16
|
-
icon: IconOrElement;
|
|
17
|
-
/** An accessible label of the icon button. */
|
|
18
|
-
label: string;
|
|
19
|
-
/** A number that is shown in the badge. It is quantitatively related to the context of the button. If the amount is zero, no badge will be shown. If the amount is more then 99, then the displayed value will be capped to "99+" */
|
|
20
|
-
amount?: number;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export { }
|
|
1
|
+
export { default } from "./src/BadgeIconButton";
|
|
2
|
+
export type { Props as BadgeIconButtonProps } from "./src/BadgeIconButton";
|
package/dist/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import e from "@bonprix-ds/react-icon-button";
|
|
2
1
|
import "react";
|
|
3
|
-
import { tv as
|
|
2
|
+
import { tv as e } from "tailwind-variants";
|
|
3
|
+
import t from "@bonprix-ds/react-icon-button";
|
|
4
4
|
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
5
5
|
//#region src/BadgeIconButton.tsx
|
|
6
|
-
var i =
|
|
6
|
+
var i = e({
|
|
7
7
|
base: "preflight relative inline-block w-fit",
|
|
8
8
|
slots: { counter: "typography-body2 text-clr-on-primary-high absolute flex px-[0.3125rem] bg-clr-primary min-w-4 h-4 rounded-full start-6 top-1 pointer-events-none" }
|
|
9
|
-
}), a = ({ amount:
|
|
10
|
-
let c = o, l =
|
|
9
|
+
}), a = ({ amount: e = 0, label: a, component: o = "button", ...s }) => {
|
|
10
|
+
let c = o, l = e > 0, u = l ? a.replace(/(\s)*\.?(\s)*$/, `. ${e} artikel`) : a, d = e > 99 ? "99+" : e, { base: f, counter: p } = i();
|
|
11
11
|
return /* @__PURE__ */ r("span", {
|
|
12
12
|
className: f(),
|
|
13
13
|
"data-bpds": "badge-icon-button",
|
|
14
|
-
"data-bpds-amount":
|
|
15
|
-
children: [/* @__PURE__ */ n(
|
|
14
|
+
"data-bpds-amount": e,
|
|
15
|
+
children: [/* @__PURE__ */ n(t, {
|
|
16
16
|
...s,
|
|
17
17
|
component: c,
|
|
18
18
|
label: u,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../src/BadgeIconButton.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../src/BadgeIconButton.tsx"],"sourcesContent":["import React, { ComponentProps, ElementType } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport type { IconOrElement } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\n\ninterface BaseProps {\n /** The icon to show. Either a name of one icon from our icon set or an inline `<svg>` element. */\n icon: IconOrElement;\n /** An accessible label of the icon button. */\n label: string;\n /** A number that is shown in the badge. It is quantitatively related to the context of the button. If the amount is zero, no badge will be shown. If the amount is more then 99, then the displayed value will be capped to \"99+\" */\n amount?: number;\n}\n\nexport type Props<C extends ElementType = \"button\"> = BaseProps & {\n /** The semantic component to render the BadgeIconButton. Preferrably `\"button\"`, `\"a\"` or something like `Link` from NextJS. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst generateClasses = tv({\n base: \"preflight relative inline-block w-fit\",\n slots: {\n counter:\n \"typography-body2 text-clr-on-primary-high absolute flex px-[0.3125rem] bg-clr-primary min-w-4 h-4 rounded-full start-6 top-1 pointer-events-none\",\n },\n});\n\nconst BadgeIconButton = <C extends ElementType = \"button\">({ amount = 0, label, component = \"button\" as C, ...props }: Props<C>) => {\n const Component: ElementType = component;\n const badgeVisible = amount > 0;\n const SRlabel = badgeVisible ? label.replace(/(\\s)*\\.?(\\s)*$/, `. ${amount} artikel`) : label;\n const badgeCounter = amount > 99 ? \"99+\" : amount;\n const { base, counter } = generateClasses();\n return (\n <span className={base()} data-bpds=\"badge-icon-button\" data-bpds-amount={amount}>\n <IconButton {...props} component={Component} label={SRlabel} variant=\"tertiary\" hasPadding />\n {badgeVisible && <span className={counter()}>{badgeCounter}</span>}\n </span>\n );\n};\nexport default BadgeIconButton;\n"],"mappings":";;;;;AAoBA,IAAM,IAAkB,EAAG;CACzB,MAAM;CACN,OAAO,EACL,SACE,mJACJ;AACF,CAAC,GAEK,KAAqD,EAAE,YAAS,GAAG,UAAO,eAAY,UAAe,GAAG,QAAsB;CAClI,IAAM,IAAyB,GACzB,IAAe,IAAS,GACxB,IAAU,IAAe,EAAM,QAAQ,kBAAkB,KAAK,EAAO,SAAS,IAAI,GAClF,IAAe,IAAS,KAAK,QAAQ,GACrC,EAAE,SAAM,eAAY,EAAgB;CAC1C,OACE,kBAAC,QAAD;EAAM,WAAW,EAAK;EAAG,aAAU;EAAoB,oBAAkB;EAAzE,UAAA,CACE,kBAAC,GAAD;GAAY,GAAI;GAAO,WAAW;GAAW,OAAO;GAAS,SAAQ;GAAW,YAAA;EAAY,CAAA,GAC3F,KAAgB,kBAAC,QAAD;GAAM,WAAW,EAAQ;GAAI,UAAA;EAAmB,CAAA,CAC7D;;AAEV"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { ComponentProps, ElementType } from "react";
|
|
2
|
+
import type { IconOrElement } from "@bonprix-ds/react-icon";
|
|
3
|
+
interface BaseProps {
|
|
4
|
+
/** The icon to show. Either a name of one icon from our icon set or an inline `<svg>` element. */
|
|
5
|
+
icon: IconOrElement;
|
|
6
|
+
/** An accessible label of the icon button. */
|
|
7
|
+
label: string;
|
|
8
|
+
/** A number that is shown in the badge. It is quantitatively related to the context of the button. If the amount is zero, no badge will be shown. If the amount is more then 99, then the displayed value will be capped to "99+" */
|
|
9
|
+
amount?: number;
|
|
10
|
+
}
|
|
11
|
+
export type Props<C extends ElementType = "button"> = BaseProps & {
|
|
12
|
+
/** The semantic component to render the BadgeIconButton. Preferrably `"button"`, `"a"` or something like `Link` from NextJS. Native props will be passed to this component. */
|
|
13
|
+
component?: C;
|
|
14
|
+
} & Omit<ComponentProps<C>, keyof BaseProps | "component">;
|
|
15
|
+
declare const BadgeIconButton: <C extends ElementType = "button">({ amount, label, component, ...props }: Props<C>) => React.JSX.Element;
|
|
16
|
+
export default BadgeIconButton;
|
package/package.json
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-badge-icon-button",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "BadgeIconButton component, implemented in React, for the Bonprix Design System.",
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"author": "",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/bonprix/design-system.git",
|
|
11
|
+
"directory": "packages/react/badge-icon-button"
|
|
9
12
|
},
|
|
10
|
-
"
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"!dist/tsconfig.tsbuildinfo",
|
|
16
|
+
"!dist/vite.config.d.ts",
|
|
17
|
+
"!dist/**/*.test.d.ts"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
11
20
|
"sideEffects": false,
|
|
21
|
+
"module": "./dist/index.js",
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
12
23
|
"exports": {
|
|
13
24
|
".": {
|
|
14
25
|
"import": "./dist/index.js",
|
|
@@ -16,35 +27,25 @@
|
|
|
16
27
|
"default": "./dist/index.js"
|
|
17
28
|
}
|
|
18
29
|
},
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
],
|
|
23
|
-
"keywords": [],
|
|
24
|
-
"author": "",
|
|
25
|
-
"license": "UNLICENSED",
|
|
26
|
-
"repository": {
|
|
27
|
-
"type": "git",
|
|
28
|
-
"url": "git+https://github.com/bonprix/design-system.git",
|
|
29
|
-
"directory": "packages/react/badge-icon-button"
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public",
|
|
32
|
+
"provenance": true
|
|
30
33
|
},
|
|
31
34
|
"dependencies": {
|
|
32
|
-
"@bonprix-ds/react-icon": "1.2.
|
|
33
|
-
"@bonprix-ds/react-icon-button": "1.2.
|
|
35
|
+
"@bonprix-ds/react-icon": "1.2.1",
|
|
36
|
+
"@bonprix-ds/react-icon-button": "1.2.1",
|
|
34
37
|
"@bonprix-ds/utils": "0.2.2"
|
|
35
38
|
},
|
|
36
|
-
"peerDependencies": {
|
|
37
|
-
"react": "^19.0.0",
|
|
38
|
-
"react-dom": "^19.0.0",
|
|
39
|
-
"tailwind-variants": "0.3.1"
|
|
40
|
-
},
|
|
41
39
|
"devDependencies": {
|
|
42
|
-
"
|
|
43
|
-
"@types/react": "19.2.18",
|
|
40
|
+
"@types/react": "19.3.0",
|
|
44
41
|
"@vitejs/plugin-react": "6.1.1",
|
|
45
42
|
"rollup-preserve-directives": "1.1.3",
|
|
46
|
-
"
|
|
47
|
-
|
|
43
|
+
"vite": "8.3.0"
|
|
44
|
+
},
|
|
45
|
+
"peerDependencies": {
|
|
46
|
+
"react": "^19.3.0",
|
|
47
|
+
"react-dom": "^19.3.0",
|
|
48
|
+
"tailwind-variants": "0.3.1"
|
|
48
49
|
},
|
|
49
50
|
"scripts": {
|
|
50
51
|
"build": "vite build"
|