@frontify/fondue 12.0.0-beta.64 → 12.0.0-beta.65
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.
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { IconSize as
|
|
1
|
+
import S from "../../foundation/Icon/Generated/IconCross.es.js";
|
|
2
|
+
import { IconSize as w } from "../../foundation/Icon/IconSize.es.js";
|
|
3
3
|
import { FOCUS_VISIBLE_STYLE as b } from "../../utilities/focusStyle.es.js";
|
|
4
4
|
import { merge as l } from "../../utilities/merge.es.js";
|
|
5
5
|
import r, { cloneElement as E } from "react";
|
|
6
6
|
import { BadgeStatusIcon as y } from "./BadgeStatusIcon.es.js";
|
|
7
7
|
import { getStyleClasses as z, getCircularSizeClasses as B, getSizeClasses as C } from "./helpers.es.js";
|
|
8
|
-
import { BadgeEmphasis as
|
|
8
|
+
import { BadgeEmphasis as c, BadgeStyle as N } from "./types.es.js";
|
|
9
9
|
const F = ({
|
|
10
10
|
children: e,
|
|
11
11
|
status: a,
|
|
12
|
-
icon:
|
|
12
|
+
icon: n,
|
|
13
13
|
style: f = N.Primary,
|
|
14
14
|
size: p = "medium",
|
|
15
|
-
emphasis: g =
|
|
16
|
-
disabled:
|
|
17
|
-
onClick:
|
|
18
|
-
onDismiss:
|
|
15
|
+
emphasis: g = c.None,
|
|
16
|
+
disabled: i = !1,
|
|
17
|
+
onClick: o,
|
|
18
|
+
onDismiss: s
|
|
19
19
|
}) => {
|
|
20
|
-
if (!e && !
|
|
20
|
+
if (!e && !n && !a)
|
|
21
21
|
return null;
|
|
22
|
-
const u =
|
|
22
|
+
const u = o ? "a" : "span", m = (t) => ["string", "number"].includes(typeof t) ? t : t instanceof Array ? t.map(m).join("") : t && typeof t == "object" && "props" in t ? m(t.props.children) : "", x = m(e), d = !e && !s && Boolean(a || n);
|
|
23
23
|
return /* @__PURE__ */ r.createElement(u, {
|
|
24
|
-
onClick: () =>
|
|
24
|
+
onClick: () => o && o(),
|
|
25
25
|
className: l([
|
|
26
26
|
"tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-transition-color tw-select-none tw-flex-initial tw-min-w-0 tw-align-top",
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
i ? "tw-bg-box-disabled tw-text-box-disabled-inverse" : z(f, !!o, g === c.Strong),
|
|
28
|
+
o && !i ? "hover:tw-cursor-pointer" : "tw-cursor-default",
|
|
29
|
+
d ? B(p) : C(e, a, n, p)
|
|
30
30
|
]),
|
|
31
31
|
"data-test-id": "badge",
|
|
32
32
|
title: x
|
|
33
33
|
}, a && /* @__PURE__ */ r.createElement(y, {
|
|
34
34
|
status: a,
|
|
35
|
-
disabled:
|
|
36
|
-
}),
|
|
35
|
+
disabled: i
|
|
36
|
+
}), n && /* @__PURE__ */ r.createElement("span", {
|
|
37
37
|
"data-test-id": "badge-icon",
|
|
38
|
-
className: l([
|
|
39
|
-
}, E(
|
|
38
|
+
className: l([i && "tw-opacity-30", "tw-flex-none tw-leading-none"])
|
|
39
|
+
}, E(n, { size: w.Size16 })), e && /* @__PURE__ */ r.createElement("span", {
|
|
40
40
|
className: "tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate tw-px-0.5"
|
|
41
|
-
}, e),
|
|
41
|
+
}, e), s && /* @__PURE__ */ r.createElement("button", {
|
|
42
42
|
type: "button",
|
|
43
43
|
"data-test-id": "badge-dismiss",
|
|
44
|
-
className: l(["tw
|
|
44
|
+
className: l(["tw-leading-4", "tw-mx-0.5 tw-rounded", b]),
|
|
45
45
|
onClick: (t) => {
|
|
46
|
-
t.stopPropagation(),
|
|
46
|
+
t.stopPropagation(), s();
|
|
47
47
|
}
|
|
48
|
-
}, /* @__PURE__ */ r.createElement(
|
|
49
|
-
size:
|
|
48
|
+
}, /* @__PURE__ */ r.createElement(S, {
|
|
49
|
+
size: w.Size16
|
|
50
50
|
})));
|
|
51
51
|
};
|
|
52
52
|
export {
|
|
@@ -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 RejectIcon from '@foundation/Icon/Generated/IconCross';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactNode, cloneElement } from 'react';\nimport { BadgeStatusIcon } from './BadgeStatusIcon';\nimport { getCircularSizeClasses, getSizeClasses, getStyleClasses } from './helpers';\nimport { BadgeEmphasis, BadgeProps, BadgeStyle } from './types';\n\nexport const Badge: FC<BadgeProps> = ({\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}) => {\n if (!children && !icon && !status) {\n return null;\n }\n\n const Container = onClick ? 'a' : 'span';\n\n const getNodeText = (node: ReactNode): string => {\n if (['string', 'number'].includes(typeof node)) {\n return node as string;\n }\n if (node instanceof Array) {\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 <Container\n onClick={() => onClick && onClick()}\n className={merge([\n 'tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-transition-color tw-select-none tw-flex-initial tw-min-w-0 tw-align-top',\n disabled\n ? 'tw-bg-box-disabled tw-text-box-disabled-inverse'\n : getStyleClasses(style, !!onClick, emphasis === BadgeEmphasis.Strong),\n onClick && !disabled ? 'hover:tw-cursor-pointer' : 'tw-cursor-default',\n isCircular ? getCircularSizeClasses(size) : getSizeClasses(children, status, icon, size),\n ])}\n data-test-id=\"badge\"\n title={badgeTitle}\n >\n {status && <BadgeStatusIcon status={status} disabled={disabled} />}\n {icon && (\n <span\n data-test-id=\"badge-icon\"\n className={merge([disabled && 'tw-opacity-30', 'tw-flex-none tw-leading-none'])}\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 tw-px-0.5\">\n {children}\n </span>\n )}\n {onDismiss && (\n <button\n type=\"button\"\n data-test-id=\"badge-dismiss\"\n className={merge(['tw
|
|
1
|
+
{"version":3,"file":"Badge.es.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport RejectIcon from '@foundation/Icon/Generated/IconCross';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactNode, cloneElement } from 'react';\nimport { BadgeStatusIcon } from './BadgeStatusIcon';\nimport { getCircularSizeClasses, getSizeClasses, getStyleClasses } from './helpers';\nimport { BadgeEmphasis, BadgeProps, BadgeStyle } from './types';\n\nexport const Badge: FC<BadgeProps> = ({\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}) => {\n if (!children && !icon && !status) {\n return null;\n }\n\n const Container = onClick ? 'a' : 'span';\n\n const getNodeText = (node: ReactNode): string => {\n if (['string', 'number'].includes(typeof node)) {\n return node as string;\n }\n if (node instanceof Array) {\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 <Container\n onClick={() => onClick && onClick()}\n className={merge([\n 'tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-transition-color tw-select-none tw-flex-initial tw-min-w-0 tw-align-top',\n disabled\n ? 'tw-bg-box-disabled tw-text-box-disabled-inverse'\n : getStyleClasses(style, !!onClick, emphasis === BadgeEmphasis.Strong),\n onClick && !disabled ? 'hover:tw-cursor-pointer' : 'tw-cursor-default',\n isCircular ? getCircularSizeClasses(size) : getSizeClasses(children, status, icon, size),\n ])}\n data-test-id=\"badge\"\n title={badgeTitle}\n >\n {status && <BadgeStatusIcon status={status} disabled={disabled} />}\n {icon && (\n <span\n data-test-id=\"badge-icon\"\n className={merge([disabled && 'tw-opacity-30', 'tw-flex-none tw-leading-none'])}\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 tw-px-0.5\">\n {children}\n </span>\n )}\n {onDismiss && (\n <button\n type=\"button\"\n data-test-id=\"badge-dismiss\"\n className={merge(['tw-leading-4', 'tw-mx-0.5 tw-rounded', FOCUS_VISIBLE_STYLE])}\n onClick={(event) => {\n event.stopPropagation();\n onDismiss();\n }}\n >\n <RejectIcon size={IconSize.Size16} />\n </button>\n )}\n </Container>\n );\n};\n"],"names":["Badge","children","status","icon","style","BadgeStyle","size","emphasis","BadgeEmphasis","disabled","onClick","onDismiss","Container","getNodeText","node","badgeTitle","isCircular","React","merge","getStyleClasses","getCircularSizeClasses","getSizeClasses","BadgeStatusIcon","cloneElement","IconSize","FOCUS_VISIBLE_STYLE","event","RejectIcon"],"mappings":";;;;;;;;AAWO,MAAMA,IAAwB,CAAC;AAAA,EAClC,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;AACJ,MAAM;AACF,MAAI,CAACV,KAAY,CAACE,KAAQ,CAACD;AAChB,WAAA;AAGL,QAAAU,IAAYF,IAAU,MAAM,QAE5BG,IAAc,CAACC,MACb,CAAC,UAAU,QAAQ,EAAE,SAAS,OAAOA,CAAI,IAClCA,IAEPA,aAAgB,QACTA,EAAK,IAAID,CAAW,EAAE,KAAK,EAAE,IAEpCC,KAAQ,OAAOA,KAAS,YAAY,WAAWA,IACxCD,EAAYC,EAAK,MAAM,QAAQ,IAEnC,IAGLC,IAAaF,EAAYZ,CAAQ,GACjCe,IAAa,CAACf,KAAY,CAACU,KAAa,QAAQT,KAAUC,CAAI;AAEpE,SACK,gBAAAc,EAAA,cAAAL,GAAA;AAAA,IACG,SAAS,MAAMF,KAAWA,EAAQ;AAAA,IAClC,WAAWQ,EAAM;AAAA,MACb;AAAA,MACAT,IACM,oDACAU,EAAgBf,GAAO,CAAC,CAACM,GAASH,MAAaC,EAAc,MAAM;AAAA,MACzEE,KAAW,CAACD,IAAW,4BAA4B;AAAA,MACnDO,IAAaI,EAAuBd,CAAI,IAAIe,EAAepB,GAAUC,GAAQC,GAAMG,CAAI;AAAA,IAAA,CAC1F;AAAA,IACD,gBAAa;AAAA,IACb,OAAOS;AAAA,EAAA,GAENb,KAAW,gBAAAe,EAAA,cAAAK,GAAA;AAAA,IAAgB,QAAApB;AAAA,IAAgB,UAAAO;AAAA,EAAoB,CAAA,GAC/DN,KACI,gBAAAc,EAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWC,EAAM,CAACT,KAAY,iBAAiB,8BAA8B,CAAC;AAAA,EAE7E,GAAAc,EAAapB,GAAM,EAAE,MAAMqB,EAAS,QAAQ,CACjD,GAEHvB,KACI,gBAAAgB,EAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EACX,GAAAhB,CACL,GAEHU,KACI,gBAAAM,EAAA,cAAA,UAAA;AAAA,IACG,MAAK;AAAA,IACL,gBAAa;AAAA,IACb,WAAWC,EAAM,CAAC,gBAAgB,wBAAwBO,CAAmB,CAAC;AAAA,IAC9E,SAAS,CAACC,MAAU;AAChB,MAAAA,EAAM,gBAAgB,GACZf;IACd;AAAA,EAAA,GAEC,gBAAAM,EAAA,cAAAU,GAAA;AAAA,IAAW,MAAMH,EAAS;AAAA,EAAQ,CAAA,CACvC,CAER;AAER;"}
|