Merge pull request #5 from PublicRadioInternational/feature/PRIAPI-73-icons

PRIAPI-73: SVG spriting, icons

Author: Evan Willhite

.storybook/webpack.config.js

@@ -14,6 +14,10 @@ module.exports = {
             }
           }
         ]
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-sprite-loader'
       }
     ]
   }

index.js

@@ -6,5 +6,6 @@
 import Button from './src/components/Atoms/Button/Button.component';
 import Dropdown from './src/components/Atoms/Dropdown/Dropdown.component';
 import DropdownItem from './src/components/Atoms/DropdownItem/DropdownItem.component';
+import Icon from './src/components/Atoms/Icon/Icon.component';
 
-export { Button, Dropdown, DropdownItem }; // eslint-disable-line
+export { Button, Dropdown, DropdownItem, Icon }; // eslint-disable-line

package.json

@@ -35,7 +35,7 @@
       "^.+\\.jsx?$": "babel-jest"
     },
     "moduleNameMapper": {
-      "\\.(css|less)$": "identity-obj-proxy"
+      "\\.(css|less|svg)$": "identity-obj-proxy"
     },
     "setupFiles": ["<rootDir>/jest.setup.js"],
     "testPathIgnorePatterns": ["<rootDir>/.next/", "<rootDir>/node_modules/"]
@@ -77,7 +77,8 @@
     "lint-staged": "^7.0.0",
     "prettier": "^1.11.1",
     "react-test-renderer": "^16.2.0",
-    "semantic-release": "^15.0.0"
+    "semantic-release": "^15.0.0",
+    "svg-sprite-loader": "^3.7.1"
   },
   "publishConfig": {
     "access": "restricted"

src/components/Atoms/Button/Button.component.js

@@ -6,12 +6,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './Button.css';
+import Icon from '../Icon/Icon.component';
 
 /**
  * Component that renders a link, or a button with a click handler.
  */
-function Button(props) {
-  const { url, onClick, className, children, color } = props;
+const Button = props => {
+  const { url, onClick, className, children, color, icon } = props;
   // Generate a class name based on the color.
   const buttonClass = `btn${color}`;
 
@@ -23,6 +24,7 @@ function Button(props) {
         className={`${styles[buttonClass]} ${className}`}
         onClick={onClick}
       >
+        {icon && <Icon svg={icon} inline />}
         <span className="text-label">{children}</span>
       </a>
     );
@@ -38,30 +40,34 @@ function Button(props) {
       aria-label={props['aria-label']}
       aria-haspopup={props['aria-haspopup']}
     >
+      {icon ? <Icon svg={icon} inline /> : null}
       {children}
     </button>
   );
-}
+};
 
 Button.propTypes = {
   url: PropTypes.string,
   onClick: PropTypes.func,
   children: PropTypes.node,
-  color: PropTypes.string,
-  className: PropTypes.string.isRequired,
+  color: PropTypes.oneOf(['Orange', 'White']),
+  className: PropTypes.string,
   'aria-expanded': PropTypes.bool,
   'aria-label': PropTypes.string,
-  'aria-haspopup': PropTypes.bool
+  'aria-haspopup': PropTypes.bool,
+  icon: PropTypes.string
 };
 
 Button.defaultProps = {
   url: null,
   color: 'White',
+  className: null,
   children: null,
   onClick: () => {},
   'aria-expanded': false,
   'aria-label': null,
-  'aria-haspopup': false
+  'aria-haspopup': false,
+  icon: null
 };
 
 export default Button;

src/components/Atoms/Dropdown/Dropdown.component.js

@@ -18,18 +18,20 @@ export default class Dropdown extends Component {
     children: PropTypes.node,
     onClick: PropTypes.func,
     url: PropTypes.string,
-    color: PropTypes.oneOf(['Orange', 'White'])
+    color: PropTypes.oneOf(['Orange', 'White']),
+    icon: PropTypes.string
   };
 
   static defaultProps = {
     children: [],
     color: 'White',
     url: null,
-    onClick: () => {}
+    onClick: () => {},
+    icon: null
   };
 
   render() {
-    const { title, onClick, children, color, url } = this.props;
+    const { title, onClick, children, color, url, icon } = this.props;
 
     return (
       <Downshift>
@@ -40,6 +42,7 @@ export default class Dropdown extends Component {
               url={url}
               color={color}
               onClick={onClick}
+              icon={icon}
             >
               {title}
             </Button>

src/components/Atoms/Icon/Icon.component.js

@@ -0,0 +1,39 @@
+/**
+ * @file Icon.component.js
+ * Exports an icon component.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Icon.css';
+
+/**
+ * Component that renders a link, or a button with a click handler.
+ */
+const Icon = props => {
+  const { svg, className, inline } = props;
+  const icon = require(`./svg/${svg}.svg`); // eslint-disable-line
+  return (
+    <svg
+      viewBox={icon.default.viewBox}
+      className={inline ? styles.inlineSvg : className}
+      fill="currentcolor"
+    >
+      <use xlinkHref={`#${icon.default.id}`} />
+    </svg>
+  );
+};
+
+Icon.propTypes = {
+  // Worth automatically creating these from the files in ./svg sometime?
+  svg: PropTypes.oneOf(['heart', 'envelope', 'search', 'volume']).isRequired,
+  className: PropTypes.string,
+  inline: PropTypes.bool
+};
+
+Icon.defaultProps = {
+  className: null,
+  inline: false
+};
+
+export default Icon;

src/components/Atoms/Icon/Icon.css

@@ -0,0 +1,7 @@
+.inlineSvg {
+  display: inline-block;
+  margin-right: 8px;
+  position: relative;
+  top: 2px;
+  width: 16px;
+}

src/components/Atoms/Icon/Icon.test.js

@@ -0,0 +1,16 @@
+/**
+ * @file Button.test.js
+ * Contains tests for Button.component.js.
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import Icon from './Icon.component';
+
+describe('<Icon />', () => {
+  it('Matches the Icon snapshot', () => {
+    const component = renderer.create(<Icon svg="heart" />).toJSON();
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/Atoms/Icon/__snapshots__/Icon.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Icon /> Matches the Icon snapshot 1`] = `
+<svg
+  className={null}
+  fill="currentcolor"
+  viewBox={undefined}
+>
+  <use
+    xlinkHref="#undefined"
+  />
+</svg>
+`;

src/components/Atoms/Icon/svg/envelope.svg

@@ -22,6 +22,11 @@ storiesOf('Atoms/Buttons', module)
     <Button onClick={action('button-clicked')} color="Orange">
       Donate
     </Button>
+  ))
+  .add('Icon', () => (
+    <Button onClick={action('button-clicked')} icon="envelope">
+      Newsletters
+    </Button>
   ));
 
 /**
@@ -42,9 +47,10 @@ storiesOf('Atoms/Dropdown', module)
   ))
   .add('Orange', () => (
     <Dropdown
-      title="Listen"
+      title="Donate"
       color="Orange"
       onClick={action('drowndown-button-clicked')}
+      icon="heart"
     >
       <DropdownItem url="https://google.com">Google</DropdownItem>
       <DropdownItem onClick={action('dropdown-button-item-clicked')}>