diff --git a/.yarnrc b/.yarnrc deleted file mode 100644 index 24efd034..00000000 --- a/.yarnrc +++ /dev/null @@ -1 +0,0 @@ -workspaces-experimental true \ No newline at end of file diff --git a/packages/icons/package.json b/packages/icons/package.json index 6a439fdd..a88fe0b3 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -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" }, diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index 0ef15939..e3eba7a5 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -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", diff --git a/packages/ui-toolkit/.babelrc b/packages/ui-toolkit/.babelrc index 08c892b4..594acfe3 100644 --- a/packages/ui-toolkit/.babelrc +++ b/packages/ui-toolkit/.babelrc @@ -1,8 +1,3 @@ { - "presets": ["joyent-portal"], - "plugins": [ - ["inline-react-svg", { - "ignorePattern": "libre-franklin" - }] - ] + "presets": ["joyent-portal"] } diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json index ddd3469e..e42bd456 100644 --- a/packages/ui-toolkit/package.json +++ b/packages/ui-toolkit/package.json @@ -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" } diff --git a/packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap b/packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap new file mode 100644 index 00000000..67c73441 --- /dev/null +++ b/packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap @@ -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; +} + + + Inspire the lazy + +`; + +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; +} + + + Inspire the lazy + +`; + +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; +} + + + Inspire the lazy + +`; diff --git a/packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js b/packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js new file mode 100644 index 00000000..edcbc03a --- /dev/null +++ b/packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js @@ -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( + + Inspire the lazy + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + expect(tree).toHaveStyleRule('color', theme.primary.replace(/ /g, '')); + }); + + test('Reversed Anchor', () => { + const tree = renderer + .create( + + + Inspire the lazy + + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + expect(tree).toHaveStyleRule('color', theme.white.replace(/ /g, '')); + }); + + test('Disabled Anchor', () => { + const tree = renderer + .create( + + + Inspire the lazy + + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + expect(tree).toHaveStyleRule('color', theme.grey.replace(/ /g, '')); + }); +}); diff --git a/packages/ui-toolkit/src/boxes/index.js b/packages/ui-toolkit/src/boxes/index.js deleted file mode 100644 index 9b6bec5e..00000000 --- a/packages/ui-toolkit/src/boxes/index.js +++ /dev/null @@ -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}; - ` -}; diff --git a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000..28ea9591 --- /dev/null +++ b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap @@ -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; + } +} + +
+
+
+
+
+

+ Home +

+ + + +
+
+

+ Warp Records Blog +

+ + + +
+
+

+ Services +

+ + + +
+
+

+ Nginx +

+ + + +
+
+
+
+
+`; + +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; +} + +
+

+ Home +

+ + + +
+`; diff --git a/packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js b/packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js new file mode 100644 index 00000000..efdf3940 --- /dev/null +++ b/packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js @@ -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( + + + Home + Warp Records Blog + Services + Nginx + + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + test('Default Item', () => { + const tree = renderer + .create( + + Home + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap b/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap new file mode 100644 index 00000000..9e46389c --- /dev/null +++ b/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap @@ -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; +} + + + Inspire the lazy + +`; + +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); +} + + + Inspire the lazy + +`; + +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); +} + + + Inspire the lazy + +`; + +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); +} + + + Inspire the lazy + +`; + +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); +} + + + Inspire the lazy + +`; diff --git a/packages/ui-toolkit/src/button/__tests___/button.spec.js b/packages/ui-toolkit/src/button/__tests___/button.spec.js new file mode 100644 index 00000000..4f2e2dd0 --- /dev/null +++ b/packages/ui-toolkit/src/button/__tests___/button.spec.js @@ -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( + + + + ) + .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( + + + + ) + .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( + + + + ) + .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( + + + + ) + .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( + + + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + expect(tree).toHaveStyleRule('color', theme.grey.replace(/ /g, '')); + expect(tree).toHaveStyleRule( + 'background-color', + theme.disabled.replace(/ /g, '') + ); + }); +}); diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js index d08933c1..8551d7c5 100644 --- a/packages/ui-toolkit/src/button/index.js +++ b/packages/ui-toolkit/src/button/index.js @@ -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 { diff --git a/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap b/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap new file mode 100644 index 00000000..71293098 --- /dev/null +++ b/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap @@ -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; +} + +
+
+ Inspire the lazy +
+
+`; + +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); +} + +
+ Inspire the lazy +
+`; + +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; +} + +
+ Inspire the lazy +
+`; + +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); +} + +
+ Inspire the lazy +
+`; + +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); +} + +
+ Inspire the lazy +
+`; diff --git a/packages/ui-toolkit/src/card/__tests___/card.spec.js b/packages/ui-toolkit/src/card/__tests___/card.spec.js new file mode 100644 index 00000000..cdeb5291 --- /dev/null +++ b/packages/ui-toolkit/src/card/__tests___/card.spec.js @@ -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( + + Inspire the lazy + + ) + .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( + + Inspire the lazy + + ) + .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( + + Inspire the lazy + + ) + .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( + + Inspire the lazy + + ) + .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( + + +
Inspire the lazy
+ + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js index 53abfd03..9dde4c12 100644 --- a/packages/ui-toolkit/src/card/card.js +++ b/packages/ui-toolkit/src/card/card.js @@ -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; `}; diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js index 9bb1fc86..71d8412e 100644 --- a/packages/ui-toolkit/src/card/header.js +++ b/packages/ui-toolkit/src/card/header.js @@ -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}; diff --git a/packages/ui-toolkit/src/close-button/index.js b/packages/ui-toolkit/src/close-button/index.js deleted file mode 100644 index 1dfc2bff..00000000 --- a/packages/ui-toolkit/src/close-button/index.js +++ /dev/null @@ -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 => ( - - - -); - -export default CloseButton; diff --git a/packages/ui-toolkit/src/divider/__tests___/__snapshots__/divider.spec.js.snap b/packages/ui-toolkit/src/divider/__tests___/__snapshots__/divider.spec.js.snap new file mode 100644 index 00000000..9aef0839 --- /dev/null +++ b/packages/ui-toolkit/src/divider/__tests___/__snapshots__/divider.spec.js.snap @@ -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; +} + +
+`; + +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; +} + +
+`; diff --git a/packages/ui-toolkit/src/divider/__tests___/divider.spec.js b/packages/ui-toolkit/src/divider/__tests___/divider.spec.js new file mode 100644 index 00000000..9ca30c8b --- /dev/null +++ b/packages/ui-toolkit/src/divider/__tests___/divider.spec.js @@ -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( + + + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + expect(tree).toHaveStyleRule( + 'background-color', + theme.grey.replace(/ /g, '') + ); + }); + + test('Transparent Divider', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + expect(tree).toHaveStyleRule('background-color', 'transparent'); + }); +}); diff --git a/packages/ui-toolkit/src/footer/__tests__/__snapshots__/footer.spec.js.snap b/packages/ui-toolkit/src/footer/__tests__/__snapshots__/footer.spec.js.snap new file mode 100644 index 00000000..60f15f05 --- /dev/null +++ b/packages/ui-toolkit/src/footer/__tests__/__snapshots__/footer.spec.js.snap @@ -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; + } +} + +
+
+
+`; diff --git a/packages/ui-toolkit/src/footer/__tests__/footer.spec.js b/packages/ui-toolkit/src/footer/__tests__/footer.spec.js new file mode 100644 index 00000000..342329a4 --- /dev/null +++ b/packages/ui-toolkit/src/footer/__tests__/footer.spec.js @@ -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( + +