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

fix(ui-toolkit): fix cards implementation

Browse Source
This commit is contained in:
Sara Vieira 2017-10-09 14:35:52 +01:00 committed by Sérgio Ramos
parent 8097d2f5ba
commit cf2fb5e645
58 changed files with 1797 additions and 821 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,8 +10,11 @@
"lint:css": "echo 0",
"lint:js": "eslint . --fix",
"lint": "redrun -s lint:*",
"test": "echo 0",
"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",
@ -27,6 +30,7 @@
"babel-cli": "^6.26.0",
"babel-generator": "^6.26.0",
"babel-helpers": "^6.24.1",
"babel-loader": "^7.1.2",
"babel-plugin-inline-react-svg": "^0.4.0",
"babel-plugin-styled-components": "^1.1.7",
"babel-preset-joyent-portal": "^3.0.1",
@ -35,6 +39,7 @@
"cross-env": "^5.0.5",
"d3": "^4.10.0",
"disable-scroll": "^0.3.0",
"file-loader": "^1.1.5",
"fontfaceobserver": "^2.0.13",
"joyent-manifest-editor": "^1.3.0",
"lodash.difference": "^4.5.0",
@ -56,20 +61,33 @@
"remcalc": "^1.0.8",
"rnd-id": "^1.0.8",
"styled-components": "^2.1.2",
"styled-is": "^1.0.14",
"unitcalc": "^1.1.0"
"styled-is": "^1.0.15",
"svg-inline-loader": "^0.8.0",
"unitcalc": "^1.1.0",
"url-loader": "^0.6.2"
},
"devDependencies": {
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
"babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"chart.js": "^2.7.0",
"css-loader": "^0.28.7",
"csso": "^3.1.1",
"eslint": "^4.5.0",
"eslint-config-joyent-portal": "2.0.0",
"file-loader": "^1.1.5",
"http-server": "^0.10.0",
"jest": "^20.0.4",
"jest-diff": "^20.0.3",
"jest-image-snapshot": "^1.0.0",
"jest-matcher-utils": "^20.0.3",
"jest-snapshot": "^20.0.3",
"jest-styled-components": "^4.4.1",
"jsesc": "^2.5.1",
"navalia": "^1.2.0",
"npm-run-all": "^4.1.1",
"react": "^15.6.1",
"react-docgen": "^2.17.0",
"react-docgen-displayname-handler": "^1.0.0",
@ -81,12 +99,16 @@
"react-test-renderer": "^15.6.1",
"redux": "^3.7.2",
"redux-form": "^7.0.3",
"serve-static": "^1.13.1",
"snapguidist": "^2.0.0",
"style-loader": "^0.19.0",
"stylelint": "^8.1.1",
"stylelint-config-joyent-portal": "^2.0.0",
"svg-inline-loader": "^0.8.0",
"svgo": "^0.7.2",
"tinycolor2": "^1.4.1",
"title-case": "^2.1.1",
"url-loader": "^0.6.2",
"webpack": "^3.5.5"
},
"peerDependencies": {

8
packages/ui-toolkit/src/card/card.js
View File

@ -49,7 +49,9 @@ const StyledCard = Row.extend`
`};
${is('icon')`
background: url(${props => props.icon}) no-repeat scroll ${remcalc(7)} ${remcalc(7)};
background: url(${props => props.icon}) no-repeat scroll ${remcalc(
7
)} ${remcalc(7)};
padding-left: ${remcalc(30)};
`};
@ -74,6 +76,10 @@ const StyledCard = Row.extend`
${paperEffect}
`};
${is('disabled')`
background-color: ${props => props.theme.disabled};
`};
${isNot('active')`
background-color: ${props => props.theme.disabled};
`};

20
packages/ui-toolkit/src/card/description.js
View File

