From 9149acf97b8868696be112f2134ca7746a0f1647 Mon Sep 17 00:00:00 2001 From: Birte Rohden Date: Wed, 12 Nov 2025 15:30:51 +0100 Subject: [PATCH 01/23] chore: :arrow_up: upgrade styled-components to 6.1.19 and migrate --- package-lock.json | 244 +++++++-- packages/components/package.json | 2 +- .../components/src/Accordion/Accordion.tsx | 4 +- .../__snapshots__/Accordion.test.tsx.snap | 70 +-- packages/components/src/Alert/Alert.tsx | 4 +- .../Alert/__snapshots__/Alert.test.tsx.snap | 18 +- packages/components/src/Avatar/Avatar.d.ts | 4 +- packages/components/src/Avatar/Avatar.tsx | 30 +- .../Avatar/__snapshots__/Avatar.test.tsx.snap | 42 +- .../Badge/__snapshots__/Badge.test.tsx.snap | 1 + packages/components/src/Box/Box.d.ts | 2 +- packages/components/src/Box/Box.ts | 76 ++- .../src/Breadcrumbs/Breadcrumbs.d.ts | 2 +- .../__snapshots__/Breadcrumbs.test.tsx.snap | 23 +- packages/components/src/Button/Button.d.ts | 2 +- packages/components/src/Button/Button.tsx | 9 +- .../Button/__snapshots__/Button.test.tsx.snap | 246 ++------- packages/components/src/Card/Card.tsx | 14 +- .../src/Card/__snapshots__/Card.test.tsx.snap | 71 +-- .../components/src/CardHeader/CardHeader.d.ts | 4 +- packages/components/src/Center/Center.d.ts | 2 +- packages/components/src/Checkbox/Checkbox.tsx | 12 +- .../__snapshots__/Checkbox.test.tsx.snap | 60 +-- packages/components/src/Content/Content.d.ts | 6 +- .../src/GlobalStyle/GlobalStyle.d.ts | 2 +- packages/components/src/Grid/Grid.d.ts | 277 +--------- .../components/src/GridItem/GridItem.d.ts | 274 +--------- packages/components/src/Heading/Heading.d.ts | 2 +- packages/components/src/Heading/Heading.tsx | 4 +- packages/components/src/Icon/Icon.d.ts | 506 +----------------- packages/components/src/Input/Input.tsx | 10 +- .../src/LegacyBookmark/LegacyBookmark.d.ts | 6 +- .../components/src/LegacyCard/LegacyCard.d.ts | 4 +- packages/components/src/Link/HoverLink.d.ts | 281 +--------- packages/components/src/Link/Link.d.ts | 285 +--------- .../__snapshots__/ListBox.test.tsx.snap | 6 +- packages/components/src/Loader/Loader.d.ts | 2 +- packages/components/src/Loader/Loader.tsx | 6 +- packages/components/src/Logo/Logo.d.ts | 8 +- .../NProgressBarGlobalStyle.d.ts | 4 +- .../__snapshots__/NoticeBox.test.tsx.snap | 13 +- .../src/PageFooter/DesktopFooter.tsx | 2 +- .../src/PageHeader/components/BurgerNav.tsx | 13 +- .../src/Placeholder/Placeholder.d.ts | 2 +- .../components/src/Punchline/Punchline.d.ts | 4 +- .../__snapshots__/Punchline.test.tsx.snap | 26 +- packages/components/src/Ratio/Ratio.d.ts | 273 +--------- .../src/RoundedButton/RoundedButton.d.ts | 4 +- .../src/RoundedButton/RoundedButton.tsx | 13 +- packages/components/src/Slider/Slider.tsx | 2 +- .../src/SocialButton/SocialButton.d.ts | 5 +- .../src/SocialButton/SocialButton.tsx | 20 +- .../Switch/__snapshots__/Switch.test.tsx.snap | 84 +-- packages/components/src/Tag/Tag.tsx | 11 +- .../src/Tag/__snapshots__/Tag.test.tsx.snap | 64 +-- .../__snapshots__/TagList.test.tsx.snap | 33 +- packages/components/src/Text/Text.d.ts | 8 +- packages/components/src/Text/Text.tsx | 13 +- packages/components/src/Textarea/Textarea.tsx | 9 +- .../components/src/UserMenu/UserMenu.d.ts | 2 +- packages/components/src/helper/animation.d.ts | 3 +- .../components/src/helper/renderWithTheme.tsx | 2 +- packages/components/src/hooks/useIsMobile.tsx | 2 +- packages/components/src/types.d.ts | 8 + packages/storybook/package.json | 6 +- 65 files changed, 652 insertions(+), 2595 deletions(-) diff --git a/package-lock.json b/package-lock.json index d19ce9ddc..aecf180e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -203,6 +203,7 @@ "version": "7.27.3", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz", "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.27.3" @@ -354,6 +355,7 @@ "version": "7.27.1", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz", "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -693,6 +695,7 @@ "version": "7.27.1", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz", "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" @@ -2380,6 +2383,7 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz", "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==", + "dev": true, "license": "MIT", "dependencies": { "@emotion/memoize": "^0.9.0" @@ -2438,6 +2442,7 @@ "version": "11.14.1", "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz", "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.3", @@ -2457,12 +2462,6 @@ } } }, - "node_modules/@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", - "license": "MIT" - }, "node_modules/@emotion/unitless": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", @@ -2497,6 +2496,7 @@ "cpu": [ "ppc64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2513,6 +2513,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2529,6 +2530,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2545,6 +2547,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2561,6 +2564,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2577,6 +2581,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2593,6 +2598,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2609,6 +2615,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2625,6 +2632,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2641,6 +2649,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2657,6 +2666,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2673,6 +2683,7 @@ "cpu": [ "loong64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2689,6 +2700,7 @@ "cpu": [ "mips64el" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2705,6 +2717,7 @@ "cpu": [ "ppc64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2721,6 +2734,7 @@ "cpu": [ "riscv64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2737,6 +2751,7 @@ "cpu": [ "s390x" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2753,6 +2768,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2769,6 +2785,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2785,6 +2802,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2801,6 +2819,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2817,6 +2836,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2833,6 +2853,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2849,6 +2870,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2865,6 +2887,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2881,6 +2904,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -5748,6 +5772,7 @@ "version": "8.5.3", "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.5.3.tgz", "integrity": "sha512-ZLlr2pltbj/hmC54lggJTnh09FCAJR62lIdiXNwa+V+/eJz0CfD8tfGmZGKPSmaQeZBpMwAOeRM97k2oLPF+0w==", + "dev": true, "license": "MIT", "dependencies": { "@storybook/csf": "0.1.12", @@ -5795,6 +5820,7 @@ "version": "7.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", + "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -6673,6 +6699,7 @@ "version": "9.3.4", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.10.4", @@ -7152,9 +7179,9 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "18.3.18", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", - "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", + "version": "18.3.26", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz", + "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==", "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -7172,9 +7199,9 @@ } }, "node_modules/@types/react-dom": { - "version": "18.3.5", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz", - "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==", + "version": "18.3.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz", + "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", "dev": true, "license": "MIT", "peerDependencies": { @@ -7262,6 +7289,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", + "license": "MIT" + }, "node_modules/@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", @@ -8384,6 +8417,7 @@ "version": "0.16.1", "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz", "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==", + "dev": true, "license": "MIT", "dependencies": { "tslib": "^2.0.1" @@ -8940,6 +8974,7 @@ "version": "2.1.4", "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -8956,6 +8991,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, "license": "MIT", "engines": { "node": ">=8.6" @@ -9055,6 +9091,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz", "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==", + "dev": true, "license": "MIT", "dependencies": { "open": "^8.0.4" @@ -10967,6 +11004,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -11699,6 +11737,7 @@ "version": "0.24.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz", "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==", + "dev": true, "hasInstallScript": true, "license": "MIT", "bin": { @@ -11739,6 +11778,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz", "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==", + "dev": true, "license": "MIT", "dependencies": { "debug": "^4.3.4" @@ -12551,6 +12591,7 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "dev": true, "license": "BSD-2-Clause", "bin": { "esparse": "bin/esparse.js", @@ -14795,6 +14836,7 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "dev": true, "license": "MIT", "bin": { "is-docker": "cli.js" @@ -15175,6 +15217,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dev": true, "license": "MIT", "dependencies": { "is-docker": "^2.0.0" @@ -16722,6 +16765,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz", "integrity": "sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==", + "dev": true, "license": "MIT", "engines": { "node": ">=12.0.0" @@ -21834,6 +21878,7 @@ "version": "8.4.2", "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz", "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==", + "dev": true, "license": "MIT", "dependencies": { "define-lazy-prop": "^2.0.0", @@ -22642,7 +22687,7 @@ "version": "3.6.2", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz", "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", - "devOptional": true, + "dev": true, "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" @@ -23491,6 +23536,7 @@ "version": "0.23.9", "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz", "integrity": "sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==", + "dev": true, "license": "MIT", "dependencies": { "ast-types": "^0.16.1", @@ -23507,6 +23553,7 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -24569,6 +24616,7 @@ "version": "8.5.3", "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.5.3.tgz", "integrity": "sha512-2WtNBZ45u1AhviRU+U+ld588tH8gDa702dNSq5C8UBaE9PlOsazGsyp90dw1s9YRvi+ejrjKAupQAU0GwwUiVg==", + "dev": true, "license": "MIT", "dependencies": { "@storybook/core": "8.5.3" @@ -24877,24 +24925,23 @@ } }, "node_modules/styled-components": { - "version": "5.3.11", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", - "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "version": "6.1.19", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz", + "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==", "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.49", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" }, "engines": { - "node": ">=10" + "node": ">= 16" }, "funding": { "type": "opencollective", @@ -24902,37 +24949,70 @@ }, "peerDependencies": { "react": ">= 16.8.0", - "react-dom": ">= 16.8.0", - "react-is": ">= 16.8.0" + "react-dom": ">= 16.8.0" } }, - "node_modules/styled-components/node_modules/@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", - "license": "MIT" - }, - "node_modules/styled-components/node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "node_modules/styled-components/node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", "license": "MIT", - "engines": { - "node": ">=4" + "dependencies": { + "@emotion/memoize": "^0.8.1" } }, - "node_modules/styled-components/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "node_modules/styled-components/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "license": "MIT" + }, + "node_modules/styled-components/node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "license": "MIT" + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "license": "MIT", "dependencies": { - "has-flag": "^3.0.0" + "nanoid": "^3.3.7", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { - "node": ">=4" + "node": "^10 || ^12 || >=14" } }, + "node_modules/styled-components/node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "license": "MIT" + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "license": "0BSD" + }, "node_modules/styled-system": { "version": "5.1.5", "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz", @@ -26018,6 +26098,7 @@ "version": "5.9.2", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz", "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==", + "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", @@ -27122,6 +27203,7 @@ "version": "8.18.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", + "dev": true, "license": "MIT", "engines": { "node": ">=10.0.0" @@ -27289,7 +27371,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "slick-carousel": "^1.8.1", - "styled-components": "^5.2.1" + "styled-components": "^6.1.19" }, "peerDependencies": { "@emotion/react": ">=11", @@ -27303,6 +27385,26 @@ "styled-components": ">=5" } }, + "packages/components/node_modules/@types/react": { + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.3.tgz", + "integrity": "sha512-k5dJVszUiNr1DSe8Cs+knKR6IrqhqdhpUwzqhkS8ecQTSf3THNtbfIp/umqHMpX2bv+9dkx3fwDv/86LcSfvSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "csstype": "^3.0.2" + } + }, + "packages/components/node_modules/@types/react-dom": { + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.2.0" + } + }, "packages/components/node_modules/polished": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz", @@ -27315,6 +27417,36 @@ "node": ">=10" } }, + "packages/components/node_modules/react": { + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", + "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "packages/components/node_modules/react-dom": { + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", + "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "scheduler": "^0.27.0" + }, + "peerDependencies": { + "react": "^19.2.0" + } + }, + "packages/components/node_modules/scheduler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "dev": true, + "license": "MIT" + }, "packages/configs": { "name": "@t3n/configs", "version": "0.7.4" @@ -27353,6 +27485,16 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "packages/icons/node_modules/react": { + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", + "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "packages/storybook": { "name": "@t3n/storybook", "version": "0.10.2", @@ -27379,7 +27521,7 @@ "react-autosuggest": "^10.1.0", "react-cookie": "^7.2.2", "slick-carousel": "^1.8.1", - "styled-components": "^5.2.1", + "styled-components": "^6.1.19", "styled-system": "^5.1.5", "yup": "^1.7.1" }, @@ -27394,8 +27536,8 @@ "storybook": "^8.5.3" }, "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^18.3.0", + "react-dom": "^18.3.0" } }, "packages/storybook/node_modules/polished": { diff --git a/packages/components/package.json b/packages/components/package.json index 227a8aae5..fb97a92ca 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -45,7 +45,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "slick-carousel": "^1.8.1", - "styled-components": "^5.2.1" + "styled-components": "^6.1.19" }, "peerDependencies": { "@emotion/react": ">=11", diff --git a/packages/components/src/Accordion/Accordion.tsx b/packages/components/src/Accordion/Accordion.tsx index 9bec5a02f..e847b521f 100644 --- a/packages/components/src/Accordion/Accordion.tsx +++ b/packages/components/src/Accordion/Accordion.tsx @@ -35,7 +35,9 @@ const StyledAccordionHeadBox = styled(Box)` } `; -const StyledIconBox = styled(Box)<{ collapsed: boolean }>` +const StyledIconBox = styled(Box).withConfig({ + shouldForwardProp: (prop) => prop !== 'collapsed', +})<{ collapsed: boolean }>` border-radius: 50%; height: 2rem; width: 2rem; diff --git a/packages/components/src/Accordion/__snapshots__/Accordion.test.tsx.snap b/packages/components/src/Accordion/__snapshots__/Accordion.test.tsx.snap index b357fdc75..15c7664e8 100644 --- a/packages/components/src/Accordion/__snapshots__/Accordion.test.tsx.snap +++ b/packages/components/src/Accordion/__snapshots__/Accordion.test.tsx.snap @@ -6,9 +6,6 @@ exports[`Accordion matches snapchot with JSX.Element 1`] = ` } .c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; } @@ -45,22 +42,13 @@ exports[`Accordion matches snapchot with JSX.Element 1`] = ` } .c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; cursor: pointer; } -.c2:focus { +.c2 :focus { outline: none; } @@ -71,33 +59,29 @@ exports[`Accordion matches snapchot with JSX.Element 1`] = ` } .c8 .c4 { - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); transform: rotate(0deg); - -webkit-transition: -webkit-transform 0.2s ease-in; - -webkit-transition: transform 0.2s ease-in; transition: transform 0.2s ease-in; } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c1 { padding: 16px; } } -@media screen and (min-width:48rem) { +@media screen and (min-width: 48rem) { .c1 { padding: 24px; } } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c6 { line-height: 1.5em; } } -@media screen and (min-width:48rem) { +@media screen and (min-width: 48rem) { .c6 { line-height: 1.666em; } @@ -113,12 +97,10 @@ exports[`Accordion matches snapchot with JSX.Element 1`] = ` >
@@ -138,7 +120,6 @@ exports[`Accordion matches snapchot with JSX.Element 1`] = ` @@ -182,22 +163,13 @@ exports[`Accordion matches snapshot 1`] = ` } .c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; cursor: pointer; } -.c2:focus { +.c2 :focus { outline: none; } @@ -208,74 +180,66 @@ exports[`Accordion matches snapshot 1`] = ` } .c5 .c6 { - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); transform: rotate(0deg); - -webkit-transition: -webkit-transform 0.2s ease-in; - -webkit-transition: transform 0.2s ease-in; transition: transform 0.2s ease-in; } .c8 .c6 { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); transform: rotate(180deg); - -webkit-transition: -webkit-transform 0.2s ease-in; - -webkit-transition: transform 0.2s ease-in; transition: transform 0.2s ease-in; } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c1 { padding: 16px; } } -@media screen and (min-width:48rem) { +@media screen and (min-width: 48rem) { .c1 { padding: 24px; } } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { } -@media screen and (min-width:48rem) { +@media screen and (min-width: 48rem) { } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c3 { font-size: 1.125rem; } } -@media screen and (min-width:48rem) { +@media screen and (min-width: 48rem) { .c3 { font-size: 1.25rem; } } -@media screen and (min-width:61.25rem) { +@media screen and (min-width: 61.25rem) { .c3 { font-size: 1.25rem; } } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c3 { line-height: 1.5em; } } -@media screen and (min-width:48rem) { +@media screen and (min-width: 48rem) { .c3 { line-height: 1.333em; } } -@media screen and (min-width:61.25rem) { +@media screen and (min-width: 61.25rem) { .c3 { line-height: 1.333em; } @@ -291,6 +255,7 @@ exports[`Accordion matches snapshot 1`] = ` >

Some Accordion

@@ -300,7 +265,6 @@ exports[`Accordion matches snapshot 1`] = ` diff --git a/packages/components/src/Alert/Alert.tsx b/packages/components/src/Alert/Alert.tsx index 8e848f494..64d2c836a 100644 --- a/packages/components/src/Alert/Alert.tsx +++ b/packages/components/src/Alert/Alert.tsx @@ -14,7 +14,9 @@ export interface AlertProps extends SpaceProps { children?: ReactNode; } -const AlertBox = styled(Box)<{ status: AlertStatus }>` +const AlertBox = styled(Box).withConfig({ + shouldForwardProp: (prop) => prop !== 'status', +})<{ status: AlertStatus }>` border-radius: ${({ theme }: ThemeProps) => theme.border.radii[1]}; ${variant({ diff --git a/packages/components/src/Alert/__snapshots__/Alert.test.tsx.snap b/packages/components/src/Alert/__snapshots__/Alert.test.tsx.snap index 83c72a8c0..342c10ca1 100644 --- a/packages/components/src/Alert/__snapshots__/Alert.test.tsx.snap +++ b/packages/components/src/Alert/__snapshots__/Alert.test.tsx.snap @@ -4,13 +4,7 @@ exports[`Alert Status matches Snapshot 1`] = ` .c0 { padding: 16px; margin: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -51,13 +45,13 @@ exports[`Alert Status matches Snapshot 1`] = ` margin: 8px; } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c2 { line-height: 1.5em; } } -@media screen and (min-width:48rem) { +@media screen and (min-width: 48rem) { .c2 { line-height: 1.666em; } @@ -66,10 +60,10 @@ exports[`Alert Status matches Snapshot 1`] = `

Dies ist eine Erfolgsmeldung @@ -77,10 +71,10 @@ exports[`Alert Status matches Snapshot 1`] = `

Merke dir dies und das! @@ -88,10 +82,10 @@ exports[`Alert Status matches Snapshot 1`] = `

Dies ist eine Warnung! @@ -99,10 +93,10 @@ exports[`Alert Status matches Snapshot 1`] = `

So geht das nicht. Error! diff --git a/packages/components/src/Avatar/Avatar.d.ts b/packages/components/src/Avatar/Avatar.d.ts index 09ad95346..a6f410ce2 100644 --- a/packages/components/src/Avatar/Avatar.d.ts +++ b/packages/components/src/Avatar/Avatar.d.ts @@ -1,5 +1,5 @@ import React, { ReactNode } from 'react'; -import { TextColorProps } from 'styled-system'; +import { ColorProps, FlexboxProps, LayoutProps, TextColorProps } from 'styled-system'; export interface AvatarImageProps { optimizeSrc?: boolean; src?: string; @@ -9,7 +9,7 @@ export interface AvatarImageProps { loading?: boolean; children?: ReactNode; } -export interface AvatarProps extends Omit { +export interface AvatarProps extends Omit, Omit, FlexboxProps, ColorProps { label?: string; textColor?: TextColorProps['color']; } diff --git a/packages/components/src/Avatar/Avatar.tsx b/packages/components/src/Avatar/Avatar.tsx index b7886ad76..9e85c0cea 100644 --- a/packages/components/src/Avatar/Avatar.tsx +++ b/packages/components/src/Avatar/Avatar.tsx @@ -4,7 +4,9 @@ import styled from 'styled-components'; import { border, color, - color as styledColor, + ColorProps, + FlexboxProps, + LayoutProps, space, TextColorProps, } from 'styled-system'; @@ -24,14 +26,21 @@ export interface AvatarImageProps { children?: ReactNode; } -export interface AvatarProps extends Omit { +export interface AvatarProps + extends Omit, + Omit, + FlexboxProps, + ColorProps { label?: string; textColor?: TextColorProps['color']; } -const AvatarPlaceholder = styled((props) => ( - -))` +const AvatarPlaceholder = styled(Placeholder) + .withConfig({ + shouldForwardProp: (prop) => + !['label', 'textColor'].includes(prop as string), + }) + .attrs({ as: 'span' })` ${({ theme }) => border({ theme, @@ -42,7 +51,12 @@ const AvatarPlaceholder = styled((props) => ( })}; `; -const DefaultAvatar = styled((props) => )` +const DefaultAvatar = styled(Box) + .withConfig({ + shouldForwardProp: (prop) => + !['label', 'textColor'].includes(prop as string), + }) + .attrs({ as: 'span' })` ${({ theme }) => border({ theme, @@ -60,7 +74,7 @@ const DefaultAvatar = styled((props) => )` })}; `; -const StyledText = styled((props) => )` +const StyledText = styled((props: any) => )` user-select: none; text-transform: uppercase; `; @@ -137,7 +151,7 @@ const StyledAvatar = styled.span` const AvatarLabel = styled.span>` ${({ theme }) => space({ pl: 2, theme })} - ${({ textColor, theme }) => styledColor({ color: textColor, theme })} + ${({ textColor, theme }) => color({ color: textColor, theme })} `; const Avatar: React.FC = ({ diff --git a/packages/components/src/Avatar/__snapshots__/Avatar.test.tsx.snap b/packages/components/src/Avatar/__snapshots__/Avatar.test.tsx.snap index 84a9bcea1..d70ac3e63 100644 --- a/packages/components/src/Avatar/__snapshots__/Avatar.test.tsx.snap +++ b/packages/components/src/Avatar/__snapshots__/Avatar.test.tsx.snap @@ -2,15 +2,9 @@ exports[`Avatar matches snapshot and renders label 1`] = ` .c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; height: 40px; width: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -36,21 +30,12 @@ exports[`Avatar matches snapshot and renders label 1`] = ` } .c4 { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; text-transform: uppercase; } .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -63,12 +48,12 @@ exports[`Avatar matches snapshot and renders label 1`] = ` >

a

@@ -83,15 +68,9 @@ exports[`Avatar matches snapshot and renders label 1`] = ` exports[`Avatar renders without label 1`] = ` .c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; height: 40px; width: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -117,21 +96,12 @@ exports[`Avatar renders without label 1`] = ` } .c4 { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; text-transform: uppercase; } .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -140,12 +110,12 @@ exports[`Avatar renders without label 1`] = ` >

a

diff --git a/packages/components/src/Badge/__snapshots__/Badge.test.tsx.snap b/packages/components/src/Badge/__snapshots__/Badge.test.tsx.snap index 5eeacf584..ad31efbb3 100644 --- a/packages/components/src/Badge/__snapshots__/Badge.test.tsx.snap +++ b/packages/components/src/Badge/__snapshots__/Badge.test.tsx.snap @@ -16,6 +16,7 @@ exports[`Badge matches snapshot 1`] = ` text diff --git a/packages/components/src/Box/Box.d.ts b/packages/components/src/Box/Box.d.ts index 3a1e4864d..9dd5beb8e 100644 --- a/packages/components/src/Box/Box.d.ts +++ b/packages/components/src/Box/Box.d.ts @@ -1,5 +1,5 @@ import { ColorProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps } from 'styled-system'; export interface BoxProps extends SpaceProps, ColorProps, LayoutProps, FlexboxProps, PositionProps { } -declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>; +declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute, HTMLDivElement>, BoxProps>> & string; export default Box; diff --git a/packages/components/src/Box/Box.ts b/packages/components/src/Box/Box.ts index 7fcf8e76d..b2bc1e7d5 100644 --- a/packages/components/src/Box/Box.ts +++ b/packages/components/src/Box/Box.ts @@ -19,7 +19,81 @@ export interface BoxProps FlexboxProps, PositionProps {} -const Box = styled.div` +// Liste aller styled-system Props, die nicht an DOM weitergegeben werden sollen +const styledSystemProps = [ + // SpaceProps + 'm', + 'margin', + 'mt', + 'marginTop', + 'mr', + 'marginRight', + 'mb', + 'marginBottom', + 'ml', + 'marginLeft', + 'mx', + 'marginX', + 'my', + 'marginY', + 'p', + 'padding', + 'pt', + 'paddingTop', + 'pr', + 'paddingRight', + 'pb', + 'paddingBottom', + 'pl', + 'paddingLeft', + 'px', + 'paddingX', + 'py', + 'paddingY', + // ColorProps + 'color', + 'backgroundColor', + 'bg', + 'opacity', + // LayoutProps + 'width', + 'height', + 'minWidth', + 'maxWidth', + 'minHeight', + 'maxHeight', + 'size', + 'display', + 'verticalAlign', + 'overflow', + 'overflowX', + 'overflowY', + // FlexboxProps + 'alignItems', + 'alignContent', + 'justifyItems', + 'justifyContent', + 'flexWrap', + 'flexDirection', + 'flex', + 'flexGrow', + 'flexShrink', + 'flexBasis', + 'justifySelf', + 'alignSelf', + 'order', + // PositionProps + 'position', + 'zIndex', + 'top', + 'right', + 'bottom', + 'left', +]; + +const Box = styled.div.withConfig({ + shouldForwardProp: (prop) => !styledSystemProps.includes(prop), +})` ${space} ${color} ${layout} diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.d.ts b/packages/components/src/Breadcrumbs/Breadcrumbs.d.ts index ef3c39d6f..5392892c4 100644 --- a/packages/components/src/Breadcrumbs/Breadcrumbs.d.ts +++ b/packages/components/src/Breadcrumbs/Breadcrumbs.d.ts @@ -8,7 +8,7 @@ export interface BreadcrumbsItemProps extends Pick { href: string; }) => JSX.Element; } -export declare const BreadcrumbsItem: import("styled-components").StyledComponent<({ href, label, className, variant, linkComponent: LinkComponent, }: BreadcrumbsItemProps) => React.JSX.Element, any, {}, never>; +export declare const BreadcrumbsItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit> & string & Omit<({ href, label, className, variant, linkComponent: LinkComponent, }: BreadcrumbsItemProps) => React.JSX.Element, keyof React.Component>; declare const Breadcrumbs: React.FC<{ children?: ReactNode; }>; diff --git a/packages/components/src/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap b/packages/components/src/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap index 69ecc54ad..62f34797d 100644 --- a/packages/components/src/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +++ b/packages/components/src/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap @@ -9,7 +9,6 @@ exports[`Breadcrumbs matches snapshot 1`] = ` } .c2 { - -webkit-text-decoration: none; text-decoration: none; pointer-events: auto; opacity: 1; @@ -83,34 +82,29 @@ exports[`Breadcrumbs matches snapshot 1`] = ` padding: 0; padding-bottom: 1rem; list-style-type: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; flex-wrap: wrap; } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c3 { line-height: 1.5em; } } -@media screen and (min-width:48rem) { +@media screen and (min-width: 48rem) { .c3 { line-height: 1.666em; } } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c2 { line-height: 1.5em; } } -@media screen and (min-width:48rem) { +@media screen and (min-width: 48rem) { .c2 { line-height: 1.666em; } @@ -204,22 +198,17 @@ exports[`BreadcrumbsItems render custom link component if provided through props padding: 0; padding-bottom: 1rem; list-style-type: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; flex-wrap: wrap; } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c2 { line-height: 1.5em; } } -@media screen and (min-width:48rem) { +@media screen and (min-width: 48rem) { .c2 { line-height: 1.666em; } diff --git a/packages/components/src/Button/Button.d.ts b/packages/components/src/Button/Button.d.ts index 6581c2d57..9455f65b8 100644 --- a/packages/components/src/Button/Button.d.ts +++ b/packages/components/src/Button/Button.d.ts @@ -15,6 +15,6 @@ export interface ButtonProps extends ButtonHTMLAttributes, Omit>; +export declare const buttonStyles: import("styled-components").RuleSet; declare const Button: React.FC; export default Button; diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx index 69616229a..d3403cd13 100644 --- a/packages/components/src/Button/Button.tsx +++ b/packages/components/src/Button/Button.tsx @@ -81,7 +81,7 @@ const buildColorVariants = ( return buildConfig; }; -export const buttonStyles = css` +export const buttonStyles = css` display: inline-flex; justify-content: center; align-items: center; @@ -172,7 +172,7 @@ export const buttonStyles = css` ${({ loading }) => !loading && - css` + css` &:disabled { opacity: 0.6; @@ -190,7 +190,10 @@ export const buttonStyles = css` const StyledButton = styled( // eslint-disable-next-line react/button-has-type ({ loading, ...rest }: ButtonProps) => @@ -87,51 +75,34 @@ exports[`Button in default state matches snapshot 1`] = ` exports[`Button in loading state matches snapshot 1`] = ` .c1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; text-align: center; margin-top: 8px; margin-bottom: 8px; } -.c1 > div { +.c1 >div { background-color: #f4f4f4; width: 0.5rem; height: 0.5rem; border-radius: 100%; display: inline-block; - -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } -.c1 > div:nth-child(1) { - -webkit-animation-delay: -0.3s; +.c1 >div:nth-child(1) { animation-delay: -0.3s; } -.c1 > div:nth-child(2) { - -webkit-animation-delay: -0.15s; +.c1 >div:nth-child(2) { animation-delay: -0.15s; } .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: all 0.05s ease-in-out; transition: all 0.05s ease-in-out; border: 2px solid; font-weight: 600; @@ -157,31 +128,31 @@ exports[`Button in loading state matches snapshot 1`] = ` border-color: #f9423a; } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.5em; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.666em; } } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:64em) { +@media screen and (min-width: 64em) { .c0 { line-height: 1.25rem; } @@ -191,10 +162,10 @@ exports[`Button in loading state matches snapshot 1`] = ` class="c0" color="default" disabled="" - variant="primary" >
@@ -205,21 +176,10 @@ exports[`Button in loading state matches snapshot 1`] = ` exports[`Primary Button as "default" color variant matches snapshot 1`] = ` .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: all 0.05s ease-in-out; transition: all 0.05s ease-in-out; border: 2px solid; font-weight: 600; @@ -249,31 +209,31 @@ exports[`Primary Button as "default" color variant matches snapshot 1`] = ` opacity: 0.6; } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.5em; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.666em; } } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:64em) { +@media screen and (min-width: 64em) { .c0 { line-height: 1.25rem; } @@ -282,7 +242,6 @@ exports[`Primary Button as "default" color variant matches snapshot 1`] = ` @@ -290,21 +249,10 @@ exports[`Primary Button as "default" color variant matches snapshot 1`] = ` exports[`Primary Button as "highlight" color variant matches snapshot 1`] = ` .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: all 0.05s ease-in-out; transition: all 0.05s ease-in-out; border: 2px solid; font-weight: 600; @@ -335,31 +283,31 @@ exports[`Primary Button as "highlight" color variant matches snapshot 1`] = ` color: #f9423a; } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.5em; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.666em; } } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:64em) { +@media screen and (min-width: 64em) { .c0 { line-height: 1.25rem; } @@ -368,7 +316,6 @@ exports[`Primary Button as "highlight" color variant matches snapshot 1`] = ` @@ -376,21 +323,10 @@ exports[`Primary Button as "highlight" color variant matches snapshot 1`] = ` exports[`Primary Button as "inverse" color variant matches snapshot 1`] = ` .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: all 0.05s ease-in-out; transition: all 0.05s ease-in-out; border: 2px solid; font-weight: 600; @@ -420,31 +356,31 @@ exports[`Primary Button as "inverse" color variant matches snapshot 1`] = ` opacity: 0.6; } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.5em; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.666em; } } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:64em) { +@media screen and (min-width: 64em) { .c0 { line-height: 1.25rem; } @@ -453,7 +389,6 @@ exports[`Primary Button as "inverse" color variant matches snapshot 1`] = ` @@ -461,21 +396,10 @@ exports[`Primary Button as "inverse" color variant matches snapshot 1`] = ` exports[`Secondary Button as "default" color variant matches snapshot 1`] = ` .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: all 0.05s ease-in-out; transition: all 0.05s ease-in-out; border: 2px solid; font-weight: 600; @@ -505,31 +429,31 @@ exports[`Secondary Button as "default" color variant matches snapshot 1`] = ` opacity: 0.6; } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.5em; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.666em; } } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:64em) { +@media screen and (min-width: 64em) { .c0 { line-height: 1.25rem; } @@ -538,7 +462,6 @@ exports[`Secondary Button as "default" color variant matches snapshot 1`] = ` @@ -546,21 +469,10 @@ exports[`Secondary Button as "default" color variant matches snapshot 1`] = ` exports[`Secondary Button as "highlight" color variant matches snapshot 1`] = ` .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: all 0.05s ease-in-out; transition: all 0.05s ease-in-out; border: 2px solid; font-weight: 600; @@ -590,31 +502,31 @@ exports[`Secondary Button as "highlight" color variant matches snapshot 1`] = ` opacity: 0.6; } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.5em; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.666em; } } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:64em) { +@media screen and (min-width: 64em) { .c0 { line-height: 1.25rem; } @@ -623,7 +535,6 @@ exports[`Secondary Button as "highlight" color variant matches snapshot 1`] = ` @@ -631,21 +542,10 @@ exports[`Secondary Button as "highlight" color variant matches snapshot 1`] = ` exports[`Secondary Button as "inverse" color variant matches snapshot 1`] = ` .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: all 0.05s ease-in-out; transition: all 0.05s ease-in-out; border: 2px solid; font-weight: 600; @@ -675,31 +575,31 @@ exports[`Secondary Button as "inverse" color variant matches snapshot 1`] = ` opacity: 0.6; } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.5em; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.666em; } } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:64em) { +@media screen and (min-width: 64em) { .c0 { line-height: 1.25rem; } @@ -708,7 +608,6 @@ exports[`Secondary Button as "inverse" color variant matches snapshot 1`] = ` @@ -716,51 +615,34 @@ exports[`Secondary Button as "inverse" color variant matches snapshot 1`] = ` exports[`Small Button in loading state matches snapshot 1`] = ` .c1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; text-align: center; margin-top: 8px; margin-bottom: 8px; } -.c1 > div { +.c1 >div { background-color: #f4f4f4; width: 0.5rem; height: 0.5rem; border-radius: 100%; display: inline-block; - -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } -.c1 > div:nth-child(1) { - -webkit-animation-delay: -0.3s; +.c1 >div:nth-child(1) { animation-delay: -0.3s; } -.c1 > div:nth-child(2) { - -webkit-animation-delay: -0.15s; +.c1 >div:nth-child(2) { animation-delay: -0.15s; } .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: all 0.05s ease-in-out; transition: all 0.05s ease-in-out; border: 2px solid; font-weight: 600; @@ -786,31 +668,31 @@ exports[`Small Button in loading state matches snapshot 1`] = ` border-color: #f9423a; } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.5em; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.666em; } } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:64em) { +@media screen and (min-width: 64em) { .c0 { line-height: 1.25rem; } @@ -820,10 +702,10 @@ exports[`Small Button in loading state matches snapshot 1`] = ` class="c0" color="default" disabled="" - variant="primary" >
@@ -834,21 +716,10 @@ exports[`Small Button in loading state matches snapshot 1`] = ` exports[`Small Button matches snapshot 1`] = ` .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: all 0.05s ease-in-out; transition: all 0.05s ease-in-out; border: 2px solid; font-weight: 600; @@ -878,31 +749,31 @@ exports[`Small Button matches snapshot 1`] = ` opacity: 0.6; } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.5em; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.666em; } } -@media screen and (min-width:40em) { +@media screen and (min-width: 40em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:52em) { +@media screen and (min-width: 52em) { .c0 { line-height: 1.25rem; } } -@media screen and (min-width:64em) { +@media screen and (min-width: 64em) { .c0 { line-height: 1.25rem; } @@ -911,7 +782,6 @@ exports[`Small Button matches snapshot 1`] = ` diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx index cd59bab67..140183a4d 100644 --- a/packages/components/src/Card/Card.tsx +++ b/packages/components/src/Card/Card.tsx @@ -95,11 +95,21 @@ const cardStyles = css` } `; -const StyledCard = styled.div` +const StyledCard = styled.div.withConfig({ + shouldForwardProp: (prop) => + !['rounded', 'big', 'dashed', 'elevate', 'splitted', 'stretch'].includes( + prop, + ), +})` ${cardStyles} `; -const StyledLinkCard = styled.a` +const StyledLinkCard = styled.a.withConfig({ + shouldForwardProp: (prop) => + !['rounded', 'big', 'dashed', 'elevate', 'splitted', 'stretch'].includes( + prop, + ), +})` ${cardStyles} &:hover { diff --git a/packages/components/src/Card/__snapshots__/Card.test.tsx.snap b/packages/components/src/Card/__snapshots__/Card.test.tsx.snap index ea5bea85d..40ae4f468 100644 --- a/packages/components/src/Card/__snapshots__/Card.test.tsx.snap +++ b/packages/components/src/Card/__snapshots__/Card.test.tsx.snap @@ -4,31 +4,15 @@ exports[`Big Card matches snapshot 1`] = ` .c0 { display: block; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: auto; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; - -webkit-box-pack: stretch; - -webkit-justify-content: stretch; - -ms-flex-pack: stretch; justify-content: stretch; - -webkit-text-decoration: none; text-decoration: none; overflow: hidden; - -webkit-transition: box-shadow 0.15s ease-out, -webkit-transform 0.15s ease-out; - -webkit-transition: box-shadow 0.15s ease-out, transform 0.15s ease-out; - transition: box-shadow 0.15s ease-out, transform 0.15s ease-out; + transition: box-shadow 0.15s ease-out,transform 0.15s ease-out; position: relative; border: 1px solid #e8e8e8; border-radius: 4px; @@ -38,23 +22,24 @@ exports[`Big Card matches snapshot 1`] = ` margin-bottom: 16px; } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c0 { padding: 48px; } } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { }
Big card @@ -65,31 +50,15 @@ exports[`Dashed Card matches snapshot 1`] = ` .c0 { display: block; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: auto; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; - -webkit-box-pack: stretch; - -webkit-justify-content: stretch; - -ms-flex-pack: stretch; justify-content: stretch; - -webkit-text-decoration: none; text-decoration: none; overflow: hidden; - -webkit-transition: box-shadow 0.15s ease-out, -webkit-transform 0.15s ease-out; - -webkit-transition: box-shadow 0.15s ease-out, transform 0.15s ease-out; - transition: box-shadow 0.15s ease-out, transform 0.15s ease-out; + transition: box-shadow 0.15s ease-out,transform 0.15s ease-out; position: relative; border: 2px dashed #e8e8e8; border-radius: 4px; @@ -99,19 +68,20 @@ exports[`Dashed Card matches snapshot 1`] = ` margin-bottom: 16px; } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c0 { padding: 24px; } } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { }
Dashed card @@ -122,31 +92,15 @@ exports[`Default Card matches snapshot 1`] = ` .c0 { display: block; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: auto; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; - -webkit-box-pack: stretch; - -webkit-justify-content: stretch; - -ms-flex-pack: stretch; justify-content: stretch; - -webkit-text-decoration: none; text-decoration: none; overflow: hidden; - -webkit-transition: box-shadow 0.15s ease-out, -webkit-transform 0.15s ease-out; - -webkit-transition: box-shadow 0.15s ease-out, transform 0.15s ease-out; - transition: box-shadow 0.15s ease-out, transform 0.15s ease-out; + transition: box-shadow 0.15s ease-out,transform 0.15s ease-out; position: relative; border: 1px solid #e8e8e8; border-radius: 4px; @@ -156,19 +110,20 @@ exports[`Default Card matches snapshot 1`] = ` margin-bottom: 16px; } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { .c0 { padding: 24px; } } -@media screen and (min-width:30rem) { +@media screen and (min-width: 30rem) { }
Default Card diff --git a/packages/components/src/CardHeader/CardHeader.d.ts b/packages/components/src/CardHeader/CardHeader.d.ts index 8c960b954..b66bbeade 100644 --- a/packages/components/src/CardHeader/CardHeader.d.ts +++ b/packages/components/src/CardHeader/CardHeader.d.ts @@ -9,6 +9,6 @@ export interface CardHeaderProps extends ThemeProps { image?: string; children?: ReactNode; } -export declare const CardHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>; -declare const CardHeader: import("styled-components").StyledComponent<({ big, ratio, image, children, ...props }: CardHeaderProps) => React.JSX.Element, any, CardHeaderProps, never>; +export declare const CardHeaderContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit, HTMLDivElement>, never>> & string; +declare const CardHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute> & string & Omit<({ big, ratio, image, children, ...props }: CardHeaderProps) => React.JSX.Element, keyof React.Component>; export default CardHeader; diff --git a/packages/components/src/Center/Center.d.ts b/packages/components/src/Center/Center.d.ts index dc4270df9..5841cbcb1 100644 --- a/packages/components/src/Center/Center.d.ts +++ b/packages/components/src/Center/Center.d.ts @@ -1,3 +1,3 @@ import { LayoutProps } from 'styled-system'; -declare const Center: import("styled-components").StyledComponent<"div", any, LayoutProps>>, never>; +declare const Center: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute, HTMLDivElement>, LayoutProps>>>> & string; export default Center; diff --git a/packages/components/src/Checkbox/Checkbox.tsx b/packages/components/src/Checkbox/Checkbox.tsx index fa6f0a2ea..e596abbfa 100644 --- a/packages/components/src/Checkbox/Checkbox.tsx +++ b/packages/components/src/Checkbox/Checkbox.tsx @@ -32,7 +32,10 @@ const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })` opacity: 0; `; -const StyledCheckbox = styled(Box)>` +const StyledCheckbox = styled(Box).withConfig({ + shouldForwardProp: (prop) => + !['checked', 'disabled', 'feedbackColor'].includes(prop), +})>` display: inline-block; position: relative; width: 1rem; @@ -100,9 +103,10 @@ const StyledCheckbox = styled(Box)>` } `; -const StyledIcon = styled.span< - Omit & ThemeProps ->` +const StyledIcon = styled.span.withConfig({ + shouldForwardProp: (prop) => + !['checked', 'disabled', 'feedbackColor'].includes(prop), +}) & ThemeProps>` position: absolute; top: -1px; left: -1px; diff --git a/packages/components/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/components/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap index 5814f1721..ca9759558 100644 --- a/packages/components/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/packages/components/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -16,7 +16,6 @@ exports[`Checkbox has feedback styles 1`] = ` width: 1rem; height: 1rem; border-radius: 2px; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; margin-right: 8px; @@ -36,7 +35,6 @@ exports[`Checkbox has feedback styles 1`] = ` width: 1rem; height: 1rem; border-radius: 2px; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; margin-right: 8px; @@ -56,7 +54,6 @@ exports[`Checkbox has feedback styles 1`] = ` width: 1rem; height: 1rem; border-radius: 2px; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; margin-right: 8px; @@ -76,7 +73,6 @@ exports[`Checkbox has feedback styles 1`] = ` width: 1rem; height: 1rem; border-radius: 2px; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; margin-right: 8px; @@ -96,7 +92,6 @@ exports[`Checkbox has feedback styles 1`] = ` width: 1rem; height: 1rem; border-radius: 2px; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; margin-right: 8px; @@ -116,7 +111,6 @@ exports[`Checkbox has feedback styles 1`] = ` width: 1rem; height: 1rem; border-radius: 2px; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; margin-right: 8px; @@ -136,7 +130,6 @@ exports[`Checkbox has feedback styles 1`] = ` width: 1rem; height: 1rem; border-radius: 2px; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; margin-right: 8px; @@ -156,7 +149,6 @@ exports[`Checkbox has feedback styles 1`] = ` width: 1rem; height: 1rem; border-radius: 2px; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; margin-right: 8px; @@ -175,11 +167,8 @@ exports[`Checkbox has feedback styles 1`] = ` top: -1px; left: -1px; line-height: 0; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; - -webkit-transform: scale(1); - -ms-transform: scale(1); transform: scale(1); opacity: 1; } @@ -193,11 +182,8 @@ exports[`Checkbox has feedback styles 1`] = ` top: -1px; left: -1px; line-height: 0; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; - -webkit-transform: scale(1); - -ms-transform: scale(1); transform: scale(1); opacity: 1; } @@ -211,11 +197,8 @@ exports[`Checkbox has feedback styles 1`] = ` top: -1px; left: -1px; line-height: 0; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; - -webkit-transform: scale(1); - -ms-transform: scale(1); transform: scale(1); opacity: 1; } @@ -229,11 +212,8 @@ exports[`Checkbox has feedback styles 1`] = ` top: -1px; left: -1px; line-height: 0; - -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; pointer-events: none; - -webkit-transform: scale(1); - -ms-transform: scale(1); transform: scale(1); opacity: 1; } @@ -243,37 +223,25 @@ exports[`Checkbox has feedback styles 1`] = ` } .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; cursor: pointer; color: black; } -.c0:focus > div { +.c0:focus>div { border: 2px solid; border-color: #2a2a2a; } .c10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; cursor: pointer; color: white; } -.c10:focus > div { +.c10:focus>div { border: 2px solid; border-color: #fff; } @@ -281,10 +249,12 @@ exports[`Checkbox has feedback styles 1`] = `