Merge branch 'migrate-to-fontawesome-v6' into 'dev'

Migrate to FontAwesome v6

See merge request turris/reforis/foris-js!229

CHANGELOG.md

@@ -8,6 +8,29 @@ and this project adheres to
 
 ## [Unreleased]
 
+## [6.0.3] - 2024-07-26
+
+### Changed
+
+-   Updated WiFiQRCode component
+
+## [6.0.2] - 2024-06-28
+
+### Added
+
+-   Added className prop to CheckBox and Radio components
+
+## [6.0.1] - 2024-06-26
+
+### Added
+
+-   Added className prop to Switch component
+
+### Changed
+
+-   Updated dependencies in package.json
+-   NPM audit fix
+
 ## [6.0.0] - 2024-06-11
 
 ### Added
@@ -314,7 +337,10 @@ and this project adheres to
 ## [0.0.7] - 2019-09-02
 
 [unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.0...master
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.3...master
+[6.0.3]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.2...v6.0.3
+[6.0.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.1...v6.0.2
+[6.0.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.0...v6.0.1
 [6.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.6.1...v6.0.0
 [5.6.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.6.0...v5.6.1
 [5.6.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.5.0...v5.6.0

package-lock.json

@@ -1,14 +1,18 @@
 {
     "name": "foris",
-    "version": "6.0.0",
+    "version": "6.0.3",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "foris",
-            "version": "6.0.0",
+            "version": "6.0.3",
             "license": "GPL-3.0",
             "dependencies": {
+                "@fortawesome/fontawesome-svg-core": "^6.6.0",
+                "@fortawesome/free-regular-svg-icons": "^6.6.0",
+                "@fortawesome/free-solid-svg-icons": "^6.6.0",
+                "@fortawesome/react-fontawesome": "^0.2.2",
                 "axios": "^1.7.2",
                 "immutability-helper": "^3.1.1",
                 "moment": "^2.30.1",
@@ -22,7 +26,6 @@
                 "@babel/plugin-transform-runtime": "^7.24.7",
                 "@babel/preset-env": "^7.24.7",
                 "@babel/preset-react": "^7.24.7",
-                "@fortawesome/fontawesome-free": "^6.5.2",
                 "@testing-library/react": "^8.0.9",
                 "babel-loader": "^8.1.0",
                 "babel-polyfill": "^6.26.0",
@@ -35,7 +38,7 @@
                 "jest-environment-jsdom": "^29.7.0",
                 "jest-mock-axios": "^4.7.3",
                 "moment-timezone": "^0.5.45",
-                "prettier": "^3.3.1",
+                "prettier": "^3.3.2",
                 "prop-types": "15.8.1",
                 "react": "16.9.0",
                 "react-dom": "16.9.0",
@@ -43,7 +46,7 @@
                 "react-styleguidist": "^12.0.1",
                 "snapshot-diff": "^0.10.0",
                 "style-loader": "^1.2.1",
-                "webpack": "^5.91.0"
+                "webpack": "^5.92.1"
             },
             "peerDependencies": {
                 "bootstrap": "^5.3.3",
@@ -2085,16 +2088,59 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
-        "node_modules/@fortawesome/fontawesome-free": {
+        "node_modules/@fortawesome/fontawesome-common-types": {
-            "version": "6.5.2",
+            "version": "6.6.0",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
-            "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
+            "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
-            "dev": true,
-            "hasInstallScript": true,
             "engines": {
                 "node": ">=6"
             }
         },
+        "node_modules/@fortawesome/fontawesome-svg-core": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+            "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-regular-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-solid-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/react-fontawesome": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+            "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+            "dependencies": {
+                "prop-types": "^15.8.1"
+            },
+            "peerDependencies": {
+                "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+                "react": ">=16.3"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.14",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -4314,6 +4360,16 @@
                 "acorn-walk": "^8.0.2"
             }
         },
+        "node_modules/acorn-import-attributes": {
+            "version": "1.9.5",
+            "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+            "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "acorn": "^8"
+            }
+        },
         "node_modules/acorn-jsx": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -15071,10 +15127,11 @@
             }
         },
         "node_modules/prettier": {
-            "version": "3.3.1",
+            "version": "3.3.2",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.1.tgz",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
-            "integrity": "sha512-7CAwy5dRsxs8PHXT3twixW9/OEll8MLE0VRPCJyl7CkS6VHGPSlsVaWTiASPTyGyYRyApxlaWTzwUxVNrhcwDg==",
+            "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
             "dev": true,
+            "license": "MIT",
             "bin": {
                 "prettier": "bin/prettier.cjs"
             },
@@ -18145,10 +18202,11 @@
             }
         },
         "node_modules/webpack": {
-            "version": "5.91.0",
+            "version": "5.92.1",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.1.tgz",
-            "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+            "integrity": "sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "@types/eslint-scope": "^3.7.3",
                 "@types/estree": "^1.0.5",
@@ -18156,10 +18214,10 @@
                 "@webassemblyjs/wasm-edit": "^1.12.1",
                 "@webassemblyjs/wasm-parser": "^1.12.1",
                 "acorn": "^8.7.1",
-                "acorn-import-assertions": "^1.9.0",
+                "acorn-import-attributes": "^1.9.5",
                 "browserslist": "^4.21.10",
                 "chrome-trace-event": "^1.0.2",
-                "enhanced-resolve": "^5.16.0",
+                "enhanced-resolve": "^5.17.0",
                 "es-module-lexer": "^1.2.1",
                 "eslint-scope": "5.1.1",
                 "events": "^3.2.0",
@@ -18404,15 +18462,6 @@
                 "lodash": "^4.17.15"
             }
         },
-        "node_modules/webpack/node_modules/acorn-import-assertions": {
-            "version": "1.9.0",
-            "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-            "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-            "dev": true,
-            "peerDependencies": {
-                "acorn": "^8"
-            }
-        },
         "node_modules/webpack/node_modules/schema-utils": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -18694,10 +18743,11 @@
             }
         },
         "node_modules/ws": {
-            "version": "8.17.0",
+            "version": "8.17.1",
-            "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-            "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+            "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=10.0.0"
             },
