Merge pull request #7 from niconiahi/niconiahi/main-24-add-documentat…

…ion-for-button

docs(button): add first version readme

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)

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>

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 |