From 5622663c9bfb0aec6684634993ba9dad9a98bae8 Mon Sep 17 00:00:00 2001 From: Sjaak Luthart Date: Tue, 13 Jun 2017 17:09:53 +0200 Subject: [PATCH] Docs icons (#693) * :construction: WIP fixing icons * :sparkles: Added IconBomb * :bug: Fixed color * :memo: Render all Icons and their names * :art: Changed imports --- docs/src/components/icons.jsx | 79 ++++++++++++++++---------- docs/src/components/nav.jsx | 103 +++------------------------------- src/icons/icon-bomb.jsx | 33 +++++++++++ src/icons/icon-more.jsx | 4 +- src/icons/index.js | 3 + 5 files changed, 95 insertions(+), 127 deletions(-) create mode 100644 src/icons/icon-bomb.jsx diff --git a/docs/src/components/icons.jsx b/docs/src/components/icons.jsx index 7385f500..a35aadf4 100644 --- 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 = () => {

Examples

- {_.map(icons, icon => React.createElement(icon, { style: style.icon, key: uuid.v4() }))} + {_.map(icons, (icon, name) => ( +
+ {React.createElement(icon, { style: style.icon })} + {name} +
+ ))} -

Available icons

-

Props

- - - - - - - - - - - - - - - - - - - -
NameTypeDescriptionDefault valueRequired
colorstringThe icon's color#C4C4C4No
+ + + + Name + Type + Description + Default value + Required + + + + + color + string + The icon's color + #C4C4C4 + No + + +
); 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 ( - + router.push('/')} active={router.location.pathname === '/'} text="Getting started" /> router.push('/admin-badge')} active={router.isActive('/admin-badge')} text="AdminBadge" /> router.push('/alert')} active={router.isActive('/alert')} text="Alert" /> 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 }) => ( + + + + + + + + + + + + + + +); + +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 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 }) => ( - - + + diff --git a/src/icons/index.js b/src/icons/index.js index 857c2c67..e022db4b 100644 --- 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';