@ -1,7 +1,7 @@
import { Subscriber } from 'react-broadcast';
import Baseline from '../baseline';
import typography from '../typography';
import { isNot } from 'styled-is';
import is, { isNot } from 'styled-is';
import remcalc from 'remcalc';
import styled from 'styled-components';
import PropTypes from 'prop-types';
@ -17,12 +17,26 @@ const StyledTitle = Title.extend`
${isNot('collapsed')`
padding-bottom: ${remcalc(12)};
`};
${is('disabled')`
color: ${props => props.theme.text};
`};
`;
const InnerDescription = styled.div`
justify-content: flex-start;
display: flex;
align-items: center;
height: 100%;
position: relative;
span {
display: flex;
flex-direction: column;
height: 100%;
align-items: flex-start;
justify-content: space-between;
}
`;
const Description = ({ children, ...rest }) => {
@ -33,7 +47,9 @@ const Description = ({ children, ...rest }) => {
xs={collapsed ? 6 : 12}
{...rest}
>
<InnerDescription collapsed={collapsed}>{children}</InnerDescription>
<InnerDescription collapsed={collapsed}>
<span>{children}</span>
</InnerDescription>
</StyledTitle>
);

5
packages/ui-toolkit/src/card/header.js
View File

@ -2,12 +2,11 @@ import React from 'react';
import { Broadcast, Subscriber } from 'react-broadcast';
import remcalc from 'remcalc';
import PropTypes from 'prop-types';
import { isNot } from 'styled-is';
import is from 'styled-is';
import Baseline from '../baseline';
import Card from './card';
const StyledCard = Card.extend`
position: absolute;
flex-direction: row;
background-color: ${props => props.theme.primary};
@ -17,7 +16,7 @@ const StyledCard = Card.extend`
width: calc(100% + ${remcalc(2)});
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
${isNot('active')`
${is('disabled')`
background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.grey};
`};

1
packages/ui-toolkit/src/card/index.js
View File

@ -11,3 +11,4 @@ export { default as CardAction } from './action.js';
export { default as CardView } from './view.js';
export { default as CardFooter } from './footer.js';
export { default as CardLabel } from './label.js';
export { default as CardInfo } from './info.js';

59
packages/ui-toolkit/src/card/info.js Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import remcalc from 'remcalc';
import Label from '../label';
const StyledLabel = Label.extend`
display: inline-block;
${props => (props.color === 'light' ? `color: ${props.theme.white};` : '')};
${props => (props.color === 'disabled' ? `color: ${props.theme.text};` : '')};
margin-left: ${props => (props.iconPosition === 'left' ? remcalc(12) : 0)};
`;
const StyledIconContainer = styled.div`
display: flex;
> svg {
${props => (props.color === 'light' ? `fill: ${props.theme.white};` : '')};
${props =>
props.color === 'disabled' ? `fill: ${props.theme.text};` : ''};
}
`;
const CardInfoContainer = styled.div`
height: 100%;
float: right;
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row;
`;
const CardInfo = ({
label,
icon,
iconPosition = 'left',
color = 'light',
onMouseOver,
onMouseOut
}) => {
return (
<CardInfoContainer onMouseOver={onMouseOver} onMouseOut={onMouseOver}>
<StyledIconContainer iconPosition={iconPosition} color={color}>
{icon}
</StyledIconContainer>
<StyledLabel iconPosition={iconPosition} color={color}>
{label}
</StyledLabel>
</CardInfoContainer>
);
};
CardInfo.propTypes = {
label: PropTypes.string.isRequired,
icon: PropTypes.node.isRequired,
iconPosition: PropTypes.string,
color: PropTypes.oneOf(['dark', 'light', 'disabled'])
};
export default CardInfo;

221
packages/ui-toolkit/src/card/metrics.json Normal file
View File

@ -0,0 +1,221 @@
[{
"instance": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
"name": "AVG_MEM_BYTES",
"start": "2017-10-05T13:12:13Z",
"end": "2017-10-05T13:13:58Z",
"metrics": [
{
"time": "2017-10-05T13:12:28Z",
"value": 97595392,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:12:43Z",
"value": 94142464,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:12:58Z",
"value": 63918080,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:13Z",
"value": 94023680,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:28Z",
"value": 99467264,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:43Z",
"value": 99737600,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:58Z",
"value": 86839296,
"__typename": "Metric"
}
],
"__typename": "InstanceMetric"
},
{
"instance": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
"name": "AVG_MEM_BYTES",
"start": "2017-10-05T13:12:13Z",
"end": "2017-10-05T13:13:58Z",
"metrics": [
{
"time": "2017-10-05T13:12:28Z",
"value": 99844096,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:12:43Z",
"value": 93655040,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:12:58Z",
"value": 64172032,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:13Z",
"value": 100237312,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:28Z",
"value": 99844096,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:43Z",
"value": 88035328,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:58Z",
"value": 100237312,
"__typename": "Metric"
}
],
"__typename": "InstanceMetric"
},
{
"instance": "2ea99763-3b44-4179-8393-d66d94961051",
"name": "AVG_MEM_BYTES",
"start": "2017-10-05T13:12:13Z",
"end": "2017-10-05T13:13:58Z",
"metrics": [
{
"time": "2017-10-05T13:12:28Z",
"value": 98512896,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:12:43Z",
"value": 98258944,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:12:58Z",
"value": 91385856,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:13Z",
"value": 50900992,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:28Z",
"value": 98512896,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:43Z",
"value": 98033664,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:58Z",
"value": 80048128,
"__typename": "Metric"
}
],
"__typename": "InstanceMetric"
},
{
"instance": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
"name": "AVG_MEM_BYTES",
"start": "2017-10-05T13:12:13Z",
"end": "2017-10-05T13:13:58Z",
"metrics": [
{
"time": "2017-10-05T13:12:28Z",
"value": 95563776,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:12:43Z",
"value": 48996352,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:12:58Z",
"value": 89772032,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:13Z",
"value": 83755008,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:28Z",
"value": 101920768,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:43Z",
"value": 95576064,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:58Z",
"value": 101699584,
"__typename": "Metric"
}
],
"__typename": "InstanceMetric"
},
{
"instance": "8be01042-0281-4a77-a357-25979e87bf3d",
"name": "AVG_MEM_BYTES",
"start": "2017-10-05T13:12:13Z",
"end": "2017-10-05T13:13:58Z",
"metrics": [
{
"time": "2017-10-05T13:12:28Z",
"value": 101732352,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:12:43Z",
"value": 101732352,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:12:58Z",
"value": 94240768,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:13Z",
"value": 102371328,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:28Z",
"value": 61218816,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:43Z",
"value": 102371328,
"__typename": "Metric"
},
{
"time": "2017-10-05T13:13:58Z",
"value": 100716544,
"__typename": "Metric"
}
],
"__typename": "InstanceMetric"
}
]

41
packages/ui-toolkit/src/card/options.js
View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
import { Nav } from 'normalized-styled-components';
import Baseline from '../baseline';
import remcalc from 'remcalc';
import is, { isNot } from 'styled-is';
import is, { isOr, isNot } from 'styled-is';
import PropTypes from 'prop-types';
import Button from '../button';
import React from 'react';
@ -13,12 +13,13 @@ const StyledNav = Nav.extend`
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
box-sizing: border-box;
${is('fromHeader')`
border-left-color: ${props => props.theme.primaryDesaturatedActive};
${isOr('disabled', 'active')`
border-left-color: ${props => props.theme.grey};
`};
${isNot('active')`
border-left-color: ${props => props.theme.grey};
${is('fromHeader') &&
isNot('disabled')`
border-left-color: ${props => props.theme.primaryDesaturatedActive};
`};
`;
@ -55,7 +56,7 @@ const StyledButton = Button.extend`
border-width: 0;
}
${isNot('active')`
${is('disabled')`
background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.grey};
@ -66,6 +67,8 @@ const StyledButton = Button.extend`
&:active:focus {
background-color: ${props => props.theme.grey};
}
`};
`;
@ -86,13 +89,17 @@ const StyledCircle = styled.div`
background-color: ${props => props.theme.secondary};
`};
${isNot('active')`
${is('disabled')`
background-color: ${props => props.theme.text};
`};
`;
const Options = ({ children, ...rest }) => {
const render = ({ fromHeader = false, collapsed = false, active = true }) => (
const render = ({
fromHeader = false,
collapsed = false,
active = true
}) => (
<StyledNav active={active} fromHeader={fromHeader} name="card-options">
<StyledButton
secondary={!fromHeader}
@ -102,9 +109,21 @@ const Options = ({ children, ...rest }) => {
{...rest}
>
<StyledContainer>
<StyledCircle active={active} secondary={!fromHeader} />
<StyledCircle active={active} secondary={!fromHeader} />
<StyledCircle active={active} secondary={!fromHeader} />
<StyledCircle
{...rest}
active={active}
secondary={!fromHeader}
/>
<StyledCircle
{...rest}
active={active}
secondary={!fromHeader}
/>
<StyledCircle
{...rest}
active={active}
secondary={!fromHeader}
/>
</StyledContainer>
</StyledButton>
</StyledNav>

4
packages/ui-toolkit/src/card/subtitle.js
View File

@ -23,6 +23,10 @@ const Span = styled.span`
display: flex;
`};
${is('disabled')`
color: ${props => props.theme.text};
`};
${is('fromHeader')`
color: ${props => props.theme.white};
`};

11
packages/ui-toolkit/src/card/title.js
View File

@ -19,9 +19,9 @@ const Container = styled.div`
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-grow: 2;
flex-grow: 4;
flex-basis: ${remcalc(90)};
width: 100%;
@ -33,13 +33,14 @@ const Container = styled.div`
`};
${is('collapsed')`
flex-grow: 6;
flex-direction: column;
width: auto;
justify-content: center;
padding: 0 ${remcalc(18)};
`};
${is('disabled')`
color: ${props => props.theme.text};
`};
${is('selected')`
color: ${props => props.theme.blue};
`};

