feat(Iconography): Use inlined SVGs instead of Font Awesome in

Iconography Component

- Update React Components that used Font Awesome
- Add SVG folder to Iconography CSS component
- CSS Styleguide Icons still broken

BREAKING CHANGE: Iconography Uses SVG instead of Font Awesome. Use `src`
prop instead of `name`.

BREAKING CHANGE: Typography color classes no longer change the color of
Icons (you need to change `fill` instead of `color`)

[#131219449]

Signed-off-by: Weyman Fung <wfung@pivotal.io>
Signed-off-by: Charles Hansen <chansen@pivotal.io>

library/package.json

@@ -44,6 +44,7 @@
     "gulp-connect": "^2.0.6",
     "gulp-eslint": "^1.1.1",
     "gulp-file": "^0.2.0",
+    "gulp-footer": "^1.0.5",
     "gulp-header": "^1.2.2",
     "gulp-jasmine": "^2.0.1",
     "gulp-jasmine-browser": "^1.0.1",
@@ -96,6 +97,7 @@
     "stream-series": "^0.1.1",
     "strong-wait-till-listening": "^1.0.1",
     "svg-react-loader": "^0.3.7",
+    "through": "^2.3.8",
     "through2": "^0.6.3",
     "trie-search": "^0.1.1",
     "vinyl": "^0.4.6",

library/spec/pivotal-ui-react/alerts/alerts_spec.js

@@ -119,7 +119,7 @@ describe('SuccessAlert', function() {
     });
 
     it('renders an icon in the alert', function() {
-      expect('i').toHaveClass('fa-check-circle');
+      expect('svg').toHaveClass('icon-check_circle');
     });
 
     it('has a "success alert" label', function() {
@@ -144,7 +144,7 @@ describe('InfoAlert', function() {
     });
 
     it('renders an icon in the alert', function() {
-      expect('i').toHaveClass('fa-info-circle');
+      expect('svg').toHaveClass('icon-info');
     });
 
     it('has a "info alert" label', function() {
@@ -169,7 +169,7 @@ describe('WarningAlert', function() {
      });
 
      it('renders an icon in the alert', function() {
-       expect('i').toHaveClass('fa-exclamation-triangle');
+       expect('svg').toHaveClass('icon-warning');
      });
 
      it('has a "warning alert" label', function() {
@@ -194,7 +194,7 @@ describe('ErrorAlert', function() {
      });
 
      it('renders an icon in the alert', function() {
-       expect('i').toHaveClass('fa-exclamation-triangle');
+       expect('svg').toHaveClass('icon-warning');
      });
 
      it('has an "error alert" label', function() {

library/spec/pivotal-ui-react/back-to-top/back-to-top_spec.js

@@ -52,6 +52,10 @@ describe('BackToTop', function() {
     expect('.back-to-top').toExist();
   });
 
+  it('renders a arrow upward icon', () => {
+    expect('svg.icon-arrow_upward').toExist();
+  });
+
   it('fades in the button', function() {
     expect('.back-to-top').toHaveCss({opacity: '0'});
     MockNow.tick(BackToTop.FADE_DURATION / 2);

library/spec/pivotal-ui-react/collapse/collapse_spec.js

@@ -77,12 +77,12 @@ describe('Collapse', function() {
   });
 
   it('contains a right-caret as its collapsed icon when closed', function() {
-    expect('.panel-title i').toHaveClass('fa-caret-right');
+    expect('svg').toHaveClass('icon-arrow_drop_right');
   });
 
   it('contains a down-caret as its collapsed icon when open', function() {
-    $('.panel-title i').simulate('click');
-    expect('.panel-title i').toHaveClass('fa-caret-down');
+    $('.panel-title svg').simulate('click');
+    expect('svg').toHaveClass('icon-arrow_drop_down');
   });
 });
 
@@ -98,11 +98,11 @@ describe('AltCollapse', function() {
   });
 
   it('contains a right-caret as its collapsed icon when closed', function() {
-    expect('.panel-title i').toHaveClass('fa-plus-square');
+    expect('svg').toHaveClass('icon-add_circle');
   });
 
   it('contains a down-caret as its collapsed icon when open', function() {
-    $('.panel-title i').simulate('click');
-    expect('.panel-title i').toHaveClass('fa-minus-square');
+    $('.panel-title svg').simulate('click');
+    expect('svg').toHaveClass('icon-remove_circle');
   });
 });

library/spec/pivotal-ui-react/copy-to-clipboard/copy-to-clipboard_spec.js

@@ -53,7 +53,7 @@ describe('CopyToClipboard', () => {
       beforeEach(() => {
         Tooltip = require('pui-react-tooltip').Tooltip;
         spyOn(Tooltip.prototype, 'render').and.callThrough();
-        $('.copy-to-clipboard-image').simulate('click');
+        $('svg.icon-copy').simulate('click');
       });
 
       it('renders a tooltip that says "Copied"', () => {

library/spec/pivotal-ui-react/draggable-list/draggable-list_spec.js

@@ -38,18 +38,20 @@ describe('DraggableList', function() {
     ReactDOM.unmountComponentAtNode(root);
   });
 
-
   it('passes through innerClassName to item content', function() {
     expect('.draggable-item-content:first').toHaveClass('inner-test-class');
   });
 
-
   function getListItemText() {
     return $('li.list-group-item .draggable-item-content').map(function() {
       return $('> span', this).text();
     }).toArray();
   }
 
+  it('renders icons for the grip', () => {
+    expect('svg.icon-grip').toExist();
+  });
+
   it('renders a list group of all items', function() {
     expect('ul.list-group').toHaveClass('list-draggable');
     expect('li.list-group-item .draggable-grip').toHaveLength(3);

library/spec/pivotal-ui-react/iconography/iconography_spec.js

@@ -1,5 +1,4 @@
 require('../spec_helper');
-import {itPropagatesAttributes} from '../support/shared_examples';
 
 var Icon = require('../../../src/pivotal-ui-react/iconography/iconography').Icon;
 
@@ -9,44 +8,20 @@ describe('iconography', function() {
   });
 
   it('works', function() {
-    ReactDOM.render(<Icon name='plus'/>, root);
-    expect('.fa.fa-plus').toExist();
+    ReactDOM.render(<Icon src='add'/>, root);
+    expect('.svgicon svg').toExist();
   });
 
-  it('does not have undefined when no className is given', function() {
-    ReactDOM.render(<Icon name='warning' size='h1'/>, root);
-    expect('.fa').not.toHaveClass('undefined');
-  });
-
-  it('does not have fa-undefined when no size is given', function() {
-    ReactDOM.render(<Icon name='camera-retro' className='class'/>, root);
-    expect('.fa').not.toHaveClass('fa-undefined');
-  });
-
-  describe('when a size is given', function() {
-    it('adds the size class to the icon', function() {
-      for (var size of ['title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'sm', 'xs', 'lg', '2x', '3x', '4x', '5x']) {
-        ReactDOM.render(<Icon name='plus' size={size}/>, root);
-        expect('.fa.fa-plus').toHaveClass(`fa-${size}`);
-        ReactDOM.unmountComponentAtNode(root);
-      }
-    });
-
-    describe('attributes', () => {
-      beforeEach( () => {
-        ReactDOM.render(<Icon name='plus' size='h1' className='test-class' id='test-id' style={{opacity: '0.5'}}/>, root);
-      });
-      afterEach(() => {
-        ReactDOM.unmountComponentAtNode(root);
-      });
-      itPropagatesAttributes('.fa.fa-plus', {className: 'test-class', id: 'test-id', style: {opacity: '0.5'}});
+  describe('when a style is given', function() {
+    it('adds the style to the svg', function() {
+      ReactDOM.render(<Icon src='add' style={{height: 100}}/>, root);
+      expect('.svgicon svg').toHaveAttr('style', /height: 100px;/);
     });
+  });
 
-    describe('when a className and a size are given', function() {
-      it('adds the size class to the icon and includes the given className also', function() {
-        ReactDOM.render(<Icon name='plus' className='a-class-name' size='h6'/>, root);
-        expect('.fa.fa-plus.a-class-name.fa-h6').toExist();
-      });
-    });
+  it('propagates className and id to the span', () => {
+    ReactDOM.render(<Icon src='add' className="foo" id="bar"/>, root);
+    expect('.svgicon').toHaveClass('foo');
+    expect('.svgicon').toHaveAttr('id', 'bar');
   });
 });

library/spec/pivotal-ui-react/notification/notification_spec.js

@@ -38,6 +38,10 @@ describe('Notification', function() {
       $('.dropdown-toggle').simulate('click');
     });
 
+    it('renders the bell', () => {
+      expect('.dropdown-notifications-title svg.icon-notifications').toExist();
+    });
+
     it('passes through the className to the btn-group', function() {
       expect('#root .btn-group').toHaveClass(props.className);
     });
@@ -135,7 +139,7 @@ describe('Alert Notifications', function() {
     });
 
     it('renders a notification alert icon', function() {
-      expect('.dropdown-notifications-title .dropdown-notifications-alert').toHaveClass('fa-exclamation-triangle');
+      expect('.dropdown-notifications-title .dropdown-notifications-alert svg').toHaveClass('icon-warning');
     });
 
     it('renders the children in a dropdown menu on click', function() {

library/spec/pivotal-ui-react/table/table_spec.js

@@ -111,6 +111,7 @@ describe('Table', function() {
 
       it('reverses the sort order', function() {
         expect('th:contains("instances")').toHaveClass('sorted-desc');
+        expect('th:contains("instances") .svgicon .icon-arrow_drop_down').toExist();
 
         expect('tbody tr:nth-of-type(1) > td:eq(0)').toContainText('sup');
         expect('tbody tr:nth-of-type(2) > td:eq(0)').toContainText('yee');
@@ -128,6 +129,8 @@ describe('Table', function() {
 
         it('reverses the sort order', function() {
           expect('th:contains("instances")').toHaveClass('sorted-asc');
+          expect('th:contains("instances") .svgicon .icon-arrow_drop_up').toExist();
+
 
           expect('tbody tr:nth-of-type(1) > td:eq(0)').toContainText('foo');
           expect('tbody tr:nth-of-type(2) > td:eq(0)').toContainText('yee');

library/spec/task-helpers/package-version-helper-spec.js

@@ -55,7 +55,6 @@ describe('componentsToUpdate', function() {
         component: 'src/pivotal-ui-react/alerts/',
         dependencies: ['pui-react-media']
       }));
-      expect(result.length).toEqual(2);
     });
   });
 
@@ -67,7 +66,7 @@ describe('componentsToUpdate', function() {
       ], done);
     });
 
-    it('outputs itself and all dependents, no duplicates', () => {
+    it('outputs itself and all dependents', () => {
       expect(result).toContain(jasmine.objectContaining({
         component: 'src/pivotal-ui-react/dropdowns/',
         dependencies: []
@@ -80,7 +79,6 @@ describe('componentsToUpdate', function() {
         component: 'src/pivotal-ui-react/notifications/',
         dependencies: ['pui-react-dropdowns', 'pui-react-iconography']
       }));
-      expect(result.length).toEqual(3);
     });
   });
 });

library/src/pivotal-ui-react/alerts/alerts.js

@@ -3,6 +3,7 @@ const React = require('react');
 const types = React.PropTypes;
 const {Media} = require('pui-react-media');
 const {mergeProps} = require('pui-react-helpers');
+const {Icon} = require('pui-react-iconography');
 require('pui-css-alerts');
 
 class Alert extends React.Component{
@@ -50,7 +51,7 @@ class Alert extends React.Component{
     }
 
     if (withIcon) {
-      const icon = <i className={`fa ${alertIcon}`}></i>;
+      const icon = <Icon src={alertIcon}></Icon>;
       children = <Media className={'mtn'} image={icon}>{children}</Media>;
     }
     return (
@@ -92,8 +93,8 @@ function defAlert(props) {
 }
 
 module.exports = {
-  SuccessAlert: defAlert({bsStyle: 'success', alertIcon: 'fa-check-circle'}),
-  InfoAlert: defAlert({bsStyle: 'info', alertIcon: 'fa-info-circle'}),
-  WarningAlert: defAlert({bsStyle: 'warning', alertIcon: 'fa-exclamation-triangle'}),
-  ErrorAlert: defAlert({bsStyle: 'danger', alertIcon: 'fa-exclamation-triangle'})
+  SuccessAlert: defAlert({bsStyle: 'success', alertIcon: 'check_circle'}),
+  InfoAlert: defAlert({bsStyle: 'info', alertIcon: 'info'}),
+  WarningAlert: defAlert({bsStyle: 'warning', alertIcon: 'warning'}),
+  ErrorAlert: defAlert({bsStyle: 'danger', alertIcon: 'warning'})
 };

library/src/pivotal-ui-react/alerts/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "classnames": "2.2.5",
     "pui-css-alerts": "^6.0.2",
-    "pui-css-iconography": "^6.0.2",
+    "pui-react-iconography": "^6.0.2",
     "pui-react-media": "^6.0.2"
   }
 }

library/src/pivotal-ui-react/back-to-top/back-to-top.js

@@ -1,9 +1,10 @@
-var React = require('react');
-var throttle = require('lodash.throttle');
-var {getScrollTop, setScrollTop} = require('./scroll-top');
-import {mergeProps} from 'pui-react-helpers';
-import mixin from 'pui-react-mixins';
-import Animation from 'pui-react-mixins/mixins/animation_mixin';
+const {Icon} = require('pui-react-iconography');
+const React = require('react');
+const throttle = require('lodash.throttle');
+const {getScrollTop, setScrollTop} = require('./scroll-top');
+const {mergeProps} = require('pui-react-helpers');
+const mixin = require('pui-react-mixins');
+const Animation = require('pui-react-mixins/mixins/animation_mixin');
 require('pui-css-back-to-top');
 
 class BackToTop extends mixin(React.Component).with(Animation) {
@@ -47,7 +48,10 @@ class BackToTop extends mixin(React.Component).with(Animation) {
         style: {display: 'inline', opacity: this.animate('opacity', visible ? 1 : 0, BackToTop.FADE_DURATION)}
       }
     );
-    return <a {...props} onClick={this.scrollToTop} href="#top" aria-label="Back to top" />;
+
+    return (
+      <a {...props} onClick={this.scrollToTop} href="#top" aria-label="Back to top"><Icon style={{strokeWidth: 100}} src="arrow_upward"/></a>
+    )
   }
 }
 

library/src/pivotal-ui-react/back-to-top/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "pui-css-back-to-top": "^6.0.2",
     "pui-react-helpers": "^6.0.2",
+    "pui-react-iconography": "^6.0.2",
     "pui-react-mixins": "^6.0.2",
     "lodash.throttle": "^3.0.2"
   }

library/src/pivotal-ui-react/collapse/collapse.js

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import {mergeProps} from 'pui-react-helpers';
 import {Panel} from 'pui-react-panels';
 const React = require('react');
+const {Icon} = require('pui-react-iconography');
 require('pui-css-collapse');
 
 const types = React.PropTypes;
@@ -58,10 +59,10 @@ class Collapse extends BaseCollapse {
   renderHeader() {
     const {header} = this.props;
     const {expanded} = this.state;
-    const iconClass = expanded ? 'fa fa-caret-down' : 'fa fa-caret-right';
+    const iconSrc = expanded ? 'arrow_drop_down' : 'arrow_drop_right';
     return (
       <div className="collapse-trigger">
-        <i className={classnames(iconClass, 'collapse-icon')}/>
+        <Icon className="collapse-icon" src={iconSrc}/>
         {header}
       </div>
     );
@@ -72,10 +73,10 @@ class AltCollapse extends BaseCollapse {
   renderHeader() {
     const {header} = this.props;
     const {expanded} = this.state;
-    const iconClass = expanded ? 'fa fa-minus-square' : 'fa fa-plus-square';
+    const iconSrc = expanded ? 'remove_circle' : 'add_circle';
     return (
       <div className="collapse-trigger">
-        <i className={classnames(iconClass, 'collapse-icon')}/>
+        <Icon className="collapse-icon" src={iconSrc}/>
         {header}
       </div>
     );