jobiqo-cl/lib/src/components/02-atoms/01-forms/08-chip/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var polished_es = require('../../../../../node_modules/polished/dist/polished.es.js');
var styled = require('styled-components');
var styled__default = _interopDefault(styled);

/**
 * @file index.tsx
 *
 * @fileoverview Chip component. Renders a chip component.
 */
const StyledDivChip = styled__default.div `
  display: inline-block;
  transition: all ease-in 100ms;
  height: ${props => props.theme.chip.height};
  line-height: ${props => props.theme.chip.lineHeight};
  margin: ${props => props.theme.chip.margin};
  background: ${props => props.theme.chip.backgroundColor[props.chipStyle]};
  padding: ${props => props.theme.chip.padding};
  border-radius: ${props => props.theme.chip.borderRadius};
  font-size: ${props => props.theme.chip.fontSize};
  &:hover {
    background: ${props => polished_es.darken(0.05, props.theme.chip.backgroundColor[props.chipStyle])};
  }
`;
const StyledChipRemove = styled__default.button `
  display: inline-block;
  cursor: pointer;
  font: inherit;
  border: ${props => props.theme.chip.icon.border};
  border-radius: ${props => props.theme.chip.icon.borderRadius};
  background: ${props => props.theme.colors.gray3};
  height: ${props => props.theme.chip.icon.height};
  line-height: ${props => props.theme.chip.icon.lineHeight};
  width: ${props => props.theme.chip.icon.width};
  padding: ${props => props.theme.chip.icon.padding};
  margin: ${props => props.theme.chip.icon.margin};

  &:after {
    color: ${props => props.theme.font.color};
    content: 'x';
  }
  &:hover {
    background: ${props => props.theme.chip.icon.hoverBackground};
    &:after {
      color: ${props => props.theme.chip.icon.hoverColor};
    }
  }
  &:active,
  &:focus {
    background: ${props => polished_es.darken(0.1, props.theme.chip.icon.hoverBackground)};
    &:after {
      color: ${props => props.theme.chip.icon.hoverColor};
    }
  }
`;
/**
 * The chip is a label style element that can be used to show information in a supporting manner. It has the option to be toggled off in case
 * its information one wants to be available to remove. It can be used to show facets that are selected or other information
 * that supports some sort of "state" for the UI.
 */
const Chip = ({ chipStyle, chipId, children, removable, onRemove }) => {
    return (React.createElement(StyledDivChip, { "data-testid": `chip-${chipId}`, chipStyle: chipStyle },
        children,
        removable && (React.createElement(StyledChipRemove, { "data-testid": `chip-${chipId}-remove`, id: `chip-${chipId}-remove`, "aria-label": typeof children === 'string'
                ? `Close ${children}`
                : `Close ${chipId}`, onClick: (event) => onRemove(chipId) }))));
};
Chip.defaultProps = {
    chipStyle: 'default',
    theme: null,
    removable: true
};

exports.Chip = Chip;