@retailmenot/anchor/esm/badge.js

A React UI Library by RetailMeNot

import { a as _taggedTemplateLiteral } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import { space, th } from '@xstyled/system';

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n    align-items: center;\n    ", ";\n    border: 0.125rem solid ", ";\n    box-sizing: border-box;\n    font-weight: 700;\n    justify-content: center;\n    text-align: center;\n\n    /* Border Radius */\n    ", "\n\n    /* Show/Hide */\n    ", "\n\n    /* Non-standalone styles */\n    ", "\n\n    /* Sizes */\n    ", "\n\n    &:hover {\n        border: 0.125rem solid ", ";\n    }\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n    position: relative;\n    font-family: base;\n    display: inline-block;\n    ", "\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n        font-size: 0.75rem;\n        height: 1.75rem;\n        min-width: 1.75rem;\n        padding: 0 0.5rem;\n    "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n        font-size: 0.625rem;\n        height: 1.25rem;\n        min-width: 1.25rem;\n        padding: 0 0.25rem;\n    "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n        height: 0.75rem;\n        width: 0.75rem;\n    "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var BadgeSizeStyles = {
  dot: css(_templateObject()),
  small: css(_templateObject2()),
  large: css(_templateObject3())
}; // TODO: this encapsulation may be redundant

var StyledBadgeContainer = styled('div')(_templateObject4(), space);
var StyledBadge = styled('div')(_templateObject5(), function (_ref) {
  var backgroundColor = _ref.backgroundColor,
      color = _ref.textColor;
  return css({
    backgroundColor: backgroundColor,
    color: color
  });
}, function (_ref2) {
  var borderColor = _ref2.borderColor,
      borderColorHover = _ref2.borderColorHover,
      isParentHovered = _ref2.isParentHovered;
  return th.color(isParentHovered ? borderColorHover : borderColor);
}, function (_ref3) {
  var _ref3$count = _ref3.count,
      count = _ref3$count === void 0 ? 1 : _ref3$count,
      size = _ref3.size;
  return size === 'small' && count < 10 ? "border-radius: 0.4rem;" : "border-radius: 1rem;";
}, function (_ref4) {
  var count = _ref4.count,
      showZero = _ref4.showZero;
  return !showZero && count === 0 ? "display: none;" : "display: flex;";
}, function (_ref5) {
  var offsetBottom = _ref5.offsetBottom,
      offsetLeft = _ref5.offsetLeft,
      standalone = _ref5.standalone;
  return standalone ? null : "\n      position: absolute;\n      bottom: ".concat(offsetBottom, "rem;\n      left: ").concat(offsetLeft, "rem;\n    ");
}, function (_ref6) {
  var _ref6$size = _ref6.size,
      size = _ref6$size === void 0 ? 'dot' : _ref6$size;
  return BadgeSizeStyles[size];
}, function (_ref7) {
  var borderColorHover = _ref7.borderColorHover;
  return th.color(borderColorHover);
});
var Badge = function Badge(_a) {
  var _a$backgroundColor = _a.backgroundColor,
      backgroundColor = _a$backgroundColor === void 0 ? 'error' : _a$backgroundColor,
      _a$borderColor = _a.borderColor,
      borderColor = _a$borderColor === void 0 ? 'error' : _a$borderColor,
      _a$borderColorHover = _a.borderColorHover,
      borderColorHover = _a$borderColorHover === void 0 ? 'error' : _a$borderColorHover,
      children = _a.children,
      className = _a.className,
      _a$count = _a.count,
      count = _a$count === void 0 ? 0 : _a$count,
      isParentHovered = _a.isParentHovered,
      _a$overflowCount = _a.overflowCount,
      overflowCount = _a$overflowCount === void 0 ? 9 : _a$overflowCount,
      offsetBottom = _a.offsetBottom,
      offsetLeft = _a.offsetLeft,
      _a$size = _a.size,
      size = _a$size === void 0 ? 'dot' : _a$size,
      _a$showZero = _a.showZero,
      showZero = _a$showZero === void 0 ? false : _a$showZero,
      _a$standalone = _a.standalone,
      standalone = _a$standalone === void 0 ? false : _a$standalone,
      _a$textColor = _a.textColor,
      textColor = _a$textColor === void 0 ? 'white' : _a$textColor,
      props = __rest(_a, ["backgroundColor", "borderColor", "borderColorHover", "children", "className", "count", "isParentHovered", "overflowCount", "offsetBottom", "offsetLeft", "size", "showZero", "standalone", "textColor"]);

  var getDisplayCount = function getDisplayCount(badgeCount, badgeOverflowCount, badgeSize) {
    if (badgeSize === 'dot') {
      return '';
    } else if (badgeCount <= badgeOverflowCount) {
      return badgeCount;
    } else {
      return "".concat(badgeOverflowCount, "+");
    }
  };

  var displayCount = getDisplayCount(count, overflowCount, size);
  return createElement(StyledBadgeContainer, Object.assign({
    className: classNames('anchor-badge', className)
  }, props), children, createElement(StyledBadge, Object.assign({
    backgroundColor: backgroundColor,
    borderColor: borderColor,
    borderColorHover: borderColorHover,
    className: classNames('anchor-badge-count', className),
    count: count,
    isParentHovered: isParentHovered,
    offsetBottom: offsetBottom,
    offsetLeft: offsetLeft,
    showZero: showZero,
    size: size,
    standalone: standalone,
    textColor: textColor
  }, props), displayCount));
};

export { Badge };
//# sourceMappingURL=badge.js.map