docs: initial docs update

sebnitu · May 6, 2021 · 7f83a13 · 7f83a13
1 parent 494ab05
commit 7f83a13
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 24 deletions.
diff --git a/docs/_packages/icon-action.md b/docs/_packages/icon-action.md
@@ -13,7 +13,7 @@ usage:
 
 {% include demo_open.html class_grid="grid_stack" %}
 <div class="level">
-  <button class="icon-action" aria-label="Close">
+  <button class="icon-action" aria-label="Close button">
     {% include icon.html icon="x" %}
   </button>
   <button class="icon-action" aria-label="Minimize">
@@ -33,28 +33,6 @@ usage:
 ```
 {% include demo_close.html %}
 
-## icon-action_color
-
-{% include demo_open.html class_grid="grid_stack" %}
-<div class="level">
-  <button class="icon-action icon-action_color_danger" aria-label="Close">
-    {% include icon.html icon="x" %}
-  </button>
-  <button class="icon-action icon-action_color_caution" aria-label="Minimize">
-    {% include icon.html icon="minus" %}
-  </button>
-  <button class="icon-action icon-action_color_success" aria-label="Fullscreen">
-    {% include icon.html icon="maximize-2" %}
-  </button>
-</div>
-{% include demo_switch.html %}
-```html
-<button class="icon-action icon-action_color_danger" aria-label="Close">...</button>
-<button class="icon-action icon-action_color_caution" aria-label="Minimize">...</button>
-<button class="icon-action icon-action_color_success" aria-label="Fullscreen">...</button>
-```
-{% include demo_close.html %}
-
 ## icon-action_invert
 
 {% include demo_open.html class_grid="grid_stack" %}
@@ -89,3 +67,29 @@ usage:
 <button class="icon-action icon-action_subtle icon-action_invert" aria-label="Close">...</button>
 ```
 {% include demo_close.html %}
+
+## icon-action_type_[key]
+
+{% include demo_open.html class_grid="grid_stack" %}
+<div class="level">
+  <button class="icon-action icon-action_type_info" aria-label="Helpful information">
+    {% include icon.html icon="anchor" %}
+  </button>
+  <button class="icon-action icon-action_type_success" aria-label="Fullscreen">
+    {% include icon.html icon="maximize-2" %}
+  </button>
+  <button class="icon-action icon-action_type_caution" aria-label="Minimize">
+    {% include icon.html icon="minus" %}
+  </button>
+  <button class="icon-action icon-action_type_danger" aria-label="Close">
+    {% include icon.html icon="x" %}
+  </button>
+</div>
+{% include demo_switch.html %}
+```html
+<button class="icon-action icon-action_type_info" aria-label="Helpful information">...</button>
+<button class="icon-action icon-action_type_success" aria-label="Fullscreen">...</button>
+<button class="icon-action icon-action_type_caution" aria-label="Minimize">...</button>
+<button class="icon-action icon-action_type_danger" aria-label="Close">...</button>
+```
+{% include demo_close.html %}
diff --git a/packages/icon-action/README.md b/packages/icon-action/README.md
@@ -4,4 +4,85 @@ A component for displaying simple action buttons using icons.
 
 [![npm version](https://img.shields.io/npm/v/%40vrembem%2Ficon-action.svg)](https://www.npmjs.com/package/%40vrembem%2Ficon-action)
 
-[Documentation](https://vrembem.com/packages/input-action)
+[Documentation](https://vrembem.com/packages/icon-action)
+
+## Installation
+
+```sh
+npm install @vrembem/icon-action
+```
+
+### Styles
+
+```scss
+@use "@vrembem/icon-action";
+```
+
+### JavaScript
+
+```js
+import icon-action from '@vrembem/icon-action';
+const icon-action = new icon-action({ autoInit: true });
+```
+
+### Markup
+
+The icon-action component consists of two parts, the `icon-action` and it's child `icon` component. Because icon-actions only contain an icon as its content, it's important to add an `aria-label` attribute with a label of what the action does for accessibility.
+
+```html
+<button class="icon-action" aria-label="Close button">
+  <svg role="img" class="icon">
+    <!-- SVG markup or link ID goes here... -->
+  </svg>
+</button>
+```
+
+## Modifiers
+
+### `icon-action_invert`
+
+...
+
+```html
+<button class="icon-action icon-action_invert" aria-label="...">
+  ...
+</button>
+```
+
+### `icon-action_subtle`
+
+...
+
+```html
+<button class="icon-action icon-action_subtle" aria-label="...">
+  ...
+</button>
+```
+
+### `icon-action_type_[key]`
+
+Adds styles for changing the look and feel of an icon-action to better reflect the urgency or status of the action.
+
+```html
+<button class="icon-action icon-action_type_info" aria-label="...">
+  ...
+</button>
+```
+
+#### Available Variations
+
+- `icon-action_type_info`
+- `icon-action_type_success`
+- `icon-action_type_caution`
+- `icon-action_type_danger`
+
+## Customization
+
+### Sass Variables
+
+| Variable                 | Default | Description                            |
+| ------------------------ | ------- | -------------------------------------- |
+| `$prefix-block`          | `null`  | String to prefix blocks with.          |
+| `$prefix-element`        | `"__"`  | String to prefix elements with.        |
+| `$prefix-modifier`       | `"_"`   | String to prefix modifiers with.       |
+| `$prefix-modifier-value` | `"_"`   | String to prefix modifier values with. |