@j2-health/design-system 0.6.6 → 0.6.8
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.
|
@@ -17,6 +17,16 @@ var colorToIcon = {
|
|
|
17
17
|
processing: _phosphor_icons_react.ArrowsClockwiseIcon,
|
|
18
18
|
default: _phosphor_icons_react.GearIcon
|
|
19
19
|
};
|
|
20
|
+
/**
|
|
21
|
+
* The tinted variant from one color: the fill at 14% over white, the border
|
|
22
|
+
* at 45% over white, the text at 65% over black. On the categorical palette
|
|
23
|
+
* the text clears 5.4:1 on its fill.
|
|
24
|
+
*/
|
|
25
|
+
var tintedStyle = (hue) => ({
|
|
26
|
+
background: `color-mix(in srgb, ${hue} 14%, white)`,
|
|
27
|
+
borderColor: `color-mix(in srgb, ${hue} 45%, white)`,
|
|
28
|
+
color: `color-mix(in srgb, ${hue} 65%, black)`
|
|
29
|
+
});
|
|
20
30
|
var statusToColor = {
|
|
21
31
|
error: "var(--j2-color-error-text)",
|
|
22
32
|
success: "var(--j2-color-success)",
|
|
@@ -26,12 +36,14 @@ var statusToColor = {
|
|
|
26
36
|
};
|
|
27
37
|
var Tag = ({ status, showIcon = false, icon, size = "default", bordered, variant, color, borderColor, ...props }) => {
|
|
28
38
|
const isSolid = variant === "solid";
|
|
39
|
+
const isTinted = variant === "tinted";
|
|
40
|
+
const tint = isTinted ? tintedStyle(color ?? statusToColor[status]) : null;
|
|
29
41
|
const solidDefault = isSolid && !color && status === "default" ? "var(--j2-gray-11)" : void 0;
|
|
30
42
|
const iconComponent = react$1.useMemo(() => {
|
|
31
43
|
if (!showIcon || size === "small") return null;
|
|
32
44
|
const baseProps = { size: 12 };
|
|
33
45
|
const iconName = icon ?? colorToIcon[status];
|
|
34
|
-
const iconColor = isSolid ? "white" : statusToColor[status];
|
|
46
|
+
const iconColor = isSolid ? "white" : tint?.color ?? statusToColor[status];
|
|
35
47
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
36
48
|
role: "img",
|
|
37
49
|
className: "anticon",
|
|
@@ -45,21 +57,24 @@ var Tag = ({ status, showIcon = false, icon, size = "default", bordered, variant
|
|
|
45
57
|
status,
|
|
46
58
|
showIcon,
|
|
47
59
|
icon,
|
|
48
|
-
isSolid
|
|
60
|
+
isSolid,
|
|
61
|
+
tint?.color
|
|
49
62
|
]);
|
|
50
63
|
const statusToClassName = { default: "bg-[var(--j2-color-fill-quaternary)]" };
|
|
51
64
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, {
|
|
52
65
|
...props,
|
|
53
|
-
variant: variant ?? (bordered === false ? "filled" : "outlined"),
|
|
54
|
-
color: color ?? solidDefault ?? status,
|
|
66
|
+
variant: isTinted ? "outlined" : variant ?? (bordered === false ? "filled" : "outlined"),
|
|
67
|
+
color: isTinted ? void 0 : color ?? solidDefault ?? status,
|
|
55
68
|
icon: iconComponent,
|
|
56
|
-
style: borderColor ? {
|
|
57
|
-
|
|
69
|
+
style: tint || borderColor ? {
|
|
70
|
+
...tint,
|
|
71
|
+
...borderColor ? { borderColor } : null,
|
|
58
72
|
...props.style
|
|
59
73
|
} : props.style,
|
|
60
|
-
className: (0, classnames.default)("j2-tag", props.className, !isSolid && statusToClassName[status], isSolid && "j2-tag-solid", size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm")
|
|
74
|
+
className: (0, classnames.default)("j2-tag", props.className, !isSolid && !isTinted && statusToClassName[status], isSolid && "j2-tag-solid", isTinted && "j2-tag-tinted", size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm")
|
|
61
75
|
});
|
|
62
76
|
};
|
|
63
77
|
exports.Tag = Tag;
|
|
78
|
+
exports.tintedStyle = tintedStyle;
|
|
64
79
|
|
|
65
80
|
//# sourceMappingURL=Tag.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.cjs","names":["XCircleIcon","CheckCircleIcon","WarningCircleIcon","ArrowsClockwiseIcon","GearIcon","React","AntdTag","cx"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n ArrowsClockwiseIcon,\n CheckCircleIcon,\n GearIcon,\n Icon,\n WarningCircleIcon,\n XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon' | 'color'>> & {\n status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n /**\n * A color outside the status set, e.g. a data-visualization token\n * (`'var(--j2-color-interval-7-5)'`). Overrides the status color; use it\n * with `variant=\"solid\"` for a filled badge.\n */\n color?: string\n /**\n * The border's color, when it should differ from the fill: e.g. a solid\n * badge with a darker edge (`'var(--j2-color-interval-7-7)'`).\n */\n borderColor?: string\n}\n\ntype DefaultSizeProps = BaseProps & {\n size?: 'default'\n icon?: Icon\n showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n size: 'small'\n /** Icons are not supported on the small variant — omit this prop. */\n icon?: never\n showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n error: XCircleIcon,\n success: CheckCircleIcon,\n warning: WarningCircleIcon,\n processing: ArrowsClockwiseIcon,\n default: GearIcon,\n}\n\nconst statusToColor = {\n error: 'var(--j2-color-error-text)',\n success: 'var(--j2-color-success)',\n warning: 'var(--j2-color-warning-text)',\n processing: 'var(--j2-color-primary)',\n default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n status,\n showIcon = false,\n icon,\n size = 'default',\n bordered,\n variant,\n color,\n borderColor,\n ...props\n}: Props) => {\n const isSolid = variant === 'solid'\n // antd's solid \"default\" is near-black; the DS neutral is gray-11.\n const solidDefault =\n isSolid && !color && status === 'default' ? 'var(--j2-gray-11)' : undefined\n\n const iconComponent = React.useMemo(() => {\n if (!showIcon || size === 'small') return null\n\n const baseProps = {\n size: 12,\n }\n\n const iconName: Icon = icon ?? colorToIcon[status]\n // White on a solid fill, where the status color would vanish.\n const iconColor: string = isSolid
|
|
1
|
+
{"version":3,"file":"Tag.cjs","names":["XCircleIcon","CheckCircleIcon","WarningCircleIcon","ArrowsClockwiseIcon","GearIcon","React","AntdTag","cx"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n ArrowsClockwiseIcon,\n CheckCircleIcon,\n GearIcon,\n Icon,\n WarningCircleIcon,\n XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon' | 'color' | 'variant'>> & {\n status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n /**\n * antd's `'outlined'`, `'filled'` and `'solid'`, plus `'tinted'`: a pale\n * fill, a mid border and dark text, all from `color` (or the status color).\n * For a set of tags told apart by color, such as user-defined labels on the\n * categorical palette.\n */\n variant?: TagProps['variant'] | 'tinted'\n /**\n * A color outside the status set, e.g. a data-visualization token\n * (`'var(--j2-color-interval-7-5)'`). Overrides the status color; use it\n * with `variant=\"solid\"` for a filled badge, or `variant=\"tinted\"` for a\n * pale one (`'var(--j2-color-categorical-3)'`).\n */\n color?: string\n /**\n * The border's color, when it should differ from the fill: e.g. a solid\n * badge with a darker edge (`'var(--j2-color-interval-7-7)'`).\n */\n borderColor?: string\n}\n\ntype DefaultSizeProps = BaseProps & {\n size?: 'default'\n icon?: Icon\n showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n size: 'small'\n /** Icons are not supported on the small variant — omit this prop. */\n icon?: never\n showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n error: XCircleIcon,\n success: CheckCircleIcon,\n warning: WarningCircleIcon,\n processing: ArrowsClockwiseIcon,\n default: GearIcon,\n}\n\n/**\n * The tinted variant from one color: the fill at 14% over white, the border\n * at 45% over white, the text at 65% over black. On the categorical palette\n * the text clears 5.4:1 on its fill.\n */\nexport const tintedStyle = (hue: string): React.CSSProperties => ({\n background: `color-mix(in srgb, ${hue} 14%, white)`,\n borderColor: `color-mix(in srgb, ${hue} 45%, white)`,\n color: `color-mix(in srgb, ${hue} 65%, black)`,\n})\n\nconst statusToColor = {\n error: 'var(--j2-color-error-text)',\n success: 'var(--j2-color-success)',\n warning: 'var(--j2-color-warning-text)',\n processing: 'var(--j2-color-primary)',\n default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n status,\n showIcon = false,\n icon,\n size = 'default',\n bordered,\n variant,\n color,\n borderColor,\n ...props\n}: Props) => {\n const isSolid = variant === 'solid'\n const isTinted = variant === 'tinted'\n // antd derives a fill by parsing `color`, which a CSS variable or color-mix\n // doesn't survive, so the tinted colors are set as styles instead.\n const tint = isTinted ? tintedStyle(color ?? statusToColor[status]) : null\n // antd's solid \"default\" is near-black; the DS neutral is gray-11.\n const solidDefault =\n isSolid && !color && status === 'default' ? 'var(--j2-gray-11)' : undefined\n\n const iconComponent = React.useMemo(() => {\n if (!showIcon || size === 'small') return null\n\n const baseProps = {\n size: 12,\n }\n\n const iconName: Icon = icon ?? colorToIcon[status]\n // White on a solid fill, where the status color would vanish; the text\n // color on a tinted one.\n const iconColor: string = isSolid\n ? 'white'\n : (tint?.color ?? statusToColor[status])\n\n return (\n <span role=\"img\" className=\"anticon\" aria-label={`${status} icon`}>\n {React.createElement(iconName, { color: iconColor, ...baseProps })}\n </span>\n )\n }, [status, showIcon, icon, isSolid, tint?.color])\n\n const statusToClassName: Partial<Record<keyof typeof statusToColor, string>> =\n {\n default: 'bg-[var(--j2-color-fill-quaternary)]',\n }\n\n return (\n <AntdTag\n {...props}\n variant={\n isTinted\n ? 'outlined'\n : (variant ?? (bordered === false ? 'filled' : 'outlined'))\n }\n color={isTinted ? undefined : (color ?? solidDefault ?? status)}\n icon={iconComponent}\n style={\n tint || borderColor\n ? {\n ...tint,\n ...(borderColor ? { borderColor } : null),\n ...props.style,\n }\n : props.style\n }\n className={cx(\n 'j2-tag',\n props.className,\n !isSolid && !isTinted && statusToClassName[status],\n isSolid && 'j2-tag-solid',\n isTinted && 'j2-tag-tinted',\n size === 'small' && '!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm'\n )}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;AAmDA,IAAM,cAAc;CAClB,OAAOA,sBAAAA;CACP,SAASC,sBAAAA;CACT,SAASC,sBAAAA;CACT,YAAYC,sBAAAA;CACZ,SAASC,sBAAAA;AACX;;;;;;AAOA,IAAa,eAAe,SAAsC;CAChE,YAAY,sBAAsB,IAAI;CACtC,aAAa,sBAAsB,IAAI;CACvC,OAAO,sBAAsB,IAAI;AACnC;AAEA,IAAM,gBAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,IAAa,OAAO,EAClB,QACA,WAAW,OACX,MACA,OAAO,WACP,UACA,SACA,OACA,aACA,GAAG,YACQ;CACX,MAAM,UAAU,YAAY;CAC5B,MAAM,WAAW,YAAY;CAG7B,MAAM,OAAO,WAAW,YAAY,SAAS,cAAc,OAAO,IAAI;CAEtE,MAAM,eACJ,WAAW,CAAC,SAAS,WAAW,YAAY,sBAAsB,KAAA;CAEpE,MAAM,gBAAgBC,QAAM,cAAc;EACxC,IAAI,CAAC,YAAY,SAAS,SAAS,OAAO;EAE1C,MAAM,YAAY,EAChB,MAAM,GACR;EAEA,MAAM,WAAiB,QAAQ,YAAY;EAG3C,MAAM,YAAoB,UACtB,UACC,MAAM,SAAS,cAAc;EAElC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,MAAK;GAAM,WAAU;GAAU,cAAY,GAAG,OAAO;GACxD,UAAAA,QAAM,cAAc,UAAU;IAAE,OAAO;IAAW,GAAG;GAAU,CAAC;EAC7D,CAAA;CAEV,GAAG;EAAC;EAAQ;EAAU;EAAM;EAAS,MAAM;CAAK,CAAC;CAEjD,MAAM,oBACJ,EACE,SAAS,uCACX;CAEF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,KAAD;EACE,GAAI;EACJ,SACE,WACI,aACC,YAAY,aAAa,QAAQ,WAAW;EAEnD,OAAO,WAAW,KAAA,IAAa,SAAS,gBAAgB;EACxD,MAAM;EACN,OACE,QAAQ,cACJ;GACE,GAAG;GACH,GAAI,cAAc,EAAE,YAAY,IAAI;GACpC,GAAG,MAAM;EACX,IACA,MAAM;EAEZ,YAAA,GAAWC,WAAAA,QAAAA,CACT,UACA,MAAM,WACN,CAAC,WAAW,CAAC,YAAY,kBAAkB,SAC3C,WAAW,gBACX,YAAY,iBACZ,SAAS,WAAW,gDACtB;CACD,CAAA;AAEL"}
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import { TagProps } from 'antd';
|
|
2
2
|
import { Icon } from '@phosphor-icons/react';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
type BaseProps = Expand<Omit<TagProps, 'icon' | 'color'>> & {
|
|
4
|
+
type BaseProps = Expand<Omit<TagProps, 'icon' | 'color' | 'variant'>> & {
|
|
5
5
|
status: 'default' | 'error' | 'success' | 'warning' | 'processing';
|
|
6
|
+
/**
|
|
7
|
+
* antd's `'outlined'`, `'filled'` and `'solid'`, plus `'tinted'`: a pale
|
|
8
|
+
* fill, a mid border and dark text, all from `color` (or the status color).
|
|
9
|
+
* For a set of tags told apart by color, such as user-defined labels on the
|
|
10
|
+
* categorical palette.
|
|
11
|
+
*/
|
|
12
|
+
variant?: TagProps['variant'] | 'tinted';
|
|
6
13
|
/**
|
|
7
14
|
* A color outside the status set, e.g. a data-visualization token
|
|
8
15
|
* (`'var(--j2-color-interval-7-5)'`). Overrides the status color; use it
|
|
9
|
-
* with `variant="solid"` for a filled badge
|
|
16
|
+
* with `variant="solid"` for a filled badge, or `variant="tinted"` for a
|
|
17
|
+
* pale one (`'var(--j2-color-categorical-3)'`).
|
|
10
18
|
*/
|
|
11
19
|
color?: string;
|
|
12
20
|
/**
|
|
@@ -27,5 +35,11 @@ type SmallSizeProps = BaseProps & {
|
|
|
27
35
|
showIcon?: never;
|
|
28
36
|
};
|
|
29
37
|
type Props = DefaultSizeProps | SmallSizeProps;
|
|
38
|
+
/**
|
|
39
|
+
* The tinted variant from one color: the fill at 14% over white, the border
|
|
40
|
+
* at 45% over white, the text at 65% over black. On the categorical palette
|
|
41
|
+
* the text clears 5.4:1 on its fill.
|
|
42
|
+
*/
|
|
43
|
+
export declare const tintedStyle: (hue: string) => React.CSSProperties;
|
|
30
44
|
export declare const Tag: ({ status, showIcon, icon, size, bordered, variant, color, borderColor, ...props }: Props) => React.JSX.Element;
|
|
31
45
|
export {};
|
|
@@ -12,6 +12,16 @@ var colorToIcon = {
|
|
|
12
12
|
processing: ArrowsClockwiseIcon,
|
|
13
13
|
default: GearIcon
|
|
14
14
|
};
|
|
15
|
+
/**
|
|
16
|
+
* The tinted variant from one color: the fill at 14% over white, the border
|
|
17
|
+
* at 45% over white, the text at 65% over black. On the categorical palette
|
|
18
|
+
* the text clears 5.4:1 on its fill.
|
|
19
|
+
*/
|
|
20
|
+
var tintedStyle = (hue) => ({
|
|
21
|
+
background: `color-mix(in srgb, ${hue} 14%, white)`,
|
|
22
|
+
borderColor: `color-mix(in srgb, ${hue} 45%, white)`,
|
|
23
|
+
color: `color-mix(in srgb, ${hue} 65%, black)`
|
|
24
|
+
});
|
|
15
25
|
var statusToColor = {
|
|
16
26
|
error: "var(--j2-color-error-text)",
|
|
17
27
|
success: "var(--j2-color-success)",
|
|
@@ -21,12 +31,14 @@ var statusToColor = {
|
|
|
21
31
|
};
|
|
22
32
|
var Tag$1 = ({ status, showIcon = false, icon, size = "default", bordered, variant, color, borderColor, ...props }) => {
|
|
23
33
|
const isSolid = variant === "solid";
|
|
34
|
+
const isTinted = variant === "tinted";
|
|
35
|
+
const tint = isTinted ? tintedStyle(color ?? statusToColor[status]) : null;
|
|
24
36
|
const solidDefault = isSolid && !color && status === "default" ? "var(--j2-gray-11)" : void 0;
|
|
25
37
|
const iconComponent = React.useMemo(() => {
|
|
26
38
|
if (!showIcon || size === "small") return null;
|
|
27
39
|
const baseProps = { size: 12 };
|
|
28
40
|
const iconName = icon ?? colorToIcon[status];
|
|
29
|
-
const iconColor = isSolid ? "white" : statusToColor[status];
|
|
41
|
+
const iconColor = isSolid ? "white" : tint?.color ?? statusToColor[status];
|
|
30
42
|
return /* @__PURE__ */ jsx("span", {
|
|
31
43
|
role: "img",
|
|
32
44
|
className: "anticon",
|
|
@@ -40,21 +52,23 @@ var Tag$1 = ({ status, showIcon = false, icon, size = "default", bordered, varia
|
|
|
40
52
|
status,
|
|
41
53
|
showIcon,
|
|
42
54
|
icon,
|
|
43
|
-
isSolid
|
|
55
|
+
isSolid,
|
|
56
|
+
tint?.color
|
|
44
57
|
]);
|
|
45
58
|
const statusToClassName = { default: "bg-[var(--j2-color-fill-quaternary)]" };
|
|
46
59
|
return /* @__PURE__ */ jsx(Tag, {
|
|
47
60
|
...props,
|
|
48
|
-
variant: variant ?? (bordered === false ? "filled" : "outlined"),
|
|
49
|
-
color: color ?? solidDefault ?? status,
|
|
61
|
+
variant: isTinted ? "outlined" : variant ?? (bordered === false ? "filled" : "outlined"),
|
|
62
|
+
color: isTinted ? void 0 : color ?? solidDefault ?? status,
|
|
50
63
|
icon: iconComponent,
|
|
51
|
-
style: borderColor ? {
|
|
52
|
-
|
|
64
|
+
style: tint || borderColor ? {
|
|
65
|
+
...tint,
|
|
66
|
+
...borderColor ? { borderColor } : null,
|
|
53
67
|
...props.style
|
|
54
68
|
} : props.style,
|
|
55
|
-
className: cx("j2-tag", props.className, !isSolid && statusToClassName[status], isSolid && "j2-tag-solid", size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm")
|
|
69
|
+
className: cx("j2-tag", props.className, !isSolid && !isTinted && statusToClassName[status], isSolid && "j2-tag-solid", isTinted && "j2-tag-tinted", size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm")
|
|
56
70
|
});
|
|
57
71
|
};
|
|
58
|
-
export { Tag$1 as Tag };
|
|
72
|
+
export { Tag$1 as Tag, tintedStyle };
|
|
59
73
|
|
|
60
74
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","names":["Tag","AntdTag"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n ArrowsClockwiseIcon,\n CheckCircleIcon,\n GearIcon,\n Icon,\n WarningCircleIcon,\n XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon' | 'color'>> & {\n status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n /**\n * A color outside the status set, e.g. a data-visualization token\n * (`'var(--j2-color-interval-7-5)'`). Overrides the status color; use it\n * with `variant=\"solid\"` for a filled badge.\n */\n color?: string\n /**\n * The border's color, when it should differ from the fill: e.g. a solid\n * badge with a darker edge (`'var(--j2-color-interval-7-7)'`).\n */\n borderColor?: string\n}\n\ntype DefaultSizeProps = BaseProps & {\n size?: 'default'\n icon?: Icon\n showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n size: 'small'\n /** Icons are not supported on the small variant — omit this prop. */\n icon?: never\n showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n error: XCircleIcon,\n success: CheckCircleIcon,\n warning: WarningCircleIcon,\n processing: ArrowsClockwiseIcon,\n default: GearIcon,\n}\n\nconst statusToColor = {\n error: 'var(--j2-color-error-text)',\n success: 'var(--j2-color-success)',\n warning: 'var(--j2-color-warning-text)',\n processing: 'var(--j2-color-primary)',\n default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n status,\n showIcon = false,\n icon,\n size = 'default',\n bordered,\n variant,\n color,\n borderColor,\n ...props\n}: Props) => {\n const isSolid = variant === 'solid'\n // antd's solid \"default\" is near-black; the DS neutral is gray-11.\n const solidDefault =\n isSolid && !color && status === 'default' ? 'var(--j2-gray-11)' : undefined\n\n const iconComponent = React.useMemo(() => {\n if (!showIcon || size === 'small') return null\n\n const baseProps = {\n size: 12,\n }\n\n const iconName: Icon = icon ?? colorToIcon[status]\n // White on a solid fill, where the status color would vanish.\n const iconColor: string = isSolid
|
|
1
|
+
{"version":3,"file":"Tag.js","names":["Tag","AntdTag"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n ArrowsClockwiseIcon,\n CheckCircleIcon,\n GearIcon,\n Icon,\n WarningCircleIcon,\n XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon' | 'color' | 'variant'>> & {\n status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n /**\n * antd's `'outlined'`, `'filled'` and `'solid'`, plus `'tinted'`: a pale\n * fill, a mid border and dark text, all from `color` (or the status color).\n * For a set of tags told apart by color, such as user-defined labels on the\n * categorical palette.\n */\n variant?: TagProps['variant'] | 'tinted'\n /**\n * A color outside the status set, e.g. a data-visualization token\n * (`'var(--j2-color-interval-7-5)'`). Overrides the status color; use it\n * with `variant=\"solid\"` for a filled badge, or `variant=\"tinted\"` for a\n * pale one (`'var(--j2-color-categorical-3)'`).\n */\n color?: string\n /**\n * The border's color, when it should differ from the fill: e.g. a solid\n * badge with a darker edge (`'var(--j2-color-interval-7-7)'`).\n */\n borderColor?: string\n}\n\ntype DefaultSizeProps = BaseProps & {\n size?: 'default'\n icon?: Icon\n showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n size: 'small'\n /** Icons are not supported on the small variant — omit this prop. */\n icon?: never\n showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n error: XCircleIcon,\n success: CheckCircleIcon,\n warning: WarningCircleIcon,\n processing: ArrowsClockwiseIcon,\n default: GearIcon,\n}\n\n/**\n * The tinted variant from one color: the fill at 14% over white, the border\n * at 45% over white, the text at 65% over black. On the categorical palette\n * the text clears 5.4:1 on its fill.\n */\nexport const tintedStyle = (hue: string): React.CSSProperties => ({\n background: `color-mix(in srgb, ${hue} 14%, white)`,\n borderColor: `color-mix(in srgb, ${hue} 45%, white)`,\n color: `color-mix(in srgb, ${hue} 65%, black)`,\n})\n\nconst statusToColor = {\n error: 'var(--j2-color-error-text)',\n success: 'var(--j2-color-success)',\n warning: 'var(--j2-color-warning-text)',\n processing: 'var(--j2-color-primary)',\n default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n status,\n showIcon = false,\n icon,\n size = 'default',\n bordered,\n variant,\n color,\n borderColor,\n ...props\n}: Props) => {\n const isSolid = variant === 'solid'\n const isTinted = variant === 'tinted'\n // antd derives a fill by parsing `color`, which a CSS variable or color-mix\n // doesn't survive, so the tinted colors are set as styles instead.\n const tint = isTinted ? tintedStyle(color ?? statusToColor[status]) : null\n // antd's solid \"default\" is near-black; the DS neutral is gray-11.\n const solidDefault =\n isSolid && !color && status === 'default' ? 'var(--j2-gray-11)' : undefined\n\n const iconComponent = React.useMemo(() => {\n if (!showIcon || size === 'small') return null\n\n const baseProps = {\n size: 12,\n }\n\n const iconName: Icon = icon ?? colorToIcon[status]\n // White on a solid fill, where the status color would vanish; the text\n // color on a tinted one.\n const iconColor: string = isSolid\n ? 'white'\n : (tint?.color ?? statusToColor[status])\n\n return (\n <span role=\"img\" className=\"anticon\" aria-label={`${status} icon`}>\n {React.createElement(iconName, { color: iconColor, ...baseProps })}\n </span>\n )\n }, [status, showIcon, icon, isSolid, tint?.color])\n\n const statusToClassName: Partial<Record<keyof typeof statusToColor, string>> =\n {\n default: 'bg-[var(--j2-color-fill-quaternary)]',\n }\n\n return (\n <AntdTag\n {...props}\n variant={\n isTinted\n ? 'outlined'\n : (variant ?? (bordered === false ? 'filled' : 'outlined'))\n }\n color={isTinted ? undefined : (color ?? solidDefault ?? status)}\n icon={iconComponent}\n style={\n tint || borderColor\n ? {\n ...tint,\n ...(borderColor ? { borderColor } : null),\n ...props.style,\n }\n : props.style\n }\n className={cx(\n 'j2-tag',\n props.className,\n !isSolid && !isTinted && statusToClassName[status],\n isSolid && 'j2-tag-solid',\n isTinted && 'j2-tag-tinted',\n size === 'small' && '!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm'\n )}\n />\n )\n}\n"],"mappings":";;;;;;;AAmDA,IAAM,cAAc;CAClB,OAAO;CACP,SAAS;CACT,SAAS;CACT,YAAY;CACZ,SAAS;AACX;;;;;;AAOA,IAAa,eAAe,SAAsC;CAChE,YAAY,sBAAsB,IAAI;CACtC,aAAa,sBAAsB,IAAI;CACvC,OAAO,sBAAsB,IAAI;AACnC;AAEA,IAAM,gBAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,IAAaA,SAAO,EAClB,QACA,WAAW,OACX,MACA,OAAO,WACP,UACA,SACA,OACA,aACA,GAAG,YACQ;CACX,MAAM,UAAU,YAAY;CAC5B,MAAM,WAAW,YAAY;CAG7B,MAAM,OAAO,WAAW,YAAY,SAAS,cAAc,OAAO,IAAI;CAEtE,MAAM,eACJ,WAAW,CAAC,SAAS,WAAW,YAAY,sBAAsB,KAAA;CAEpE,MAAM,gBAAgB,MAAM,cAAc;EACxC,IAAI,CAAC,YAAY,SAAS,SAAS,OAAO;EAE1C,MAAM,YAAY,EAChB,MAAM,GACR;EAEA,MAAM,WAAiB,QAAQ,YAAY;EAG3C,MAAM,YAAoB,UACtB,UACC,MAAM,SAAS,cAAc;EAElC,OACE,oBAAC,QAAD;GAAM,MAAK;GAAM,WAAU;GAAU,cAAY,GAAG,OAAO;GACxD,UAAA,MAAM,cAAc,UAAU;IAAE,OAAO;IAAW,GAAG;GAAU,CAAC;EAC7D,CAAA;CAEV,GAAG;EAAC;EAAQ;EAAU;EAAM;EAAS,MAAM;CAAK,CAAC;CAEjD,MAAM,oBACJ,EACE,SAAS,uCACX;CAEF,OACE,oBAACC,KAAD;EACE,GAAI;EACJ,SACE,WACI,aACC,YAAY,aAAa,QAAQ,WAAW;EAEnD,OAAO,WAAW,KAAA,IAAa,SAAS,gBAAgB;EACxD,MAAM;EACN,OACE,QAAQ,cACJ;GACE,GAAG;GACH,GAAI,cAAc,EAAE,YAAY,IAAI;GACpC,GAAG,MAAM;EACX,IACA,MAAM;EAEZ,WAAW,GACT,UACA,MAAM,WACN,CAAC,WAAW,CAAC,YAAY,kBAAkB,SAC3C,WAAW,gBACX,YAAY,iBACZ,SAAS,WAAW,gDACtB;CACD,CAAA;AAEL"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@j2-health/design-system",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "J2 Health shared React component library",
|
|
6
6
|
"repository": {
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"@dnd-kit/utilities": "^3.2.2",
|
|
61
61
|
"@highcharts/react": "^5.0.0",
|
|
62
62
|
"@phosphor-icons/react": "^2.1.7",
|
|
63
|
-
"antd": "^6.6.
|
|
63
|
+
"antd": "^6.6.8",
|
|
64
64
|
"classnames": "^2.5.1",
|
|
65
65
|
"formik": "^2.4.6",
|
|
66
66
|
"highcharts": "^13.1.1",
|
|
@@ -78,9 +78,9 @@
|
|
|
78
78
|
"@eslint/js": "^10.0.1",
|
|
79
79
|
"@highcharts/react": "^5.4.0",
|
|
80
80
|
"@phosphor-icons/react": "^2.1.7",
|
|
81
|
-
"@storybook/addon-docs": "^10.6.
|
|
82
|
-
"@storybook/addon-links": "^10.6.
|
|
83
|
-
"@storybook/react-vite": "^10.6.
|
|
81
|
+
"@storybook/addon-docs": "^10.6.5",
|
|
82
|
+
"@storybook/addon-links": "^10.6.5",
|
|
83
|
+
"@storybook/react-vite": "^10.6.5",
|
|
84
84
|
"@tailwindcss/postcss": "^4.3.3",
|
|
85
85
|
"@testing-library/jest-dom": "^7.0.1",
|
|
86
86
|
"@testing-library/react": "^16.3.3",
|
|
@@ -89,30 +89,30 @@
|
|
|
89
89
|
"@types/react-dom": "^19.2.5",
|
|
90
90
|
"@vitejs/plugin-react": "^6.1.2",
|
|
91
91
|
"@vitest/coverage-v8": "^5.0.5",
|
|
92
|
-
"antd": "^6.6.
|
|
93
|
-
"autoprefixer": "^10.6.
|
|
92
|
+
"antd": "^6.6.8",
|
|
93
|
+
"autoprefixer": "^10.6.2",
|
|
94
94
|
"classnames": "^2.5.1",
|
|
95
|
-
"eslint": "^10.
|
|
95
|
+
"eslint": "^10.14.0",
|
|
96
96
|
"eslint-config-prettier": "^10.1.8",
|
|
97
97
|
"eslint-plugin-react": "^7.37.2",
|
|
98
98
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
99
99
|
"eslint-plugin-react-refresh": "^0.5.7",
|
|
100
|
-
"eslint-plugin-storybook": "^10.6.
|
|
100
|
+
"eslint-plugin-storybook": "^10.6.5",
|
|
101
101
|
"formik": "^2.4.6",
|
|
102
102
|
"globals": "^17.13.0",
|
|
103
103
|
"happy-dom": "^21.0.4",
|
|
104
104
|
"highcharts": "^13.1.1",
|
|
105
105
|
"lodash": "^4.18.1",
|
|
106
|
-
"postcss": "^8.5.
|
|
106
|
+
"postcss": "^8.5.32",
|
|
107
107
|
"prettier": "^3.9.10",
|
|
108
108
|
"react": "^19.2.8",
|
|
109
109
|
"react-dom": "^19.3.1",
|
|
110
110
|
"semver": "^7.8.5",
|
|
111
|
-
"storybook": "^10.6.
|
|
111
|
+
"storybook": "^10.6.5",
|
|
112
112
|
"tailwindcss": "^4.3.3",
|
|
113
113
|
"ts-node": "^10.9.2",
|
|
114
114
|
"typescript": "^5.5.3",
|
|
115
|
-
"typescript-eslint": "^8.72.
|
|
115
|
+
"typescript-eslint": "^8.72.1",
|
|
116
116
|
"vite": "^8.3.5",
|
|
117
117
|
"vite-plugin-dts": "^5.1.2",
|
|
118
118
|
"vite-plugin-svgr": "^5.2.0",
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
"yup": "^1.4.0"
|
|
121
121
|
},
|
|
122
122
|
"optionalDependencies": {
|
|
123
|
-
"@rollup/rollup-linux-x64-gnu": "^4.
|
|
123
|
+
"@rollup/rollup-linux-x64-gnu": "^4.67.2"
|
|
124
124
|
},
|
|
125
125
|
"eslintConfig": {
|
|
126
126
|
"extends": [
|