700
packages/ui-toolkit/src/card/usage.md
View File

@ -1,4 +1,6 @@
```
#### Card > Headed > Collapsed
```jsx
const {
CardDescription,
CardHeader,
@ -8,52 +10,457 @@ const {
CardSubTitle,
CardTitle,
CardView,
CardGroupView
CardInfo
} = require('./');
const { InstancesIconLight } = require('../icons');
<Card collapsed headed>
<CardHeader>
<CardMeta>
<CardTitle>Nginx</CardTitle>
<CardDescription>
<CardInfo
icon={<InstancesIconLight />}
iconPosition="left"
label="4 of 4 instances"
/>
</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
</Card>
```
#### Card > Headed
```jsx
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardInfo
} = require('./');
const { InstancesIconLight, HealthyIcon } = require('../icons');
<Card headed>
<CardHeader>
<CardMeta>
<CardTitle>Nginx</CardTitle>
<CardDescription>
<CardInfo
icon={<InstancesIconLight />}
iconPosition="left"
label="4 of 4 instances"
/>
</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardView>
<CardDescription>
<CardInfo
icon={<HealthyIcon healthy="HEALTHY"/>}
iconPosition="left"
label="Healthy"
color="dark"
/>
</CardDescription>
</CardView>
</Card>
```
#### Card > Single state
```jsx
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardInfo
} = require('./');
const { InstancesIconLight, HealthyIcon } = require('../icons');
<Card headed>
<CardHeader>
<CardMeta>
<CardTitle>Nginx</CardTitle>
<CardDescription>
<CardInfo
icon={<InstancesIconLight />}
iconPosition="left"
label="4 of 4 instances"
/>
</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardView>
<CardDescription>
1 instance paused <br/>
1 instances stopped <br/>
1 instance not responding <br/>
</CardDescription>
</CardView>
</Card>
```
#### Card > Metrics
```jsx
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardInfo
} = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid');
const metrics = require('./metrics.json');
const { InstancesIconLight, HealthyIcon } = require('../icons');
<Card headed>
<CardHeader>
<CardMeta>
<CardTitle>Nginx</CardTitle>
<CardDescription>
<CardInfo
icon={<InstancesIconLight />}
iconPosition="left"
label="4 of 4 instances"
/>
</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardView>
<CardDescription>
<span>Scaling from 1 to 4: finished</span>
<CardInfo
icon={<HealthyIcon />}
iconPosition="left"
label="Healthy"
color="dark"
/>
</CardDescription>
<CardDescription>
<Row>
<GraphContainer xs={4}>
<GraphTitle>Memory usage</GraphTitle>
<MetricGraph
metricsData={metrics}
graphDurationSeconds={90}
/>
</GraphContainer>
<GraphContainer xs={4}>
<GraphTitle>CPU usage</GraphTitle>
<MetricGraph
metricsData={metrics}
graphDurationSeconds={90}
/>
</GraphContainer>
<GraphContainer xs={4}>
<GraphTitle>CPU wait time</GraphTitle>
<MetricGraph
metricsData={metrics}
graphDurationSeconds={90}
/>
</GraphContainer>
</Row>
</CardDescription>
</CardView>
</Card>
```
#### Card > Provisioning
```jsx
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardInfo
} = require('./');
const StatusLoader = require('../status-loader').default;
const { InstancesIconLight, HealthyIcon } = require('../icons');
<Card collapsed headed disabled>
<CardHeader disabled>
<CardMeta>
<CardTitle disabled>
<span>Nginx</span>
<StatusLoader inline row msg="Provisioning"/>
</CardTitle>
</CardMeta>
<CardOptions disabled/>
</CardHeader>
</Card>
```
```jsx
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardInfo
} = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const StatusLoader = require('../status-loader').default;
const { InstancesIconLight, HealthyIcon } = require('../icons');
<Card headed>
<CardHeader>
<CardMeta>
<CardTitle>Nginx</CardTitle>
<CardDescription>
<CardInfo
icon={<InstancesIconLight />}
iconPosition="left"
label="4 of 4 instances"
/>
</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardView>
<CardDescription>
<StatusLoader row msg="Provisioning 3 instances"/>
<br/>
<br/>
<br/>
<CardInfo
icon={<HealthyIcon />}
iconPosition="left"
label="Healthy"
color="dark"
/>
</CardDescription>
</CardView>
</Card>
```
#### Card > Disabled
```jsx
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardInfo
} = require('./');
const { InstancesIcon, HealthyIcon } = require('../icons');
const StatusLoader = require('../status-loader').default;
<Card headed disabled>
<CardHeader disabled>
<CardMeta>
<CardTitle disabled>Nginx</CardTitle>
<CardDescription disabled>
<CardInfo
icon={<InstancesIcon />}
iconPosition="left"
label="4 of 4 instances"
color="dark"
/>
</CardDescription>
</CardMeta>
<CardOptions disabled/>
</CardHeader>
<CardView>
<CardDescription>
<StatusLoader row msg="Provisioning 3 instances"/>
</CardDescription>
</CardView>
</Card>
```
#### Card > Instance
```jsx
const {
CardDescription,
CardOutlet,
CardTitle,
CardView,
CardInfo
} = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid');
const metrics = require('./metrics.json');
const { InstancesIconLight, HealthyIcon } = require('../icons');
<Card>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
<CardDescription>
<b>percona_primary</b>
<CardInfo
icon={<HealthyIcon />}
iconPosition="left"
label="Healthy"
color="dark"
/>
</CardDescription>
</CardView>
<CardOptions />
</Card>
```
#### `collapsed`
#### Card > Instance > Stacked
```
```jsx
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardGroupView
CardInfo
} = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid');
const { InstancesIconLight, HealthyIcon } = require('../icons');
<Card stacked>
<CardView>
<CardDescription>
<b>percona_primary</b>
<span>4 instances</span>
<CardInfo
icon={<HealthyIcon />}
iconPosition="left"
label="Healthy"
color="dark"
/>
</CardDescription>
</CardView>
</Card>
```
#### Card > Instance > Group
```jsx
const {
CardDescription,
CardOutlet,
CardTitle,
CardView,
CardInfo
} = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid');
const { InstancesIconLight, HealthyIcon } = require('../icons');
<div>
<Card>
<CardView>
<CardDescription>
<b>percona_primary</b>
<CardInfo
icon={<HealthyIcon />}
iconPosition="left"
label="Healthy"
color="dark"
/>
</CardDescription>
</CardView>
</Card>
<Card>
<CardView>
<CardDescription>
<b>percona_primary</b>
<CardInfo
icon={<HealthyIcon />}
iconPosition="left"
label="Healthy"
color="dark"
/>
</CardDescription>
</CardView>
</Card>
<Card stacked>
<CardView>
<CardDescription>
<b>percona_primary</b>
<span>4 instances</span>
<CardInfo
icon={<HealthyIcon />}
iconPosition="left"
label="Healthy"
color="dark"
/>
</CardDescription>
</CardView>
</Card>
</div>
```
#### Card > Instance > List
```jsx
const {
Card,
CardInfo,
CardView,
CardTitle,
CardDescription,
CardOptions
} = require('./');
const { HealthyIcon, DataCenterIcon } = require('../icons');
<Card collapsed>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
<CardTitle>WordPress_01</CardTitle>
<CardDescription>
<CardInfo
icon={<HealthyIcon healthy="HEALTHY"/>}
iconPosition="left"
label="Healthy"
color="dark"
/>
</CardDescription>
<CardDescription>
<CardInfo
icon={<DataCenterIcon />}
iconPosition="left"
label="eu-ams-1"
color="dark"
/>
</CardDescription>
<CardOptions />
</CardView>
<CardOptions />
</Card>
```
#### `transparent`
```
#### Card > Secondary
```jsx
const {
CardDescription,
CardHeader,
@ -82,7 +489,9 @@ const {
</Card>
```
```
#### Card > Secondary > Active
```jsx
const {
CardDescription,
CardHeader,
@ -110,242 +519,3 @@ const {
</CardView>
</Card>
```
#### `headed`
```
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardGroupView
} = require('./');
<Card headed>
<CardHeader>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardView>
<CardMeta>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
```
#### `headed` and `collapsed`
```
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardGroupView
} = require('./');
<Card collapsed headed>
<CardHeader>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardView>
<CardMeta>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
```
#### `stacked`
```
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardGroupView
} = require('./');
<Card stacked>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
<CardOptions />
</Card>
```
#### group
```
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardGroupView
} = require('./');
<Card headed>
<CardHeader>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardGroupView>
<Card flat>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
<Card flat>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
<Card flat stacked>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
</CardGroupView>
</Card>
```
#### `disabled`
```
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardGroupView
} = require('./');
<Card headed disabled>
<CardHeader>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardView>
<CardMeta>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
```
#### group and `disabled`
```
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardGroupView
} = require('./');
<Card headed disabled>
<CardHeader>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardGroupView>
<Card flat disabled>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
<Card flat disabled>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
<Card flat stacked disabled>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
</CardGroupView>
</Card>
```

7
packages/ui-toolkit/src/form/checkbox.js
View File

@ -4,11 +4,18 @@ import BaseInput from './base/input';
import BaseToggle from './base/toggle';
import Baseline from '../baseline';
import React from 'react';
import remcalc from 'remcalc';
const Li = styled.li`
list-style-type: none;
display: flex;
align-items: center;
${typography.fontFamily};
${typography.normal};
label {
font-weight: 400;
}
`;
const Ul = styled.ul`

6
packages/ui-toolkit/src/form/radio.js
View File

@ -8,6 +8,12 @@ import React from 'react';
const Li = styled.li`
list-style-type: none;
${typography.normal};
display: flex;
align-items: center;
label {
font-weight: 400;
}
`;
const Ul = styled.ul`

38
packages/ui-toolkit/src/form/select.js
View File

@ -1,10 +1,42 @@
import Baseline from '../baseline';
import BaseInput, { Stylable } from './base/input';
import styled from 'styled-components';
import React from 'react';
import remcalc from 'remcalc';
import Baseline from '../baseline';
import { isNot } from 'styled-is';
import BaseInput, { Stylable } from './base/input';
const Select = Baseline(BaseInput(Stylable('select')));
const SelectWrapper = styled.div`
position: relative;
display: inline-flex;
${isNot('fluid')`
min-width: ${remcalc(200)};
`};
&:after {
content: '';
width: ${remcalc(10)};
height: ${remcalc(10)};
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDo
vL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIG
Q9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpb
Gw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==')
center center no-repeat;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: ${remcalc(12)};
}
`;
/**
* @example ./usage-select.md
*/
export default ({ children, ...rest }) => <Select {...rest}>{children}</Select>;
export default ({ children, fluid, ...rest }) => (
<SelectWrapper fluid={fluid}>
<Select {...rest}>{children}</Select>
</SelectWrapper>
);

208
packages/ui-toolkit/src/form/usage-checkbox.md
View File

@ -3,48 +3,22 @@ const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Checkbox />
<Label>Check this out!</Label>
<Checkbox checked>
<Label>Detailed explanations</Label>
</Checkbox>
<Checkbox checked>
<Label>Tips and tricks</Label>
</Checkbox>
<Checkbox>
<Label>Hints</Label>
</Checkbox>
<Checkbox disabled>
<Label>How to</Label>
</Checkbox>
</FormGroup>
```
#### `checked`
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Checkbox checked />
<Label>Check this out!</Label>
</FormGroup>
```
#### `disabled`
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Checkbox disabled />
<Label>Check this out!</Label>
</FormGroup>
```
#### label before
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Check this out!</Label>
<Checkbox />
</FormGroup>
```
#### warning
#### Checkbox input validation
```
const FormMeta = require('./meta').default;
@ -52,155 +26,29 @@ const FormGroup = require('./group').default;
const Label = require('./label').default;
<div>
<FormGroup meta={{warning: 'Unexpected meta warning!'}}>
<Checkbox />
<Label>Check this out!</Label>
<FormMeta left />
</FormGroup>
<FormGroup warning='Unexpected group warning!'>
<Checkbox />
<Label>Check this out!</Label>
<FormMeta left />
<FormGroup>
<Checkbox checked success>
<Label>Check this out!</Label>
<FormMeta left success>
Everything looks great
</FormMeta>
</Checkbox>
</FormGroup>
<FormGroup>
<Checkbox />
<Label>Check this out!</Label>
<Checkbox checked warning>
<Label>Check this out!</Label>
<FormMeta left warning>
Unexpected children warning!
Are you sure ?
</FormMeta>
</Checkbox>
</FormGroup>
<FormGroup>
<Checkbox />
<Label>Check this out!</Label>
<FormMeta left warning='Unexpected inline warning!' />
</FormGroup>
</div>
```
#### error
```
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<div>
<FormGroup meta={{error: 'Unexpected meta error!'}}>
<Checkbox />
<Label>Check this out!</Label>
<FormMeta left />
</FormGroup>
<FormGroup error='Unexpected group error!'>
<Checkbox />
<Label>Check this out!</Label>
<FormMeta left />
</FormGroup>
<FormGroup>
<Checkbox />
<Label>Check this out!</Label>
<Checkbox error checked>
<Label>Check this out!</Label>
<FormMeta left error>
Unexpected children error!
Something’s missing
</FormMeta>
</FormGroup>
<FormGroup>
<Checkbox />
<Label>Check this out!</Label>
<FormMeta left error='Unexpected inline error!' />
</Checkbox>
</FormGroup>
</div>
```
#### success
```
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<div>
<FormGroup meta={{success: 'Unexpected meta success!'}}>
<Checkbox />
<Label>Check this out!</Label>
<FormMeta left />
</FormGroup>
<FormGroup success='Unexpected group success!'>
<Checkbox />
<Label>Check this out!</Label>
<FormMeta left />
</FormGroup>
<FormGroup>
<Checkbox />
<Label>Check this out!</Label>
<FormMeta left success>
Unexpected children success!
</FormMeta>
</FormGroup>
<FormGroup>
<Checkbox />
<Label>Check this out!</Label>
<FormMeta left success='Unexpected inline success!' />
</FormGroup>
</div>
```
#### label before with status
```
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Check this out!</Label>
<Checkbox />
<FormMeta success left>
Thanks for ticking, you are a star!
</FormMeta>
</FormGroup>
```
#### multiple with meta
```
const { Col, Row } = require('react-styled-flexboxgrid');
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<Row>
<Col md={6}>
<FormGroup>
<Row>
<Col>
<Label>Check this out!</Label>
<Checkbox />
</Col>
</Row>
<Row>
<Col>
<FormMeta success left>
Thanks for ticking, you are a star!
</FormMeta>
</Col>
</Row>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Row>
<Col>
<FormMeta success left>
Thanks for ticking, you are a star!
</FormMeta>
</Col>
</Row>
<Row>
<Col>
<Label>Check this out!</Label>
<Checkbox />
</Col>
</Row>
</FormGroup>
</Col>
</Row>
```

24
packages/ui-toolkit/src/form/usage-input.md
View File

@ -1,18 +1,12 @@
```
<Input placeholder='I am the placeholder' />
```
#### `type`
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
const Small = require('../text/small').default;
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<Small>We&apos;ll never share your email with anyone else.</Small>
<Label>Username</Label>
<Input placeholder='Example: JarJarBinks' type='email' />
</FormGroup>
```
@ -114,17 +108,3 @@ const FormMeta = require('./meta').default;
</FormGroup>
</div>
```
#### meta
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
const FormMeta = require('./meta').default;
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta>I&#39;m a children of meta</FormMeta>
</FormGroup>
```

226
packages/ui-toolkit/src/form/usage-radio.md
View File

@ -1,4 +1,4 @@
```
```jsx
const { RadioList } = require('./radio');
const FormGroup = require('./group').default;
const Label = require('./label').default;
@ -7,201 +7,85 @@ const Legend = require('./legend').default;
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<RadioList>
<Radio value='video' checked>
<Radio name="one" value='video' checked>
<Label>Video</Label>
</Radio>
<Radio value='tv'>
<Radio name="one" value='tv'>
<Label>TV</Label>
</Radio>
<Radio value='netflix'>
<Radio disabled name="one" value='netflix'>
<Label>Netflix</Label>
</Radio>
</RadioList>
</FormGroup>
```
#### `disabled`
#### Radio input validation
```
const { RadioList } = require('./radio');
const FormGroup = require('./group').default;
const Legend = require('./legend').default;
<FormGroup name='who-killed' disabled>
<Legend>Who killed the radio star?</Legend>
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
```
#### error
```
```jsx
const { RadioList } = require('./radio');
const FormGroup = require('./group').default;
const Legend = require('./legend').default;
const FormMeta = require('./meta').default;
const Label = require('./label').default;
<div>
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<FormMeta error='Unexpected inline error!' left />
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
<Radio name="two" success value='video'><Label>Video</Label></Radio>
<Radio name="two" success checked value='tv'>TV</Radio>
<Radio name="two" success value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
<FormGroup name='who-killed' error='Unexpected group error!'>
<Legend>Who killed the radio star?</Legend>
<FormMeta left />
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
<FormGroup name='who-killed' meta={{error: 'Unexpected meta error!'}} margin-bottom='1'>
<Legend>Who killed the radio star?</Legend>
<FormMeta left />
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<FormMeta error left>
Unexpected children error!
</FormMeta>
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
</div>
```
#### warning
```
const { RadioList } = require('./radio');
const FormGroup = require('./group').default;
const Legend = require('./legend').default;
const FormMeta = require('./meta').default;
<div>
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<FormMeta warning='Unexpected inline warning!' left />
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
<FormGroup name='who-killed' warning='Unexpected group warning!'>
<Legend>Who killed the radio star?</Legend>
<FormMeta left />
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
<FormGroup name='who-killed' meta={{warning: 'Unexpected meta warning!'}}>
<Legend>Who killed the radio star?</Legend>
<FormMeta left />
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<FormMeta left warning>
Unexpected children warning!
</FormMeta>
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
</div>
```
#### success
```
const { RadioList } = require('./radio');
const FormGroup = require('./group').default;
const Legend = require('./legend').default;
const FormMeta = require('./meta').default;
<div>
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<FormMeta success='Unexpected inline success!' left />
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
<FormGroup name='who-killed' success='Unexpected group success!'>
<Legend>Who killed the radio star?</Legend>
<FormMeta left />
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
<FormGroup name='who-killed' meta={{success: 'Unexpected meta success!'}}>
<Legend>Who killed the radio star?</Legend>
<FormMeta left />
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<FormMeta left success>
Unexpected children success!
You are the best !
</FormMeta>
</FormGroup>
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
<Radio name="three" warning checked value='video'><Label>Video</Label></Radio>
<Radio name="three" warning value='tv'>TV</Radio>
<Radio name="three" warning value='netflix'>Netflix</Radio>
</RadioList>
<FormMeta left warning>
Are you sure ?
</FormMeta>
</FormGroup>
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<RadioList>
<Radio name="four" error value='video'><Label>Video</Label></Radio>
<Radio name="four" error value='tv'>TV</Radio>
<Radio name="four" error value='netflix'>Netflix</Radio>
</RadioList>
<FormMeta error left>
You need to select one
</FormMeta>
</FormGroup>
<Legend>You can also have validation in each radio button</Legend>
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<RadioList>
<Radio success name="five" value='video'>
<Label>Video</Label>
</Radio>
<FormMeta left success>
You are the best !
</FormMeta>
<Radio warning name="five" value='tv'>
<Label>TV</Label>
</Radio>
<FormMeta left warning>
Are you sure ?
</FormMeta>
<Radio error name="five" value='netflix'>
<Label>Netflix</Label>
</Radio>
<FormMeta left error>
No, sorry
</FormMeta>
</RadioList>
</FormGroup>
</div>
```
#### meta before
```
const { RadioList } = require('./radio');
const FormGroup = require('./group').default;
const Legend = require('./legend').default;
const FormMeta = require('./meta').default;
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<FormMeta left>I&#39;m a children of meta</FormMeta>
<RadioList>
<Radio value='video'>Video</Radio>
<Radio value='tv'>TV</Radio>
<Radio value='netflix'>Netflix</Radio>
</RadioList>
</FormGroup>
```

51
packages/ui-toolkit/src/form/usage-select.md
View File

@ -1,20 +1,3 @@
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Your location</Label>
<Select placeholder='Select Location'>
<option value='1'>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
</FormGroup>
```
#### placeholder
```
<Select>
<option selected disabled>Select a datacenter</option>
@ -43,40 +26,6 @@ const Label = require('./label').default;
</FormGroup>
```
#### selected
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Your location</Label>
<Select>
<option selected disabled>Select Location</option>
<option value='1'>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
</FormGroup>
```
#### multiple
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Your location</Label>
<Select multiple>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
</FormGroup>
```
#### warning

3
packages/ui-toolkit/src/icons/actions-light.js
View File

@ -1,7 +1,6 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import ActionsIconLight from './svg/icon_actions_light.svg';
export default Baseline(ActionsIconLight);
export default ActionsIconLight;

4
packages/ui-toolkit/src/icons/actions.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import ActionsIcon from './svg/icon_actions.svg';
export default Baseline(ActionsIcon);
export default ActionsIcon

4
packages/ui-toolkit/src/icons/arrow-light.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import ArrowIconLight from './svg/icon_arrow_light.svg';
export default Baseline(ArrowIconLight);
export default ArrowIconLight

4
packages/ui-toolkit/src/icons/arrow.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import ArrowIcon from './svg/icon_arrow.svg';
export default Baseline(ArrowIcon);
export default ArrowIcon

4
packages/ui-toolkit/src/icons/bin.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import BinIcon from './svg/icon_bin.svg';
export default Baseline(BinIcon);
export default BinIcon

4
packages/ui-toolkit/src/icons/chevron.js
View File

@ -1,8 +1,8 @@
import Baseline from '../baseline';
import Basealign from '../basealign';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import ChevronIcon from './svg/icon_chevron.svg';
export default Baseline(Basealign(ChevronIcon));
export default Basealign(ChevronIcon)

4
packages/ui-toolkit/src/icons/close.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import CloseIcon from './svg/icon_close_cross.svg';
export default Baseline(CloseIcon);
export default CloseIcon

4
packages/ui-toolkit/src/icons/completed.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import CompletedIcon from './svg/icon_completed.svg';
export default Baseline(CompletedIcon);
export default CompletedIcon

4
packages/ui-toolkit/src/icons/data-center-light.js
View File

@ -1,8 +1,8 @@
import Baseline from '../baseline';
import Basealign from '../basealign';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import DataCenterIconLight from './svg/icon_data_center_light.svg';
export default Baseline(Basealign(DataCenterIconLight));
export default Basealign(DataCenterIconLight)

4
packages/ui-toolkit/src/icons/data-center.js
View File

@ -1,8 +1,8 @@
import Baseline from '../baseline';
import Basealign from '../basealign';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import DataCenterIcon from './svg/icon_data_center.svg';
export default Baseline(Basealign(DataCenterIcon));
export default Basealign(DataCenterIcon)

4
packages/ui-toolkit/src/icons/healthy.js
View File

@ -1,4 +1,4 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import styled from 'styled-components';
@ -12,4 +12,4 @@ const StyledHealthyIcon = styled(HealthyIcon)`
: props.theme.orange};
`;
export default Baseline(StyledHealthyIcon);
export default StyledHealthyIcon

9
packages/ui-toolkit/src/icons/icons.js
View File

@ -27,7 +27,8 @@ import {
CompletedIcon,
PartCompletedIcon,
IncompleteIcon,
LoadingIcon
LoadingIcon,
ImportIcon
} from './';
const List = styled.ul`
@ -104,6 +105,12 @@ const Icons = () => (
</Icon>
<Label>Close</Label>
</ListItem>
<ListItem>
<Icon>
<ImportIcon width="24" height="24" />
</Icon>
<Label>Import</Label>
</ListItem>
<ListItem>
<Icon>
<IconActions width="4" height="16" />

6
packages/ui-toolkit/src/icons/import.js Normal file
View File

@ -0,0 +1,6 @@
// eslint-disable-next-line no-unused-vars
import React from 'react';
import Import from './svg/import.svg';
export default Import;

4
packages/ui-toolkit/src/icons/incomplete.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import IncompleteIcon from './svg/icon_incomplete.svg';
export default Baseline(IncompleteIcon);
export default IncompleteIcon

1
packages/ui-toolkit/src/icons/index.js
View File

@ -20,3 +20,4 @@ export { default as CompletedIcon } from './completed';
export { default as PartCompletedIcon } from './part-complete';
export { default as IncompleteIcon } from './incomplete';
export { default as LoadingIcon } from './loading';
export { default as ImportIcon } from './import';

4
packages/ui-toolkit/src/icons/instances-light.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import InstancesIconLight from './svg/icon_instances_light.svg';
export default Baseline(InstancesIconLight);
export default InstancesIconLight

4
packages/ui-toolkit/src/icons/instances.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import InstancesIcon from './svg/icon_instances.svg';
export default Baseline(InstancesIcon);
export default InstancesIcon

4
packages/ui-toolkit/src/icons/loading.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import LoadingIcon from './svg/icon_loading.svg';
export default Baseline(LoadingIcon);
export default LoadingIcon

4
packages/ui-toolkit/src/icons/minus.js
View File

@ -1,8 +1,8 @@
import Baseline from '../baseline';
import Basealign from '../basealign';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import MinusIcon from './svg/icon_minus.svg';
export default Baseline(Basealign(MinusIcon));
export default Basealign(MinusIcon)

4
packages/ui-toolkit/src/icons/part-complete.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import PartCompletedIcon from './svg/icon_part_completed.svg';
export default Baseline(PartCompletedIcon);
export default PartCompletedIcon

4
packages/ui-toolkit/src/icons/plus.js
View File

@ -1,8 +1,8 @@
import Baseline from '../baseline';
import Basealign from '../basealign';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import CloseIcon from './svg/icon_plus.svg';
export default Baseline(Basealign(CloseIcon));
export default Basealign(CloseIcon)

26
packages/ui-toolkit/src/icons/svg/import.svg Normal file
View File

@ -0,0 +1,26 @@
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Import</title>
<desc>Created using Figma</desc>
<g id="Canvas" transform="translate(-2061 2768)">
<clipPath id="clip-0" clip-rule="evenodd">
<path d="M 2061 -2768L 2085 -2768L 2085 -2744L 2061 -2744L 2061 -2768Z" fill="#FFFFFF"/>
</clipPath>
<g id="Import" clip-path="url(#clip-0)">
<path d="M 2061 -2768L 2085 -2768L 2085 -2744L 2061 -2744L 2061 -2768Z" fill="#FFFFFF"/>
<g id="Bottom">
<use xlink:href="#path0_fill" transform="translate(2061 -2754)" fill="#464646"/>
</g>
<g id="Line">
<use xlink:href="#path1_fill" transform="matrix(1 0 0 1 2072 -2768)" fill="#464646"/>
</g>
<g id="Arrow">
<use xlink:href="#path2_fill" transform="translate(2067.29 -2755)" fill="#464646"/>
</g>
</g>
</g>
<defs>
<path id="path0_fill" fill-rule="evenodd" d="M 0 0L 2 0L 2 8L 22 8L 22 0L 24 0L 24 10L 22 10L 2 10L 0 10L 0 0Z"/>
<path id="path1_fill" fill-rule="evenodd" d="M 0 0L 2 0L 2 18L 0 18L 0 0Z"/>
<path id="path2_fill" fill-rule="evenodd" d="M 1.41431 0L 0 1.41431L 4.29468 5.70557L 4.94971 6.36401L 5.70874 7.11987L 11.4143 1.41455L 10 0.000244141L 5.70728 4.29297L 1.41431 0Z"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
packages/ui-toolkit/src/icons/tick.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import TickIcon from './svg/icon_tick.svg';
export default Baseline(TickIcon);
export default TickIcon

4
packages/ui-toolkit/src/icons/triton.js
View File

@ -1,8 +1,8 @@
import Baseline from '../baseline';
import Basealign from '../basealign';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import TritonIcon from './svg/triton_logo.svg';
export default Baseline(Basealign(TritonIcon));
export default Basealign(TritonIcon)

4
packages/ui-toolkit/src/icons/unhealthy.js
View File

@ -1,7 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import UnhealthyIcon from './svg/icon_error_failure.svg';
export default Baseline(UnhealthyIcon);
export default UnhealthyIcon

4
packages/ui-toolkit/src/icons/user.js
View File

@ -1,8 +1,6 @@
import Baseline from '../baseline';
import Basealign from '../basealign';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import UserIcon from './svg/icon_user.svg';
export default Baseline(Basealign(UserIcon));
export default UserIcon

15
packages/ui-toolkit/src/index.js
View File

@ -103,11 +103,24 @@ export {
CloseIcon,
PlusIcon,
MinusIcon,
IconActions,
IconActionsLight,
ArrowIcon,
ArrowIconLight,
TickIcon,
InstancesIcon,
InstancesIconLight,
HealthyIcon,
UnhealthyIcon,
BinIcon,
UserIcon,
DataCenterIcon
DataCenterIcon,
DataCenterIconLight,
ChevronIcon,
TritonIcon,
CompletedIcon,
PartCompletedIcon,
IncompleteIcon,
LoadingIcon,
ImportIcon
} from './icons';

9
packages/ui-toolkit/src/metrics/container.js Normal file
View File

@ -0,0 +1,9 @@
import { Col } from 'react-styled-flexboxgrid';
import styled from 'styled-components';
import remcalc from 'remcalc';
export default styled(Col)`
position: relative;
border-left: ${remcalc(1)} solid #d8d8d8;
padding-top: ${remcalc(20)};
`;

2
packages/ui-toolkit/src/metrics/index.js
View File

@ -1 +1,3 @@
export { default as MetricGraph } from './graph';
export { default as GraphContainer } from './container';
export { default as GraphTitle } from './title';

16
packages/ui-toolkit/src/metrics/title.js Normal file
View File

@ -0,0 +1,16 @@
import remcalc from 'remcalc';
import Small from '../text/small';
export default Small.extend`
z-index: 99;
position: absolute;
top: 0;
left: 0;
right: 0;
height: ${remcalc(20)};
border-bottom: ${remcalc(1)} solid #d8d8d8;
font-size: ${remcalc(13)};
text-align: center;
color: #494949;
`;

19
packages/ui-toolkit/src/status-loader/index.js
View File

@ -1,8 +1,10 @@
import React from 'react';
import styled from 'styled-components';
import is, { isNot } from 'styled-is';
import Widget from './widget';
import P from '../text/p';
import remcalc from 'remcalc';
const Container = styled.div`
display: flex;
@ -11,8 +13,16 @@ const Container = styled.div`
justify-content: center;
align-content: center;
align-items: center;
flex: 1 0 auto;
align-self: stretch;
min-height: ${remcalc(20)};
${isNot('inline')`
flex: 1 0 auto;
`} ${is('row')`
flex-direction: row;
`};
${is('row', 'inline')`
margin-left: ${remcalc(44)};
`};
`;
const Loader = styled(Widget)`
@ -25,10 +35,11 @@ const Msg = P.extend`
align-self: stretch;
text-align: center;
margin-bottom: 0;
margin-left: ${remcalc(6)};
`;
export default ({ msg }) => (
<Container>
export default ({ msg, row, inline }) => (
<Container row={row} inline={inline}>
<Loader />
<Msg>{msg || 'Loading...'}</Msg>
</Container>

29
packages/ui-toolkit/src/text/Readme.md
View File

@ -21,6 +21,7 @@ const H2 = require('/').H2;
```
#### Heading 3
```jsx
const H3 = require('/').H3;
<H3>Inspire the lazy</H3>
@ -74,17 +75,37 @@ const Anchor = require('/').Anchor;
#### Reversed
Reversed anchors is used on dark backgrounds, where a default anchor would not provide enough contrast.
```
```jsx
const Anchor = require('/').Anchor;
<span style={{'background-color': '#343434'}}>
<span style={{
'background-color': '#3B46CC',
height: 80,
width: 250,
display: 'flex',
'align-items': 'center',
'justify-content': 'center'
}}>
<Anchor href="https://joyent.com" reversed>Inspire the lazy secondary</Anchor>
</span>
```
#### Disabled
Disabled anchors cannot be actioned and the cursor is disabled.
#### In text anchor
In-paragraph anchor is a link that sits inside a text components. The default state does not have an underline. The underline appears on hover and click.
```jsx
const P = require('/').P;
const Anchor = require('/').Anchor;
<p>Body text. Crack that whip. Give the past a slip. Step on a crack. Break your momma's back. When a problem comes along.You must whip it.
<Anchor href="#">Learn More</Anchor>
</p>
```
#### Disabled
Disabled anchors cannot be actioned and the cursor is disabled.
```jsx
const Anchor = require('/').Anchor;
<Anchor disabled href="https://joyent.com">Inspire the lazy disabled</Anchor>
```

38
packages/ui-toolkit/styleguide.config.js
View File

@ -13,18 +13,36 @@ module.exports = {
})
}),
module: Object.assign(webpackConfig.module, {
rules: webpackConfig.module.rules.map(rule => {
if (!(rule.loader || '').match(/babel-loader/)) {
return rule;
}
return Object.assign(rule, {
rules: [
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(js|jsx)$/,
use: ['babel-loader']
},
{
test: /\.(eot|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader'
}
]
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
babelrc: true,
cacheDirectory: false
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
});
})
}
]
})
}),
title: 'UI Toolkit',

