docs: add pages for each component, plus mkdocs entry

hotosm · Nov 29, 2023 · 11709b3 · 11709b3
1 parent f72dc98
commit 11709b3
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 6 deletions.
diff --git a/docs/components/button.md 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
@@ -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
@@ -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
diff --git a/docs/components/logo.md 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
@@ -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
@@ -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
@@ -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