@dnb/eufemia/cjs/components/badge/Badge.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.defaultProps = exports.default = void 0;
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _SpacingUtils = require("../space/SpacingUtils.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _useNumberFormat = _interopRequireDefault(require("../number-format/useNumberFormat.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const defaultProps = exports.defaultProps = {
  label: null,
  className: null,
  skeleton: false,
  children: null,
  content: null,
  vertical: null,
  horizontal: null,
  variant: 'information',
  status: 'default',
  subtle: false,
  hideBadge: false
};
function Badge(localProps) {
  const context = _react.default.useContext(_Context.default);
  const allProps = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Badge, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  });
  const {
    children,
    className
  } = allProps;
  if (children) {
    return (0, _jsxRuntime.jsxs)(BadgeRoot, {
      ...(0, _SpacingUtils.applySpacing)(allProps, {}),
      children: [children, (0, _jsxRuntime.jsx)(BadgeElem, {
        context: context,
        ...allProps,
        className: className
      })]
    });
  }
  return (0, _jsxRuntime.jsx)(BadgeElem, {
    context: context,
    ...allProps,
    ...(0, _SpacingUtils.applySpacing)(allProps, {
      className
    })
  });
}
function BadgeRoot({
  children,
  className,
  style
}) {
  return (0, _jsxRuntime.jsx)("span", {
    className: (0, _clsx.default)('dnb-badge__root', className),
    style: style,
    children: children
  });
}
function propGuard(fn) {
  return props => {
    if (props.variant !== 'information') {
      return fn({
        ...props,
        subtle: defaultProps.subtle,
        status: defaultProps.status
      });
    }
    return fn(props);
  };
}
const BadgeElem = propGuard(props => {
  const {
    label,
    className,
    children,
    skeleton,
    horizontal,
    vertical,
    content: contentProp,
    variant,
    status,
    subtle,
    hideBadge,
    context,
    ...restProps
  } = props;
  if (hideBadge) {
    return null;
  }
  (0, _componentHelper.validateDOMAttributes)(props, restProps);
  const skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('shape', skeleton, context);
  const contentIsNum = typeof contentProp === 'number';
  const num = (0, _useNumberFormat.default)(contentIsNum ? contentProp : 0);
  const variantIsNotification = variant === 'notification';
  const content = variantIsNotification && contentIsNum ? num : contentProp;
  if (!label && contentIsNum) {
    (0, _componentHelper.warn)(`Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`);
  }
  const isInline = !children && content;
  return (0, _jsxRuntime.jsxs)("span", {
    role: "status",
    className: (0, _clsx.default)('dnb-badge', skeletonClasses, className, variant !== 'content' && `dnb-badge--variant-${variant}`, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`, isInline && 'dnb-badge--inline', variant === 'information' && `dnb-badge--status-${status}${subtle ? ` dnb-badge--subtle` : ''}`),
    ...restProps,
    children: [label && (0, _jsxRuntime.jsxs)("span", {
      className: "dnb-sr-only",
      children: [label, " "]
    }), content]
  });
});
(0, _withComponentMarkers.default)(Badge, {
  _supportsSpacingProps: true
});
var _default = exports.default = Badge;
//# sourceMappingURL=Badge.js.map