From 0a409f0924d42768fc150e56fc83db670ddcdb96 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 22 Dec 2017 01:08:27 +0000 Subject: [PATCH] test(ui-toolkit): initial tests --- .yarnrc | 1 - packages/icons/package.json | 4 +- packages/my-joy-beta/package.json | 9 +- packages/ui-toolkit/.babelrc | 7 +- packages/ui-toolkit/package.json | 44 +- .../__snapshots__/anchor.spec.js.snap | 81 ++ .../src/anchor/__tests___/anchor.spec.js | 52 + packages/ui-toolkit/src/boxes/index.js | 52 - .../__snapshots__/index.spec.js.snap | 326 ++++++ .../src/breadcrumb/__tests__/index.spec.js | 38 + .../__snapshots__/button.spec.js.snap | 571 +++++++++++ .../src/button/__tests___/button.spec.js | 99 ++ packages/ui-toolkit/src/button/index.js | 3 +- .../__snapshots__/card.spec.js.snap | 229 +++++ .../src/card/__tests___/card.spec.js | 90 ++ packages/ui-toolkit/src/card/card.js | 19 +- packages/ui-toolkit/src/card/header.js | 7 - packages/ui-toolkit/src/close-button/index.js | 34 - .../__snapshots__/divider.spec.js.snap | 62 ++ .../src/divider/__tests___/divider.spec.js | 38 + .../__snapshots__/footer.spec.js.snap | 89 ++ .../src/footer/__tests__/footer.spec.js | 27 + .../__tests__/__snapshots__/form.spec.js.snap | 948 ++++++++++++++++++ .../src/form/__tests__/form.spec.js | 163 +++ packages/ui-toolkit/src/form/base/input.js | 6 +- packages/ui-toolkit/src/form/base/toggle.js | 2 +- packages/ui-toolkit/src/form/meta.js | 2 +- packages/ui-toolkit/src/getting-started.md | 1 - packages/ui-toolkit/src/guidelines/layout.md | 1 - .../ui-toolkit/src/guidelines/overview.md | 1 - packages/ui-toolkit/src/index.js | 12 - .../__test__/__snapshots__/label.spec.js.snap | 18 + .../src/label/__test__/label.spec.js | 24 + .../__snapshots__/layout.spec.js.snap | 177 ++++ .../src/layout/__tests__/layout.spec.js | 82 ++ .../__snapshots__/message.spec.js.snap | 402 ++++++++ .../src/message/__tests__/message.spec.js | 90 ++ packages/ui-toolkit/src/message/index.js | 11 +- packages/ui-toolkit/src/mocks/index.js | 1 + packages/ui-toolkit/src/mocks/theme.js | 8 + packages/ui-toolkit/src/modal/index.js | 81 -- packages/ui-toolkit/src/modal/usage.md | 5 - packages/ui-toolkit/src/overview.md | 7 - .../__snapshots__/popover.spec.js.snap | 225 +++++ .../src/popover/__tests__/popover.spec.js | 47 + .../__snapshots__/section.spec.js.snap | 198 ++++ .../section-list/__tests__/section.spec.js | 73 ++ .../__snapshots__/loading.spec.js.snap | 121 +++ .../status-loader/__tests__/loading.spec.js | 20 + .../__snapshots__/table.spec.js.snap | 184 ++++ .../src/table/__tests__/table.spec.js | 129 +++ packages/ui-toolkit/src/table/index.js | 3 +- .../__tests__/__snapshots__/text.spec.js.snap | 218 ++++ .../src/text/__tests__/text.spec.js | 126 +++ packages/ui-toolkit/src/text/index.js | 2 +- packages/ui-toolkit/src/text/title.js | 10 - packages/ui-toolkit/src/theme/index.js | 16 +- .../__snapshots__/tooltip.spec.js.snap | 166 +++ .../src/tooltip/__tests__/tooltip.spec.js | 25 + ...-visual-regressions-card-headed-1-diff.png | Bin 25154 -> 0 bytes ...gressions-card-headed-collapsed-1-diff.png | Bin 26131 -> 0 bytes ...-visual-regressions-card-headed-1-snap.png | Bin 39570 -> 0 bytes ...-visual-regressions-card-headed-2-snap.png | Bin 38195 -> 0 bytes ...gressions-card-headed-collapsed-1-snap.png | Bin 46093 -> 0 bytes ...gressions-card-headed-collapsed-2-snap.png | Bin 46331 -> 0 bytes packages/ui-toolkit/test/cards.spec.js | 41 - packages/ui-toolkit/test/start.js | 12 - prototypes/cra-boilerplate/package.json | 4 +- prototypes/create-instance-icons/package.json | 5 +- prototypes/create-instance/package.json | 5 +- yarn.lock | 595 ++++------- 71 files changed, 5371 insertions(+), 778 deletions(-) delete mode 100644 .yarnrc create mode 100644 packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap create mode 100644 packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js delete mode 100644 packages/ui-toolkit/src/boxes/index.js create mode 100644 packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap create mode 100644 packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js create mode 100644 packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap create mode 100644 packages/ui-toolkit/src/button/__tests___/button.spec.js create mode 100644 packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap create mode 100644 packages/ui-toolkit/src/card/__tests___/card.spec.js delete mode 100644 packages/ui-toolkit/src/close-button/index.js create mode 100644 packages/ui-toolkit/src/divider/__tests___/__snapshots__/divider.spec.js.snap create mode 100644 packages/ui-toolkit/src/divider/__tests___/divider.spec.js create mode 100644 packages/ui-toolkit/src/footer/__tests__/__snapshots__/footer.spec.js.snap create mode 100644 packages/ui-toolkit/src/footer/__tests__/footer.spec.js create mode 100644 packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap create mode 100644 packages/ui-toolkit/src/form/__tests__/form.spec.js delete mode 100644 packages/ui-toolkit/src/getting-started.md delete mode 100644 packages/ui-toolkit/src/guidelines/layout.md delete mode 100644 packages/ui-toolkit/src/guidelines/overview.md create mode 100644 packages/ui-toolkit/src/label/__test__/__snapshots__/label.spec.js.snap create mode 100644 packages/ui-toolkit/src/label/__test__/label.spec.js create mode 100644 packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap create mode 100644 packages/ui-toolkit/src/layout/__tests__/layout.spec.js create mode 100644 packages/ui-toolkit/src/message/__tests__/__snapshots__/message.spec.js.snap create mode 100644 packages/ui-toolkit/src/message/__tests__/message.spec.js create mode 100644 packages/ui-toolkit/src/mocks/index.js create mode 100644 packages/ui-toolkit/src/mocks/theme.js delete mode 100644 packages/ui-toolkit/src/modal/index.js delete mode 100644 packages/ui-toolkit/src/modal/usage.md delete mode 100644 packages/ui-toolkit/src/overview.md create mode 100644 packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap create mode 100644 packages/ui-toolkit/src/popover/__tests__/popover.spec.js create mode 100644 packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap create mode 100644 packages/ui-toolkit/src/section-list/__tests__/section.spec.js create mode 100644 packages/ui-toolkit/src/status-loader/__tests__/__snapshots__/loading.spec.js.snap create mode 100644 packages/ui-toolkit/src/status-loader/__tests__/loading.spec.js create mode 100644 packages/ui-toolkit/src/table/__tests__/__snapshots__/table.spec.js.snap create mode 100644 packages/ui-toolkit/src/table/__tests__/table.spec.js create mode 100644 packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap create mode 100644 packages/ui-toolkit/src/text/__tests__/text.spec.js delete mode 100644 packages/ui-toolkit/src/text/title.js create mode 100644 packages/ui-toolkit/src/tooltip/__tests__/__snapshots__/tooltip.spec.js.snap create mode 100644 packages/ui-toolkit/src/tooltip/__tests__/tooltip.spec.js delete mode 100644 packages/ui-toolkit/test/__image_snapshots__/__diff_output__/cards-spec-js-visual-regressions-card-headed-1-diff.png delete mode 100644 packages/ui-toolkit/test/__image_snapshots__/__diff_output__/cards-spec-js-visual-regressions-card-headed-collapsed-1-diff.png delete mode 100644 packages/ui-toolkit/test/__image_snapshots__/cards-spec-js-visual-regressions-card-headed-1-snap.png delete mode 100644 packages/ui-toolkit/test/__image_snapshots__/cards-spec-js-visual-regressions-card-headed-2-snap.png delete mode 100644 packages/ui-toolkit/test/__image_snapshots__/cards-spec-js-visual-regressions-card-headed-collapsed-1-snap.png delete mode 100644 packages/ui-toolkit/test/__image_snapshots__/cards-spec-js-visual-regressions-card-headed-collapsed-2-snap.png delete mode 100644 packages/ui-toolkit/test/cards.spec.js delete mode 100644 packages/ui-toolkit/test/start.js 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( + +