jobiqo-cl/lib/es/src/components/02-atoms/02-messages/02-flag/index.js

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

import { __rest } from '../../../../../node_modules/tslib/tslib.es6.js';
import { createElement } from 'react';
import styled from 'styled-components';
import { CloseIcon } from '../../../../icons/Close.js';

/**
 * @file index.tsx
 *
 * @fileoverview Flag component. Renders a flag component.
 */
const StyledDivFlag = styled.div `
  display: inline-flex;
  transition: all ease-in 100ms;
  line-height: ${props => props.theme.flag.lineHeight};
  margin: ${props => props.theme.flag.margin};
  background-color: ${props => props.theme.flag.backgroundColor[props.flagStyle]};
  padding: ${props => props.theme.flag.padding};
  border-radius: ${props => props.theme.flag.borderRadius};
  font-size: ${props => props.theme.flag.fontSize};
  color: ${props => props.theme.flag.color[props.flagStyle]};

  button {
    cursor: pointer;
    color: ${props => props.theme.flag.color[props.flagStyle]};
    margin-left: ${props => props.theme.flag.closeButton.margin};
  }

  > svg {
    margin: ${props => props.theme.flag.svg.margin};
    padding-right: ${props => props.theme.flag.svg.padding};
    flex-shrink: 0;
  }
`;
/**
 * The flag is a label style element that can be used to show information.
 */
const Flag = (_a) => {
    var { flagStyle = 'secondary', children, onClose } = _a, props = __rest(_a, ["flagStyle", "children", "onClose"]);
    return (createElement(StyledDivFlag, Object.assign({ flagStyle: flagStyle }, props),
        children,
        onClose && (createElement("button", { onClick: onClose },
            createElement(CloseIcon, { height: "20", width: "20", title: "Close" })))));
};

export { Flag };