@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
24 lines (23 loc) • 1.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { forwardRef } from 'react';
import { Stack, Symbol } from '../..';
import * as styles from './chip.module.css';
export const Chip = forwardRef(({ children, className, dimension = 'regular', color = 'gray', icon, interactive, onDismissClick, ...otherProps }, forwardedRef) => {
const properties = {
small: {
iconSize: 12,
style: 'solid',
},
regular: {
iconSize: 12,
style: 'solid',
},
big: {
iconSize: 16,
style: 'solid',
},
};
return (_jsxs(Stack, { as: "span", direction: "row", columnGap: dimension === 'big' ? 8 : 4, inline: true, "data-chip-color": color, "data-chip-dimension": dimension, className: clsx(styles.Chip, className), vAlign: "center", ref: forwardedRef, ...otherProps, children: [(icon && !interactive) && (_jsx(Symbol, { source: icon, weight: properties[dimension].style, dimension: properties[dimension].iconSize })), _jsx("b", { children: children }), interactive && (_jsx("button", { "data-testid": "InteractiveButton", onClick: interactive && onDismissClick, className: styles.Action, type: "button", children: _jsx(Symbol, { source: "xmark", weight: properties[dimension].style, dimension: properties[dimension].iconSize }) }))] }));
});
Chip.displayName = 'Chip';