diff --git a/.eslintrc.js b/.eslintrc.js index 5f48904b85..988df7b226 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -27,9 +27,8 @@ module.exports = require('@sumup/foundry/eslint')( { files: ['packages/circuit-ui/**/*'], rules: { - // The custom JSX pragma is required to make Emotion's css prop - // work with TypeScript. - 'emotion/jsx-import': 'error', + // The automatic JSX runtime handles the React import. We will update the defaults in Foundry v5. + 'react/react-in-jsx-scope': 'off', }, }, { diff --git a/.storybook/components/BorderRadius.js b/.storybook/components/BorderRadius.js index 3f5db15ea3..9edf726ffe 100644 --- a/.storybook/components/BorderRadius.js +++ b/.storybook/components/BorderRadius.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/.storybook/components/BorderWidth.js b/.storybook/components/BorderWidth.js index 3f7f0069bf..a61bc278b4 100644 --- a/.storybook/components/BorderWidth.js +++ b/.storybook/components/BorderWidth.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/.storybook/components/IconSize.js b/.storybook/components/IconSize.js index 80b4431b72..76261d4b87 100644 --- a/.storybook/components/IconSize.js +++ b/.storybook/components/IconSize.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/.storybook/components/Icons.js b/.storybook/components/Icons.js index d410bf5d5a..9652507f56 100644 --- a/.storybook/components/Icons.js +++ b/.storybook/components/Icons.js @@ -13,12 +13,11 @@ * limitations under the License. */ -import React, { useState } from 'react'; -import PropTypes from 'prop-types'; +import { useState } from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; import { ThemeProvider } from 'emotion-theming'; -import { keys, entries, includes, isEmpty, groupBy, sortBy } from 'lodash/fp'; +import { entries, includes, isEmpty, groupBy, sortBy } from 'lodash/fp'; import { light } from '@sumup/design-tokens'; import * as iconComponents from '@sumup/icons'; import { icons } from '@sumup/icons/manifest.json'; diff --git a/.storybook/components/Image.js b/.storybook/components/Image.js index 1f00dc8fe4..f7ce1d3a14 100644 --- a/.storybook/components/Image.js +++ b/.storybook/components/Image.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; import { ThemeProvider } from 'emotion-theming'; diff --git a/.storybook/components/Intro.js b/.storybook/components/Intro.js index 0ab5ed024c..ab6ab7f419 100644 --- a/.storybook/components/Intro.js +++ b/.storybook/components/Intro.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; import { ThemeProvider } from 'emotion-theming'; diff --git a/.storybook/components/Link.js b/.storybook/components/Link.js index 43b56c4f0b..32e4c97f5a 100644 --- a/.storybook/components/Link.js +++ b/.storybook/components/Link.js @@ -1,4 +1,3 @@ -import React from 'react'; import LinkTo from '@storybook/addon-links/react'; import { css } from '@emotion/core'; diff --git a/.storybook/components/MediaQueriesTable.js b/.storybook/components/MediaQueriesTable.js index 5d80a27e3d..003ec84956 100644 --- a/.storybook/components/MediaQueriesTable.js +++ b/.storybook/components/MediaQueriesTable.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { withTheme, ThemeProvider } from 'emotion-theming'; import { light } from '@sumup/design-tokens'; diff --git a/.storybook/components/Preview.js b/.storybook/components/Preview.js index 36f72cddd6..4a6a68c315 100644 --- a/.storybook/components/Preview.js +++ b/.storybook/components/Preview.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { Canvas } from '@storybook/addon-docs/blocks'; import { ThemeProvider } from 'emotion-theming'; import { light } from '@sumup/design-tokens'; diff --git a/.storybook/components/Spacing.js b/.storybook/components/Spacing.js index 9e0221a878..790c3b8feb 100644 --- a/.storybook/components/Spacing.js +++ b/.storybook/components/Spacing.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/.storybook/components/Statuses.js b/.storybook/components/Statuses.js index ec48bc19a4..53db370ead 100644 --- a/.storybook/components/Statuses.js +++ b/.storybook/components/Statuses.js @@ -15,7 +15,6 @@ /* eslint-disable react/prop-types, react/display-name */ -import React from 'react'; import PropTypes from 'prop-types'; import { ThemeProvider } from 'emotion-theming'; import { css } from '@emotion/core'; diff --git a/.storybook/components/Story.js b/.storybook/components/Story.js index 46e673c259..4fd9526064 100644 --- a/.storybook/components/Story.js +++ b/.storybook/components/Story.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { Story as StorybookStory } from '@storybook/addon-docs/blocks'; import Preview from './Preview'; diff --git a/.storybook/components/Swatch.js b/.storybook/components/Swatch.js index 69f0f406e4..141bf71252 100644 --- a/.storybook/components/Swatch.js +++ b/.storybook/components/Swatch.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/.storybook/components/Teaser.js b/.storybook/components/Teaser.js index f61f395db4..e73270c531 100644 --- a/.storybook/components/Teaser.js +++ b/.storybook/components/Teaser.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; import { ThemeProvider } from 'emotion-theming'; diff --git a/.storybook/components/Type.js b/.storybook/components/Type.js index 31820d96fc..41058a58d4 100644 --- a/.storybook/components/Type.js +++ b/.storybook/components/Type.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { Fragment, createElement } from 'react'; +import { Fragment, createElement } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/.storybook/preview.js b/.storybook/preview.js index fff80efd31..feb7f934c9 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,5 +1,4 @@ -import React from 'react'; -import { addDecorator, addParameters } from '@storybook/react'; +import { addParameters } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withPerformance } from 'storybook-addon-performance'; import { ThemeProvider } from 'emotion-theming'; diff --git a/.storybook/util/theme.js b/.storybook/util/theme.js index 8b49a15a41..75a121b882 100644 --- a/.storybook/util/theme.js +++ b/.storybook/util/theme.js @@ -86,7 +86,7 @@ export const components = { size: TEXT_SIZE, css: italicStyles, }), - ul: withThemeProvider(List, { size: TEXT_SIZE }), - ol: withThemeProvider(List, { size: TEXT_SIZE, variant: 'ordered' }), + ul: withThemeProvider(List), + ol: withThemeProvider(List, { variant: 'ordered' }), a: withThemeProvider(Link, { size: TEXT_SIZE }), }; diff --git a/jest.config.base.js b/jest.config.base.js index 2b953db7be..06b7199db7 100644 --- a/jest.config.base.js +++ b/jest.config.base.js @@ -14,7 +14,6 @@ */ module.exports = { - preset: 'ts-jest', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], // HACK: See https://github.com/storybookjs/storybook/pull/9292 moduleNameMapper: { @@ -22,17 +21,9 @@ module.exports = { 'react-syntax-highlighter/dist/cjs/$1', }, transform: { - '^.+\\.(js|jsx)$': 'babel-jest', - '^.+\\.(ts|tsx)$': 'ts-jest', + '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest', '^.+\\.(md|mdx)$': '/jest.mdxTransformer.js', }, testPathIgnorePatterns: ['/node_modules/', '/dist/'], testURL: 'http://localhost', - globals: { - 'ts-jest': { - tsconfig: { - jsx: 'react', - }, - }, - }, }; diff --git a/package.json b/package.json index 710023690c..9f1160609e 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,6 @@ "react-dom": "^17.0.1", "storybook-addon-performance": "^0.15.1", "svgo": "^2.0.3", - "ts-jest": "^26.4.4", "typescript": "^4.0.5" } } diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/as-prop.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/as-prop.input.js index 8d532aa3cd..99e5eae002 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/as-prop.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/as-prop.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Heading, SubHeading, Text, Input } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/as-prop.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/as-prop.output.js index 8124f8934d..c28cc96a4d 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/as-prop.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/as-prop.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Heading, SubHeading, Text, Input } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/badge-variant-enum.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/badge-variant-enum.input.js index e29ff33916..cb70cacc84 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/badge-variant-enum.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/badge-variant-enum.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Badge } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/badge-variant-enum.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/badge-variant-enum.output.js index 9bfcc62a6c..978d074877 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/badge-variant-enum.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/badge-variant-enum.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Badge } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/body-variant-highlight.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/body-variant-highlight.input.js index 21bc088367..5d9aa3e4f8 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/body-variant-highlight.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/body-variant-highlight.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Body, Text } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/body-variant-highlight.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/body-variant-highlight.output.js index 6cc1dd47e6..a2a738b2ba 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/body-variant-highlight.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/body-variant-highlight.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Body, Text } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/button-size-giga.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/button-size-giga.input.js index a79f616e4a..ccb80cb10c 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/button-size-giga.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/button-size-giga.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Button } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/button-size-giga.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/button-size-giga.output.js index e57cd07f9f..0ae4f53adf 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/button-size-giga.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/button-size-giga.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Button } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/button-variant-enum.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/button-variant-enum.input.js index 10e0b70fb1..6f54cb081b 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/button-variant-enum.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/button-variant-enum.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Button, LoadingButton, Text } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/button-variant-enum.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/button-variant-enum.output.js index 67ea0502ec..4bfd8c4b40 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/button-variant-enum.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/button-variant-enum.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Button, LoadingButton, Text } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v2.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v2.input.js index bdf4142e6e..5d0a4e42f9 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v2.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v2.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { ListView, SvgButton as SpecialButton } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v2.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v2.output.js index 7124238253..f0676e82a2 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v2.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v2.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { CardList, IconButton as SpecialButton } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.input.js index f3e8a32fc9..81c2f92ce5 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Heading, diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.output.js index 403900ef19..1712f7a8fd 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Headline, diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/component-static-properties.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/component-static-properties.input.js index 85c01adddd..1b4beed8ff 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/component-static-properties.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/component-static-properties.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import { Heading, CardList } from '@sumup/circuit-ui'; const BaseHeading = () => ; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/component-static-properties.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/component-static-properties.output.js index b76469697b..17db0b7f34 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/component-static-properties.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/component-static-properties.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import { Heading, CardList } from '@sumup/circuit-ui'; const BaseHeading = () => ; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/exit-animations.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/exit-animations.input.js index 921d4a1082..ec3d112bc6 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/exit-animations.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/exit-animations.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { LoadingButton } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/exit-animations.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/exit-animations.output.js index 12985a4bb5..ea02b39b03 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/exit-animations.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/exit-animations.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { LoadingButton } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/inline-message-variant-enum.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/inline-message-variant-enum.input.js index 824c1d2365..6d9cd4de8b 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/inline-message-variant-enum.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/inline-message-variant-enum.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { InlineMessage } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/inline-message-variant-enum.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/inline-message-variant-enum.output.js index 5399ac6491..ce53fbb32b 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/inline-message-variant-enum.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/inline-message-variant-enum.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { InlineMessage } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/input-deepref-prop.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/input-deepref-prop.input.js index b8ef29e371..996affe972 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/input-deepref-prop.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/input-deepref-prop.input.js @@ -1,4 +1,4 @@ -import React, { useRef, Fragment } from 'react'; +import { useRef, Fragment } from 'react'; import styled from '@emotion/styled'; import { Input, TextArea } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/input-deepref-prop.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/input-deepref-prop.output.js index d1fe7eb0df..36676e9867 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/input-deepref-prop.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/input-deepref-prop.output.js @@ -1,4 +1,4 @@ -import React, { useRef, Fragment } from 'react'; +import { useRef, Fragment } from 'react'; import styled from '@emotion/styled'; import { Input, TextArea } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/input-styles-prop.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/input-styles-prop.input.js index e24990d39e..152f72c7f7 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/input-styles-prop.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/input-styles-prop.input.js @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import { useRef } from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; import { Input, TextArea } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/input-styles-prop.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/input-styles-prop.output.js index 9ea9c75b70..023a4c160c 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/input-styles-prop.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/input-styles-prop.output.js @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import { useRef } from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; import { Input, TextArea } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/list-variant-enum.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/list-variant-enum.input.js index 2fd0f9c62f..3a611c7565 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/list-variant-enum.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/list-variant-enum.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { List, Text } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/list-variant-enum.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/list-variant-enum.output.js index c76e01c897..f4ce909bf2 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/list-variant-enum.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/list-variant-enum.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { List, Text } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/onchange-prop.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/onchange-prop.input.js index 1e203b3f73..ba00b89597 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/onchange-prop.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/onchange-prop.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { RadioButton, Switch, Toggle } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/onchange-prop.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/onchange-prop.output.js index 3527f91c92..5dd634d4c7 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/onchange-prop.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/onchange-prop.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { RadioButton, Switch, Toggle } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/selector-props.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/selector-props.input.js index fa481d42a8..d620c95033 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/selector-props.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/selector-props.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Selector } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/selector-props.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/selector-props.output.js index 806512a858..f5e74c76f2 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/selector-props.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/selector-props.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Selector } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-grid-tera.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-grid-tera.input.js index a1d661ffe6..29f05ca16f 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-grid-tera.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-grid-tera.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; import { Col } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-grid-tera.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-grid-tera.output.js index b5391425e1..763da85e65 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-grid-tera.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-grid-tera.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; import { Col } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-1.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-1.input.js index dff096e8d4..df5847043f 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-1.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-1.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import { ThemeProvider } from 'emotion-theming'; import { theme } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-1.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-1.output.js index 241ad7b9fc..9f7d0f9ada 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-1.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-1.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import { ThemeProvider } from 'emotion-theming'; import { light } from '@sumup/design-tokens'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-2.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-2.input.js index 94bd8952bc..287a40b1d8 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-2.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-2.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import { ThemeProvider } from 'emotion-theming'; import { theme, Text } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-2.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-2.output.js index 39d161b4f4..61c51dfed7 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-2.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-2.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import { ThemeProvider } from 'emotion-theming'; import { Text } from '@sumup/circuit-ui'; import { light } from '@sumup/design-tokens'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/toggle-checked-prop.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/toggle-checked-prop.input.js index 1e343a7d0f..15853acfbb 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/toggle-checked-prop.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/toggle-checked-prop.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Toggle } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/toggle-checked-prop.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/toggle-checked-prop.output.js index 85927eaaad..c63892d1c0 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/toggle-checked-prop.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/toggle-checked-prop.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Toggle } from '@sumup/circuit-ui'; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/typography-sizes.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/typography-sizes.input.js index 484d52c519..87a6d0b25d 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/typography-sizes.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/typography-sizes.input.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Heading, diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/typography-sizes.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/typography-sizes.output.js index 89e7f9650e..5d7e41e72c 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/typography-sizes.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/typography-sizes.output.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { Heading, diff --git a/packages/circuit-ui/components/Anchor/Anchor.spec.tsx b/packages/circuit-ui/components/Anchor/Anchor.spec.tsx index 8aa6c47063..769d9e714c 100644 --- a/packages/circuit-ui/components/Anchor/Anchor.spec.tsx +++ b/packages/circuit-ui/components/Anchor/Anchor.spec.tsx @@ -13,10 +13,8 @@ * limitations under the License. */ -/** @jsx jsx */ - -import React from 'react'; -import { jsx, css } from '@emotion/core'; +import { createRef } from 'react'; +import { css } from '@emotion/core'; import { create, @@ -118,7 +116,7 @@ describe('Anchor', () => { }); it('should accept a working ref for a button', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render( button @@ -129,7 +127,7 @@ describe('Anchor', () => { }); it('should accept a working ref for a link', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render( link @@ -140,7 +138,7 @@ describe('Anchor', () => { }); it('should accept a working ref for a span', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render(span); const span = container.querySelector('span'); expect(tref.current).toBe(span); diff --git a/packages/circuit-ui/components/Anchor/Anchor.stories.tsx b/packages/circuit-ui/components/Anchor/Anchor.stories.tsx index 03f95a2e85..7805b562db 100644 --- a/packages/circuit-ui/components/Anchor/Anchor.stories.tsx +++ b/packages/circuit-ui/components/Anchor/Anchor.stories.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { Anchor, AnchorProps } from './Anchor'; import docs from './Anchor.docs.mdx'; diff --git a/packages/circuit-ui/components/Anchor/Anchor.tsx b/packages/circuit-ui/components/Anchor/Anchor.tsx index 6447175dfc..d8b16d593b 100644 --- a/packages/circuit-ui/components/Anchor/Anchor.tsx +++ b/packages/circuit-ui/components/Anchor/Anchor.tsx @@ -13,10 +13,8 @@ * limitations under the License. */ -/** @jsx jsx */ - -import { forwardRef, HTMLProps, ReactNode, MouseEvent } from 'react'; -import { jsx, css } from '@emotion/core'; +import { forwardRef, HTMLProps, ReactNode, MouseEvent, Ref } from 'react'; +import { css } from '@emotion/core'; import { Dispatch as TrackingProps } from '@sumup/collector'; import { Theme } from '@sumup/design-tokens'; @@ -35,7 +33,7 @@ export interface BaseProps extends BodyProps { /** * The ref to the html dom element, it can be a button an anchor or a span, typed as any for now because of complex js manipulation with styled components */ - ref?: React.Ref; + ref?: Ref; } type LinkElProps = Omit, 'size'>; type ButtonElProps = Omit, 'size'>; diff --git a/packages/circuit-ui/components/Anchor/__snapshots__/Anchor.spec.tsx.snap b/packages/circuit-ui/components/Anchor/__snapshots__/Anchor.spec.tsx.snap index 29987c6bcb..7b37a4e5d7 100644 --- a/packages/circuit-ui/components/Anchor/__snapshots__/Anchor.spec.tsx.snap +++ b/packages/circuit-ui/components/Anchor/__snapshots__/Anchor.spec.tsx.snap @@ -20,8 +20,8 @@ exports[`Anchor styles should render with custom styles 1`] = ` margin-left: 0; margin-right: 0; color: #3063E9; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; color: rebeccapurple; } @@ -81,8 +81,8 @@ exports[`Anchor styles should render with default styles 1`] = ` margin-left: 0; margin-right: 0; color: #3063E9; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; } .circuit-0:hover { diff --git a/packages/circuit-ui/components/AspectRatio/AspectRatio.js b/packages/circuit-ui/components/AspectRatio/AspectRatio.js index fabfb29819..2508b281f4 100644 --- a/packages/circuit-ui/components/AspectRatio/AspectRatio.js +++ b/packages/circuit-ui/components/AspectRatio/AspectRatio.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { Children } from 'react'; +import { Children, forwardRef, cloneElement } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { ClassNames, css } from '@emotion/core'; @@ -60,31 +60,29 @@ const childAspectRatioStyles = (cssClassName, { aspectRatio }) => z-index: 2; `; -const AspectRatio = React.forwardRef( - ({ aspectRatio, children, ...props }, ref) => { - if (!children) { - return null; - } +const AspectRatio = forwardRef(({ aspectRatio, children, ...props }, ref) => { + if (!children) { + return null; + } - const [child, ...restChildren] = Children.toArray(children); + const [child, ...restChildren] = Children.toArray(children); - return ( - - - {({ css: cssClassName, cx }) => - React.cloneElement(child, { - className: cx( - childBaseStyles(cssClassName), - childAspectRatioStyles(cssClassName, { aspectRatio }), - ), - }) - } - - {restChildren} - - ); - }, -); + return ( + + + {({ css: cssClassName, cx }) => + cloneElement(child, { + className: cx( + childBaseStyles(cssClassName), + childAspectRatioStyles(cssClassName, { aspectRatio }), + ), + }) + } + + {restChildren} + + ); +}); AspectRatio.displayName = 'AspectRatio'; diff --git a/packages/circuit-ui/components/AspectRatio/AspectRatio.spec.js b/packages/circuit-ui/components/AspectRatio/AspectRatio.spec.js index 856d48a76f..3eb35f86b8 100644 --- a/packages/circuit-ui/components/AspectRatio/AspectRatio.spec.js +++ b/packages/circuit-ui/components/AspectRatio/AspectRatio.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import AspectRatio from './AspectRatio'; describe('AspectRatio', () => { diff --git a/packages/circuit-ui/components/AspectRatio/AspectRatio.stories.js b/packages/circuit-ui/components/AspectRatio/AspectRatio.stories.js index f61a55341d..2a929efe5e 100644 --- a/packages/circuit-ui/components/AspectRatio/AspectRatio.stories.js +++ b/packages/circuit-ui/components/AspectRatio/AspectRatio.stories.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import styled from '@emotion/styled'; import AspectRatio from './AspectRatio'; diff --git a/packages/circuit-ui/components/Avatar/Avatar.spec.tsx b/packages/circuit-ui/components/Avatar/Avatar.spec.tsx index a0a66e592d..bec9975617 100644 --- a/packages/circuit-ui/components/Avatar/Avatar.spec.tsx +++ b/packages/circuit-ui/components/Avatar/Avatar.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { render, axe } from '../../util/test-utils'; import { Avatar, AvatarProps } from './Avatar'; diff --git a/packages/circuit-ui/components/Avatar/Avatar.stories.tsx b/packages/circuit-ui/components/Avatar/Avatar.stories.tsx index be374344b6..e12aef3933 100644 --- a/packages/circuit-ui/components/Avatar/Avatar.stories.tsx +++ b/packages/circuit-ui/components/Avatar/Avatar.stories.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { Stack } from '../../../../.storybook/components'; import { Avatar, AvatarProps } from './Avatar'; diff --git a/packages/circuit-ui/components/Avatar/Avatar.tsx b/packages/circuit-ui/components/Avatar/Avatar.tsx index 7e29d4a4c0..32af7b69f5 100644 --- a/packages/circuit-ui/components/Avatar/Avatar.tsx +++ b/packages/circuit-ui/components/Avatar/Avatar.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { HTMLAttributes } from 'react'; +import { HTMLAttributes } from 'react'; import { css } from '@emotion/core'; import isPropValid from '@emotion/is-prop-valid'; diff --git a/packages/circuit-ui/components/Badge/Badge.spec.tsx b/packages/circuit-ui/components/Badge/Badge.spec.tsx index 897912b3f2..2517f2f15b 100644 --- a/packages/circuit-ui/components/Badge/Badge.spec.tsx +++ b/packages/circuit-ui/components/Badge/Badge.spec.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React from 'react'; +import { createRef } from 'react'; import { create, @@ -64,7 +64,7 @@ describe('Badge', () => { * Should accept a working ref */ it('should accept a working ref', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render(); const div = container.querySelector('div'); expect(tref.current).toBe(div); diff --git a/packages/circuit-ui/components/Badge/Badge.stories.tsx b/packages/circuit-ui/components/Badge/Badge.stories.tsx index 4cdf499509..ebeae825e3 100644 --- a/packages/circuit-ui/components/Badge/Badge.stories.tsx +++ b/packages/circuit-ui/components/Badge/Badge.stories.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { Stack } from '../../../../.storybook/components'; import { Badge, BadgeProps } from './Badge'; diff --git a/packages/circuit-ui/components/Badge/Badge.tsx b/packages/circuit-ui/components/Badge/Badge.tsx index 6de491d038..e5ba87340e 100644 --- a/packages/circuit-ui/components/Badge/Badge.tsx +++ b/packages/circuit-ui/components/Badge/Badge.tsx @@ -13,13 +13,7 @@ * limitations under the License. */ -import React, { - forwardRef, - MouseEvent, - KeyboardEvent, - Ref, - HTMLProps, -} from 'react'; +import { forwardRef, MouseEvent, KeyboardEvent, Ref, HTMLProps } from 'react'; import { css } from '@emotion/core'; import styled, { StyleProps } from '../../styles/styled'; diff --git a/packages/circuit-ui/components/BaseStyles/BaseStyles.spec.tsx b/packages/circuit-ui/components/BaseStyles/BaseStyles.spec.tsx index e0015b6e99..59e48d6870 100644 --- a/packages/circuit-ui/components/BaseStyles/BaseStyles.spec.tsx +++ b/packages/circuit-ui/components/BaseStyles/BaseStyles.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { render } from '../../util/test-utils'; import { BaseStyles } from './BaseStyles'; diff --git a/packages/circuit-ui/components/BaseStyles/BaseStyles.tsx b/packages/circuit-ui/components/BaseStyles/BaseStyles.tsx index 869770c396..d629402b1f 100644 --- a/packages/circuit-ui/components/BaseStyles/BaseStyles.tsx +++ b/packages/circuit-ui/components/BaseStyles/BaseStyles.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { FunctionComponent } from 'react'; +import { FunctionComponent } from 'react'; import { Global } from '@emotion/core'; import { Theme } from '@sumup/design-tokens'; diff --git a/packages/circuit-ui/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap b/packages/circuit-ui/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap index 65e056e086..733eecdf2e 100644 --- a/packages/circuit-ui/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap +++ b/packages/circuit-ui/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap @@ -1,205 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`BaseStylesService should return the global base styles 1`] = ` -" - /** - * Start downloading custom fonts as soon as possible. - */ - @font-face { - font-family: 'aktiv-grotesk'; - font-weight: 400; - font-display: swap; - src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2') format('woff2'), - url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff') format('woff'), - url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot') format('embedded-opentype'); - } - @font-face { - font-family: 'aktiv-grotesk'; - font-weight: 700; - font-display: swap; - src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2') format('woff2'), - url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff') format('woff'), - url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot') format('embedded-opentype'); - } - - /** - * reset.css - * http://meyerweb.com/eric/tools/css/reset/ - * v2.0 | 20110126 - * License: none (public domain) - */ - html, - body, - div, - span, - applet, - object, - iframe, - h1, - h2, - h3, - h4, - h5, - h6, - p, - blockquote, - pre, - a, - abbr, - acronym, - address, - big, - cite, - code, - del, - dfn, - em, - img, - ins, - kbd, - q, - s, - samp, - small, - strike, - strong, - sub, - sup, - tt, - var, - b, - u, - i, - center, - dl, - dt, - dd, - ol, - ul, - li, - fieldset, - form, - label, - legend, - table, - caption, - tbody, - tfoot, - thead, - tr, - th, - td, - article, - aside, - canvas, - details, - embed, - figure, - figcaption, - footer, - header, - hgroup, - menu, - nav, - output, - ruby, - section, - summary, - time, - mark, - audio, - video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - } - /* HTML5 display-role reset for older browsers */ - article, - aside, - details, - figcaption, - figure, - footer, - header, - hgroup, - menu, - nav, - section { - display: block; - } - body { - line-height: 1; - } - blockquote, - q { - quotes: none; - } - blockquote::before, - blockquote::after, - q::before, - q::after { - content: ''; - content: none; - } - table { - border-collapse: collapse; - border-spacing: 0; - } - - /** - * Our global resets - */ - - /** - * Best practice from http://callmenick.com/post/the-new-box-sizing-reset - * TLDR: It’s easier to override and a slight performance boost. - */ - *, - *::before, - *::after { - box-sizing: inherit; - } - - html { - box-sizing: border-box; - overflow-x: hidden; - - [type='button'] { - appearance: none; - } - } - - body { - background-color: #FFF; - color: #1A1A1A; - font-size:16px;line-height:24px;;; - } - - /** - * Form elements don't inherit font settings. - * https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically - */ - html, - body, - input, - select, - optgroup, - textarea, - button { - font-weight: 400; - font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"; - font-feature-settings: 'kern'; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - } - - pre, - code { - font-family: Consolas, monaco, monospace; - } -" -`; +exports[`BaseStylesService should return the global base styles 1`] = `"@font-face{font-family:'aktiv-grotesk';font-weight:400;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot') format('embedded-opentype');}@font-face{font-family:'aktiv-grotesk';font-weight:700;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot') format('embedded-opentype');}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}*,*::before,*::after{box-sizing:inherit;}html{box-sizing:border-box;overflow-x:hidden;[type='button']{appearance:none;}}body{background-color:#FFF;color:#1A1A1A;font-size:16px;line-height:24px;;;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2VTdHlsZXNTZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCOEQiLCJmaWxlIjoiQmFzZVN0eWxlc1NlcnZpY2UudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAyMDE5LCBTdW1VcCBMdGQuXG4gKiBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJy4uLy4uL3N0eWxlcy9zdHlsZWQnO1xuaW1wb3J0IHsgdHlwb2dyYXBoeSB9IGZyb20gJy4uLy4uL3N0eWxlcy9zdHlsZS1taXhpbnMnO1xuXG5jb25zdCBGT05UU19CQVNFX1VSTCA9ICdodHRwczovL3N0YXRpYy5zdW11cC5jb20vZm9udHMvbGF0aW4tZ3JlZWstY3lyaWxsaWMnO1xuXG5leHBvcnQgY29uc3QgY3JlYXRlQmFzZVN0eWxlcyA9ICh7IHRoZW1lIH06IFN0eWxlUHJvcHMpID0+IGNzc2BcbiAgLyoqXG4gICAqIFN0YXJ0IGRvd25sb2FkaW5nIGN1c3RvbSBmb250cyBhcyBzb29uIGFzIHBvc3NpYmxlLlxuICAgKi9cbiAgQGZvbnQtZmFjZSB7XG4gICAgZm9udC1mYW1pbHk6ICdha3Rpdi1ncm90ZXNrJztcbiAgICBmb250LXdlaWdodDogNDAwO1xuICAgIGZvbnQtZGlzcGxheTogc3dhcDtcbiAgICBzcmM6IHVybCgnJHtGT05UU19CQVNFX1VSTH0vYWt0aXYtZ3JvdGVzdC00MDAud29mZjInKSBmb3JtYXQoJ3dvZmYyJyksXG4gICAgICB1cmwoJyR7Rk9OVFNfQkFTRV9VUkx9L2FrdGl2LWdyb3Rlc3QtNDAwLndvZmYnKSBmb3JtYXQoJ3dvZmYnKSxcbiAgICAgIHVybCgnJHtGT05UU19CQVNFX1VSTH0vYWt0aXYtZ3JvdGVzdC00MDAuZW90JykgZm9ybWF0KCdlbWJlZGRlZC1vcGVudHlwZScpO1xuICB9XG4gIEBmb250LWZhY2Uge1xuICAgIGZvbnQtZmFtaWx5OiAnYWt0aXYtZ3JvdGVzayc7XG4gICAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgICBmb250LWRpc3BsYXk6IHN3YXA7XG4gICAgc3JjOiB1cmwoJyR7Rk9OVFNfQkFTRV9VUkx9L2FrdGl2LWdyb3Rlc3QtNzAwLndvZmYyJykgZm9ybWF0KCd3b2ZmMicpLFxuICAgICAgdXJsKCcke0ZPTlRTX0JBU0VfVVJMfS9ha3Rpdi1ncm90ZXN0LTcwMC53b2ZmJykgZm9ybWF0KCd3b2ZmJyksXG4gICAgICB1cmwoJyR7Rk9OVFNfQkFTRV9VUkx9L2FrdGl2LWdyb3Rlc3QtNzAwLmVvdCcpIGZvcm1hdCgnZW1iZWRkZWQtb3BlbnR5cGUnKTtcbiAgfVxuXG4gIC8qKlxuICAgKiByZXNldC5jc3NcbiAgICogaHR0cDovL21leWVyd2ViLmNvbS9lcmljL3Rvb2xzL2Nzcy9yZXNldC9cbiAgICogdjIuMCB8IDIwMTEwMTI2XG4gICAqIExpY2Vuc2U6IG5vbmUgKHB1YmxpYyBkb21haW4pXG4gICAqL1xuICBodG1sLFxuICBib2R5LFxuICBkaXYsXG4gIHNwYW4sXG4gIGFwcGxldCxcbiAgb2JqZWN0LFxuICBpZnJhbWUsXG4gIGgxLFxuICBoMixcbiAgaDMsXG4gIGg0LFxuICBoNSxcbiAgaDYsXG4gIHAsXG4gIGJsb2NrcXVvdGUsXG4gIHByZSxcbiAgYSxcbiAgYWJicixcbiAgYWNyb255bSxcbiAgYWRkcmVzcyxcbiAgYmlnLFxuICBjaXRlLFxuICBjb2RlLFxuICBkZWwsXG4gIGRmbixcbiAgZW0sXG4gIGltZyxcbiAgaW5zLFxuICBrYmQsXG4gIHEsXG4gIHMsXG4gIHNhbXAsXG4gIHNtYWxsLFxuICBzdHJpa2UsXG4gIHN0cm9uZyxcbiAgc3ViLFxuICBzdXAsXG4gIHR0LFxuICB2YXIsXG4gIGIsXG4gIHUsXG4gIGksXG4gIGNlbnRlcixcbiAgZGwsXG4gIGR0LFxuICBkZCxcbiAgb2wsXG4gIHVsLFxuICBsaSxcbiAgZmllbGRzZXQsXG4gIGZvcm0sXG4gIGxhYmVsLFxuICBsZWdlbmQsXG4gIHRhYmxlLFxuICBjYXB0aW9uLFxuICB0Ym9keSxcbiAgdGZvb3QsXG4gIHRoZWFkLFxuICB0cixcbiAgdGgsXG4gIHRkLFxuICBhcnRpY2xlLFxuICBhc2lkZSxcbiAgY2FudmFzLFxuICBkZXRhaWxzLFxuICBlbWJlZCxcbiAgZmlndXJlLFxuICBmaWdjYXB0aW9uLFxuICBmb290ZXIsXG4gIGhlYWRlcixcbiAgaGdyb3VwLFxuICBtZW51LFxuICBuYXYsXG4gIG91dHB1dCxcbiAgcnVieSxcbiAgc2VjdGlvbixcbiAgc3VtbWFyeSxcbiAgdGltZSxcbiAgbWFyayxcbiAgYXVkaW8sXG4gIHZpZGVvIHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXI6IDA7XG4gICAgZm9udC1zaXplOiAxMDAlO1xuICAgIGZvbnQ6IGluaGVyaXQ7XG4gICAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xuICB9XG4gIC8qIEhUTUw1IGRpc3BsYXktcm9sZSByZXNldCBmb3Igb2xkZXIgYnJvd3NlcnMgKi9cbiAgYXJ0aWNsZSxcbiAgYXNpZGUsXG4gIGRldGFpbHMsXG4gIGZpZ2NhcHRpb24sXG4gIGZpZ3VyZSxcbiAgZm9vdGVyLFxuICBoZWFkZXIsXG4gIGhncm91cCxcbiAgbWVudSxcbiAgbmF2LFxuICBzZWN0aW9uIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuICBib2R5IHtcbiAgICBsaW5lLWhlaWdodDogMTtcbiAgfVxuICBibG9ja3F1b3RlLFxuICBxIHtcbiAgICBxdW90ZXM6IG5vbmU7XG4gIH1cbiAgYmxvY2txdW90ZTo6YmVmb3JlLFxuICBibG9ja3F1b3RlOjphZnRlcixcbiAgcTo6YmVmb3JlLFxuICBxOjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgY29udGVudDogbm9uZTtcbiAgfVxuICB0YWJsZSB7XG4gICAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcbiAgICBib3JkZXItc3BhY2luZzogMDtcbiAgfVxuXG4gIC8qKlxuICAgKiBPdXIgZ2xvYmFsIHJlc2V0c1xuICAgKi9cblxuICAvKipcbiAgICogQmVzdCBwcmFjdGljZSBmcm9tIGh0dHA6Ly9jYWxsbWVuaWNrLmNvbS9wb3N0L3RoZS1uZXctYm94LXNpemluZy1yZXNldFxuICAgKiBUTERSOiBJdOKAmXMgZWFzaWVyIHRvIG92ZXJyaWRlIGFuZCBhIHNsaWdodCBwZXJmb3JtYW5jZSBib29zdC5cbiAgICovXG4gICosXG4gICo6OmJlZm9yZSxcbiAgKjo6YWZ0ZXIge1xuICAgIGJveC1zaXppbmc6IGluaGVyaXQ7XG4gIH1cblxuICBodG1sIHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIG92ZXJmbG93LXg6IGhpZGRlbjtcblxuICAgIFt0eXBlPSdidXR0b24nXSB7XG4gICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIH1cbiAgfVxuXG4gIGJvZHkge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLmJvZHlCZ307XG4gICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLmJvZHlDb2xvcn07XG4gICAgJHt0eXBvZ3JhcGh5KCdvbmUnKSh0aGVtZSl9O1xuICB9XG5cbiAgLyoqXG4gICAqIEZvcm0gZWxlbWVudHMgZG9uJ3QgaW5oZXJpdCBmb250IHNldHRpbmdzLlxuICAgKiBodHRwczovL3N0YWNrb3ZlcmZsb3cuY29tL3F1ZXN0aW9ucy8yNjE0MDA1MC93aHktaXMtZm9udC1mYW1pbHktbm90LWluaGVyaXRlZC1pbi1idXR0b24tdGFncy1hdXRvbWF0aWNhbGx5XG4gICAqL1xuICBodG1sLFxuICBib2R5LFxuICBpbnB1dCxcbiAgc2VsZWN0LFxuICBvcHRncm91cCxcbiAgdGV4dGFyZWEsXG4gIGJ1dHRvbiB7XG4gICAgZm9udC13ZWlnaHQ6ICR7dGhlbWUuZm9udFdlaWdodC5yZWd1bGFyfTtcbiAgICBmb250LWZhbWlseTogJHt0aGVtZS5mb250U3RhY2suZGVmYXVsdH07XG4gICAgZm9udC1mZWF0dXJlLXNldHRpbmdzOiAna2Vybic7XG4gICAgLXdlYmtpdC1mb250LXNtb290aGluZzogYW50aWFsaWFzZWQ7XG4gICAgLW1vei1vc3gtZm9udC1zbW9vdGhpbmc6IGdyYXlzY2FsZTtcbiAgICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICB9XG5cbiAgcHJlLFxuICBjb2RlIHtcbiAgICBmb250LWZhbWlseTogJHt0aGVtZS5mb250U3RhY2subW9ub307XG4gIH1cbmA7XG4iXX0= */"`; diff --git a/packages/circuit-ui/components/Body/Body.spec.tsx b/packages/circuit-ui/components/Body/Body.spec.tsx index aace6740c5..aaaed95ac8 100644 --- a/packages/circuit-ui/components/Body/Body.spec.tsx +++ b/packages/circuit-ui/components/Body/Body.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, axe, render } from '../../util/test-utils'; import { Body, BodyProps } from './Body'; diff --git a/packages/circuit-ui/components/Body/Body.stories.tsx b/packages/circuit-ui/components/Body/Body.stories.tsx index cc7a209e61..8dbeed027f 100644 --- a/packages/circuit-ui/components/Body/Body.stories.tsx +++ b/packages/circuit-ui/components/Body/Body.stories.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import docs from './Body.docs.mdx'; import { BodyProps } from './Body'; diff --git a/packages/circuit-ui/components/Body/Body.tsx b/packages/circuit-ui/components/Body/Body.tsx index f8bc0a6f9a..a1db4559ed 100644 --- a/packages/circuit-ui/components/Body/Body.tsx +++ b/packages/circuit-ui/components/Body/Body.tsx @@ -13,10 +13,8 @@ * limitations under the License. */ -/** @jsx jsx */ - -import { forwardRef, HTMLProps } from 'react'; -import { jsx, css } from '@emotion/core'; +import { forwardRef, HTMLProps, Ref } from 'react'; +import { css } from '@emotion/core'; import isPropValid from '@emotion/is-prop-valid'; import styled, { StyleProps } from '../../styles/styled'; @@ -47,7 +45,7 @@ export interface BodyProps /** * The ref to the HTML DOM element. */ - ref?: React.Ref; + ref?: Ref; } const baseStyles = ({ theme }: StyleProps) => css` diff --git a/packages/circuit-ui/components/Button/Button.spec.tsx b/packages/circuit-ui/components/Button/Button.spec.tsx index fa939f7ee9..0d27275d35 100644 --- a/packages/circuit-ui/components/Button/Button.spec.tsx +++ b/packages/circuit-ui/components/Button/Button.spec.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React from 'react'; +import { createRef } from 'react'; import { ThumbUp } from '@sumup/icons'; import { @@ -116,7 +116,7 @@ describe('Button', () => { * Should accept a working ref for button */ it('should accept a working ref for a button', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render( , ); @@ -128,7 +128,7 @@ describe('Button', () => { * Should accept a working ref for link */ it('should accept a working ref for a link', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render( @@ -118,7 +116,7 @@ const Page = () => { )} - + ); }; ``` diff --git a/packages/circuit-ui/components/Modal/Modal.embed.stories.tsx b/packages/circuit-ui/components/Modal/Modal.embed.stories.tsx index 643ac36e53..b9ec1177ea 100644 --- a/packages/circuit-ui/components/Modal/Modal.embed.stories.tsx +++ b/packages/circuit-ui/components/Modal/Modal.embed.stories.tsx @@ -13,10 +13,8 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ import styled from '@emotion/styled'; -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import { action } from '@storybook/addon-actions'; import Button from '../Button'; diff --git a/packages/circuit-ui/components/Modal/Modal.spec.tsx b/packages/circuit-ui/components/Modal/Modal.spec.tsx index c6e740cecf..486efc8173 100644 --- a/packages/circuit-ui/components/Modal/Modal.spec.tsx +++ b/packages/circuit-ui/components/Modal/Modal.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { render, act, userEvent, waitFor } from '../../util/test-utils'; import Button from '../Button'; diff --git a/packages/circuit-ui/components/Modal/Modal.stories.tsx b/packages/circuit-ui/components/Modal/Modal.stories.tsx index 31f25f2e09..80a35b888d 100644 --- a/packages/circuit-ui/components/Modal/Modal.stories.tsx +++ b/packages/circuit-ui/components/Modal/Modal.stories.tsx @@ -13,11 +13,9 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ import { MouseEvent, KeyboardEvent } from 'react'; import styled from '@emotion/styled'; -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import { action } from '@storybook/addon-actions'; import Button from '../Button'; diff --git a/packages/circuit-ui/components/Modal/Modal.tsx b/packages/circuit-ui/components/Modal/Modal.tsx index 9baacf8a4c..c2847b410c 100644 --- a/packages/circuit-ui/components/Modal/Modal.tsx +++ b/packages/circuit-ui/components/Modal/Modal.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react'; +import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react'; import ReactModal, { Props } from 'react-modal'; import { ClassNames } from '@emotion/core'; import { useTheme } from 'emotion-theming'; diff --git a/packages/circuit-ui/components/Modal/ModalContext.tsx b/packages/circuit-ui/components/Modal/ModalContext.tsx index 05ee86edbe..725292d632 100644 --- a/packages/circuit-ui/components/Modal/ModalContext.tsx +++ b/packages/circuit-ui/components/Modal/ModalContext.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { +import { createContext, FC, useState, diff --git a/packages/circuit-ui/components/Modal/components/ModalFooter/ModalFooter.spec.tsx b/packages/circuit-ui/components/Modal/components/ModalFooter/ModalFooter.spec.tsx index 9840d1849f..96192aaf47 100644 --- a/packages/circuit-ui/components/Modal/components/ModalFooter/ModalFooter.spec.tsx +++ b/packages/circuit-ui/components/Modal/components/ModalFooter/ModalFooter.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, axe } from '../../../../util/test-utils'; import { ModalFooter } from './ModalFooter'; diff --git a/packages/circuit-ui/components/Modal/components/ModalFooter/__snapshots__/ModalFooter.spec.tsx.snap b/packages/circuit-ui/components/Modal/components/ModalFooter/__snapshots__/ModalFooter.spec.tsx.snap index 2539031e79..d0486a0345 100644 --- a/packages/circuit-ui/components/Modal/components/ModalFooter/__snapshots__/ModalFooter.spec.tsx.snap +++ b/packages/circuit-ui/components/Modal/components/ModalFooter/__snapshots__/ModalFooter.spec.tsx.snap @@ -49,7 +49,7 @@ exports[`ModalFooter should render with default styles 1`] = ` right: 0; width: 100%; height: 24px; - background: linear-gradient( rgba(256,256,256,0), #FFF ); + background: linear-gradient( rgba(256,256,256,0),#FFF ); } } diff --git a/packages/circuit-ui/components/Modal/components/ModalHeader/ModalHeader.spec.tsx b/packages/circuit-ui/components/Modal/components/ModalHeader/ModalHeader.spec.tsx index ce653e3106..22b8aedb48 100644 --- a/packages/circuit-ui/components/Modal/components/ModalHeader/ModalHeader.spec.tsx +++ b/packages/circuit-ui/components/Modal/components/ModalHeader/ModalHeader.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, axe } from '../../../../util/test-utils'; import { ModalHeader } from './ModalHeader'; diff --git a/packages/circuit-ui/components/Modal/components/ModalHeader/ModalHeader.tsx b/packages/circuit-ui/components/Modal/components/ModalHeader/ModalHeader.tsx index a4be5a14a7..1477d95820 100644 --- a/packages/circuit-ui/components/Modal/components/ModalHeader/ModalHeader.tsx +++ b/packages/circuit-ui/components/Modal/components/ModalHeader/ModalHeader.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { FC, MouseEvent, KeyboardEvent } from 'react'; +import { FC, MouseEvent, KeyboardEvent } from 'react'; import { CardHeader } from '../../../Card'; import Headline from '../../../Headline'; diff --git a/packages/circuit-ui/components/Modal/components/ModalWrapper/ModalWrapper.spec.tsx b/packages/circuit-ui/components/Modal/components/ModalWrapper/ModalWrapper.spec.tsx index 7b8e788573..35dc0a5906 100644 --- a/packages/circuit-ui/components/Modal/components/ModalWrapper/ModalWrapper.spec.tsx +++ b/packages/circuit-ui/components/Modal/components/ModalWrapper/ModalWrapper.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, axe } from '../../../../util/test-utils'; import { ModalWrapper } from './ModalWrapper'; diff --git a/packages/circuit-ui/components/Modal/components/ModalWrapper/ModalWrapper.tsx b/packages/circuit-ui/components/Modal/components/ModalWrapper/ModalWrapper.tsx index e4616cabbe..4f157ae972 100644 --- a/packages/circuit-ui/components/Modal/components/ModalWrapper/ModalWrapper.tsx +++ b/packages/circuit-ui/components/Modal/components/ModalWrapper/ModalWrapper.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { FC } from 'react'; +import { FC } from 'react'; import { css } from '@emotion/core'; import styled, { StyleProps } from '../../../../styles/styled'; diff --git a/packages/circuit-ui/components/Notification/Notification.spec.tsx b/packages/circuit-ui/components/Notification/Notification.spec.tsx index e468f598f8..51043f0bab 100644 --- a/packages/circuit-ui/components/Notification/Notification.spec.tsx +++ b/packages/circuit-ui/components/Notification/Notification.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, axe } from '../../util/test-utils'; import { Notification } from './Notification'; diff --git a/packages/circuit-ui/components/Notification/Notification.stories.tsx b/packages/circuit-ui/components/Notification/Notification.stories.tsx index 33a95ed994..c8c06313cf 100644 --- a/packages/circuit-ui/components/Notification/Notification.stories.tsx +++ b/packages/circuit-ui/components/Notification/Notification.stories.tsx @@ -13,11 +13,9 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ import { Fragment } from 'react'; import { action } from '@storybook/addon-actions'; -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import { Theme } from '@sumup/design-tokens'; import Headline from '../Headline'; diff --git a/packages/circuit-ui/components/Notification/Notification.tsx b/packages/circuit-ui/components/Notification/Notification.tsx index ab2a450d8a..19fd239ba9 100644 --- a/packages/circuit-ui/components/Notification/Notification.tsx +++ b/packages/circuit-ui/components/Notification/Notification.tsx @@ -13,10 +13,8 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ import { FC, SVGProps, ReactNode, MouseEvent, KeyboardEvent } from 'react'; -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import { CircleCheckmarkFilled, CircleCrossFilled, diff --git a/packages/circuit-ui/components/NotificationCard/NotificationCard.spec.tsx b/packages/circuit-ui/components/NotificationCard/NotificationCard.spec.tsx index 6fae01c1c1..070aa8e3b5 100644 --- a/packages/circuit-ui/components/NotificationCard/NotificationCard.spec.tsx +++ b/packages/circuit-ui/components/NotificationCard/NotificationCard.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, axe } from '../../util/test-utils'; import { NotificationCard } from './NotificationCard'; diff --git a/packages/circuit-ui/components/NotificationCard/NotificationCard.stories.tsx b/packages/circuit-ui/components/NotificationCard/NotificationCard.stories.tsx index c01b6fa654..9a027a357c 100644 --- a/packages/circuit-ui/components/NotificationCard/NotificationCard.stories.tsx +++ b/packages/circuit-ui/components/NotificationCard/NotificationCard.stories.tsx @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { action } from '@storybook/addon-actions'; import Notification from '../Notification'; diff --git a/packages/circuit-ui/components/NotificationCard/NotificationCard.tsx b/packages/circuit-ui/components/NotificationCard/NotificationCard.tsx index a218f5c21e..2cb7468a5b 100644 --- a/packages/circuit-ui/components/NotificationCard/NotificationCard.tsx +++ b/packages/circuit-ui/components/NotificationCard/NotificationCard.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { HTMLProps, ReactNode } from 'react'; +import { HTMLProps, ReactNode } from 'react'; import { css } from '@emotion/core'; import styled, { NoTheme, StyleProps } from '../../styles/styled'; diff --git a/packages/circuit-ui/components/NotificationList/NotificationList.spec.tsx b/packages/circuit-ui/components/NotificationList/NotificationList.spec.tsx index d9f5ec7f40..0eed7f553f 100644 --- a/packages/circuit-ui/components/NotificationList/NotificationList.spec.tsx +++ b/packages/circuit-ui/components/NotificationList/NotificationList.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, axe } from '../../util/test-utils'; import { NotificationList } from './NotificationList'; diff --git a/packages/circuit-ui/components/NotificationList/NotificationList.stories.tsx b/packages/circuit-ui/components/NotificationList/NotificationList.stories.tsx index f0df768aa4..67aaeaa568 100644 --- a/packages/circuit-ui/components/NotificationList/NotificationList.stories.tsx +++ b/packages/circuit-ui/components/NotificationList/NotificationList.stories.tsx @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { action } from '@storybook/addon-actions'; import Headline from '../Headline'; diff --git a/packages/circuit-ui/components/NotificationList/NotificationList.tsx b/packages/circuit-ui/components/NotificationList/NotificationList.tsx index 51f1ef8eb3..3dbc308e5b 100644 --- a/packages/circuit-ui/components/NotificationList/NotificationList.tsx +++ b/packages/circuit-ui/components/NotificationList/NotificationList.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { Children, HTMLProps, ReactNode } from 'react'; +import { Children, HTMLProps, ReactNode } from 'react'; import { css } from '@emotion/core'; import styled, { NoTheme, StyleProps } from '../../styles/styled'; diff --git a/packages/circuit-ui/components/Pagination/Pagination.spec.tsx b/packages/circuit-ui/components/Pagination/Pagination.spec.tsx index 8a402b8cdc..6cdad5aebd 100644 --- a/packages/circuit-ui/components/Pagination/Pagination.spec.tsx +++ b/packages/circuit-ui/components/Pagination/Pagination.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, render, diff --git a/packages/circuit-ui/components/Pagination/Pagination.stories.tsx b/packages/circuit-ui/components/Pagination/Pagination.stories.tsx index 43cabeee4d..94009d4e1c 100644 --- a/packages/circuit-ui/components/Pagination/Pagination.stories.tsx +++ b/packages/circuit-ui/components/Pagination/Pagination.stories.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { useState } from 'react'; +import { useState } from 'react'; import docs from './Pagination.docs.mdx'; import { Pagination, PaginationProps } from './Pagination'; diff --git a/packages/circuit-ui/components/Pagination/Pagination.tsx b/packages/circuit-ui/components/Pagination/Pagination.tsx index 57f692aa5f..ea0d2dd6c3 100644 --- a/packages/circuit-ui/components/Pagination/Pagination.tsx +++ b/packages/circuit-ui/components/Pagination/Pagination.tsx @@ -13,9 +13,7 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import { Theme } from '@sumup/design-tokens'; import { ChevronLeft, ChevronRight } from '@sumup/icons'; import { Dispatch as TrackingProps, useClickTrigger } from '@sumup/collector'; diff --git a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap index b1b6e18bf3..8ae852a7da 100644 --- a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap +++ b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap @@ -44,8 +44,8 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = ` border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; padding: calc(12px - 1px) calc(24px - 1px); background-color: transparent; border-color: transparent; @@ -134,8 +134,8 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = ` border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; background-color: #3063E9; border-color: #3063E9; color: #FFF; @@ -201,8 +201,8 @@ li:last-child .circuit-2 { border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; padding: 4px calc(16px - 1px); background-color: transparent; border-color: transparent; @@ -268,8 +268,8 @@ li:last-child .circuit-3 { border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; padding: calc(12px - 1px) calc(24px - 1px); background-color: transparent; border-color: transparent; @@ -467,8 +467,8 @@ exports[`Pagination with more than 5 pages should render with default styles 1`] border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; padding: calc(12px - 1px) calc(24px - 1px); background-color: transparent; border-color: transparent; @@ -545,8 +545,8 @@ exports[`Pagination with more than 5 pages should render with default styles 1`] border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; padding: calc(12px - 1px) calc(24px - 1px); background-color: transparent; border-color: transparent; @@ -620,8 +620,8 @@ exports[`Pagination with more than 5 pages should render with default styles 1`] overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; box-shadow: 0 0 0 1px #999; } diff --git a/packages/circuit-ui/components/Pagination/components/PageList/PageList.spec.tsx b/packages/circuit-ui/components/Pagination/components/PageList/PageList.spec.tsx index bfd35e67d8..f07eacfa20 100644 --- a/packages/circuit-ui/components/Pagination/components/PageList/PageList.spec.tsx +++ b/packages/circuit-ui/components/Pagination/components/PageList/PageList.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, render, diff --git a/packages/circuit-ui/components/Pagination/components/PageList/PageList.tsx b/packages/circuit-ui/components/Pagination/components/PageList/PageList.tsx index 4938cd8620..687436e8c2 100644 --- a/packages/circuit-ui/components/Pagination/components/PageList/PageList.tsx +++ b/packages/circuit-ui/components/Pagination/components/PageList/PageList.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { HTMLProps } from 'react'; +import { HTMLProps } from 'react'; import { css } from '@emotion/core'; import styled, { StyleProps } from '../../../../styles/styled'; diff --git a/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap b/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap index bcd8b9f21b..14a7dd5c46 100644 --- a/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap +++ b/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap @@ -39,8 +39,8 @@ exports[`PageList styles should render with default styles 1`] = ` border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; background-color: #3063E9; border-color: #3063E9; color: #FFF; @@ -106,8 +106,8 @@ li:last-child .circuit-0 { border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; padding: 4px calc(16px - 1px); background-color: transparent; border-color: transparent; diff --git a/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.spec.tsx b/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.spec.tsx index bf9b167c06..5fb8a27d43 100644 --- a/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.spec.tsx +++ b/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.spec.tsx @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent } from '@testing-library/dom'; import { diff --git a/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.tsx b/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.tsx index dcbec37e4a..4d38b03458 100644 --- a/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.tsx +++ b/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { useCallback, FunctionComponent, ChangeEvent } from 'react'; +import { useCallback, FunctionComponent, ChangeEvent, Fragment } from 'react'; import styled from '../../../../styles/styled'; import { Select, SelectProps } from '../../../Select/Select'; @@ -49,7 +49,7 @@ export const PageSelect: FunctionComponent = ({ ); return ( - <> + ); const select = container.querySelector('select'); expect(tref.current).toBe(select); diff --git a/packages/circuit-ui/components/Select/Select.stories.tsx b/packages/circuit-ui/components/Select/Select.stories.tsx index 351674be37..a0fe7958b0 100644 --- a/packages/circuit-ui/components/Select/Select.stories.tsx +++ b/packages/circuit-ui/components/Select/Select.stories.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { useState, FC } from 'react'; +import { useState, FC } from 'react'; import { FlagDe, FlagUs, FlagFr } from '@sumup/icons'; import { Select, SelectProps } from './Select'; diff --git a/packages/circuit-ui/components/Select/Select.tsx b/packages/circuit-ui/components/Select/Select.tsx index 7dbbf03bff..52b89c987a 100644 --- a/packages/circuit-ui/components/Select/Select.tsx +++ b/packages/circuit-ui/components/Select/Select.tsx @@ -13,10 +13,8 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ -import React, { FC, ReactNode, Ref, HTMLProps, ChangeEvent } from 'react'; -import { css, jsx } from '@emotion/core'; +import { FC, ReactNode, Ref, HTMLProps, ChangeEvent, forwardRef } from 'react'; +import { css } from '@emotion/core'; import { ChevronDown, ChevronUp } from '@sumup/icons'; import { Theme } from '@sumup/design-tokens'; import { Dispatch as TrackingProps } from '@sumup/collector'; @@ -309,7 +307,7 @@ const IconInactive = styled(ChevronUp)( /** * A native select component. */ -export const Select = React.forwardRef( +export const Select = forwardRef( ( { value, diff --git a/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap b/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap index 6136fbcbf7..a309600736 100644 --- a/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap +++ b/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap @@ -80,8 +80,8 @@ select:not(:active) ~ .circuit-2 { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; box-shadow: 0 0 0 1px #999; } @@ -208,8 +208,8 @@ label + .circuit-4 { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; box-shadow: 0 0 0 1px #999; } @@ -428,8 +428,8 @@ select:not(:active) ~ .circuit-3 { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; padding-left: 48px; box-shadow: 0 0 0 1px #999; } @@ -570,8 +570,8 @@ label + .circuit-3 { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; box-shadow: 0 0 0 1px #999; } @@ -752,8 +752,8 @@ exports[`Select should render with a visually-hidden label 1`] = ` overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; box-shadow: 0 0 0 1px #999; } @@ -947,8 +947,8 @@ label + .circuit-3 { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; box-shadow: 0 0 0 1px #999; } @@ -1155,8 +1155,8 @@ select:not(:active) ~ .circuit-2 { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; box-shadow: 0 0 0 1px #999; } @@ -1275,8 +1275,8 @@ label + .circuit-3 { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; box-shadow: 0 0 0 1px #999; } @@ -1490,8 +1490,8 @@ select:not(:active) ~ .circuit-2 { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; padding-right: 56px; box-shadow: 0 0 0 1px #D23F47; } @@ -1622,8 +1622,8 @@ label + .circuit-3 { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; - transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out; + -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; + transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; box-shadow: 0 0 0 1px #999; } diff --git a/packages/circuit-ui/components/Selector/Selector.spec.tsx b/packages/circuit-ui/components/Selector/Selector.spec.tsx index 9bade6c6c6..ec576ca9ba 100644 --- a/packages/circuit-ui/components/Selector/Selector.spec.tsx +++ b/packages/circuit-ui/components/Selector/Selector.spec.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React from 'react'; +import { createRef } from 'react'; import { create, @@ -115,7 +115,7 @@ describe('Selector', () => { * Should accept a working ref */ it('should accept a working ref', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render(); const input = container.querySelector('input'); expect(tref.current).toBe(input); diff --git a/packages/circuit-ui/components/Selector/Selector.stories.tsx b/packages/circuit-ui/components/Selector/Selector.stories.tsx index 785a63dc4f..a1137e686c 100644 --- a/packages/circuit-ui/components/Selector/Selector.stories.tsx +++ b/packages/circuit-ui/components/Selector/Selector.stories.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { Stack } from '../../../../.storybook/components'; import SelectorGroup from '../SelectorGroup'; import Body from '../Body'; diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx index 6f23b52436..6eb445c399 100644 --- a/packages/circuit-ui/components/Selector/Selector.tsx +++ b/packages/circuit-ui/components/Selector/Selector.tsx @@ -13,10 +13,8 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ -import React, { Fragment, Ref, HTMLProps } from 'react'; -import { css, jsx } from '@emotion/core'; +import { Fragment, Ref, HTMLProps, forwardRef } from 'react'; +import { css } from '@emotion/core'; import { Dispatch as TrackingProps } from '@sumup/collector'; import { Theme } from '@sumup/design-tokens'; @@ -207,7 +205,7 @@ const SelectorInput = styled('input')< * A selector allows users to choose between several mutually-exclusive choices * accompanied by descriptions, possibly with tabular data. */ -export const Selector = React.forwardRef( +export const Selector = forwardRef( ( { children, diff --git a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.spec.tsx b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.spec.tsx index 2c4a1f28f0..21411014f6 100644 --- a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.spec.tsx +++ b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.spec.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React from 'react'; +import { createRef } from 'react'; import { create, render, renderToHtml, axe } from '../../util/test-utils'; @@ -72,7 +72,7 @@ describe('SelectorGroup', () => { }); it('should accept a working ref', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render( , ); diff --git a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.stories.tsx b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.stories.tsx index c1a965eef6..16d751e859 100644 --- a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.stories.tsx +++ b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.stories.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { useState, ChangeEvent } from 'react'; +import { useState, ChangeEvent } from 'react'; import { SelectorGroup, SelectorGroupProps } from './SelectorGroup'; diff --git a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx index dc6ec6aeeb..1efd4bf151 100644 --- a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx +++ b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx @@ -13,11 +13,9 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ -import React, { ReactNode, ChangeEvent, Ref } from 'react'; +import { ReactNode, ChangeEvent, Ref, forwardRef } from 'react'; import { includes } from 'lodash/fp'; -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import styled, { StyleProps } from '../../styles/styled'; import { uniqueId } from '../../util/id'; @@ -113,7 +111,7 @@ const StyledSelector = styled(Selector)` /** * A group of Selectors. */ -export const SelectorGroup = React.forwardRef( +export const SelectorGroup = forwardRef( ( { options, diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.docs.mdx b/packages/circuit-ui/components/Sidebar/Sidebar.docs.mdx index 326f573802..c290a23a3f 100644 --- a/packages/circuit-ui/components/Sidebar/Sidebar.docs.mdx +++ b/packages/circuit-ui/components/Sidebar/Sidebar.docs.mdx @@ -59,7 +59,7 @@ When you want to create a sidebar with a flat navigation structure, you can simply use something like this: ```jsx -import React, { useState } from 'react'; +import { useState } from 'react'; import { Sidebar } from '@sumup/circuit-ui'; const Navigation = () => { @@ -111,7 +111,7 @@ To avoid keeping the logic of toggling the `Sidebar` on your application, you ca React's Context API. You can do that like this: ```jsx -import React, { useState } from 'react'; +import { useState } from 'react'; import { Sidebar, SidebarContextProvider, SidebarContextConsumer } from '@sumup/circuit-ui'; const Navigation = () => { diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.js b/packages/circuit-ui/components/Sidebar/Sidebar.js index 55d807e5bb..d5ca0b9ceb 100644 --- a/packages/circuit-ui/components/Sidebar/Sidebar.js +++ b/packages/circuit-ui/components/Sidebar/Sidebar.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { Fragment } from 'react'; +import { Fragment } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.spec.js b/packages/circuit-ui/components/Sidebar/Sidebar.spec.js index d1aafefdbd..42964a19b4 100644 --- a/packages/circuit-ui/components/Sidebar/Sidebar.spec.js +++ b/packages/circuit-ui/components/Sidebar/Sidebar.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import Sidebar from './Sidebar'; describe('Sidebar', () => { diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.stories.js b/packages/circuit-ui/components/Sidebar/Sidebar.stories.js index 2938a362a5..906ca51e82 100644 --- a/packages/circuit-ui/components/Sidebar/Sidebar.stories.js +++ b/packages/circuit-ui/components/Sidebar/Sidebar.stories.js @@ -13,10 +13,8 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ import { useState } from 'react'; -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import styled from '@emotion/styled'; import { House, diff --git a/packages/circuit-ui/components/Sidebar/SidebarContext.js b/packages/circuit-ui/components/Sidebar/SidebarContext.js index 75083a3ddb..3500dab3d9 100644 --- a/packages/circuit-ui/components/Sidebar/SidebarContext.js +++ b/packages/circuit-ui/components/Sidebar/SidebarContext.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { createContext } from 'react'; +import { createContext, Component } from 'react'; import PropTypes from 'prop-types'; const SidebarContext = createContext({ @@ -23,7 +23,7 @@ const SidebarContext = createContext({ const SidebarContextConsumer = SidebarContext.Consumer; -class SidebarContextProvider extends React.Component { +class SidebarContextProvider extends Component { state = { isSidebarOpen: false }; toggleSidebar = () => { diff --git a/packages/circuit-ui/components/Sidebar/SidebarContext.spec.js b/packages/circuit-ui/components/Sidebar/SidebarContext.spec.js index 5b3cd6934a..b64b8da06d 100644 --- a/packages/circuit-ui/components/Sidebar/SidebarContext.spec.js +++ b/packages/circuit-ui/components/Sidebar/SidebarContext.spec.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { useContext } from 'react'; +import { useContext } from 'react'; import { SidebarContext, diff --git a/packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.js.snap b/packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.js.snap index a2609ae255..89293ea1a3 100644 --- a/packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.js.snap +++ b/packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.js.snap @@ -110,8 +110,8 @@ HTMLCollection [ border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; background-color: #FFF; border-color: #999; color: #000; @@ -275,8 +275,8 @@ HTMLCollection [ border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; background-color: #FFF; border-color: #999; color: #000; diff --git a/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.spec.tsx b/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.spec.tsx index f4b34de393..85ac256350 100644 --- a/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.spec.tsx +++ b/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, diff --git a/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx b/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx index ba9b3dd6c7..ed2546013e 100644 --- a/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx +++ b/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx @@ -16,8 +16,6 @@ // TODO: Improve types /* eslint-disable @typescript-eslint/no-unsafe-assignment */ -/** @jsxRuntime classic */ -/** @jsx jsx */ import { useState, useEffect, @@ -27,7 +25,7 @@ import { ReactNode, KeyboardEvent, } from 'react'; -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import { TrackingElement } from '@sumup/collector'; import { isEmpty } from 'lodash/fp'; diff --git a/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.spec.js b/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.spec.js index 37874aa6b2..13436f9049 100644 --- a/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.spec.js +++ b/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import Backdrop from './Backdrop'; describe('Backdrop', () => { diff --git a/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.spec.js b/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.spec.js index 41a10924a6..824d75a7a8 100644 --- a/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.spec.js +++ b/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import CloseButton from './CloseButton'; describe('CloseButton', () => { diff --git a/packages/circuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap b/packages/circuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap index 48cf6fc3f1..b4d4d04420 100644 --- a/packages/circuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap +++ b/packages/circuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap @@ -27,8 +27,8 @@ exports[`CloseButton styles should render and match snapshot when not visible 1` border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; background-color: #FFF; border-color: #999; color: #000; @@ -158,8 +158,8 @@ exports[`CloseButton styles should render and match snapshot when visible 1`] = border-width: 1px; border-style: solid; border-radius: 999999px; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; background-color: #FFF; border-color: #999; color: #000; diff --git a/packages/circuit-ui/components/Sidebar/components/Footer/Footer.spec.js b/packages/circuit-ui/components/Sidebar/components/Footer/Footer.spec.js index 217662811e..5001ea9f1e 100644 --- a/packages/circuit-ui/components/Sidebar/components/Footer/Footer.spec.js +++ b/packages/circuit-ui/components/Sidebar/components/Footer/Footer.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import Footer from './Footer'; describe('Footer', () => { diff --git a/packages/circuit-ui/components/Sidebar/components/Header/Header.spec.js b/packages/circuit-ui/components/Sidebar/components/Header/Header.spec.js index 33deff4982..cc379295e9 100644 --- a/packages/circuit-ui/components/Sidebar/components/Header/Header.spec.js +++ b/packages/circuit-ui/components/Sidebar/components/Header/Header.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import Header from './Header'; describe('Header', () => { diff --git a/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.js b/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.js index 016b9ae6a4..951e4c36f7 100644 --- a/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.js +++ b/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.js @@ -13,11 +13,9 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ import PropTypes from 'prop-types'; import styled from '@emotion/styled'; -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import isPropValid from '@emotion/is-prop-valid'; import useClickHandler from '../../../../hooks/use-click-handler'; diff --git a/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.spec.js b/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.spec.js index dbbd5d0900..598a306a94 100644 --- a/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.spec.js +++ b/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import NavList from '../NavList'; import NavItem from '.'; diff --git a/packages/circuit-ui/components/Sidebar/components/NavItem/utils.js b/packages/circuit-ui/components/Sidebar/components/NavItem/utils.js index f402e0e459..2a405340ec 100644 --- a/packages/circuit-ui/components/Sidebar/components/NavItem/utils.js +++ b/packages/circuit-ui/components/Sidebar/components/NavItem/utils.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { isEmpty } from 'lodash/fp'; import { Lock } from '@sumup/icons'; diff --git a/packages/circuit-ui/components/Sidebar/components/NavItem/utils.spec.js b/packages/circuit-ui/components/Sidebar/components/NavItem/utils.spec.js index f6d0867faf..fc402f7d82 100644 --- a/packages/circuit-ui/components/Sidebar/components/NavItem/utils.spec.js +++ b/packages/circuit-ui/components/Sidebar/components/NavItem/utils.spec.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { Lock } from '@sumup/icons'; import { hasSelectedChild, getIcon } from './utils'; diff --git a/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.spec.js b/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.spec.js index bc9541e9b4..8a786d9204 100644 --- a/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.spec.js +++ b/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import NavLabel from './NavLabel'; describe('NavLabel', () => { diff --git a/packages/circuit-ui/components/Sidebar/components/NavList/NavList.js b/packages/circuit-ui/components/Sidebar/components/NavList/NavList.js index f57b49d3c6..381a486ee5 100644 --- a/packages/circuit-ui/components/Sidebar/components/NavList/NavList.js +++ b/packages/circuit-ui/components/Sidebar/components/NavList/NavList.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/packages/circuit-ui/components/Sidebar/components/NavList/NavList.spec.js b/packages/circuit-ui/components/Sidebar/components/NavList/NavList.spec.js index d42efbad8e..8ebc7a310e 100644 --- a/packages/circuit-ui/components/Sidebar/components/NavList/NavList.spec.js +++ b/packages/circuit-ui/components/Sidebar/components/NavList/NavList.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import NavList from './NavList'; describe('NavList', () => { diff --git a/packages/circuit-ui/components/Sidebar/components/Separator/Separator.js b/packages/circuit-ui/components/Sidebar/components/Separator/Separator.js index 1e8c959b11..3c3751abbc 100644 --- a/packages/circuit-ui/components/Sidebar/components/Separator/Separator.js +++ b/packages/circuit-ui/components/Sidebar/components/Separator/Separator.js @@ -13,9 +13,7 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ -import { jsx, css } from '@emotion/core'; +import { css } from '@emotion/core'; import Hr from '../../../Hr'; diff --git a/packages/circuit-ui/components/Sidebar/components/Separator/Separator.spec.js b/packages/circuit-ui/components/Sidebar/components/Separator/Separator.spec.js index 70f853dcd9..e0f26ebd97 100644 --- a/packages/circuit-ui/components/Sidebar/components/Separator/Separator.spec.js +++ b/packages/circuit-ui/components/Sidebar/components/Separator/Separator.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import Separator from './Separator'; describe('Separator', () => { diff --git a/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.js b/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.js index bd1333786f..b79c3f3ea1 100644 --- a/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.js +++ b/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.spec.js b/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.spec.js index 339148c9ca..0a56e68eac 100644 --- a/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.spec.js +++ b/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import SubNavList from './SubNavList'; describe('SubNavList', () => { diff --git a/packages/circuit-ui/components/Spacing/Spacing.spec.tsx b/packages/circuit-ui/components/Spacing/Spacing.spec.tsx index 20eab52281..f2e8d4948e 100644 --- a/packages/circuit-ui/components/Spacing/Spacing.spec.tsx +++ b/packages/circuit-ui/components/Spacing/Spacing.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, axe } from '../../util/test-utils'; import { Spacing } from './Spacing'; diff --git a/packages/circuit-ui/components/Spacing/Spacing.stories.tsx b/packages/circuit-ui/components/Spacing/Spacing.stories.tsx index 64e864f0fa..c12c290abc 100644 --- a/packages/circuit-ui/components/Spacing/Spacing.stories.tsx +++ b/packages/circuit-ui/components/Spacing/Spacing.stories.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import Button from '../Button'; import { Spacing, SpacingProps } from './Spacing'; diff --git a/packages/circuit-ui/components/Spacing/__snapshots__/Spacing.spec.tsx.snap b/packages/circuit-ui/components/Spacing/__snapshots__/Spacing.spec.tsx.snap index af7be08c42..098c8739a4 100644 --- a/packages/circuit-ui/components/Spacing/__snapshots__/Spacing.spec.tsx.snap +++ b/packages/circuit-ui/components/Spacing/__snapshots__/Spacing.spec.tsx.snap @@ -22,6 +22,6 @@ exports[`Spacing margin top should render with margin top styles 1`] = ` exports[`Spacing should render with default styles 1`] = `
`; diff --git a/packages/circuit-ui/components/Spinner/Spinner.spec.tsx b/packages/circuit-ui/components/Spinner/Spinner.spec.tsx index 7970da3a54..c62d529a72 100644 --- a/packages/circuit-ui/components/Spinner/Spinner.spec.tsx +++ b/packages/circuit-ui/components/Spinner/Spinner.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, axe } from '../../util/test-utils'; import { Spinner, SpinnerProps } from './Spinner'; diff --git a/packages/circuit-ui/components/Spinner/Spinner.stories.tsx b/packages/circuit-ui/components/Spinner/Spinner.stories.tsx index 3f7e132702..cd176892cb 100644 --- a/packages/circuit-ui/components/Spinner/Spinner.stories.tsx +++ b/packages/circuit-ui/components/Spinner/Spinner.stories.tsx @@ -13,9 +13,7 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import { Theme } from '@sumup/design-tokens'; import { Stack } from '../../../../.storybook/components'; diff --git a/packages/circuit-ui/components/Step/Step.spec.js b/packages/circuit-ui/components/Step/Step.spec.js index e4d8e55b11..eaaf4c1c5d 100644 --- a/packages/circuit-ui/components/Step/Step.spec.js +++ b/packages/circuit-ui/components/Step/Step.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import Step from './Step'; import useStep from './hooks/use-step'; diff --git a/packages/circuit-ui/components/Step/Step.stories.js b/packages/circuit-ui/components/Step/Step.stories.js index bcbdb6985d..561a75b18d 100644 --- a/packages/circuit-ui/components/Step/Step.stories.js +++ b/packages/circuit-ui/components/Step/Step.stories.js @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { action } from '@storybook/addon-actions'; import Step from './Step'; diff --git a/packages/circuit-ui/components/Step/examples/CarouselSlider.js b/packages/circuit-ui/components/Step/examples/CarouselSlider.js index 6d5a4e5aa0..bd87fb9f65 100644 --- a/packages/circuit-ui/components/Step/examples/CarouselSlider.js +++ b/packages/circuit-ui/components/Step/examples/CarouselSlider.js @@ -15,7 +15,6 @@ /* istanbul ignore file */ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/packages/circuit-ui/components/Step/examples/MultiStepForm.js b/packages/circuit-ui/components/Step/examples/MultiStepForm.js index 8cc14820db..8ac1ca897a 100644 --- a/packages/circuit-ui/components/Step/examples/MultiStepForm.js +++ b/packages/circuit-ui/components/Step/examples/MultiStepForm.js @@ -15,9 +15,7 @@ /* istanbul ignore file */ -/** @jsxRuntime classic */ -/** @jsx jsx */ -import { jsx, css } from '@emotion/core'; +import { css } from '@emotion/core'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; diff --git a/packages/circuit-ui/components/Step/examples/YesOrNoSlider.js b/packages/circuit-ui/components/Step/examples/YesOrNoSlider.js index 0593abaef8..60a35bcc41 100644 --- a/packages/circuit-ui/components/Step/examples/YesOrNoSlider.js +++ b/packages/circuit-ui/components/Step/examples/YesOrNoSlider.js @@ -15,7 +15,7 @@ /* istanbul ignore file */ -import React, { useState } from 'react'; +import { useState } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.spec.tsx b/packages/circuit-ui/components/SubHeadline/SubHeadline.spec.tsx index 5e70297bb9..71acdb872f 100644 --- a/packages/circuit-ui/components/SubHeadline/SubHeadline.spec.tsx +++ b/packages/circuit-ui/components/SubHeadline/SubHeadline.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, renderToHtml, axe } from '../../util/test-utils'; import { SubHeadline } from './SubHeadline'; diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.stories.tsx b/packages/circuit-ui/components/SubHeadline/SubHeadline.stories.tsx index e1c7f2e843..e11066a802 100644 --- a/packages/circuit-ui/components/SubHeadline/SubHeadline.stories.tsx +++ b/packages/circuit-ui/components/SubHeadline/SubHeadline.stories.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { SubHeadline, SubHeadlineProps } from './SubHeadline'; import docs from './SubHeadline.docs.mdx'; diff --git a/packages/circuit-ui/components/Table/Table.spec.tsx b/packages/circuit-ui/components/Table/Table.spec.tsx index 84cfa1df9b..ea4186dbce 100644 --- a/packages/circuit-ui/components/Table/Table.spec.tsx +++ b/packages/circuit-ui/components/Table/Table.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, render, diff --git a/packages/circuit-ui/components/Table/Table.stories.tsx b/packages/circuit-ui/components/Table/Table.stories.tsx index 670fca8452..b579104842 100644 --- a/packages/circuit-ui/components/Table/Table.stories.tsx +++ b/packages/circuit-ui/components/Table/Table.stories.tsx @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { action } from '@storybook/addon-actions'; import Badge from '../Badge'; diff --git a/packages/circuit-ui/components/Table/Table.tsx b/packages/circuit-ui/components/Table/Table.tsx index daeeb7a74a..7847dc3f4c 100644 --- a/packages/circuit-ui/components/Table/Table.tsx +++ b/packages/circuit-ui/components/Table/Table.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { Component, createRef, HTMLProps } from 'react'; +import { Component, createRef, HTMLProps, UIEvent } from 'react'; import { css } from '@emotion/core'; import { isNil, throttle } from 'lodash/fp'; @@ -301,7 +301,7 @@ class Table extends Component { return [...rows].sort(sortFn(i)); }; - handleScroll = (e: React.UIEvent) => { + handleScroll = (e: UIEvent) => { this.setState({ scrollTop: e.currentTarget.scrollTop }); }; diff --git a/packages/circuit-ui/components/Table/__snapshots__/Table.spec.tsx.snap b/packages/circuit-ui/components/Table/__snapshots__/Table.spec.tsx.snap index f303cda031..eb19b3a90f 100644 --- a/packages/circuit-ui/components/Table/__snapshots__/Table.spec.tsx.snap +++ b/packages/circuit-ui/components/Table/__snapshots__/Table.spec.tsx.snap @@ -1,38 +1,38 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Table Style tests should not render a scrollable table if the rowHeaders prop is true 1`] = ` -.circuit-31 { +.circuit-35 { position: relative; border: 1px solid #CCC; } -.circuit-30 { +.circuit-34 { border-radius: 4px; } @media (max-width:767px) { - .circuit-30 { + .circuit-34 { height: unset; margin-left: 145px; overflow-x: auto; } } -.circuit-29 { +.circuit-33 { background-color: #FFF; border-collapse: separate; width: 100%; } @media (max-width:767px) { - .circuit-29 { + .circuit-33 { margin-left: -145px; width: calc(100% + 145px); } - .circuit-29:after { + .circuit-33:after { content: ''; - background-image: linear-gradient( 90deg, rgba(0,0,0,0.12), transparent ); + background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent ); height: 100%; left: 145px; position: absolute; @@ -55,8 +55,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -201,8 +201,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -253,8 +253,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -264,17 +264,17 @@ tbody .circuit-12:last-child td { white-space: nowrap; } -.circuit-14 { +.circuit-15 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; } @media (max-width:767px) { - .circuit-14 { + .circuit-15 { left: 0; top: auto; position: absolute; @@ -283,7 +283,7 @@ tbody .circuit-12:last-child td { } } -.circuit-15 { +.circuit-16 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -296,7 +296,7 @@ tbody .circuit-12:last-child td { } @media (max-width:767px) { - .circuit-15 { + .circuit-16 { display: table-cell; min-width: 145px; max-width: 145px; @@ -304,7 +304,7 @@ tbody .circuit-12:last-child td { } } -.circuit-16 { +.circuit-17 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -316,19 +316,19 @@ tbody .circuit-12:last-child td { }
@@ -536,38 +536,38 @@ tbody .circuit-12:last-child td { `; exports[`Table Style tests should render "null" or "undefined" cells 1`] = ` -.circuit-15 { +.circuit-18 { position: relative; border: 1px solid #CCC; } -.circuit-14 { +.circuit-17 { border-radius: 4px; } @media (max-width:767px) { - .circuit-14 { + .circuit-17 { height: unset; margin-left: 145px; overflow-x: auto; } } -.circuit-13 { +.circuit-16 { background-color: #FFF; border-collapse: separate; width: 100%; } @media (max-width:767px) { - .circuit-13 { + .circuit-16 { margin-left: -145px; width: calc(100% + 145px); } - .circuit-13:after { + .circuit-16:after { content: ''; - background-image: linear-gradient( 90deg, rgba(0,0,0,0.12), transparent ); + background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent ); height: 100%; left: 145px; position: absolute; @@ -616,8 +616,8 @@ tbody .circuit-3:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -627,17 +627,17 @@ tbody .circuit-3:last-child td { white-space: nowrap; } -.circuit-5 { +.circuit-6 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; } @media (max-width:767px) { - .circuit-5 { + .circuit-6 { left: 0; top: auto; position: absolute; @@ -646,7 +646,7 @@ tbody .circuit-3:last-child td { } } -.circuit-6 { +.circuit-7 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -659,7 +659,7 @@ tbody .circuit-3:last-child td { } @media (max-width:767px) { - .circuit-6 { + .circuit-7 { display: table-cell; min-width: 145px; max-width: 145px; @@ -667,7 +667,7 @@ tbody .circuit-3:last-child td { } } -.circuit-7 { +.circuit-8 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -683,8 +683,8 @@ tbody .circuit-3:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -705,19 +705,19 @@ tbody .circuit-3:last-child td { }
b 3 Foo
a 1 Bar
c 2 Baz
@@ -786,17 +786,17 @@ tbody .circuit-3:last-child td { `; exports[`Table Style tests should render a collapsed table 1`] = ` -.circuit-31 { +.circuit-35 { position: relative; border: 1px solid #CCC; } -.circuit-30 { +.circuit-34 { border-radius: 4px; } @media (max-width:767px) { - .circuit-30 { + .circuit-34 { height: unset; margin-left: 145px; overflow-x: auto; @@ -817,8 +817,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -963,8 +963,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -1015,8 +1015,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -1026,17 +1026,17 @@ tbody .circuit-12:last-child td { white-space: nowrap; } -.circuit-14 { +.circuit-15 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; } @media (max-width:767px) { - .circuit-14 { + .circuit-15 { left: 0; top: auto; position: absolute; @@ -1045,7 +1045,7 @@ tbody .circuit-12:last-child td { } } -.circuit-15 { +.circuit-16 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -1058,7 +1058,7 @@ tbody .circuit-12:last-child td { } @media (max-width:767px) { - .circuit-15 { + .circuit-16 { display: table-cell; min-width: 145px; max-width: 145px; @@ -1066,7 +1066,7 @@ tbody .circuit-12:last-child td { } } -.circuit-16 { +.circuit-17 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -1077,7 +1077,7 @@ tbody .circuit-12:last-child td { overflow-wrap: break-word; } -.circuit-29 { +.circuit-33 { background-color: #FFF; border-collapse: separate; width: 100%; @@ -1085,14 +1085,14 @@ tbody .circuit-12:last-child td { } @media (max-width:767px) { - .circuit-29 { + .circuit-33 { margin-left: -145px; width: calc(100% + 145px); } - .circuit-29:after { + .circuit-33:after { content: ''; - background-image: linear-gradient( 90deg, rgba(0,0,0,0.12), transparent ); + background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent ); height: 100%; left: 145px; position: absolute; @@ -1102,19 +1102,19 @@ tbody .circuit-12:last-child td { }
Fruit
Broccoli
@@ -1322,38 +1322,38 @@ tbody .circuit-12:last-child td { `; exports[`Table Style tests should render a condensed table 1`] = ` -.circuit-31 { +.circuit-35 { position: relative; border: 1px solid #CCC; } -.circuit-30 { +.circuit-34 { border-radius: 4px; } @media (max-width:767px) { - .circuit-30 { + .circuit-34 { height: unset; margin-left: 145px; overflow-x: auto; } } -.circuit-29 { +.circuit-33 { background-color: #FFF; border-collapse: separate; width: 100%; } @media (max-width:767px) { - .circuit-29 { + .circuit-33 { margin-left: -145px; width: calc(100% + 145px); } - .circuit-29:after { + .circuit-33:after { content: ''; - background-image: linear-gradient( 90deg, rgba(0,0,0,0.12), transparent ); + background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent ); height: 100%; left: 145px; position: absolute; @@ -1434,8 +1434,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -1534,8 +1534,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -1591,8 +1591,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -1607,13 +1607,13 @@ tbody .circuit-12:last-child td { padding: 8px 16px; } -.circuit-14 { +.circuit-15 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; vertical-align: middle; @@ -1621,7 +1621,7 @@ tbody .circuit-12:last-child td { } @media (max-width:767px) { - .circuit-14 { + .circuit-15 { left: 0; top: auto; position: absolute; @@ -1630,7 +1630,7 @@ tbody .circuit-12:last-child td { } } -.circuit-15 { +.circuit-16 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -1649,7 +1649,7 @@ tbody .circuit-12:last-child td { } @media (max-width:767px) { - .circuit-15 { + .circuit-16 { display: table-cell; min-width: 145px; max-width: 145px; @@ -1657,7 +1657,7 @@ tbody .circuit-12:last-child td { } } -.circuit-16 { +.circuit-17 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -1672,19 +1672,19 @@ tbody .circuit-12:last-child td { }
b 3 Foo
a 1 Bar
c 2 Baz
@@ -1964,8 +1964,8 @@ tbody .circuit-11:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -2016,8 +2016,8 @@ tbody .circuit-11:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -2027,7 +2027,7 @@ tbody .circuit-11:last-child td { white-space: nowrap; } -.circuit-13 { +.circuit-14 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -2038,44 +2038,44 @@ tbody .circuit-11:last-child td { overflow-wrap: break-word; } -.circuit-27 { +.circuit-31 { position: relative; height: 100%; border: 1px solid #CCC; } @media (max-width:767px) { - .circuit-27 { + .circuit-31 { height: 100%; } } -.circuit-25 { +.circuit-29 { background-color: #FFF; border-collapse: separate; width: 100%; } -.circuit-26 { +.circuit-30 { height: 0px; overflow-y: auto; }
b 3 Foo
a 1 Bar
c 2 Baz
@@ -2252,38 +2252,38 @@ tbody .circuit-11:last-child td { `; exports[`Table Style tests should render with component cells 1`] = ` -.circuit-20 { +.circuit-24 { position: relative; border: 1px solid #CCC; } -.circuit-19 { +.circuit-23 { border-radius: 4px; } @media (max-width:767px) { - .circuit-19 { + .circuit-23 { height: unset; margin-left: 145px; overflow-x: auto; } } -.circuit-18 { +.circuit-22 { background-color: #FFF; border-collapse: separate; width: 100%; } @media (max-width:767px) { - .circuit-18 { + .circuit-22 { margin-left: -145px; width: calc(100% + 145px); } - .circuit-18:after { + .circuit-22:after { content: ''; - background-image: linear-gradient( 90deg, rgba(0,0,0,0.12), transparent ); + background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent ); height: 100%; left: 145px; position: absolute; @@ -2332,8 +2332,8 @@ tbody .circuit-3:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -2343,17 +2343,17 @@ tbody .circuit-3:last-child td { white-space: nowrap; } -.circuit-5 { +.circuit-6 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; } @media (max-width:767px) { - .circuit-5 { + .circuit-6 { left: 0; top: auto; position: absolute; @@ -2362,7 +2362,7 @@ tbody .circuit-3:last-child td { } } -.circuit-6 { +.circuit-7 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -2375,7 +2375,7 @@ tbody .circuit-3:last-child td { } @media (max-width:767px) { - .circuit-6 { + .circuit-7 { display: table-cell; min-width: 145px; max-width: 145px; @@ -2383,7 +2383,7 @@ tbody .circuit-3:last-child td { } } -.circuit-7 { +.circuit-8 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -2399,8 +2399,8 @@ tbody .circuit-3:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -2420,7 +2420,7 @@ tbody .circuit-3:last-child td { } } -.circuit-15 { +.circuit-18 { border-radius: 999999px; color: #FFF; display: inline-block; @@ -2438,19 +2438,19 @@ tbody .circuit-3:last-child td { }
b 3 Foo
a 1 Bar
c 2 Baz
Apple Fruit
Broccoli Vegetable
Chickpeas
Unknown @@ -2552,38 +2552,38 @@ tbody .circuit-3:last-child td { `; exports[`Table Style tests should render with default styles 1`] = ` -.circuit-31 { +.circuit-35 { position: relative; border: 1px solid #CCC; } -.circuit-30 { +.circuit-34 { border-radius: 4px; } @media (max-width:767px) { - .circuit-30 { + .circuit-34 { height: unset; margin-left: 145px; overflow-x: auto; } } -.circuit-29 { +.circuit-33 { background-color: #FFF; border-collapse: separate; width: 100%; } @media (max-width:767px) { - .circuit-29 { + .circuit-33 { margin-left: -145px; width: calc(100% + 145px); } - .circuit-29:after { + .circuit-33:after { content: ''; - background-image: linear-gradient( 90deg, rgba(0,0,0,0.12), transparent ); + background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent ); height: 100%; left: 145px; position: absolute; @@ -2606,8 +2606,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -2752,8 +2752,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -2804,8 +2804,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -2815,17 +2815,17 @@ tbody .circuit-12:last-child td { white-space: nowrap; } -.circuit-14 { +.circuit-15 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; } @media (max-width:767px) { - .circuit-14 { + .circuit-15 { left: 0; top: auto; position: absolute; @@ -2834,7 +2834,7 @@ tbody .circuit-12:last-child td { } } -.circuit-15 { +.circuit-16 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -2847,7 +2847,7 @@ tbody .circuit-12:last-child td { } @media (max-width:767px) { - .circuit-15 { + .circuit-16 { display: table-cell; min-width: 145px; max-width: 145px; @@ -2855,7 +2855,7 @@ tbody .circuit-12:last-child td { } } -.circuit-16 { +.circuit-17 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -2867,19 +2867,19 @@ tbody .circuit-12:last-child td { }
@@ -3087,38 +3087,38 @@ tbody .circuit-12:last-child td { `; exports[`Table Style tests should render with rowHeader styles 1`] = ` -.circuit-31 { +.circuit-35 { position: relative; border: 1px solid #CCC; } -.circuit-30 { +.circuit-34 { border-radius: 4px; } @media (max-width:767px) { - .circuit-30 { + .circuit-34 { height: unset; margin-left: 145px; overflow-x: auto; } } -.circuit-29 { +.circuit-33 { background-color: #FFF; border-collapse: separate; width: 100%; } @media (max-width:767px) { - .circuit-29 { + .circuit-33 { margin-left: -145px; width: calc(100% + 145px); } - .circuit-29:after { + .circuit-33:after { content: ''; - background-image: linear-gradient( 90deg, rgba(0,0,0,0.12), transparent ); + background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent ); height: 100%; left: 145px; position: absolute; @@ -3141,8 +3141,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -3287,8 +3287,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -3339,8 +3339,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -3350,17 +3350,17 @@ tbody .circuit-12:last-child td { white-space: nowrap; } -.circuit-14 { +.circuit-15 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; } @media (max-width:767px) { - .circuit-14 { + .circuit-15 { left: 0; top: auto; position: absolute; @@ -3369,7 +3369,7 @@ tbody .circuit-12:last-child td { } } -.circuit-15 { +.circuit-16 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -3382,7 +3382,7 @@ tbody .circuit-12:last-child td { } @media (max-width:767px) { - .circuit-15 { + .circuit-16 { display: table-cell; min-width: 145px; max-width: 145px; @@ -3390,7 +3390,7 @@ tbody .circuit-12:last-child td { } } -.circuit-16 { +.circuit-17 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -3402,19 +3402,19 @@ tbody .circuit-12:last-child td { }
b 3 Foo
a 1 Bar
c 2 Baz
@@ -3622,33 +3622,33 @@ tbody .circuit-12:last-child td { `; exports[`Table Style tests should render without the table shadow 1`] = ` -.circuit-30 { +.circuit-34 { border-radius: 4px; } @media (max-width:767px) { - .circuit-30 { + .circuit-34 { height: unset; margin-left: 145px; overflow-x: auto; } } -.circuit-29 { +.circuit-33 { background-color: #FFF; border-collapse: separate; width: 100%; } @media (max-width:767px) { - .circuit-29 { + .circuit-33 { margin-left: -145px; width: calc(100% + 145px); } - .circuit-29:after { + .circuit-33:after { content: ''; - background-image: linear-gradient( 90deg, rgba(0,0,0,0.12), transparent ); + background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent ); height: 100%; left: 145px; position: absolute; @@ -3671,8 +3671,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -3817,8 +3817,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -3869,8 +3869,8 @@ tbody .circuit-12:last-child td { border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; font-size: 14px; line-height: 20px; color: #666; @@ -3880,17 +3880,17 @@ tbody .circuit-12:last-child td { white-space: nowrap; } -.circuit-14 { +.circuit-15 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; text-align: left; - -webkit-transition: background-color 120ms ease-in-out, color 120ms ease-in-out; - transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + -webkit-transition: background-color 120ms ease-in-out,color 120ms ease-in-out; + transition: background-color 120ms ease-in-out,color 120ms ease-in-out; } @media (max-width:767px) { - .circuit-14 { + .circuit-15 { left: 0; top: auto; position: absolute; @@ -3899,7 +3899,7 @@ tbody .circuit-12:last-child td { } } -.circuit-15 { +.circuit-16 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -3912,7 +3912,7 @@ tbody .circuit-12:last-child td { } @media (max-width:767px) { - .circuit-15 { + .circuit-16 { display: table-cell; min-width: 145px; max-width: 145px; @@ -3920,7 +3920,7 @@ tbody .circuit-12:last-child td { } } -.circuit-16 { +.circuit-17 { background-color: #FFF; border-bottom: 1px solid #CCC; padding: 24px; @@ -3931,24 +3931,24 @@ tbody .circuit-12:last-child td { overflow-wrap: break-word; } -.circuit-31 { +.circuit-35 { position: relative; }
b 3 Foo
a 1 Bar
c 2 Baz
diff --git a/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.spec.tsx b/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.spec.tsx index 99bd9c5ecc..4c26adeece 100644 --- a/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.spec.tsx +++ b/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, render, diff --git a/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.tsx b/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.tsx index 2840db1397..45d5eaf166 100644 --- a/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.tsx +++ b/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.tsx @@ -13,10 +13,8 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ import { HTMLAttributes } from 'react'; -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import { ChevronUp, ChevronDown } from '@sumup/icons'; import styled, { StyleProps } from '../../../../styles/styled'; diff --git a/packages/circuit-ui/components/Table/components/TableBody/TableBody.spec.tsx b/packages/circuit-ui/components/Table/components/TableBody/TableBody.spec.tsx index ebb90c4f90..8adb2876a8 100644 --- a/packages/circuit-ui/components/Table/components/TableBody/TableBody.spec.tsx +++ b/packages/circuit-ui/components/Table/components/TableBody/TableBody.spec.tsx @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import { create, render, renderToHtml, axe } from '../../../../util/test-utils'; import TableBody from '.'; diff --git a/packages/circuit-ui/components/Table/components/TableBody/TableBody.tsx b/packages/circuit-ui/components/Table/components/TableBody/TableBody.tsx index 66c53ee048..ca3bdd4f01 100644 --- a/packages/circuit-ui/components/Table/components/TableBody/TableBody.tsx +++ b/packages/circuit-ui/components/Table/components/TableBody/TableBody.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { Fragment } from 'react'; +import { Fragment } from 'react'; import { mapRowProps, mapCellProps, getCellChildren } from '../../utils'; import { Row } from '../../types'; diff --git a/packages/circuit-ui/components/Table/components/TableBody/__snapshots__/TableBody.spec.tsx.snap b/packages/circuit-ui/components/Table/components/TableBody/__snapshots__/TableBody.spec.tsx.snap index f4ce0635fc..09b3f4bb4b 100644 --- a/packages/circuit-ui/components/Table/components/TableBody/__snapshots__/TableBody.spec.tsx.snap +++ b/packages/circuit-ui/components/Table/components/TableBody/__snapshots__/TableBody.spec.tsx.snap @@ -23,7 +23,7 @@ tbody .circuit-2:last-child td { Foo diff --git a/packages/circuit-ui/components/Tabs/Tabs.js b/packages/circuit-ui/components/Tabs/Tabs.js index 7725c11473..bf56f945f6 100644 --- a/packages/circuit-ui/components/Tabs/Tabs.js +++ b/packages/circuit-ui/components/Tabs/Tabs.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { Component, Fragment } from 'react'; +import { Component, Fragment, createRef } from 'react'; import PropTypes from 'prop-types'; import { range } from 'lodash/fp'; @@ -126,7 +126,7 @@ function getIds(id) { } function createRefs(length) { - return range(0, length).map(React.createRef); + return range(0, length).map(createRef); } export default Tabs; diff --git a/packages/circuit-ui/components/Tabs/Tabs.spec.js b/packages/circuit-ui/components/Tabs/Tabs.spec.js index edb9105d9f..17d8a6e880 100644 --- a/packages/circuit-ui/components/Tabs/Tabs.spec.js +++ b/packages/circuit-ui/components/Tabs/Tabs.spec.js @@ -13,8 +13,6 @@ * limitations under the License. */ -import React from 'react'; - import TabPanel from './components/TabPanel'; import TabList from './components/TabList'; import Tab from './components/Tab'; diff --git a/packages/circuit-ui/components/Tabs/Tabs.stories.js b/packages/circuit-ui/components/Tabs/Tabs.stories.js index a3f5dd512d..178c70e700 100644 --- a/packages/circuit-ui/components/Tabs/Tabs.stories.js +++ b/packages/circuit-ui/components/Tabs/Tabs.stories.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { useState } from 'react'; +import { useState, Fragment } from 'react'; import docs from './Tabs.docs.mdx'; @@ -66,7 +66,7 @@ export const ControlledState = () => { const [selected, setSelected] = useState(0); return ( - <> + {tabs.map(({ tab }, index) => ( { ))} {tabs[selected].content} - + ); }; diff --git a/packages/circuit-ui/components/Tabs/__snapshots__/Tabs.spec.js.snap b/packages/circuit-ui/components/Tabs/__snapshots__/Tabs.spec.js.snap index 729b87f30a..ac794d7384 100644 --- a/packages/circuit-ui/components/Tabs/__snapshots__/Tabs.spec.js.snap +++ b/packages/circuit-ui/components/Tabs/__snapshots__/Tabs.spec.js.snap @@ -2,7 +2,7 @@ exports[`Tabs styles should render with default styles 1`] = ` .circuit-6 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); -ms-overflow-style: none; -webkit-scrollbar-width: none; -moz-scrollbar-width: none; @@ -184,7 +184,7 @@ exports[`Tabs styles should render with default styles 1`] = ` exports[`Tabs styles should render with stretched styles 1`] = ` .circuit-6 { - box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); + box-shadow: 0 0 0 1px rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07); -ms-overflow-style: none; -webkit-scrollbar-width: none; -moz-scrollbar-width: none; diff --git a/packages/circuit-ui/components/Tabs/components/Tab/Tab.js b/packages/circuit-ui/components/Tabs/components/Tab/Tab.js index 66b0cccb11..7fc0b9ba71 100644 --- a/packages/circuit-ui/components/Tabs/components/Tab/Tab.js +++ b/packages/circuit-ui/components/Tabs/components/Tab/Tab.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { forwardRef } from 'react'; +import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; diff --git a/packages/circuit-ui/components/Tabs/components/Tab/Tab.spec.js b/packages/circuit-ui/components/Tabs/components/Tab/Tab.spec.js index f9b4bf966c..ad4e0ee9a9 100644 --- a/packages/circuit-ui/components/Tabs/components/Tab/Tab.spec.js +++ b/packages/circuit-ui/components/Tabs/components/Tab/Tab.spec.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import React from 'react'; +import { createRef } from 'react'; import Tab from './Tab'; @@ -32,7 +32,7 @@ describe('Tab', () => { describe('business logic', () => { it('should accept a working ref', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render(); const button = container.querySelector('button'); expect(tref.current).toBe(button); diff --git a/packages/circuit-ui/components/Tabs/components/TabList/TabList.js b/packages/circuit-ui/components/Tabs/components/TabList/TabList.js index 956c2e1c88..b9ff1c50b2 100644 --- a/packages/circuit-ui/components/Tabs/components/TabList/TabList.js +++ b/packages/circuit-ui/components/Tabs/components/TabList/TabList.js @@ -13,11 +13,9 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ import PropTypes from 'prop-types'; import styled from '@emotion/styled'; -import { css, jsx } from '@emotion/core'; +import { css } from '@emotion/core'; import { shadowDouble, hideScrollbar } from '../../../../styles/style-mixins'; diff --git a/packages/circuit-ui/components/Tabs/components/TabPanel/TabPanel.js b/packages/circuit-ui/components/Tabs/components/TabPanel/TabPanel.js index f69e7b9c13..d33561c047 100644 --- a/packages/circuit-ui/components/Tabs/components/TabPanel/TabPanel.js +++ b/packages/circuit-ui/components/Tabs/components/TabPanel/TabPanel.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import React, { forwardRef } from 'react'; +import { forwardRef } from 'react'; /** * Tabpanel wrapping content being showed by tabs diff --git a/packages/circuit-ui/components/Tabs/components/TabPanels/TabPanels.js b/packages/circuit-ui/components/Tabs/components/TabPanels/TabPanels.js index f697acba81..3f0bd7f532 100644 --- a/packages/circuit-ui/components/Tabs/components/TabPanels/TabPanels.js +++ b/packages/circuit-ui/components/Tabs/components/TabPanels/TabPanels.js @@ -13,13 +13,13 @@ * limitations under the License. */ -import React from 'react'; +import { Children } from 'react'; /** * Tabpanel wrapping content being showed by tabs */ const TabPanels = ({ selectedIndex, children }) => - React.Children.map(children, (child, index) => { + Children.map(children, (child, index) => { if (index === selectedIndex) { return child; } diff --git a/packages/circuit-ui/components/Tag/Tag.spec.tsx b/packages/circuit-ui/components/Tag/Tag.spec.tsx index 912ed90633..997d1dbb4b 100644 --- a/packages/circuit-ui/components/Tag/Tag.spec.tsx +++ b/packages/circuit-ui/components/Tag/Tag.spec.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import React from 'react'; +import { createRef } from 'react'; import { create, @@ -83,7 +83,7 @@ describe('Tag', () => { * Should accept a working ref */ it('should accept a working ref', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render(); const button = container.querySelector('button'); expect(tref.current).toBe(button); diff --git a/packages/circuit-ui/components/Tag/Tag.stories.tsx b/packages/circuit-ui/components/Tag/Tag.stories.tsx index 27b84be866..ed9d4264e0 100644 --- a/packages/circuit-ui/components/Tag/Tag.stories.tsx +++ b/packages/circuit-ui/components/Tag/Tag.stories.tsx @@ -13,7 +13,6 @@ * limitations under the License. */ -import React from 'react'; import { action } from '@storybook/addon-actions'; import { Check } from '@sumup/icons'; diff --git a/packages/circuit-ui/components/Tag/Tag.tsx b/packages/circuit-ui/components/Tag/Tag.tsx index 1cd45a2254..239e4dd50b 100644 --- a/packages/circuit-ui/components/Tag/Tag.tsx +++ b/packages/circuit-ui/components/Tag/Tag.tsx @@ -13,10 +13,8 @@ * limitations under the License. */ -/** @jsxRuntime classic */ -/** @jsx jsx */ -import React, { HTMLProps, Ref, FC, SVGProps, MouseEvent } from 'react'; -import { css, jsx } from '@emotion/core'; +import { HTMLProps, Ref, FC, SVGProps, MouseEvent, forwardRef } from 'react'; +import { css } from '@emotion/core'; import { Dispatch as TrackingProps } from '@sumup/collector'; import { Theme } from '@sumup/design-tokens'; @@ -183,7 +181,7 @@ const Container = styled.div` position: relative; `; -export const Tag = React.forwardRef( +export const Tag = forwardRef( ( { children, diff --git a/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap b/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap index a53d5f93c9..2520f02355 100644 --- a/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap +++ b/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap @@ -23,8 +23,8 @@ exports[`Tag when is clickable should render with clickable styles 1`] = ` padding: calc(4px - 1px) 12px; cursor: default; background-color: #FFF; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; cursor: pointer; outline: 0; text-align: left; @@ -83,8 +83,8 @@ exports[`Tag when is default should render with default styles 1`] = ` padding: calc(4px - 1px) 12px; cursor: default; background-color: #FFF; - -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; - transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; }
{ * Should accept a working ref */ it('should accept a working ref', () => { - const tref = React.createRef(); + const tref = createRef(); const { container } = render(
b 3 Foo
a 1 Bar
c 2 Baz
Foo @@ -52,7 +52,7 @@ tbody .circuit-0:last-child td { }