# All files / components/SystemMessage index.js

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

    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
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85

    2x

    1x
    1x
    1x
    1x

    1x

    2x
    2x
    2x

    2x

    2x

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

    const StyledContainer = styled.div`
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 5px 0px;
        padding: 6px 9px 8px 9px;
        float: left;
        max-width: 70%;
        align-items: center;
        justify-content: center;

        div {
          width: 100%;
          text-align: center;
          line-height: 1;
          display: inline-block;

          color: ${(props) => textColor(props.theme, 'light', 'disabled')};
          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};

          span {
            display: inline-block;
            position: relative;
          }

          span:before,
          span:after {
            content: "";
            position: absolute;
            height: 10px;
            border-bottom: 1px solid ${(props) => textColor(props.theme, 'light', 'disabled')};
            top: 0;
            width: 100%;
            min-width: 180px;
          }
          span:before {
            right: 100%;
            margin-right: 15px;
          }
          span:after {
            left: 100%;
            margin-left: 15px;
          }
        }
      }
    `;

    const SystemMessage = (props) => {
      const { message } = props;
      return (
        <StyledContainer className={props.className}>
          <div>
            <div>
              <span>{message.text}</span>
            </div>
          </div>
        </StyledContainer>
      );
    };

    SystemMessage.propTypes = {
      className: PropTypes.string,
      message: PropTypes.shape({
        text: PropTypes.string,
      }),
    };

    SystemMessage.displayName = 'SystemMessage';

    export default SystemMessage;