@indico-data/design-system 3.20.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 +638 -2733
- package/lib/index.d.ts +22 -10
- package/lib/index.esm.css +638 -2733
- 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/forms/form/styles/Form.scss +1 -1
- package/src/components/forms/select/styles/Select.scss +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/styles/primitives/_colors.scss +11 -9
- package/src/styles/tokens/_semantic-tokens.scss +9 -3
- package/src/types.ts +7 -2
package/lib/index.js
CHANGED
|
@@ -19699,14 +19699,17 @@ function Menu(_a) {
|
|
|
19699
19699
|
: child) })));
|
|
19700
19700
|
}
|
|
19701
19701
|
|
|
19702
|
+
const PILL_ICON_SIZE = {
|
|
19703
|
+
sm: 'xxs',
|
|
19704
|
+
md: 'xs',
|
|
19705
|
+
lg: 'xs',
|
|
19706
|
+
};
|
|
19702
19707
|
const Pill = (_a) => {
|
|
19703
|
-
var { children,
|
|
19704
|
-
|
|
19705
|
-
|
|
19706
|
-
|
|
19707
|
-
[
|
|
19708
|
-
});
|
|
19709
|
-
return (jsxRuntime.jsx("div", Object.assign({ className: pillClasses }, rest, { children: children })));
|
|
19708
|
+
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"]);
|
|
19709
|
+
return (jsxRuntime.jsxs("div", Object.assign({ className: classNames('pill', `pill--${type}`, `pill--${size}`, `pill--${variant}-${color}`, className, {
|
|
19710
|
+
'pill--icon-only': !children && (iconLeft || iconRight),
|
|
19711
|
+
'pill--closeable': !!onClose,
|
|
19712
|
+
}) }, rest, { children: [dot && jsxRuntime.jsx("span", { className: "pill__dot" }), iconLeft && jsxRuntime.jsx(Icon, { name: iconLeft, size: PILL_ICON_SIZE[size] }), children, iconRight && jsxRuntime.jsx(Icon, { name: iconRight, size: PILL_ICON_SIZE[size] }), onClose && (jsxRuntime.jsx("button", { type: "button", className: "pill__close", onClick: onClose, "aria-label": closeAriaLabel, children: jsxRuntime.jsx(Icon, { name: "fa-xmark", size: "xs" }) }))] })));
|
|
19710
19713
|
};
|
|
19711
19714
|
|
|
19712
19715
|
const Badge = (_a) => {
|