unimore/pds-2021-g2-nest
unimore/pds-2021-g2-nest
1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-22 04:54:18 +00:00
Code Activity

✨ Add button with FontAwesomeIcon support

Browse source
This commit is contained in:
Stefano Pigozzi 2021-04-21 03:32:19 +02:00
parent c4ca5365cc
commit f18f0baa93
Signed by untrusted user who does not match committer: steffo
GPG key ID: 6965406171929D01
5 changed files with 204 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
code/frontend/package-lock.json generated
View file

@ -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",

5
code/frontend/package.json
View file

@ -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",

23
code/frontend/src/App.js
View file

@ -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>
)
}

28
code/frontend/src/components/Button.js Normal file
View file

@ -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>
)
}

44
code/frontend/src/components/Button.module.css Normal file
View file

@ -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;
}