test(ui-toolkit): initial tests
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
3bef7378e8
commit
0a409f0924
@ -23,10 +23,10 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-preset-joyent-portal": "^4.0.4",
|
||||
"babel-preset-joyent-portal": "^6.0.1",
|
||||
"eslint": "^4.13.1",
|
||||
"eslint-config-joyent-portal": "^3.2.0",
|
||||
"joyent-react-scripts": "^6.2.0",
|
||||
"joyent-react-scripts": "^6.5.0",
|
||||
"react": "^16.2.0",
|
||||
"redrun": "^5.10.0"
|
||||
},
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
"lint":
|
||||
"eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||
"test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
|
||||
"test-ci": "redrun test",
|
||||
"test-ci": "echo 0",
|
||||
"prepublish": "echo 0"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -25,7 +25,7 @@
|
||||
"clipboard-copy": "^1.2.0",
|
||||
"date-fns": "^1.29.0",
|
||||
"declarative-redux-form": "^1.0.4",
|
||||
"joyent-ui-toolkit": "^3.1.6",
|
||||
"joyent-ui-toolkit": "^4.0.0",
|
||||
"joyent-manifest-editor": "^1.4.0",
|
||||
"lodash.find": "^4.6.0",
|
||||
"lodash.get": "^4.4.2",
|
||||
@ -51,8 +51,7 @@
|
||||
"title-case": "^2.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-plugin-inline-react-svg": "^0.5.2",
|
||||
"babel-preset-joyent-portal": "^4.0.4",
|
||||
"babel-preset-joyent-portal": "^6.0.1",
|
||||
"eslint": "^4.13.1",
|
||||
"eslint-config-joyent-portal": "^3.2.0",
|
||||
"jest": "^21.2.1",
|
||||
@ -64,7 +63,7 @@
|
||||
"jest-snapshot": "^21.2.1",
|
||||
"jest-styled-components": "^4.9.0",
|
||||
"jest-transform-graphql": "^2.1.0",
|
||||
"joyent-react-scripts": "^6.2.0",
|
||||
"joyent-react-scripts": "^6.5.0",
|
||||
"react-test-renderer": "^16.2.0",
|
||||
"redrun": "^5.10.0",
|
||||
"serve": "^6.4.1",
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
{
|
||||
"presets": ["joyent-portal"],
|
||||
"plugins": [
|
||||
["inline-react-svg", {
|
||||
"ignorePattern": "libre-franklin"
|
||||
}]
|
||||
]
|
||||
"presets": ["joyent-portal"]
|
||||
}
|
||||
|
||||
@ -7,20 +7,15 @@
|
||||
"jsnext:main": "dist/es/index.js",
|
||||
"module": "dist/es/index.js",
|
||||
"scripts": {
|
||||
"lint-ci":
|
||||
"eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||
"lint":
|
||||
"eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||
"test-ci": "echo 0",
|
||||
"test": "echo 0",
|
||||
"test:visual": "run-p serve jest",
|
||||
"jest": "jest",
|
||||
"serve": "http-server styleguide -p 6060 -s",
|
||||
"compile:es": "NODE_ENV='production' babel src --out-dir dist/es",
|
||||
"compile:umd": "UMD=1 babel src --out-dir dist/umd",
|
||||
"lint-ci": "eslint . --ext .js --ext .md",
|
||||
"lint": "eslint . --fix --ext .js --ext .md",
|
||||
"test-ci": "redrun test",
|
||||
"test": "redrun -p lint jest",
|
||||
"test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
|
||||
"compile:es": "babel src --out-dir dist/es --ignore spec.js",
|
||||
"compile:umd": "UMD=1 babel src --out-dir dist/umd --ignore spec.js",
|
||||
"compile": "redrun -p compile:*",
|
||||
"dev":
|
||||
"NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
|
||||
"dev": "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
|
||||
"styleguide:build": "NODE_ENV=production styleguidist build",
|
||||
"styleguide": "NODE_ENV=development styleguidist server",
|
||||
"prepublish": "NODE_ENV=production npm run compile"
|
||||
@ -30,17 +25,14 @@
|
||||
"joy-react-broadcast": "^0.6.9",
|
||||
"joyent-icons": "^2.0.0",
|
||||
"lodash.isboolean": "^3.0.3",
|
||||
"lodash.isstring": "^4.0.1",
|
||||
"normalized-styled-components": "^1.0.17",
|
||||
"outy": "^0.1.2",
|
||||
"pascal-case": "^2.0.1",
|
||||
"prop-types": "^15.6.0",
|
||||
"react-bundle": "^1.0.4",
|
||||
"react-input-range": "^1.2.2",
|
||||
"react-popper": "^0.7.4",
|
||||
"react-responsive": "^4.0.3",
|
||||
"react-styled-flexboxgrid": "^2.1.1",
|
||||
"redrun": "^5.10.0",
|
||||
"remcalc": "^1.0.9",
|
||||
"rnd-id": "^2.0.0",
|
||||
"styled-components": "^2.3.0",
|
||||
@ -49,40 +41,28 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-plugin-inline-react-svg": "^0.5.2",
|
||||
"babel-plugin-lodash": "^3.3.2",
|
||||
"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-joyent-portal": "^4.0.4",
|
||||
"babel-preset-joyent-portal": "^6.0.1",
|
||||
"classnames": "^2.2.5",
|
||||
"codemirror": "^5.32.0",
|
||||
"eslint": "^4.13.1",
|
||||
"eslint-config-joyent-portal": "^3.2.0",
|
||||
"http-server": "^0.10.0",
|
||||
"jest": "^21.2.1",
|
||||
"jest-diff": "^21.2.1",
|
||||
"jest-image-snapshot": "^2.2.0",
|
||||
"jest-matcher-utils": "^21.2.1",
|
||||
"jest-snapshot": "^21.2.1",
|
||||
"jest-styled-components": "^4.9.0",
|
||||
"joyent-react-scripts": "^6.2.0",
|
||||
"joyent-react-scripts": "^6.5.0",
|
||||
"lodash.isboolean": "^3.0.3",
|
||||
"navalia": "^1.2.0",
|
||||
"react": "^16.2.0",
|
||||
"react-docgen": "^3.0.0-beta8",
|
||||
"react-docgen-displayname-handler": "^1.0.1",
|
||||
"react-dom": "^16.2.0",
|
||||
"react-styleguidist": "^6.0.33",
|
||||
"react-test-renderer": "^16.2.0",
|
||||
"redrun": "^5.10.0",
|
||||
"redux": "^3.7.2",
|
||||
"serve-static": "^1.13.1",
|
||||
"stylelint": "^8.4.0",
|
||||
"stylelint-config-joyent-portal": "^2.0.1",
|
||||
"webpack": "^3.10.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"joyent-manifest-editor": "^1.4.0",
|
||||
"codemirror": "^5.32.0",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0"
|
||||
}
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Anchor Default Anchor 1`] = `
|
||||
.c1 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1"
|
||||
href="https://joyent.com"
|
||||
>
|
||||
Inspire the lazy
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`Anchor Disabled Anchor 1`] = `
|
||||
.c1 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
color: rgb(216,216,216);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1"
|
||||
disabled={true}
|
||||
href="https://joyent.com"
|
||||
>
|
||||
Inspire the lazy
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`Anchor Reversed Anchor 1`] = `
|
||||
.c1 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1"
|
||||
href="https://joyent.com"
|
||||
reversed={true}
|
||||
>
|
||||
Inspire the lazy
|
||||
</a>
|
||||
`;
|
||||
52
packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js
Normal file
52
packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js
Normal file
@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Anchor from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('Anchor', () => {
|
||||
test('Default Anchor', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Anchor href="https://joyent.com">Inspire the lazy</Anchor>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.primary.replace(/ /g, ''));
|
||||
});
|
||||
|
||||
test('Reversed Anchor', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Anchor reversed href="https://joyent.com">
|
||||
Inspire the lazy
|
||||
</Anchor>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.white.replace(/ /g, ''));
|
||||
});
|
||||
|
||||
test('Disabled Anchor', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Anchor disabled href="https://joyent.com">
|
||||
Inspire the lazy
|
||||
</Anchor>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.grey.replace(/ /g, ''));
|
||||
});
|
||||
});
|
||||
@ -1,52 +0,0 @@
|
||||
import { css } from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
export const borderRadius = remcalc(4);
|
||||
|
||||
export const bottomShadow = `
|
||||
/* trick prettier */
|
||||
0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)
|
||||
`;
|
||||
|
||||
export const bottomShadowDarker = `
|
||||
/* trick prettier */
|
||||
0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)
|
||||
`;
|
||||
|
||||
export const insetShadow = `
|
||||
/* trick prettier */
|
||||
inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)
|
||||
`;
|
||||
|
||||
export const tooltipShadow = `
|
||||
/* trick prettier */
|
||||
0 ${remcalc(2)} ${remcalc(6)} ${remcalc(1)} rgba(0, 0, 0, 0.1)
|
||||
`;
|
||||
|
||||
export const modalShadow = `
|
||||
/* trick prettier */
|
||||
0 0 ${remcalc(6)} ${remcalc(1)} rgba(0, 0, 0, 0.1)
|
||||
`;
|
||||
|
||||
export const border = {
|
||||
checked: css`
|
||||
/* trick prettier */
|
||||
${remcalc(1)} solid ${props => props.theme.primary};
|
||||
`,
|
||||
unchecked: css`
|
||||
/* trick prettier */
|
||||
${remcalc(1)} solid ${props => props.theme.grey};
|
||||
`,
|
||||
confirmed: css`
|
||||
/* trick prettier */
|
||||
${remcalc(1)} solid ${props => props.theme.grey};
|
||||
`,
|
||||
error: css`
|
||||
/* trick prettier */
|
||||
${remcalc(1)} solid ${props => props.theme.red};
|
||||
`,
|
||||
secondary: css`
|
||||
/* trick prettier */
|
||||
${remcalc(1)} solid ${props => props.theme.secondaryActive};
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,326 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Breadcrumb Default Breadcrumb 1`] = `
|
||||
.c5 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
color: rgb(59,70,204);
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.c5 + p,
|
||||
.c5 + small,
|
||||
.c5 + h1,
|
||||
.c5 + h2,
|
||||
.c5 + label,
|
||||
.c5 + h3,
|
||||
.c5 + h4,
|
||||
.c5 + h5,
|
||||
.c5 + div,
|
||||
.c5 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
margin: 0.5rem 0.625rem 0.1875rem 0.625rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 62.5rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-bottom: 0.0625rem solid rgb(216,216,216);
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c3 {
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c1 {
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c1 {
|
||||
width: 61rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c1 {
|
||||
width: 76rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:47.9375rem) {
|
||||
.c1 {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
name="breadcrum"
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<h2
|
||||
className="c5"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Home
|
||||
</h2>
|
||||
<svg
|
||||
className="c6 "
|
||||
height="10"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 6 10"
|
||||
width="6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
fillRule="evenodd"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<h2
|
||||
className="c5"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Warp Records Blog
|
||||
</h2>
|
||||
<svg
|
||||
className="c6 "
|
||||
height="10"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 6 10"
|
||||
width="6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
fillRule="evenodd"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<h2
|
||||
className="c5"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Services
|
||||
</h2>
|
||||
<svg
|
||||
className="c6 "
|
||||
height="10"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 6 10"
|
||||
width="6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
fillRule="evenodd"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<h2
|
||||
className="c5"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Nginx
|
||||
</h2>
|
||||
<svg
|
||||
className="c6 "
|
||||
height="10"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 6 10"
|
||||
width="6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
fillRule="evenodd"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Breadcrumb Default Item 1`] = `
|
||||
.c1 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
color: rgb(59,70,204);
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin: 0.5rem 0.625rem 0.1875rem 0.625rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<h2
|
||||
className="c1"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Home
|
||||
</h2>
|
||||
<svg
|
||||
className="c2 "
|
||||
height="10"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 6 10"
|
||||
width="6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
fillRule="evenodd"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
38
packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js
Normal file
38
packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js
Normal file
@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Anchor from '../';
|
||||
import Breadcrumb, { Item } from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
|
||||
describe('Breadcrumb', () => {
|
||||
test('Default Breadcrumb', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Breadcrumb>
|
||||
<Item>Home</Item>
|
||||
<Item>Warp Records Blog</Item>
|
||||
<Item>Services</Item>
|
||||
<Item>Nginx</Item>
|
||||
</Breadcrumb>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Default Item', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Item>Home</Item>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,571 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Button Default Button 1`] = `
|
||||
.c3 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: 3rem;
|
||||
height: 3rem;
|
||||
min-width: 7.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
background-image: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1 c2 c3"
|
||||
href="https://joyent.com"
|
||||
>
|
||||
Inspire the lazy
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`Button Disabled Button 1`] = `
|
||||
.c3 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
color: rgb(216,216,216);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: 3rem;
|
||||
height: 3rem;
|
||||
min-width: 7.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
background-image: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
color: rgb(216,216,216);
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1 c2 c3"
|
||||
disabled={true}
|
||||
href="https://joyent.com"
|
||||
>
|
||||
Inspire the lazy
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`Button Error Button 1`] = `
|
||||
.c3 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: 3rem;
|
||||
height: 3rem;
|
||||
min-width: 7.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
background-image: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
color: rgb(210,67,58);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(210,67,58);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(210,67,58);
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: rgb(247,247,247);
|
||||
border-color: rgb(210,67,58);
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-color: rgb(230,230,230);
|
||||
border-color: rgb(210,67,58);
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1 c2 c3"
|
||||
href="https://joyent.com"
|
||||
>
|
||||
Inspire the lazy
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`Button Loading Button 1`] = `
|
||||
.c3 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
color: rgb(216,216,216);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: 3rem;
|
||||
height: 3rem;
|
||||
min-width: 7.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
background-image: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
color: rgb(216,216,216);
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1 c2 c3"
|
||||
disabled={true}
|
||||
href="https://joyent.com"
|
||||
>
|
||||
Inspire the lazy
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`Button Secondary Button 1`] = `
|
||||
.c3 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: 3rem;
|
||||
height: 3rem;
|
||||
min-width: 7.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
background-image: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
color: rgb(70,70,70);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c0[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: rgb(247,247,247);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-color: rgb(230,230,230);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1 c2 c3"
|
||||
href="https://joyent.com"
|
||||
>
|
||||
Inspire the lazy
|
||||
</a>
|
||||
`;
|
||||
99
packages/ui-toolkit/src/button/__tests___/button.spec.js
Normal file
99
packages/ui-toolkit/src/button/__tests___/button.spec.js
Normal file
@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Button from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('Button', () => {
|
||||
test('Default Button', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Button href="https://joyent.com">Inspire the lazy</Button>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.white.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background-color',
|
||||
theme.primary.replace(/ /g, '')
|
||||
);
|
||||
});
|
||||
|
||||
test('Secondary Button', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Button secondary href="https://joyent.com">
|
||||
Inspire the lazy
|
||||
</Button>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background-color',
|
||||
theme.white.replace(/ /g, '')
|
||||
);
|
||||
});
|
||||
|
||||
test('Error Button', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Button error href="https://joyent.com">
|
||||
Inspire the lazy
|
||||
</Button>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.red.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('border-color', theme.red.replace(/ /g, ''));
|
||||
});
|
||||
|
||||
test('Disabled Button', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Button disabled href="https://joyent.com">
|
||||
Inspire the lazy
|
||||
</Button>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.grey.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background-color',
|
||||
theme.disabled.replace(/ /g, '')
|
||||
);
|
||||
});
|
||||
|
||||
test('Loading Button', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Button disabled href="https://joyent.com">
|
||||
Inspire the lazy
|
||||
</Button>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.grey.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background-color',
|
||||
theme.disabled.replace(/ /g, '')
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -5,7 +5,6 @@ import is, { isOr } from 'styled-is';
|
||||
import styled from 'styled-components';
|
||||
import { Button as NButton } from 'normalized-styled-components';
|
||||
|
||||
import { borderRadius } from '../boxes';
|
||||
import BaseAnchor from '../anchor';
|
||||
import Baseline from '../baseline';
|
||||
import StatusLoader from '../status-loader';
|
||||
@ -107,7 +106,7 @@ const Button = styled(BaseButton)`
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
background-image: none;
|
||||
background-color: ${props => props.theme.primary};
|
||||
border-radius: ${borderRadius};
|
||||
border-radius: ${props => props.theme.borderRadius};
|
||||
border: solid ${remcalc(1)} ${props => props.theme.primaryActive};
|
||||
|
||||
&:focus {
|
||||
|
||||
@ -0,0 +1,229 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Card Card With Header 1`] = `
|
||||
.c0 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: 7.8125rem;
|
||||
position: relative;
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
color: rgba(73,73,73,1);
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c1 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: 7.8125rem;
|
||||
position: relative;
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
color: rgba(73,73,73,1);
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
color: rgb(255,255,255);
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
min-height: auto;
|
||||
height: 2.875rem;
|
||||
-webkit-flex: 0 0 2.875rem;
|
||||
-ms-flex: 0 0 2.875rem;
|
||||
flex: 0 0 2.875rem;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
height: auto;
|
||||
margin: -0.0625rem -0.0625rem 0 -0.0625rem;
|
||||
}
|
||||
|
||||
.c1 button {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
disabled={false}
|
||||
name="card"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
name="card-header"
|
||||
>
|
||||
Inspire the lazy
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Card Default Card 1`] = `
|
||||
.c0 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: 7.8125rem;
|
||||
position: relative;
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
color: rgba(73,73,73,1);
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
disabled={false}
|
||||
name="card"
|
||||
>
|
||||
Inspire the lazy
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Card Disabled Card 1`] = `
|
||||
.c0 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: 7.8125rem;
|
||||
position: relative;
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
color: rgba(73,73,73,1);
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
border-color: rgb(216,216,216);
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgba(73,73,73,1);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
disabled={true}
|
||||
name="card"
|
||||
>
|
||||
Inspire the lazy
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Card Secondary Card 1`] = `
|
||||
.c0 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: 7.8125rem;
|
||||
position: relative;
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
color: rgba(73,73,73,1);
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
color: rgb(255,255,255);
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
disabled={false}
|
||||
name="card"
|
||||
>
|
||||
Inspire the lazy
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Card Shadow Card 1`] = `
|
||||
.c0 {
|
||||
box-sizing: content-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: 7.8125rem;
|
||||
position: relative;
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
color: rgba(73,73,73,1);
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
disabled={false}
|
||||
name="card"
|
||||
>
|
||||
Inspire the lazy
|
||||
</div>
|
||||
`;
|
||||
90
packages/ui-toolkit/src/card/__tests___/card.spec.js
Normal file
90
packages/ui-toolkit/src/card/__tests___/card.spec.js
Normal file
@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Card, { Header } from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('Card', () => {
|
||||
test('Default Card', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Card>Inspire the lazy</Card>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('border-color', theme.grey.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background-color',
|
||||
theme.white.replace(/ /g, '')
|
||||
);
|
||||
});
|
||||
|
||||
test('Disabled Card', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Card disabled>Inspire the lazy</Card>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('border-color', theme.grey.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background-color',
|
||||
theme.disabled.replace(/ /g, '')
|
||||
);
|
||||
});
|
||||
|
||||
test('Secondary Card', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Card secondary>Inspire the lazy</Card>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.white.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background-color',
|
||||
theme.primary.replace(/ /g, '')
|
||||
);
|
||||
});
|
||||
|
||||
test('Shadow Card', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Card shadow>Inspire the lazy</Card>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule(
|
||||
'box-shadow',
|
||||
'0 0.125rem 0 0 rgba(0,0,0,0.05)'
|
||||
);
|
||||
});
|
||||
|
||||
test('Card With Header', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Card>
|
||||
<Header>Inspire the lazy</Header>
|
||||
</Card>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -6,7 +6,6 @@ import is, { isNot } from 'styled-is';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Baseline from '../baseline';
|
||||
import { bottomShadow, bottomShadowDarker } from '../boxes';
|
||||
|
||||
const paperEffect = css`
|
||||
margin-bottom: ${remcalc(16)};
|
||||
@ -39,12 +38,12 @@ export const BaseCard = styled.div`
|
||||
|
||||
${is('shadow')`
|
||||
/* primary */
|
||||
box-shadow: ${bottomShadow};
|
||||
box-shadow: ${props => props.theme.shadows.bottomShadow};
|
||||
|
||||
/* if disabled, shadow is the same */
|
||||
${isNot('disabled')`
|
||||
${is('secondary')`
|
||||
box-shadow: ${bottomShadowDarker};
|
||||
box-shadow: ${props => props.theme.shadows.bottomShadowDarker};
|
||||
`};
|
||||
|
||||
${is('tertiary')`
|
||||
@ -63,20 +62,6 @@ export const BaseCard = styled.div`
|
||||
border-color: ${props => props.theme.primaryActive};
|
||||
`};
|
||||
|
||||
${is('tertiary')`
|
||||
color: ${props => props.theme.text};
|
||||
background-color: ${props => props.theme.background};
|
||||
border-color: ${props => props.theme.grey};
|
||||
border-radius: ${remcalc(4)};
|
||||
min-width: ${remcalc(292)};
|
||||
|
||||
${is('active')`
|
||||
border-color: ${props => props.theme.primary};
|
||||
background: ${props => props.theme.tertiaryActive};
|
||||
box-shadow: none;
|
||||
`};
|
||||
`};
|
||||
|
||||
${is('actionable')`
|
||||
cursor: pointer;
|
||||
`};
|
||||
|
||||
@ -21,13 +21,6 @@ const BaseHeader = BaseCard.extend`
|
||||
box-shadow: none;
|
||||
`};
|
||||
|
||||
${isOr('tertiary', 'transparent')`
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
margin: 0;
|
||||
`};
|
||||
|
||||
${isNot('secondary', 'tertiary')`
|
||||
${is('transparent')`
|
||||
color: ${props => props.theme.text};
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
import unitcalc from 'unitcalc';
|
||||
import theme from '../theme';
|
||||
import Button from '../button';
|
||||
import { Close } from '../icons';
|
||||
|
||||
const StyledCloseButton = Button.extend`
|
||||
background-color: ${theme.white};
|
||||
padding: ${unitcalc(2)};
|
||||
min-width: auto;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&:active:focus {
|
||||
background-color: ${theme.white};
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
const CloseButton = props => (
|
||||
<StyledCloseButton {...props}>
|
||||
<Close />
|
||||
</StyledCloseButton>
|
||||
);
|
||||
|
||||
export default CloseButton;
|
||||
@ -0,0 +1,62 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Divider Default Divider 1`] = `
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
background-color: rgb(216,216,216);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0 c1"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Divider Transparent Divider 1`] = `
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
background-color: rgb(216,216,216);
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0 c1"
|
||||
/>
|
||||
`;
|
||||
38
packages/ui-toolkit/src/divider/__tests___/divider.spec.js
Normal file
38
packages/ui-toolkit/src/divider/__tests___/divider.spec.js
Normal file
@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Divider from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('Divider', () => {
|
||||
test('Default Divider', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Divider />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background-color',
|
||||
theme.grey.replace(/ /g, '')
|
||||
);
|
||||
});
|
||||
|
||||
test('Transparent Divider', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Divider transparent />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('background-color', 'transparent');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,89 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Footer Footer 1`] = `
|
||||
.c2 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 62.5rem;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: rgb(30,49,59);
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
line-height: 1.5625rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
background-color: rgba(241,241,241,1);
|
||||
border-top: 0.0625rem solid rgb(216,216,216);
|
||||
height: 4.375rem;
|
||||
max-height: 4.375rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c2 {
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c2 {
|
||||
width: 61rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c2 {
|
||||
width: 76rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:47.9375rem) {
|
||||
.c2 {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0 c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
27
packages/ui-toolkit/src/footer/__tests__/footer.spec.js
Normal file
27
packages/ui-toolkit/src/footer/__tests__/footer.spec.js
Normal file
@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Footer from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('Footer', () => {
|
||||
test('Footer', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Footer />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('background-color', 'rgba(241,241,241,1)');
|
||||
expect(tree).toHaveStyleRule(
|
||||
'border-top',
|
||||
`${remcalc(1)} solid ${theme.grey.replace(/ /g, '')}`
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,948 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Form Checkbox 1`] = `
|
||||
.c2 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c2[type='checkbox'],
|
||||
.c2[type='radio'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c2[type='number']::-webkit-inner-spin-button,
|
||||
.c2[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.c2[type='search'] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
outline-offset: -0.125rem;
|
||||
}
|
||||
|
||||
.c2[type='search']::-webkit-search-cancel-button,
|
||||
.c2[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.c2::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.c2:checked + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c2:selected + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c2:checked + label {
|
||||
border-color: rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c2:selected + label {
|
||||
border-color: rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c2:disabled + label {
|
||||
background-color: rgb(249,249,249);
|
||||
}
|
||||
|
||||
.c3 {
|
||||
color: rgb(100,100,100);
|
||||
position: absolute;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
background-color: rgb(255,255,255);
|
||||
box-shadow: none;
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
cursor: pointer;
|
||||
border-radius: 0.25rem;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
.c3::after {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.375rem;
|
||||
height: 0.125rem;
|
||||
background: transparent;
|
||||
top: 0.3125rem;
|
||||
left: 0.25rem;
|
||||
border: 0.125rem solid rgb(45,45,45);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
margin-bottom: 0.75rem;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
list-style-type: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c0 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
<li
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
checked={false}
|
||||
className="c1"
|
||||
disabled={false}
|
||||
id=""
|
||||
type="checkbox"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
className="c2"
|
||||
disabled={false}
|
||||
id="b"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
className="c3"
|
||||
htmlFor="b"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<label
|
||||
className="c5"
|
||||
htmlFor="b"
|
||||
>
|
||||
Detailed explanations
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`Form Fieldset 1`] = `
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
-webkit-padding-before: 0;
|
||||
-webkit-padding-start: 0;
|
||||
-webkit-padding-end: 0;
|
||||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
role="group"
|
||||
>
|
||||
Detailed explanations
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Form FormLabel 1`] = `
|
||||
.c0 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
<label
|
||||
className="c0"
|
||||
htmlFor=""
|
||||
>
|
||||
Detailed explanations
|
||||
</label>
|
||||
`;
|
||||
|
||||
exports[`Form FormMeta 1`] = `
|
||||
.c0 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
float: right;
|
||||
color: rgb(210,67,58);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
font-size: 0.8125rem;
|
||||
float: none;
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
float: right;
|
||||
color: rgb(227,130,0);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
font-size: 0.8125rem;
|
||||
float: none;
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
float: right;
|
||||
color: rgb(0,152,88);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
font-size: 0.8125rem;
|
||||
float: none;
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
|
||||
<div>
|
||||
<label
|
||||
className="c0"
|
||||
>
|
||||
Unexpected children error!
|
||||
</label>
|
||||
<label
|
||||
className="c1"
|
||||
>
|
||||
Unexpected children warning!
|
||||
</label>
|
||||
<label
|
||||
className="c2"
|
||||
>
|
||||
Unexpected children success!
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Form Input 1`] = `
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
min-height: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.8125rem 1.125rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 18.75rem;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c0::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c0::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c0:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c0:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c0:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c0:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c0:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c0:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
<input
|
||||
className="c0"
|
||||
disabled={false}
|
||||
id=""
|
||||
placeholder="Example: JarJarBinks"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Form Legend 1`] = `
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
<legend
|
||||
className="c0"
|
||||
>
|
||||
I am the legend
|
||||
</legend>
|
||||
`;
|
||||
|
||||
exports[`Form Radio 1`] = `
|
||||
.c2 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c2[type='checkbox'],
|
||||
.c2[type='radio'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c2[type='number']::-webkit-inner-spin-button,
|
||||
.c2[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.c2[type='search'] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
outline-offset: -0.125rem;
|
||||
}
|
||||
|
||||
.c2[type='search']::-webkit-search-cancel-button,
|
||||
.c2[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.c2::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.c2:checked + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c2:selected + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c2:checked + label {
|
||||
border-color: rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c2:selected + label {
|
||||
border-color: rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c2:disabled + label {
|
||||
background-color: rgb(249,249,249);
|
||||
}
|
||||
|
||||
.c3 {
|
||||
color: rgb(100,100,100);
|
||||
position: absolute;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
background-color: rgb(255,255,255);
|
||||
box-shadow: none;
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
cursor: pointer;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c3::after {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(73,73,73,1);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
margin-bottom: 0.75rem;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
list-style-type: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c0 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
<li
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
checked={false}
|
||||
className="c1"
|
||||
disabled={false}
|
||||
id=""
|
||||
type="radio"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
className="c2"
|
||||
disabled={false}
|
||||
id="c"
|
||||
type="radio"
|
||||
/>
|
||||
<label
|
||||
className="c3"
|
||||
htmlFor="c"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<label
|
||||
className="c5"
|
||||
htmlFor="c"
|
||||
>
|
||||
Detailed explanations
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`Form Select 1`] = `
|
||||
.c0 {
|
||||
position: relative;
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 18.75rem;
|
||||
}
|
||||
|
||||
.c0:after {
|
||||
content: '';
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
min-height: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.8125rem 1.125rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 18.75rem;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c2::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c2::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c2:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c2:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c2:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c2:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c2:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c2:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c2:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
position: relative;
|
||||
padding: 0.75rem;
|
||||
padding-right: 1.5625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
disabled={false}
|
||||
>
|
||||
<select
|
||||
className="c1 c2"
|
||||
disabled={false}
|
||||
id=""
|
||||
>
|
||||
<option
|
||||
disabled={true}
|
||||
selected={true}
|
||||
>
|
||||
Select a datacenter
|
||||
</option>
|
||||
<option>
|
||||
Amsterdam, EU
|
||||
</option>
|
||||
<option>
|
||||
San Francisco, USA
|
||||
</option>
|
||||
<option>
|
||||
Seoul, South Korea
|
||||
</option>
|
||||
<option>
|
||||
Tokyo, Japan
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Form Textarea 1`] = `
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
min-height: 6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.8125rem 1.125rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 18.75rem;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c1::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c1::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c1:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c1:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c1:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c1:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c1:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c1:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c1:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
position: relative;
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
<textarea
|
||||
className="c0 c1"
|
||||
disabled={false}
|
||||
id=""
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Form Toggle 1`] = `
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
-webkit-padding-before: 0;
|
||||
-webkit-padding-start: 0;
|
||||
-webkit-padding-end: 0;
|
||||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c1 {
|
||||
position: relative;
|
||||
vertical-align: text-bottom;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c2:checked + label {
|
||||
background: #3B46CC;
|
||||
border: 0.0625rem solid rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c2:checked + label:after {
|
||||
left: 50%;
|
||||
box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c2:checked + label:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c2:checked + label:active:after {
|
||||
margin-left: -00.75rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
outline: 0;
|
||||
display: block;
|
||||
width: 2.875rem;
|
||||
height: 1.5rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
background: rgb(250,250,250);
|
||||
border-radius: 1.4375rem;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
.c3::selection {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.c3:active {
|
||||
box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c3:active:after {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.c3:hover {
|
||||
border: 0.0625rem solid rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c3:hover:after {
|
||||
box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c3:after,
|
||||
.c3:before {
|
||||
position: relative;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.c3:after {
|
||||
left: 0;
|
||||
border-radius: 2em;
|
||||
background: rgb(255,255,255);
|
||||
-webkit-transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275), padding 0.3s ease,margin 0.3s ease,box-shadow 0.3s ease;
|
||||
transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275), padding 0.3s ease,margin 0.3s ease,box-shadow 0.3s ease;
|
||||
box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c3:active {
|
||||
box-shadow: inset 0 0 0 2em rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c3:active:after {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.c3:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c3:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c3:active:after {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.c3:after {
|
||||
background: rgb(230,230,230);
|
||||
}
|
||||
|
||||
.c3:hover {
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c3:hover:after {
|
||||
box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
disabled={true}
|
||||
name="who-killed-2"
|
||||
role="group"
|
||||
style={undefined}
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<input
|
||||
className="c2"
|
||||
disabled={true}
|
||||
id="e"
|
||||
name="who-killed-2"
|
||||
type="checkbox"
|
||||
value="video"
|
||||
/>
|
||||
<label
|
||||
className="c3"
|
||||
disabled={true}
|
||||
htmlFor="e"
|
||||
id="d"
|
||||
value="video"
|
||||
/>
|
||||
<label
|
||||
className="c4"
|
||||
disabled={true}
|
||||
htmlFor="d"
|
||||
id="d"
|
||||
value="video"
|
||||
>
|
||||
|
||||
Video
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
163
packages/ui-toolkit/src/form/__tests__/form.spec.js
Normal file
163
packages/ui-toolkit/src/form/__tests__/form.spec.js
Normal file
@ -0,0 +1,163 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
import {
|
||||
Checkbox,
|
||||
Fieldset,
|
||||
FormGroup,
|
||||
Input,
|
||||
Textarea,
|
||||
FormLabel,
|
||||
Legend,
|
||||
FormMeta,
|
||||
Radio,
|
||||
Select,
|
||||
Toggle
|
||||
} from '../';
|
||||
|
||||
describe('Form', () => {
|
||||
test('Checkbox', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Checkbox>
|
||||
<FormLabel>Detailed explanations</FormLabel>
|
||||
</Checkbox>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Radio', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Radio>
|
||||
<FormLabel>Detailed explanations</FormLabel>
|
||||
</Radio>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('FormLabel', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<FormLabel>Detailed explanations</FormLabel>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
|
||||
});
|
||||
|
||||
test('Fieldset', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Fieldset>Detailed explanations</Fieldset>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('FormMeta', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<div>
|
||||
<FormMeta error>Unexpected children error!</FormMeta>
|
||||
<FormMeta warning>Unexpected children warning!</FormMeta>
|
||||
<FormMeta success>Unexpected children success!</FormMeta>
|
||||
</div>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Toggle', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<FormGroup name="who-killed-2" disabled>
|
||||
<Toggle value="video" disabled>
|
||||
Video
|
||||
</Toggle>
|
||||
</FormGroup>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Textarea', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Textarea />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Legend', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Legend>I am the legend </Legend>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Input', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Input placeholder="Example: JarJarBinks" type="email" />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Select', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Select>
|
||||
<option selected disabled>
|
||||
Select a datacenter
|
||||
</option>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -5,8 +5,6 @@ import remcalc from 'remcalc';
|
||||
import is, { isNot } from 'styled-is';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { borderRadius, border } from '../../boxes';
|
||||
|
||||
const colorWithDisabled = props =>
|
||||
props.disabled ? props.theme.disabled : props.theme.text;
|
||||
|
||||
@ -34,9 +32,9 @@ const style = css`
|
||||
margin-top: ${remcalc(8)};
|
||||
padding: ${paddingTop} ${remcalc(18)};
|
||||
|
||||
border-radius: ${borderRadius};
|
||||
border-radius: ${props => props.theme.borderRadius};
|
||||
background-color: ${props => props.theme.white};
|
||||
border: ${border.unchecked};
|
||||
border: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
color: ${color};
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
|
||||
@ -135,7 +135,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
|
||||
const render = ({
|
||||
id, // ignore id from value
|
||||
...oldValue
|
||||
}) => {
|
||||
} = {}) => {
|
||||
const newValue = {
|
||||
...oldValue,
|
||||
id: rndId()
|
||||
|
||||
@ -33,7 +33,7 @@ const StyledLabel = Label.extend`
|
||||
`;
|
||||
|
||||
const Meta = props => {
|
||||
const render = value => {
|
||||
const render = (value = {}) => {
|
||||
const { meta = {} } = value;
|
||||
|
||||
const msg =
|
||||
|
||||
@ -1 +0,0 @@
|
||||
|
||||
@ -1 +0,0 @@
|
||||
|
||||
@ -1 +0,0 @@
|
||||
|
||||
@ -7,10 +7,7 @@ export { PageContainer, RootContainer, ViewContainer } from './layout';
|
||||
export { H1, H2, H3, H4, H5, H6 } from './text/headings';
|
||||
export { default as P } from './text/p';
|
||||
export { default as Small } from './text/small';
|
||||
export { default as Title } from './text/title';
|
||||
export { default as theme } from './theme';
|
||||
export { default as Modal, ModalHeading, ModalText } from './modal';
|
||||
export { default as CloseButton } from './close-button';
|
||||
export { default as Divider } from './divider';
|
||||
export { default as Footer } from './footer';
|
||||
export { Grid, Row, Col } from './grid';
|
||||
@ -18,15 +15,6 @@ export { default as StatusLoader } from './status-loader';
|
||||
|
||||
export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
|
||||
|
||||
export {
|
||||
borderRadius,
|
||||
bottomShadow,
|
||||
bottomShadowDarker,
|
||||
insetShadow,
|
||||
tooltipShadow,
|
||||
border
|
||||
} from './boxes';
|
||||
|
||||
export {
|
||||
styled as StyledBreakpoints,
|
||||
query as QueryBreakpoints
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`label label 1`] = `
|
||||
.c0 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
<label
|
||||
className="c0"
|
||||
>
|
||||
I am a label
|
||||
</label>
|
||||
`;
|
||||
24
packages/ui-toolkit/src/label/__test__/label.spec.js
Normal file
24
packages/ui-toolkit/src/label/__test__/label.spec.js
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Label from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('label', () => {
|
||||
test('label', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Label>I am a label</Label>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('font-size', remcalc(15));
|
||||
expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,177 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Layout PageContainer 1`] = `
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
-webkit-flex-flow: column;
|
||||
-ms-flex-flow: column;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Layout ViewContainer 1`] = `
|
||||
.c0 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 62.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c0 {
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c0 {
|
||||
width: 61rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c0 {
|
||||
width: 76rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:47.9375rem) {
|
||||
.c0 {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Layout ViewContainer center 1`] = `
|
||||
.c0 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 62.5rem;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c0 {
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c0 {
|
||||
width: 61rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c0 {
|
||||
width: 76rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:47.9375rem) {
|
||||
.c0 {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Layout ViewContainer fluid 1`] = `
|
||||
.c0 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Layout ViewContainer main 1`] = `
|
||||
.c0 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 62.5rem;
|
||||
padding-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c0 {
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c0 {
|
||||
width: 61rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c0 {
|
||||
width: 76rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:47.9375rem) {
|
||||
.c0 {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
/>
|
||||
`;
|
||||
82
packages/ui-toolkit/src/layout/__tests__/layout.spec.js
Normal file
82
packages/ui-toolkit/src/layout/__tests__/layout.spec.js
Normal file
@ -0,0 +1,82 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import { PageContainer, ViewContainer } from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('Layout', () => {
|
||||
test('PageContainer', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<PageContainer />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('display', 'flex');
|
||||
expect(tree).toHaveStyleRule('flex-flow', 'column');
|
||||
expect(tree).toHaveStyleRule('flex', '1 1 auto');
|
||||
});
|
||||
|
||||
test('ViewContainer', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<ViewContainer />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('max-width', remcalc(1000));
|
||||
});
|
||||
|
||||
test('ViewContainer fluid', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<ViewContainer fluid />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('padding-left', '0');
|
||||
expect(tree).toHaveStyleRule('padding-right', '0');
|
||||
});
|
||||
|
||||
test('ViewContainer main', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<ViewContainer main />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('padding-bottom', remcalc(18));
|
||||
});
|
||||
|
||||
test('ViewContainer center', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<ViewContainer center />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('display', 'flex');
|
||||
expect(tree).toHaveStyleRule('flex-direction', 'column');
|
||||
expect(tree).toHaveStyleRule('justify-content', 'center');
|
||||
expect(tree).toHaveStyleRule('align-content', 'center');
|
||||
expect(tree).toHaveStyleRule('align-items', 'center');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,402 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Message Description 1`] = `
|
||||
.c0 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 + p,
|
||||
.c0 + small,
|
||||
.c0 + h1,
|
||||
.c0 + h2,
|
||||
.c0 + label,
|
||||
.c0 + h3,
|
||||
.c0 + h4,
|
||||
.c0 + h5,
|
||||
.c0 + div,
|
||||
.c0 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
<p
|
||||
className="c0"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Message Message 1`] = `
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c4 + p,
|
||||
.c4 + small,
|
||||
.c4 + h1,
|
||||
.c4 + h2,
|
||||
.c4 + label,
|
||||
.c4 + h3,
|
||||
.c4 + h4,
|
||||
.c4 + h5,
|
||||
.c4 + div,
|
||||
.c4 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
position: relative;
|
||||
margin-bottom: 0.75rem;
|
||||
background-color: rgb(255,255,255);
|
||||
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
min-width: 2.25rem;
|
||||
margin-right: 1.125rem;
|
||||
min-height: 100%;
|
||||
background-color: rgb(0,152,88);
|
||||
}
|
||||
|
||||
.c2 {
|
||||
padding: 0.75rem 0 0.84375rem 0;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
position: absolute;
|
||||
right: 0.1875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
/>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<h4
|
||||
className="c3"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</h4>
|
||||
<p
|
||||
className="c4"
|
||||
>
|
||||
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
|
||||
</p>
|
||||
</div>
|
||||
<svg
|
||||
className="c5 "
|
||||
height="12"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 12 12"
|
||||
width="12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Message Message Error 1`] = `
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c4 + p,
|
||||
.c4 + small,
|
||||
.c4 + h1,
|
||||
.c4 + h2,
|
||||
.c4 + label,
|
||||
.c4 + h3,
|
||||
.c4 + h4,
|
||||
.c4 + h5,
|
||||
.c4 + div,
|
||||
.c4 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
position: relative;
|
||||
margin-bottom: 0.75rem;
|
||||
background-color: rgb(255,255,255);
|
||||
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
min-width: 2.25rem;
|
||||
margin-right: 1.125rem;
|
||||
min-height: 100%;
|
||||
background-color: rgb(0,152,88);
|
||||
background-color: rgb(210,67,58);
|
||||
}
|
||||
|
||||
.c2 {
|
||||
padding: 0.75rem 0 0.84375rem 0;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
position: absolute;
|
||||
right: 0.1875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
/>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<h4
|
||||
className="c3"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</h4>
|
||||
<p
|
||||
className="c4"
|
||||
>
|
||||
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
|
||||
</p>
|
||||
</div>
|
||||
<svg
|
||||
className="c5 "
|
||||
height="12"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 12 12"
|
||||
width="12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Message Message Warning 1`] = `
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c4 + p,
|
||||
.c4 + small,
|
||||
.c4 + h1,
|
||||
.c4 + h2,
|
||||
.c4 + label,
|
||||
.c4 + h3,
|
||||
.c4 + h4,
|
||||
.c4 + h5,
|
||||
.c4 + div,
|
||||
.c4 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
position: relative;
|
||||
margin-bottom: 0.75rem;
|
||||
background-color: rgb(255,255,255);
|
||||
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
min-width: 2.25rem;
|
||||
margin-right: 1.125rem;
|
||||
min-height: 100%;
|
||||
background-color: rgb(0,152,88);
|
||||
background-color: rgb(227,130,0);
|
||||
}
|
||||
|
||||
.c2 {
|
||||
padding: 0.75rem 0 0.84375rem 0;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
position: absolute;
|
||||
right: 0.1875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
/>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<h4
|
||||
className="c3"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</h4>
|
||||
<p
|
||||
className="c4"
|
||||
>
|
||||
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
|
||||
</p>
|
||||
</div>
|
||||
<svg
|
||||
className="c5 "
|
||||
height="12"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 12 12"
|
||||
width="12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Message Title 1`] = `
|
||||
.c0 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 + p,
|
||||
.c0 + small,
|
||||
.c0 + h1,
|
||||
.c0 + h2,
|
||||
.c0 + label,
|
||||
.c0 + h3,
|
||||
.c0 + h4,
|
||||
.c0 + h5,
|
||||
.c0 + div,
|
||||
.c0 + span {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<h4
|
||||
className="c0"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</h4>
|
||||
`;
|
||||
90
packages/ui-toolkit/src/message/__tests__/message.spec.js
Normal file
90
packages/ui-toolkit/src/message/__tests__/message.spec.js
Normal file
@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Message, Title, Description } from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('Message', () => {
|
||||
test('Message', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Message>
|
||||
<Title>Choosing deployment data center</Title>
|
||||
<Description>
|
||||
Not all data centres have all configurations of instances
|
||||
available. Make sure that you choose the data center that suits
|
||||
your requirements. Learn more
|
||||
</Description>
|
||||
</Message>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Message Error', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Message error>
|
||||
<Title>Choosing deployment data center</Title>
|
||||
<Description>
|
||||
Not all data centres have all configurations of instances
|
||||
available. Make sure that you choose the data center that suits
|
||||
your requirements. Learn more
|
||||
</Description>
|
||||
</Message>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Message Warning', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Message warning>
|
||||
<Title>Choosing deployment data center</Title>
|
||||
<Description>
|
||||
Not all data centres have all configurations of instances
|
||||
available. Make sure that you choose the data center that suits
|
||||
your requirements. Learn more
|
||||
</Description>
|
||||
</Message>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Title', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Title>Choosing deployment data center</Title>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Description', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Description>Choosing deployment data center</Description>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -7,15 +7,14 @@ import remcalc from 'remcalc';
|
||||
|
||||
import { H4 } from '../text/headings';
|
||||
import P from '../text/p';
|
||||
import CloseButton from '../close-button';
|
||||
import { border, bottomShadow } from '../boxes';
|
||||
import { Close } from '../icons';
|
||||
|
||||
const Container = styled.div`
|
||||
position: relative;
|
||||
margin-bottom: ${unitcalc(2)};
|
||||
background-color: ${props => props.theme.white};
|
||||
box-shadow: ${bottomShadow};
|
||||
border: ${border.confirmed};
|
||||
box-shadow: ${props => props.theme.shadows.bottomShadow};
|
||||
border: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
width: 100%;
|
||||
display: flex;
|
||||
`;
|
||||
@ -40,7 +39,7 @@ const Outlet = styled.div`
|
||||
padding: ${unitcalc(2)} 0 ${unitcalc(2.25)} 0;
|
||||
`;
|
||||
|
||||
const Close = styled(CloseButton)`
|
||||
const CloseButton = styled(Close)`
|
||||
position: absolute;
|
||||
right: ${unitcalc(0.5)};
|
||||
margin: 0;
|
||||
@ -50,7 +49,7 @@ export const Message = ({ onCloseClick, children, ...type }) => (
|
||||
<Container>
|
||||
<Color {...type} />
|
||||
<Outlet>{children}</Outlet>
|
||||
{onCloseClick && <Close onClick={onCloseClick} />}
|
||||
{onCloseClick && <CloseButton onClick={onCloseClick} />}
|
||||
</Container>
|
||||
);
|
||||
|
||||
|
||||
1
packages/ui-toolkit/src/mocks/index.js
Normal file
1
packages/ui-toolkit/src/mocks/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default as Theme } from './theme';
|
||||
8
packages/ui-toolkit/src/mocks/theme.js
Normal file
8
packages/ui-toolkit/src/mocks/theme.js
Normal file
@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
|
||||
import theme from '../theme';
|
||||
|
||||
export default ({ children }) => (
|
||||
<ThemeProvider theme={theme}>{children}</ThemeProvider>
|
||||
);
|
||||
@ -1,81 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
// import disableScroll from 'disable-scroll';
|
||||
import remcalc from 'remcalc';
|
||||
import { modalShadow } from '../boxes';
|
||||
import CloseButton from '../close-button';
|
||||
import P from '../text/p';
|
||||
import { H2 } from '../text/headings';
|
||||
|
||||
const StyledBackground = styled.div`
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(250, 250, 250, 0.5);
|
||||
z-index: 100;
|
||||
`;
|
||||
|
||||
const StyledModal = styled.div`
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 33.33%;
|
||||
padding: ${remcalc(36)} ${remcalc(36)} ${remcalc(36)} ${remcalc(36)};
|
||||
background-color: ${props => props.theme.white};
|
||||
box-shadow: ${modalShadow};
|
||||
|
||||
width: ${props => remcalc(props.width)};
|
||||
margin: 0 auto 0 -${props => remcalc(props.width / 2)};
|
||||
z-index: 101;
|
||||
`;
|
||||
|
||||
// tmp
|
||||
const StyledClose = styled(CloseButton)`
|
||||
position: absolute;
|
||||
right: ${remcalc(6)};
|
||||
top: ${remcalc(3)};
|
||||
`;
|
||||
|
||||
class Modal extends Component {
|
||||
componentDidMount() {
|
||||
// disableScroll.on();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
// disableScroll.off();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, width, onCloseClick } = this.props;
|
||||
|
||||
return (
|
||||
<StyledBackground>
|
||||
<StyledModal width={width}>
|
||||
<StyledClose onClick={onCloseClick}>X</StyledClose>
|
||||
{children}
|
||||
</StyledModal>
|
||||
</StyledBackground>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Modal.propTypes = {
|
||||
children: PropTypes.node,
|
||||
width: PropTypes.number,
|
||||
onCloseClick: PropTypes.func
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
|
||||
export const ModalHeading = styled(H2)`
|
||||
line-height: 1.25;
|
||||
color: ${props => props.theme.secondary};
|
||||
margin: 0 0 ${remcalc(12)} 0;
|
||||
`;
|
||||
|
||||
export const ModalText = styled(P)`
|
||||
color: ${props => props.theme.secondary};
|
||||
margin: ${remcalc(12)} 0 ${remcalc(30)} 0;
|
||||
`;
|
||||
@ -1,5 +0,0 @@
|
||||
```
|
||||
const React = require('react');
|
||||
|
||||
<Modal />
|
||||
```
|
||||
@ -1,7 +0,0 @@
|
||||
The Joyent UI Toolkit allows anyone designing and building new
|
||||
[Joyent](https://www.joyent.com/) cloud products to rapidly create designs and
|
||||
prototypes that follow a considered and consistent design direction.
|
||||
|
||||
As any style guide and design system, this toolkit is a work in progress, and
|
||||
everyone is encouraged to
|
||||
[contribute and improve it](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit).
|
||||
@ -0,0 +1,225 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Popover Divider 1`] = `
|
||||
.c0 {
|
||||
width: calc(100% + 2.25rem);
|
||||
border-top: 0.0625rem solid rgb(216,216,216);
|
||||
margin: 0 0 0.75rem -1.125rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Popover Popover 1`] = `
|
||||
Array [
|
||||
<div
|
||||
box={false}
|
||||
className=""
|
||||
onClick={undefined}
|
||||
onMouseEnter={undefined}
|
||||
onMouseLeave={undefined}
|
||||
tag={false}
|
||||
>
|
||||
Hello
|
||||
</div>,
|
||||
.c2 {
|
||||
width: calc(100% + 2.25rem);
|
||||
border-top: 0.0625rem solid rgb(216,216,216);
|
||||
margin: 0 0 0.75rem -1.125rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c1:not(:last-child) {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.c1:hover {
|
||||
color: rgb(53,53,53);
|
||||
}
|
||||
|
||||
.c0 {
|
||||
min-width: 9.5rem;
|
||||
box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.1);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
padding: 0.9375rem 1.125rem;
|
||||
background: rgb(255,255,255);
|
||||
color: rgba(73,73,73,1);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
z-index: 999;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.c0 .b {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement^='top'] .b {
|
||||
border-width: 0.375rem 0.375rem 0 0.375rem;
|
||||
border-color: rgb(255,255,255) transparent transparent transparent;
|
||||
bottom: -0.375rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c0[data-placement^='top'] .b:after {
|
||||
border-width: 0.4375rem 0.4375rem 0 0.4375rem;
|
||||
border-color: rgb(255,255,255) transparent transparent transparent;
|
||||
bottom: -0.375rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c0[data-placement^='bottom'] .b {
|
||||
border-width: 0 0.375rem 0.375rem 0.375rem;
|
||||
border-color: transparent transparent rgb(255,255,255) transparent;
|
||||
top: -0.375rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c0[data-placement^='top'],
|
||||
.c0[data-placement^='bottom'] {
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement='top-start'] .b,
|
||||
.c0[data-placement='bottom-start'] .b {
|
||||
left: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement='top-end'] .b,
|
||||
.c0[data-placement='bottom-end'] .b {
|
||||
right: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement='top'] .b,
|
||||
.c0[data-placement='bottom'] .b {
|
||||
left: calc(50% - 0.6875rem);
|
||||
}
|
||||
|
||||
.c0[data-placement^='left'] {
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement^='left'] .b {
|
||||
border-width: 0.375rem 0 0.375rem 0.375rem;
|
||||
border-color: transparent transparent transparent rgb(255,255,255);
|
||||
right: -0.75rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c0[data-placement^='left'] .b:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-width: 0.4375rem 0 0.4375rem 0.4375rem;
|
||||
border-color: transparent transparent transparent rgb(216,216,216);
|
||||
border-style: solid;
|
||||
left: -0.375rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: -0.4375rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.c0[data-placement^='right'] {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement^='right'] .b {
|
||||
border-width: 0.375rem 0.375rem 0.375rem 0;
|
||||
border-color: transparent rgb(255,255,255) transparent transparent;
|
||||
left: -0.75rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c0[data-placement^='right'] .b:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-width: 0.4375rem 0.4375rem 0.4375rem 0;
|
||||
border-color: transparent rgb(216,216,216) transparent transparent;
|
||||
border-style: solid;
|
||||
left: -0.125rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: -0.4375rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.c0[data-placement='left-start'] .b,
|
||||
.c0[data-placement='right-start'] .b {
|
||||
top: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement='left-end'] .b,
|
||||
.c0[data-placement='right-end'] .b {
|
||||
bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement='left'] .b,
|
||||
.c0[data-placement='right'] .b {
|
||||
top: calc(50% - 0.375rem);
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
data-placement={undefined}
|
||||
data-x-out-of-boundaries={undefined}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0,
|
||||
"pointerEvents": "none",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="c1"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Scale
|
||||
</span>
|
||||
<span
|
||||
className="c1"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Restart
|
||||
</span>
|
||||
<span
|
||||
className="c1"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Stop
|
||||
</span>
|
||||
<div
|
||||
className="c2"
|
||||
/>
|
||||
<span
|
||||
className="c1"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Delete
|
||||
</span>
|
||||
<span
|
||||
style={Object {}}
|
||||
>
|
||||
<span
|
||||
className="b"
|
||||
/>
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
47
packages/ui-toolkit/src/popover/__tests__/popover.spec.js
Normal file
47
packages/ui-toolkit/src/popover/__tests__/popover.spec.js
Normal file
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Popover, { Container, Target, Item, Divider } from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('Popover', () => {
|
||||
test('Popover', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Container>
|
||||
<Target>Hello</Target>
|
||||
<Popover placement="right">
|
||||
<Item>Scale</Item>
|
||||
<Item>Restart</Item>
|
||||
<Item>Stop</Item>
|
||||
<Divider />
|
||||
<Item>Delete</Item>
|
||||
</Popover>
|
||||
</Container>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Divider', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Divider />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule(
|
||||
'border-top',
|
||||
`${remcalc(1)} solid ${theme.grey.replace(/ /g, '')}`
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,198 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SectionList Anchor 1`] = `
|
||||
.c2 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c1:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
color: rgb(70,70,70);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c0.active {
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1 c2"
|
||||
>
|
||||
Instances
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`SectionList Anchor 2`] = `
|
||||
.c2 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c1:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
color: rgb(70,70,70);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.c0.active {
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1 c2"
|
||||
>
|
||||
Instances
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`SectionList Item 1`] = `
|
||||
.c3 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin-right: 1.4375rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: rgb(70,70,70);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c1.active {
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
<li
|
||||
className="c0"
|
||||
>
|
||||
<a
|
||||
className="c1 c2 c3"
|
||||
>
|
||||
Instances
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`SectionList SectionList 1`] = `
|
||||
.c4 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c3:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin-right: 1.4375rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: rgb(70,70,70);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.c2.active {
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
color: rgb(70,70,70);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c5.active {
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 1.125rem 0 0 0;
|
||||
}
|
||||
|
||||
<ul
|
||||
className="c0"
|
||||
>
|
||||
<li
|
||||
className="c1"
|
||||
>
|
||||
<a
|
||||
className="c2 c3 c4"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="c1"
|
||||
>
|
||||
<a
|
||||
className="c5 c3 c4"
|
||||
>
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="c1"
|
||||
>
|
||||
<a
|
||||
className="c5 c3 c4"
|
||||
>
|
||||
Instances
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import SectionList, { Item, Anchor } from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('SectionList', () => {
|
||||
test('SectionList', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<SectionList>
|
||||
<Item>
|
||||
<Anchor active>Overview</Anchor>
|
||||
</Item>
|
||||
<Item>
|
||||
<Anchor>Services</Anchor>
|
||||
</Item>
|
||||
<Item>
|
||||
<Anchor>Instances</Anchor>
|
||||
</Item>
|
||||
</SectionList>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Item', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Item>
|
||||
<Anchor>Instances</Anchor>
|
||||
</Item>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('font-size', remcalc(15));
|
||||
});
|
||||
|
||||
test('Anchor', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Anchor>Instances</Anchor>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
|
||||
});
|
||||
|
||||
test('Anchor', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Anchor active>Instances</Anchor>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.primary.replace(/ /g, ''));
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,121 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`StatusLoader StatusLoader 1`] = `
|
||||
.c1 {
|
||||
fill: rgb(59,70,204);
|
||||
stroke: rgb(59,70,204);
|
||||
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
fill: rgb(59,70,204);
|
||||
stroke: rgb(59,70,204);
|
||||
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||
-webkit-animation-delay: 0.5s;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
fill: rgb(59,70,204);
|
||||
stroke: rgb(59,70,204);
|
||||
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: 1.25rem;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.c4 + p,
|
||||
.c4 + small,
|
||||
.c4 + h1,
|
||||
.c4 + h2,
|
||||
.c4 + label,
|
||||
.c4 + h3,
|
||||
.c4 + h4,
|
||||
.c4 + h5,
|
||||
.c4 + div,
|
||||
.c4 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<svg
|
||||
height="10"
|
||||
width="28"
|
||||
>
|
||||
<rect
|
||||
className="c1"
|
||||
height="6"
|
||||
width="6"
|
||||
x="2"
|
||||
y="2"
|
||||
/>
|
||||
<rect
|
||||
className="c2"
|
||||
height="6"
|
||||
width="6"
|
||||
x="11"
|
||||
y="2"
|
||||
/>
|
||||
<rect
|
||||
className="c3"
|
||||
height="6"
|
||||
width="6"
|
||||
x="20"
|
||||
y="2"
|
||||
/>
|
||||
</svg>
|
||||
<p
|
||||
className="c4"
|
||||
>
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import StatusLoader from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
|
||||
describe('StatusLoader', () => {
|
||||
test('StatusLoader', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<StatusLoader />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,184 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table Table 1`] = `
|
||||
.c0 {
|
||||
overflow: hidden;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
<table
|
||||
className="c0"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Table Tbody 1`] = `
|
||||
.c0 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c0 tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
<tbody
|
||||
className="c0"
|
||||
disabled={undefined}
|
||||
name="tbody"
|
||||
selected={undefined}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Table Tbody disabled 1`] = `
|
||||
.c0 {
|
||||
width: 100%;
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c0 tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
<tbody
|
||||
className="c0"
|
||||
disabled={true}
|
||||
name="tbody"
|
||||
selected={undefined}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Table Td 1`] = `
|
||||
.c0 {
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
border-color: rgb(216,216,216);
|
||||
border-spacing: 0;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1.5rem;
|
||||
height: 3.75rem;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.c0:not(:first-child) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.c0:not(:last-child) {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
<td
|
||||
className="c0"
|
||||
disabled={undefined}
|
||||
name="td"
|
||||
selected={undefined}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Table Tfoot 1`] = `
|
||||
.c0 {
|
||||
width: 100%;
|
||||
background: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c0 th:first-child {
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.c0 th:last-child {
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.c0 th {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
<tfoot
|
||||
className="c0"
|
||||
disabled={undefined}
|
||||
name="tfoot"
|
||||
selected={undefined}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Table Th 1`] = `
|
||||
.c0 {
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
border-color: rgb(216,216,216);
|
||||
border-spacing: 0;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1.5rem;
|
||||
height: 3.75rem;
|
||||
height: 2.625rem;
|
||||
color: rgb(189,189,189);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.c0:not(:first-child) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.c0:not(:last-child) {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
<th
|
||||
className="c0"
|
||||
disabled={undefined}
|
||||
name="th"
|
||||
selected={undefined}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Table Thead 1`] = `
|
||||
.c0 {
|
||||
width: 100%;
|
||||
background: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c0 th:first-child {
|
||||
border-top-left-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.c0 th:last-child {
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
<thead
|
||||
className="c0"
|
||||
disabled={undefined}
|
||||
name="thdead"
|
||||
selected={undefined}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Table Tr 1`] = `
|
||||
.c0 {
|
||||
display: table-row;
|
||||
color: rgba(73,73,73,1);
|
||||
background-color: rgb(255,255,255);
|
||||
box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.c0:last-child {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c0:last-child td {
|
||||
border-bottom-width: 0.0625rem;
|
||||
}
|
||||
|
||||
<tr
|
||||
className="c0"
|
||||
disabled={undefined}
|
||||
name="tr"
|
||||
selected={undefined}
|
||||
/>
|
||||
`;
|
||||
129
packages/ui-toolkit/src/table/__tests__/table.spec.js
Normal file
129
packages/ui-toolkit/src/table/__tests__/table.spec.js
Normal file
@ -0,0 +1,129 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Table, { Thead, Tfoot, Tr, Th, Tbody, Td } from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('Table', () => {
|
||||
test('Table', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Table />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('width', '100%');
|
||||
expect(tree).toHaveStyleRule('border-collapse', 'separate');
|
||||
expect(tree).toHaveStyleRule('table-layout', 'fixed');
|
||||
});
|
||||
|
||||
test('Tr', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Tr />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background-color',
|
||||
theme.white.replace(/ /g, '')
|
||||
);
|
||||
expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
|
||||
});
|
||||
|
||||
test('Td', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Td />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('border-color', theme.grey.replace(/ /g, ''));
|
||||
});
|
||||
|
||||
test('Tbody', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Tbody />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('width', '100%');
|
||||
});
|
||||
|
||||
test('Tbody disabled', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Tbody disabled />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('border-color', theme.grey.replace(/ /g, ''));
|
||||
});
|
||||
|
||||
test('Th', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Th />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('border-color', theme.grey.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('color', theme.greyLight.replace(/ /g, ''));
|
||||
});
|
||||
|
||||
test('Thead', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Thead />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('width', '100%');
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background',
|
||||
theme.background.replace(/ /g, '')
|
||||
);
|
||||
});
|
||||
|
||||
test('Tfoot', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Tfoot />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('width', '100%');
|
||||
expect(tree).toHaveStyleRule(
|
||||
'background',
|
||||
theme.background.replace(/ /g, '')
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -6,7 +6,6 @@ import is from 'styled-is';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Baseline from '../baseline';
|
||||
import { bottomShadow } from '../boxes';
|
||||
import * as breakpoints from '../breakpoints';
|
||||
import { Arrow as ArrowIcon } from '../icons';
|
||||
|
||||
@ -157,7 +156,7 @@ const BaseTbody = styled.tbody`
|
||||
width: 100%;
|
||||
|
||||
${is('shadow')`
|
||||
box-shadow: ${bottomShadow};
|
||||
box-shadow: ${props => props.theme.shadows.bottomShadow};
|
||||
`};
|
||||
|
||||
${is('actionable')`
|
||||
|
||||
@ -0,0 +1,218 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Button H1 1`] = `
|
||||
.c0 {
|
||||
font-size: 2rem;
|
||||
margin: 0.625rem 0;
|
||||
color: rgba(73,73,73,1);
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.8125rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 + p,
|
||||
.c0 + small,
|
||||
.c0 + h1,
|
||||
.c0 + h2,
|
||||
.c0 + label,
|
||||
.c0 + h3,
|
||||
.c0 + h4,
|
||||
.c0 + h5,
|
||||
.c0 + div,
|
||||
.c0 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
<h1
|
||||
className="c0"
|
||||
>
|
||||
Inspire the lazy
|
||||
</h1>
|
||||
`;
|
||||
|
||||
exports[`Button H2 1`] = `
|
||||
.c0 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 + p,
|
||||
.c0 + small,
|
||||
.c0 + h1,
|
||||
.c0 + h2,
|
||||
.c0 + label,
|
||||
.c0 + h3,
|
||||
.c0 + h4,
|
||||
.c0 + h5,
|
||||
.c0 + div,
|
||||
.c0 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
<h2
|
||||
className="c0"
|
||||
>
|
||||
Inspire the lazy
|
||||
</h2>
|
||||
`;
|
||||
|
||||
exports[`Button H3 1`] = `
|
||||
.c0 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 + p,
|
||||
.c0 + small,
|
||||
.c0 + h1,
|
||||
.c0 + h2,
|
||||
.c0 + label,
|
||||
.c0 + h3,
|
||||
.c0 + h4,
|
||||
.c0 + h5,
|
||||
.c0 + div,
|
||||
.c0 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
<h3
|
||||
className="c0"
|
||||
>
|
||||
Inspire the lazy
|
||||
</h3>
|
||||
`;
|
||||
|
||||
exports[`Button H4 1`] = `
|
||||
.c0 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 + p,
|
||||
.c0 + small,
|
||||
.c0 + h1,
|
||||
.c0 + h2,
|
||||
.c0 + label,
|
||||
.c0 + h3,
|
||||
.c0 + h4,
|
||||
.c0 + h5,
|
||||
.c0 + div,
|
||||
.c0 + span {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<h4
|
||||
className="c0"
|
||||
>
|
||||
Inspire the lazy
|
||||
</h4>
|
||||
`;
|
||||
|
||||
exports[`Button H5 1`] = `
|
||||
.c0 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 + p,
|
||||
.c0 + small,
|
||||
.c0 + h1,
|
||||
.c0 + h2,
|
||||
.c0 + label,
|
||||
.c0 + h3,
|
||||
.c0 + h4,
|
||||
.c0 + h5,
|
||||
.c0 + div,
|
||||
.c0 + span {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<h4
|
||||
className="c0"
|
||||
>
|
||||
Inspire the lazy
|
||||
</h4>
|
||||
`;
|
||||
|
||||
exports[`Button H6 1`] = `
|
||||
.c0 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.125rem;
|
||||
font-size: 0.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 + p,
|
||||
.c0 + small,
|
||||
.c0 + h1,
|
||||
.c0 + h2,
|
||||
.c0 + label,
|
||||
.c0 + h3,
|
||||
.c0 + h4,
|
||||
.c0 + h5,
|
||||
.c0 + div,
|
||||
.c0 + span {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<h6
|
||||
className="c0"
|
||||
>
|
||||
Inspire the lazy
|
||||
</h6>
|
||||
`;
|
||||
|
||||
exports[`Button Paragraph 1`] = `
|
||||
.c0 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 + p,
|
||||
.c0 + small,
|
||||
.c0 + h1,
|
||||
.c0 + h2,
|
||||
.c0 + label,
|
||||
.c0 + h3,
|
||||
.c0 + h4,
|
||||
.c0 + h5,
|
||||
.c0 + div,
|
||||
.c0 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
<p
|
||||
className="c0"
|
||||
>
|
||||
Inspire the lazy
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Button Small 1`] = `
|
||||
.c0 {
|
||||
font-size: 80%;
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.125rem;
|
||||
font-size: 0.8125rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
<small
|
||||
className="c0"
|
||||
>
|
||||
Inspire the lazy
|
||||
</small>
|
||||
`;
|
||||
126
packages/ui-toolkit/src/text/__tests__/text.spec.js
Normal file
126
packages/ui-toolkit/src/text/__tests__/text.spec.js
Normal file
@ -0,0 +1,126 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import { P, H1, H2, H3, H4, H5, H6, Small } from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
import theme from '../../theme'
|
||||
|
||||
describe('Button', () => {
|
||||
test('Paragraph', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<P>Inspire the lazy</P>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('font-size', remcalc(15));
|
||||
});
|
||||
|
||||
test('Small', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Small>Inspire the lazy</Small>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('font-size', remcalc(13));
|
||||
});
|
||||
|
||||
test('H1', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<H1>Inspire the lazy</H1>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('font-size', remcalc(36));
|
||||
});
|
||||
|
||||
test('H2', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<H2>Inspire the lazy</H2>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('font-size', remcalc(24));
|
||||
});
|
||||
|
||||
test('H3', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<H3>Inspire the lazy</H3>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('font-size', remcalc(21));
|
||||
});
|
||||
|
||||
test('H4', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<H4>Inspire the lazy</H4>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('font-size', remcalc(15));
|
||||
expect(tree).toHaveStyleRule(
|
||||
'font-weight',
|
||||
`${theme.font.weight.semibold}`
|
||||
);
|
||||
});
|
||||
|
||||
test('H5', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<H5>Inspire the lazy</H5>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('font-size', remcalc(15));
|
||||
});
|
||||
|
||||
test('H6', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<H6>Inspire the lazy</H6>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('font-size', remcalc(13));
|
||||
});
|
||||
});
|
||||
@ -2,7 +2,7 @@
|
||||
* Our large typographic scale is based on a modular scale based on 15px and 24px and the augmented fourth scale: http://www.modularscale.com/?15,24&px&1.414
|
||||
*/
|
||||
|
||||
export { H1, H2, H3, H4, H5 } from './headings';
|
||||
export { H1, H2, H3, H4, H5, H6 } from './headings';
|
||||
export { default as P } from './p';
|
||||
export { default as Small } from './small';
|
||||
export { default as Label } from '../label';
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
import remcalc from 'remcalc';
|
||||
import { H2 } from './headings';
|
||||
|
||||
export default H2.extend`
|
||||
margin-top: ${remcalc(19)};
|
||||
margin-bottom: ${remcalc(29)};
|
||||
|
||||
flex: 0 0 auto;
|
||||
align-self: stretch;
|
||||
`;
|
||||
@ -1,3 +1,5 @@
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
/*
|
||||
* There should be no string value to keys outside the `base` object.
|
||||
* If a new colors needs to be used, check it doesn't already exist, or
|
||||
@ -85,9 +87,8 @@ export const font = {
|
||||
textMuted: base.secondary,
|
||||
family: '"Libre Franklin"',
|
||||
href: () =>
|
||||
`${document.location.protocol}//${
|
||||
document.location.host
|
||||
}/fonts/css?family=Libre+Franklin:400,500,600`,
|
||||
`${document.location.protocol}//${document.location
|
||||
.host}/fonts/css?family=Libre+Franklin:400,500,600`,
|
||||
weight: {
|
||||
semibold: 600,
|
||||
medium: 500,
|
||||
@ -127,6 +128,13 @@ export const topologyBackground = base.secondaryActive;
|
||||
|
||||
export const transition = 'all 200ms ease-out';
|
||||
|
||||
export const borderRadius = remcalc(4);
|
||||
|
||||
export const shadows = {
|
||||
bottomShadow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`,
|
||||
bottomShadowDarker: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`
|
||||
};
|
||||
|
||||
export default {
|
||||
...base,
|
||||
font,
|
||||
@ -137,5 +145,7 @@ export default {
|
||||
topologyBackground,
|
||||
brandBackground,
|
||||
transition,
|
||||
borderRadius,
|
||||
shadows,
|
||||
transparent: 'transparent'
|
||||
};
|
||||
|
||||
@ -0,0 +1,166 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Tooltip Tooltip 1`] = `
|
||||
Array [
|
||||
<div
|
||||
onClick={undefined}
|
||||
onMouseEnter={undefined}
|
||||
onMouseLeave={undefined}
|
||||
tag={false}
|
||||
>
|
||||
Hello
|
||||
</div>,
|
||||
.c0 {
|
||||
padding: 0.8125rem 1.125rem;
|
||||
font-weight: normal;
|
||||
background: rgba(73,73,73,1);
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
z-index: 999;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.c0 .b {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement^='top'] .b {
|
||||
border-width: 0.375rem 0.375rem 0 0.375rem;
|
||||
border-color: rgba(73,73,73,1) transparent transparent transparent;
|
||||
bottom: -0.375rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c0[data-placement^='top'] .b:after {
|
||||
border-width: 0.4375rem 0.4375rem 0 0.4375rem;
|
||||
border-color: rgba(73,73,73,1) transparent transparent transparent;
|
||||
bottom: -0.375rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c0[data-placement^='bottom'] .b {
|
||||
border-width: 0 0.375rem 0.375rem 0.375rem;
|
||||
border-color: transparent transparent rgba(73,73,73,1) transparent;
|
||||
top: -0.375rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c0[data-placement^='top'],
|
||||
.c0[data-placement^='bottom'] {
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement='top-start'] .b,
|
||||
.c0[data-placement='bottom-start'] .b {
|
||||
left: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement='top-end'] .b,
|
||||
.c0[data-placement='bottom-end'] .b {
|
||||
right: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement='top'] .b,
|
||||
.c0[data-placement='bottom'] .b {
|
||||
left: calc(50% - 0.6875rem);
|
||||
}
|
||||
|
||||
.c0[data-placement^='left'] {
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement^='left'] .b {
|
||||
border-width: 0.375rem 0 0.375rem 0.375rem;
|
||||
border-color: transparent transparent transparent rgba(73,73,73,1);
|
||||
right: -0.75rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c0[data-placement^='left'] .b:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-width: 0.4375rem 0 0.4375rem 0.4375rem;
|
||||
border-color: transparent transparent transparent transparent;
|
||||
border-style: solid;
|
||||
left: -0.375rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: -0.4375rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.c0[data-placement^='right'] {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement^='right'] .b {
|
||||
border-width: 0.375rem 0.375rem 0.375rem 0;
|
||||
border-color: transparent rgba(73,73,73,1) transparent transparent;
|
||||
left: -0.75rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c0[data-placement^='right'] .b:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-width: 0.4375rem 0.4375rem 0.4375rem 0;
|
||||
border-color: transparent transparent transparent transparent;
|
||||
border-style: solid;
|
||||
left: -0.125rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: -0.4375rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.c0[data-placement='left-start'] .b,
|
||||
.c0[data-placement='right-start'] .b {
|
||||
top: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement='left-end'] .b,
|
||||
.c0[data-placement='right-end'] .b {
|
||||
bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.c0[data-placement='left'] .b,
|
||||
.c0[data-placement='right'] .b {
|
||||
top: calc(50% - 0.375rem);
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
data-placement={undefined}
|
||||
data-x-out-of-boundaries={undefined}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0,
|
||||
"pointerEvents": "none",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
>
|
||||
<code>
|
||||
top
|
||||
</code>
|
||||
<span
|
||||
style={Object {}}
|
||||
>
|
||||
<span
|
||||
className="b"
|
||||
/>
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
25
packages/ui-toolkit/src/tooltip/__tests__/tooltip.spec.js
Normal file
25
packages/ui-toolkit/src/tooltip/__tests__/tooltip.spec.js
Normal file
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Tooltip, { Container, Target } from '../';
|
||||
import { Theme } from '../../mocks'
|
||||
|
||||
describe('Tooltip', () => {
|
||||
test('Tooltip', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Container>
|
||||
<Target>Hello</Target>
|
||||
<Tooltip placement="top">
|
||||
<code>top</code>
|
||||
</Tooltip>
|
||||
</Container>
|
||||
</Theme>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
@ -1,41 +0,0 @@
|
||||
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()));
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
const http = require('http');
|
||||
const serveStatic = require('serve-static');
|
||||
// const jest = require('jest');
|
||||
|
||||
const serve = serveStatic('styleguide/');
|
||||
const server = http.createServer((req, res) => {
|
||||
// eslint-disable-next-line no-console
|
||||
serve(req, res, (req, res) => console.log('yay'));
|
||||
});
|
||||
// "test": "cross-env NODE_ENV=test run-s styleguide:build test:visual",
|
||||
// Listen
|
||||
server.listen(6060);
|
||||
@ -29,10 +29,10 @@
|
||||
"styled-components": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-preset-joyent-portal": "^4.0.4",
|
||||
"babel-preset-joyent-portal": "^6.0.1",
|
||||
"eslint": "^4.11.0",
|
||||
"eslint-config-joyent-portal": "^3.2.0",
|
||||
"joyent-react-scripts": "^6.2.0",
|
||||
"joyent-react-scripts": "^6.5.0",
|
||||
"prettier": "^1.8.2",
|
||||
"stylelint": "^8.4.0",
|
||||
"stylelint-config-joyent-portal": "^2.0.1"
|
||||
|
||||
@ -46,8 +46,7 @@
|
||||
"apr-for-each": "^1.0.6",
|
||||
"apr-main": "^2.0.2",
|
||||
"babel-minify-webpack-plugin": "^0.2.0",
|
||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||
"babel-preset-joyent-portal": "^4.0.4",
|
||||
"babel-preset-joyent-portal": "^6.0.1",
|
||||
"commitizen": "^2.9.6",
|
||||
"cross-env": "^5.1.1",
|
||||
"eslint": "^4.11.0",
|
||||
@ -63,7 +62,7 @@
|
||||
"jest-snapshot": "^21.2.1",
|
||||
"jest-styled-components": "^4.9.0",
|
||||
"jest-transform-graphql": "^2.1.0",
|
||||
"joyent-react-scripts": "^6.2.0",
|
||||
"joyent-react-scripts": "^6.5.0",
|
||||
"lodash.sortby": "^4.7.0",
|
||||
"mz": "^2.7.0",
|
||||
"react-scripts": "^1.0.17",
|
||||
|
||||
@ -42,8 +42,7 @@
|
||||
"apr-for-each": "^1.0.6",
|
||||
"apr-main": "^2.0.2",
|
||||
"babel-minify-webpack-plugin": "^0.2.0",
|
||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||
"babel-preset-joyent-portal": "^4.0.4",
|
||||
"babel-preset-joyent-portal": "^6.0.1",
|
||||
"commitizen": "^2.9.6",
|
||||
"cross-env": "^5.1.1",
|
||||
"eslint": "^4.11.0",
|
||||
@ -57,7 +56,7 @@
|
||||
"jest-snapshot": "^21.2.1",
|
||||
"jest-styled-components": "^4.9.0",
|
||||
"jest-transform-graphql": "^2.1.0",
|
||||
"joyent-react-scripts": "^6.2.0",
|
||||
"joyent-react-scripts": "^6.5.0",
|
||||
"lodash.sortby": "^4.7.0",
|
||||
"mz": "^2.7.0",
|
||||
"react-scripts": "^1.0.17",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user