@empathyco/x-components 3.0.0-alpha.31 → 3.0.0-alpha.35

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.

package/docs/API-reference/components/search/x-components.sort-dropdown.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.sort-dropdown
-title: Sort Dropdown
-sidebar_label: Sort Dropdown
+
+title: SortDropdown
+
 ---
-# sort-dropdown
 
-> The `SortDropdown` component allows user to select the search results order. This component
-> also allows to change the selected sort programmatically.
+# SortDropdown
+
+The `SortDropdown` component allows user to select the search results order. This component
+also allows to change the selected sort programmatically.
 
 ## Props
 
@@ -28,9 +29,7 @@ sidebar_label: Sort Dropdown
 | <code>toggle</code> | Used to render the contents of the dropdown toggle button. If not provided, it uses<br /> the item slot as fallback.                     | **isOpen** <code>boolean</code> - True if the dropdown is opened, and false if it is closed.<br />**item** <code>Sort</code> - The sort data to render.                                                |
 | <code>item</code>   | (required) Used to render each one of the items content, and as fallback<br /> for the toggle button content slot if it is not provided. | **item** <code>Sort</code> - Sort to render<br />**isHighlighted** <code>boolean</code> - True when the item has the focus.<br />**isSelected** <code>boolean</code> - True when the item is selected. |
 
----
-
-# Sort Dropdown
+## Sort Dropdown
 
 The `SortDropdown` component can be used to change the way the search results are ordered.
 

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

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.sort-list
-title: Sort List
-sidebar_label: Sort List
+
+title: SortList
+
 ---
-# sort-list
 
-> The `SortList` component allows user to select the search results order. This component
-> also allows to change the selected sort programmatically.
+# SortList
+
+The `SortList` component allows user to select the search results order. This component
+also allows to change the selected sort programmatically.
 
 ## Props
 
@@ -21,9 +22,7 @@ sidebar_label: Sort List
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | <br />                                    |
 
----
-
-# Sort List
+## Sort List
 
 The `SortList` component can be used to change the way the search results are ordered.
 

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

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.spellcheck-button
-title: Spellcheck Button
-sidebar_label: Spellcheck Button
+
+title: SpellcheckButton
+
 ---
-# spellcheck-button
 
-> A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
-> and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user
-> intention to set the spellchecked query.
+# SpellcheckButton
+
+A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
+and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user
+intention to set the spellchecked query.
 
 ## Slots
 
@@ -15,11 +16,9 @@ sidebar_label: Spellcheck Button
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             |                                           |
 
----
-
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 The component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`
 and `UserAcceptedSpellcheckQuery` events.
@@ -28,7 +27,7 @@ and `UserAcceptedSpellcheckQuery` events.
 <SpellcheckButton />
 ```
 
-## Customizing its contents
+### Customizing its contents
 
 ```vue
 <SpellcheckButton>

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

@@ -1,14 +1,15 @@
 ---
-id: x-components.x-components.spellcheck
+
 title: Spellcheck
-sidebar_label: Spellcheck
+
 ---
-# spellcheck
 
-> The `Spellcheck` component allows to inform the user with a friendly message that he
-> might have misspelled the search query. This message can be set using the default slot
-> of the component, which gives access to the searched query using the `query` scope property,
-> and the spellchecked query proposal, using the `spellcheckedQuery` scope property.
+# Spellcheck
+
+The `Spellcheck` component allows to inform the user with a friendly message that he
+might have misspelled the search query. This message can be set using the default slot
+of the component, which gives access to the searched query using the `query` scope property,
+and the spellchecked query proposal, using the `spellcheckedQuery` scope property.
 
 The component will only render itself if the `spellcheckedQuery` property has value.
 
@@ -18,22 +19,20 @@ The component will only render itself if the `spellcheckedQuery` property has va
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | <br />                                    |
 
----
-
-# Examples
+## Examples
 
 This default spellcheck component expects a query and a spellcheckedQuery to render and pass to its
 default slot.
 
 This two props should be show like a message comparing them.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <Spellcheck />
 ```
 
-## Customizing its contents
+### Customizing its contents
 
 ```vue
 <Spellcheck>

package/docs/API-reference/components/search-box/x-components.clear-search-input.md

@@ -1,11 +1,12 @@
 ---
-id: x-components.x-components.clear-search-input
-title: Clear Search Input
-sidebar_label: Clear Search Input
+
+title: ClearSearchInput
+
 ---
-# clear-search-input
 
-> This component renders a button to delete the current query.
+# ClearSearchInput
+
+This component renders a button to delete the current query.
 
 A button that when pressed emits the {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}
 and {@link SearchBoxXEvents.UserClearedQuery} events, expressing the user intention to clear
@@ -18,8 +19,6 @@ It also adds `x-clear-search-input--has-empty-query` as class when there is no q
 | -------------------- | ------------------------------------------------ | ----------------------------------------- |
 | <code>default</code> | _Required_. Button content (text, icon, or both) | None                                      |
 
----
-
 ## Events
 
 This component emits the following events: