From bc292082b2e07e965e10a904654a96ed05ff97c5 Mon Sep 17 00:00:00 2001 From: ainneo Date: Wed, 5 Feb 2020 12:24:10 -0800 Subject: [PATCH 1/3] icon components --- public/index.html | 1 + src/components/common/Icons.js | 55 ++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 src/components/common/Icons.js diff --git a/public/index.html b/public/index.html index 625b5240f..c1c2571a2 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,7 @@ + { + // Dynamically generates infoIcon className from props to comply with Bulma styling modifiers. + const infoClassName = classNames('icon', { + [`is-${size}`]: size, //for small, meduim, large, span tag + [`has-text-${color}`]: color, + [`fas-fa${iconSize}`]:iconSize //for fa-lg, fa-2x, fa-3x, icon tag + }); + + const infoIconId = `info-${id}`; + + return ( + + + {label} + + ); +}; + +export default Icons; + +Icons.propTypes = { + id: PropTypes.string.isRequired, + label: PropTypes.string, + handleClick: PropTypes.func, + color: PropTypes.string, + size: PropTypes.oneOf(['small', 'medium', 'large']), + iconTag:PropTypes.string, + iconSize:PropTypes.string, +}; + +Icons.defaultProps = { + label: null, + handleClick: () => null, + color: 'black', + size: 'small', +}; From 0b242d4c740b7f22177e521c5d4c481e83b244cf Mon Sep 17 00:00:00 2001 From: Adam Kendis Date: Thu, 13 Feb 2020 22:31:08 -0800 Subject: [PATCH 2/3] Renamed to Icon, added extra props. --- src/components/common/Icon.jsx | 105 +++++++++++++++++++++++++++++++++ src/components/common/Icons.js | 55 ----------------- 2 files changed, 105 insertions(+), 55 deletions(-) create mode 100644 src/components/common/Icon.jsx delete mode 100644 src/components/common/Icons.js diff --git a/src/components/common/Icon.jsx b/src/components/common/Icon.jsx new file mode 100644 index 000000000..d6ada3f17 --- /dev/null +++ b/src/components/common/Icon.jsx @@ -0,0 +1,105 @@ +import React from 'react'; +import PropTypes from 'proptypes'; +import classNames from 'classnames'; + +const Icon = ({ + id, + label, + handleClick, + icon, + /* + * Props below correspond with Bulma modifiers. + */ + size, + iconSize, + className, + fixedWidth, + spin, + pulse, + bordered, + color, + style, +}) => { + // Dynamically generates infoIcon className from props to comply with Bulma styling modifiers. + const containerClassName = classNames('icon', { + [`has-text-${color}`]: color, + [`is-${size}`]: size, // for small, meduim, large, span tag + }); + + const iconClassName = classNames({ + [`fas fa-${icon}`]: icon, + [`fa-${iconSize}`]: iconSize, // for fa-lg, fa-2x, fa-3x, icon tag + 'fa-fw': fixedWidth, + 'fa-border': bordered, + 'fa-spin': spin, + 'fa-pulse': pulse, + + }, className); + + const iconId = `icon-${id}`; + + return ( + + + {label} + + ); +}; + +export default Icon; + +Icon.propTypes = { + id: PropTypes.string.isRequired, + label: PropTypes.string, + handleClick: PropTypes.func, + color: PropTypes.oneOf([ + 'white', + 'black', + 'dark', + 'light', + 'primary', + 'info', + 'link', + 'success', + 'warning', + 'danger', + 'black-bis', + 'black-ter', + 'grey-darker', + 'grey-dark', + 'grey', + 'grey-light', + 'grey-lighter', + 'white-ter', + 'white-bis', + ]), + size: PropTypes.oneOf(['small', 'medium', 'large']), + iconSize: PropTypes.oneOf(['lg', '2x', '3x']), + icon: PropTypes.string, + className: PropTypes.string, + fixedWidth: PropTypes.bool, + spin: PropTypes.bool, + pulse: PropTypes.bool, + bordered: PropTypes.bool, + style: PropTypes.shape({}), +}; + +Icon.defaultProps = { + label: null, + handleClick: () => null, + color: 'black', + size: undefined, + icon: 'home', + iconSize: undefined, + className: undefined, + fixedWidth: false, + spin: false, + pulse: false, + bordered: false, + style: undefined, +}; diff --git a/src/components/common/Icons.js b/src/components/common/Icons.js deleted file mode 100644 index 8816ac4b7..000000000 --- a/src/components/common/Icons.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import PropTypes from 'proptypes'; -import classNames from 'classnames'; - -const Icons = ({ - id, - label, - handleClick, - iconTag, - iconSize, - /* - * Props below correspond with Bulma modifiers. - */ - color, - size, -}) => { - // Dynamically generates infoIcon className from props to comply with Bulma styling modifiers. - const infoClassName = classNames('icon', { - [`is-${size}`]: size, //for small, meduim, large, span tag - [`has-text-${color}`]: color, - [`fas-fa${iconSize}`]:iconSize //for fa-lg, fa-2x, fa-3x, icon tag - }); - - const infoIconId = `info-${id}`; - - return ( - - - {label} - - ); -}; - -export default Icons; - -Icons.propTypes = { - id: PropTypes.string.isRequired, - label: PropTypes.string, - handleClick: PropTypes.func, - color: PropTypes.string, - size: PropTypes.oneOf(['small', 'medium', 'large']), - iconTag:PropTypes.string, - iconSize:PropTypes.string, -}; - -Icons.defaultProps = { - label: null, - handleClick: () => null, - color: 'black', - size: 'small', -}; From 24970fe868ddd6ce0473024095759bb444c98c1c Mon Sep 17 00:00:00 2001 From: Adam Kendis Date: Thu, 13 Feb 2020 22:39:24 -0800 Subject: [PATCH 3/3] Removed empty line. --- src/components/common/Icon.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/common/Icon.jsx b/src/components/common/Icon.jsx index d6ada3f17..4633d1bfd 100644 --- a/src/components/common/Icon.jsx +++ b/src/components/common/Icon.jsx @@ -33,7 +33,6 @@ const Icon = ({ 'fa-border': bordered, 'fa-spin': spin, 'fa-pulse': pulse, - }, className); const iconId = `icon-${id}`;