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

DNB Eufemia Design System UI Library

"use client";

import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import React from 'react';
import clsx from 'clsx';
import { applySpacing } from "../space/SpacingUtils.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";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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;
  if (children) {
    return _jsxs(BadgeRoot, {
      ...applySpacing(allProps, {}),
      children: [children, _jsx(BadgeElem, {
        context: context,
        ...allProps,
        className: className
      })]
    });
  }
  return _jsx(BadgeElem, {
    context: context,
    ...allProps,
    ...applySpacing(allProps, {
      className
    })
  });
}
function BadgeRoot({
  children,
  className,
  style
}) {
  return _jsx("span", {
    className: clsx('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;
  }
  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 _jsxs("span", {
    role: "status",
    className: clsx('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 && _jsxs("span", {
      className: "dnb-sr-only",
      children: [label, " "]
    }), content]
  });
});
withComponentMarkers(Badge, {
  _supportsSpacingProps: true
});
export default Badge;
//# sourceMappingURL=Badge.js.map