diff --git a/jest.setup.js b/jest.setup.js index 1559a125d3..f9b8b8d2ad 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -13,6 +13,8 @@ * limitations under the License. */ +/* global expect */ + import React from 'react'; import { renderToStaticMarkup } from 'react-dom/server'; import '@testing-library/jest-dom/extend-expect'; @@ -59,6 +61,18 @@ global.__DEV__ = false; global.__PRODUCTION__ = false; global.__TEST__ = true; +// react-popper relies on document.createRange +if (global.document) { + document.createRange = () => ({ + setStart: () => {}, + setEnd: () => {}, + commonAncestorContainer: { + nodeName: 'BODY', + ownerDocument: document + } + }); +} + // Add custom matchers expect.extend(toHaveNoViolations); diff --git a/package.json b/package.json index 5d8efda471..075629c60f 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,8 @@ "@babel/preset-env": "^7.4.2", "@emotion/babel-preset-css-prop": "^10.0.9", "@emotion/cache": "^10.0.19", + "@emotion/core": "^10.0.21", + "@emotion/styled": "^10.0.17", "@emotion/stylis": "^0.8.4", "@storybook/addon-a11y": "^5.2.0", "@storybook/addon-actions": "^5.2.0", @@ -80,6 +82,8 @@ "@storybook/react": "^5.2.0", "@storybook/source-loader": "^5.2.4", "@sumup/foundry": "^1.5.0", + "@svgr/webpack": "^4.3.3", + "@testing-library/dom": "^6.5.0", "@testing-library/jest-dom": "^4.1.0", "@testing-library/react": "^9.1.4", "@testing-library/react-hooks": "^2.0.1", @@ -90,48 +94,45 @@ "babel-loader": "^8.0.5", "babel-plugin-dev-expression": "^0.2.2", "babel-plugin-dynamic-import-node": "^2.2.0", + "babel-plugin-inline-react-svg": "^1.1.0", "babel-plugin-lodash": "^3.3.2", "babel-plugin-module-resolver": "^3.2.0", "babel-plugin-react-docgen": "^3.0.0", "codecov": "^3.2.0", + "commitizen": "^3.1.2", "component-playground": "^3.2.1", - "cross-env": "^5.2.0", + "cross-env": "^6.0.3", + "css-loader": "^3.2.0", + "cz-customizable": "^6.2.0", + "cz-customizable-ghooks": "^1.5.0", + "emotion-theming": "^10.0.19", "eslint-plugin-prettier": "^3.1.0", "expect": "^24.5.0", "gh-pages": "^2.0.1", - "husky": "^1.3.1", "jest": "^24.5.0", "jest-axe": "^3.1.1", "jest-cli": "^24.5.0", "jest-emotion": "^10.0.10", "license-checker": "^25.0.1", - "onchange": "^5.2.0", + "onchange": "^6.1.0", "postcss-loader": "^3.0.0", "postcss-object-fit-images": "^1.1.2", - "prettier": "1.16.4", - "prettier-eslint": "^8.8.2", + "react": "^16.10.2", + "react-docgen": "^4.1.0", + "react-docgen-annotation-resolver": "^1.1.0", + "react-dom": "^16.10.2", + "react-svg-loader": "^3.0.3", "react-test-renderer": "^16.8.6", "require-context.macro": "^1.2.2", - "style-loader": "^0.23.1", + "style-loader": "^1.0.0", "webpack-merge": "^4.2.1", "yargs": "^14.0.0" }, "dependencies": { - "@emotion/core": "^10.0.10", "@emotion/is-prop-valid": "^0.8.2", - "@emotion/styled": "^10.0.10", - "babel-plugin-inline-react-svg": "^1.1.0", - "commitizen": "^3.0.5", - "css-loader": "^2.1.1", - "cz-customizable": "^5.3.0", - "cz-customizable-ghooks": "^1.5.0", - "dom-helpers": "^3.4.0", - "downshift": "^1.31.14", - "emotion-theming": "^10.0.10", - "facepaint": "^1.2.0", - "hoist-non-react-statics": "^3.3.0", + "dom-helpers": "^5.1.0", + "downshift": "^3.3.4", "keycode": "^2.2.0", - "lint-staged": "^8.1.5", "lodash": "^4.17.11", "markdown-to-jsx": "^6.9.3", "moment": "^2.24.0", @@ -139,15 +140,12 @@ "polished": "^3.1.0", "prop-types": "^15.7.2", "prop-types-exact": "^1.2.0", - "react": "^16.8.6", - "react-dates": "^16.6.1", - "react-dom": "^16.8.6", + "react-dates": "^21.2.0", "react-event-listener": "^0.6.6", "react-modal": "^3.8.1", "react-popper": "^1.3.3", "react-text-mask": "5.4.3", - "react-transition-group": "^2.7.1", - "react-with-styles": "^3.2.1", + "react-transition-group": "^4.3.0", "recompose": "^0.30.0", "text-mask-addons": "^3.8.0", "tiny-warning": "^1.0.3" @@ -156,5 +154,12 @@ "hooks": { "pre-commit": "lint-staged" } + }, + "peerDependencies": { + "@emotion/core": ">=10.0.0", + "@emotion/styled": ">=10.0.0", + "emotion-theming": ">=10.0.0", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" } } diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap index e979c6d667..8672d0f69e 100644 --- a/src/__snapshots__/storyshots.spec.js.snap +++ b/src/__snapshots__/storyshots.spec.js.snap @@ -3041,8 +3041,7 @@ exports[`Storyshots Components|Calendar/RangePicker Base 1`] = ` class="DateInput_screenReaderMessage DateInput_screenReaderMessage_1" id="DateInput__screen-reader-message-your_unique_start_date_id" > - Press the down arrow key to interact with the calendar and - select a date. Press the question mark key to get the keyboard shortcuts for changing dates. + Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

