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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React from 'react';
import classnames from 'classnames';
import { createSpacingClasses } from "../space/SpacingHelper.js";
import { createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import Context from "../../shared/Context.js";
import { warn, extendPropsWithContext, validateDOMAttributes } from "../../shared/component-helper.js";
import useNumberFormat from "../number-format/useNumberFormat.js";
export const 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.useContext(Context);
  const allProps = 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;
  const spacingClasses = createSpacingClasses(allProps);
  if (children) {
    return React.createElement(BadgeRoot, {
      className: classnames(spacingClasses)
    }, children, React.createElement(BadgeElem, _extends({
      context: context
    }, allProps, {
      className: className
    })));
  }
  return React.createElement(BadgeElem, _extends({
    context: context
  }, allProps, {
    className: classnames(spacingClasses, className)
  }));
}
function BadgeRoot({
  children,
  className
}) {
  return React.createElement("span", {
    className: classnames('dnb-badge__root', className)
  }, 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;
  }
  validateDOMAttributes(props, restProps);
  const skeletonClasses = createSkeletonClass('shape', skeleton, context);
  const contentIsNum = typeof contentProp === 'number';
  const num = useNumberFormat(contentIsNum ? contentProp : 0);
  const variantIsNotification = variant === 'notification';
  const content = variantIsNotification && contentIsNum ? num : contentProp;
  if (!label && contentIsNum) {
    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 React.createElement("span", _extends({
    role: "status",
    className: classnames('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), label && React.createElement("span", {
    className: "dnb-sr-only"
  }, label, " "), content);
});
Badge._supportsSpacingProps = true;
export default Badge;
//# sourceMappingURL=Badge.js.map