Merge pull request #17 from lumapps/chore/bookmarks-custo

chore(bookmarks): custo docs

Author: juanigalan91

docs/javascript/api.md

@@ -66,6 +66,7 @@ And `configuration` is an object that allows these properties:
 |--------------------------------------|-------------------------------------------------------------------------------------|-------------------------------------------------------------|
 | `targets.APP`                        | Target id for application                                                           | [Documentation](./capabilities#application)                 |
 | `targets.BOOKMARKS`                  | Target id for the bookmarks/app launcher component                                  | [Documentation](./capabilities#bookmarks)                   |
+| `targets.BOOKMARKS_ITEMS`            | Target id for the bookmarks displayed inside the app launcher                       | [Documentation](./capabilities#bookmarks-items)             |
 | `targets.COMMUNITY`                  | Target id for the community pages                                                   | [Documentation](./capabilities#community)                   |
 | `targets.CONTENT`                    | Target id for the content page                                                      | [Documentation](./capabilities#content)                     |
 | `targets.CONTEXTUAL_ACTIONS`         | Target id for the contextual actions menu on the right hand side of a content page. | [Documentation](./capabilities#contextual-actions)          |
@@ -212,6 +213,30 @@ window.lumapps.customize(({ components, constants }) => {
 | `size`      | Size of the avatar.                                                 | No           | [`Size`](#size)                         | `Size.m`      |
 | `className` | CSS class that will be applied directly into the wrapper container. | No           | `string` or [css classes](#css-classes) | `undefined`   |
 
+#### Bookmark
+
+![Component Bookmark](./assets/component-bookmark.png "Component Bookmark")
+
+```js
+window.lumapps.customize(({ components, constants }) => {
+    const { Bookmark } = components;
+
+    const component = Bookmark({
+        title: 'Test',
+        link: 'https://google.com',
+        icon: 'https://link-to-image.com',
+    });
+})
+```
+
+`Bookmark` options:
+
+| Option      | Description                                | Is required? | Option type                             | Default Value |
+|-------------|--------------------------------------------|--------------|-----------------------------------------|---------------|
+| `title`     | Bookmark title to display.                 | Yes          | `string`                                | `undefined`   |
+| `link`      | Bookmark link to display.                  | No           | `string`                                | `undefined`   |
+| `icon`      | Bookmark icon to display, should be a URL  | Yes          | `string`                                | `undefined`   |
+
 #### Button
 
 ![Component Button](./assets/component-button.png "Component Button")

docs/javascript/assets/component-bookmark.png

@@ -133,6 +133,26 @@ Target that allows customizing the bookmarks (also known as [App launcher](https
 
 - [Hide app launcher](./use-cases#hide-app-launcher)
 
+### Bookmarks items
+
+Target that allows adding new bookmarks to the [App launcher](https://docs.lumapps.com/docs/explore-l1119324950335211) component
+
+![Target Bookmarks items](./assets/target-bookmarks-items.png "Target Bookmarks items")
+
+#### Compatibility
+
+|               |                                                                                                                           |
+|---------------|---------------------------------------------------------------------------------------------------------------------------|
+| Target ID     | `bookmarks-items`                                                                                                         |
+| Description   | Target that focuses on the bookmarks items (app launcher) icon on the top bar of your site                                |
+| Placements    | Compatible with placements: `LEFT`, `RIGHT`. Customizations are added as siblings of the other bookmarks in the launcher  |
+| Disable       | No compatibility, however, bookmarks can be individually [disabled](./use-cases#disabling-bookmarks)                      |
+| Changing text | No compatibility                                                                                                          |
+
+#### Use cases
+
+- [Add new bookmarks](./use-cases#add-new-bookmarks)
+
 ### Community
 
 Target that allows customizing the surroundings of a [community](https://docs.lumapps.com/docs/explore-l8416655995933057communities) page.

docs/javascript/assets/target-bookmarks-items-ids.png

@@ -170,6 +170,39 @@ In the scenario that you would want to hide the App launcher, the following snip
 window.lumapps.disable('bookmarks');
 ```
 
+## Add new bookmarks
+
+In this specific use case, we have the possibility to add new bookmarks into the App Launcher. Bookmarks can be added either as the first elements of the list or the last ones
+
+```js
+window.lumapps.customize(({ targets, components, render, placement, constants }) => {
+    const { Bookmark } = components;
+
+    render({
+        placement: placement.RIGHT,
+        target: targets.BOOKMARKS_ITEMS,
+        toRender: Bookmark({
+            className: 'widget-message',
+            title: 'Test',
+            link: 'https://google.com',
+            icon: 'https://link-to-image.com',
+        }),
+    });
+});
+```
+
+## Disabling bookmarks
+
+Bookmarks can be disabled in order to avoid them to be displayed by adding the following line of JavaScript to your site.
+
+```js
+window.lumapps.disable('bookmarked-apps-docs');
+```
+
+The ID used is retrieved from the bookmarks HTML, where each bookmark has the `id` attribute.
+
+![Target Bookmarks items ids](./assets/target-bookmarks-items-ids.png "Target Bookmarks items ids")
+
 ## Display a message above all pages of a certain type
 
 In this use case, we are displaying a message oon all pages of a certain type. This should be used when an important message wants to be conveyed for all pages of a site in a quick and efficient way.