- Press the down arrow key to interact with the calendar and - select a date. Press the question mark key to get the keyboard shortcuts for changing dates. + Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

`; @@ -13563,7 +13561,19 @@ HTMLCollection [ > Expiry date , - .circuit-0 { + .circuit-4 { + color: #212933; + display: block; + position: relative; + margin-bottom: 16px; +} + +label > .circuit-4, +label + .circuit-4 { + margin-top: 4px; +} + +.circuit-0 { background-color: #FFFFFF; border-width: 1px; border-style: solid; @@ -13622,18 +13632,6 @@ HTMLCollection [ pointer-events: none; } -.circuit-4 { - color: #212933; - display: block; - position: relative; - margin-bottom: 16px; -} - -label > .circuit-4, -label + .circuit-4 { - margin-top: 4px; -} -
@@ -13667,7 +13665,19 @@ HTMLCollection [ > Name on card , - .circuit-0 { + .circuit-4 { + color: #212933; + display: block; + position: relative; + margin-bottom: 16px; +} + +label > .circuit-4, +label + .circuit-4 { + margin-top: 4px; +} + +.circuit-0 { background-color: #FFFFFF; border-width: 1px; border-style: solid; @@ -13726,18 +13736,6 @@ HTMLCollection [ pointer-events: none; } -.circuit-4 { - color: #212933; - display: block; - position: relative; - margin-bottom: 16px; -} - -label > .circuit-4, -label + .circuit-4 { - margin-top: 4px; -} -
@@ -13773,7 +13771,19 @@ HTMLCollection [ > Security code , - .circuit-0 { + .circuit-4 { + color: #212933; + display: block; + position: relative; + margin-bottom: 16px; +} + +label > .circuit-4, +label + .circuit-4 { + margin-top: 4px; +} + +.circuit-0 { background-color: #FFFFFF; border-width: 1px; border-style: solid; @@ -13832,18 +13842,6 @@ HTMLCollection [ pointer-events: none; } -.circuit-4 { - color: #212933; - display: block; - position: relative; - margin-bottom: 16px; -} - -label > .circuit-4, -label + .circuit-4 { - margin-top: 4px; -} -
@@ -13881,7 +13879,19 @@ HTMLCollection [ > Security code , - .circuit-0 { + .circuit-4 { + color: #212933; + display: block; + position: relative; + margin-bottom: 16px; +} + +label > .circuit-4, +label + .circuit-4 { + margin-top: 4px; +} + +.circuit-0 { background-color: #FFFFFF; border-width: 1px; border-style: solid; @@ -13940,18 +13950,6 @@ HTMLCollection [ pointer-events: none; } -.circuit-4 { - color: #212933; - display: block; - position: relative; - margin-bottom: 16px; -} - -label > .circuit-4, -label + .circuit-4 { - margin-top: 4px; -} -
@@ -14053,7 +14051,19 @@ HTMLCollection [ , - .circuit-0 { + .circuit-4 { + color: #212933; + display: block; + position: relative; + margin-bottom: 16px; +} + +label > .circuit-4, +label + .circuit-4 { + margin-top: 4px; +} + +.circuit-0 { background-color: #FFFFFF; border-width: 1px; border-style: solid; @@ -14112,18 +14122,6 @@ HTMLCollection [ pointer-events: none; } -.circuit-4 { - color: #212933; - display: block; - position: relative; - margin-bottom: 16px; -} - -label > .circuit-4, -label + .circuit-4 { - margin-top: 4px; -} -
@@ -14332,6 +14330,18 @@ exports[`Storyshots Forms|Input Base 1`] = ` display: block; } +.circuit-4 { + color: #212933; + display: block; + position: relative; + margin-bottom: 16px; +} + +label > .circuit-4, +label + .circuit-4 { + margin-top: 4px; +} + .circuit-0 { background-color: #FFFFFF; border-width: 1px; @@ -14391,18 +14401,6 @@ exports[`Storyshots Forms|Input Base 1`] = ` pointer-events: none; } -.circuit-4 { - color: #212933; - display: block; - position: relative; - margin-bottom: 16px; -} - -label > .circuit-4, -label + .circuit-4 { - margin-top: 4px; -} -