@retailmenot/anchor/ts/Badge/Badge.component.js

A React UI Library by RetailMeNot

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
// REACT
import * as React from 'react';
// VENDOR
import { space as spaceStyles } from '@xstyled/system';
import classNames from 'classnames';
import styled, { css, } from '@xstyled/styled-components';
import { th } from '@xstyled/system';
const BadgeSizeStyles = {
    dot: css `
        height: 0.75rem;
        width: 0.75rem;
    `,
    small: css `
        font-size: 0.625rem;
        height: 1.25rem;
        min-width: 1.25rem;
        padding: 0 0.25rem;
    `,
    large: css `
        font-size: 0.75rem;
        height: 1.75rem;
        min-width: 1.75rem;
        padding: 0 0.5rem;
    `,
};
// TODO: this encapsulation may be redundant
const StyledBadgeContainer = styled('div') `
    position: relative;
    font-family: base;
    display: inline-block;
    ${spaceStyles}
`;
const StyledBadge = styled('div') `
    align-items: center;
    ${({ backgroundColor, textColor: color }) => css({ backgroundColor, color })};
    border: 0.125rem solid ${({ borderColor, borderColorHover, isParentHovered, }) => th.color(isParentHovered ? borderColorHover : borderColor)};
    box-sizing: border-box;
    font-weight: 700;
    justify-content: center;
    text-align: center;

    /* Border Radius */
    ${({ count = 1, size }) => size === 'small' && count < 10
    ? `border-radius: 0.4rem;`
    : `border-radius: 1rem;`}

    /* Show/Hide */
    ${({ count, showZero }) => !showZero && count === 0 ? `display: none;` : `display: flex;`}

    /* Non-standalone styles */
    ${({ offsetBottom, offsetLeft, standalone }) => standalone
    ? null
    : `
      position: absolute;
      bottom: ${offsetBottom}rem;
      left: ${offsetLeft}rem;
    `}

    /* Sizes */
    ${({ size = 'dot' }) => BadgeSizeStyles[size]}

    &:hover {
        border: 0.125rem solid ${({ borderColorHover }) => th.color(borderColorHover)};
    }
`;
export const Badge = (_a) => {
    var { backgroundColor = 'error', borderColor = 'error', borderColorHover = 'error', children, className, count = 0, isParentHovered, overflowCount = 9, offsetBottom, offsetLeft, size = 'dot', showZero = false, standalone = false, textColor = 'white' } = _a, props = __rest(_a, ["backgroundColor", "borderColor", "borderColorHover", "children", "className", "count", "isParentHovered", "overflowCount", "offsetBottom", "offsetLeft", "size", "showZero", "standalone", "textColor"]);
    const getDisplayCount = (badgeCount, badgeOverflowCount, badgeSize) => {
        if (badgeSize === 'dot') {
            return '';
        }
        else if (badgeCount <= badgeOverflowCount) {
            return badgeCount;
        }
        else {
            return `${badgeOverflowCount}+`;
        }
    };
    const displayCount = getDisplayCount(count, overflowCount, size);
    return (React.createElement(StyledBadgeContainer, Object.assign({ className: classNames('anchor-badge', className) }, props),
        children,
        React.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)));
};
//# sourceMappingURL=Badge.component.js.map