feat(icons): add and revise some icons

- Deletes moment as a dependency
 - Adds two new icons
 - Credits styleguidist
 - Fixes console warnings
This commit is contained in:
Sara Vieira 2018-01-05 16:35:26 +00:00 committed by Sérgio Ramos
parent 3caaebb0e9
commit 8701aaebda
9 changed files with 160 additions and 35 deletions

View File

@ -0,0 +1,39 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
export default ({
fill = null,
light = false,
disabled = false,
direction = 'down',
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 16.2 16.2"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="17"
height="17"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
fill={calcFill({ fill, disabled, light, colors })}
/>
</svg>
)}
</Rotate>
)}
</Colors>
);

View File

@ -33,3 +33,6 @@ export { default as Stop } from './stop';
export { default as Tags } from './tags'; export { default as Tags } from './tags';
export { default as Triton } from './triton'; export { default as Triton } from './triton';
export { default as User } from './user'; export { default as User } from './user';
export { default as Randomize } from './randomize';
export { default as Name } from './name';
export { default as Fabric } from './fabric';

View File

@ -0,0 +1,39 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
export default ({
fill = null,
light = false,
disabled = false,
direction = 'down',
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 16.24 13.55"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="17"
height="17"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
fill={calcFill({ fill, disabled, light, colors })}
/>
</svg>
)}
</Rotate>
)}
</Colors>
);

View File

@ -0,0 +1,39 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
export default ({
fill = null,
light = false,
disabled = false,
direction = 'down',
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 18.22 18.22"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="17"
height="17"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
d="M6.32,1l4.55,5.31L5.56,10.87,1,5.56,6.32,1m0-1a1,1,0,0,0-.65.24L.35,4.8A1,1,0,0,0,.24,6.21L4.8,11.52a1,1,0,0,0,1.41.11l5.31-4.56a1,1,0,0,0,.11-1.4L7.07.35A1,1,0,0,0,6.32,0Zm4.14,8.65,6.76,1.81-1.8,6.76-6.77-1.8,1.81-6.77m0-1a1,1,0,0,0-1,.74l-1.8,6.77a1,1,0,0,0,.7,1.22l6.77,1.81a1.09,1.09,0,0,0,.26,0,1,1,0,0,0,1-.74l1.81-6.77a1,1,0,0,0-.71-1.22l-6.77-1.8a.73.73,0,0,0-.25,0ZM6.86,3.17a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.86,3.17Zm2,2.28A1,1,0,1,0,8.7,6.86,1,1,0,0,0,8.81,5.45Zm-2.28,2a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.53,7.4ZM4.58,5.12a1,1,0,1,0-.11,1.41A1,1,0,0,0,4.58,5.12Zm6.33,5.72a1,1,0,1,0,1.22-.71A1,1,0,0,0,10.91,10.84ZM13,14.51A1,1,0,1,0,15,15,1,1,0,0,0,13,14.51Z"
fill={calcFill({ fill, disabled, light, colors })}
/>
</svg>
)}
</Rotate>
)}
</Colors>
);

View File

