✨ Add button with FontAwesomeIcon support

code/frontend/package-lock.json

@@ -8,6 +8,11 @@
             "name": "nest-frontend",
             "version": "0.1.0",
             "dependencies": {
+                "@fortawesome/fontawesome-svg-core": "^1.2.35",
+                "@fortawesome/free-brands-svg-icons": "^5.15.3",
+                "@fortawesome/free-regular-svg-icons": "^5.15.3",
+                "@fortawesome/free-solid-svg-icons": "^5.15.3",
+                "@fortawesome/react-fontawesome": "^0.1.14",
                 "@testing-library/jest-dom": "^5.11.10",
                 "@testing-library/react": "^11.2.6",
                 "@testing-library/user-event": "^12.8.3",
@@ -1495,6 +1500,75 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@fortawesome/fontawesome-common-types": {
+            "version": "0.2.35",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+            "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==",
+            "hasInstallScript": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/fontawesome-svg-core": {
+            "version": "1.2.35",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+            "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "^0.2.35"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-brands-svg-icons": {
+            "version": "5.15.3",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
+            "integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "^0.2.35"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-regular-svg-icons": {
+            "version": "5.15.3",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz",
+            "integrity": "sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "^0.2.35"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-solid-svg-icons": {
+            "version": "5.15.3",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+            "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "^0.2.35"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/react-fontawesome": {
+            "version": "0.1.14",
+            "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+            "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+            "dependencies": {
+                "prop-types": "^15.7.2"
+            },
+            "peerDependencies": {
+                "@fortawesome/fontawesome-svg-core": "^1.2.32",
+                "react": ">=16.x"
+            }
+        },
         "node_modules/@hapi/address": {
             "version": "2.1.4",
             "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -22585,6 +22659,51 @@
                 }
             }
         },
+        "@fortawesome/fontawesome-common-types": {
+            "version": "0.2.35",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+            "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+        },
+        "@fortawesome/fontawesome-svg-core": {
+            "version": "1.2.35",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+            "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "^0.2.35"
+            }
+        },
+        "@fortawesome/free-brands-svg-icons": {
+            "version": "5.15.3",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
+            "integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "^0.2.35"
+            }
+        },
+        "@fortawesome/free-regular-svg-icons": {
+            "version": "5.15.3",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz",
+            "integrity": "sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "^0.2.35"
+            }
+        },
+        "@fortawesome/free-solid-svg-icons": {
+            "version": "5.15.3",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+            "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "^0.2.35"
+            }
+        },
+        "@fortawesome/react-fontawesome": {
+            "version": "0.1.14",
+            "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+            "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+            "requires": {
+                "prop-types": "^15.7.2"
+            }
+        },
         "@hapi/address": {
             "version": "2.1.4",
             "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",

code/frontend/package.json

@@ -3,6 +3,11 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.35",
+        "@fortawesome/free-brands-svg-icons": "^5.15.3",
+        "@fortawesome/free-regular-svg-icons": "^5.15.3",
+        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@fortawesome/react-fontawesome": "^0.1.14",
         "@testing-library/jest-dom": "^5.11.10",
         "@testing-library/react": "^11.2.6",
         "@testing-library/user-event": "^12.8.3",

code/frontend/src/App.js

@@ -2,6 +2,8 @@ import {useState} from "react"
 import classNames from "classnames"
 import Style from "./App.module.css"
 import BoxWithHeader from "./components/BoxWithHeader"
+import Button from "./components/Button"
+import { faArchive, faArrowRight, faExclamationTriangle, faTrash } from "@fortawesome/free-solid-svg-icons"
 
 
 export default function App() {
@@ -10,29 +12,20 @@ export default function App() {
     return (
         <div className={classNames(Style.App, theme)}>
             <BoxWithHeader
-                header={"Ciao mondo!"}
+                header={"Sto provando i bottoni!"}
             >
                 <div>
                     <div>
-                        Il CSS è pura magia.
+                        Ammirate:
                     </div>
                     <div>
-                        Change my mind.
+                        <Button color={"Green"} icon={faArrowRight}>Verde</Button>
+                        <Button color={"Grey"} icon={faArchive}>Grigio</Button>
+                        <Button color={"Yellow"} icon={faExclamationTriangle}>Giallo</Button>
+                        <Button color={"Red"} icon={faTrash}>Rosso</Button>
                     </div>
                 </div>
             </BoxWithHeader>
-            <BoxWithHeader
-                header={"Questa è un'altra Box."}
-                body={
-                    <div>
-                        E altro testo.
-                    </div>
-                }
-            />
-            <BoxWithHeader
-                header={"Ecco, così va meglio."}
-                body={"No."}
-            />
         </div>
     )
 }

code/frontend/src/components/Button.js

@@ -0,0 +1,28 @@
+import React, { isValidElement } from "react"
+import Style from "./Button.module.css"
+import classNames from "classnames"
+import isString from "is-string"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+
+
+export default function Button({ children, className, color, icon, ...props }) {
+    let iconElement;
+
+    if(isValidElement(icon)) {
+        iconElement = <span className={Style.Icon}>icon</span>;
+    }
+    else if(icon) {
+        iconElement = (
+            <span className={Style.Icon}><FontAwesomeIcon icon={icon}/></span>
+        )
+    }
+    else {
+        iconElement = null;
+    }
+
+    return (
+        <button className={classNames(Style.Button, Style[`Button${color}`], className)} {...props}>
+            {children} {iconElement}
+        </button>
+    )
+}

code/frontend/src/components/Button.module.css

@@ -0,0 +1,44 @@
+.Button {
+    font-family: var(--font-regular);
+
+    border-width: 0;
+    border-radius: 25px;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+
+    padding: 10px;
+    margin: 0 2px;
+
+    cursor: pointer;
+}
+
+.ButtonGreen {
+    color: var(--fg-green);
+    background-color: var(--bg-green);
+    border-color: var(--bg-green);
+}
+
+.ButtonGrey {
+    color: var(--fg-grey);
+    background-color: var(--bg-grey);
+    border-color: var(--bg-grey);
+}
+
+.ButtonYellow {
+    color: var(--fg-yellow);
+    background-color: var(--bg-yellow);
+    border-color: var(--bg-yellow);
+}
+
+.ButtonRed {
+    color: var(--fg-red);
+    background-color: var(--bg-red);
+    border-color: var(--bg-red);
+}
+
+.Icon {
+    font-size: large;
+
+    /* TODO: non so quanto sia una buona idea, ma funziona accettabilmente */
+    line-height: 0;
+    vertical-align: sub;
+}