@frontify/fondue 12.3.8 → 12.3.10
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/Badge/Badge.es.js +29 -33
- package/dist/components/Badge/Badge.es.js.map +1 -1
- package/dist/components/Badge/BadgeStatusIcon.es.js +7 -7
- package/dist/components/Badge/BadgeStatusIcon.es.js.map +1 -1
- package/dist/components/Badge/helpers.es.js +14 -2
- package/dist/components/Badge/helpers.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/packages/components/style.css +1 -1
- package/dist/packages/tokens/tailwind.config.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +3 -3
|
@@ -1,64 +1,60 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as p, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { cloneElement as B } from "react";
|
|
3
3
|
import C from "../../foundation/Icon/Generated/IconCross.es.js";
|
|
4
4
|
import { IconSize as c } from "../../foundation/Icon/IconSize.es.js";
|
|
5
|
-
import { FOCUS_VISIBLE_STYLE as
|
|
5
|
+
import { FOCUS_VISIBLE_STYLE as d } from "../../utilities/focusStyle.es.js";
|
|
6
6
|
import { merge as m } from "../../utilities/merge.es.js";
|
|
7
7
|
import { BadgeStatusIcon as j } from "./BadgeStatusIcon.es.js";
|
|
8
|
-
import { getStyleClasses as v, getCircularSizeClasses as z, getSizeClasses as
|
|
9
|
-
import { BadgeEmphasis as
|
|
10
|
-
const
|
|
8
|
+
import { getStyleClasses as v, getCircularSizeClasses as z, getSizeClasses as h } from "./helpers.es.js";
|
|
9
|
+
import { BadgeEmphasis as g, BadgeStyle as E } from "./types.es.js";
|
|
10
|
+
const $ = ({
|
|
11
11
|
children: e,
|
|
12
12
|
status: r,
|
|
13
13
|
icon: i,
|
|
14
|
-
style: x =
|
|
14
|
+
style: x = E.Primary,
|
|
15
15
|
size: w = "medium",
|
|
16
|
-
emphasis: b =
|
|
16
|
+
emphasis: b = g.None,
|
|
17
17
|
disabled: s = !1,
|
|
18
|
-
onClick:
|
|
18
|
+
onClick: n,
|
|
19
19
|
onDismiss: l,
|
|
20
|
-
"data-test-id":
|
|
20
|
+
"data-test-id": o = "badge",
|
|
21
21
|
withTitleAttribute: S = !0
|
|
22
22
|
}) => {
|
|
23
23
|
if (!e && !i && !r)
|
|
24
24
|
return null;
|
|
25
|
-
const y =
|
|
26
|
-
return /* @__PURE__ */
|
|
25
|
+
const y = n ? "button" : "span", f = (t) => ["string", "number"].includes(typeof t) ? t : Array.isArray(t) ? t.map(f).join("") : t && typeof t == "object" && "props" in t ? f(t.props.children) : "", u = f(e), N = !e && !l && !!(r || i);
|
|
26
|
+
return /* @__PURE__ */ p(
|
|
27
27
|
"div",
|
|
28
28
|
{
|
|
29
29
|
className: m([
|
|
30
30
|
"tw-relative tw-rounded-full tw-inline-flex tw-items-center tw-align-top tw-min-w-0 tw-flex-initial tw-transition-color",
|
|
31
|
-
s ? "tw-bg-box-disabled tw-text-box-disabled-inverse" : v(x, !!
|
|
31
|
+
s ? "tw-bg-box-disabled tw-text-box-disabled-inverse" : v(x, !!n, b === g.Strong)
|
|
32
32
|
]),
|
|
33
|
-
"data-test-id":
|
|
33
|
+
"data-test-id": o,
|
|
34
34
|
children: [
|
|
35
|
-
/* @__PURE__ */
|
|
35
|
+
/* @__PURE__ */ p(
|
|
36
36
|
y,
|
|
37
37
|
{
|
|
38
|
-
onClick: () =>
|
|
38
|
+
onClick: () => n && n(),
|
|
39
39
|
className: m([
|
|
40
40
|
"tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-select-none tw-flex-initial tw-min-w-0",
|
|
41
|
-
|
|
42
|
-
N ? z(w) :
|
|
43
|
-
|
|
41
|
+
n && !s ? "hover:tw-cursor-pointer" : "tw-cursor-default",
|
|
42
|
+
N ? z(w) : h(e, r, i, w, !!l),
|
|
43
|
+
d
|
|
44
44
|
]),
|
|
45
|
-
"data-test-id": `${
|
|
46
|
-
title: S ?
|
|
45
|
+
"data-test-id": `${o}-button`,
|
|
46
|
+
title: S ? u : void 0,
|
|
47
47
|
children: [
|
|
48
|
-
r && /* @__PURE__ */ a(j, { status: r, disabled: s, "data-test-id":
|
|
48
|
+
r && /* @__PURE__ */ a(j, { status: r, disabled: s, "data-test-id": o }),
|
|
49
49
|
i && /* @__PURE__ */ a(
|
|
50
50
|
"span",
|
|
51
51
|
{
|
|
52
|
-
"data-test-id": `${
|
|
53
|
-
className: m([
|
|
54
|
-
"tw-flex-none tw-leading-none",
|
|
55
|
-
s && "tw-opacity-30",
|
|
56
|
-
!!e && "tw-pr-1"
|
|
57
|
-
]),
|
|
52
|
+
"data-test-id": `${o}-icon`,
|
|
53
|
+
className: m(["tw-flex-none tw-leading-none", s && "tw-opacity-30"]),
|
|
58
54
|
children: B(i, { size: c.Size16 })
|
|
59
55
|
}
|
|
60
56
|
),
|
|
61
|
-
e && /* @__PURE__ */ a("span", { className: "tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate
|
|
57
|
+
e && /* @__PURE__ */ a("span", { className: "tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate", children: e })
|
|
62
58
|
]
|
|
63
59
|
}
|
|
64
60
|
),
|
|
@@ -66,14 +62,14 @@ const h = ({
|
|
|
66
62
|
"button",
|
|
67
63
|
{
|
|
68
64
|
type: "button",
|
|
69
|
-
"data-test-id": `${
|
|
65
|
+
"data-test-id": `${o}-dismiss`,
|
|
70
66
|
className: m([
|
|
71
67
|
"tw-absolute tw-rounded tw-leading-4",
|
|
72
|
-
|
|
68
|
+
d,
|
|
73
69
|
w === "medium" ? "tw-right-1.5" : "tw-right-1"
|
|
74
70
|
]),
|
|
75
71
|
onClick: () => l(),
|
|
76
|
-
"aria-label": `Dismiss ${
|
|
72
|
+
"aria-label": `Dismiss ${u}`,
|
|
77
73
|
children: /* @__PURE__ */ a(C, { size: c.Size16 })
|
|
78
74
|
}
|
|
79
75
|
)
|
|
@@ -81,8 +77,8 @@ const h = ({
|
|
|
81
77
|
}
|
|
82
78
|
);
|
|
83
79
|
};
|
|
84
|
-
|
|
80
|
+
$.displayName = "FondueBadge";
|
|
85
81
|
export {
|
|
86
|
-
|
|
82
|
+
$ as Badge
|
|
87
83
|
};
|
|
88
84
|
//# sourceMappingURL=Badge.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.es.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, type ReactNode, cloneElement } from 'react';\n\nimport IconCross from '@foundation/Icon/Generated/IconCross';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { BadgeStatusIcon } from './BadgeStatusIcon';\nimport { getCircularSizeClasses, getSizeClasses, getStyleClasses } from './helpers';\nimport { BadgeEmphasis, type BadgeProps, BadgeStyle } from './types';\n\nexport const Badge = ({\n children,\n status,\n icon,\n style = BadgeStyle.Primary,\n size = 'medium',\n emphasis = BadgeEmphasis.None,\n disabled = false,\n onClick,\n onDismiss,\n 'data-test-id': dataTestId = 'badge',\n withTitleAttribute = true,\n}: BadgeProps): Nullable<ReactElement> => {\n if (!children && !icon && !status) {\n return null;\n }\n\n const Container = onClick ? 'button' : 'span';\n\n const getNodeText = (node: ReactNode): string => {\n if (['string', 'number'].includes(typeof node)) {\n return node as string;\n }\n if (Array.isArray(node)) {\n return node.map(getNodeText).join('');\n }\n if (node && typeof node === 'object' && 'props' in node) {\n return getNodeText(node.props.children);\n }\n return '';\n };\n\n const badgeTitle = getNodeText(children);\n const isCircular = !children && !onDismiss && Boolean(status || icon);\n\n return (\n <div\n className={merge([\n 'tw-relative tw-rounded-full tw-inline-flex tw-items-center tw-align-top tw-min-w-0 tw-flex-initial tw-transition-color',\n disabled\n ? 'tw-bg-box-disabled tw-text-box-disabled-inverse'\n : getStyleClasses(style, !!onClick, emphasis === BadgeEmphasis.Strong),\n ])}\n data-test-id={dataTestId}\n >\n <Container\n onClick={() => onClick && onClick()}\n className={merge([\n 'tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-select-none tw-flex-initial tw-min-w-0',\n onClick && !disabled ? 'hover:tw-cursor-pointer' : 'tw-cursor-default',\n isCircular\n ? getCircularSizeClasses(size)\n : getSizeClasses(children, status, icon, size, !!onDismiss),\n FOCUS_VISIBLE_STYLE,\n ])}\n data-test-id={`${dataTestId}-button`}\n title={withTitleAttribute ? badgeTitle : undefined}\n >\n {status && <BadgeStatusIcon status={status} disabled={disabled} data-test-id={dataTestId} />}\n {icon && (\n <span\n data-test-id={`${dataTestId}-icon`}\n className={merge([
|
|
1
|
+
{"version":3,"file":"Badge.es.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, type ReactNode, cloneElement } from 'react';\n\nimport IconCross from '@foundation/Icon/Generated/IconCross';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { BadgeStatusIcon } from './BadgeStatusIcon';\nimport { getCircularSizeClasses, getSizeClasses, getStyleClasses } from './helpers';\nimport { BadgeEmphasis, type BadgeProps, BadgeStyle } from './types';\n\nexport const Badge = ({\n children,\n status,\n icon,\n style = BadgeStyle.Primary,\n size = 'medium',\n emphasis = BadgeEmphasis.None,\n disabled = false,\n onClick,\n onDismiss,\n 'data-test-id': dataTestId = 'badge',\n withTitleAttribute = true,\n}: BadgeProps): Nullable<ReactElement> => {\n if (!children && !icon && !status) {\n return null;\n }\n\n const Container = onClick ? 'button' : 'span';\n\n const getNodeText = (node: ReactNode): string => {\n if (['string', 'number'].includes(typeof node)) {\n return node as string;\n }\n if (Array.isArray(node)) {\n return node.map(getNodeText).join('');\n }\n if (node && typeof node === 'object' && 'props' in node) {\n return getNodeText(node.props.children);\n }\n return '';\n };\n\n const badgeTitle = getNodeText(children);\n const isCircular = !children && !onDismiss && Boolean(status || icon);\n\n return (\n <div\n className={merge([\n 'tw-relative tw-rounded-full tw-inline-flex tw-items-center tw-align-top tw-min-w-0 tw-flex-initial tw-transition-color',\n disabled\n ? 'tw-bg-box-disabled tw-text-box-disabled-inverse'\n : getStyleClasses(style, !!onClick, emphasis === BadgeEmphasis.Strong),\n ])}\n data-test-id={dataTestId}\n >\n <Container\n onClick={() => onClick && onClick()}\n className={merge([\n 'tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-select-none tw-flex-initial tw-min-w-0',\n onClick && !disabled ? 'hover:tw-cursor-pointer' : 'tw-cursor-default',\n isCircular\n ? getCircularSizeClasses(size)\n : getSizeClasses(children, status, icon, size, !!onDismiss),\n FOCUS_VISIBLE_STYLE,\n ])}\n data-test-id={`${dataTestId}-button`}\n title={withTitleAttribute ? badgeTitle : undefined}\n >\n {status && <BadgeStatusIcon status={status} disabled={disabled} data-test-id={dataTestId} />}\n {icon && (\n <span\n data-test-id={`${dataTestId}-icon`}\n className={merge(['tw-flex-none tw-leading-none', disabled && 'tw-opacity-30'])}\n >\n {cloneElement(icon, { size: IconSize.Size16 })}\n </span>\n )}\n {children && (\n <span className=\"tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate\">\n {children}\n </span>\n )}\n </Container>\n {onDismiss && (\n <button\n type=\"button\"\n data-test-id={`${dataTestId}-dismiss`}\n className={merge([\n 'tw-absolute tw-rounded tw-leading-4',\n FOCUS_VISIBLE_STYLE,\n size === 'medium' ? 'tw-right-1.5' : 'tw-right-1',\n ])}\n onClick={() => onDismiss()}\n aria-label={`Dismiss ${badgeTitle}`}\n >\n <IconCross size={IconSize.Size16} />\n </button>\n )}\n </div>\n );\n};\nBadge.displayName = 'FondueBadge';\n"],"names":["Badge","children","status","icon","style","BadgeStyle","size","emphasis","BadgeEmphasis","disabled","onClick","onDismiss","dataTestId","withTitleAttribute","Container","getNodeText","node","badgeTitle","isCircular","jsxs","merge","getStyleClasses","getCircularSizeClasses","getSizeClasses","FOCUS_VISIBLE_STYLE","jsx","BadgeStatusIcon","IconSize","IconCross"],"mappings":";;;;;;;;;AAaO,MAAMA,IAAQ,CAAC;AAAA,EAClB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQC,EAAW;AAAA,EACnB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAWC,EAAc;AAAA,EACzB,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,oBAAAC,IAAqB;AACzB,MAA0C;AACtC,MAAI,CAACZ,KAAY,CAACE,KAAQ,CAACD;AAChB,WAAA;AAGL,QAAAY,IAAYJ,IAAU,WAAW,QAEjCK,IAAc,CAACC,MACb,CAAC,UAAU,QAAQ,EAAE,SAAS,OAAOA,CAAI,IAClCA,IAEP,MAAM,QAAQA,CAAI,IACXA,EAAK,IAAID,CAAW,EAAE,KAAK,EAAE,IAEpCC,KAAQ,OAAOA,KAAS,YAAY,WAAWA,IACxCD,EAAYC,EAAK,MAAM,QAAQ,IAEnC,IAGLC,IAAaF,EAAYd,CAAQ,GACjCiB,IAAa,CAACjB,KAAY,CAACU,KAAa,GAAQT,KAAUC;AAG5D,SAAA,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAX,IACM,oDACAY,EAAgBjB,GAAO,CAAC,CAACM,GAASH,MAAaC,EAAc,MAAM;AAAA,MAAA,CAC5E;AAAA,MACD,gBAAcI;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACL;AAAA,UAAA;AAAA,YACG,SAAS,MAAMJ,KAAWA,EAAQ;AAAA,YAClC,WAAWU,EAAM;AAAA,cACb;AAAA,cACAV,KAAW,CAACD,IAAW,4BAA4B;AAAA,cACnDS,IACMI,EAAuBhB,CAAI,IAC3BiB,EAAetB,GAAUC,GAAQC,GAAMG,GAAM,CAAC,CAACK,CAAS;AAAA,cAC9Da;AAAA,YAAA,CACH;AAAA,YACD,gBAAc,GAAGZ,CAAU;AAAA,YAC3B,OAAOC,IAAqBI,IAAa;AAAA,YAExC,UAAA;AAAA,cAAAf,KAAW,gBAAAuB,EAAAC,GAAA,EAAgB,QAAAxB,GAAgB,UAAAO,GAAoB,gBAAcG,GAAY;AAAA,cACzFT,KACG,gBAAAsB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,gBAAc,GAAGb,CAAU;AAAA,kBAC3B,WAAWQ,EAAM,CAAC,gCAAgCX,KAAY,eAAe,CAAC;AAAA,kBAE7E,YAAaN,GAAM,EAAE,MAAMwB,EAAS,OAAQ,CAAA;AAAA,gBAAA;AAAA,cACjD;AAAA,cAEH1B,KACG,gBAAAwB,EAAC,QAAK,EAAA,WAAU,sEACX,UAAAxB,EACL,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAER;AAAA,QACCU,KACG,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAc,GAAGb,CAAU;AAAA,YAC3B,WAAWQ,EAAM;AAAA,cACb;AAAA,cACAI;AAAA,cACAlB,MAAS,WAAW,iBAAiB;AAAA,YAAA,CACxC;AAAA,YACD,SAAS,MAAMK,EAAU;AAAA,YACzB,cAAY,WAAWM,CAAU;AAAA,YAEjC,UAAC,gBAAAQ,EAAAG,GAAA,EAAU,MAAMD,EAAS,OAAQ,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACtC;AAAA,IAAA;AAAA,EAER;AAER;AACA3B,EAAM,cAAc;"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { getColorDisplayValue as i } from "../../utilities/colors.es.js";
|
|
3
3
|
import { merge as l } from "../../utilities/merge.es.js";
|
|
4
4
|
import { isBadgeStatus as o, badgeStatusClasses as n } from "./helpers.es.js";
|
|
5
5
|
import { ColorFormat as d } from "../../types/colors.es.js";
|
|
6
|
-
const m = ({ status:
|
|
6
|
+
const m = ({ status: e, disabled: a, "data-test-id": r = "badge" }) => /* @__PURE__ */ t("div", { className: "tw-flex-none tw-inline-flex tw-justify-center tw-items-center ", children: /* @__PURE__ */ t(
|
|
7
7
|
"span",
|
|
8
8
|
{
|
|
9
|
-
"data-test-id": `${
|
|
9
|
+
"data-test-id": `${r}-status`,
|
|
10
10
|
className: l([
|
|
11
11
|
"tw-w-2 tw-h-2 tw-rounded-full tw-flex-none",
|
|
12
|
-
|
|
13
|
-
o(
|
|
12
|
+
a && "tw-opacity-30",
|
|
13
|
+
o(e) && n[e]
|
|
14
14
|
]),
|
|
15
|
-
style: o(
|
|
16
|
-
backgroundColor: typeof
|
|
15
|
+
style: o(e) ? {} : {
|
|
16
|
+
backgroundColor: typeof e == "string" ? e : i(e, d.Rgba, !0)
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeStatusIcon.es.js","sources":["../../../src/components/Badge/BadgeStatusIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getColorDisplayValue } from '@utilities/colors';\nimport { merge } from '@utilities/merge';\n\nimport { ColorFormat } from '../../types';\n\nimport { badgeStatusClasses, isBadgeStatus } from './helpers';\nimport { type BadgeStatusIconProps } from './types';\n\nexport const BadgeStatusIcon = ({ status, disabled, 'data-test-id': dataTestId = 'badge' }: BadgeStatusIconProps) => (\n <div className=\"tw-
|
|
1
|
+
{"version":3,"file":"BadgeStatusIcon.es.js","sources":["../../../src/components/Badge/BadgeStatusIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getColorDisplayValue } from '@utilities/colors';\nimport { merge } from '@utilities/merge';\n\nimport { ColorFormat } from '../../types';\n\nimport { badgeStatusClasses, isBadgeStatus } from './helpers';\nimport { type BadgeStatusIconProps } from './types';\n\nexport const BadgeStatusIcon = ({ status, disabled, 'data-test-id': dataTestId = 'badge' }: BadgeStatusIconProps) => (\n <div className=\"tw-flex-none tw-inline-flex tw-justify-center tw-items-center \">\n <span\n data-test-id={`${dataTestId}-status`}\n className={merge([\n 'tw-w-2 tw-h-2 tw-rounded-full tw-flex-none',\n disabled && 'tw-opacity-30',\n isBadgeStatus(status) && badgeStatusClasses[status],\n ])}\n style={\n isBadgeStatus(status)\n ? {}\n : {\n backgroundColor:\n typeof status === 'string'\n ? status\n : getColorDisplayValue(status, ColorFormat.Rgba, true),\n }\n }\n />\n </div>\n);\nBadgeStatusIcon.displayName = 'FondueBadgeStatusIcon';\n"],"names":["BadgeStatusIcon","status","disabled","dataTestId","jsx","merge","isBadgeStatus","badgeStatusClasses","getColorDisplayValue","ColorFormat"],"mappings":";;;;;AAUO,MAAMA,IAAkB,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,gBAAgBC,IAAa,cAC7E,gBAAAC,EAAC,OAAI,EAAA,WAAU,kEACX,UAAA,gBAAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAc,GAAGD,CAAU;AAAA,IAC3B,WAAWE,EAAM;AAAA,MACb;AAAA,MACAH,KAAY;AAAA,MACZI,EAAcL,CAAM,KAAKM,EAAmBN,CAAM;AAAA,IAAA,CACrD;AAAA,IACD,OACIK,EAAcL,CAAM,IACd,KACA;AAAA,MACI,iBACI,OAAOA,KAAW,WACZA,IACAO,EAAqBP,GAAQQ,EAAY,MAAM,EAAI;AAAA,IAAA;AAAA,EACjE;AAEd,EACJ,CAAA;AAEJT,EAAgB,cAAc;"}
|
|
@@ -45,7 +45,19 @@ const a = (r, e, s) => (s ? {
|
|
|
45
45
|
})[r] ?? "", h = (r) => Object.values(n).includes(r), l = (r) => ({
|
|
46
46
|
small: "tw-h-5 tw-w-5",
|
|
47
47
|
medium: "tw-h-6 tw-w-6"
|
|
48
|
-
})[r],
|
|
48
|
+
})[r], p = (r, e, s, v, g) => {
|
|
49
|
+
const w = v === "small", i = !(r && e && s);
|
|
50
|
+
return w ? t([
|
|
51
|
+
"tw-h-5 tw-px-2 tw-gap-x-1",
|
|
52
|
+
i && "tw-gap-x-1.5",
|
|
53
|
+
g && "tw-pr-5"
|
|
54
|
+
]) : t([
|
|
55
|
+
"tw-h-6",
|
|
56
|
+
"tw-px-2.5 tw-gap-x-1",
|
|
57
|
+
i && "tw-gap-x-2",
|
|
58
|
+
g && "tw-pr-6"
|
|
59
|
+
]);
|
|
60
|
+
}, c = {
|
|
49
61
|
[n.Positive]: "tw-bg-green-60",
|
|
50
62
|
[n.Progress]: "tw-bg-violet-60",
|
|
51
63
|
[n.Warning]: "tw-bg-yellow-60",
|
|
@@ -54,7 +66,7 @@ const a = (r, e, s) => (s ? {
|
|
|
54
66
|
export {
|
|
55
67
|
c as badgeStatusClasses,
|
|
56
68
|
l as getCircularSizeClasses,
|
|
57
|
-
|
|
69
|
+
p as getSizeClasses,
|
|
58
70
|
a as getStyleClasses,
|
|
59
71
|
h as isBadgeStatus
|
|
60
72
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.es.js","sources":["../../../src/components/Badge/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { type Color } from '../../types';\n\nimport { type BadgeProps, type BadgeSize, BadgeStatus, BadgeStyle } from './types';\n\nexport const getStyleClasses = (style: BadgeStyle, hasHover: boolean, strong: boolean): string =>\n (strong\n ? {\n [BadgeStyle.Primary]: merge([\n 'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse',\n hasHover && 'hover:tw-bg-box-neutral-strong-hover hover:tw-text-box-neutral-strong-inverse-hover',\n ]),\n [BadgeStyle.Positive]: merge([\n 'tw-bg-box-positive-strong tw-text-box-positive-strong-inverse',\n hasHover && 'hover:tw-bg-box-positive-strong-hover hover:tw-text-box-positive-strong-inverse-hover',\n ]),\n [BadgeStyle.Danger]: merge([\n 'tw-bg-box-negative-strong tw-text-box-negative-strong-inverse',\n hasHover && 'hover:tw-bg-box-negative-strong-hover hover:tw-text-box-negative-strong-inverse-hover',\n ]),\n [BadgeStyle.Progress]: merge([\n 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse',\n hasHover && 'hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n ]),\n [BadgeStyle.Warning]: merge([\n 'tw-bg-box-warning-strong tw-text-box-warning-strong-inverse',\n hasHover && 'hover:tw-bg-box-warning-strong-hover hover:tw-text-box-warning-strong-inverse-hover',\n ]),\n }\n : {\n [BadgeStyle.Primary]: merge([\n 'tw-bg-box-neutral tw-text-box-neutral-inverse',\n hasHover && 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n ]),\n [BadgeStyle.Positive]: merge([\n 'tw-bg-box-positive tw-text-box-positive-inverse',\n hasHover && 'hover:tw-bg-box-positive-hover hover:tw-text-box-positive-inverse-hover',\n ]),\n [BadgeStyle.Progress]: merge([\n 'tw-bg-box-selected tw-text-box-selected-inverse',\n hasHover && 'hover:tw-bg-box-selected-hover hover:tw-text-box-selected-inverse-hover',\n ]),\n [BadgeStyle.Warning]: merge([\n 'tw-bg-box-warning tw-text-box-warning-inverse',\n hasHover && 'hover:tw-bg-box-warning-hover hover:tw-text-box-warning-inverse-hover',\n ]),\n [BadgeStyle.Danger]: merge([\n 'tw-bg-box-negative tw-text-box-negative-inverse',\n hasHover && 'hover:tw-bg-box-negative-hover hover:tw-text-box-negative-inverse-hover',\n ]),\n })[style] ?? '';\n\nexport const isBadgeStatus = (style: BadgeStatus | Color | string): style is BadgeStatus =>\n Object.values(BadgeStatus).includes(style as BadgeStatus);\n\nexport const getCircularSizeClasses = (size: BadgeSize) =>\n ({\n small: 'tw-h-5 tw-w-5',\n medium: 'tw-h-6 tw-w-6',\n })[size];\n\nexport const getSizeClasses = (\n children: ReactNode,\n status: BadgeProps['status'],\n icon: BadgeProps['icon'],\n size: BadgeSize,\n isDismissable: boolean,\n) => {\n const isSmall = size === 'small';\n\n if (isSmall) {\n return merge(['tw-h-5 tw-px-1.5'
|
|
1
|
+
{"version":3,"file":"helpers.es.js","sources":["../../../src/components/Badge/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { type Color } from '../../types';\n\nimport { type BadgeProps, type BadgeSize, BadgeStatus, BadgeStyle } from './types';\n\nexport const getStyleClasses = (style: BadgeStyle, hasHover: boolean, strong: boolean): string =>\n (strong\n ? {\n [BadgeStyle.Primary]: merge([\n 'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse',\n hasHover && 'hover:tw-bg-box-neutral-strong-hover hover:tw-text-box-neutral-strong-inverse-hover',\n ]),\n [BadgeStyle.Positive]: merge([\n 'tw-bg-box-positive-strong tw-text-box-positive-strong-inverse',\n hasHover && 'hover:tw-bg-box-positive-strong-hover hover:tw-text-box-positive-strong-inverse-hover',\n ]),\n [BadgeStyle.Danger]: merge([\n 'tw-bg-box-negative-strong tw-text-box-negative-strong-inverse',\n hasHover && 'hover:tw-bg-box-negative-strong-hover hover:tw-text-box-negative-strong-inverse-hover',\n ]),\n [BadgeStyle.Progress]: merge([\n 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse',\n hasHover && 'hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n ]),\n [BadgeStyle.Warning]: merge([\n 'tw-bg-box-warning-strong tw-text-box-warning-strong-inverse',\n hasHover && 'hover:tw-bg-box-warning-strong-hover hover:tw-text-box-warning-strong-inverse-hover',\n ]),\n }\n : {\n [BadgeStyle.Primary]: merge([\n 'tw-bg-box-neutral tw-text-box-neutral-inverse',\n hasHover && 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n ]),\n [BadgeStyle.Positive]: merge([\n 'tw-bg-box-positive tw-text-box-positive-inverse',\n hasHover && 'hover:tw-bg-box-positive-hover hover:tw-text-box-positive-inverse-hover',\n ]),\n [BadgeStyle.Progress]: merge([\n 'tw-bg-box-selected tw-text-box-selected-inverse',\n hasHover && 'hover:tw-bg-box-selected-hover hover:tw-text-box-selected-inverse-hover',\n ]),\n [BadgeStyle.Warning]: merge([\n 'tw-bg-box-warning tw-text-box-warning-inverse',\n hasHover && 'hover:tw-bg-box-warning-hover hover:tw-text-box-warning-inverse-hover',\n ]),\n [BadgeStyle.Danger]: merge([\n 'tw-bg-box-negative tw-text-box-negative-inverse',\n hasHover && 'hover:tw-bg-box-negative-hover hover:tw-text-box-negative-inverse-hover',\n ]),\n })[style] ?? '';\n\nexport const isBadgeStatus = (style: BadgeStatus | Color | string): style is BadgeStatus =>\n Object.values(BadgeStatus).includes(style as BadgeStatus);\n\nexport const getCircularSizeClasses = (size: BadgeSize) =>\n ({\n small: 'tw-h-5 tw-w-5',\n medium: 'tw-h-6 tw-w-6',\n })[size];\n\nexport const getSizeClasses = (\n children: ReactNode,\n status: BadgeProps['status'],\n icon: BadgeProps['icon'],\n size: BadgeSize,\n isDismissable: boolean,\n) => {\n const isSmall = size === 'small';\n const hasMaximumTwoComponents = !(children && status && icon);\n\n if (isSmall) {\n return merge([\n 'tw-h-5 tw-px-2 tw-gap-x-1',\n hasMaximumTwoComponents && 'tw-gap-x-1.5',\n isDismissable && 'tw-pr-5',\n ]);\n } else {\n return merge([\n 'tw-h-6',\n 'tw-px-2.5 tw-gap-x-1',\n hasMaximumTwoComponents && 'tw-gap-x-2',\n isDismissable && 'tw-pr-6',\n ]);\n }\n};\n\nexport const badgeStatusClasses: Record<BadgeStatus, string> = {\n [BadgeStatus.Positive]: 'tw-bg-green-60',\n [BadgeStatus.Progress]: 'tw-bg-violet-60',\n [BadgeStatus.Warning]: 'tw-bg-yellow-60',\n [BadgeStatus.Danger]: 'tw-bg-red-60',\n};\n"],"names":["getStyleClasses","style","hasHover","strong","BadgeStyle","merge","isBadgeStatus","BadgeStatus","getCircularSizeClasses","size","getSizeClasses","children","status","icon","isDismissable","isSmall","hasMaximumTwoComponents","badgeStatusClasses"],"mappings":";;AAUO,MAAMA,IAAkB,CAACC,GAAmBC,GAAmBC,OACjEA,IACK;AAAA,EACI,CAACC,EAAW,OAAO,GAAGC,EAAM;AAAA,IACxB;AAAA,IACAH,KAAY;AAAA,EAAA,CACf;AAAA,EACD,CAACE,EAAW,QAAQ,GAAGC,EAAM;AAAA,IACzB;AAAA,IACAH,KAAY;AAAA,EAAA,CACf;AAAA,EACD,CAACE,EAAW,MAAM,GAAGC,EAAM;AAAA,IACvB;AAAA,IACAH,KAAY;AAAA,EAAA,CACf;AAAA,EACD,CAACE,EAAW,QAAQ,GAAGC,EAAM;AAAA,IACzB;AAAA,IACAH,KAAY;AAAA,EAAA,CACf;AAAA,EACD,CAACE,EAAW,OAAO,GAAGC,EAAM;AAAA,IACxB;AAAA,IACAH,KAAY;AAAA,EACf,CAAA;AACL,IACA;AAAA,EACI,CAACE,EAAW,OAAO,GAAGC,EAAM;AAAA,IACxB;AAAA,IACAH,KAAY;AAAA,EAAA,CACf;AAAA,EACD,CAACE,EAAW,QAAQ,GAAGC,EAAM;AAAA,IACzB;AAAA,IACAH,KAAY;AAAA,EAAA,CACf;AAAA,EACD,CAACE,EAAW,QAAQ,GAAGC,EAAM;AAAA,IACzB;AAAA,IACAH,KAAY;AAAA,EAAA,CACf;AAAA,EACD,CAACE,EAAW,OAAO,GAAGC,EAAM;AAAA,IACxB;AAAA,IACAH,KAAY;AAAA,EAAA,CACf;AAAA,EACD,CAACE,EAAW,MAAM,GAAGC,EAAM;AAAA,IACvB;AAAA,IACAH,KAAY;AAAA,EACf,CAAA;AACL,GAAGD,CAAK,KAAK,IAEVK,IAAgB,CAACL,MAC1B,OAAO,OAAOM,CAAW,EAAE,SAASN,CAAoB,GAE/CO,IAAyB,CAACC,OAClC;AAAA,EACG,OAAO;AAAA,EACP,QAAQ;AACZ,GAAGA,CAAI,GAEEC,IAAiB,CAC1BC,GACAC,GACAC,GACAJ,GACAK,MACC;AACD,QAAMC,IAAUN,MAAS,SACnBO,IAA0B,EAAEL,KAAYC,KAAUC;AAExD,SAAIE,IACOV,EAAM;AAAA,IACT;AAAA,IACAW,KAA2B;AAAA,IAC3BF,KAAiB;AAAA,EAAA,CACpB,IAEMT,EAAM;AAAA,IACT;AAAA,IACA;AAAA,IACAW,KAA2B;AAAA,IAC3BF,KAAiB;AAAA,EAAA,CACpB;AAET,GAEaG,IAAkD;AAAA,EAC3D,CAACV,EAAY,QAAQ,GAAG;AAAA,EACxB,CAACA,EAAY,QAAQ,GAAG;AAAA,EACxB,CAACA,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,MAAM,GAAG;AAC1B;"}
|