@empathyco/x-components 3.0.0-alpha.385 → 3.0.0-alpha.386

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.386](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.385...@empathyco/x-components@3.0.0-alpha.386) (2023-06-12)
+
+
+### Features
+
+* **queries-preview:** add loaded previews getter (#1227) ([ab59fa2](https://github.com/empathyco/x/commit/ab59fa2c31440e1b47108cc5c334fe0cfaafad27))
+* **semantic-queries:** add SemanticQuery component (#1226) ([09ed3b4](https://github.com/empathyco/x/commit/09ed3b4ad9c01cc116d29a1b618c6dae48e14829))
+
+
+
 ## [3.0.0-alpha.385](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.384...@empathyco/x-components@3.0.0-alpha.385) (2023-06-09)
 
 

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/deprecated-full-theme.css

@@ -1,4 +1,5 @@
 
+
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -7351,11 +7352,6 @@
   --x-string-stroke-linejoin-icon-default: mitter;
   --x-size-stroke-width-icon-default: 1px;
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7391,6 +7387,11 @@
   --x-size-gap-grid: var(--x-size-base-03);
   --x-size-min-width-grid-item: 150px;
 }
+:root {
+  --x-size-padding-grid: 0;
+  --x-size-gap-grid: var(--x-size-base-03);
+  --x-size-min-width-grid-item: 150px;
+}
 
 .x-grid-list {
   margin: 0;
@@ -7489,38 +7490,6 @@
   );
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
-:root {
-  --x-color-background-filter-default: transparent;
-  --x-color-border-filter-default: var(--x-color-background-filter-default);
-  --x-color-text-filter-default: var(--x-color-text-default);
-  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
-  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
-  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
-  --x-size-border-width-filter-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-padding-top-filter-default: var(--x-size-base-03);
-  --x-size-padding-right-filter-default: 0;
-  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
-  --x-size-padding-left-filter-default: 0;
-  --x-size-gap-filter-default: var(--x-size-base-03);
-  --x-font-family-filter-default: var(--x-font-family-text);
-  --x-size-font-filter-default: var(--x-size-font-text);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
-  --x-number-font-weight-filter-count-default-selected: var(
-    --x-number-font-weight-filter-count-default
-  );
-  --x-size-line-height-filter-default: var(--x-size-line-height-text);
-}
 
 [dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
   padding-left: var(--x-size-padding-left-filter-default);
@@ -8841,3 +8810,35 @@
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
 }
+:root {
+  --x-color-background-filter-default: transparent;
+  --x-color-border-filter-default: var(--x-color-background-filter-default);
+  --x-color-text-filter-default: var(--x-color-text-default);
+  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
+  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
+  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
+  --x-size-border-width-filter-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-padding-top-filter-default: var(--x-size-base-03);
+  --x-size-padding-right-filter-default: 0;
+  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
+  --x-size-padding-left-filter-default: 0;
+  --x-size-gap-filter-default: var(--x-size-base-03);
+  --x-font-family-filter-default: var(--x-font-family-text);
+  --x-size-font-filter-default: var(--x-size-font-text);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-filter-count-default
+  );
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+}

package/docs/API-reference/api/x-components.basecurrency.md

