@kiwicom/orbit-components/es/Tag/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import styled from "styled-components";
import defaultTheme from "../defaultTheme";
import { rtlSpacing, left, right } from "../utils/rtl";
import CloseCircle from "../icons/CloseCircle";
import { SIZES, STATES } from "./consts";

const getFontSize = ({
  theme,
  size
}) => {
  const tokens = {
    [SIZES.SMALL]: theme.orbit.fontSizeTextSmall,
    [SIZES.NORMAL]: theme.orbit.fontSizeTextNormal
  };
  return tokens[size];
};

const getBackgroundColor = state => ({
  selected,
  theme
}) => {
  const states = {
    [STATES.DEFAULT]: selected ? theme.orbit.backgroundTagSelected : theme.orbit.backgroundTag,
    [STATES.HOVER]: selected ? theme.orbit.backgroundTagSelectedHover : theme.orbit.backgroundTagHover,
    [STATES.ACTIVE]: selected ? theme.orbit.backgroundTagSelectedActive : theme.orbit.backgroundTagActive
  };
  return states[state];
};

const getSpacing = ({
  icon,
  removable,
  theme
}) => {
  const padding = removable && icon && theme.orbit.paddingTagRemovableWithIcon || removable && !icon && theme.orbit.paddingTagRemovable || !removable && icon && theme.orbit.paddingTagWithIcon || !removable && !icon && theme.orbit.paddingTag;
  return rtlSpacing(padding);
};

export const StyledTag = styled.div.withConfig({
  displayName: "Tag__StyledTag",
  componentId: "e565ij-0"
})(["font-family:", ";color:", ";background:", ";display:inline-flex;cursor:pointer;box-sizing:border-box;justify-content:center;align-items:center;font-size:", ";font-weight:", ";border-radius:", ";box-shadow:", ";padding:", ";transition:color ", " ease-in-out,box-shadow ", " ease-in-out,background ", " ease-in-out;&:hover{background:", ";box-shadow:none;}&:active{background:", ";box-shadow:none;}&:focus{box-shadow:", ";outline:0;}"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme,
  selected
}) => selected ? theme.orbit.colorTextTagSelected : theme.orbit.colorTextTag, getBackgroundColor(STATES.DEFAULT), getFontSize, ({
  theme
}) => theme.orbit.fontWeightMedium, ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  theme,
  selected
}) => !selected && `inset 0 0 0 1px ${theme.orbit.borderColorTag}`, getSpacing, ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => theme.orbit.durationFast, getBackgroundColor(STATES.HOVER), getBackgroundColor(STATES.ACTIVE), ({
  theme
}) => `inset 0 0 0 2px ${theme.orbit.borderColorTagFocus}`);
StyledTag.defaultProps = {
  theme: defaultTheme
};
const IconContainer = styled.div.withConfig({
  displayName: "Tag__IconContainer",
  componentId: "e565ij-1"
})(["display:flex;margin-", ":8px;svg{height:", ";width:", ";}"], right, ({
  theme
}) => theme.orbit.widthIconSmall, ({
  theme
}) => theme.orbit.heightIconSmall);
IconContainer.defaultProps = {
  theme: defaultTheme
};
const CloseContainer = styled.div.withConfig({
  displayName: "Tag__CloseContainer",
  componentId: "e565ij-2"
})(["display:flex;margin-", ":8px;color:", ";cursor:pointer;transition:color ", " ease-in-out;&:hover{color:", ";}&:active{color:", ";}"], left, ({
  theme
}) => theme.orbit.paletteInkLighter, ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => theme.orbit.paletteInkLighterHover, ({
  theme
}) => theme.orbit.paletteInkLighterActive);
CloseContainer.defaultProps = {
  theme: defaultTheme
};
const StyledClose = styled.div.withConfig({
  displayName: "Tag__StyledClose",
  componentId: "e565ij-3"
})(["display:flex;border-radius:100%;&:focus{outline:none;box-shadow:0px 0 0px 2px ", ";}"], ({
  theme
}) => theme.orbit.paletteCloudNormalActive);
StyledClose.defaultProps = {
  theme: defaultTheme
};

const Tag = props => {
  const {
    icon,
    selected,
    children,
    size = SIZES.NORMAL,
    onClick,
    onRemove,
    dataTest
  } = props;
  return React.createElement(StyledTag, {
    "data-test": dataTest,
    size: size,
    onClick: onClick,
    removable: !!onRemove,
    selected: selected,
    icon: !!icon
  }, icon && React.createElement(IconContainer, null, icon), children, (!!onRemove || selected) && React.createElement(CloseContainer, {
    onClick: ev => {
      ev.stopPropagation();

      if (onRemove) {
        onRemove();
      }
    }
  }, React.createElement(StyledClose, {
    tabIndex: "0",
    role: "button"
  }, React.createElement(CloseCircle, {
    size: "small"
  }))));
};

export default Tag;