@@ -20212,11 +20262,42 @@
             "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
             "dev": true
         },
-        "@fortawesome/fontawesome-free": {
+        "@fortawesome/fontawesome-common-types": {
-            "version": "6.5.2",
+            "version": "6.6.0",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
-            "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
+            "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw=="
-            "dev": true
+        },
+        "@fortawesome/fontawesome-svg-core": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+            "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            }
+        },
+        "@fortawesome/free-regular-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            }
+        },
+        "@fortawesome/free-solid-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            }
+        },
+        "@fortawesome/react-fontawesome": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+            "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+            "requires": {
+                "prop-types": "^15.8.1"
+            }
         },
         "@humanwhocodes/config-array": {
             "version": "0.11.14",
@@ -22083,6 +22164,13 @@
                 "acorn-walk": "^8.0.2"
             }
         },
+        "acorn-import-attributes": {
+            "version": "1.9.5",
+            "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+            "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+            "dev": true,
+            "requires": {}
+        },
         "acorn-jsx": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -30150,9 +30238,9 @@
             "dev": true
         },
         "prettier": {
-            "version": "3.3.1",
+            "version": "3.3.2",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.1.tgz",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
-            "integrity": "sha512-7CAwy5dRsxs8PHXT3twixW9/OEll8MLE0VRPCJyl7CkS6VHGPSlsVaWTiASPTyGyYRyApxlaWTzwUxVNrhcwDg==",
+            "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
             "dev": true
         },
         "prettier-linter-helpers": {
@@ -32451,9 +32539,9 @@
             "dev": true
         },
         "webpack": {
-            "version": "5.91.0",
+            "version": "5.92.1",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.1.tgz",
-            "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+            "integrity": "sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==",
             "dev": true,
             "requires": {
                 "@types/eslint-scope": "^3.7.3",
@@ -32462,10 +32550,10 @@
                 "@webassemblyjs/wasm-edit": "^1.12.1",
                 "@webassemblyjs/wasm-parser": "^1.12.1",
                 "acorn": "^8.7.1",
-                "acorn-import-assertions": "^1.9.0",
+                "acorn-import-attributes": "^1.9.5",
                 "browserslist": "^4.21.10",
                 "chrome-trace-event": "^1.0.2",
-                "enhanced-resolve": "^5.16.0",
+                "enhanced-resolve": "^5.17.0",
                 "es-module-lexer": "^1.2.1",
                 "eslint-scope": "5.1.1",
                 "events": "^3.2.0",
@@ -32482,13 +32570,6 @@
                 "webpack-sources": "^3.2.3"
             },
             "dependencies": {
-                "acorn-import-assertions": {
-                    "version": "1.9.0",
-                    "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-                    "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-                    "dev": true,
-                    "requires": {}
-                },
                 "schema-utils": {
                     "version": "3.3.0",
                     "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -32853,9 +32934,9 @@
             }
         },
         "ws": {
-            "version": "8.17.0",
+            "version": "8.17.1",
-            "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-            "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+            "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
             "dev": true,
             "requires": {}
         },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.0.0",
+    "version": "6.0.3",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -14,6 +14,10 @@
     "license": "GPL-3.0",
     "main": "./src/index.js",
     "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "axios": "^1.7.2",
         "immutability-helper": "^3.1.1",
         "moment": "^2.30.1",
@@ -34,7 +38,6 @@
         "@babel/plugin-transform-runtime": "^7.24.7",
         "@babel/preset-env": "^7.24.7",
         "@babel/preset-react": "^7.24.7",
-        "@fortawesome/fontawesome-free": "^6.5.2",
         "@testing-library/react": "^8.0.9",
         "babel-loader": "^8.1.0",
         "babel-polyfill": "^6.26.0",
@@ -47,7 +50,7 @@
         "jest-environment-jsdom": "^29.7.0",
         "jest-mock-axios": "^4.7.3",
         "moment-timezone": "^0.5.45",
-        "prettier": "^3.3.1",
+        "prettier": "^3.3.2",
         "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
@@ -55,7 +58,7 @@
         "react-styleguidist": "^12.0.1",
         "snapshot-diff": "^0.10.0",
         "style-loader": "^1.2.1",
-        "webpack": "^5.91.0"
+        "webpack": "^5.92.1"
     },
     "scripts": {
         "lint": "eslint src",

src/bootstrap/CheckBox.js

@@ -17,17 +17,19 @@ CheckBox.propTypes = {
     helpText: PropTypes.string,
     /** Control if checkbox is clickable */
     disabled: PropTypes.bool,
+    /** Additional class name */
+    className: PropTypes.string,
 };
 
 CheckBox.defaultProps = {
     disabled: false,
 };
 
-function CheckBox({ label, helpText, disabled, ...props }) {
+function CheckBox({ label, helpText, disabled, className, ...props }) {
     const uid = useUID();
 
     return (
-        <div className="mb-3 form-check">
+        <div className={`${className || "mb-3"} form-check`.trim()}>
             <input
                 className="form-check-input"
                 type="checkbox"

src/bootstrap/NumberInput.js

@@ -7,6 +7,8 @@
 
 import React from "react";
 
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 
 import Input from "./Input";
@@ -60,7 +62,7 @@ function NumberInput({ onChange, inlineText, value, ...props }) {
                 onMouseUp={() => enableIncrease(false)}
                 aria-label="Increase"
             >
-                <i className="fas fa-plus" />
+                <FontAwesomeIcon icon={faPlus} />
             </button>
             <button
                 type="button"
@@ -69,7 +71,7 @@ function NumberInput({ onChange, inlineText, value, ...props }) {
                 onMouseUp={() => enableDecrease(false)}
                 aria-label="Decrease"
             >
-                <i className="fas fa-minus" />
+                <FontAwesomeIcon icon={faMinus} />
             </button>
         </Input>
     );

src/bootstrap/PasswordInput.js

@@ -7,6 +7,8 @@
 
 import React, { useState } from "react";
 
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 
 import Input from "./Input";
@@ -44,8 +46,10 @@ function PasswordInput({ withEye, newPass, ...props }) {
                         setHidden((shouldBeHidden) => !shouldBeHidden);
                     }}
                 >
-                    <i
+                    <FontAwesomeIcon
-                        className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`}
+                        icon={isHidden ? faEye : faEyeSlash}
+                        style={{ width: "1.25rem" }}
+                        className="text-dark"
                     />
                 </button>
             )}

src/bootstrap/RadioSet.js

@@ -83,12 +83,13 @@ Radio.propTypes = {
     id: PropTypes.string.isRequired,
     inline: PropTypes.bool,
     helpText: PropTypes.string,
+    className: PropTypes.string,
 };
 
-export function Radio({ label, id, helpText, inline, ...props }) {
+export function Radio({ label, id, helpText, inline, className, ...props }) {
     return (
         <div
-            className={`mb-2 ${inline ? "form-check form-check-inline" : ""}`.trim()}
+            className={`${className || "mb-3"} ${inline ? "form-check form-check-inline" : ""}`.trim()}
         >
             <input
                 id={id}

src/bootstrap/Switch.js

@@ -19,15 +19,16 @@ Switch.propTypes = {
     ]).isRequired,
     helpText: PropTypes.string,
     switchHeading: PropTypes.bool,
+    className: PropTypes.string,
 };
 
-function Switch({ label, helpText, switchHeading, ...props }) {
+function Switch({ label, helpText, switchHeading, className, ...props }) {
     const uid = useUID();
 
     return (
         <div
-            className={`form-check form-switch mb-3 ${
+            className={`form-check form-switch ${className || "mb-3"} ${
-                switchHeading ? "d-flex align-items-center" : null
+                switchHeading ? "d-flex align-items-center" : ""
             }`.trim()}
         >
             <input

src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap

@@ -25,7 +25,7 @@ exports[`<NumberInput/> Render number input 1`] = `
       type="button"
     >
       <i
-        class="fas fa-plus"
+        class="fa"
       />
     </button>
     <button
@@ -34,7 +34,7 @@ exports[`<NumberInput/> Render number input 1`] = `
       type="button"
     >
       <i
-        class="fas fa-minus"
+        class="fa"
       />
     </button>
   </div>

src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap

@@ -11,7 +11,7 @@ exports[`<RadioSet/> Render radio set 1`] = `
     Radios set label
   </label>
   <div
-    class="mb-2"
+    class="mb-3"
   >
     <input
       checked=""
@@ -29,7 +29,7 @@ exports[`<RadioSet/> Render radio set 1`] = `
     </label>
   </div>
   <div
-    class="mb-2"
+    class="mb-3"
   >
     <input
       class="form-check-input me-2"
@@ -46,7 +46,7 @@ exports[`<RadioSet/> Render radio set 1`] = `
     </label>
   </div>
   <div
-    class="mb-2"
+    class="mb-3"
   >
     <input
       class="form-check-input me-2"

src/bootstrap/__tests__/__snapshots__/Switch.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<Switch/> Render switch 1`] = `
 <div
-  class="form-check form-switch mb-3 null"
+  class="form-check form-switch mb-3"
 >
   <input
     checked=""
@@ -29,7 +29,7 @@ exports[`<Switch/> Render switch 1`] = `
 
 exports[`<Switch/> Render uncheked switch 1`] = `
 <div
-  class="form-check form-switch mb-3 null"
+  class="form-check form-switch mb-3"
 >
   <input
     class="form-check-input"

src/common/WiFiSettings/WiFiQRCode.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -7,6 +7,7 @@
 
 import React, { useState } from "react";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 import QRCode from "qrcode.react";
 
@@ -18,15 +19,12 @@ import {
     ModalFooter,
     ModalHeader,
 } from "../../bootstrap/Modal";
-import { ForisURLs } from "../../utils/forisUrls";
 
 WiFiQRCode.propTypes = {
     SSID: PropTypes.string.isRequired,
     password: PropTypes.string.isRequired,
 };
 
-const QR_ICON_PATH = `${ForisURLs.static}/imgs/QR_icon.svg`;
-
 export default function WiFiQRCode({ SSID, password }) {
     const [modal, setModal] = useState(false);
 
@@ -40,11 +38,11 @@ export default function WiFiQRCode({ SSID, password }) {
                     setModal(true);
                 }}
             >
-                <img
+                <FontAwesomeIcon
-                    width="20"
+                    icon="fa-solid fa-qrcode"
-                    src={QR_ICON_PATH}
+                    title={_("Show QR code")}
-                    alt="QR"
+                    aria-label={_("Show QR code")}
-                    style={{ opacity: 0.67 }}
+                    className="text-dark"
                 />
             </button>
             {modal ? (
@@ -88,7 +86,10 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
                         createAndDownloadPdf(SSID, password);
                     }}
                 >
-                    <i className="fas fa-file-download me-2" />
+                    <FontAwesomeIcon
+                        icon="fa-solid fa-file-download"
+                        className="me-2"
+                    />
                     {_("Download PDF")}
                 </Button>
             </ModalFooter>

src/common/WiFiSettings/__tests__/__snapshots__/WiFiSettings.test.js.snap

@@ -5,7 +5,7 @@ exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
 - First value
 + Second value
 
-@@ -243,207 +243,95 @@
+@@ -240,207 +240,95 @@
               value="0"
             >
               auto
@@ -339,7 +339,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 - First value
 + Second value
 
-@@ -527,10 +527,94 @@
+@@ -524,10 +524,91 @@
             <small>
               Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to access the internet, but aren't allowed to access other devices and the configuration interface of the router. Parameters of the guest network can be set in the Guest network tab.
             </small>
@@ -370,11 +370,8 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +               class="input-group-text"
 +               type="button"
 +             >
-+               <img
++               <i
-+                 alt="QR"
++                 class="fa"
-+                 src="/reforis/static/reforis/imgs/QR_icon.svg"
-+                 style="opacity: 0.67;"
-+                 width="20"
 +               />
 +             </button>
 +           </div>
@@ -412,7 +409,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +             type="button"
 +           >
 +             <i
-+               class="fa fa-eye"
++               class="fa"
 +             />
 +           </button>
 +         </div>
@@ -434,7 +431,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
           class="form-check form-switch mb-3 d-flex align-items-center"
         >
           <input
-@@ -553,10 +637,11 @@
+@@ -550,10 +631,11 @@
         <div
           class="text-end"
         >
@@ -453,7 +450,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 - First value
 + Second value
 
-@@ -21,10 +21,516 @@
+@@ -21,10 +21,513 @@
             >
               Wi-Fi 1
             </h2>
@@ -482,11 +479,8 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             class="input-group-text"
 +             type="button"
 +           >
-+             <img
++             <i
-+               alt="QR"
++               class="fa"
-+               src="/reforis/static/reforis/imgs/QR_icon.svg"
-+               style="opacity: 0.67;"
-+               width="20"
 +             />
 +           </button>
 +         </div>
@@ -523,7 +517,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             type="button"
 +           >
 +             <i
-+               class="fa fa-eye"
++               class="fa"
 +             />
 +           </button>
 +         </div>
@@ -536,7 +530,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +         </div>
 +       </div>
 +       <div
-+         class="form-check form-switch mb-3 null"
++         class="form-check form-switch mb-3"
 +       >
 +         <input
 +           class="form-check-input"
@@ -568,7 +562,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +           GHz
 +         </label>
 +         <div
-+           class="mb-2 form-check form-check-inline"
++           class="mb-3 form-check form-check-inline"
 +         >
 +           <input
 +             class="form-check-input me-2"
@@ -585,7 +579,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +           </label>
 +         </div>
 +         <div
-+           class="mb-2 form-check form-check-inline"
++           class="mb-3 form-check form-check-inline"
 +         >
 +           <input
 +             checked=""
@@ -920,7 +914,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +         </div>
 +       </div>
 +       <div
-+         class="form-check form-switch mb-3 null"
++         class="form-check form-switch mb-3"
 +       >
 +         <input
 +           class="form-check-input"
@@ -943,7 +937,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +         </div>
 +       </div>
 +       <div
-+         class="form-check form-switch mb-3 null"
++         class="form-check form-switch mb-3"
 +       >
 +         <input
 +           class="form-check-input"

src/testUtils/setup.js

@@ -1,10 +1,10 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
-
+import React from "react";
 import mockAxios from "jest-mock-axios";
 import moment from "moment-timezone";
 import "./mockGlobals";
@@ -26,3 +26,8 @@ jest.doMock("moment", () => {
     return moment;
 });
 Date.now = jest.fn(() => new Date(Date.UTC(2019, 1, 1, 12, 13, 14)).valueOf());
+
+// Mock Font Awesome v6 library
+jest.mock("@fortawesome/react-fontawesome", () => ({
+    FontAwesomeIcon: () => <i className="fa" />,
+}));