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

DNB Eufemia Design System UI Library

"use client";

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["label", "className", "children", "skeleton", "horizontal", "vertical", "content", "variant", "context"];
import React from 'react';
import classnames from 'classnames';
import { createSpacingClasses } from '../space/SpacingHelper';
import { createSkeletonClass } from '../skeleton/SkeletonHelper';
import Context from '../../shared/Context';
import { warn, extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
export const defaultProps = {
  label: null,
  className: null,
  skeleton: false,
  children: null,
  content: null,
  vertical: null,
  horizontal: null,
  variant: 'information'
};
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
  } = allProps;
  if (children) {
    return React.createElement(BadgeRoot, null, children, React.createElement(BadgeElem, _extends({
      context: context
    }, allProps)));
  }
  return React.createElement(BadgeElem, _extends({
    context: context
  }, allProps));
}
function BadgeRoot(_ref) {
  let {
    children
  } = _ref;
  return React.createElement("span", {
    className: "dnb-badge__root"
  }, children);
}
function BadgeElem(props) {
  const {
      label,
      className,
      children,
      skeleton,
      horizontal,
      vertical,
      content: contentProp,
      variant,
      context
    } = props,
    restProps = _objectWithoutProperties(props, _excluded);
  validateDOMAttributes(props, restProps);
  const skeletonClasses = createSkeletonClass('shape', skeleton, context);
  const spacingClasses = createSpacingClasses(props);
  const contentIsNum = typeof contentProp === 'number';
  const variantIsNotification = variant === 'notification';
  const content = variantIsNotification && contentIsNum && contentProp > 9 ? '9+' : contentProp;
  if (variantIsNotification && !contentIsNum) {
    warn(`Type of content should be a number: A notification badge is best suited to display content of type number.`);
  }
  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 dnb-badge--variant-${variant}`, skeletonClasses, spacingClasses, className, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`, isInline && 'dnb-badge--inline')
  }, restProps), label && React.createElement("span", {
    className: "dnb-sr-only"
  }, label, " "), content);
}
Badge._supportsSpacingProps = true;
export default Badge;
//# sourceMappingURL=Badge.js.map