From 92a15e089a7bf21594dcec43f01bdf4bf32057e8 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Wed, 21 Apr 2021 03:57:18 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20Input=20and=20InputWithIcon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/App.js                      | 10 ++++-
 code/frontend/src/components/Button.js        | 20 ++-------
 code/frontend/src/components/Input.js         | 12 ++++++
 code/frontend/src/components/Input.module.css | 18 ++++++++
 code/frontend/src/components/InputWithIcon.js | 37 +++++++++++++++++
 .../src/components/InputWithIcon.module.css   | 41 +++++++++++++++++++
 code/frontend/src/utils/make_icon.js          | 17 ++++++++
 7 files changed, 137 insertions(+), 18 deletions(-)
 create mode 100644 code/frontend/src/components/Input.js
 create mode 100644 code/frontend/src/components/Input.module.css
 create mode 100644 code/frontend/src/components/InputWithIcon.js
 create mode 100644 code/frontend/src/components/InputWithIcon.module.css
 create mode 100644 code/frontend/src/utils/make_icon.js

diff --git a/code/frontend/src/App.js b/code/frontend/src/App.js
index 71211af..f1ff643 100644
--- a/code/frontend/src/App.js
+++ b/code/frontend/src/App.js
@@ -3,7 +3,9 @@ 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"
+import { faArchive, faArrowRight, faExclamationTriangle, faSearch, faTrash } from "@fortawesome/free-solid-svg-icons"
+import Input from "./components/Input"
+import InputWithIcon from "./components/InputWithIcon"
 
 
 export default function App() {
@@ -24,6 +26,12 @@ export default function App() {
                         <Button color={"Yellow"} icon={faExclamationTriangle}>Giallo</Button>
                         <Button color={"Red"} icon={faTrash}>Rosso</Button>
                     </div>
+                    <div>
+                        E già che ci siamo, un Input, con e senza icona:
+                    </div>
+                    <div>
+                        <Input/> <InputWithIcon icon={faSearch}/>
+                    </div>
                 </div>
             </BoxWithHeader>
         </div>
diff --git a/code/frontend/src/components/Button.js b/code/frontend/src/components/Button.js
index 3769daf..496306b 100644
--- a/code/frontend/src/components/Button.js
+++ b/code/frontend/src/components/Button.js
@@ -1,28 +1,14 @@
-import React, { isValidElement } from "react"
+import React  from "react"
 import Style from "./Button.module.css"
 import classNames from "classnames"
-import isString from "is-string"
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import make_icon from "../utils/make_icon"
 
 
 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}
+            {children} {make_icon(icon, Style.Icon)}
         </button>
     )
 }
diff --git a/code/frontend/src/components/Input.js b/code/frontend/src/components/Input.js
new file mode 100644
index 0000000..a394a82
--- /dev/null
+++ b/code/frontend/src/components/Input.js
@@ -0,0 +1,12 @@
+import React from "react"
+import Style from "./Input.module.css"
+import classNames from "classnames"
+
+
+export default function Input({ children, className, ...props }) {
+    return (
+        <input className={classNames(Style.Input, className)} {...props}>
+            {children}
+        </input>
+    )
+}
diff --git a/code/frontend/src/components/Input.module.css b/code/frontend/src/components/Input.module.css
new file mode 100644
index 0000000..a11be8d
--- /dev/null
+++ b/code/frontend/src/components/Input.module.css
@@ -0,0 +1,18 @@
+.Input {
+    border-radius: 25px;
+    border-width: 0;
+
+    min-height: 28px;
+    padding: 2px 10px;
+    margin: 2px;
+
+    color: var(--fg-field-off);
+    background-color: var(--bg-field-off);
+}
+
+.Input:focus {
+    outline: 0; /* TODO: Questo è sconsigliato dalle linee guida sull'accessibilità! */
+
+    color: var(--fg-field-on);
+    background-color: var(--bg-field-on);
+}
\ No newline at end of file
diff --git a/code/frontend/src/components/InputWithIcon.js b/code/frontend/src/components/InputWithIcon.js
new file mode 100644
index 0000000..130c81c
--- /dev/null
+++ b/code/frontend/src/components/InputWithIcon.js
@@ -0,0 +1,37 @@
+import React, {useState} from "react"
+import Style from "./InputWithIcon.module.css"
+import classNames from "classnames"
+import make_icon from "../utils/make_icon"
+
+
+export default function InputWithIcon({ icon, className, style, onFocus, onBlur, ...props }) {
+    const [isFocused, setFocused] = useState(false);
+
+    return (
+        <div className={classNames(Style.InputWithIcon, isFocused ? Style.Focused : null, className)} style={style}>
+            <div className={classNames(Style.IconPart)}>
+                {make_icon(icon)}
+            </div>
+            <input
+                className={classNames(Style.InputPart)}
+                onFocus={
+                    event => {
+                        setFocused(true)
+                        if(onFocus) {
+                            onFocus(event)
+                        }
+                    }
+                }
+                onBlur={
+                    event => {
+                        setFocused(false)
+                        if(onBlur) {
+                            onBlur(event)
+                        }
+                    }
+                }
+                {...props}
+            />
+        </div>
+    )
+}
diff --git a/code/frontend/src/components/InputWithIcon.module.css b/code/frontend/src/components/InputWithIcon.module.css
new file mode 100644
index 0000000..9c54e30
--- /dev/null
+++ b/code/frontend/src/components/InputWithIcon.module.css
@@ -0,0 +1,41 @@
+.InputWithIcon {
+    display: flex;
+    flex-direction: row;
+
+    color: var(--fg-field-off);
+    margin: 2px;
+}
+
+.InputWithIcon.Focused {
+    color: var(--fg-field-on);
+}
+
+.InputWithIcon .IconPart {
+    border-radius: 25px 0 0 25px;
+    padding: 2px 4px;
+
+    background-color: var(--bg-field-off);
+}
+
+.InputWithIcon.Focused .IconPart {
+    background-color: var(--bg-field-on);
+}
+
+.InputWithIcon .InputPart {
+    border-radius: 0 25px 25px 0;
+    padding: 2px;
+
+    background-color: var(--bg-field-off);
+    border-width: 0;
+
+    outline: 0; /* TODO: Questo è sconsigliato dalle linee guida sull'accessibilità! */
+
+    /* Repeat the color, as it is overridden by <input> */
+    color: var(--fg-field-off);
+}
+
+
+.InputWithIcon.Focused .InputPart {
+    background-color: var(--bg-field-on);
+    color: var(--fg-field-on);
+}
\ No newline at end of file
diff --git a/code/frontend/src/utils/make_icon.js b/code/frontend/src/utils/make_icon.js
new file mode 100644
index 0000000..968ab08
--- /dev/null
+++ b/code/frontend/src/utils/make_icon.js
@@ -0,0 +1,17 @@
+import React, { isValidElement } from "react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+
+export default function make_icon(icon, className) {
+    if(isValidElement(icon)) {
+        return <span className={className}>icon</span>;
+    }
+    else if(icon) {
+        return (
+            <span className={className}><FontAwesomeIcon icon={icon}/></span>
+        )
+    }
+    else {
+        return null;
+    }
+}
\ No newline at end of file