🗒 Idk documentation

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";

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>
+    <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>
 ```

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,
 }

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

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>
 ```

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
+}