fix(ui-toolkit): fix cards implementation
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
8097d2f5ba
commit
cf2fb5e645
@ -10,8 +10,11 @@
|
|||||||
"lint:css": "echo 0",
|
"lint:css": "echo 0",
|
||||||
"lint:js": "eslint . --fix",
|
"lint:js": "eslint . --fix",
|
||||||
"lint": "redrun -s lint:*",
|
"lint": "redrun -s lint:*",
|
||||||
"test": "echo 0",
|
|
||||||
"test-ci": "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",
|
"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-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:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
|
||||||
@ -27,6 +30,7 @@
|
|||||||
"babel-cli": "^6.26.0",
|
"babel-cli": "^6.26.0",
|
||||||
"babel-generator": "^6.26.0",
|
"babel-generator": "^6.26.0",
|
||||||
"babel-helpers": "^6.24.1",
|
"babel-helpers": "^6.24.1",
|
||||||
|
"babel-loader": "^7.1.2",
|
||||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||||
"babel-plugin-styled-components": "^1.1.7",
|
"babel-plugin-styled-components": "^1.1.7",
|
||||||
"babel-preset-joyent-portal": "^3.0.1",
|
"babel-preset-joyent-portal": "^3.0.1",
|
||||||
@ -35,6 +39,7 @@
|
|||||||
"cross-env": "^5.0.5",
|
"cross-env": "^5.0.5",
|
||||||
"d3": "^4.10.0",
|
"d3": "^4.10.0",
|
||||||
"disable-scroll": "^0.3.0",
|
"disable-scroll": "^0.3.0",
|
||||||
|
"file-loader": "^1.1.5",
|
||||||
"fontfaceobserver": "^2.0.13",
|
"fontfaceobserver": "^2.0.13",
|
||||||
"joyent-manifest-editor": "^1.3.0",
|
"joyent-manifest-editor": "^1.3.0",
|
||||||
"lodash.difference": "^4.5.0",
|
"lodash.difference": "^4.5.0",
|
||||||
@ -56,20 +61,33 @@
|
|||||||
"remcalc": "^1.0.8",
|
"remcalc": "^1.0.8",
|
||||||
"rnd-id": "^1.0.8",
|
"rnd-id": "^1.0.8",
|
||||||
"styled-components": "^2.1.2",
|
"styled-components": "^2.1.2",
|
||||||
"styled-is": "^1.0.14",
|
"styled-is": "^1.0.15",
|
||||||
"unitcalc": "^1.1.0"
|
"svg-inline-loader": "^0.8.0",
|
||||||
|
"unitcalc": "^1.1.0",
|
||||||
|
"url-loader": "^0.6.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"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",
|
"chart.js": "^2.7.0",
|
||||||
|
"css-loader": "^0.28.7",
|
||||||
"csso": "^3.1.1",
|
"csso": "^3.1.1",
|
||||||
"eslint": "^4.5.0",
|
"eslint": "^4.5.0",
|
||||||
"eslint-config-joyent-portal": "2.0.0",
|
"eslint-config-joyent-portal": "2.0.0",
|
||||||
|
"file-loader": "^1.1.5",
|
||||||
|
"http-server": "^0.10.0",
|
||||||
"jest": "^20.0.4",
|
"jest": "^20.0.4",
|
||||||
"jest-diff": "^20.0.3",
|
"jest-diff": "^20.0.3",
|
||||||
|
"jest-image-snapshot": "^1.0.0",
|
||||||
"jest-matcher-utils": "^20.0.3",
|
"jest-matcher-utils": "^20.0.3",
|
||||||
"jest-snapshot": "^20.0.3",
|
"jest-snapshot": "^20.0.3",
|
||||||
"jest-styled-components": "^4.4.1",
|
"jest-styled-components": "^4.4.1",
|
||||||
"jsesc": "^2.5.1",
|
"jsesc": "^2.5.1",
|
||||||
|
"navalia": "^1.2.0",
|
||||||
|
"npm-run-all": "^4.1.1",
|
||||||
"react": "^15.6.1",
|
"react": "^15.6.1",
|
||||||
"react-docgen": "^2.17.0",
|
"react-docgen": "^2.17.0",
|
||||||
"react-docgen-displayname-handler": "^1.0.0",
|
"react-docgen-displayname-handler": "^1.0.0",
|
||||||
@ -81,12 +99,16 @@
|
|||||||
"react-test-renderer": "^15.6.1",
|
"react-test-renderer": "^15.6.1",
|
||||||
"redux": "^3.7.2",
|
"redux": "^3.7.2",
|
||||||
"redux-form": "^7.0.3",
|
"redux-form": "^7.0.3",
|
||||||
|
"serve-static": "^1.13.1",
|
||||||
"snapguidist": "^2.0.0",
|
"snapguidist": "^2.0.0",
|
||||||
|
"style-loader": "^0.19.0",
|
||||||
"stylelint": "^8.1.1",
|
"stylelint": "^8.1.1",
|
||||||
"stylelint-config-joyent-portal": "^2.0.0",
|
"stylelint-config-joyent-portal": "^2.0.0",
|
||||||
|
"svg-inline-loader": "^0.8.0",
|
||||||
"svgo": "^0.7.2",
|
"svgo": "^0.7.2",
|
||||||
"tinycolor2": "^1.4.1",
|
"tinycolor2": "^1.4.1",
|
||||||
"title-case": "^2.1.1",
|
"title-case": "^2.1.1",
|
||||||
|
"url-loader": "^0.6.2",
|
||||||
"webpack": "^3.5.5"
|
"webpack": "^3.5.5"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
|
|||||||
@ -49,7 +49,9 @@ const StyledCard = Row.extend`
|
|||||||
`};
|
`};
|
||||||
|
|
||||||
${is('icon')`
|
${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)};
|
padding-left: ${remcalc(30)};
|
||||||
`};
|
`};
|
||||||
|
|
||||||
@ -74,6 +76,10 @@ const StyledCard = Row.extend`
|
|||||||
${paperEffect}
|
${paperEffect}
|
||||||
`};
|
`};
|
||||||
|
|
||||||
|
${is('disabled')`
|
||||||
|
background-color: ${props => props.theme.disabled};
|
||||||
|
`};
|
||||||
|
|
||||||
${isNot('active')`
|
${isNot('active')`
|
||||||
background-color: ${props => props.theme.disabled};
|
background-color: ${props => props.theme.disabled};
|
||||||
`};
|
`};
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { Subscriber } from 'react-broadcast';
|
import { Subscriber } from 'react-broadcast';
|
||||||
import Baseline from '../baseline';
|
import Baseline from '../baseline';
|
||||||
import typography from '../typography';
|
import typography from '../typography';
|
||||||
import { isNot } from 'styled-is';
|
import is, { isNot } from 'styled-is';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
@ -17,12 +17,26 @@ const StyledTitle = Title.extend`
|
|||||||
${isNot('collapsed')`
|
${isNot('collapsed')`
|
||||||
padding-bottom: ${remcalc(12)};
|
padding-bottom: ${remcalc(12)};
|
||||||
`};
|
`};
|
||||||
|
|
||||||
|
${is('disabled')`
|
||||||
|
color: ${props => props.theme.text};
|
||||||
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const InnerDescription = styled.div`
|
const InnerDescription = styled.div`
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Description = ({ children, ...rest }) => {
|
const Description = ({ children, ...rest }) => {
|
||||||
@ -33,7 +47,9 @@ const Description = ({ children, ...rest }) => {
|
|||||||
xs={collapsed ? 6 : 12}
|
xs={collapsed ? 6 : 12}
|
||||||
{...rest}
|
{...rest}
|
||||||
>
|
>
|
||||||
<InnerDescription collapsed={collapsed}>{children}</InnerDescription>
|
<InnerDescription collapsed={collapsed}>
|
||||||
|
<span>{children}</span>
|
||||||
|
</InnerDescription>
|
||||||
</StyledTitle>
|
</StyledTitle>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -2,12 +2,11 @@ import React from 'react';
|
|||||||
import { Broadcast, Subscriber } from 'react-broadcast';
|
import { Broadcast, Subscriber } from 'react-broadcast';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { isNot } from 'styled-is';
|
import is from 'styled-is';
|
||||||
import Baseline from '../baseline';
|
import Baseline from '../baseline';
|
||||||
import Card from './card';
|
import Card from './card';
|
||||||
|
|
||||||
const StyledCard = Card.extend`
|
const StyledCard = Card.extend`
|
||||||
position: absolute;
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
background-color: ${props => props.theme.primary};
|
background-color: ${props => props.theme.primary};
|
||||||
@ -17,7 +16,7 @@ const StyledCard = Card.extend`
|
|||||||
width: calc(100% + ${remcalc(2)});
|
width: calc(100% + ${remcalc(2)});
|
||||||
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
|
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
|
||||||
|
|
||||||
${isNot('active')`
|
${is('disabled')`
|
||||||
background-color: ${props => props.theme.disabled};
|
background-color: ${props => props.theme.disabled};
|
||||||
border-color: ${props => props.theme.grey};
|
border-color: ${props => props.theme.grey};
|
||||||
`};
|
`};
|
||||||
|
|||||||
@ -11,3 +11,4 @@ export { default as CardAction } from './action.js';
|
|||||||
export { default as CardView } from './view.js';
|
export { default as CardView } from './view.js';
|
||||||
export { default as CardFooter } from './footer.js';
|
export { default as CardFooter } from './footer.js';
|
||||||
export { default as CardLabel } from './label.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
59
packages/ui-toolkit/src/card/info.js
Normal 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
221
packages/ui-toolkit/src/card/metrics.json
Normal 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"
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -3,7 +3,7 @@ import styled from 'styled-components';
|
|||||||
import { Nav } from 'normalized-styled-components';
|
import { Nav } from 'normalized-styled-components';
|
||||||
import Baseline from '../baseline';
|
import Baseline from '../baseline';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
import is, { isNot } from 'styled-is';
|
import is, { isOr, isNot } from 'styled-is';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Button from '../button';
|
import Button from '../button';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
@ -13,12 +13,13 @@ const StyledNav = Nav.extend`
|
|||||||
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
|
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
${is('fromHeader')`
|
${isOr('disabled', 'active')`
|
||||||
border-left-color: ${props => props.theme.primaryDesaturatedActive};
|
border-left-color: ${props => props.theme.grey};
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${isNot('active')`
|
${is('fromHeader') &&
|
||||||
border-left-color: ${props => props.theme.grey};
|
isNot('disabled')`
|
||||||
|
border-left-color: ${props => props.theme.primaryDesaturatedActive};
|
||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -55,7 +56,7 @@ const StyledButton = Button.extend`
|
|||||||
border-width: 0;
|
border-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
${isNot('active')`
|
${is('disabled')`
|
||||||
background-color: ${props => props.theme.disabled};
|
background-color: ${props => props.theme.disabled};
|
||||||
border-color: ${props => props.theme.grey};
|
border-color: ${props => props.theme.grey};
|
||||||
|
|
||||||
@ -66,6 +67,8 @@ const StyledButton = Button.extend`
|
|||||||
&:active:focus {
|
&:active:focus {
|
||||||
background-color: ${props => props.theme.grey};
|
background-color: ${props => props.theme.grey};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -86,13 +89,17 @@ const StyledCircle = styled.div`
|
|||||||
background-color: ${props => props.theme.secondary};
|
background-color: ${props => props.theme.secondary};
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${isNot('active')`
|
${is('disabled')`
|
||||||
background-color: ${props => props.theme.text};
|
background-color: ${props => props.theme.text};
|
||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Options = ({ children, ...rest }) => {
|
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">
|
<StyledNav active={active} fromHeader={fromHeader} name="card-options">
|
||||||
<StyledButton
|
<StyledButton
|
||||||
secondary={!fromHeader}
|
secondary={!fromHeader}
|
||||||
@ -102,9 +109,21 @@ const Options = ({ children, ...rest }) => {
|
|||||||
{...rest}
|
{...rest}
|
||||||
>
|
>
|
||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<StyledCircle active={active} secondary={!fromHeader} />
|
<StyledCircle
|
||||||
<StyledCircle active={active} secondary={!fromHeader} />
|
{...rest}
|
||||||
<StyledCircle active={active} secondary={!fromHeader} />
|
active={active}
|
||||||
|
secondary={!fromHeader}
|
||||||
|
/>
|
||||||
|
<StyledCircle
|
||||||
|
{...rest}
|
||||||
|
active={active}
|
||||||
|
secondary={!fromHeader}
|
||||||
|
/>
|
||||||
|
<StyledCircle
|
||||||
|
{...rest}
|
||||||
|
active={active}
|
||||||
|
secondary={!fromHeader}
|
||||||
|
/>
|
||||||
</StyledContainer>
|
</StyledContainer>
|
||||||
</StyledButton>
|
</StyledButton>
|
||||||
</StyledNav>
|
</StyledNav>
|
||||||
|
|||||||
@ -22,6 +22,10 @@ const Span = styled.span`
|
|||||||
${is('collapsed')`
|
${is('collapsed')`
|
||||||
display: flex;
|
display: flex;
|
||||||
`};
|
`};
|
||||||
|
|
||||||
|
${is('disabled')`
|
||||||
|
color: ${props => props.theme.text};
|
||||||
|
`};
|
||||||
|
|
||||||
${is('fromHeader')`
|
${is('fromHeader')`
|
||||||
color: ${props => props.theme.white};
|
color: ${props => props.theme.white};
|
||||||
|
|||||||
@ -19,9 +19,9 @@ const Container = styled.div`
|
|||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
align-items: center;
|
||||||
|
|
||||||
flex-grow: 2;
|
flex-grow: 4;
|
||||||
flex-basis: ${remcalc(90)};
|
flex-basis: ${remcalc(90)};
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@ -33,13 +33,14 @@ const Container = styled.div`
|
|||||||
`};
|
`};
|
||||||
|
|
||||||
${is('collapsed')`
|
${is('collapsed')`
|
||||||
flex-grow: 6;
|
|
||||||
flex-direction: column;
|
|
||||||
width: auto;
|
width: auto;
|
||||||
justify-content: center;
|
|
||||||
padding: 0 ${remcalc(18)};
|
padding: 0 ${remcalc(18)};
|
||||||
`};
|
`};
|
||||||
|
|
||||||
|
${is('disabled')`
|
||||||
|
color: ${props => props.theme.text};
|
||||||
|
`};
|
||||||
|
|
||||||
${is('selected')`
|
${is('selected')`
|
||||||
color: ${props => props.theme.blue};
|
color: ${props => props.theme.blue};
|
||||||
`};
|
`};
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
```
|
#### Card > Headed > Collapsed
|
||||||
|
|
||||||
|
```jsx
|
||||||
const {
|
const {
|
||||||
CardDescription,
|
CardDescription,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
@ -8,52 +10,457 @@ const {
|
|||||||
CardSubTitle,
|
CardSubTitle,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
CardView,
|
CardView,
|
||||||
CardGroupView
|
CardInfo
|
||||||
} = require('./');
|
} = 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>
|
<Card>
|
||||||
<CardView>
|
<CardView>
|
||||||
<CardMeta>
|
<CardDescription>
|
||||||
<CardTitle>Title</CardTitle>
|
<b>percona_primary</b>
|
||||||
<CardSubTitle>Subtitle</CardSubTitle>
|
<CardInfo
|
||||||
<CardDescription>Description</CardDescription>
|
icon={<HealthyIcon />}
|
||||||
</CardMeta>
|
iconPosition="left"
|
||||||
<CardOutlet>Outlet</CardOutlet>
|
label="Healthy"
|
||||||
|
color="dark"
|
||||||
|
/>
|
||||||
|
</CardDescription>
|
||||||
</CardView>
|
</CardView>
|
||||||
<CardOptions />
|
|
||||||
</Card>
|
</Card>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### `collapsed`
|
#### Card > Instance > Stacked
|
||||||
|
|
||||||
```
|
```jsx
|
||||||
const {
|
const {
|
||||||
CardDescription,
|
CardDescription,
|
||||||
CardHeader,
|
|
||||||
CardMeta,
|
|
||||||
CardOptions,
|
|
||||||
CardOutlet,
|
CardOutlet,
|
||||||
CardSubTitle,
|
|
||||||
CardTitle,
|
CardTitle,
|
||||||
CardView,
|
CardView,
|
||||||
CardGroupView
|
CardInfo
|
||||||
} = require('./');
|
} = 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>
|
<Card collapsed>
|
||||||
<CardView>
|
<CardView>
|
||||||
<CardMeta>
|
<CardTitle>WordPress_01</CardTitle>
|
||||||
<CardTitle>Title</CardTitle>
|
<CardDescription>
|
||||||
<CardSubTitle>Subtitle</CardSubTitle>
|
<CardInfo
|
||||||
<CardDescription>Description</CardDescription>
|
icon={<HealthyIcon healthy="HEALTHY"/>}
|
||||||
</CardMeta>
|
iconPosition="left"
|
||||||
<CardOutlet>Outlet</CardOutlet>
|
label="Healthy"
|
||||||
|
color="dark"
|
||||||
|
/>
|
||||||
|
</CardDescription>
|
||||||
|
<CardDescription>
|
||||||
|
<CardInfo
|
||||||
|
icon={<DataCenterIcon />}
|
||||||
|
iconPosition="left"
|
||||||
|
label="eu-ams-1"
|
||||||
|
color="dark"
|
||||||
|
/>
|
||||||
|
</CardDescription>
|
||||||
|
<CardOptions />
|
||||||
</CardView>
|
</CardView>
|
||||||
<CardOptions />
|
|
||||||
</Card>
|
</Card>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### `transparent`
|
#### Card > Secondary
|
||||||
```
|
|
||||||
|
```jsx
|
||||||
const {
|
const {
|
||||||
CardDescription,
|
CardDescription,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
@ -82,7 +489,9 @@ const {
|
|||||||
</Card>
|
</Card>
|
||||||
```
|
```
|
||||||
|
|
||||||
```
|
#### Card > Secondary > Active
|
||||||
|
|
||||||
|
```jsx
|
||||||
const {
|
const {
|
||||||
CardDescription,
|
CardDescription,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
@ -109,243 +518,4 @@ const {
|
|||||||
</CardMeta>
|
</CardMeta>
|
||||||
</CardView>
|
</CardView>
|
||||||
</Card>
|
</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>
|
|
||||||
```
|
```
|
||||||
@ -4,11 +4,18 @@ import BaseInput from './base/input';
|
|||||||
import BaseToggle from './base/toggle';
|
import BaseToggle from './base/toggle';
|
||||||
import Baseline from '../baseline';
|
import Baseline from '../baseline';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
|
||||||
const Li = styled.li`
|
const Li = styled.li`
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
${typography.fontFamily};
|
${typography.fontFamily};
|
||||||
${typography.normal};
|
${typography.normal};
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Ul = styled.ul`
|
const Ul = styled.ul`
|
||||||
|
|||||||
@ -8,6 +8,12 @@ import React from 'react';
|
|||||||
const Li = styled.li`
|
const Li = styled.li`
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
${typography.normal};
|
${typography.normal};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Ul = styled.ul`
|
const Ul = styled.ul`
|
||||||
|
|||||||
@ -1,10 +1,42 @@
|
|||||||
import Baseline from '../baseline';
|
import styled from 'styled-components';
|
||||||
import BaseInput, { Stylable } from './base/input';
|
|
||||||
import React from 'react';
|
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 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
|
* @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>
|
||||||
|
);
|
||||||
|
|||||||
@ -3,48 +3,22 @@ const FormGroup = require('./group').default;
|
|||||||
const Label = require('./label').default;
|
const Label = require('./label').default;
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Checkbox />
|
<Checkbox checked>
|
||||||
<Label>Check this out!</Label>
|
<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>
|
</FormGroup>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### `checked`
|
#### Checkbox input validation
|
||||||
|
|
||||||
```
|
|
||||||
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
|
|
||||||
|
|
||||||
```
|
```
|
||||||
const FormMeta = require('./meta').default;
|
const FormMeta = require('./meta').default;
|
||||||
@ -52,155 +26,29 @@ const FormGroup = require('./group').default;
|
|||||||
const Label = require('./label').default;
|
const Label = require('./label').default;
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<FormGroup meta={{warning: 'Unexpected meta warning!'}}>
|
<FormGroup>
|
||||||
<Checkbox />
|
<Checkbox checked success>
|
||||||
<Label>Check this out!</Label>
|
<Label>Check this out!</Label>
|
||||||
<FormMeta left />
|
<FormMeta left success>
|
||||||
</FormGroup>
|
Everything looks great
|
||||||
<FormGroup warning='Unexpected group warning!'>
|
</FormMeta>
|
||||||
<Checkbox />
|
</Checkbox>
|
||||||
<Label>Check this out!</Label>
|
|
||||||
<FormMeta left />
|
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Checkbox />
|
<Checkbox checked warning>
|
||||||
<Label>Check this out!</Label>
|
<Label>Check this out!</Label>
|
||||||
<FormMeta left warning>
|
<FormMeta left warning>
|
||||||
Unexpected children warning!
|
Are you sure ?
|
||||||
</FormMeta>
|
</FormMeta>
|
||||||
|
</Checkbox>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Checkbox />
|
<Checkbox error checked>
|
||||||
<Label>Check this out!</Label>
|
<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>
|
|
||||||
<FormMeta left error>
|
<FormMeta left error>
|
||||||
Unexpected children error!
|
Something’s missing
|
||||||
</FormMeta>
|
</FormMeta>
|
||||||
</FormGroup>
|
</Checkbox>
|
||||||
<FormGroup>
|
|
||||||
<Checkbox />
|
|
||||||
<Label>Check this out!</Label>
|
|
||||||
<FormMeta left error='Unexpected inline error!' />
|
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</div>
|
</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>
|
|
||||||
```
|
|
||||||
|
|||||||
@ -1,18 +1,12 @@
|
|||||||
```
|
|
||||||
<Input placeholder='I am the placeholder' />
|
|
||||||
```
|
|
||||||
|
|
||||||
#### `type`
|
#### `type`
|
||||||
|
|
||||||
```
|
```
|
||||||
const FormGroup = require('./group').default;
|
const FormGroup = require('./group').default;
|
||||||
const Label = require('./label').default;
|
const Label = require('./label').default;
|
||||||
const Small = require('../text/small').default;
|
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label>Email Address</Label>
|
<Label>Username</Label>
|
||||||
<Input placeholder='Enter email' type='email' />
|
<Input placeholder='Example: JarJarBinks' type='email' />
|
||||||
<Small>We'll never share your email with anyone else.</Small>
|
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -113,18 +107,4 @@ const FormMeta = require('./meta').default;
|
|||||||
</FormMeta>
|
</FormMeta>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</div>
|
</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'm a children of meta</FormMeta>
|
|
||||||
</FormGroup>
|
|
||||||
```
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
```
|
```jsx
|
||||||
const { RadioList } = require('./radio');
|
const { RadioList } = require('./radio');
|
||||||
const FormGroup = require('./group').default;
|
const FormGroup = require('./group').default;
|
||||||
const Label = require('./label').default;
|
const Label = require('./label').default;
|
||||||
@ -7,201 +7,85 @@ const Legend = require('./legend').default;
|
|||||||
<FormGroup name='who-killed'>
|
<FormGroup name='who-killed'>
|
||||||
<Legend>Who killed the radio star?</Legend>
|
<Legend>Who killed the radio star?</Legend>
|
||||||
<RadioList>
|
<RadioList>
|
||||||
<Radio value='video' checked>
|
<Radio name="one" value='video' checked>
|
||||||
<Label>Video</Label>
|
<Label>Video</Label>
|
||||||
</Radio>
|
</Radio>
|
||||||
<Radio value='tv'>
|
<Radio name="one" value='tv'>
|
||||||
<Label>TV</Label>
|
<Label>TV</Label>
|
||||||
</Radio>
|
</Radio>
|
||||||
<Radio value='netflix'>
|
<Radio disabled name="one" value='netflix'>
|
||||||
<Label>Netflix</Label>
|
<Label>Netflix</Label>
|
||||||
</Radio>
|
</Radio>
|
||||||
</RadioList>
|
</RadioList>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### `disabled`
|
#### Radio input validation
|
||||||
|
|
||||||
```
|
```jsx
|
||||||
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
|
|
||||||
|
|
||||||
```
|
|
||||||
const { RadioList } = require('./radio');
|
const { RadioList } = require('./radio');
|
||||||
const FormGroup = require('./group').default;
|
const FormGroup = require('./group').default;
|
||||||
const Legend = require('./legend').default;
|
const Legend = require('./legend').default;
|
||||||
const FormMeta = require('./meta').default;
|
const FormMeta = require('./meta').default;
|
||||||
|
const Label = require('./label').default;
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<FormGroup name='who-killed'>
|
<FormGroup name='who-killed'>
|
||||||
<Legend>Who killed the radio star?</Legend>
|
<Legend>Who killed the radio star?</Legend>
|
||||||
<FormMeta error='Unexpected inline error!' left />
|
|
||||||
<RadioList>
|
<RadioList>
|
||||||
<Radio value='video'>Video</Radio>
|
<Radio name="two" success value='video'><Label>Video</Label></Radio>
|
||||||
<Radio value='tv'>TV</Radio>
|
<Radio name="two" success checked value='tv'>TV</Radio>
|
||||||
<Radio value='netflix'>Netflix</Radio>
|
<Radio name="two" success value='netflix'>Netflix</Radio>
|
||||||
</RadioList>
|
</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>
|
<FormMeta left success>
|
||||||
Unexpected children success!
|
You are the best !
|
||||||
</FormMeta>
|
</FormMeta>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
<RadioList>
|
<RadioList>
|
||||||
<Radio value='video'>Video</Radio>
|
<Radio name="three" warning checked value='video'><Label>Video</Label></Radio>
|
||||||
<Radio value='tv'>TV</Radio>
|
<Radio name="three" warning value='tv'>TV</Radio>
|
||||||
<Radio value='netflix'>Netflix</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>
|
</RadioList>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</div>
|
</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'm a children of meta</FormMeta>
|
|
||||||
<RadioList>
|
|
||||||
<Radio value='video'>Video</Radio>
|
|
||||||
<Radio value='tv'>TV</Radio>
|
|
||||||
<Radio value='netflix'>Netflix</Radio>
|
|
||||||
</RadioList>
|
|
||||||
</FormGroup>
|
|
||||||
```
|
```
|
||||||
@ -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>
|
<Select>
|
||||||
<option selected disabled>Select a datacenter</option>
|
<option selected disabled>Select a datacenter</option>
|
||||||
@ -43,40 +26,6 @@ const Label = require('./label').default;
|
|||||||
</FormGroup>
|
</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
|
#### warning
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import ActionsIconLight from './svg/icon_actions_light.svg';
|
import ActionsIconLight from './svg/icon_actions_light.svg';
|
||||||
|
|
||||||
export default Baseline(ActionsIconLight);
|
export default ActionsIconLight;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import ActionsIcon from './svg/icon_actions.svg';
|
import ActionsIcon from './svg/icon_actions.svg';
|
||||||
|
|
||||||
export default Baseline(ActionsIcon);
|
export default ActionsIcon
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import ArrowIconLight from './svg/icon_arrow_light.svg';
|
import ArrowIconLight from './svg/icon_arrow_light.svg';
|
||||||
|
|
||||||
export default Baseline(ArrowIconLight);
|
export default ArrowIconLight
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import ArrowIcon from './svg/icon_arrow.svg';
|
import ArrowIcon from './svg/icon_arrow.svg';
|
||||||
|
|
||||||
export default Baseline(ArrowIcon);
|
export default ArrowIcon
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import BinIcon from './svg/icon_bin.svg';
|
import BinIcon from './svg/icon_bin.svg';
|
||||||
|
|
||||||
export default Baseline(BinIcon);
|
export default BinIcon
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
import Basealign from '../basealign';
|
import Basealign from '../basealign';
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import ChevronIcon from './svg/icon_chevron.svg';
|
import ChevronIcon from './svg/icon_chevron.svg';
|
||||||
|
|
||||||
export default Baseline(Basealign(ChevronIcon));
|
export default Basealign(ChevronIcon)
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import CloseIcon from './svg/icon_close_cross.svg';
|
import CloseIcon from './svg/icon_close_cross.svg';
|
||||||
|
|
||||||
export default Baseline(CloseIcon);
|
export default CloseIcon
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import CompletedIcon from './svg/icon_completed.svg';
|
import CompletedIcon from './svg/icon_completed.svg';
|
||||||
|
|
||||||
export default Baseline(CompletedIcon);
|
export default CompletedIcon
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
import Basealign from '../basealign';
|
import Basealign from '../basealign';
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import DataCenterIconLight from './svg/icon_data_center_light.svg';
|
import DataCenterIconLight from './svg/icon_data_center_light.svg';
|
||||||
|
|
||||||
export default Baseline(Basealign(DataCenterIconLight));
|
export default Basealign(DataCenterIconLight)
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
import Basealign from '../basealign';
|
import Basealign from '../basealign';
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import DataCenterIcon from './svg/icon_data_center.svg';
|
import DataCenterIcon from './svg/icon_data_center.svg';
|
||||||
|
|
||||||
export default Baseline(Basealign(DataCenterIcon));
|
export default Basealign(DataCenterIcon)
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
@ -12,4 +12,4 @@ const StyledHealthyIcon = styled(HealthyIcon)`
|
|||||||
: props.theme.orange};
|
: props.theme.orange};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default Baseline(StyledHealthyIcon);
|
export default StyledHealthyIcon
|
||||||
|
|||||||
@ -27,7 +27,8 @@ import {
|
|||||||
CompletedIcon,
|
CompletedIcon,
|
||||||
PartCompletedIcon,
|
PartCompletedIcon,
|
||||||
IncompleteIcon,
|
IncompleteIcon,
|
||||||
LoadingIcon
|
LoadingIcon,
|
||||||
|
ImportIcon
|
||||||
} from './';
|
} from './';
|
||||||
|
|
||||||
const List = styled.ul`
|
const List = styled.ul`
|
||||||
@ -104,6 +105,12 @@ const Icons = () => (
|
|||||||
</Icon>
|
</Icon>
|
||||||
<Label>Close</Label>
|
<Label>Close</Label>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
<ListItem>
|
||||||
|
<Icon>
|
||||||
|
<ImportIcon width="24" height="24" />
|
||||||
|
</Icon>
|
||||||
|
<Label>Import</Label>
|
||||||
|
</ListItem>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<Icon>
|
<Icon>
|
||||||
<IconActions width="4" height="16" />
|
<IconActions width="4" height="16" />
|
||||||
|
|||||||
6
packages/ui-toolkit/src/icons/import.js
Normal file
6
packages/ui-toolkit/src/icons/import.js
Normal 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;
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import IncompleteIcon from './svg/icon_incomplete.svg';
|
import IncompleteIcon from './svg/icon_incomplete.svg';
|
||||||
|
|
||||||
export default Baseline(IncompleteIcon);
|
export default IncompleteIcon
|
||||||
|
|||||||
@ -20,3 +20,4 @@ export { default as CompletedIcon } from './completed';
|
|||||||
export { default as PartCompletedIcon } from './part-complete';
|
export { default as PartCompletedIcon } from './part-complete';
|
||||||
export { default as IncompleteIcon } from './incomplete';
|
export { default as IncompleteIcon } from './incomplete';
|
||||||
export { default as LoadingIcon } from './loading';
|
export { default as LoadingIcon } from './loading';
|
||||||
|
export { default as ImportIcon } from './import';
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import InstancesIconLight from './svg/icon_instances_light.svg';
|
import InstancesIconLight from './svg/icon_instances_light.svg';
|
||||||
|
|
||||||
export default Baseline(InstancesIconLight);
|
export default InstancesIconLight
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import InstancesIcon from './svg/icon_instances.svg';
|
import InstancesIcon from './svg/icon_instances.svg';
|
||||||
|
|
||||||
export default Baseline(InstancesIcon);
|
export default InstancesIcon
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import LoadingIcon from './svg/icon_loading.svg';
|
import LoadingIcon from './svg/icon_loading.svg';
|
||||||
|
|
||||||
export default Baseline(LoadingIcon);
|
export default LoadingIcon
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
import Basealign from '../basealign';
|
import Basealign from '../basealign';
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import MinusIcon from './svg/icon_minus.svg';
|
import MinusIcon from './svg/icon_minus.svg';
|
||||||
|
|
||||||
export default Baseline(Basealign(MinusIcon));
|
export default Basealign(MinusIcon)
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import PartCompletedIcon from './svg/icon_part_completed.svg';
|
import PartCompletedIcon from './svg/icon_part_completed.svg';
|
||||||
|
|
||||||
export default Baseline(PartCompletedIcon);
|
export default PartCompletedIcon
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
import Basealign from '../basealign';
|
import Basealign from '../basealign';
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import CloseIcon from './svg/icon_plus.svg';
|
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
26
packages/ui-toolkit/src/icons/svg/import.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import TickIcon from './svg/icon_tick.svg';
|
import TickIcon from './svg/icon_tick.svg';
|
||||||
|
|
||||||
export default Baseline(TickIcon);
|
export default TickIcon
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
import Basealign from '../basealign';
|
import Basealign from '../basealign';
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import TritonIcon from './svg/triton_logo.svg';
|
import TritonIcon from './svg/triton_logo.svg';
|
||||||
|
|
||||||
export default Baseline(Basealign(TritonIcon));
|
export default Basealign(TritonIcon)
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import UnhealthyIcon from './svg/icon_error_failure.svg';
|
import UnhealthyIcon from './svg/icon_error_failure.svg';
|
||||||
|
|
||||||
export default Baseline(UnhealthyIcon);
|
export default UnhealthyIcon
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
import Baseline from '../baseline';
|
|
||||||
import Basealign from '../basealign';
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import UserIcon from './svg/icon_user.svg';
|
import UserIcon from './svg/icon_user.svg';
|
||||||
|
|
||||||
export default Baseline(Basealign(UserIcon));
|
export default UserIcon
|
||||||
|
|||||||
@ -103,11 +103,24 @@ export {
|
|||||||
CloseIcon,
|
CloseIcon,
|
||||||
PlusIcon,
|
PlusIcon,
|
||||||
MinusIcon,
|
MinusIcon,
|
||||||
|
IconActions,
|
||||||
|
IconActionsLight,
|
||||||
ArrowIcon,
|
ArrowIcon,
|
||||||
|
ArrowIconLight,
|
||||||
|
TickIcon,
|
||||||
InstancesIcon,
|
InstancesIcon,
|
||||||
|
InstancesIconLight,
|
||||||
HealthyIcon,
|
HealthyIcon,
|
||||||
UnhealthyIcon,
|
UnhealthyIcon,
|
||||||
BinIcon,
|
BinIcon,
|
||||||
UserIcon,
|
UserIcon,
|
||||||
DataCenterIcon
|
DataCenterIcon,
|
||||||
|
DataCenterIconLight,
|
||||||
|
ChevronIcon,
|
||||||
|
TritonIcon,
|
||||||
|
CompletedIcon,
|
||||||
|
PartCompletedIcon,
|
||||||
|
IncompleteIcon,
|
||||||
|
LoadingIcon,
|
||||||
|
ImportIcon
|
||||||
} from './icons';
|
} from './icons';
|
||||||
|
|||||||
9
packages/ui-toolkit/src/metrics/container.js
Normal file
9
packages/ui-toolkit/src/metrics/container.js
Normal 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)};
|
||||||
|
`;
|
||||||
@ -1 +1,3 @@
|
|||||||
export { default as MetricGraph } from './graph';
|
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
16
packages/ui-toolkit/src/metrics/title.js
Normal 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;
|
||||||
|
`;
|
||||||
@ -1,8 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
import is, { isNot } from 'styled-is';
|
||||||
|
|
||||||
import Widget from './widget';
|
import Widget from './widget';
|
||||||
import P from '../text/p';
|
import P from '../text/p';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
|
||||||
const Container = styled.div`
|
const Container = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -11,8 +13,16 @@ const Container = styled.div`
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1 0 auto;
|
min-height: ${remcalc(20)};
|
||||||
align-self: stretch;
|
|
||||||
|
${isNot('inline')`
|
||||||
|
flex: 1 0 auto;
|
||||||
|
`} ${is('row')`
|
||||||
|
flex-direction: row;
|
||||||
|
`};
|
||||||
|
${is('row', 'inline')`
|
||||||
|
margin-left: ${remcalc(44)};
|
||||||
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Loader = styled(Widget)`
|
const Loader = styled(Widget)`
|
||||||
@ -25,10 +35,11 @@ const Msg = P.extend`
|
|||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
margin-left: ${remcalc(6)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default ({ msg }) => (
|
export default ({ msg, row, inline }) => (
|
||||||
<Container>
|
<Container row={row} inline={inline}>
|
||||||
<Loader />
|
<Loader />
|
||||||
<Msg>{msg || 'Loading...'}</Msg>
|
<Msg>{msg || 'Loading...'}</Msg>
|
||||||
</Container>
|
</Container>
|
||||||
|
|||||||
@ -21,6 +21,7 @@ const H2 = require('/').H2;
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### Heading 3
|
#### Heading 3
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const H3 = require('/').H3;
|
const H3 = require('/').H3;
|
||||||
<H3>Inspire the lazy</H3>
|
<H3>Inspire the lazy</H3>
|
||||||
@ -74,17 +75,37 @@ const Anchor = require('/').Anchor;
|
|||||||
#### Reversed
|
#### Reversed
|
||||||
Reversed anchors is used on dark backgrounds, where a default anchor would not provide enough contrast.
|
Reversed anchors is used on dark backgrounds, where a default anchor would not provide enough contrast.
|
||||||
|
|
||||||
```
|
```jsx
|
||||||
const Anchor = require('/').Anchor;
|
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>
|
<Anchor href="https://joyent.com" reversed>Inspire the lazy secondary</Anchor>
|
||||||
</span>
|
</span>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Disabled
|
#### In text anchor
|
||||||
Disabled anchors cannot be actioned and the cursor is disabled.
|
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;
|
const Anchor = require('/').Anchor;
|
||||||
<Anchor disabled href="https://joyent.com">Inspire the lazy disabled</Anchor>
|
<Anchor disabled href="https://joyent.com">Inspire the lazy disabled</Anchor>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -13,18 +13,36 @@ module.exports = {
|
|||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
module: Object.assign(webpackConfig.module, {
|
module: Object.assign(webpackConfig.module, {
|
||||||
rules: webpackConfig.module.rules.map(rule => {
|
rules: [
|
||||||
if (!(rule.loader || '').match(/babel-loader/)) {
|
{
|
||||||
return rule;
|
test: /\.svg$/,
|
||||||
}
|
loader: 'svg-inline-loader'
|
||||||
|
},
|
||||||
return Object.assign(rule, {
|
{
|
||||||
|
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: {
|
options: {
|
||||||
babelrc: true,
|
limit: 10000,
|
||||||
cacheDirectory: false
|
name: 'static/media/[name].[hash:8].[ext]'
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
})
|
]
|
||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
title: 'UI Toolkit',
|
title: 'UI Toolkit',
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
161
packages/ui-toolkit/test/cards.spec.js
Normal file
161
packages/ui-toolkit/test/cards.spec.js
Normal 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
11
packages/ui-toolkit/test/start.js
Normal 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);
|
||||||
Loading…
Reference in New Issue
Block a user