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

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

import { createElement } from 'react';
import { darken as curriedDarken } from '../../../../../node_modules/polished/dist/polished.es.js';
import styled from 'styled-components';

/**
 * @file index.tsx
 *
 * @fileoverview Chip component. Renders a chip component.
 */
const StyledDivChip = styled.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 => curriedDarken(0.05, props.theme.chip.backgroundColor[props.chipStyle])};
  }
`;
const StyledChipRemove = styled.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 => curriedDarken(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 (createElement(StyledDivChip, { "data-testid": `chip-${chipId}`, chipStyle: chipStyle },
        children,
        removable && (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
};

export { Chip };