Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

This commit is contained in:
Sérgio Ramos 2017-12-06 10:34:15 +00:00 committed by Sara Vieira
parent cc5bb78dc4
commit 6f226b5d7d
5 changed files with 118 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

23
packages/ui-toolkit/package.json
View File

@ -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": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint-ci":
"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",
"compile-watch:es": "NODE_ENV=development babel src --out-dir dist/es --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",
"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",
"compile-watch:es":
"NODE_ENV=development babel src --out-dir dist/es --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",

2
packages/ui-toolkit/src/form/textarea.js
View File

@ -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';

14
packages/ui-toolkit/src/table/index.js
View File

@ -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 => (
<BaseTh {...value} name="th">
{({ showSort, sortOrder, header, ...value }) => (
<BaseTh {...value} header={header} name="th">
{children}
{!showSort || !header ? null : (
<ArrowIcon
marginLeft={remcalc(9)}
marginBottom={remcalc(2)}
direction={sortOrder === 'asc' ? 'down' : 'up'}
/>
)}
</BaseTh>
)}
</Propagate>

102
packages/ui-toolkit/src/table/usage.md
View File

@ -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>Name</Th>
<Th xs="150">Status</Th>
<Th xs="150">Short ID</Th>
<Th xs="48" />
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}>
<Checkbox />
</FormGroup>
</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>
<Td border="right" middle center>
HB
<Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}>
<Checkbox />
</FormGroup>
</Td>
<Td>
<H4>percona_high-ram-32_1</H4>
<Td middle left>
<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>percona_high-ram-32_2</Td>
<Td>Provisioning</Td>
<Td>2252839b</Td>
<Td xs="48">HB</Td>
</Tr>
<Tr>
<Td>HB</Td>
<Td>percona_high-ram-32_3</Td>
<Td>Provisioning</Td>
<Td>2252839b</Td>
<Td>HB</Td>
<Td padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}>
<Checkbox />
</FormGroup>
</Td>
<Td middle left>
<a href="/instances/world">world</a>
</Td>
<Td middle left>
<span>
<Dot
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>;