feat(icons): add and revise some icons

- Deletes moment as a dependency - Adds two new icons - Credits styleguidist - Fixes console warnings
2018-01-05 16:35:26 +00:00 · 2018-01-05 16:35:26 +00:00 · 8701aaebda
parent 3caaebb0e9
commit 8701aaebda
9 changed files with 160 additions and 35 deletions
--- a/packages/icons/src/fabric.js
+++ b/packages/icons/src/fabric.js
@ -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>
+);
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@ -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';
--- a/packages/icons/src/name.js
+++ b/packages/icons/src/name.js
@ -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>
+);
--- a/packages/icons/src/randomize.js
+++ b/packages/icons/src/randomize.js
@ -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>
+);
--- a/packages/my-joy-beta/src/components/instances/snapshots.js
+++ b/packages/my-joy-beta/src/components/instances/snapshots.js
@ -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">
--- a/packages/my-joy-beta/src/containers/instances/snapshots.js
+++ b/packages/my-joy-beta/src/containers/instances/snapshots.js
@ -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 {
--- a/packages/ui-toolkit/src/faq.md
+++ b/packages/ui-toolkit/src/faq.md
@ -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).

--- a/packages/ui-toolkit/src/icons/functional.md
+++ b/packages/ui-toolkit/src/icons/functional.md
@ -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>;
 ```
+
--- a/packages/ui-toolkit/src/icons/index.js
+++ b/packages/ui-toolkit/src/icons/index.js
@ -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);