@wix/design-system/dist/esm/Badge/Badge.js

@wix/design-system

import React from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from '../common/Focusable';
import { generateDataAttr } from '../utils/generateDataAttr';
import { SKIN, TYPE, SIZE } from './Badge.constants';
import { st, classes } from './Badge.st.css.js';
import Text from '../Text/Text';
const getProps = (props) => {
    // that's what you pay for using HOCs...
    const { focusableOnFocus, focusableOnBlur, ...rest } = props;
    return rest;
};
const getFocusableProps = (props) => {
    // add focusable hooks only when badge is clickable
    const { onClick, focusableOnFocus, focusableOnBlur } = props;
    return onClick
        ? {
            onFocus: focusableOnFocus,
            onBlur: focusableOnBlur,
            tabIndex: 0,
        }
        : {};
};
function Badge(props) {
    const { type = TYPE.solid, skin = SKIN.general, size = SIZE.medium, uppercase = true, noPadding = false, showTooltip = true, display = 'inline', children, prefixIcon, suffixIcon, onClick, dataHook, className, ...rest } = getProps(props);
    return (React.createElement("div", { "data-hook": dataHook, onClick: onClick, ...getFocusableProps(props), className: st(classes.root, {
            clickable: !!onClick,
            display,
            type,
            skin,
            size,
            uppercase,
            noPadding,
            ...rest,
        }, className), ...generateDataAttr({ type, skin, size, uppercase }, [
            'type',
            'skin',
            'size',
            'uppercase',
        ]), "data-clickable": !!onClick, "data-is-inverted": rest['data-is-inverted'] },
        prefixIcon &&
            React.cloneElement(prefixIcon, {
                className: classes.prefix,
                'data-prefix-icon': true,
            }),
        React.createElement(Text, { className: classes.text, ellipsis: true, size: size === 'medium' ? 'small' : size, weight: "normal", showTooltip: showTooltip }, children),
        suffixIcon &&
            React.cloneElement(suffixIcon, {
                className: classes.suffix,
                'data-suffix-icon': true,
            })));
}
Badge.displayName = 'Badge';
Badge.propTypes = {
    dataHook: PropTypes.string,
    className: PropTypes.string,
    type: PropTypes.oneOf(['solid', 'outlined', 'transparent']),
    skin: PropTypes.oneOf([
        'general',
        'standard',
        'danger',
        'success',
        'neutral',
        'warning',
        'urgent',
        'neutralLight',
        'neutralStandard',
        'neutralSuccess',
        'neutralDanger',
        'premium',
        'warningLight',
    ]),
    size: PropTypes.oneOf(['medium', 'small', 'tiny']),
    prefixIcon: PropTypes.node,
    suffixIcon: PropTypes.node,
    onClick: PropTypes.func,
    uppercase: PropTypes.bool,
    noPadding: PropTypes.bool,
    showTooltip: PropTypes.bool,
    focusableOnFocus: PropTypes.func,
    focusableOnBlur: PropTypes.func,
    children: PropTypes.node,
    display: PropTypes.any,
};
export default withFocusable(Badge);
//# sourceMappingURL=Badge.js.map