From cbb7073e85cd075422ceab17801e49671416d736 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 20 Jul 2021 01:52:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=97=92=20Idk=20documentation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Align/Readme.md      |  2 +-
 src/components/Anchor/Readme.md     | 17 +++++++++++++----
 src/components/Anchor/index.js      | 10 +++++++---
 src/components/Aside/index.js       |  2 +-
 src/components/InputField/Readme.md |  6 ++++--
 src/utils/disable.js                |  7 +++++++
 6 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 src/utils/disable.js

diff --git a/src/components/Align/Readme.md b/src/components/Align/Readme.md
index fd113c8..0146280 100644
--- a/src/components/Align/Readme.md
+++ b/src/components/Align/Readme.md
@@ -1,4 +1,4 @@
-Align text horizontally.
+A `<div>` which changes the alignment of the contained text using the `align-*` Bluelib class.
 
 ```jsx
 import Bluelib from "../Bluelib";
diff --git a/src/components/Anchor/Readme.md b/src/components/Anchor/Readme.md
index 4ed45e4..0c6c5af 100644
--- a/src/components/Anchor/Readme.md
+++ b/src/components/Anchor/Readme.md
@@ -1,11 +1,20 @@
-An anchor, very similar to the `<a>` element.
+An `<a>` element using the `element-anchor` Bluelib class, to be used for anchors (`[href^="#"]`) and links (`[href^=http`).
+
+Can be disabled using the `disabled` prop.
 
 ```jsx
 import Bluelib from "../Bluelib";
 
 <Bluelib>
-    <Anchor href={"https://example.org"}>
-        Go to example.org!
-    </Anchor>
+    <div>
+        <Anchor href={"https://example.org"}>
+            Go to example.org!
+        </Anchor>
+    </div>
+    <div>
+        <Anchor href={"https://google.com"} disabled={true}>
+            Don't go to Google, it will track you!
+        </Anchor>
+    </div>
 </Bluelib>
 ```
diff --git a/src/components/Anchor/index.js b/src/components/Anchor/index.js
index 6fb3cd7..4a2090e 100644
--- a/src/components/Anchor/index.js
+++ b/src/components/Anchor/index.js
@@ -1,11 +1,14 @@
 import React from "react"
 import useBluelibClassNames from "../../hooks/useBluelibClassNames"
 import PropTypes from "prop-types"
+import { disable, disableClass } from "../../utils/disable"
 
 
-export default function Anchor({children, className, href, ...props}) {
+export default function Anchor({children, className, disabled, href, ...props}) {
+    className = useBluelibClassNames([`element-anchor`, disableClass(disabled)], [className])
+
     return (
-        <a className={useBluelibClassNames(`element-anchor`, className)} href={href} {...props}>
+        <a href={disable(disabled, href)} {className} {...props}>
             {children}
         </a>
     )
@@ -15,5 +18,6 @@ export default function Anchor({children, className, href, ...props}) {
 Anchor.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    href: PropTypes.string
+    disabled: PropTypes.bool,
+    href: PropTypes.string,
 }
diff --git a/src/components/Aside/index.js b/src/components/Aside/index.js
index de03be4..aa82fff 100644
--- a/src/components/Aside/index.js
+++ b/src/components/Aside/index.js
@@ -5,7 +5,7 @@ import PropTypes from "prop-types"
 
 export default function Aside({children, className, ...props}) {
     return (
-        <aside className={useBluelibClassNames("panel panel-box panel-aside", className)} {...props}>
+        <aside className={useBluelibClassNames(["panel", "panel-box", "panel-aside"], className)} {...props}>
             {children}
         </aside>
     )
diff --git a/src/components/InputField/Readme.md b/src/components/InputField/Readme.md
index fd8c2db..2efe318 100644
--- a/src/components/InputField/Readme.md
+++ b/src/components/InputField/Readme.md
@@ -1,9 +1,11 @@
-Makes the text bold (like a `<b>` element), while applying bold styles from the selected bluelib skin.
+A field where the user can input text.
+
+Behaves like an `<input>` element, and automatically prevents propagation of `onChange` events if it is `disabled`.
 
 ```jsx
 import Bluelib from "../Bluelib";
 
 <Bluelib>
-    To <Bold>boldly</Bold> go where no library has gone before!
+    <InputField placeholder={"Hello!"}/>
 </Bluelib>
 ```
diff --git a/src/utils/disable.js b/src/utils/disable.js
new file mode 100644
index 0000000..615d449
--- /dev/null
+++ b/src/utils/disable.js
@@ -0,0 +1,7 @@
+export function disable(isDisabled, thing, whenDisabled = null) {
+    return isDisabled ? whenDisabled : thing;
+}
+
+export function disableClass(isDisabled) {
+    return isDisabled ? `status-disabled` : null
+}