BIN
packages/ui-toolkit/test/__image_snapshots__/cards-spec-js-visual-regressions-card-headed-1-snap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
packages/ui-toolkit/test/__image_snapshots__/cards-spec-js-visual-regressions-card-headed-2-snap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
packages/ui-toolkit/test/__image_snapshots__/cards-spec-js-visual-regressions-card-headed-collapsed-1-snap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
packages/ui-toolkit/test/__image_snapshots__/cards-spec-js-visual-regressions-card-headed-collapsed-2-snap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

161
packages/ui-toolkit/test/cards.spec.js Normal file
View File

@ -0,0 +1,161 @@
const { Chrome } = require('navalia');
const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });
describe('Visual Regressions', () => {
let chrome = null;
beforeEach(() => {
chrome = new Chrome();
});
afterEach(() => {
chrome.done();
});
it('Card > Headed > Collapsed', () =>
chrome
.goto('http://0.0.0.0:6060/#!/Card/1')
.wait('div[name="card"]')
.then(() => chrome.screenshot())
.then(image => expect(image).toMatchImageSnapshot()));
it('Card > Headed', () =>
chrome
.goto('http://0.0.0.0:6060/#!/Card/2')
.then(() => chrome.screenshot())
.then(image => expect(image).toMatchImageSnapshot()));
it('Card > Headed > Collapsed', () =>
chrome
.goto('http://0.0.0.0:6060/#!/Card/3')
.then(() => chrome.screenshot())
.then(image => expect(image).toMatchImageSnapshot()));
it('Card > Headed', () =>
chrome
.goto('http://0.0.0.0:6060/#!/Card/4')
.then(() => chrome.screenshot())
.then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed > Collapsed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/5')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/6')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed > Collapsed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/7')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/8')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed > Collapsed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/9')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/10')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed > Collapsed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/11')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/12')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed > Collapsed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/13')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/14')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed > Collapsed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/15')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/16')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed > Collapsed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/17')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/18')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed > Collapsed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/19')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/20')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed > Collapsed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/21')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/22')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed > Collapsed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/23')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
// it('Card > Headed', () =>
// chrome
// .goto('http://0.0.0.0:6060/#!/Card/24')
// .then(() => chrome.screenshot())
// .then(image => expect(image).toMatchImageSnapshot()));
});

11
packages/ui-toolkit/test/start.js Normal file
View File

@ -0,0 +1,11 @@
const http = require('http');
const serveStatic = require('serve-static');
const jest = require('jest');
const serve = serveStatic('styleguide/');
const server = http.createServer((req, res) => {
serve(req, res, (req, res) => console.log('yay'));
});
// "test": "cross-env NODE_ENV=test run-s styleguide:build test:visual",
// Listen
server.listen(6060);

529
yarn.lock
View File

File diff suppressed because it is too large Load Diff