From b226389e5d1d04e13798dfc0a23494fe05465c96 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 23 Mar 2021 16:58:35 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Implement=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/Readme.md       | 26 ++++++++++++++++++
 src/components/Button/index.js        | 12 +++++++++
 src/components/ButtonToggle/Readme.md | 38 +++++++++++++++++++++++++++
 src/components/ButtonToggle/index.js  | 23 ++++++++++++++++
 src/components/Color/index.js         |  2 --
 5 files changed, 99 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Button/Readme.md
 create mode 100644 src/components/Button/index.js
 create mode 100644 src/components/ButtonToggle/Readme.md
 create mode 100644 src/components/ButtonToggle/index.js

diff --git a/src/components/Button/Readme.md b/src/components/Button/Readme.md
new file mode 100644
index 0000000..a7ff27a
--- /dev/null
+++ b/src/components/Button/Readme.md
@@ -0,0 +1,26 @@
+A clickable button that should trigger an action on click.
+
+```jsx
+import Bluelib from "../Bluelib";
+import Color from "../Color";
+
+<Bluelib>
+    <p>
+        <Button onClick={event => console.debug(event)}>
+            Click here
+        </Button>
+    </p>
+    <p>
+        <Color builtin="blue">
+            <Button onClick={event => console.debug(event)}>
+                such blue wow
+            </Button>
+        </Color>
+    </p>
+    <p>
+        <Button disabled={true}>
+            Disabled
+        </Button>
+    </p>
+</Bluelib>
+```
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
new file mode 100644
index 0000000..59d2fb5
--- /dev/null
+++ b/src/components/Button/index.js
@@ -0,0 +1,12 @@
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import classNames from "classnames"
+
+
+export default function Button({children, className, disabled, ...props}) {
+    return (
+        <button className={useBluelibClassNames(classNames("button", disabled ? "status-disabled" : "status-clickable"), className)} {...props}>
+            {children}
+        </button>
+    )
+}
diff --git a/src/components/ButtonToggle/Readme.md b/src/components/ButtonToggle/Readme.md
new file mode 100644
index 0000000..7efbbb8
--- /dev/null
+++ b/src/components/ButtonToggle/Readme.md
@@ -0,0 +1,38 @@
+A clickable button that should trigger an action on click.
+
+```jsx
+import Bluelib from "../Bluelib";
+import Color from "../Color";
+
+<Bluelib>
+    <p>
+        <ButtonToggle value={true}>
+            On
+        </ButtonToggle>
+        &nbsp;
+        <ButtonToggle value={false}>
+            Off
+        </ButtonToggle>
+    </p>
+    <p>
+        <Color builtin="magenta">
+            <ButtonToggle value={true}>
+                On
+            </ButtonToggle>
+            &nbsp;
+            <ButtonToggle value={false}>
+                Off
+            </ButtonToggle>
+        </Color>
+    </p>
+    <p>
+        <ButtonToggle disabled={true} value={true}>
+            On
+        </ButtonToggle>
+        &nbsp;
+        <ButtonToggle disabled={true} value={false}>
+            Off
+        </ButtonToggle>
+    </p>
+</Bluelib>
+```
diff --git a/src/components/ButtonToggle/index.js b/src/components/ButtonToggle/index.js
new file mode 100644
index 0000000..686f5f4
--- /dev/null
+++ b/src/components/ButtonToggle/index.js
@@ -0,0 +1,23 @@
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import classNames from "classnames"
+import Button from "../Button"
+
+
+export default function ButtonToggle({children, className, disabled, value, ...props}) {
+    return (
+        <Button
+            className={useBluelibClassNames(
+                classNames(
+                    "button",
+                    "button-toggle",
+                    value ? "button-toggle-on" : "button-toggle-off",
+                    disabled ? "status-disabled" : "status-clickable",
+                ), className
+            )}
+            {...props}
+        >
+            {children}
+        </Button>
+    )
+}
diff --git a/src/components/Color/index.js b/src/components/Color/index.js
index 10c03db..e3bda76 100644
--- a/src/components/Color/index.js
+++ b/src/components/Color/index.js
@@ -24,8 +24,6 @@ export default function Color({children, builtin, custom}) {
         extraStyle["--bluelib-color-b"] = c.blue()
     }
 
-    console.log(`Builtin: ${builtin} → ${extraClassName}\nCustom: ${custom} → ${JSON.stringify(extraStyle)}`)
-
     children = React.Children.map(children, child => {
         if(!child.props) {
             return child;