From b86bf0116d322086e285c38836faad0a1c73e38b Mon Sep 17 00:00:00 2001
From: Nicolas Accetta <nicolas.accetta@gmail.com>
Date: Mon, 22 Jan 2024 13:34:36 -0300
Subject: [PATCH] docs(button): add first version readme

---
 README.md                  | 12 ++++++++++++
 apps/playground/index.html |  7 +------
 packages/button/README.md  | 32 +++++++++++++++++++++++++++++++-
 3 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..638b956
--- /dev/null
+++ b/README.md
@@ -0,0 +1,12 @@
+## Philosophy
+
+Accesibility shouldn't be a choice, it should be a given. This library tries to be a mirror of the [WAI-ARIA patterns](https://www.w3.org/WAI/ARIA/apg/patterns/). This library effectively export these accesible atoms to be extended with application specific needs but disregarding the accesibility aspect
+
+## Characteristics
+
+- It completely complies to WAI-ARIA specifications
+- It's framework agnostic
+
+## Modules
+
+- [button](packages/button/README.md)
diff --git a/apps/playground/index.html b/apps/playground/index.html
index eb640dc..738e8ac 100644
--- a/apps/playground/index.html
+++ b/apps/playground/index.html
@@ -14,12 +14,7 @@
       <button is="ariabones-button" _="on click set @disabled to true">
         Disable button
       </button>
-      <button
-        is="ariabones-button"
-        data-type="toggle"
-        data-pressed="true"
-        style="display: flex; align-items: center; justify-content: center"
-      >
+      <button is="ariabones-button" data-type="toggle" data-pressed="true">
         Toggle button
       </button>
     </section>
diff --git a/packages/button/README.md b/packages/button/README.md
index 92f0d33..0adddd0 100644
--- a/packages/button/README.md
+++ b/packages/button/README.md
@@ -1 +1,31 @@
-# @ariabones/button
+## toggle
+
+### installation
+
+```
+npm install @ariabones/button
+yarn add @ariabones/button
+pnpm install @ariabones/button
+```
+
+### usage
+
+```html
+<button is="ariabones-button" data-type="toggle" data-pressed="true">
+  Toggle button
+</button>
+```
+
+### api
+
+| property     | type              | default | description                                         |
+| ------------ | ----------------- | ------- | --------------------------------------------------- |
+| data-pressed | "true" or "false" | "false" | used to set up the initial value of aria-pressed    |
+| aria-pressed | "true" or "false" | "false" | indicates if the button is currently pressed or not |
+
+### keyboard interaction
+
+| key   | description        |
+| ----- | ------------------ |
+| Space | toggles the button |
+| Enter | toggles the button |