Docs icons (#693)

* 🚧 WIP fixing icons * ✨ Added IconBomb * 🐛 Fixed color * 📝 Render all Icons and their names * 🎨 Changed imports
anchorchat · Jun 13, 2017 · 5622663 · 5622663
1 parent 36256ad
commit 5622663
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 127 deletions.
diff --git a/docs/src/components/icons.jsx b/docs/src/components/icons.jsx
@@ -1,25 +1,41 @@
 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';
+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'
+    }
   };
 
   return (
@@ -36,35 +52,36 @@ 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.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>
   );

diff --git 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" />

diff --git a/src/icons/icon-bomb.jsx 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/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" />

diff --git a/src/icons/index.js b/src/icons/index.js
@@ -61,3 +61,6 @@ 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';
+export IconBomb from './icon-bomb';