From 11709b3b3b15af2966bc1c0c02f5976a4ab162c9 Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Wed, 29 Nov 2023 09:53:32 +0000
Subject: [PATCH] docs: add pages for each component, plus mkdocs entry

---
 docs/components/button.md   | 13 +++++++++++++
 docs/components/card.md     |  8 ++++++++
 docs/components/dropdown.md |  9 +++++++++
 docs/components/example.md  |  5 -----
 docs/components/logo.md     |  8 ++++++++
 docs/components/popup.md    | 11 +++++++++++
 docs/components/toggle.md   |  9 +++++++++
 mkdocs.yml                  |  7 ++++++-
 8 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 docs/components/button.md
 create mode 100644 docs/components/card.md
 create mode 100644 docs/components/dropdown.md
 delete mode 100644 docs/components/example.md
 create mode 100644 docs/components/logo.md
 create mode 100644 docs/components/popup.md
 create mode 100644 docs/components/toggle.md

diff --git a/docs/components/button.md b/docs/components/button.md
new file mode 100644
index 0000000..5057e9a
--- /dev/null
+++ b/docs/components/button.md
@@ -0,0 +1,13 @@
+# Button
+
+A button component, used to trigger events.
+
+## Extra Info
+
+Extra info here.
+
+## Props
+
+| Property   | Type      | Description                                    |
+| ---------- | --------- | ---------------------------------------------- |
+| `disabled` | `boolean` | Disable the button, greyed out, not clickable. |
diff --git a/docs/components/card.md b/docs/components/card.md
new file mode 100644
index 0000000..82feffa
--- /dev/null
+++ b/docs/components/card.md
@@ -0,0 +1,8 @@
+# Card
+
+A card component to embed in your page.
+
+## Props
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
new file mode 100644
index 0000000..0b02fd9
--- /dev/null
+++ b/docs/components/dropdown.md
@@ -0,0 +1,9 @@
+# Dropdown
+
+A dropdown component to display a list of values for selection.
+
+## Props
+
+| Property  | Type    | Description                            |
+| --------- | ------- | -------------------------------------- |
+| `options` | `Array` | The available options in the dropdown. |
diff --git a/docs/components/example.md b/docs/components/example.md
deleted file mode 100644
index 61923a2..0000000
--- a/docs/components/example.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Example Component
-
-| Property   | Type     | Description                     |
-| ---------- | -------- | ------------------------------- |
-| `someProp` | `string` | Description of prop "someProp". |
diff --git a/docs/components/logo.md b/docs/components/logo.md
new file mode 100644
index 0000000..08bb937
--- /dev/null
+++ b/docs/components/logo.md
@@ -0,0 +1,8 @@
+# Logo
+
+The HOTOSM logo to embed in a webpage.
+
+## Props
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
diff --git a/docs/components/popup.md b/docs/components/popup.md
new file mode 100644
index 0000000..70b49ae
--- /dev/null
+++ b/docs/components/popup.md
@@ -0,0 +1,11 @@
+# Popup
+
+A popup component, shown at the side of the viewport.
+
+Used to display things such as cookie banners.
+
+## Props
+
+| Property   | Type             | Description          |
+| ---------- | ---------------- | -------------------- |
+| `children` | `ReactReactNode` | Nest child elements. |
diff --git a/docs/components/toggle.md b/docs/components/toggle.md
new file mode 100644
index 0000000..fcdd342
--- /dev/null
+++ b/docs/components/toggle.md
@@ -0,0 +1,9 @@
+# Toggle
+
+A toggle component, to trigger an event on click.
+
+## Props
+
+| Property  | Type      | Description                                     |
+| --------- | --------- | ----------------------------------------------- |
+| `checked` | `boolean` | Set the state of the toggle: checked/unchecked. |
diff --git a/mkdocs.yml b/mkdocs.yml
index bbb83af..13fb75c 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -53,7 +53,12 @@ plugins:
 nav:
   - Home: index.md
   - Components:
-      - Example: components/example.md
+      - Button: components/button.md
+      - Card: components/card.md
+      - Dropdown: components/dropdown.md
+      - Logo: components/logo.md
+      - Popup: components/popup.md
+      - Toggle: components/toggle.md
   - Visual: visual.md
   - License: LICENSE
   - Changelog: CHANGELOG.md