Allow icons to be changed by the user

.storybook/config.js

@@ -1,6 +1,7 @@
 import 'babel-polyfill'
 import { configure } from '@storybook/react';
 import '../src/main.sass'
+import '../node_modules/@fortawesome/fontawesome-free/css/all.css'
 
 const appStories = require.context('../src/', true, /stories\.js$/)
 

.storybook/webpack.config.js

@@ -14,7 +14,10 @@ module.exports = {
         },{
             loader: 'sass-loader?sourceMap' // compiles Sass to CSS
         }],
-        include: path.resolve(__dirname, '../src')
+        include: [
+          path.resolve(__dirname, '../src'),
+          path.resolve(__dirname, '../node_modules/@fortawesome'),
+        ],
       }, {
         test: /\.(woff2?|eot|ttf|svg|otf)(\?.+)?$/i,
         use: [

README.md

@@ -22,5 +22,44 @@ yarn add react-object-list
 ```
 Ensure you have all peer dependencies installed
 ```
-yarn add classnames font-awesome moment prop-types react-day-picker react-month-picker react-select
+yarn add classnames moment prop-types react-day-picker react-month-picker react-select
 ```
+
+
+Include icons from FontAwesome 4:
+
+```javascript
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import ObjectList from 'react-object-list'
+import {FontAwesome} from 'react-object-list/icons'
+
+var mount = document.querySelectorAll('div.browser-mount');
+ReactDOM.render(
+  <ObjectList
+    icons={icons.FontAwesome(4)}
+  />,
+  mount[0]
+);
+```
+
+or your own icons by specifying as so:
+```javascript
+  <ObjectList
+    icons={{
+      OptionalFields: <i className="list" />,
+      Favourites: <i className="heart" />,
+      RemoveFavourite: <i className="minus-circle" />,
+      RemoveFilter: <i className="trash-o" />,
+      DropdownOpen: <i className="caret-down" />,
+      DropdownClose: <i className="caret-up" />,
+      SortAsc: <i className="caret-up" />,
+      SortDesc: <i className="caret-down" />,
+      Unsorted: <i className="sort" />,
+      Loading: <i className="circle-notch spin" />,
+    }}
+  />
+```
+
+Unspecified icons will not show.

demo-site/demos.sass

@@ -1,2 +1,3 @@
 @import 'node_modules/uptick-demo-site/dist/uptick-demo-site'
 @import 'node_modules/react-object-list/styles/main'
+@import 'node_modules/font-awesome/css/font-awesome.min'

demo-site/table-demo.jsx

@@ -3,6 +3,7 @@ import ReactDom from 'react-dom'
 
 import ObjectList from 'react-object-list'
 import {TextContainsFilter} from 'react-object-list/filters'
+import {FontAwesome} from 'react-object-list/icons'
 
 const mockData = require('./demo.data.json')
 const columns = [
@@ -145,6 +146,7 @@ class TableDemo extends React.Component {
       addFilter={this.addFilter}
       removeFilter={this.removeFilter}
       updateFilter={this.updateFilter}
+      icons={FontAwesome(4)}
     />
   }
 }

package.json

@@ -28,6 +28,7 @@
   "author": "Uptick Pty Ltd (http://uptickhq.com)",
   "license": "MIT",
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.4.1",
     "@storybook/addon-actions": "^4.0.0-alpha.8",
     "@storybook/addon-info": "^4.0.0-alpha.8",
     "@storybook/addon-knobs": "^4.0.0-alpha.8",
@@ -58,7 +59,6 @@
     "eslint-plugin-standard": "^4.0.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.11",
-    "font-awesome": "^4.7.0",
     "jest": "^22.4.2",
     "moment": "^2.21.0",
     "node-sass": "^4.7.2",
@@ -80,7 +80,6 @@
   },
   "peerDependencies": {
     "classnames": "^2.2.5",
-    "font-awesome": "^4.7.0",
     "moment": "^2.21.0",
     "prop-types": "^15.6.1",
     "react": "15.x - 16.x",

src/ObjectList.demo.stories.js

@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { withInfo } from '@storybook/addon-info'
 import {TextContainsFilter, SearchFilter} from './filters'
+import {FontAwesome} from './icons'
 
 import ObjectList from '.'
 import Table from './data-renderers/Table'
@@ -181,6 +182,7 @@ class InteractiveObjectList extends React.Component {
       updateFilter={this.updateFilter}
       searchKey="first_name"
       itemOnClick={action('clicked on')}
+      icons={FontAwesome(5)}
     />
   }
 }

src/ObjectList.js

@@ -12,10 +12,7 @@ import {
   SELECTION_TYPE,
   ALL_SELECTED,
 } from './utils/proptypes'
-import {
-  loadingSpinner,
-  ErrorMessage as DefaultErrorMessage,
-} from './utils'
+import {ErrorMessage as DefaultErrorMessage} from './utils'
 
 class ObjectList extends Component {
   static propTypes = {
@@ -85,6 +82,19 @@ class ObjectList extends Component {
     selectItems: PropTypes.func,
     /** Array of custom actions to be rendered */
     customActions: PropTypes.arrayOf(PropTypes.func),
+    /** Icons to be rendered across the component */
+    icons: PropTypes.shape({
+      OptionalFields: PropTypes.element,
+      Favourites: PropTypes.element,
+      RemoveFavourite: PropTypes.element,
+      RemoveFilter: PropTypes.element,
+      DropdownOpen: PropTypes.element,
+      DropdownClose: PropTypes.element,
+      SortAsc: PropTypes.element,
+      SortDesc: PropTypes.element,
+      Unsorted: PropTypes.element,
+      Loading: PropTypes.element,
+    }),
   }
 
   static defaultProps = {
@@ -93,6 +103,7 @@ class ObjectList extends Component {
     Pagination: DefaultPagination,
     ErrorMessage: DefaultErrorMessage,
     data: [],
+    icons: {},
     columns: [],
     customActions: [],
     error: null,
@@ -121,7 +132,7 @@ class ObjectList extends Component {
     const {
       DataRenderer, Pagination, ErrorMessage,
       filters, addFilter, updateFilter, meta, status, searchKey,
-      data, columns, updateColumns, itemOnClick,
+      data, columns, updateColumns, itemOnClick, icons,
       favourites, handleDeleteFavourite, handleAddFavourite, favouritesEnabled,
       selectedFavouriteName, loadFavourite, maxPages, removeFilter,
       updatePage, updateSorting, selection, selectItems, customActions, error,
@@ -134,6 +145,7 @@ class ObjectList extends Component {
       <div>
         <ActionsFiltersContainer
           filters={filters}
+          icons={icons}
           addFilter={addFilter}
           updateFilter={updateFilter}
           removeFilter={removeFilter}
@@ -164,6 +176,7 @@ class ObjectList extends Component {
         <DataRenderer
           data={data}
           summaryData={summaryData}
+          icons={icons}
           meta={meta}
           columns={columns}
           updateSorting={updateSorting}
@@ -181,7 +194,7 @@ class ObjectList extends Component {
             count={totalCount}
             goToPage={updatePage}
             loading={status === STATUS_CHOICES.loading}
-            LoadingIcon={loadingSpinner}
+            LoadingIcon={icons.Loading}
             itemPluralName={itemPluralName}
           />
         }

src/ObjectList.stories.js

@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react'
 import { withInfo } from '@storybook/addon-info'
 import { action } from '@storybook/addon-actions'
 import * as importedFilters from './filters'
+import FontAwesomeIcons from './icons/FontAwesome'
 
 import ObjectList from '.'
 
@@ -11,6 +12,7 @@ const baseProps = {
   updateColumns: action('Update columns'),
   updateFilter: action('Update filters'),
   addFilter: action('Add filter'),
+  icons: FontAwesomeIcons(5),
 }
 
 const filters = Object.entries(importedFilters).map(([name, filter]) => {

src/__snapshots__/ObjectList.demo.stories.storyshot

@@ -79,9 +79,12 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
             className="objectlist-button objectlist-button--dropdown objectlist-button--borderless"
           >
             <i
-              className="fa fa-list"
+              className="fas fa-list"
             />
              Change columns
+            <i
+              className="fas fa-caret-down"
+            />
           </button>
           <div
             className="objectlist-dropdown__menu objectlist-dropdown__menu--borderless"
@@ -804,9 +807,12 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
             className="objectlist-button objectlist-button--dropdown objectlist-button--borderless"
           >
             <i
-              className="fa fa-list"
+              className="fas fa-list"
             />
              Change columns
+            <i
+              className="fas fa-caret-down"
+            />
           </button>
           <div
             className="objectlist-dropdown__menu objectlist-dropdown__menu--borderless"
@@ -866,8 +872,7 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
               >
 
                 <i
-                  aria-hidden="true"
-                  className="fa fa-sort"
+                  className="fas fa-sort"
                 />
               </span>
             </div>
@@ -889,8 +894,7 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
               >
 
                 <i
-                  aria-hidden="true"
-                  className="fa fa-sort"
+                  className="fas fa-sort"
                 />
               </span>
             </div>
@@ -912,8 +916,7 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
               >
 
                 <i
-                  aria-hidden="true"
-                  className="fa fa-sort"
+                  className="fas fa-sort"
                 />
               </span>
             </div>