@indico-data/design-system 3.21.0 → 3.22.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/lib/components/index.d.ts +1 -0
- package/lib/components/pill/Pill.d.ts +1 -1
- package/lib/components/pill/Pill.stories.d.ts +13 -3
- package/lib/components/pill/types.d.ts +22 -9
- package/lib/index.css +616 -2719
- package/lib/index.d.ts +22 -10
- package/lib/index.esm.css +616 -2719
- package/lib/index.esm.js +10 -7
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +10 -7
- package/lib/index.js.map +1 -1
- package/lib/types.d.ts +2 -2
- package/package.json +1 -1
- package/src/components/index.ts +1 -0
- package/src/components/pill/Pill.mdx +66 -7
- package/src/components/pill/Pill.stories.tsx +384 -116
- package/src/components/pill/Pill.tsx +39 -10
- package/src/components/pill/__tests__/Pill.test.tsx +104 -40
- package/src/components/pill/styles/Pill.scss +118 -21
- package/src/components/pill/styles/_tokens.scss +408 -0
- package/src/components/pill/types.ts +22 -10
- package/src/styles/index.scss +2 -0
- package/src/types.ts +7 -2
package/lib/index.esm.js
CHANGED
|
@@ -19674,14 +19674,17 @@ function Menu(_a) {
|
|
|
19674
19674
|
: child) })));
|
|
19675
19675
|
}
|
|
19676
19676
|
|
|
19677
|
+
const PILL_ICON_SIZE = {
|
|
19678
|
+
sm: 'xxs',
|
|
19679
|
+
md: 'xs',
|
|
19680
|
+
lg: 'xs',
|
|
19681
|
+
};
|
|
19677
19682
|
const Pill = (_a) => {
|
|
19678
|
-
var { children,
|
|
19679
|
-
|
|
19680
|
-
|
|
19681
|
-
|
|
19682
|
-
[
|
|
19683
|
-
});
|
|
19684
|
-
return (jsx("div", Object.assign({ className: pillClasses }, rest, { children: children })));
|
|
19683
|
+
var { children, color = 'gray', size = 'sm', variant = 'solid', type = 'pill', iconLeft, iconRight, dot, onClose, closeAriaLabel = 'Remove', className } = _a, rest = __rest(_a, ["children", "color", "size", "variant", "type", "iconLeft", "iconRight", "dot", "onClose", "closeAriaLabel", "className"]);
|
|
19684
|
+
return (jsxs("div", Object.assign({ className: classNames('pill', `pill--${type}`, `pill--${size}`, `pill--${variant}-${color}`, className, {
|
|
19685
|
+
'pill--icon-only': !children && (iconLeft || iconRight),
|
|
19686
|
+
'pill--closeable': !!onClose,
|
|
19687
|
+
}) }, rest, { children: [dot && jsx("span", { className: "pill__dot" }), iconLeft && jsx(Icon, { name: iconLeft, size: PILL_ICON_SIZE[size] }), children, iconRight && jsx(Icon, { name: iconRight, size: PILL_ICON_SIZE[size] }), onClose && (jsx("button", { type: "button", className: "pill__close", onClick: onClose, "aria-label": closeAriaLabel, children: jsx(Icon, { name: "fa-xmark", size: "xs" }) }))] })));
|
|
19685
19688
|
};
|
|
19686
19689
|
|
|
19687
19690
|
const Badge = (_a) => {
|