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:
parent
3caaebb0e9
commit
8701aaebda
39
packages/icons/src/fabric.js
Normal file
39
packages/icons/src/fabric.js
Normal 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>
|
||||
);
|
@ -33,3 +33,6 @@ export { default as Stop } from './stop';
|
||||
export { default as Tags } from './tags';
|
||||
export { default as Triton } from './triton';
|
||||
export { default as User } from './user';
|
||||
export { default as Randomize } from './randomize';
|
||||
export { default as Name } from './name';
|
||||
export { default as Fabric } from './fabric';
|
||||
|
39
packages/icons/src/name.js
Normal file
39
packages/icons/src/name.js
Normal 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>
|
||||
);
|
39
packages/icons/src/randomize.js
Normal file
39
packages/icons/src/randomize.js
Normal 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>
|
||||
);
|
@ -1,22 +1,13 @@
|
||||
import React from 'react';
|
||||
import forceArray from 'force-array';
|
||||
import find from 'lodash.find';
|
||||
import { Field } from 'redux-form';
|
||||
import titleCase from 'title-case';
|
||||
import moment from 'moment';
|
||||
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
|
||||
import remcalc from 'remcalc';
|
||||
import InstanceListActions from '@components/instances/footer';
|
||||
import { KeyValue } from '@components/instances';
|
||||
import ReduxForm from 'declarative-redux-form';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
|
||||
import {
|
||||
FormGroup,
|
||||
ViewContainer,
|
||||
StatusLoader,
|
||||
Message,
|
||||
MessageTitle,
|
||||
MessageDescription,
|
||||
Table,
|
||||
TableThead,
|
||||
TableTr,
|
||||
@ -67,10 +58,10 @@ export const Item = ({
|
||||
{titleCase(state)}
|
||||
</TableTd>,
|
||||
<TableTd xs="0" sm="160" middle left>
|
||||
{moment.unix(created).fromNow()}
|
||||
{distanceInWordsToNow(created)}
|
||||
</TableTd>,
|
||||
<TableTd xs="0" sm="160" middle left>
|
||||
{moment.unix(updated).fromNow()}
|
||||
{distanceInWordsToNow(updated)}
|
||||
</TableTd>,
|
||||
<PopoverContainer clickable>
|
||||
<TableTd padding="0" hasBorder="left">
|
||||
|
@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import forceArray from 'force-array';
|
||||
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 find from 'lodash.find';
|
||||
import get from 'lodash.get';
|
||||
@ -166,13 +165,7 @@ export default compose(
|
||||
const { name } = variables;
|
||||
const instance = find(get(rest, 'machines', []), ['name', name]);
|
||||
|
||||
const snapshots = get(instance, 'snapshots', []).map(
|
||||
({ created, updated, ...rest }) => ({
|
||||
...rest,
|
||||
created: moment.utc(created).unix(),
|
||||
updated: moment.utc(updated).unix()
|
||||
})
|
||||
);
|
||||
const snapshots = get(instance, 'snapshots', []);
|
||||
|
||||
const index = GenIndex(
|
||||
snapshots.map(({ name, ...rest }) => ({ ...rest, id: name }))
|
||||
@ -247,16 +240,7 @@ export default compose(
|
||||
};
|
||||
},
|
||||
(dispatch, ownProps) => {
|
||||
const {
|
||||
create,
|
||||
start,
|
||||
remove,
|
||||
instance,
|
||||
history,
|
||||
match,
|
||||
createSnapshot,
|
||||
refetch
|
||||
} = ownProps;
|
||||
const { instance, createSnapshot, refetch } = ownProps;
|
||||
|
||||
return {
|
||||
handleSortBy: (newSortBy, sortOrder) => {
|
||||
@ -396,7 +380,7 @@ export default compose(
|
||||
};
|
||||
},
|
||||
(stateProps, dispatchProps, ownProps) => {
|
||||
const { selected, snapshots, sortBy, sortOrder } = stateProps;
|
||||
const { selected, snapshots } = stateProps;
|
||||
const { toggleSelectAll } = dispatchProps;
|
||||
|
||||
return {
|
||||
|
@ -1,6 +1,8 @@
|
||||
### 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
|
||||
[Styled Components](http://styled-components.com).
|
||||
|
||||
|
@ -40,7 +40,10 @@ const {
|
||||
Stop,
|
||||
Tags,
|
||||
Triton,
|
||||
User
|
||||
User,
|
||||
Name,
|
||||
Randomize,
|
||||
Fabric
|
||||
} = require('.');
|
||||
|
||||
<List>
|
||||
@ -158,6 +161,12 @@ const {
|
||||
</Icon>
|
||||
<Label>Edit</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Fabric />
|
||||
</Icon>
|
||||
<Label>Fabric</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Health />
|
||||
@ -212,12 +221,24 @@ const {
|
||||
</Icon>
|
||||
<Label>Minus</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Name />
|
||||
</Icon>
|
||||
<Label>Name</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Plus />
|
||||
</Icon>
|
||||
<Label>Plus</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Randomize />
|
||||
</Icon>
|
||||
<Label>Randomize</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Reset />
|
||||
@ -256,3 +277,4 @@ const {
|
||||
</ListItem>
|
||||
</List>;
|
||||
```
|
||||
|
||||
|
@ -35,9 +35,15 @@ import {
|
||||
Stop as BaseStop,
|
||||
Tags as BaseTags,
|
||||
Triton as BaseTriton,
|
||||
User as BaseUser
|
||||
User as BaseUser,
|
||||
Fabric as BaseFabric,
|
||||
Name as BaseName,
|
||||
Randomize as BaseRandomize
|
||||
} 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 Affinity = Baseline(BaseAffinity);
|
||||
export const Arrow = Baseline(BaseArrow);
|
||||
|
Loading…
Reference in New Issue
Block a user