@empathyco/x-components 3.0.0-alpha.32 → 3.0.0-alpha.36

package/docs/API-reference/components/related-tags/x-components.related-tag.md

@@ -1,32 +1,34 @@
 ---
-id: x-components.x-components.related-tag
-title: Related Tag
-sidebar_label: Related Tag
+
+title: RelatedTag
+
 ---
-# related-tag
 
-> This component renders a related tag for a query. A related tag is a descriptive keyword
-> related to the current query to fine-tune the search. For example, if you are searching
-> for _lego_, a related tag could be _city_, refining the search with _lego city_.
+# RelatedTag
+
+This component renders a related tag for a query. A related tag is a descriptive keyword
+related to the current query to fine-tune the search. For example, if you are searching
+for _lego_, a related tag could be _city_, refining the search with _lego city_.
 
 ## Props
 
-| Name                    | Description                 | Type                         | Default       |
-| ----------------------- | --------------------------- | ---------------------------- | ------------- |
-| <code>relatedTag</code> | The related tag model data. | <code>RelatedTagModel</code> | <code></code> |
+| Name                          | Description                                                 | Type                         | Default            |
+| ----------------------------- | ----------------------------------------------------------- | ---------------------------- | ------------------ |
+| <code>highlightCurated</code> | Indicates if the curated related tag should be highlighted. | <code>boolean</code>         | <code>false</code> |
+| <code>relatedTag</code>       | The related tag model data.                                 | <code>RelatedTagModel</code> | <code></code>      |
 
 ## Slots
 
-| Name                 | Description                                                  | Bindings<br />(name - type - description)                                                                                 |
-| -------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
-| <code>default</code> | Custom content that replaces the RelatedTag default content. | **relatedTag** <code>RelatedTag</code> - Related tag data.<br />**isSelected** <code>boolean</code> - Related tag status. |
-
----
+| Name                 | Description                                                  | Bindings<br />(name - type - description)                                                                                                                                                                                     |
+| -------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>default</code> | Custom content that replaces the RelatedTag default content. | **relatedTag** <code>RelatedTag</code> - Related tag data.<br />**isSelected** <code>boolean</code> - Related tag status.<br />**shouldHighlightCurated** <code>boolean</code> - True if the curated RTs should be displayed. |
 
 ## Dynamic classes
 
-`RelatedTag` uses the `x-related-tag--is-selected` dynamic CSS class so you can style it when is
-selected.
+`RelatedTag` uses the following dynamic CSS classes so you can style it when is:
+
+- Selected: `x-related-tag--is-selected`.
+- Curated: `x-related-tag--is-curated`.
 
 ## Events
 

package/docs/API-reference/components/related-tags/x-components.related-tags.md

@@ -1,31 +1,31 @@
 ---
-id: x-components.x-components.related-tags
-title: Related Tags
-sidebar_label: Related Tags
+
+title: RelatedTags
+
 ---
-# related-tags
 
-> This component renders a set of [`RelatedTag`](./x-components.related-tag) components by
-> default to select from after a query is performed to fine-tune search.
-> For example, if you are searching for _lego_, different related tags could be _city_,
-> _friends_, or _harry potter_, refining the search with _lego city_, _lego friends_,
-> or _lego harry potter_.
+# RelatedTags
+
+This component renders a set of [`RelatedTag`](./x-components.related-tag) components by
+default to select from after a query is performed to fine-tune search.
+For example, if you are searching for _lego_, different related tags could be _city_,
+_friends_, or _harry potter_, refining the search with _lego city_, _lego friends_,
+or _lego harry potter_.
 
 ## Props
 
