@axeptio/design-system/src/Core/Typography/Badge/index.jsx

Design System for Axeptio

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import Icon from '../../Icon';

const typeList = ['certified', 'tasty', 'healthy', 'oily', 'junkfood'];
const sizeList = ['small', 'medium', 'large'];

const Root = styled.div`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 12px 4px 8px;
  min-width: ${props => props.theme.badges.default.minWidth}px;
  font-size: ${props => props.theme.badges.default.fontSize};
  font-weight: 700;
  color: ${props => props.theme.badges.default.color};
  background-color: ${props => props.theme.badges.default.bgColor};
  border: ${props => props.theme.badges.default.border};
  border-radius: ${props => props.theme.badges.default.borderRadius};
  box-shadow: ${props => props.theme.badges.default.boxShadow};

  .svg-icon {
    flex-shrink: 0;
  }

  ${props =>
    props.type === 'certified' &&
    `
    color: ${props.theme.badges.default.color};
    background-color: ${props.theme.badges.certified.bgColor};
  `};

  ${props =>
    props.type === 'tasty' &&
    `
    color: ${props.theme.badges.tasty.color};
    background-color: ${props.theme.badges.tasty.bgColor};
  `};

  ${props =>
    props.type === 'healthy' &&
    `
    color: ${props.theme.badges.healthy.color};
    background-color: ${props.theme.badges.healthy.bgColor};
  `};

  ${props =>
    props.type === 'oily' &&
    `
    color: ${props.theme.badges.oily.color};
    background-color: ${props.theme.badges.oily.bgColor};
  `};

  ${props =>
    props.type === 'junkfood' &&
    `
    color: ${props.theme.badges.junkfood.color};
    background-color: ${props.theme.badges.junkfood.bgColor};
  `};

  ${props =>
    props.badgeSize === 'small' &&
    `
    padding: 2px 10px 2px 8px;
    font-size: ${props.theme.badges.small.fontSize};
  `};

  ${props =>
    props.badgeSize === 'large' &&
    `
    padding: 4px 20px 4px 16px;
    font-size: ${props.theme.badges.large.fontSize};
  `};
`;

const Badge = ({ children, icon, iconWidth, iconColor, type, badgeSize }) => {
  return (
    <Root type={type} badgeSize={badgeSize}>
      {icon ? <Icon noStroke name={icon} iconWidth={iconWidth ? iconWidth : 32} fillColor={iconColor} /> : null}
      {children}
    </Root>
  );
};

Badge.propTypes = {
  children: PropTypes.node.isRequired,
  icon: PropTypes.string,
  iconWidth: PropTypes.number,
  iconColor: PropTypes.string,
  type: PropTypes.oneOf(typeList),
  badgeSize: PropTypes.oneOf(sizeList)
};

export default Badge;