# All files / components/Tag index.js

100% Statements 13/13
100% Branches 0/0
100% Functions 6/6
100% Lines 13/13

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48

    4x
    7x
    7x
    7x
    7x
    7x

    4x

    4x
    9x
    9x

    4x

    4x

    4x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import { textColor, themeColor } from '../../utils/style';

    const StyledTag = styled.span`
      color: ${(props) => textColor(props.theme, 'dark', 'primary')};
      background-color: ${(props) => themeColor(props.theme, 'foreground', 'base')};
      font-size: ${(props) => props.theme.typography.classes.caption.fontSize};
      line-height: ${(props) => props.theme.typography.classes.caption.lineHeight};
      font-weight: ${(props) => props.theme.typography.weights.fontWeightMedium};

      margin: 5px 2px;
      padding: 5px;
      border-radius: 2px;
    `;
    StyledTag.displayName = 'StyledTag';

    const Tag = (props) => {
      const { data } = props;
      return (
        <StyledTag>
          {data.name}
        </StyledTag>
      );
    };

    Tag.propTypes = {
      /**
       * data is an object containing the Tag data
       */
      data: PropTypes.object,
      /**
       * className to be used for this component
       */
      /* eslint-disable react/no-unused-prop-types */
      className: PropTypes.string,
    };

    Tag.defaultProps = {
      data: {},
      className: 'LT-Tag-Container',
    };

    Tag.displayName = 'Tag';

    export default Tag;