@@ -36,8 +36,6 @@ _default: import("vue").DefineComponent<{
 
 The number of 'd', which is the maximum decimal length, MUST matches with the length of decimals provided from the adapter. Otherwise, when the component truncate the decimal part, it deletes significant digits.
 
-## Example
-
 Basic example:
 
 ```vue

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

@@ -112,6 +112,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [SelectedFilters](./x-components.selectedfilters.md) | <p>Provides a scoped slot with the selected filters from every facet, or from the facet which facet id is passed as property.</p><p>The default slot renders the length of the selected filters array. The property "alwaysVisible" handles if the component is rendered if no filters are selected.</p> |
 |  [SelectedFiltersList](./x-components.selectedfilterslist.md) | <p>This component renders a list of selected filters from every facet, or from the facet ids passed as property. It uses the SelectedFilters component (state).</p><p>It provides two slots: a scoped one which name is the filter facet id; and a default one. Both exposes the filter and renders the filter label by default.</p><p>The property "alwaysVisible" handles if the component is rendered if no filters are selected.</p> |
 |  [SemanticQueries](./x-components.semanticqueries.md) | Retrieves a list of semantic queries from the state and exposes them in the slots. |
+|  [SemanticQuery](./x-components.semanticquery.md) | This component renders a semantic query. A semantic query is a recommended query that is similar in its meaning to another one. It contains the query and the distance, which indicates how similar the query is compared to the searched query. |
 |  [SimpleFilter](./x-components.simplefilter.md) | Renders a simple filter, emitting the needed events when clicked. |
 |  [SingleColumnLayout](./x-components.singlecolumnlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
 |  [SlicedFilters](./x-components.slicedfilters.md) | Component that slices a list of filters and returns them using the default scoped slot, allowing the user to show the full list of them or slicing them again using the show more/less buttons. |

package/docs/API-reference/api/x-components.queriespreviewgetters.loadedqueriespreview.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueriesPreviewGetters](./x-components.queriespreviewgetters.md) &gt; [loadedQueriesPreview](./x-components.queriespreviewgetters.loadedqueriespreview.md)
+
+## QueriesPreviewGetters.loadedQueriesPreview property
+
+The loaded previews from the state.
+
+**Signature:**
+
+```typescript
+loadedQueriesPreview: Dictionary<QueryPreviewItem>;
+```

package/docs/API-reference/api/x-components.queriespreviewgetters.md

@@ -11,3 +11,10 @@ QueriesPreview store getters.
 ```typescript
 export interface QueriesPreviewGetters 
 ```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [loadedQueriesPreview](./x-components.queriespreviewgetters.loadedqueriespreview.md) |  | Dictionary&lt;[QueryPreviewItem](./x-components.querypreviewitem.md)<!-- -->&gt; | The loaded previews from the state. |
+

package/docs/API-reference/api/x-components.queryfeature.md

@@ -9,5 +9,5 @@ The name of the tool that generated the query.
 **Signature:**
 
 ```typescript
-export type QueryFeature = 'search_box' | 'url' | 'query_suggestion' | 'next_query' | 'popular_search' | 'history_query' | 'partial_result' | 'related_tag' | 'spellcheck' | 'customer';
+export type QueryFeature = 'search_box' | 'url' | 'query_suggestion' | 'next_query' | 'popular_search' | 'history_query' | 'partial_result' | 'related_tag' | 'spellcheck' | 'customer' | 'semantics';
 ```

package/docs/API-reference/api/x-components.semanticqueries.findsemanticquery.md

@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SemanticQueries](./x-components.semanticqueries.md) &gt; [findSemanticQuery](./x-components.semanticqueries.findsemanticquery.md)
+
+## SemanticQueries.findSemanticQuery() method
+
+Finds a [SemanticQuery](./x-types.semanticquery.md) given a query.
+
+**Signature:**
+
+```typescript
+findSemanticQuery(query: string): SemanticQueryModel | undefined;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  query | string | The query to search. |
+
+**Returns:**
+
+SemanticQueryModel \| undefined
+
+The [SemanticQuery](./x-types.semanticquery.md) or undefined if not found.
+

package/docs/API-reference/api/x-components.semanticqueries.md

@@ -13,3 +13,15 @@ export default class SemanticQueries extends Vue
 ```
 **Extends:** Vue
 
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [suggestions](./x-components.semanticqueries.suggestions.md) |  | SemanticQueryModel\[\] | The semantic queries from the state. |
+
+## Methods
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [findSemanticQuery(query)](./x-components.semanticqueries.findsemanticquery.md) |  | Finds a [SemanticQuery](./x-types.semanticquery.md) given a query. |
+

package/docs/API-reference/api/x-components.semanticqueries.suggestions.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SemanticQueries](./x-components.semanticqueries.md) &gt; [suggestions](./x-components.semanticqueries.suggestions.md)
+
+## SemanticQueries.suggestions property
+
+The semantic queries from the state.
+
+**Signature:**
+
+```typescript
+suggestions: SemanticQueryModel[];
+```

package/docs/API-reference/api/x-components.semanticqueriesgetters.md

@@ -16,5 +16,6 @@ export interface SemanticQueriesGetters
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [normalizedQuery](./x-components.semanticqueriesgetters.normalizedquery.md) |  | string | The normalized module's query. |
 |  [request](./x-components.semanticqueriesgetters.request.md) |  | SemanticQueriesRequest \| null | The request to fetch the semantic queries. |
 

package/docs/API-reference/api/x-components.semanticqueriesgetters.normalizedquery.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SemanticQueriesGetters](./x-components.semanticqueriesgetters.md) &gt; [normalizedQuery](./x-components.semanticqueriesgetters.normalizedquery.md)
+
+## SemanticQueriesGetters.normalizedQuery property
+
+The normalized module's query.
+
+**Signature:**
+
+```typescript
+normalizedQuery: string;
+```

package/docs/API-reference/api/x-components.semanticqueriesxevents.md

@@ -17,4 +17,5 @@ export interface SemanticQueriesXEvents
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [SemanticQueryRequestUpdated](./x-components.semanticqueriesxevents.semanticqueryrequestupdated.md) |  | SemanticQueriesRequest \| null | Any property of the semantic queries request has changed. Payload: The new [request](./x-types.semanticqueriesrequest.md)<!-- -->. |
+|  [UserSelectedASemanticQuery](./x-components.semanticqueriesxevents.userselectedasemanticquery.md) |  | SemanticQuery | The user has selected a semantic query. Payload: The [semantic query](./x-components.semanticquery.md) selected. |
 

package/docs/API-reference/api/x-components.semanticqueriesxevents.userselectedasemanticquery.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SemanticQueriesXEvents](./x-components.semanticqueriesxevents.md) &gt; [UserSelectedASemanticQuery](./x-components.semanticqueriesxevents.userselectedasemanticquery.md)
+
+## SemanticQueriesXEvents.UserSelectedASemanticQuery property
+
+The user has selected a semantic query. Payload: The [semantic query](./x-components.semanticquery.md) selected.
+
+**Signature:**
+
+```typescript
+UserSelectedASemanticQuery: SemanticQuery;
+```

package/docs/API-reference/api/x-components.semanticquery.md

@@ -0,0 +1,22 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SemanticQuery](./x-components.semanticquery.md)
+
+## SemanticQuery class
+
+This component renders a semantic query. A semantic query is a recommended query that is similar in its meaning to another one. It contains the query and the distance, which indicates how similar the query is compared to the searched query.
+
+**Signature:**
+
+```typescript
+export default class SemanticQuery extends Vue 
+```
+**Extends:** Vue
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [query](./x-components.semanticquery.query.md) |  | string | The normalized query of the semantic queries module. |
+|  [suggestion](./x-components.semanticquery.suggestion.md) |  | SemanticQueryModel | The [SemanticQuery](./x-types.semanticquery.md) to render. |
+

package/docs/API-reference/api/x-components.semanticquery.query.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SemanticQuery](./x-components.semanticquery.md) &gt; [query](./x-components.semanticquery.query.md)
+
+## SemanticQuery.query property
+
+The normalized query of the semantic queries module.
+
+**Signature:**
+
+```typescript
+query: string;
+```

package/docs/API-reference/api/x-components.semanticquery.suggestion.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SemanticQuery](./x-components.semanticquery.md) &gt; [suggestion](./x-components.semanticquery.suggestion.md)
+
+## SemanticQuery.suggestion property
+
+The [SemanticQuery](./x-types.semanticquery.md) to render.
+
+**Signature:**
+
+```typescript
+suggestion: SemanticQueryModel;
+```

package/docs/API-reference/components/common/animations/x-components.animate-width.md

@@ -0,0 +1,65 @@
+---
+
+title: AnimateWidth
+
+---
+
+# AnimateWidth
+
+Renders a transition wrapping an element passed in the default slot and animating its width.
+
+## Slots
+
+| Name                 | Description                   | Bindings<br />(name - type - description) |
+| -------------------- | ----------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) Transition content | None                                      |
+
+## Examples
+
+The AnimateWidth component is intended to be used as a prop in animatable components but also works
+as a transition to animate the width of an element.
+
+Used as a prop in an animatable component:
+
+```vue
+<template>
+  <AnimatableComponent :animation="AnimateWidth" />
+</template>
+
+<script>
+  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';
+
+  export default {
+    data() {
+      return {
+        AnimateWidth
+      };
+    }
+  };
+</script>
+```
+
+Used as a regular Transition:
+
+```vue
+<template>
+  <div>
+    <button @click="visible = !visible">Toggle</button>
+    <AnimateWidth>
+      <div v-if="visible" style="width: 300px">Element to animate</div>
+    </AnimateWidth>
+  </div>
+</template>
+
+<script>
+  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';
+
+  export default {
+    data() {
+      return {
+        visible: true
+      };
+    }
+  };
+</script>
+```

package/docs/API-reference/components/common/animations/x-components.collapse-height.md

@@ -0,0 +1,36 @@
+---
+
+title: CollapseHeight
+
+---
+
+# CollapseHeight
+
+Renders a transition wrapping the element passed in the default slot and animating it with a height
+animation.
+
+## Props
+
+| Name                | Description                                                                    | Type                 | Default           |
+| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
+| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |
+
+## Slots
+
+| Name                 | Description                                 | Bindings<br />(name - type - description) |
+| -------------------- | ------------------------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) to add content to the transition | None                                      |
+
+## Examples
+
+The CollapseHeight component is intended to be used as animation to wrap an element with v-if or
+v-show and animate it. The animation consists on scale its height size from 0 to auto. This
+transition does not work with components that have vertical margin, padding or border.
+
+Used wrapping a component:
+
+```vue
+<CollapseHeight>
+  <ComponentOrElement v-if="open"/>
+</CollapseHeight>
+```

package/docs/API-reference/components/common/animations/x-components.collapse-width.md

@@ -0,0 +1,37 @@
+---
+
+title: CollapseWidth
+
+---
+
+# CollapseWidth
+
+Renders a transition wrapping the element passed in the default slot and animating it with a width
+animation.
+
+## Props
+
+| Name                | Description                                                                    | Type                 | Default           |
+| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
+| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |
+
+## Slots
+
+| Name                 | Description                                 | Bindings<br />(name - type - description) |
+| -------------------- | ------------------------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) to add content to the transition | None                                      |
+
+## Examples
+
+The CollapseWidth component is intended to be used as animation to wrap an element with v-if or
+v-show and animate it. The animation consists on scale its width size from 0 to auto. This
+transition does not work with components that have horizontal margin, padding or border. It also is
+dependant of the width of the child elements and not the root element.
+
+Used wrapping a component:
+
+```vue
+<CollapseWidth>
+  <ComponentOrElement v-if="open"/>
+</CollapseWidth>
+```

package/docs/API-reference/components/common/animations/x-components.cross-fade.md

@@ -0,0 +1,35 @@
+---
+
+title: CrossFade
+
+---
+
+# CrossFade
+
+Renders a transition wrapping the element passed in the default slot. The transition fades between
+the two toggled elements at the same time.
+
+## Props
+
+| Name                | Description                                                                    | Type                 | Default           |
+| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
+| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |
+
+## Slots
+
+| Name                 | Description                                 | Bindings<br />(name - type - description) |
+| -------------------- | ------------------------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) to add content to the transition | None                                      |
+
+## Example
+
+The `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show
+and animate it. The animation fades the new element into the previous one.
+
+Wrapping a component:
+
+```vue
+<CrossFade>
+  <ComponentOrElement v-if="open"/>
+</CrossFade>
+```

package/docs/API-reference/components/common/animations/x-components.fade-and-slide.md

@@ -0,0 +1,44 @@
+---
+
+title: FadeAndSlide
+
+---
+
+# FadeAndSlide
+
+Renders a transition group wrapping the elements passed in the default slot and animating them with
+a fade and slide animation.
+
+## Props
+
+| Name                | Description                                                                    | Type                 | Default           |
+| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
+| <code>tag</code>    | HTML Element that the transition-group children will be wrapped in.            | <code>string</code>  | <code></code>     |
+| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |
+
+## Slots
+
+| Name                 | Description                         | Bindings<br />(name - type - description) |
+| -------------------- | ----------------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) Transition-group content | None                                      |
+
+## Examples
+
+The FadeAndSlide component is intended to be used as a prop in animatable components but also works
+as a wrapper of a transition group that can receive the tag it will render to as a prop.
+
+Used as a prop in an animatable component:
+
+```vue
+<AnimatableComponent :animation="FadeAndSlide" />
+```
+
+Used as a regular component passing a the tag as prop:
+
+```vue
+<FadeAndSlide tag="ul">
+  <li>Element to animate</li>
+  <li>Element to animate</li>
+  <li>Element to animate</li>
+</FadeAndSlide>
+```

