From a1e04eb03f73e3869777842f683e907ee705b66b Mon Sep 17 00:00:00 2001
From: Sjaak Luthart <sjaak.luthart@anchor.chat>
Date: Tue, 13 Jun 2017 11:35:52 +0200
Subject: [PATCH 1/5] :construction: WIP fixing icons

---
 docs/src/components/icons.jsx | 12 +++++++++---
 src/icons/index.js            |  2 ++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/icons.jsx b/docs/src/components/icons.jsx
index 7385f500..c0a6c2fa 100644
--- a/docs/src/components/icons.jsx
+++ b/docs/src/components/icons.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import _ from 'underscore';
-import uuid from 'uuid';
 import * as icons from '../../../dist/icons';
 import components from '../../components.json';
 import Paper from '../../../dist/paper';
@@ -19,7 +18,12 @@ const IconsDoc = () => {
       margin: 0,
       padding: '20px'
     },
-    icon: { margin: '10px' }
+    icon: {
+      margin: '10px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    }
   };
 
   return (
@@ -36,7 +40,9 @@ const IconsDoc = () => {
       <section>
         <h1>Examples</h1>
         <Paper style={style.paper}>
-          {_.map(icons, icon => React.createElement(icon, { style: style.icon, key: uuid.v4() }))}
+          {_.map(icons, (icon, name) => (
+            <div key={name} style={style.icon}>{React.createElement(icon)} {name}</div>
+          ))}
         </Paper>
         <h2>Available icons</h2>
         <ul>
diff --git a/src/icons/index.js b/src/icons/index.js
index 857c2c67..e23b6b3e 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -61,3 +61,5 @@ export IconHome from './icon-home';
 export IconMail from './icon-mail';
 export IconPlus from './icon-plus';
 export IconChannelSettings from './icon-channel-settings';
+export IconFirst from './icon-first';
+export IconLast from './icon-last';

From 45809b09c6546e4cc6e17c58a1b5490387e97bc2 Mon Sep 17 00:00:00 2001
From: Sjaak Luthart <sjaak.luthart@anchor.chat>
Date: Tue, 13 Jun 2017 16:59:21 +0200
Subject: [PATCH 2/5] :sparkles: Added IconBomb

---
 src/icons/icon-bomb.jsx | 33 +++++++++++++++++++++++++++++++++
 src/icons/index.js      |  1 +
 2 files changed, 34 insertions(+)
 create mode 100644 src/icons/icon-bomb.jsx

diff --git a/src/icons/icon-bomb.jsx b/src/icons/icon-bomb.jsx
new file mode 100644
index 00000000..46f0c155
--- /dev/null
+++ b/src/icons/icon-bomb.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import pure from 'recompose/pure';
+import colors from '../settings/colors';
+
+const IconBomb = ({ color, ...custom }) => (
+  <svg fill="none" height="24" viewBox="0 0 24 24" width="24" {...custom}>
+    <g fill={color}>
+      <path d="M9.2,8.8000001 C7.704,8.8000001 6.296,9.3824001 5.24,10.4400001 C4.184,11.4976001 3.6,12.9040001 3.6,14.3992001 C3.6,15.8952001 4.184,17.3016001 5.24,18.3592001 C6.296,19.4168001 7.704,19.9992001 9.2,19.9992001 C10.696,19.9992001 12.104,19.4168001 13.16,18.3592001 C15.344,16.1760001 15.344,12.6232001 13.16,10.4400001 C12.104,9.3824001 10.696,8.8000001 9.2,8.8000001 Z M9.2,21.5992001 C7.272,21.5992001 5.464,20.8504001 4.104,19.4904001 C2.752,18.1304001 2,16.3224001 2,14.3992001 C2,12.4760001 2.752,10.6680001 4.104,9.3088001 C5.464,7.9488001 7.272,7.2000001 9.2,7.2000001 C11.12,7.2000001 12.928,7.9488001 14.288,9.3088001 C17.096,12.1152001 17.096,16.6832001 14.288,19.4904001 C12.928,20.8504001 11.12,21.5992001 9.2,21.5992001 L9.2,21.5992001 Z" />
+      <path d="M18.6,4.5416001 C18.376,4.5416001 18.2,4.3624001 18.2,4.1416001 L18.2,2.8336001 C18.2,2.6120001 18.376,2.4336001 18.6,2.4336001 C18.824,2.4336001 19,2.6120001 19,2.8336001 L19,4.1416001 C19,4.3624001 18.824,4.5416001 18.6,4.5416001" />
+      <path d="M18.6,8.8744001 C18.376,8.8744001 18.2,8.6952001 18.2,8.4744001 L18.2,7.1664001 C18.2,6.9448001 18.376,6.7664001 18.6,6.7664001 C18.824,6.7664001 19,6.9448001 19,7.1664001 L19,8.4744001 C19,8.6952001 18.824,8.8744001 18.6,8.8744001" />
+      <path d="M21.424,6.0544001 L20.112,6.0544001 C19.896,6.0544001 19.712,5.8760001 19.712,5.6544001 C19.712,5.4336001 19.896,5.2544001 20.112,5.2544001 L21.424,5.2544001 C21.64,5.2544001 21.824,5.4336001 21.824,5.6544001 C21.824,5.8760001 21.64,6.0544001 21.424,6.0544001" />
+      <path d="M19.672,4.9832001 C19.568,4.9832001 19.464,4.9440001 19.384,4.8664001 C19.232,4.7104001 19.232,4.4568001 19.384,4.3008001 L20.312,3.3760001 C20.472,3.2192001 20.72,3.2192001 20.88,3.3760001 C21.032,3.5312001 21.032,3.7848001 20.88,3.9416001 L19.952,4.8664001 C19.872,4.9440001 19.776,4.9832001 19.672,4.9832001" />
+      <path d="M16.608,8.0464001 C16.504,8.0464001 16.4,8.0080001 16.32,7.9296001 C16.168,7.7736001 16.168,7.5200001 16.32,7.3640001 L17.248,6.4400001 C17.408,6.2832001 17.656,6.2832001 17.816,6.4400001 C17.968,6.5960001 17.968,6.8496001 17.816,7.0056001 L16.888,7.9296001 C16.808,8.0080001 16.712,8.0464001 16.608,8.0464001" />
+      <path d="M20.592,8.0480001 C20.496,8.0480001 20.392,8.0096001 20.312,7.9312001 L19.384,7.0072001 C19.232,6.8512001 19.232,6.5976001 19.384,6.4416001 C19.544,6.2848001 19.8,6.2848001 19.952,6.4416001 L20.88,7.3656001 C21.032,7.5216001 21.032,7.7752001 20.88,7.9312001 C20.8,8.0096001 20.696,8.0480001 20.592,8.0480001" />
+      <path d="M17.528,4.9848001 C17.432,4.9848001 17.328,4.9456001 17.248,4.8680001 L16.328,3.9432001 C16.168,3.7864001 16.168,3.5328001 16.328,3.3768001 C16.48,3.2208001 16.736,3.2208001 16.888,3.3768001 L17.816,4.3024001 C17.968,4.4584001 17.968,4.7120001 17.816,4.8680001 C17.736,4.9456001 17.632,4.9848001 17.528,4.9848001" />
+      <path d="M15.424,12.5128001 C15.216,12.5128001 15.008,12.4352001 14.856,12.2784001 C14.544,11.9664001 14.544,11.4600001 14.856,11.1472001 L15.776,10.2272001 L13.368,7.8232001 L12.448,8.7440001 C12.136,9.0560001 11.632,9.0560001 11.32,8.7440001 C11.008,8.4312001 11.008,7.9248001 11.32,7.6120001 L12.808,6.1264001 C13.12,5.8136001 13.624,5.8136001 13.936,6.1264001 L17.472,9.6616001 C17.624,9.8112001 17.704,10.0152001 17.704,10.2272001 C17.704,10.4392001 17.624,10.6432001 17.472,10.7928001 L15.984,12.2784001 C15.832,12.4352001 15.624,12.5128001 15.424,12.5128001" />
+      <path d="M14.832,8.2344001 C14.576,8.2344001 14.392,8.1480001 14.36,8.1328001 C14.184,8.0432001 14.112,7.8248001 14.2,7.6448001 C14.288,7.4672001 14.504,7.3936001 14.68,7.4776001 C14.696,7.4840001 14.848,7.5464001 15.016,7.4616001 C15.256,7.3400001 15.448,6.9616001 15.568,6.3984001 C15.664,5.9472001 15.904,5.6000001 16.264,5.3936001 C16.984,4.9824001 17.976,5.2168001 18.504,5.3952001 C18.696,5.4592001 18.8,5.6656001 18.736,5.8560001 C18.672,6.0464001 18.472,6.1504001 18.28,6.0856001 C18.016,5.9984001 17.128,5.7384001 16.624,6.0256001 C16.448,6.1288001 16.336,6.2992001 16.28,6.5480001 C16.104,7.3680001 15.784,7.8976001 15.32,8.1216001 C15.144,8.2064001 14.976,8.2344001 14.832,8.2344001" />
+    </g>
+  </svg>
+);
+
+IconBomb.propTypes = {
+  color: PropTypes.string
+};
+
+IconBomb.defaultProps = {
+  color: colors.icons
+};
+
+IconBomb.displayName = 'IconBomb';
+
+export default pure(IconBomb);
diff --git a/src/icons/index.js b/src/icons/index.js
index e23b6b3e..e022db4b 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -63,3 +63,4 @@ export IconPlus from './icon-plus';
 export IconChannelSettings from './icon-channel-settings';
 export IconFirst from './icon-first';
 export IconLast from './icon-last';
+export IconBomb from './icon-bomb';

From 8b13cd72fc61024854d9e708a8a01c752d0575a2 Mon Sep 17 00:00:00 2001
From: Sjaak Luthart <sjaak.luthart@anchor.chat>
Date: Tue, 13 Jun 2017 16:59:38 +0200
Subject: [PATCH 3/5] :bug: Fixed color

---
 src/icons/icon-more.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/icons/icon-more.jsx b/src/icons/icon-more.jsx
index f32c6b67..522137b1 100644
--- a/src/icons/icon-more.jsx
+++ b/src/icons/icon-more.jsx
@@ -4,8 +4,8 @@ import pure from 'recompose/pure';
 import colors from '../settings/colors';
 
 const IconMore = ({ color, ...custom }) => (
-  <svg fill={color} height="24" viewBox="0 0 24 24" width="24" {...custom}>
-    <g fill="#C4C4C4">
+  <svg height="24" viewBox="0 0 24 24" width="24" {...custom}>
+    <g fill={color}>
       <circle cx="12.5" cy="19.5" r="1.875" />
       <circle cx="12.5" cy="12" r="1.875" />
       <circle cx="12.5" cy="4.5" r="1.875" />

From eacf7a848840208ce2817ff6f38ad7998d25a2cb Mon Sep 17 00:00:00 2001
From: Sjaak Luthart <sjaak.luthart@anchor.chat>
Date: Tue, 13 Jun 2017 17:00:16 +0200
Subject: [PATCH 4/5] :memo: Render all Icons and their names

---
 docs/src/components/icons.jsx | 73 ++++++++++++++++++++---------------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/docs/src/components/icons.jsx b/docs/src/components/icons.jsx
index c0a6c2fa..a35aadf4 100644
--- a/docs/src/components/icons.jsx
+++ b/docs/src/components/icons.jsx
@@ -2,27 +2,39 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import _ from 'underscore';
 import * as icons from '../../../dist/icons';
-import components from '../../components.json';
 import Paper from '../../../dist/paper';
+import Table from '../../../dist/table';
+import TableHeader from '../../../dist/table-header';
+import TableHeaderColumn from '../../../dist/table-header-column';
+import TableBody from '../../../dist/table-body';
+import TableRow from '../../../dist/table-row';
+import TableColumn from '../../../dist/table-column';
 
 const usage = '```js\n import { IconEmoji } from \'anchor-ui/icons\'; \n import IconHammer from \'anchor-ui/icons/icon-hammer\'';
 
 const IconsDoc = () => {
-  const iconData = _.filter(components, (component, key) => key.match(/icons/));
-  const iconNames = _.pluck(iconData, 'displayName');
   const style = {
     paper: {
       display: 'flex',
       flexWrap: 'wrap',
       alignItems: 'center',
       margin: 0,
-      padding: '20px'
+      padding: '20px',
+      justifyContent: 'space-between'
     },
-    icon: {
-      margin: '10px',
+    wrapper: {
+      margin: '15px',
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center'
+    },
+    icon: {
+      width: '44px',
+      height: '44px'
+    },
+    label: {
+      marginTop: '16px',
+      fontSize: '12px'
     }
   };
 
@@ -41,36 +53,35 @@ const IconsDoc = () => {
         <h1>Examples</h1>
         <Paper style={style.paper}>
           {_.map(icons, (icon, name) => (
-            <div key={name} style={style.icon}>{React.createElement(icon)} {name}</div>
+            <div key={name} style={style.wrapper}>
+              {React.createElement(icon, { style: style.icon })}
+              <span style={style.label}>{name}</span>
+            </div>
           ))}
         </Paper>
-        <h2>Available icons</h2>
-        <ul>
-          {iconNames.map(icon => <li key={icon}>{icon}</li>)}
-        </ul>
       </section>
       <section>
         <h1>Props</h1>
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Description</th>
-              <th>Default value</th>
-              <th>Required</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>color</td>
-              <td>string</td>
-              <td>The icon&apos;s color</td>
-              <td>#C4C4C4</td>
-              <td>No</td>
-            </tr>
-          </tbody>
-        </table>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHeaderColumn>Name</TableHeaderColumn>
+              <TableHeaderColumn>Type</TableHeaderColumn>
+              <TableHeaderColumn>Description</TableHeaderColumn>
+              <TableHeaderColumn>Default value</TableHeaderColumn>
+              <TableHeaderColumn>Required</TableHeaderColumn>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableColumn>color</TableColumn>
+              <TableColumn>string</TableColumn>
+              <TableColumn>The icon&apos;s color</TableColumn>
+              <TableColumn>#C4C4C4</TableColumn>
+              <TableColumn>No</TableColumn>
+            </TableRow>
+          </TableBody>
+        </Table>
       </section>
     </article>
   );

From 4d6f6a0de3b3c4fa1a807bd413cdb1182623d2e9 Mon Sep 17 00:00:00 2001
From: Sjaak Luthart <sjaak.luthart@anchor.chat>
Date: Tue, 13 Jun 2017 17:00:45 +0200
Subject: [PATCH 5/5] :art: Changed imports

---
 docs/src/components/nav.jsx | 103 ++++--------------------------------
 1 file changed, 9 insertions(+), 94 deletions(-)

diff --git a/docs/src/components/nav.jsx b/docs/src/components/nav.jsx
index 6fd39780..824201fa 100644
--- a/docs/src/components/nav.jsx
+++ b/docs/src/components/nav.jsx
@@ -4,105 +4,20 @@ import _ from 'underscore';
 import Menu from '../../../dist/menu';
 import MenuItem from '../../../dist/menu-item';
 import npmPackage from '../../../package.json';
-import IconAddImage from '../../../dist/icons/icon-add-image';
-import IconChannels from '../../../dist/icons/icon-channels';
-import IconChannel from '../../../dist/icons/icon-channel';
-import IconClock from '../../../dist/icons/icon-clock';
-import IconConversation from '../../../dist/icons/icon-conversation';
-import IconEdit from '../../../dist/icons/icon-edit';
-import IconError from '../../../dist/icons/icon-error';
-import IconExit from '../../../dist/icons/icon-exit';
-import IconFont from '../../../dist/icons/icon-font';
-import IconEmoji from '../../../dist/icons/icon-emoji';
-import IconHammer from '../../../dist/icons/icon-hammer';
-import IconHand from '../../../dist/icons/icon-hand';
-import IconInfo from '../../../dist/icons/icon-info';
-import IconsLanguage from '../../../dist/icons/icon-language';
-import IconLock from '../../../dist/icons/icon-lock';
-import IconMute from '../../../dist/icons/icon-mute';
-import IconPeople from '../../../dist/icons/icon-people';
-import IconPerson from '../../../dist/icons/icon-person';
-import IconPower from '../../../dist/icons/icon-power';
-import IconRocket from '../../../dist/icons/icon-rocket';
-import IconSend from '../../../dist/icons/icon-send';
-import IconSettings from '../../../dist/icons/icon-settings';
-import IconSuccess from '../../../dist/icons/icon-success';
-import IconWarning from '../../../dist/icons/icon-warning';
-import IconSearch from '../../../dist/icons/icon-search';
-import IconMicrophone from '../../../dist/icons/icon-microphone';
-import IconActivity from '../../../dist/icons/icon-activity';
-import IconFood from '../../../dist/icons/icon-food';
-import IconNature from '../../../dist/icons/icon-nature';
-import IconObjects from '../../../dist/icons/icon-objects';
-import IconSymbols from '../../../dist/icons/icon-symbols';
-import IconTravel from '../../../dist/icons/icon-travel';
-import IconAddFriend from '../../../dist/icons/icon-add-friend';
-import IconBlock from '../../../dist/icons/icon-block';
-import IconPicture from '../../../dist/icons/icon-picture';
-import IconReport from '../../../dist/icons/icon-report';
-import IconRemoveFriend from '../../../dist/icons/icon-remove-friend';
-import IconThumbsUp from '../../../dist/icons/icon-thumbs-up';
-import IconThumbsDown from '../../../dist/icons/icon-thumbs-down';
-import IconRules from '../../../dist/icons/icon-rules';
-import IconQuestion from '../../../dist/icons/icon-question';
-import IconDelete from '../../../dist/icons/icon-delete';
-import IconAdmin from '../../../dist/icons/icon-admin';
-import IconNotification from '../../../dist/icons/icon-notification';
-import IconRefresh from '../../../dist/icons/icon-refresh';
-
-const icons = [
-  IconAddImage,
-  IconChannels,
-  IconChannel,
-  IconClock,
-  IconConversation,
-  IconEdit,
-  IconError,
-  IconExit,
-  IconFont,
-  IconEmoji,
-  IconHammer,
-  IconHand,
-  IconInfo,
-  IconsLanguage,
-  IconLock,
-  IconMute,
-  IconPeople,
-  IconPerson,
-  IconPower,
-  IconRocket,
-  IconSend,
-  IconSettings,
-  IconSuccess,
-  IconWarning,
-  IconSearch,
-  IconMicrophone,
-  IconActivity,
-  IconFood,
-  IconNature,
-  IconObjects,
-  IconSymbols,
-  IconTravel,
-  IconAddFriend,
-  IconBlock,
-  IconPicture,
-  IconReport,
-  IconRemoveFriend,
-  IconThumbsUp,
-  IconThumbsDown,
-  IconRules,
-  IconQuestion,
-  IconDelete,
-  IconAdmin,
-  IconNotification,
-  IconRefresh
-];
+import * as icons from '../../../dist/icons';
 
 const Nav = (props, context) => {
   const { router } = context;
 
+  const style = {
+    icon: {
+      width: '24px',
+      height: '24px'
+    }
+  };
+
   return (
-    <Menu header={`Version: ${npmPackage.version}`} headerIcon={React.createElement(_.sample(icons))}>
+    <Menu header={`Version: ${npmPackage.version}`} headerIcon={React.createElement(_.sample(icons), { style: style.icon })}>
       <MenuItem onClick={() => router.push('/')} active={router.location.pathname === '/'} text="Getting started" />
       <MenuItem onClick={() => router.push('/admin-badge')} active={router.isActive('/admin-badge')} text="AdminBadge" />
       <MenuItem onClick={() => router.push('/alert')} active={router.isActive('/alert')} text="Alert" />