@ -1,22 +1,13 @@
import React from 'react'; import React from 'react';
import forceArray from 'force-array';
import find from 'lodash.find';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import titleCase from 'title-case'; import titleCase from 'title-case';
import moment from 'moment'; import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import InstanceListActions from '@components/instances/footer';
import { KeyValue } from '@components/instances'; import { KeyValue } from '@components/instances';
import ReduxForm from 'declarative-redux-form';
import { Margin } from 'styled-components-spacing';
import { import {
FormGroup, FormGroup,
ViewContainer,
StatusLoader, StatusLoader,
Message,
MessageTitle,
MessageDescription,
Table, Table,
TableThead, TableThead,
TableTr, TableTr,
@ -67,10 +58,10 @@ export const Item = ({
{titleCase(state)} {titleCase(state)}
</TableTd>, </TableTd>,
<TableTd xs="0" sm="160" middle left> <TableTd xs="0" sm="160" middle left>
{moment.unix(created).fromNow()} {distanceInWordsToNow(created)}
</TableTd>, </TableTd>,
<TableTd xs="0" sm="160" middle left> <TableTd xs="0" sm="160" middle left>
{moment.unix(updated).fromNow()} {distanceInWordsToNow(updated)}
</TableTd>, </TableTd>,
<PopoverContainer clickable> <PopoverContainer clickable>
<TableTd padding="0" hasBorder="left"> <TableTd padding="0" hasBorder="left">

View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import moment from 'moment';
import forceArray from 'force-array'; import forceArray from 'force-array';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { reduxForm, stopSubmit, startSubmit, change, reset } from 'redux-form'; import { stopSubmit, startSubmit, change, reset } from 'redux-form';
import { compose, graphql } from 'react-apollo'; import { compose, graphql } from 'react-apollo';
import find from 'lodash.find'; import find from 'lodash.find';
import get from 'lodash.get'; import get from 'lodash.get';
@ -166,13 +165,7 @@ export default compose(
const { name } = variables; const { name } = variables;
const instance = find(get(rest, 'machines', []), ['name', name]); const instance = find(get(rest, 'machines', []), ['name', name]);
const snapshots = get(instance, 'snapshots', []).map( const snapshots = get(instance, 'snapshots', []);
({ created, updated, ...rest }) => ({
...rest,
created: moment.utc(created).unix(),
updated: moment.utc(updated).unix()
})
);
const index = GenIndex( const index = GenIndex(
snapshots.map(({ name, ...rest }) => ({ ...rest, id: name })) snapshots.map(({ name, ...rest }) => ({ ...rest, id: name }))
@ -247,16 +240,7 @@ export default compose(
}; };
}, },
(dispatch, ownProps) => { (dispatch, ownProps) => {
const { const { instance, createSnapshot, refetch } = ownProps;
create,
start,
remove,
instance,
history,
match,
createSnapshot,
refetch
} = ownProps;
return { return {
handleSortBy: (newSortBy, sortOrder) => { handleSortBy: (newSortBy, sortOrder) => {
@ -396,7 +380,7 @@ export default compose(
}; };
}, },
(stateProps, dispatchProps, ownProps) => { (stateProps, dispatchProps, ownProps) => {
const { selected, snapshots, sortBy, sortOrder } = stateProps; const { selected, snapshots } = stateProps;
const { toggleSelectAll } = dispatchProps; const { toggleSelectAll } = dispatchProps;
return { return {

View File

@ -1,6 +1,8 @@
### How was the Joyent UI Toolkit built? ### How was the Joyent UI Toolkit built?
The toolkit components were built using The style guide was built with the amazing open source project [React Styleguidist](https://react-styleguidist.js.org).
The components were built using
[React](https://facebook.github.io/react/) and [React](https://facebook.github.io/react/) and
[Styled Components](http://styled-components.com). [Styled Components](http://styled-components.com).

View File

@ -40,7 +40,10 @@ const {
Stop, Stop,
Tags, Tags,
Triton, Triton,
User User,
Name,
Randomize,
Fabric
} = require('.'); } = require('.');
<List> <List>
@ -158,6 +161,12 @@ const {
</Icon> </Icon>
<Label>Edit</Label> <Label>Edit</Label>
</ListItem> </ListItem>
<ListItem>
<Icon>
<Fabric />
</Icon>
<Label>Fabric</Label>
</ListItem>
<ListItem> <ListItem>
<Icon> <Icon>
<Health /> <Health />
@ -212,12 +221,24 @@ const {
</Icon> </Icon>
<Label>Minus</Label> <Label>Minus</Label>
</ListItem> </ListItem>
<ListItem>
<Icon>
<Name />
</Icon>
<Label>Name</Label>
</ListItem>
<ListItem> <ListItem>
<Icon> <Icon>
<Plus /> <Plus />
</Icon> </Icon>
<Label>Plus</Label> <Label>Plus</Label>
</ListItem> </ListItem>
<ListItem>
<Icon>
<Randomize />
</Icon>
<Label>Randomize</Label>
</ListItem>
<ListItem> <ListItem>
<Icon> <Icon>
<Reset /> <Reset />
@ -256,3 +277,4 @@ const {
</ListItem> </ListItem>
</List>; </List>;
``` ```

View File

@ -35,9 +35,15 @@ import {
Stop as BaseStop, Stop as BaseStop,
Tags as BaseTags, Tags as BaseTags,
Triton as BaseTriton, Triton as BaseTriton,
User as BaseUser User as BaseUser,
Fabric as BaseFabric,
Name as BaseName,
Randomize as BaseRandomize
} from 'joyent-icons'; } from 'joyent-icons';
export const Fabric = Baseline(BaseFabric);
export const Name = Baseline(BaseName);
export const Randomize = Baseline(BaseRandomize);
export const Actions = Baseline(BaseActions); export const Actions = Baseline(BaseActions);
export const Affinity = Baseline(BaseAffinity); export const Affinity = Baseline(BaseAffinity);
export const Arrow = Baseline(BaseArrow); export const Arrow = Baseline(BaseArrow);