andela / ah-kgl-wakanda-frontend / 143

pending completion

Build # 143

Build Type

Pull #8

travis-ci-com

Committed by

web-flow

Commit Message

Merge branch 'develop' of https://github.com/andela/ah-kgl-wakanda-frontend into ch-button-166575755

Pull Request Pull Request #8: #166575755 Adding a dynamic button

Run Details

17 of 80 branches covered (21.25%)

Branch coverage included in aggregate %.

14 of 14 new or added lines in 1 file covered. (100.0%)

38 of 118 relevant lines covered (32.2%)

1.78 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/Components/Common/Button/Button.jsx

import React from 'react';
import { PropTypes } from 'prop-types';
import './Button.scss';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import google from '../../../assets/images/google.png';
import facebook from '../../../assets/images/facebook.png';
import twitter from '../../../assets/images/twitter.png';

/**
 * Switch button icons
 * @param {*} name
 * @returns {object} Icon
 */
const setIcon = name => {
  switch (name) {
    case 'google':
      return google;
    case 'facebook':
      return facebook;
    case 'twitter':
      return twitter;
    default:
      return null;
  }
};

/**
 * Change the element
 * opacity
 *
 * @param {*} e
 * @param {*} value
 * @returns {void}
 */
const changeOpacity = (e, value) => {
  e.target.style.opacity = value;
};

/**
 * Shared button component
 * @param {object} props
 * @returns {object} Jsx component
 */
const Button = ({ social, text, color, full, size, disabled, icon, loading, outline }) => {
  return (
    <React.Fragment>
      {typeof social !== 'string' ? (
        <div
          role="button"
          tabIndex="-1"
          className="ah-button"
          style={{
            backgroundColor: outline ? '#fff' : color || null,
            color: outline ? '#f46036' : null,
            border: outline ? '1px solid #f46036' : null,
            display: full ? 'block' : 'inline-block',
            fontSize: `${size}px`,
            opacity: disabled ? 0.8 : 1,
          }}
          onMouseDown={e => (!disabled ? changeOpacity(e, 0.8) : null)}
          onMouseUp={e => (!disabled ? changeOpacity(e, 1) : null)}
        >
          {loading ? <div className="spinner" /> : null}
          <FontAwesomeIcon icon={icon} className="ah-icon" style={{ fontSize: `${size}px` }} />
          {text}
        </div>
      ) : (
        <div className="social" style={{ width: `${size + 6}px`, height: `${size + 6}px` }}>
          <img src={setIcon(social)} style={{ width: size ? `${size}px` : '40px' }} alt="" />
        </div>
      )}
    </React.Fragment>
  );
};

Button.defaultProps = {
  social: PropTypes.string,
  text: PropTypes.string,
  color: PropTypes.string,
  full: PropTypes.boolean,
  size: PropTypes.number,
  disabled: PropTypes.boolean,
  icon: PropTypes.any,
  loading: PropTypes.boolean,
  outline: PropTypes.boolean,
};

Button.propTypes = {
  social: PropTypes.string,
  text: PropTypes.string,
  color: PropTypes.string,
  full: PropTypes.bool,
  size: PropTypes.number,
  disabled: PropTypes.bool,
  icon: PropTypes.any,
  loading: PropTypes.bool,
  outline: PropTypes.bool,
};

export default Button;

1	import React from 'react';
2	import { PropTypes } from 'prop-types';
3	import './Button.scss';
4
5	import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6
7	import google from '../../../assets/images/google.png';
8	import facebook from '../../../assets/images/facebook.png';
9	import twitter from '../../../assets/images/twitter.png';
10
11	/**
12	* Switch button icons
13	* @param {*} name
14	* @returns {object} Icon
15	*/
16	const setIcon = name => {	×
17	switch (name) {	×
18	case 'google':
19	return google;	×
20	case 'facebook':
21	return facebook;	×
22	case 'twitter':
23	return twitter;	×
24	default:
25	return null;	×
26	}
27	};
28
29	/**
30	* Change the element
31	* opacity
32	*
33	* @param {*} e
34	* @param {*} value
35	* @returns {void}
36	*/
37	const changeOpacity = (e, value) => {	×
38	e.target.style.opacity = value;	×
39	};
40
41	/**
42	* Shared button component
43	* @param {object} props
44	* @returns {object} Jsx component
45	*/
46	const Button = ({ social, text, color, full, size, disabled, icon, loading, outline }) => {	×
47	return (	×
48	<React.Fragment>
49	{typeof social !== 'string' ? (	×
50	<div
51	role="button"
52	tabIndex="-1"
53	className="ah-button"
54	style={{
55	backgroundColor: outline ? '#fff' : color \|\| null,	×
56	color: outline ? '#f46036' : null,	×
57	border: outline ? '1px solid #f46036' : null,	×
58	display: full ? 'block' : 'inline-block',	×
59	fontSize: `${size}px`,
60	opacity: disabled ? 0.8 : 1,	×
61	}}
62	onMouseDown={e => (!disabled ? changeOpacity(e, 0.8) : null)}	×
63	onMouseUp={e => (!disabled ? changeOpacity(e, 1) : null)}	×
64	>
65	{loading ? <div className="spinner" /> : null}	×
66	<FontAwesomeIcon icon={icon} className="ah-icon" style={{ fontSize: `${size}px` }} />
67	{text}
68	</div>
69	) : (
70	<div className="social" style={{ width: `${size + 6}px`, height: `${size + 6}px` }}>
71	<img src={setIcon(social)} style={{ width: size ? `${size}px` : '40px' }} alt="" />	×
72	</div>
73	)}
74	</React.Fragment>
75	);
76	};
77
78	Button.defaultProps = {	×
79	social: PropTypes.string,
80	text: PropTypes.string,
81	color: PropTypes.string,
82	full: PropTypes.boolean,
83	size: PropTypes.number,
84	disabled: PropTypes.boolean,
85	icon: PropTypes.any,
86	loading: PropTypes.boolean,
87	outline: PropTypes.boolean,
88	};
89
90	Button.propTypes = {	×
91	social: PropTypes.string,
92	text: PropTypes.string,
93	color: PropTypes.string,
94	full: PropTypes.bool,
95	size: PropTypes.number,
96	disabled: PropTypes.bool,
97	icon: PropTypes.any,
98	loading: PropTypes.bool,
99	outline: PropTypes.bool,
100	};
101
102	export default Button;

andela / ah-kgl-wakanda-frontend / 143

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous