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

Migrate to FontAwesome v6

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

CHANGELOG.md

@@ -8,15 +8,27 @@ 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
 
--   Add className prop to Switch component
+-   Added className prop to Switch component
 
 ### Changed
 
--   Update dependencies in package.json
+-   Updated dependencies in package.json
 -   NPM audit fix
 
 ## [6.0.0] - 2024-06-11
@@ -325,7 +337,9 @@ and this project adheres to
 ## [0.0.7] - 2019-09-02
 
 [unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.1...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

package-lock.json

@@ -1,14 +1,18 @@
 {
     "name": "foris",
-    "version": "6.0.1",
+    "version": "6.0.3",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "foris",
-            "version": "6.0.1",
+            "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",
@@ -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",
@@ -20216,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",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.0.1",
+    "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",

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/__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/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>
@@ -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=""

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" />,
+}));