Merge pull request #234 from hackforla/icons

icon components fixed #234
hackforla · Feb 15, 2020 · 4d34e91 · 4d34e91
2 parents e632cb1 + 24970fe
commit 4d34e91
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 0 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
     <link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="

diff --git a/src/components/common/Icon.jsx b/src/components/common/Icon.jsx
@@ -0,0 +1,104 @@
+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 (
+    <span
+      id={iconId}
+      onClick={handleClick}
+      className={containerClassName}
+      style={style}
+    >
+      <i className={iconClassName} />
+      {label}
+    </span>
+  );
+};
+
+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,
+};