-| Name                          | Description                                                      | Type                | Default           |
-| ----------------------------- | ---------------------------------------------------------------- | ------------------- | ----------------- |
-| <code>animation</code>        | Animation component that will be used to animate the suggestion. | <code>Vue</code>    | <code>'ul'</code> |
-| <code>maxItemsToRender</code> | Number of related tags to be rendered.                           | <code>number</code> | <code></code>     |
+| Name                          | Description                                                         | Type                 | Default            |
+| ----------------------------- | ------------------------------------------------------------------- | -------------------- | ------------------ |
+| <code>animation</code>        | Animation component that will be used to animate the suggestion.    | <code>Vue</code>     | <code>'ul'</code>  |
+| <code>maxItemsToRender</code> | Number of related tags to be rendered.                              | <code>number</code>  | <code></code>      |
+| <code>highlightCurated</code> | Flag to indicate if the curated tags should be displayed different. | <code>boolean</code> | <code>false</code> |
 
 ## Slots
 
-| Name                             | Description                                                  | Bindings<br />(name - type - description)                                                                                 |
-| -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
-| <code>related-tag</code>         | Custom content that replaces the RelatedTag component.       | **relatedTag** <code>RelatedTag</code> - Related tag data.                                                                |
-| <code>related-tag-content</code> | Custom content that replaces the RelatedTag default content. | **relatedTag** <code>RelatedTag</code> - Related tag data.<br />**isSelected** <code>boolean</code> - Related tag status. |
-
----
+| Name                             | Description                                                  | Bindings<br />(name - type - description)                                                                                                                                                                                     |
+| -------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>related-tag</code>         | Custom content that replaces the RelatedTag component.       | **relatedTag** <code>RelatedTag</code> - Related tag data.<br />**highlightCurated** <code>boolean</code> - True if the curated RTs should be displayed.                                                                      |
+| <code>related-tag-content</code> | Custom content that replaces the RelatedTag default content. | **relatedTag** <code>RelatedTag</code> - Related tag data.<br />**isSelected** <code>boolean</code> - Related tag status.<br />**shouldHighlightCurated** <code>boolean</code> - True if the curated RTs should be displayed. |
 
 ## See it in action
 

package/docs/API-reference/components/scroll/x-components.main-scroll-item.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.main-scroll-item
-title: Main Scroll Item
-sidebar_label: Main Scroll Item
+
+title: MainScrollItem
+
 ---
-# main-scroll-item
 
-> Wrapper for elements contained in the {@link MainScroll} that should store/restore its
-> position.
+# MainScrollItem
+
+Wrapper for elements contained in the {@link MainScroll} that should store/restore its
+position.
 
 ## Props
 
@@ -21,8 +22,6 @@ sidebar_label: Main Scroll Item
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | None                                      |
 
----
-
 ## Events
 
 This components emits the following events:

package/docs/API-reference/components/scroll/x-components.main-scroll.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.main-scroll
-title: Main Scroll
-sidebar_label: Main Scroll
+
+title: MainScroll
+
 ---
-# main-scroll
 
-> Extends the scroll making it able to sync the first visible element, and allowing
-> the children position to be restored.
+# MainScroll
+
+Extends the scroll making it able to sync the first visible element, and allowing
+the children position to be restored.
 
 Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}
 component.
@@ -26,8 +27,6 @@ component.
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | None                                      |
 
----
-
 ## Events
 
 This component emits the following events:

package/docs/API-reference/components/scroll/x-components.scroll-to-top.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.scroll-to-top
-title: Scroll To Top
-sidebar_label: Scroll To Top
+
+title: ScrollToTop
+
 ---
-# scroll-to-top
 
-> The `ScrollToTop` component is a button that the user can click to make a container scroll
-> up to its initial position.
+# ScrollToTop
+
+The `ScrollToTop` component is a button that the user can click to make a container scroll
+up to its initial position.
 
 ## Props
 
@@ -22,11 +23,9 @@ sidebar_label: Scroll To Top
 | -------------------- | ------------------------------------------------------ | ----------------------------------------- |
 | <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |
 
----
-
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 The component renders whatever is passed to it in the default slot and scrolls to top the scroll
 with an id `scrollId`.

package/docs/API-reference/components/scroll/x-components.scroll.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.scroll
+
 title: Scroll
