fix(docs): add user documentation for workitembutton

projectcaluma · Jun 3, 2021 · 47ef3e1 · 47ef3e1
1 parent 71cb7a2
commit 47ef3e1
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 7 deletions.
diff --git a/addon/templates/components/work-item-button.hbs b/addon/templates/components/work-item-button.hbs
@@ -1,9 +1,9 @@
 <UkButton
   ...attributes
   @type={{@type}}
-  @disabled={{or @loading this.mutate.isRunning}}
+  @disabled={{or @disabled @loading this.mutate.isRunning}}
   @active={{@active}}
-  @loading={{or @disabled @loading this.mutate.isRunning}}
+  @loading={{or @loading this.mutate.isRunning}}
   @color={{or @color "default"}}
   @size={{@size}}
   @title={{@title}}

diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js
@@ -14,6 +14,7 @@ Router.map(function () {
     this.route("testing");
     this.route("queries");
     this.route("migration");
+    this.route("buttons");
   });
 
   this.route("demo", function () {

diff --git a/tests/dummy/app/templates/docs.hbs b/tests/dummy/app/templates/docs.hbs
@@ -5,6 +5,7 @@
     {{nav.item (t "dummy.testing") "docs.testing"}}
     {{nav.item (t "dummy.queries.title") "docs.queries"}}
     {{nav.item (t "dummy.migration") "docs.migration"}}
+    {{nav.item (t "dummy.buttons") "docs.buttons"}}
   {{/viewer.nav}}
 
   {{#viewer.main}}

diff --git a/tests/dummy/app/templates/docs/buttons.md b/tests/dummy/app/templates/docs/buttons.md
@@ -0,0 +1,44 @@
+# Buttons
+
+`ember-caluma` provides buttons for mutating the state of work items.
+
+## Usage
+
+### WorkItemButton
+
+The text of the button is per default the mutation name, it can be overwritten with either the `label` parameter or using the component in block form.
+
+```hbs
+<WorkItemButton
+  @mutation="complete"
+  @workItemId="bb94ad56-d650-4c21-ba51-7c4230aef4b8"
+/>
+
+<WorkItemButton
+  @label="Lorem Ipsum"
+  @mutation="complete"
+  @workItemId="bb94ad56-d650-4c21-ba51-7c4230aef4b8"
+/>
+
+<WorkItemButton
+  @mutation="complete"
+  @workItemId="bb94ad56-d650-4c21-ba51-7c4230aef4b8"
+>
+  Lorem Ipsum
+</WorkItemButton>
+```
+
+ The WorkItemButton component has 3 parameters:
+
+ - `mutation` The state mutation to be used either `complete`, `skip` or `cancel`.
+ - `workItemId` Id of the work item which should be mutated.
+ - `label` (Optional) Overwrites the button text.
+
+ Additionally there are many optional parameters for the underlying [UkButton](https://adfinis-sygroup.github.io/ember-uikit/#/docs/components/button) component, refer to the UkButton component documentation to see what exactly they do:
+
+ - `type`
+ - `disabled`
+ - `loading` 
+ - `color`
+ - `size`
+ - `title`
diff --git a/tests/dummy/app/templates/docs/queries.md b/tests/dummy/app/templates/docs/queries.md
@@ -44,11 +44,11 @@ public methods:
 
 - `fetch` To initially fetch the first page of the query. This will reset all existing items in the query. `fetch` takes the following optional arguments:
 
-| Name           | Type     | Description                                                                                                                                                                 |
-| -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
-| `filter`       | `String  | Object`                                                                                                                                                                     | According to the `gql` filter type defined in the query you're using. |
-| `order`        | `String  | Object`                                                                                                                                                                     | According to the `gql` order type defined in the query you're using.  |
-| `queryOptions` | `Object` | Pass options to `apollo.query`. For more information on what options exist, [see here](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.query). |
+| Name           | Type              | Description                                                  |
+| -------------- | ----------------- | ------------------------------------------------------------ |
+| `filter`       | `String \| Object` | According to the `gql` filter type defined in the query you're using. |
+| `order`        | `String \| Object` | According to the `gql` order type defined in the query you're using. |
+| `queryOptions` | `Object`          | Pass options to `apollo.query`. For more information on what options exist, [see here](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.query). |
 
 - `fetchMore` This will load the next page of your data.
 

diff --git a/translations/dummy/en.yaml b/translations/dummy/en.yaml
@@ -9,3 +9,4 @@ dummy:
     load: "Load"
     loadMore: "Load more"
     getWorkItems: "getWorkItems"
+  buttons: "Buttons"