# All files / components/Button index.js

100% Statements 13/13
100% Branches 2/2
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
    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

    2x

    2x

    4x
    4x

    4x

    4x
    4x

    2x

    7x

    7x

    2x

    2x

    2x

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

    const StyledButtonContainer = styled.div`
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
    `;

    const StyledButton = styled.input`
      cursor: pointer;
      position: relative;
      color: ${(props) => textColor(props.theme, 'dark', 'primary')};
      background-color: ${(props) => props.color ? props.color : themeColor(props.theme, 'accent', 'base')};
      height: 40px;
      border-radius: ${(props) => props.borderRadius};
      box-shadow: none;
      padding: 10px 25px;
      float: left;

      &:disabled {
        color: ${(props) => actionColor(props.theme, 'disabled')};
        background-color: ${(props) => actionColor(props.theme, 'disabledBackground')};
        cursor: not-allowed;
      }
    `;

    const Button = (props) => {
      const {
        type, className, disabled, value, color, borderRadius, onClick, onFocus, onMouseOver,
      } = props;

      return (
        <StyledButtonContainer className={className}>
          <StyledButton
            color={color}
            type={type}
            borderRadius={borderRadius}
            className={classNames('letstalk-button', className)}
            value={value}
            disabled={disabled}
            onClick={onClick}
            onFocus={onFocus}
            onMouseOver={onMouseOver}
          />
        </StyledButtonContainer>
      );
    };

    Button.propTypes = {
      type: PropTypes.oneOf(['button', 'submit', 'reset']).isRequired,
      value: PropTypes.string.isRequired,
      borderRadius: PropTypes.string,
      color: PropTypes.string,
      disabled: PropTypes.bool,
      onClick: PropTypes.func,
      onFocus: PropTypes.func,
      onMouseOver: PropTypes.func,
      className: PropTypes.string,
    };

    Button.defaultProps = {
      borderRadius: '0',
      className: 'LT-Button-Container',
      disabled: false,
    };

    Button.displayName = 'Button';

    export default Button;