-sidebar_label: Scroll
+
 ---
-# scroll
 
-> Base scroll component that depending on base scroll component and the user interaction emits
-> different x events for knowing when the user scrolls, the direction of scroll and if user
-> reaches the start or end.
+# Scroll
+
+Base scroll component that depending on base scroll component and the user interaction emits
+different x events for knowing when the user scrolls, the direction of scroll and if user
+reaches the start or end.
 
 ## Props
 
@@ -23,28 +24,13 @@ sidebar_label: Scroll
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | None                                      |
 
----
-
-# Example
+## Example
 
 The Scroll is a component that wraps the BaseScroll and provides it for a unique id.
 
-## Events
-
-A list of events that the component will emit:
-
-- `UserScrolled`: emitted after the user scrolls in this container. The payload is the scroll top
-  distance in pixels.
-- `UserChangedScrollDirection`: emitted when the user changes the scroll direction. The payload is
-  the new scrolling direction.
-- `UserReachedScrollStart`: emitted when the user scrolls up to the initial position of the scroll.
-- `UserAlmostReachedScrollEnd`: emitted when the user is about to reach the bottom part of the
-  scroll.
-- `UserReachedScrollEnd`: emitted when the user has reached the bottom part of the scroll.
+### Customized usage
 
-## Customized usage
-
-### Overriding the properties
+#### Overriding the properties
 
 It renders an element with scroll, with the content passed in the `default slot`.
 
