@engie-group/fluid-design-system-react/lib/components/badge/NJBadge.js

Fluid Design System React

import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { Utils } from '../../utils/util.js';
import { NJIcon } from '../icon/NJIcon.js';

const NJBadge = React__default.forwardRef(({ variant, emphasis, isUppercase, children, scale, capedValue, className, unitLabel, iconName, icon, ...htmlProps }, ref) => {
    let value;
    if (typeof children === 'number') {
        value = children;
    }
    else if (typeof children === 'string') {
        value = Number.parseInt(children);
    }
    if (!Utils.isUndefinedOrNull(capedValue) &&
        !Utils.isUndefinedOrNull(value) &&
        value > capedValue) {
        if (capedValue <= 0) {
            children = '0';
        }
        else {
            children = `${capedValue}+`;
        }
    }
    const badgeClass = Utils.classNames('nj-badge', {
        [`nj-badge--${scale}`]: scale && scale !== 'md',
        [`nj-badge--${emphasis}`]: emphasis,
        [`nj-badge--${variant}`]: variant,
        'nj-badge--uppercase': isUppercase
    }, className);
    const getCustomIconWithClassName = () => {
        if (!icon) {
            return;
        }
        const field = icon;
        const className = Utils.classNames(field.props.className, 'nj-badge__icon');
        return React__default.cloneElement(field, { className });
    };
    return (jsxs("p", { ...htmlProps, ref: ref, className: badgeClass, children: [icon
                ? getCustomIconWithClassName()
                : iconName && jsx(NJIcon, { name: iconName, className: "nj-badge__icon" }), children, unitLabel && jsx("span", { className: "nj-sr-only", children: unitLabel })] }));
});
NJBadge.displayName = 'NJBadge';

export { NJBadge };