From e644420abd4dc67ad1ea929ce1b4b205bcc47891 Mon Sep 17 00:00:00 2001 From: Eric Winchell Date: Wed, 29 Jan 2025 17:21:32 -0500 Subject: [PATCH] Emotion conversion: Take #2 --- .eslintrc.json | 1 + package-lock.json | 244 ++++++++-- package.json | 2 + packages/module/package.json | 1 + packages/module/src/Ansible/Ansible.tsx | 57 ++- .../__snapshots__/Ansible.test.tsx.snap | 8 +- .../module/src/CloseButton/CloseButton.tsx | 41 +- .../src/ContentHeader/ContentHeader.tsx | 15 +- packages/module/src/ErrorState/ErrorState.tsx | 54 ++- .../__snapshots__/MissingPage.test.tsx.snap | 142 +++--- .../src/MultiContentCard/MultiContentCard.tsx | 22 +- .../MultiContentCard.test.tsx.snap | 6 +- .../module/src/NotFoundIcon/NotFoundIcon.tsx | 415 +++++++++--------- packages/module/src/PageHeader/PageHeader.tsx | 16 +- .../module/src/ServiceCard/ServiceCard.tsx | 85 ++-- .../__snapshots__/ServiceCard.test.tsx.snap | 4 +- .../module/src/ShortcutGrid/ShortcutGrid.tsx | 43 +- .../__snapshots__/ShortcutGrid.test.tsx.snap | 12 +- packages/module/src/Status/Status.tsx | 34 +- .../Status/__snapshots__/Status.test.tsx.snap | 40 +- packages/module/src/TagCount/TagCount.tsx | 41 +- .../__snapshots__/TagCount.test.tsx.snap | 24 +- packages/module/tsconfig.json | 3 +- 23 files changed, 736 insertions(+), 574 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index d96089ba..3c3c9f82 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -90,6 +90,7 @@ "one-var": ["error", "never"], "prefer-const": "error", "radix": ["error", "as-needed"], + "react/no-unknown-property": ["error", { "ignore": ["css"] }], "react/prop-types": 0, "react/display-name": 0, "react-hooks/exhaustive-deps": "warn", diff --git a/package-lock.json b/package-lock.json index 981a9180..be03705f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "packages/*" ], "dependencies": { + "@emotion/cache": "^11.14.0", "@patternfly/react-tokens": "^6.0.0", "sharp": "^0.33.5" }, @@ -22,6 +23,7 @@ "@babel/preset-flow": "^7.25.9", "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.26.0", + "@emotion/babel-plugin": "^11.13.5", "@octokit/rest": "^21.1.0", "@swc/core": "1.7.42", "@testing-library/dom": "^10.3.2", @@ -86,7 +88,6 @@ }, "node_modules/@babel/code-frame": { "version": "7.26.2", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-validator-identifier": "^7.25.9", @@ -143,7 +144,6 @@ "version": "7.26.5", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.5.tgz", "integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==", - "dev": true, "license": "MIT", "dependencies": { "@babel/parser": "^7.26.5", @@ -261,7 +261,6 @@ }, "node_modules/@babel/helper-module-imports": { "version": "7.25.9", - "dev": true, "license": "MIT", "dependencies": { "@babel/traverse": "^7.25.9", @@ -365,7 +364,6 @@ }, "node_modules/@babel/helper-string-parser": { "version": "7.25.9", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -373,7 +371,6 @@ }, "node_modules/@babel/helper-validator-identifier": { "version": "7.25.9", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -416,7 +413,6 @@ "version": "7.26.7", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz", "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.26.7" @@ -1774,7 +1770,6 @@ }, "node_modules/@babel/template": { "version": "7.25.9", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.25.9", @@ -1789,7 +1784,6 @@ "version": "7.26.7", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.7.tgz", "integrity": "sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.26.2", @@ -1808,7 +1802,6 @@ "version": "7.26.7", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz", "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.25.9", @@ -1933,6 +1926,77 @@ "tslib": "^2.4.0" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.13.5", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz", + "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==", + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/serialize": "^1.3.3", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/cache": { + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz", + "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.2", + "@emotion/weak-memoize": "^0.4.0", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/cache/node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, + "node_modules/@emotion/hash": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==", + "license": "MIT" + }, "node_modules/@emotion/is-prop-valid": { "version": "0.7.3", "license": "MIT", @@ -1944,6 +2008,82 @@ "version": "0.7.1", "license": "MIT" }, + "node_modules/@emotion/react": { + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz", + "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.13.5", + "@emotion/cache": "^11.14.0", + "@emotion/serialize": "^1.3.3", + "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0", + "@emotion/utils": "^1.4.2", + "@emotion/weak-memoize": "^0.4.0", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz", + "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==", + "license": "MIT", + "dependencies": { + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/unitless": "^0.10.0", + "@emotion/utils": "^1.4.2", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/serialize/node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, + "node_modules/@emotion/sheet": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", + "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==", + "license": "MIT" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz", + "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz", + "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==", + "license": "MIT" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==", + "license": "MIT" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "dev": true, @@ -3208,7 +3348,6 @@ }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.5", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.2.1", @@ -3221,7 +3360,6 @@ }, "node_modules/@jridgewell/resolve-uri": { "version": "3.1.2", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -3229,7 +3367,6 @@ }, "node_modules/@jridgewell/set-array": { "version": "1.2.1", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -3246,12 +3383,10 @@ }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.0", - "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -4767,6 +4902,12 @@ "@types/node": "*" } }, + "node_modules/@types/parse-json": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", + "license": "MIT" + }, "node_modules/@types/prop-types": { "version": "15.7.14", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", @@ -6374,6 +6515,37 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/babel-plugin-macros/node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "license": "MIT", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/babel-plugin-polyfill-corejs2": { "version": "0.4.11", "dev": true, @@ -7050,7 +7222,6 @@ }, "node_modules/callsites": { "version": "3.1.0", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -8216,7 +8387,6 @@ }, "node_modules/convert-source-map": { "version": "1.9.0", - "dev": true, "license": "MIT" }, "node_modules/cookie": { @@ -9345,7 +9515,6 @@ }, "node_modules/debug": { "version": "4.3.4", - "dev": true, "license": "MIT", "dependencies": { "ms": "2.1.2" @@ -9361,7 +9530,6 @@ }, "node_modules/debug/node_modules/ms": { "version": "2.1.2", - "dev": true, "license": "MIT" }, "node_modules/decimal.js": { @@ -9879,7 +10047,6 @@ }, "node_modules/error-ex": { "version": "1.3.2", - "dev": true, "license": "MIT", "dependencies": { "is-arrayish": "^0.2.1" @@ -11487,6 +11654,12 @@ "node": ">=0.10.0" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", + "license": "MIT" + }, "node_modules/find-up": { "version": "4.1.0", "dev": true, @@ -11785,7 +11958,6 @@ }, "node_modules/function-bind": { "version": "1.1.2", - "dev": true, "license": "MIT", "funding": { "url": "https://github.com/sponsors/ljharb" @@ -12136,7 +12308,6 @@ }, "node_modules/globals": { "version": "11.12.0", - "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -12375,7 +12546,6 @@ }, "node_modules/hasown": { "version": "2.0.2", - "dev": true, "license": "MIT", "dependencies": { "function-bind": "^1.1.2" @@ -12771,7 +12941,6 @@ }, "node_modules/import-fresh": { "version": "3.3.0", - "dev": true, "license": "MIT", "dependencies": { "parent-module": "^1.0.0", @@ -12786,7 +12955,6 @@ }, "node_modules/import-fresh/node_modules/resolve-from": { "version": "4.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -13033,7 +13201,6 @@ }, "node_modules/is-arrayish": { "version": "0.2.1", - "dev": true, "license": "MIT" }, "node_modules/is-async-function": { @@ -13151,7 +13318,6 @@ }, "node_modules/is-core-module": { "version": "2.14.0", - "dev": true, "license": "MIT", "dependencies": { "hasown": "^2.0.2" @@ -15767,7 +15933,6 @@ }, "node_modules/jsesc": { "version": "3.0.2", - "dev": true, "license": "MIT", "bin": { "jsesc": "bin/jsesc" @@ -15788,7 +15953,6 @@ }, "node_modules/json-parse-even-better-errors": { "version": "2.3.1", - "dev": true, "license": "MIT" }, "node_modules/json-schema": { @@ -16102,7 +16266,6 @@ }, "node_modules/lines-and-columns": { "version": "1.2.4", - "dev": true, "license": "MIT" }, "node_modules/listr2": { @@ -17948,7 +18111,6 @@ }, "node_modules/parent-module": { "version": "1.0.1", - "dev": true, "license": "MIT", "dependencies": { "callsites": "^3.0.0" @@ -17990,7 +18152,6 @@ }, "node_modules/parse-json": { "version": "5.2.0", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.0.0", @@ -18077,7 +18238,6 @@ }, "node_modules/path-parse": { "version": "1.0.7", - "dev": true, "license": "MIT" }, "node_modules/path-scurry": { @@ -18118,7 +18278,6 @@ }, "node_modules/path-type": { "version": "4.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -18147,7 +18306,6 @@ }, "node_modules/picocolors": { "version": "1.1.1", - "dev": true, "license": "ISC" }, "node_modules/picomatch": { @@ -19661,7 +19819,6 @@ }, "node_modules/resolve": { "version": "1.22.2", - "dev": true, "license": "MIT", "dependencies": { "is-core-module": "^2.11.0", @@ -21388,6 +21545,12 @@ "inline-style-parser": "0.1.1" } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", + "license": "MIT" + }, "node_modules/supports-color": { "version": "5.5.0", "dev": true, @@ -21401,7 +21564,6 @@ }, "node_modules/supports-preserve-symlinks-flag": { "version": "1.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -24490,6 +24652,15 @@ "dev": true, "license": "ISC" }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/yargs": { "version": "17.7.2", "dev": true, @@ -24577,6 +24748,7 @@ "version": "5.0.0-prerelease.0", "license": "MIT", "dependencies": { + "@emotion/react": "^11.14.0", "@patternfly/react-core": "^6.0.0", "@patternfly/react-icons": "^6.0.0", "@patternfly/react-table": "^6.0.0", diff --git a/package.json b/package.json index 8c591060..1296fd6c 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@babel/preset-flow": "^7.25.9", "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.26.0", + "@emotion/babel-plugin": "^11.13.5", "@octokit/rest": "^21.1.0", "@swc/core": "1.7.42", "@testing-library/dom": "^10.3.2", @@ -83,6 +84,7 @@ "whatwg-fetch": "^3.6.20" }, "dependencies": { + "@emotion/cache": "^11.14.0", "@patternfly/react-tokens": "^6.0.0", "sharp": "^0.33.5" } diff --git a/packages/module/package.json b/packages/module/package.json index ae1d08dc..398329cc 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -34,6 +34,7 @@ "@patternfly/react-core": "^6.0.0", "@patternfly/react-icons": "^6.0.0", "@patternfly/react-table": "^6.0.0", + "@emotion/react": "^11.14.0", "react-jss": "^10.10.0", "clsx": "^2.1.1" }, diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx index b0f29b0d..1623a64e 100644 --- a/packages/module/src/Ansible/Ansible.tsx +++ b/packages/module/src/Ansible/Ansible.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import clsx from 'clsx'; -import { createUseStyles } from 'react-jss'; +import { css } from '@emotion/react'; export interface AnsibleProps extends React.DetailedHTMLProps, HTMLElement> { /** Supported/unsupported variant flag */ @@ -28,37 +27,35 @@ const RHAAPTechnologyIcon = - +; -const useStyles = createUseStyles({ - ansible: { - '& svg': { - height: 'var(--pf-t--global--font--size--xl)', - position: 'relative', - top: '0.25rem' +const styles = { + ansible: css` + & svg { + height: var(--pf-t--global--font--size--xl); + position: relative; + top: 0.25rem; } - }, - ansibleSupported: { - '& .st0': { - fill: 'var(--pf-t-global--icon--color--regular)', + `, + ansibleSupported: css` + & .st0 { + fill: var(--pf-t-global--icon--color--regular); } - }, - ansibleUnsupported: { - '& .st0, .st1, .st2': { - fill: 'var(--pf-t--global--icon--color--disabled)', - cursor: 'not-allowed', + `, + ansibleUnsupported: css` + & .st0, & .st1, & .st2 { + fill: var(--pf-t--global--icon--color--disabled); + cursor: not-allowed; } - } -}) + ` +}; const Ansible: React.FunctionComponent = ({ isSupported = true, isRHAAP, className, ouiaId = "Ansible-icon", ...props }: AnsibleProps) => { - const classes = useStyles(); - const ansibleLogoClass = clsx( - classes.ansible, - { [classes.ansibleSupported]: isSupported }, - { [classes.ansibleUnsupported]: !isSupported }, - className - ); + const ansibleLogoClass = css` + ${styles.ansible}; + ${isSupported ? styles.ansibleSupported : styles.ansibleUnsupported}; + ${className || ''}; + `; const unsupportedSlash = ( @@ -98,13 +95,13 @@ const Ansible: React.FunctionComponent = ({ isSupported = true, is {RHAAPTechnologyIcon} ) : ( - + = ({ isSupported = true, is {isSupported ? null : unsupportedSlash} - ) } + )} ); }; diff --git a/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap b/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap index fd9cfeb0..45e72b2f 100644 --- a/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap +++ b/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap @@ -47,12 +47,12 @@ exports[`Ansible component should render RHAAP 1`] = ` exports[`Ansible component should render supported 1`] = `
= ({ - className, dataTestID, onClick, ouiaId="CloseButton", ...props -}: CloseButtonProps) => { - const classes = useStyles(); - return ( - } - aria-label={props['aria-label'] || 'Close'} - className={clsx(classes.closeButton, className)} - data-test-id={dataTestID} - onClick={onClick} - variant={ButtonVariant.plain} - ouiaId={ouiaId} - {...props} - /> - ); -}; +}: CloseButtonProps) => ( + } + aria-label={props['aria-label'] || 'Close'} + css={styles.closeButton} + data-test-id={dataTestID} + onClick={onClick} + variant={ButtonVariant.plain} + ouiaId={ouiaId} + {...props} + /> +); export default CloseButton; diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx index 47c03fdf..51d48db0 100644 --- a/packages/module/src/ContentHeader/ContentHeader.tsx +++ b/packages/module/src/ContentHeader/ContentHeader.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { css } from '@emotion/react'; import { Flex, FlexItem, @@ -12,7 +13,6 @@ import { Divider, } from '@patternfly/react-core'; import { ExternalLinkAltIcon } from '@patternfly/react-icons'; -import { createUseStyles } from 'react-jss'; /** extends ButtonProps */ export interface PageHeaderLinkProps extends ButtonProps { @@ -41,11 +41,11 @@ export interface ContentHeaderProps { ouiaId?: string | number; } -const useStyles = createUseStyles({ - iconMinWidth: { - minWidth: '48px', - } -}); +const styles = { + iconMinWidth: css` + min-height: 48px; + ` +}; export const ContentHeader: React.FunctionComponent> = ({ title, @@ -57,7 +57,6 @@ export const ContentHeader: React.FunctionComponent { - const classes = useStyles(); const { isExternal = false, ...linkRestProps } = linkProps ?? {}; return ( @@ -70,7 +69,7 @@ export const ContentHeader: React.FunctionComponent {icon && ( <> - + {icon} { @@ -44,24 +44,22 @@ const ErrorState: React.FunctionComponent = ({ status = EmptyStateStatus.danger, variant = EmptyStateVariant.lg, ...props -}: ErrorStateProps) => { - const classes = useStyles(); - return ( - - - - {bodyText ? {bodyText} : defaultBodyText} - - - - { customFooter || +}: ErrorStateProps) => ( + + + + {bodyText ? {bodyText} : defaultBodyText} + + + + { customFooter || (document.referrer ? ( ))} - - - ); -} + + +) export default ErrorState; + diff --git a/packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap b/packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap index 27842522..ed84618a 100644 --- a/packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap +++ b/packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap @@ -43,8 +43,7 @@ exports[`MissingPage component should render 1`] = ` id="mask-2" > @@ -55,7 +54,7 @@ exports[`MissingPage component should render 1`] = ` 404path-not-found @@ -348,7 +346,7 @@ exports[`MissingPage component should render 1`] = ` 404path-not-found !!card && !React.isValidElement(card); -const useStyles = createUseStyles({ - cardTitle: { - fontSize: 'var(--pf-t--global--font--size--heading--h3)', - } -}); +const styles = { + cardTitle: css` + font-size: var(--pf-t--global--font--size--heading--h3); + ` +}; const MultiContentCard: React.FunctionComponent = ({ cards = [], @@ -70,7 +70,7 @@ const MultiContentCard: React.FunctionComponent = ({ ...props }: MultiContentCardProps) => { const [ isExpanded, setIsExpanded ] = React.useState(defaultExpanded); - const classes = useStyles(); + const onExpand = () => { setIsExpanded(!isExpanded); }; @@ -88,7 +88,7 @@ const MultiContentCard: React.FunctionComponent = ({ {isCardWithProps(card) ? card.content : card} - {(index + 1 < cards.length && (withDividers || isCardWithProps(card) && card.dividerVariant === MultiContentCardDividerVariant.right)) && ( + {(index + 1 < cards.length && (withDividers || (isCardWithProps(card) && card.dividerVariant === MultiContentCardDividerVariant.right))) && ( = ({ }} actions={{ actions }} > - {toggleText ? {toggleText} : toggleContent} + {toggleText ? {toggleText} : toggleContent} )} {isExpandable ? {renderCards(cards, withDividers)} : renderCards(cards, withDividers)} - );} - + ); +}; export default MultiContentCard; diff --git a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap index 8b507fa4..fa941fff 100644 --- a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap +++ b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap @@ -445,7 +445,7 @@ exports[`MultiContentCard component should render expandable multi-content card class="pf-v6-c-card__title" >

Expandable card toggle text @@ -514,7 +514,7 @@ exports[`MultiContentCard component should render expandable multi-content card class="pf-v6-c-card__title" >

Expandable card toggle text @@ -992,7 +992,7 @@ exports[`MultiContentCard component should render expandable multi-content card class="pf-v6-c-card__title" >

Expandable card toggle text diff --git a/packages/module/src/NotFoundIcon/NotFoundIcon.tsx b/packages/module/src/NotFoundIcon/NotFoundIcon.tsx index 158c6b60..13c5213d 100644 --- a/packages/module/src/NotFoundIcon/NotFoundIcon.tsx +++ b/packages/module/src/NotFoundIcon/NotFoundIcon.tsx @@ -1,221 +1,230 @@ import React from 'react'; -import { createUseStyles } from 'react-jss'; - -const useStyles = createUseStyles({ - fillPolygon: { fill: '#fff', fillRule: 'evenodd' }, - fillPaths: { fillRule: 'evenodd' }, - iconOpacity: { opacity: 0.5 }, - masking: { mask: 'url(#mask)' } -}); +import { css } from '@emotion/react'; +const styles = { + fillPolygon: css` + fill: #fff; + fill-rule: evenodd; + `, + fillPaths: css` + fill-rule: evenodd; + `, + iconOpacity: css` + opacity: 0.5; + `, + masking: css` + mask: url(#mask); + ` +}; -export const NotFoundIcon: React.FunctionComponent = (props) => { - const classes = useStyles(); - return ( - - - - - - - +export const NotFoundIcon: React.FunctionComponent = (props) => ( + + + + + + - - - 404path-not-found - - - - - - - - - - - - - - - - - - - - - - - - + + + 404path-not-found + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + - - - - - - - - - - - - - - ) -}; - -export default NotFoundIcon; \ No newline at end of file + + +); +export default NotFoundIcon; diff --git a/packages/module/src/PageHeader/PageHeader.tsx b/packages/module/src/PageHeader/PageHeader.tsx index ada64a25..b0ee71e5 100644 --- a/packages/module/src/PageHeader/PageHeader.tsx +++ b/packages/module/src/PageHeader/PageHeader.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { css } from '@emotion/react'; import { Flex, FlexItem, @@ -12,7 +13,6 @@ import { Divider, } from '@patternfly/react-core'; import { ExternalLinkAltIcon } from '@patternfly/react-icons'; -import { createUseStyles } from 'react-jss'; /** extends ButtonProps */ export interface PageHeaderLinkProps extends ButtonProps { @@ -43,11 +43,12 @@ export interface PageHeaderProps extends React.PropsWithChildren { children?: React.ReactNode; } -const useStyles = createUseStyles({ - iconMinWidth: { - minWidth: '48px', - } -}); +const styles = { + iconMinWidth: css` + min-width: 48px; + ` +}; + export const PageHeader: React.FunctionComponent = ({ title, @@ -60,7 +61,6 @@ export const PageHeader: React.FunctionComponent = ({ ouiaId = 'PageHeader', children = null }: PageHeaderProps) => { - const classes = useStyles(); const { isExternal = false, ...linkRestProps } = linkProps ?? {}; return ( @@ -73,7 +73,7 @@ export const PageHeader: React.FunctionComponent = ({ {icon && ( <> - + {icon} = ({ title, @@ -48,38 +47,34 @@ const ServiceCard: React.FunctionComponent = ({ isStacked = false, isFullHeight = false, ...props -}: ServiceCardProps) => { - const classes = useStyles(); - - return ( - - - - - {icon} - - - - {title} - {subtitle ?? null} - - - - - {description} - { footer || helperText ? ( - - { helperText ? - ( - - {helperText} - - ) : null - } - { footer } - ) : null} - - ) -} +}: ServiceCardProps) => ( + + + + + {icon} + + + + {title} + {subtitle ?? null} + + + + + {description} + { footer || helperText ? ( + + { helperText ? + ( + + {helperText} + + ) : null + } + { footer } + ) : null} + +); export default ServiceCard; \ No newline at end of file diff --git a/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap b/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap index 17f54bd7..72b1c2bb 100644 --- a/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap +++ b/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap @@ -22,7 +22,7 @@ exports[`ServiceCard component should render ServiceCard component 1`] = ` class="pf-v6-l-flex pf-m-row pf-m-align-items-center" >
/
@@ -78,7 +78,7 @@ exports[`ServiceCard component should render ServiceCard component 1`] = ` class="pf-v6-l-flex pf-m-row pf-m-align-items-center" >
/
diff --git a/packages/module/src/ShortcutGrid/ShortcutGrid.tsx b/packages/module/src/ShortcutGrid/ShortcutGrid.tsx index 1688a6c4..8df1fa1f 100644 --- a/packages/module/src/ShortcutGrid/ShortcutGrid.tsx +++ b/packages/module/src/ShortcutGrid/ShortcutGrid.tsx @@ -1,5 +1,5 @@ +import { css } from '@emotion/react'; import * as React from 'react'; -import { createUseStyles } from 'react-jss'; import Shortcut, { ShortcutProps } from '../Shortcut/Shortcut'; import { Grid, GridItem, GridItemProps, GridProps } from '@patternfly/react-core'; @@ -13,28 +13,25 @@ export interface ShortcutGridProps extends GridProps { ouiaId?: string | number; } -const useStyles = createUseStyles({ - shortcutGridItem: { - textAlign: 'right', - marginRight: 'var(--pf-t--global--spacer--md)' - } -}) +const styles = { + shortcutGridItem: css` + test-align: right; + margin-right: var(--pf-t--global--spacer--md); + ` +}; -const ShortcutGrid: React.FunctionComponent = ({ shortcuts, gridItemProps, ouiaId = 'ShortcutGrid', ...props }: ShortcutGridProps) => { - const classes = useStyles(); - return ( - - {shortcuts.map((shortcut, index) => { - const { description, ...props } = shortcut; - return( - - - - - {description} - - )})} - ) -} +const ShortcutGrid: React.FunctionComponent = ({ shortcuts, gridItemProps, ouiaId = 'ShortcutGrid', ...props }: ShortcutGridProps) => ( + + {shortcuts.map((shortcut, index) => { + const { description, ...props } = shortcut; + return( + + + + + {description} + + )})} + ) export default ShortcutGrid; \ No newline at end of file diff --git a/packages/module/src/ShortcutGrid/__snapshots__/ShortcutGrid.test.tsx.snap b/packages/module/src/ShortcutGrid/__snapshots__/ShortcutGrid.test.tsx.snap index 1e9a2ceb..026216b9 100644 --- a/packages/module/src/ShortcutGrid/__snapshots__/ShortcutGrid.test.tsx.snap +++ b/packages/module/src/ShortcutGrid/__snapshots__/ShortcutGrid.test.tsx.snap @@ -10,7 +10,7 @@ exports[`ShortcutGrid component should render correctly 1`] = ` data-ouia-component-id="ShortcutGrid" >
) => void; } -const useStyles = createUseStyles({ - icon: { - margin: "0", - alignSelf: "flex-start", - }, - statusLabel: { - lineHeight: 'var(--pf-t--global--font--line-height--body)', - }, - statusDescription: { - color: 'var(--pf-t--color--gray--50)', - } -}) +const styles = { + icon: css` + margin: 0; + align-self: flex-start; + `, + statusLabel: css` + line-height: var(--pf-t--global--spacer--md); + `, + statusDescription: css` + color: var(--pf-t--color--gray--50); + ` +}; export const Status: React.FC = ({ variant = StatusVariant.plain, label, children, iconOnly, icon, status, iconTitle, ouiaId = 'Status', popoverProps, onClick, description, ...props }: StatusProps) => { - const classes = useStyles(); if (iconOnly && !iconTitle) { // eslint-disable-next-line no-console @@ -67,7 +66,7 @@ export const Status: React.FC = ({ variant = StatusVariant.plain, l const statusBody = ( {icon && ( - + {icon} @@ -75,8 +74,9 @@ export const Status: React.FC = ({ variant = StatusVariant.plain, l )} {!iconOnly && ( - {label} - {description && {description}} + {label} + {description && {description}} )} diff --git a/packages/module/src/Status/__snapshots__/Status.test.tsx.snap b/packages/module/src/Status/__snapshots__/Status.test.tsx.snap index 0b8c8e06..a97097c7 100644 --- a/packages/module/src/Status/__snapshots__/Status.test.tsx.snap +++ b/packages/module/src/Status/__snapshots__/Status.test.tsx.snap @@ -10,7 +10,7 @@ exports[`Status component should render correctly 1`] = ` title="Warning" >
({ - color: `var(--pf-t--global--icon--color--${isDisabled ? '200' : '100'})`, - }), - - tagText: { - marginLeft: 'var(--pf-t--global--spacer--sm)', - fontSize: 'var(--pf-t--global--font--size--sm)' - } -}); +const styles = { + buttonTagCount: css` + display: flex; + align-items: center; + padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md); + `, + tagIcon: (isDisabled: boolean) => css` + color: var(--pf-t--global--icon--color--${isDisabled ? '200' : '100'}); + `, + tagText: css` + margin-left: var(--pf-t--global--spacer--sm); + font-size: var(--pf-t--global--font--size--sm); + `, +}; /** extends ButtonProps */ export interface TagCountProps extends ButtonProps { @@ -36,20 +34,19 @@ export interface TagCountProps extends ButtonProps { const TagCount: React.FunctionComponent = ({ count, className, - iconSize= 'md', + iconSize = 'md', ouiaId = 'TagCount', ...props }: TagCountProps) => { - const classes = useStyles(!count); - const tagClasses = clsx(classes.buttonTagCount, className); + const tagClasses = clsx(styles.buttonTagCount, className); return (