package/docs/API-reference/components/common/animations/x-components.fade.md

@@ -0,0 +1,54 @@
+---
+
+title: Fade
+
+---
+
+# Fade
+
+Renders a transition wrapping the element passed in the default slot. The animation just fades
+in/out the element by changing its opacity.
+
+## Props
+
+| Name                | Description                                                                    | Type                 | Default           |
+| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
+| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |
+
+## Slots
+
+| Name                 | Description                                 | Bindings<br />(name - type - description) |
+| -------------------- | ------------------------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) to add content to the transition | None                                      |
+
+## Example
+
+The `Fade` component is intended to be used as animation to wrap an element with v-if or v-show and
+animate it. The animation just fades in/out the element by changing its opacity.
+
+Wrapping a component:
+
+```vue live
+<template>
+  <div>
+    <button @click="shouldRender = !shouldRender">Toggle</button>
+    <Fade>
+      <p v-if="shouldRender">León is southern Spain</p>
+    </Fade>
+  </div>
+</template>
+<script>
+  import { Fade } from '@empathyco/x-components';
+  export default {
+    name: 'FadeAnimationDemo',
+    components: {
+      Fade
+    },
+    data() {
+      return {
+        shouldRender: false
+      };
+    }
+  };
+</script>
+```

package/docs/API-reference/components/common/animations/x-components.staggered-fade-and-slide.md

@@ -0,0 +1,46 @@
+---
+
+title: StaggeredFadeAndSlide
+
+---
+
+# StaggeredFadeAndSlide
+
+Renders a transition group wrapping the elements passed in the default slot and animating them with
+an staggered fade and slide animation.
+
+## Props
+
+| Name                | Description                                                                    | Type                 | Default           |
+| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
+| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |
+
+## Slots
+
+| Name                 | Description                         | Bindings<br />(name - type - description) |
+| -------------------- | ----------------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) Transition-group content | None                                      |
+
+The Staggered fade and slide components works as the normal fade and slide components, but it also
+adds a configurable delay to each transition.
+
+## Example
+
+### Used with animatable components
+
+```vue
+<AnimatableComponent :animation="StaggeredFadeAndSlide" />
+```
+
+### Used as a regular component:
+
+This components exposes all the props and events of the Staggering transition group, like the `tag`
+or the `stagger` props:
+
+```vue
+<StaggeredFadeAndSlide tag="ul" :stagger="50">
+  <li>Element to animate</li>
+  <li>Element to animate</li>
+  <li>Element to animate</li>
+</StaggeredFadeAndSlide>
+```