@@ -70,9 +56,7 @@ export default {
 </script>
 ```
 
-## Customized usage
-
-### Using scroll events.
+#### Using scroll events.
 
 ```vue
 <template>
@@ -122,9 +106,7 @@ export default {
 </script>
 ```
 
-## Customized usage
-
-### Using XEvents.
+#### Using XEvents.
 
 You can use the XEvents subscribing to them.
 
@@ -166,3 +148,16 @@ export default {
 };
 </script>
 ```
+
+## Events
+
+A list of events that the component will emit:
+
+- `UserScrolled`: emitted after the user scrolls in this container. The payload is the scroll top
+  distance in pixels.
+- `UserChangedScrollDirection`: emitted when the user changes the scroll direction. The payload is
+  the new scrolling direction.
+- `UserReachedScrollStart`: emitted when the user scrolls up to the initial position of the scroll.
+- `UserAlmostReachedScrollEnd`: emitted when the user is about to reach the bottom part of the
+  scroll.
+- `UserReachedScrollEnd`: emitted when the user has reached the bottom part of the scroll.

package/docs/API-reference/components/scroll/x-components.window-scroll.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.window-scroll
-title: Window Scroll
-sidebar_label: Window Scroll
+
+title: WindowScroll
+
 ---
-# window-scroll
 
-> The `WindowScroll` component listens to either the `html` or `body` DOM scroll events, and
-> re-emits them as X Events. Additionally it also emits events related to the direction or
-> current position of these elements scroll.
+# WindowScroll
+
+The `WindowScroll` component listens to either the `html` or `body` DOM scroll events, and
+re-emits them as X Events. Additionally it also emits events related to the direction or
+current position of these elements scroll.
 
 ## Props
 
@@ -16,18 +17,16 @@ sidebar_label: Window Scroll
 | <code>scrollableElement</code> | Tag to identify the main scrollable element. | <code>ScrollableElement</code> | <code>'html'</code>       |
 | <code>id</code>                | Id to identify the component.                | <code>string</code>            | <code>MainScrollId</code> |
 
----
-
-# Example
+## Example
 
 The `WindowScroll` component manages the scroll state of the `body` or `html` elements. It does the
 necessary calculations for knowing the direction of scroll, if the scroll has reached its starting
 position, if it is about to reach its ending position or if it has already reached it end. Whenever
 this state changes, it emits the appropiate X Event to the rest of the application
 
-## Custom usage
+### Custom usage
 
-### Overriding the properties and using document scroll events.
+#### Overriding the properties and using document scroll events.
 
 ```vue
 <template>
@@ -73,9 +72,7 @@ export default {
 </script>
 ```
 
-## Customized usage
-
-### Using body and XEvents.
+#### Using body and XEvents.
 
 If we want to listen scroll body we should do some changes in css for body. This is an example, so
 therefore the height of body can be get any value that you want. The template style should have a
@@ -130,7 +127,7 @@ body {
 </style>
 ```
 
-## Vue Events:
+## Vue Events
 
 - `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll
   top distance in pixels.

package/docs/API-reference/components/search/x-components.banner.md

@@ -1,14 +1,15 @@
 ---
-id: x-components.x-components.banner
+
 title: Banner
-sidebar_label: Banner
+
 ---
-# banner
 
-> A banner result is just an item that has been inserted into the search results to advertise
-> something. Usually it is the first item in the grid or it can be placed in the middle of them
-> and fill the whole row where appears. It just contains a link to the banner content, an image
-> and a title.
+# Banner
+
+A banner result is just an item that has been inserted into the search results to advertise
+something. Usually it is the first item in the grid or it can be placed in the middle of them
+and fill the whole row where appears. It just contains a link to the banner content, an image
+and a title.
 
 ## Props
 
@@ -16,8 +17,6 @@ sidebar_label: Banner
 | ------------------- | ---------------- | ------------------------ | ------------- |
 | <code>banner</code> | The banner data. | <code>BannerModel</code> | <code></code> |
 
----
-
 ## Events
 
 This component doesn't emit events.

package/docs/API-reference/components/search/x-components.banners-list.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.banners-list
-title: Banners List
-sidebar_label: Banners List
+
+title: BannersList
+
 ---
-# banners-list
 
-> It renders a {@link ItemsList} list of banners from {@link SearchState.banners} by
-> default using the `ItemsInjectionMixin`.
+# BannersList
+
+It renders a {@link ItemsList} list of banners from {@link SearchState.banners} by
+default using the `ItemsInjectionMixin`.
 
 The component provides a default slot which wraps the whole component with the `banners`
 plus the `searchInjectedItems` which also contains the injected list items from
@@ -26,8 +27,6 @@ It also provides the parent slots to customize the items.
 | -------------------- | ------------------------------ | ----------------------------------------- |
 | <code>default</code> | Customized BannersList layout. | <br />                                    |
 
----
-
 ## Events
 
 This component doesn't emit events.

package/docs/API-reference/components/search/x-components.partial-query-button.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.partial-query-button
-title: Partial Query Button
-sidebar_label: Partial Query Button
+
+title: PartialQueryButton
+
 ---
-# partial-query-button
 
-> A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
-> and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user
-> intention to set the partial query.
+# PartialQueryButton
+
+A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
+and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user
+intention to set the partial query.
 
 ## Props
 
@@ -21,11 +22,9 @@ sidebar_label: Partial Query Button
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             |                                           |
 
----
-
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery} and {@link
 SearchXEvents.UserClickedPartialQuery} events, expressing the user intention to set the partial
@@ -40,7 +39,7 @@ The component sets the current query as the new query and emits the `UserAccepte
 </template>
 ```
 
-## Customizing its contents
+### Customizing its contents
 
 ```vue
 <template>

package/docs/API-reference/components/search/x-components.partial-results-list.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.partial-results-list
-title: Partial Results List
-sidebar_label: Partial Results List
+
+title: PartialResultsList
+
 ---
-# partial-results-list
 
-> It renders a list of partial results from {@link SearchState.partialResults} by default.
-> It also provides the partial result slot to customize the item with the partial result bound.
+# PartialResultsList
+
+It renders a list of partial results from {@link SearchState.partialResults} by default.
+It also provides the partial result slot to customize the item with the partial result bound.
 
 ## Props
 
@@ -21,13 +22,11 @@ sidebar_label: Partial Results List
 | -------------------- | --------------------------------------- | ------------------------------------------------------------ |
 | <code>default</code> | (Required) Partial results item content | **partialResult** <code>Partial</code> - Partial Result data |
 
----
-
-# Examples
+## Examples
 
 This component loops through an array of partials an exposed a slot to use customize each partial.
 
-## Basic example
+### Basic example
 
 It renders a list of partial results using the default slot:
 
@@ -41,7 +40,7 @@ It renders a list of partial results using the default slot:
 </template>
 ```
 
-## Configuring the number of partials
+### Configuring the number of partials
 
 It sets the maximum partials to show to 3.
 
@@ -55,7 +54,7 @@ It sets the maximum partials to show to 3.
 </template>
 ```
 
-## Rendering usage
+### Rendering usage
 
 It renders a list of partial results using the default slot. It will show the query, the partial
 results and a button to update the query with the partial one.

package/docs/API-reference/components/search/x-components.promoted.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.promoted
+
 title: Promoted
-sidebar_label: Promoted
+
 ---
-# promoted
 
-> A promoted result is just an item that has been inserted into the search results to advertise
-> something. Usually it is one of the first items in the grid, and has the same shape as a
-> result. It just contains a link to the promoted content, an image, and a title.
+# Promoted
+
+A promoted result is just an item that has been inserted into the search results to advertise
+something. Usually it is one of the first items in the grid, and has the same shape as a
+result. It just contains a link to the promoted content, an image, and a title.
 
 ## Props
 
@@ -15,8 +16,6 @@ sidebar_label: Promoted
 | --------------------- | ------------------ | -------------------------- | ------------- |
 | <code>promoted</code> | The promoted data. | <code>PromotedModel</code> | <code></code> |
 
----
-
 ## Events
 
 This component doesn't emit events.

package/docs/API-reference/components/search/x-components.promoteds-list.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.promoteds-list
-title: Promoteds List
-sidebar_label: Promoteds List
+
+title: PromotedsList
+
 ---
-# promoteds-list
 
-> It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds} by default
-> using the `ItemsInjectionMixin`.
+# PromotedsList
+
+It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds} by default
+using the `ItemsInjectionMixin`.
 
 The component provides a default slot which wraps the whole component with the `promoteds`
 plus the `searchInjectedItems` which also contains the injected list items from
@@ -26,8 +27,6 @@ It also provides the parent slots to customize the items.
 | -------------------- | --------------------------------- | ----------------------------------------- |
 | <code>default</code> | Customized Promoteds List layout. | <br />                                    |
 
----
-
 ## Events
 
 This component doesn't emit events.

package/docs/API-reference/components/search/x-components.redirection.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.redirection
+
 title: Redirection
-sidebar_label: Redirection
+
 ---
-# redirection
 
-> A redirection is a component that sends the user to a link in the website. It is helpful when
-> there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the
-> website will be more helpful than the set of results returned.
+# Redirection
+
+A redirection is a component that sends the user to a link in the website. It is helpful when
+there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the
+website will be more helpful than the set of results returned.
 
 ## Props
 
@@ -22,9 +23,7 @@ sidebar_label: Redirection
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | <br /><br /><br /><br />                  |
 
----
-
-### Play with the component
+## Play with the component
 
 In this example, a query has been searched in the search input resulting in a case where the
 response has a redirection.

package/docs/API-reference/components/search/x-components.results-list.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.results-list
-title: Results List
-sidebar_label: Results List
+
+title: ResultsList
+
 ---
-# results-list
 
-> It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
-> default.
+# ResultsList
+
+It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
+default.
 
 The component provides a default slot which wraps the whole component with the `results` bound.
 
@@ -25,8 +26,6 @@ the result bound.
 | -------------------- | ---------------------- | ----------------------------------------- |
 | <code>default</code> | Customize ResultsList. | <br />                                    |
 
----
-
 ## Events
 
 This component doesn't emit events.