feat(ui-toolkit): embed arrow icon in table (#916)

packages/my-joy-beta/src/components/instances/list.js

@@ -35,7 +35,6 @@ import {
   StopIcon,
   ResetIcon,
   DeleteIcon,
-  ArrowIcon,
   ActionsIcon
 } from 'joyent-ui-toolkit';
 
@@ -266,7 +265,7 @@ export const Item = ({
     <TableTd xs="0" sm="160" middle left>
       {distanceInWordsToNow(created)}
     </TableTd>
-    <TableTd xs="0" sm="110" middle left>
+    <TableTd xs="0" sm="130" middle left>
       <code>{id.substring(0, 7)}</code>
     </TableTd>
     <PopoverContainer clickable>
@@ -331,65 +330,50 @@ export default ({
               />
             </FormGroup>
           </TableTh>
-          <TableTh onClick={() => onSortBy('name')} left middle actionable>
+          <TableTh
+            onClick={() => onSortBy('name')}
+            sortOrder={sortOrder}
+            showSort={sortBy === 'name'}
+            left
+            middle
+            actionable
+          >
             <span>Name </span>
-            {sortBy !== 'name' ? null : (
-              <ArrowIcon
-                marginLeft={remcalc(9)}
-                marginBottom={remcalc(2)}
-                direction={sortOrder === 'asc' ? 'down' : 'up'}
-              />
-            )}
           </TableTh>
           <TableTh
             xs="150"
             onClick={() => onSortBy('state')}
+            sortOrder={sortOrder}
+            showSort={sortBy === 'state'}
             left
             middle
             actionable
           >
             <span>Status </span>
-            {sortBy !== 'state' ? null : (
-              <ArrowIcon
-                marginLeft={remcalc(9)}
-                marginBottom={remcalc(2)}
-                direction={sortOrder === 'asc' ? 'down' : 'up'}
-              />
-            )}
           </TableTh>
           <TableTh
             xs="0"
             sm="160"
             onClick={() => onSortBy('created')}
+            sortOrder={sortOrder}
+            showSort={sortBy === 'created'}
             left
             middle
             actionable
           >
             <span>Created </span>
-            {sortBy !== 'created' ? null : (
-              <ArrowIcon
-                marginLeft={remcalc(9)}
-                marginBottom={remcalc(2)}
-                direction={sortOrder === 'asc' ? 'down' : 'up'}
-              />
-            )}
           </TableTh>
           <TableTh
             xs="0"
-            sm="110"
+            sm="130"
             onClick={() => onSortBy('id')}
+            sortOrder={sortOrder}
+            showSort={sortBy === 'id'}
             left
             middle
             actionable
           >
             <span>Short ID </span>
-            {sortBy !== 'id' ? null : (
-              <ArrowIcon
-                marginLeft={remcalc(9)}
-                marginBottom={remcalc(2)}
-                direction={sortOrder === 'asc' ? 'down' : 'up'}
-              />
-            )}
           </TableTh>
           <TableTh xs="60" padding="0" />
         </TableTr>

packages/ui-toolkit/package.json

@@ -1,24 +1,31 @@
 {
   "name": "joyent-ui-toolkit",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "MPL-2.0",
   "repository": "github:yldio/joyent-portal",
   "main": "dist/umd/index.js",
   "jsnext:main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "scripts": {
-    "lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint-ci":
-    "lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+      "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint":
+      "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
     "test-ci": "echo 0",
     "test": "echo 0",
     "test:visual": "run-p serve jest",
     "jest": "jest",
     "serve": "http-server styleguide -p 6060 -s",
-    "copy-fonts": "rm -rf dist; mkdir -p dist/es/typography; mkdir -p dist/umd/typography; cp -r src/typography/libre-franklin dist/es/typography; cp -r src/typography/libre-franklin dist/umd/typography",
+    "copy-fonts":
-    "compile-watch:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline --watch",
+      "rm -rf dist; mkdir -p dist/es/typography; mkdir -p dist/umd/typography; cp -r src/typography/libre-franklin dist/es/typography; cp -r src/typography/libre-franklin dist/umd/typography",
-    "compile:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
+    "compile-watch:es":
-    "compile:umd": "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline",
+      "NODE_ENV=development babel src --out-dir dist/es --source-maps inline --watch",
-    "compile-watch:umd": "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline --watch",
+    "compile:es":
+      "NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
+    "compile:umd":
+      "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline",
+    "compile-watch:umd":
+      "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline --watch",
     "compile": "redrun -p compile:*",
     "dev": "redrun copy-fonts && redrun -p compile-watch:*",
     "styleguide:build": "NODE_ENV=production styleguidist build",

packages/ui-toolkit/src/form/textarea.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
 import is from 'styled-is';
-import remcalc from 'remcalc';
 import PropTypes from 'prop-types';
 
 import Baseline from '../baseline';

packages/ui-toolkit/src/table/index.js

@@ -2,12 +2,13 @@ import React from 'react';
 import { Broadcast, Subscriber } from 'joy-react-broadcast';
 import isBoolean from 'lodash.isboolean';
 import styled, { css } from 'styled-components';
-import is, { isNot } from 'styled-is';
+import is from 'styled-is';
 import remcalc from 'remcalc';
 
 import Baseline from '../baseline';
 import { bottomShadow } from '../boxes';
 import * as breakpoints from '../breakpoints';
+import { Arrow as ArrowIcon } from '../icons';
 
 const { styled: query } = breakpoints;
 
@@ -306,9 +307,16 @@ export const Tr = Baseline(({ children, ...rest }) => (
 
 export const Th = Baseline(({ children, ...rest }) => (
   <Propagate {...rest}>
-    {value => (
+    {({ showSort, sortOrder, header, ...value }) => (
-      <BaseTh {...value} name="th">
+      <BaseTh {...value} header={header} name="th">
         {children}
+        {!showSort || !header ? null : (
+          <ArrowIcon
+            marginLeft={remcalc(9)}
+            marginBottom={remcalc(2)}
+            direction={sortOrder === 'asc' ? 'down' : 'up'}
+          />
+        )}
       </BaseTh>
     )}
   </Propagate>

packages/ui-toolkit/src/table/usage.md

@@ -1,43 +1,93 @@
 ```jsx
 const React = require('react');
+const remcalc = require('remcalc');
+const { FormGroup, Checkbox } = require('../form');
 const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
-const { H4 } = require('../text');
+const { Dot, Actions } = require('../icons');
 
 <Table>
   <Thead>
     <Tr>
-      <Th xs="48" />
+      <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
-      <Th>Name</Th>
+        <FormGroup paddingTop={remcalc(4)}>
-      <Th xs="150">Status</Th>
+          <Checkbox />
-      <Th xs="150">Short ID</Th>
+        </FormGroup>
-      <Th xs="48" />
+      </Th>
+      <Th sortOrder="asc" showSort left middle actionable>
+        <span>Name </span>
+      </Th>
+      <Th xs="150" left middle actionable>
+        <span>Status </span>
+      </Th>
+      <Th xs="0" sm="160" left middle actionable>
+        <span>Created </span>
+      </Th>
+      <Th xs="0" sm="130" left middle actionable>
+        <span>Short ID </span>
+      </Th>
+      <Th xs="60" padding="0" />
     </Tr>
   </Thead>
   <Tbody>
-    <Tr actionable>
+    <Tr>
-      <Td border="right" middle center>
+      <Td padding="0" paddingLeft={remcalc(12)} middle left>
-        HB
+        <FormGroup paddingTop={remcalc(4)}>
+          <Checkbox />
+        </FormGroup>
       </Td>
-      <Td>
+      <Td middle left>
-        <H4>percona_high-ram-32_1</H4>
+        <a href="/instances/hello">hello</a>
+      </Td>
+      <Td middle left>
+        <span>
+          <Dot
+            width={remcalc(11)}
+            height={remcalc(11)}
+            borderRadius={remcalc(11)}
+            color="primary"
+          />{' '}
+          Provisioning
+        </span>
+      </Td>
+      <Td xs="0" sm="160" middle left>
+        about 2 months
+      </Td>
+      <Td xs="0" sm="130" middle left>
+        <code>2252839</code>
+      </Td>
+      <Td padding="0" center hasBorder="left">
+        <Actions />
       </Td>
-      <Td>Provisioning</Td>
-      <Td>2252839a</Td>
-      <Td>HB</Td>
     </Tr>
     <Tr>
-      <Td>HB</Td>
+      <Td padding="0" paddingLeft={remcalc(12)} middle left>
-      <Td>percona_high-ram-32_2</Td>
+        <FormGroup paddingTop={remcalc(4)}>
-      <Td>Provisioning</Td>
+          <Checkbox />
-      <Td>2252839b</Td>
+        </FormGroup>
-      <Td xs="48">HB</Td>
+      </Td>
-    </Tr>
+      <Td middle left>
-    <Tr>
+        <a href="/instances/world">world</a>
-      <Td>HB</Td>
+      </Td>
-      <Td>percona_high-ram-32_3</Td>
+      <Td middle left>
-      <Td>Provisioning</Td>
+        <span>
-      <Td>2252839b</Td>
+          <Dot
-      <Td>HB</Td>
+            width={remcalc(11)}
+            height={remcalc(11)}
+            borderRadius={remcalc(11)}
+            color="green"
+          />{' '}
+          Running
+        </span>
+      </Td>
+      <Td xs="0" sm="160" middle left>
+        about 1 hour
+      </Td>
+      <Td xs="0" sm="130" middle left>
+        <code>6739567</code>
+      </Td>
+      <Td padding="0" center hasBorder="left">
+        <Actions />
+      </Td>
     </Tr>
   </Tbody>
 </Table>;