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:js": "eslint . --fix",
|
||||
"lint": "redrun -s lint:*",
|
||||
"test": "echo 0",
|
||||
"test-ci": "echo 0",
|
||||
"test": "echo 0",
|
||||
"test:visual": "run-p serve jest",
|
||||
"jest": "jest",
|
||||
"serve": "http-server styleguide -p 6060 -s",
|
||||
"copy-fonts": "rm -rf dist; mkdir -p dist/es/typography; mkdir -p dist/umd/typography; cp -r src/typography/libre-franklin dist/es/typography; cp -r src/typography/libre-franklin dist/umd/typography",
|
||||
"compile-watch:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline --watch",
|
||||
"compile:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
|
||||
|
|
@ -27,6 +30,7 @@
|
|||
"babel-cli": "^6.26.0",
|
||||
"babel-generator": "^6.26.0",
|
||||
"babel-helpers": "^6.24.1",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||
"babel-plugin-styled-components": "^1.1.7",
|
||||
"babel-preset-joyent-portal": "^3.0.1",
|
||||
|
|
@ -35,6 +39,7 @@
|
|||
"cross-env": "^5.0.5",
|
||||
"d3": "^4.10.0",
|
||||
"disable-scroll": "^0.3.0",
|
||||
"file-loader": "^1.1.5",
|
||||
"fontfaceobserver": "^2.0.13",
|
||||
"joyent-manifest-editor": "^1.3.0",
|
||||
"lodash.difference": "^4.5.0",
|
||||
|
|
@ -56,20 +61,33 @@
|
|||
"remcalc": "^1.0.8",
|
||||
"rnd-id": "^1.0.8",
|
||||
"styled-components": "^2.1.2",
|
||||
"styled-is": "^1.0.14",
|
||||
"unitcalc": "^1.1.0"
|
||||
"styled-is": "^1.0.15",
|
||||
"svg-inline-loader": "^0.8.0",
|
||||
"unitcalc": "^1.1.0",
|
||||
"url-loader": "^0.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-plugin-add-module-exports": "^0.2.1",
|
||||
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
|
||||
"babel-plugin-transform-es3-property-literals": "^6.22.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"chart.js": "^2.7.0",
|
||||
"css-loader": "^0.28.7",
|
||||
"csso": "^3.1.1",
|
||||
"eslint": "^4.5.0",
|
||||
"eslint-config-joyent-portal": "2.0.0",
|
||||
"file-loader": "^1.1.5",
|
||||
"http-server": "^0.10.0",
|
||||
"jest": "^20.0.4",
|
||||
"jest-diff": "^20.0.3",
|
||||
"jest-image-snapshot": "^1.0.0",
|
||||
"jest-matcher-utils": "^20.0.3",
|
||||
"jest-snapshot": "^20.0.3",
|
||||
"jest-styled-components": "^4.4.1",
|
||||
"jsesc": "^2.5.1",
|
||||
"navalia": "^1.2.0",
|
||||
"npm-run-all": "^4.1.1",
|
||||
"react": "^15.6.1",
|
||||
"react-docgen": "^2.17.0",
|
||||
"react-docgen-displayname-handler": "^1.0.0",
|
||||
|
|
@ -81,12 +99,16 @@
|
|||
"react-test-renderer": "^15.6.1",
|
||||
"redux": "^3.7.2",
|
||||
"redux-form": "^7.0.3",
|
||||
"serve-static": "^1.13.1",
|
||||
"snapguidist": "^2.0.0",
|
||||
"style-loader": "^0.19.0",
|
||||
"stylelint": "^8.1.1",
|
||||
"stylelint-config-joyent-portal": "^2.0.0",
|
||||
"svg-inline-loader": "^0.8.0",
|
||||
"svgo": "^0.7.2",
|
||||
"tinycolor2": "^1.4.1",
|
||||
"title-case": "^2.1.1",
|
||||
"url-loader": "^0.6.2",
|
||||
"webpack": "^3.5.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,9 @@ const StyledCard = Row.extend`
|
|||
`};
|
||||
|
||||
${is('icon')`
|
||||
background: url(${props => props.icon}) no-repeat scroll ${remcalc(7)} ${remcalc(7)};
|
||||
background: url(${props => props.icon}) no-repeat scroll ${remcalc(
|
||||
7
|
||||
)} ${remcalc(7)};
|
||||
padding-left: ${remcalc(30)};
|
||||
`};
|
||||
|
||||
|
|
@ -74,6 +76,10 @@ const StyledCard = Row.extend`
|
|||
${paperEffect}
|
||||
`};
|
||||
|
||||
${is('disabled')`
|
||||
background-color: ${props => props.theme.disabled};
|
||||
`};
|
||||
|
||||
${isNot('active')`
|
||||
background-color: ${props => props.theme.disabled};
|
||||
`};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Subscriber } from 'react-broadcast';
|
||||
import Baseline from '../baseline';
|
||||
import typography from '../typography';
|
||||
import { isNot } from 'styled-is';
|
||||
import is, { isNot } from 'styled-is';
|
||||
import remcalc from 'remcalc';
|
||||
import styled from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
|
|
@ -17,12 +17,26 @@ const StyledTitle = Title.extend`
|
|||
${isNot('collapsed')`
|
||||
padding-bottom: ${remcalc(12)};
|
||||
`};
|
||||
|
||||
${is('disabled')`
|
||||
color: ${props => props.theme.text};
|
||||
`};
|
||||
`;
|
||||
|
||||
const InnerDescription = styled.div`
|
||||
justify-content: flex-start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
`;
|
||||
|
||||
const Description = ({ children, ...rest }) => {
|
||||
|
|
@ -33,7 +47,9 @@ const Description = ({ children, ...rest }) => {
|
|||
xs={collapsed ? 6 : 12}
|
||||
{...rest}
|
||||
>
|
||||
<InnerDescription collapsed={collapsed}>{children}</InnerDescription>
|
||||
<InnerDescription collapsed={collapsed}>
|
||||
<span>{children}</span>
|
||||
</InnerDescription>
|
||||
</StyledTitle>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,11 @@ import React from 'react';
|
|||
import { Broadcast, Subscriber } from 'react-broadcast';
|
||||
import remcalc from 'remcalc';
|
||||
import PropTypes from 'prop-types';
|
||||
import { isNot } from 'styled-is';
|
||||
import is from 'styled-is';
|
||||
import Baseline from '../baseline';
|
||||
import Card from './card';
|
||||
|
||||
const StyledCard = Card.extend`
|
||||
position: absolute;
|
||||
flex-direction: row;
|
||||
|
||||
background-color: ${props => props.theme.primary};
|
||||
|
|
@ -17,7 +16,7 @@ const StyledCard = Card.extend`
|
|||
width: calc(100% + ${remcalc(2)});
|
||||
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
|
||||
|
||||
${isNot('active')`
|
||||
${is('disabled')`
|
||||
background-color: ${props => props.theme.disabled};
|
||||
border-color: ${props => props.theme.grey};
|
||||
`};
|
||||
|
|
|
|||
|
|
@ -11,3 +11,4 @@ export { default as CardAction } from './action.js';
|
|||
export { default as CardView } from './view.js';
|
||||
export { default as CardFooter } from './footer.js';
|
||||
export { default as CardLabel } from './label.js';
|
||||
export { default as CardInfo } from './info.js';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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 Baseline from '../baseline';
|
||||
import remcalc from 'remcalc';
|
||||
import is, { isNot } from 'styled-is';
|
||||
import is, { isOr, isNot } from 'styled-is';
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from '../button';
|
||||
import React from 'react';
|
||||
|
|
@ -13,12 +13,13 @@ const StyledNav = Nav.extend`
|
|||
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
box-sizing: border-box;
|
||||
|
||||
${is('fromHeader')`
|
||||
border-left-color: ${props => props.theme.primaryDesaturatedActive};
|
||||
${isOr('disabled', 'active')`
|
||||
border-left-color: ${props => props.theme.grey};
|
||||
`};
|
||||
|
||||
${isNot('active')`
|
||||
border-left-color: ${props => props.theme.grey};
|
||||
${is('fromHeader') &&
|
||||
isNot('disabled')`
|
||||
border-left-color: ${props => props.theme.primaryDesaturatedActive};
|
||||
`};
|
||||
`;
|
||||
|
||||
|
|
@ -55,7 +56,7 @@ const StyledButton = Button.extend`
|
|||
border-width: 0;
|
||||
}
|
||||
|
||||
${isNot('active')`
|
||||
${is('disabled')`
|
||||
background-color: ${props => props.theme.disabled};
|
||||
border-color: ${props => props.theme.grey};
|
||||
|
||||
|
|
@ -66,6 +67,8 @@ const StyledButton = Button.extend`
|
|||
&:active:focus {
|
||||
background-color: ${props => props.theme.grey};
|
||||
}
|
||||
|
||||
|
||||
`};
|
||||
`;
|
||||
|
||||
|
|
@ -86,13 +89,17 @@ const StyledCircle = styled.div`
|
|||
background-color: ${props => props.theme.secondary};
|
||||
`};
|
||||
|
||||
${isNot('active')`
|
||||
${is('disabled')`
|
||||
background-color: ${props => props.theme.text};
|
||||
`};
|
||||
`;
|
||||
|
||||
const Options = ({ children, ...rest }) => {
|
||||
const render = ({ fromHeader = false, collapsed = false, active = true }) => (
|
||||
const render = ({
|
||||
fromHeader = false,
|
||||
collapsed = false,
|
||||
active = true
|
||||
}) => (
|
||||
<StyledNav active={active} fromHeader={fromHeader} name="card-options">
|
||||
<StyledButton
|
||||
secondary={!fromHeader}
|
||||
|
|
@ -102,9 +109,21 @@ const Options = ({ children, ...rest }) => {
|
|||
{...rest}
|
||||
>
|
||||
<StyledContainer>
|
||||
<StyledCircle active={active} secondary={!fromHeader} />
|
||||
<StyledCircle active={active} secondary={!fromHeader} />
|
||||
<StyledCircle active={active} secondary={!fromHeader} />
|
||||
<StyledCircle
|
||||
{...rest}
|
||||
active={active}
|
||||
secondary={!fromHeader}
|
||||
/>
|
||||
<StyledCircle
|
||||
{...rest}
|
||||
active={active}
|
||||
secondary={!fromHeader}
|
||||
/>
|
||||
<StyledCircle
|
||||
{...rest}
|
||||
active={active}
|
||||
secondary={!fromHeader}
|
||||
/>
|
||||
</StyledContainer>
|
||||
</StyledButton>
|
||||
</StyledNav>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@ const Span = styled.span`
|
|||
${is('collapsed')`
|
||||
display: flex;
|
||||
`};
|
||||
|
||||
${is('disabled')`
|
||||
color: ${props => props.theme.text};
|
||||
`};
|
||||
|
||||
${is('fromHeader')`
|
||||
color: ${props => props.theme.white};
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ const Container = styled.div`
|
|||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
flex-grow: 2;
|
||||
flex-grow: 4;
|
||||
flex-basis: ${remcalc(90)};
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -33,13 +33,14 @@ const Container = styled.div`
|
|||
`};
|
||||
|
||||
${is('collapsed')`
|
||||
flex-grow: 6;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
justify-content: center;
|
||||
padding: 0 ${remcalc(18)};
|
||||
`};
|
||||
|
||||
${is('disabled')`
|
||||
color: ${props => props.theme.text};
|
||||
`};
|
||||
|
||||
${is('selected')`
|
||||
color: ${props => props.theme.blue};
|
||||
`};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
```
|
||||
#### Card > Headed > Collapsed
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
|
|
@ -8,52 +10,457 @@ const {
|
|||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardGroupView
|
||||
CardInfo
|
||||
} = require('./');
|
||||
const { InstancesIconLight } = require('../icons');
|
||||
|
||||
<Card collapsed headed>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Nginx</CardTitle>
|
||||
<CardDescription>
|
||||
<CardInfo
|
||||
icon={<InstancesIconLight />}
|
||||
iconPosition="left"
|
||||
label="4 of 4 instances"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### Card > Headed
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardInfo
|
||||
} = require('./');
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
<Card headed>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Nginx</CardTitle>
|
||||
<CardDescription>
|
||||
<CardInfo
|
||||
icon={<InstancesIconLight />}
|
||||
iconPosition="left"
|
||||
label="4 of 4 instances"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
<CardInfo
|
||||
icon={<HealthyIcon healthy="HEALTHY"/>}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### Card > Single state
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardInfo
|
||||
} = require('./');
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
<Card headed>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Nginx</CardTitle>
|
||||
<CardDescription>
|
||||
<CardInfo
|
||||
icon={<InstancesIconLight />}
|
||||
iconPosition="left"
|
||||
label="4 of 4 instances"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
1 instance paused <br/>
|
||||
1 instances stopped <br/>
|
||||
1 instance not responding <br/>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### Card > Metrics
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardInfo
|
||||
} = require('./');
|
||||
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
|
||||
const { Row } = require('react-styled-flexboxgrid');
|
||||
const metrics = require('./metrics.json');
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
<Card headed>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Nginx</CardTitle>
|
||||
<CardDescription>
|
||||
<CardInfo
|
||||
icon={<InstancesIconLight />}
|
||||
iconPosition="left"
|
||||
label="4 of 4 instances"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
<span>Scaling from 1 to 4: finished</span>
|
||||
<CardInfo
|
||||
icon={<HealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
<CardDescription>
|
||||
<Row>
|
||||
<GraphContainer xs={4}>
|
||||
<GraphTitle>Memory usage</GraphTitle>
|
||||
<MetricGraph
|
||||
metricsData={metrics}
|
||||
graphDurationSeconds={90}
|
||||
/>
|
||||
</GraphContainer>
|
||||
<GraphContainer xs={4}>
|
||||
<GraphTitle>CPU usage</GraphTitle>
|
||||
<MetricGraph
|
||||
metricsData={metrics}
|
||||
graphDurationSeconds={90}
|
||||
/>
|
||||
</GraphContainer>
|
||||
<GraphContainer xs={4}>
|
||||
<GraphTitle>CPU wait time</GraphTitle>
|
||||
<MetricGraph
|
||||
metricsData={metrics}
|
||||
graphDurationSeconds={90}
|
||||
/>
|
||||
</GraphContainer>
|
||||
</Row>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### Card > Provisioning
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardInfo
|
||||
} = require('./');
|
||||
const StatusLoader = require('../status-loader').default;
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
<Card collapsed headed disabled>
|
||||
<CardHeader disabled>
|
||||
<CardMeta>
|
||||
<CardTitle disabled>
|
||||
<span>Nginx</span>
|
||||
<StatusLoader inline row msg="Provisioning"/>
|
||||
</CardTitle>
|
||||
</CardMeta>
|
||||
<CardOptions disabled/>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
```
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardInfo
|
||||
} = require('./');
|
||||
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
|
||||
const StatusLoader = require('../status-loader').default;
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
<Card headed>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Nginx</CardTitle>
|
||||
<CardDescription>
|
||||
<CardInfo
|
||||
icon={<InstancesIconLight />}
|
||||
iconPosition="left"
|
||||
label="4 of 4 instances"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
<StatusLoader row msg="Provisioning 3 instances"/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<CardInfo
|
||||
icon={<HealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### Card > Disabled
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardInfo
|
||||
} = require('./');
|
||||
const { InstancesIcon, HealthyIcon } = require('../icons');
|
||||
const StatusLoader = require('../status-loader').default;
|
||||
|
||||
<Card headed disabled>
|
||||
<CardHeader disabled>
|
||||
<CardMeta>
|
||||
<CardTitle disabled>Nginx</CardTitle>
|
||||
<CardDescription disabled>
|
||||
<CardInfo
|
||||
icon={<InstancesIcon />}
|
||||
iconPosition="left"
|
||||
label="4 of 4 instances"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions disabled/>
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
<StatusLoader row msg="Provisioning 3 instances"/>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### Card > Instance
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardOutlet,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardInfo
|
||||
} = require('./');
|
||||
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
|
||||
const { Row } = require('react-styled-flexboxgrid');
|
||||
const metrics = require('./metrics.json');
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
<Card>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
<CardDescription>
|
||||
<b>percona_primary</b>
|
||||
<CardInfo
|
||||
icon={<HealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
<CardOptions />
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### `collapsed`
|
||||
#### Card > Instance > Stacked
|
||||
|
||||
```
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardGroupView
|
||||
CardInfo
|
||||
} = require('./');
|
||||
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
|
||||
const { Row } = require('react-styled-flexboxgrid');
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
<Card stacked>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
<b>percona_primary</b>
|
||||
<span>4 instances</span>
|
||||
<CardInfo
|
||||
icon={<HealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### Card > Instance > Group
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardOutlet,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardInfo
|
||||
} = require('./');
|
||||
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
|
||||
const { Row } = require('react-styled-flexboxgrid');
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
<div>
|
||||
<Card>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
<b>percona_primary</b>
|
||||
<CardInfo
|
||||
icon={<HealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
<b>percona_primary</b>
|
||||
<CardInfo
|
||||
icon={<HealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
</Card>
|
||||
<Card stacked>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
<b>percona_primary</b>
|
||||
<span>4 instances</span>
|
||||
<CardInfo
|
||||
icon={<HealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
</Card>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Card > Instance > List
|
||||
|
||||
```jsx
|
||||
const {
|
||||
Card,
|
||||
CardInfo,
|
||||
CardView,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardOptions
|
||||
} = require('./');
|
||||
const { HealthyIcon, DataCenterIcon } = require('../icons');
|
||||
|
||||
<Card collapsed>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
<CardTitle>WordPress_01</CardTitle>
|
||||
<CardDescription>
|
||||
<CardInfo
|
||||
icon={<HealthyIcon healthy="HEALTHY"/>}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
<CardDescription>
|
||||
<CardInfo
|
||||
icon={<DataCenterIcon />}
|
||||
iconPosition="left"
|
||||
label="eu-ams-1"
|
||||
color="dark"
|
||||
/>
|
||||
</CardDescription>
|
||||
<CardOptions />
|
||||
</CardView>
|
||||
<CardOptions />
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### `transparent`
|
||||
```
|
||||
#### Card > Secondary
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
|
|
@ -82,7 +489,9 @@ const {
|
|||
</Card>
|
||||
```
|
||||
|
||||
```
|
||||
#### Card > Secondary > Active
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
|
|
@ -109,243 +518,4 @@ const {
|
|||
</CardMeta>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### `headed`
|
||||
|
||||
```
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardGroupView
|
||||
} = require('./');
|
||||
|
||||
<Card headed>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### `headed` and `collapsed`
|
||||
|
||||
```
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardGroupView
|
||||
} = require('./');
|
||||
|
||||
<Card collapsed headed>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### `stacked`
|
||||
|
||||
```
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardGroupView
|
||||
} = require('./');
|
||||
|
||||
<Card stacked>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
<CardOptions />
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### group
|
||||
|
||||
```
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardGroupView
|
||||
} = require('./');
|
||||
|
||||
<Card headed>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardGroupView>
|
||||
<Card flat>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
<Card flat>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
<Card flat stacked>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
</CardGroupView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### `disabled`
|
||||
|
||||
```
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardGroupView
|
||||
} = require('./');
|
||||
|
||||
<Card headed disabled>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### group and `disabled`
|
||||
|
||||
```
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardGroupView
|
||||
} = require('./');
|
||||
|
||||
<Card headed disabled>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardGroupView>
|
||||
<Card flat disabled>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
<Card flat disabled>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
<Card flat stacked disabled>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
</CardGroupView>
|
||||
</Card>
|
||||
```
|
||||
|
|
@ -4,11 +4,18 @@ import BaseInput from './base/input';
|
|||
import BaseToggle from './base/toggle';
|
||||
import Baseline from '../baseline';
|
||||
import React from 'react';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
const Li = styled.li`
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
${typography.fontFamily};
|
||||
${typography.normal};
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
}
|
||||
`;
|
||||
|
||||
const Ul = styled.ul`
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@ import React from 'react';
|
|||
const Li = styled.li`
|
||||
list-style-type: none;
|
||||
${typography.normal};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
}
|
||||
`;
|
||||
|
||||
const Ul = styled.ul`
|
||||
|
|
|
|||
|
|
@ -1,10 +1,42 @@
|
|||
import Baseline from '../baseline';
|
||||
import BaseInput, { Stylable } from './base/input';
|
||||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
import remcalc from 'remcalc';
|
||||
import Baseline from '../baseline';
|
||||
import { isNot } from 'styled-is';
|
||||
import BaseInput, { Stylable } from './base/input';
|
||||
|
||||
const Select = Baseline(BaseInput(Stylable('select')));
|
||||
|
||||
const SelectWrapper = styled.div`
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
||||
${isNot('fluid')`
|
||||
min-width: ${remcalc(200)};
|
||||
`};
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: ${remcalc(10)};
|
||||
height: ${remcalc(10)};
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDo
|
||||
vL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIG
|
||||
Q9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpb
|
||||
Gw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==')
|
||||
center center no-repeat;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: ${remcalc(12)};
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* @example ./usage-select.md
|
||||
*/
|
||||
export default ({ children, ...rest }) => <Select {...rest}>{children}</Select>;
|
||||
export default ({ children, fluid, ...rest }) => (
|
||||
<SelectWrapper fluid={fluid}>
|
||||
<Select {...rest}>{children}</Select>
|
||||
</SelectWrapper>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,48 +3,22 @@ const FormGroup = require('./group').default;
|
|||
const Label = require('./label').default;
|
||||
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox checked>
|
||||
<Label>Detailed explanations</Label>
|
||||
</Checkbox>
|
||||
<Checkbox checked>
|
||||
<Label>Tips and tricks</Label>
|
||||
</Checkbox>
|
||||
<Checkbox>
|
||||
<Label>Hints</Label>
|
||||
</Checkbox>
|
||||
<Checkbox disabled>
|
||||
<Label>How to</Label>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### `checked`
|
||||
|
||||
```
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<FormGroup>
|
||||
<Checkbox checked />
|
||||
<Label>Check this out!</Label>
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### `disabled`
|
||||
|
||||
```
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<FormGroup>
|
||||
<Checkbox disabled />
|
||||
<Label>Check this out!</Label>
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### label before
|
||||
|
||||
```
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<FormGroup>
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox />
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### warning
|
||||
#### Checkbox input validation
|
||||
|
||||
```
|
||||
const FormMeta = require('./meta').default;
|
||||
|
|
@ -52,155 +26,29 @@ const FormGroup = require('./group').default;
|
|||
const Label = require('./label').default;
|
||||
|
||||
<div>
|
||||
<FormGroup meta={{warning: 'Unexpected meta warning!'}}>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup warning='Unexpected group warning!'>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
<FormGroup>
|
||||
<Checkbox checked success>
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left success>
|
||||
Everything looks great
|
||||
</FormMeta>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox checked warning>
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left warning>
|
||||
Unexpected children warning!
|
||||
Are you sure ?
|
||||
</FormMeta>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left warning='Unexpected inline warning!' />
|
||||
</FormGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### error
|
||||
|
||||
```
|
||||
const FormMeta = require('./meta').default;
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<div>
|
||||
<FormGroup meta={{error: 'Unexpected meta error!'}}>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup error='Unexpected group error!'>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox error checked>
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left error>
|
||||
Unexpected children error!
|
||||
Something’s missing
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left error='Unexpected inline error!' />
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### success
|
||||
|
||||
```
|
||||
const FormMeta = require('./meta').default;
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<div>
|
||||
<FormGroup meta={{success: 'Unexpected meta success!'}}>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup success='Unexpected group success!'>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left success>
|
||||
Unexpected children success!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left success='Unexpected inline success!' />
|
||||
</FormGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### label before with status
|
||||
|
||||
```
|
||||
const FormMeta = require('./meta').default;
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<FormGroup>
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox />
|
||||
<FormMeta success left>
|
||||
Thanks for ticking, you are a star!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### multiple with meta
|
||||
|
||||
```
|
||||
const { Col, Row } = require('react-styled-flexboxgrid');
|
||||
const FormMeta = require('./meta').default;
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<Row>
|
||||
<Col md={6}>
|
||||
<FormGroup>
|
||||
<Row>
|
||||
<Col>
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<FormMeta success left>
|
||||
Thanks for ticking, you are a star!
|
||||
</FormMeta>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={6}>
|
||||
<FormGroup>
|
||||
<Row>
|
||||
<Col>
|
||||
<FormMeta success left>
|
||||
Thanks for ticking, you are a star!
|
||||
</FormMeta>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox />
|
||||
</Col>
|
||||
</Row>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,18 +1,12 @@
|
|||
```
|
||||
<Input placeholder='I am the placeholder' />
|
||||
```
|
||||
|
||||
#### `type`
|
||||
|
||||
```
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
const Small = require('../text/small').default;
|
||||
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<Small>We'll never share your email with anyone else.</Small>
|
||||
<Label>Username</Label>
|
||||
<Input placeholder='Example: JarJarBinks' type='email' />
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
|
|
@ -113,18 +107,4 @@ const FormMeta = require('./meta').default;
|
|||
</FormMeta>
|
||||
</FormGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### meta
|
||||
|
||||
```
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
const FormMeta = require('./meta').default;
|
||||
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta>I'm a children of meta</FormMeta>
|
||||
</FormGroup>
|
||||
```
|
||||
```
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
```
|
||||
```jsx
|
||||
const { RadioList } = require('./radio');
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
|
@ -7,201 +7,85 @@ const Legend = require('./legend').default;
|
|||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio value='video' checked>
|
||||
<Radio name="one" value='video' checked>
|
||||
<Label>Video</Label>
|
||||
</Radio>
|
||||
<Radio value='tv'>
|
||||
<Radio name="one" value='tv'>
|
||||
<Label>TV</Label>
|
||||
</Radio>
|
||||
<Radio value='netflix'>
|
||||
<Radio disabled name="one" value='netflix'>
|
||||
<Label>Netflix</Label>
|
||||
</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### `disabled`
|
||||
#### Radio input validation
|
||||
|
||||
```
|
||||
const { RadioList } = require('./radio');
|
||||
const FormGroup = require('./group').default;
|
||||
const Legend = require('./legend').default;
|
||||
|
||||
<FormGroup name='who-killed' disabled>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### error
|
||||
|
||||
```
|
||||
```jsx
|
||||
const { RadioList } = require('./radio');
|
||||
const FormGroup = require('./group').default;
|
||||
const Legend = require('./legend').default;
|
||||
const FormMeta = require('./meta').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<div>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta error='Unexpected inline error!' left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
<Radio name="two" success value='video'><Label>Video</Label></Radio>
|
||||
<Radio name="two" success checked value='tv'>TV</Radio>
|
||||
<Radio name="two" success value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed' error='Unexpected group error!'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed' meta={{error: 'Unexpected meta error!'}} margin-bottom='1'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta error left>
|
||||
Unexpected children error!
|
||||
</FormMeta>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### warning
|
||||
|
||||
```
|
||||
const { RadioList } = require('./radio');
|
||||
const FormGroup = require('./group').default;
|
||||
const Legend = require('./legend').default;
|
||||
const FormMeta = require('./meta').default;
|
||||
|
||||
<div>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta warning='Unexpected inline warning!' left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed' warning='Unexpected group warning!'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed' meta={{warning: 'Unexpected meta warning!'}}>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left warning>
|
||||
Unexpected children warning!
|
||||
</FormMeta>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### success
|
||||
|
||||
```
|
||||
const { RadioList } = require('./radio');
|
||||
const FormGroup = require('./group').default;
|
||||
const Legend = require('./legend').default;
|
||||
const FormMeta = require('./meta').default;
|
||||
|
||||
<div>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta success='Unexpected inline success!' left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed' success='Unexpected group success!'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed' meta={{success: 'Unexpected meta success!'}}>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left success>
|
||||
Unexpected children success!
|
||||
You are the best !
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
<Radio name="three" warning checked value='video'><Label>Video</Label></Radio>
|
||||
<Radio name="three" warning value='tv'>TV</Radio>
|
||||
<Radio name="three" warning value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
<FormMeta left warning>
|
||||
Are you sure ?
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio name="four" error value='video'><Label>Video</Label></Radio>
|
||||
<Radio name="four" error value='tv'>TV</Radio>
|
||||
<Radio name="four" error value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
<FormMeta error left>
|
||||
You need to select one
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
<Legend>You can also have validation in each radio button</Legend>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio success name="five" value='video'>
|
||||
<Label>Video</Label>
|
||||
</Radio>
|
||||
<FormMeta left success>
|
||||
You are the best !
|
||||
</FormMeta>
|
||||
<Radio warning name="five" value='tv'>
|
||||
<Label>TV</Label>
|
||||
</Radio>
|
||||
<FormMeta left warning>
|
||||
Are you sure ?
|
||||
</FormMeta>
|
||||
<Radio error name="five" value='netflix'>
|
||||
<Label>Netflix</Label>
|
||||
</Radio>
|
||||
<FormMeta left error>
|
||||
No, sorry
|
||||
</FormMeta>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### meta before
|
||||
|
||||
```
|
||||
const { RadioList } = require('./radio');
|
||||
const FormGroup = require('./group').default;
|
||||
const Legend = require('./legend').default;
|
||||
const FormMeta = require('./meta').default;
|
||||
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left>I'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>
|
||||
<option selected disabled>Select a datacenter</option>
|
||||
|
|
@ -43,40 +26,6 @@ const Label = require('./label').default;
|
|||
</FormGroup>
|
||||
```
|
||||
|
||||
#### selected
|
||||
|
||||
```
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option selected disabled>Select Location</option>
|
||||
<option value='1'>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### multiple
|
||||
|
||||
```
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select multiple>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### warning
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import Baseline from '../baseline';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import ActionsIconLight from './svg/icon_actions_light.svg';
|
||||
|
||||
export default Baseline(ActionsIconLight);
|
||||
export default ActionsIconLight;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import ActionsIcon from './svg/icon_actions.svg';
|
||||
|
||||
export default Baseline(ActionsIcon);
|
||||
export default ActionsIcon
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import ArrowIconLight from './svg/icon_arrow_light.svg';
|
||||
|
||||
export default Baseline(ArrowIconLight);
|
||||
export default ArrowIconLight
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import ArrowIcon from './svg/icon_arrow.svg';
|
||||
|
||||
export default Baseline(ArrowIcon);
|
||||
export default ArrowIcon
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import BinIcon from './svg/icon_bin.svg';
|
||||
|
||||
export default Baseline(BinIcon);
|
||||
export default BinIcon
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
import Basealign from '../basealign';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import ChevronIcon from './svg/icon_chevron.svg';
|
||||
|
||||
export default Baseline(Basealign(ChevronIcon));
|
||||
export default Basealign(ChevronIcon)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import CloseIcon from './svg/icon_close_cross.svg';
|
||||
|
||||
export default Baseline(CloseIcon);
|
||||
export default CloseIcon
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import CompletedIcon from './svg/icon_completed.svg';
|
||||
|
||||
export default Baseline(CompletedIcon);
|
||||
export default CompletedIcon
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
import Basealign from '../basealign';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import DataCenterIconLight from './svg/icon_data_center_light.svg';
|
||||
|
||||
export default Baseline(Basealign(DataCenterIconLight));
|
||||
export default Basealign(DataCenterIconLight)
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
import Basealign from '../basealign';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import DataCenterIcon from './svg/icon_data_center.svg';
|
||||
|
||||
export default Baseline(Basealign(DataCenterIcon));
|
||||
export default Basealign(DataCenterIcon)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
|
@ -12,4 +12,4 @@ const StyledHealthyIcon = styled(HealthyIcon)`
|
|||
: props.theme.orange};
|
||||
`;
|
||||
|
||||
export default Baseline(StyledHealthyIcon);
|
||||
export default StyledHealthyIcon
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@ import {
|
|||
CompletedIcon,
|
||||
PartCompletedIcon,
|
||||
IncompleteIcon,
|
||||
LoadingIcon
|
||||
LoadingIcon,
|
||||
ImportIcon
|
||||
} from './';
|
||||
|
||||
const List = styled.ul`
|
||||
|
|
@ -104,6 +105,12 @@ const Icons = () => (
|
|||
</Icon>
|
||||
<Label>Close</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<ImportIcon width="24" height="24" />
|
||||
</Icon>
|
||||
<Label>Import</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<IconActions width="4" height="16" />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
import React from 'react';
|
||||
|
||||
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 IncompleteIcon } from './incomplete';
|
||||
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
|
||||
import React from 'react';
|
||||
|
||||
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
|
||||
import React from 'react';
|
||||
|
||||
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
|
||||
import React from 'react';
|
||||
|
||||
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';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import MinusIcon from './svg/icon_minus.svg';
|
||||
|
||||
export default Baseline(Basealign(MinusIcon));
|
||||
export default Basealign(MinusIcon)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import PartCompletedIcon from './svg/icon_part_completed.svg';
|
||||
|
||||
export default Baseline(PartCompletedIcon);
|
||||
export default PartCompletedIcon
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
import Basealign from '../basealign';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import CloseIcon from './svg/icon_plus.svg';
|
||||
|
||||
export default Baseline(Basealign(CloseIcon));
|
||||
export default Basealign(CloseIcon)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
import React from 'react';
|
||||
|
||||
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';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import TritonIcon from './svg/triton_logo.svg';
|
||||
|
||||
export default Baseline(Basealign(TritonIcon));
|
||||
export default Basealign(TritonIcon)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Baseline from '../baseline';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import UnhealthyIcon from './svg/icon_error_failure.svg';
|
||||
|
||||
export default Baseline(UnhealthyIcon);
|
||||
export default UnhealthyIcon
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import Baseline from '../baseline';
|
||||
import Basealign from '../basealign';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import UserIcon from './svg/icon_user.svg';
|
||||
|
||||
export default Baseline(Basealign(UserIcon));
|
||||
export default UserIcon
|
||||
|
|
|
|||
|
|
@ -103,11 +103,24 @@ export {
|
|||
CloseIcon,
|
||||
PlusIcon,
|
||||
MinusIcon,
|
||||
IconActions,
|
||||
IconActionsLight,
|
||||
ArrowIcon,
|
||||
ArrowIconLight,
|
||||
TickIcon,
|
||||
InstancesIcon,
|
||||
InstancesIconLight,
|
||||
HealthyIcon,
|
||||
UnhealthyIcon,
|
||||
BinIcon,
|
||||
UserIcon,
|
||||
DataCenterIcon
|
||||
DataCenterIcon,
|
||||
DataCenterIconLight,
|
||||
ChevronIcon,
|
||||
TritonIcon,
|
||||
CompletedIcon,
|
||||
PartCompletedIcon,
|
||||
IncompleteIcon,
|
||||
LoadingIcon,
|
||||
ImportIcon
|
||||
} from './icons';
|
||||
|
|
|
|||
|
|
@ -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 GraphContainer } from './container';
|
||||
export { default as GraphTitle } from './title';
|
||||
|
|
@ -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 styled from 'styled-components';
|
||||
import is, { isNot } from 'styled-is';
|
||||
|
||||
import Widget from './widget';
|
||||
import P from '../text/p';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
|
|
@ -11,8 +13,16 @@ const Container = styled.div`
|
|||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
flex: 1 0 auto;
|
||||
align-self: stretch;
|
||||
min-height: ${remcalc(20)};
|
||||
|
||||
${isNot('inline')`
|
||||
flex: 1 0 auto;
|
||||
`} ${is('row')`
|
||||
flex-direction: row;
|
||||
`};
|
||||
${is('row', 'inline')`
|
||||
margin-left: ${remcalc(44)};
|
||||
`};
|
||||
`;
|
||||
|
||||
const Loader = styled(Widget)`
|
||||
|
|
@ -25,10 +35,11 @@ const Msg = P.extend`
|
|||
align-self: stretch;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
margin-left: ${remcalc(6)};
|
||||
`;
|
||||
|
||||
export default ({ msg }) => (
|
||||
<Container>
|
||||
export default ({ msg, row, inline }) => (
|
||||
<Container row={row} inline={inline}>
|
||||
<Loader />
|
||||
<Msg>{msg || 'Loading...'}</Msg>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ const H2 = require('/').H2;
|
|||
```
|
||||
|
||||
#### Heading 3
|
||||
|
||||
```jsx
|
||||
const H3 = require('/').H3;
|
||||
<H3>Inspire the lazy</H3>
|
||||
|
|
@ -74,17 +75,37 @@ const Anchor = require('/').Anchor;
|
|||
#### Reversed
|
||||
Reversed anchors is used on dark backgrounds, where a default anchor would not provide enough contrast.
|
||||
|
||||
```
|
||||
```jsx
|
||||
const Anchor = require('/').Anchor;
|
||||
<span style={{'background-color': '#343434'}}>
|
||||
<span style={{
|
||||
'background-color': '#3B46CC',
|
||||
height: 80,
|
||||
width: 250,
|
||||
display: 'flex',
|
||||
'align-items': 'center',
|
||||
'justify-content': 'center'
|
||||
}}>
|
||||
<Anchor href="https://joyent.com" reversed>Inspire the lazy secondary</Anchor>
|
||||
</span>
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
Disabled anchors cannot be actioned and the cursor is disabled.
|
||||
#### In text anchor
|
||||
In-paragraph anchor is a link that sits inside a text components. The default state does not have an underline. The underline appears on hover and click.
|
||||
|
||||
```jsx
|
||||
const P = require('/').P;
|
||||
const Anchor = require('/').Anchor;
|
||||
<p>Body text. Crack that whip. Give the past a slip. Step on a crack. Break your momma's back. When a problem comes along.You must whip it.
|
||||
<Anchor href="#">Learn More</Anchor>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
Disabled anchors cannot be actioned and the cursor is disabled.
|
||||
|
||||
```jsx
|
||||
const Anchor = require('/').Anchor;
|
||||
<Anchor disabled href="https://joyent.com">Inspire the lazy disabled</Anchor>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -13,18 +13,36 @@ module.exports = {
|
|||
})
|
||||
}),
|
||||
module: Object.assign(webpackConfig.module, {
|
||||
rules: webpackConfig.module.rules.map(rule => {
|
||||
if (!(rule.loader || '').match(/babel-loader/)) {
|
||||
return rule;
|
||||
}
|
||||
|
||||
return Object.assign(rule, {
|
||||
rules: [
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'svg-inline-loader'
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
use: ['babel-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(eot|ttf|woff|woff2)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
babelrc: true,
|
||||
cacheDirectory: false
|
||||
limit: 10000,
|
||||
name: 'static/media/[name].[hash:8].[ext]'
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
]
|
||||
})
|
||||
}),
|
||||
title: 'UI Toolkit',
|
||||
|
|
|
|||
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 |
|
|
@ -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()));
|
||||
});
|
||||
|
|
@ -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