@empathyco/x-components 3.0.0-alpha.158 → 3.0.0-alpha.160

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 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.160](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.159...@empathyco/x-components@3.0.0-alpha.160) (2022-08-25)
+
+### Features
+
+- **components:** merge a variant with the result (#667)
+  ([553d0e5](https://github.com/empathyco/x/commit/553d0e5de8ef5468eb673246f39fbeb826301fa1)),
+  closes [EX-6762](https://searchbroker.atlassian.net/browse/EX-6762)
+
+# Change Log
+
+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.159](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.158...@empathyco/x-components@3.0.0-alpha.159) (2022-08-24)
+
+### Documentation
+
+- update functional docs callout formatting (#671)
+  ([5f1de74](https://github.com/empathyco/x/commit/5f1de74c2e86adb638d692781483cac1ccf70a71))
+
+# Change Log
+
+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.158](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.156...@empathyco/x-components@3.0.0-alpha.158) (2022-08-24)
 
 ### Features

package/core/index.js

@@ -98,6 +98,8 @@ export { default as BaseResultPreviousPrice } from '../js/components/result/base
 export { default as BaseFallbackImage } from '../js/components/result/base-result-fallback-image.vue.js';
 export { default as BasePlaceholderImage } from '../js/components/result/base-result-placeholder-image.vue.js';
 export { default as BaseResultRating } from '../js/components/result/base-result-rating.vue.js';
+export { default as ResultVariantsProvider } from '../js/components/result/result-variants-provider.vue.js';
+export { default as ResultVariantSelector } from '../js/components/result/result-variant-selector.vue.js';
 export { default as BaseScroll } from '../js/components/scroll/base-scroll.vue.js';
 export { default as ScrollMixin } from '../js/components/scroll/scroll.mixin.js';
 export { default as BaseSuggestion } from '../js/components/suggestions/base-suggestion.vue.js';
@@ -118,7 +120,7 @@ export { default as SlidingPanel } from '../js/components/sliding-panel.vue.js';
 export { default as SnippetCallbacks } from '../js/components/snippet-callbacks.vue.js';
 export { XEmit, XOn } from '../js/components/decorators/bus.decorators.js';
 export { Debounce } from '../js/components/decorators/debounce.decorators.js';
-export { LIST_ITEMS_KEY, QUERY_KEY } from '../js/components/decorators/injection.consts.js';
+export { LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from '../js/components/decorators/injection.consts.js';
 export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
 export { Getter, State } from '../js/components/decorators/store.decorators.js';
 export { ItemsListInjectionMixin } from '../js/components/items-list-injection.mixin.js';

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/full-theme.css

@@ -303,16 +303,6 @@
   --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
   --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
 }
-.x-button--tertiary.x-button,
-.x-button--tertiary .x-button {
-  --x-color-background-button-default: var(--x-color-background-button-tertiary);
-  --x-color-border-button-default: var(--x-color-border-button-tertiary);
-  --x-color-text-button-default: var(--x-color-text-button-tertiary);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
-}
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
   --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -323,6 +313,16 @@
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
 }
+.x-button--tertiary.x-button,
+.x-button--tertiary .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-tertiary);
+  --x-color-border-button-default: var(--x-color-border-button-tertiary);
+  --x-color-text-button-default: var(--x-color-text-button-tertiary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
+}
 .x-dropdown--card {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);

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

@@ -115,6 +115,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [RenderlessExtraParams](./x-components.renderlessextraparams.md) | It emits a [ExtraParamsXEvents.UserChangedExtraParams](./x-components.extraparamsxevents.userchangedextraparams.md) when the <code>updateValue</code> is called. |
 |  [RenderlessFilter](./x-components.renderlessfilter.md) | Renders default slot content. It binds to the default slot a [BooleanFilter](./x-types.booleanfilter.md)<!-- -->, the [XEvents](./x-components.xevent.md) that will be emitted when clicking the content, the css classes and if the content should be disabled. |
 |  [ResultsList](./x-components.resultslist.md) | It renders a [ItemsList](./x-components.itemslist.md) list with the results from [SearchState.results](./x-components.searchstate.results.md) by default.<!-- -->The component provides a default slot which wraps the whole component with the <code>results</code> bound.<!-- -->It also provides the slot result to customize the item, which is within the default slot, with the result bound. |
+|  [ResultVariantSelector](./x-components.resultvariantselector.md) | Component to show and select the available variants of a product for a given nest level. TODO: Add logger warning on mount when result is not injected. |
+|  [ResultVariantsProvider](./x-components.resultvariantsprovider.md) | Component that exposes the result merged with its selected variant in the default slot.<!-- -->It receives the original result and keeps track of the selected variant.<!-- -->It provides the original result, the array containing the selected variants and a callback to set the selected variant to be used from a child. |
 |  [Scroll](./x-components.scroll.md) | Scrollable container that emits scroll related X Events. It exposes all the listeners and props from the [BaseScroll](./x-components.basescroll.md) component. |
 |  [ScrollMixin](./x-components.scrollmixin.md) | Mixin to share Scroll logic. |
 |  [ScrollToTop](./x-components.scrolltotop.md) | The <code>ScrollToTop</code> component is a button that the user can click to make a container scroll up to its initial position. |

package/docs/API-reference/api/x-components.resultvariantselector.level.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; [ResultVariantSelector](./x-components.resultvariantselector.md) &gt; [level](./x-components.resultvariantselector.level.md)
+
+## ResultVariantSelector.level property
+
+The nest level of the variants to be rendered.
+
+<b>Signature:</b>
+
+```typescript
+level: number;
+```

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

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [ResultVariantSelector](./x-components.resultvariantselector.md)
+
+## ResultVariantSelector class
+
+Component to show and select the available variants of a product for a given nest level. TODO: Add logger warning on mount when result is not injected.
+
+<b>Signature:</b>
+
+```typescript
+export default class ResultVariantSelector extends Vue 
+```
+<b>Extends:</b> Vue
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [level](./x-components.resultvariantselector.level.md) |  | number | The nest level of the variants to be rendered. |
+|  [result](./x-components.resultvariantselector.result.md) |  | Result | The original result, used to retrieve the available variants for the level. |
+|  [selectedVariants](./x-components.resultvariantselector.selectedvariants.md) |  | ResultVariant\[\] | Array containing the selected variants. |
+|  [selectResultVariant](./x-components.resultvariantselector.selectresultvariant.md) |  | (variant: ResultVariant, level?: number) =&gt; void | Callback to be called when a variant is selected. |
+

package/docs/API-reference/api/x-components.resultvariantselector.result.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; [ResultVariantSelector](./x-components.resultvariantselector.md) &gt; [result](./x-components.resultvariantselector.result.md)
+
+## ResultVariantSelector.result property
+
+The original result, used to retrieve the available variants for the level.
+
+<b>Signature:</b>
+
+```typescript
+result: Result;
+```

package/docs/API-reference/api/x-components.resultvariantselector.selectedvariants.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; [ResultVariantSelector](./x-components.resultvariantselector.md) &gt; [selectedVariants](./x-components.resultvariantselector.selectedvariants.md)
+
+## ResultVariantSelector.selectedVariants property
+
+Array containing the selected variants.
+
+<b>Signature:</b>
+
+```typescript
+selectedVariants: ResultVariant[];
+```

package/docs/API-reference/api/x-components.resultvariantselector.selectresultvariant.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; [ResultVariantSelector](./x-components.resultvariantselector.md) &gt; [selectResultVariant](./x-components.resultvariantselector.selectresultvariant.md)
+
+## ResultVariantSelector.selectResultVariant property
+
+Callback to be called when a variant is selected.
+
+<b>Signature:</b>
+
+```typescript
+selectResultVariant: (variant: ResultVariant, level?: number) => void;
+```

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

@@ -0,0 +1,34 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [ResultVariantsProvider](./x-components.resultvariantsprovider.md)
+
+## ResultVariantsProvider class
+
+Component that exposes the result merged with its selected variant in the default slot.
+
+It receives the original result and keeps track of the selected variant.
+
+It provides the original result, the array containing the selected variants and a callback to set the selected variant to be used from a child.
+
+<b>Signature:</b>
+
+```typescript
+export default class ResultVariantsProvider extends Vue 
+```
+<b>Extends:</b> Vue
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [result](./x-components.resultvariantsprovider.result.md) |  | Result | The original result containing the variants. |
+|  [resultToProvide](./x-components.resultvariantsprovider.resulttoprovide.md) |  | Result | Merges the original result with the selected variant. The merge is done with all the selected variants of the array. |
+|  [selectedVariants](./x-components.resultvariantsprovider.selectedvariants.md) |  | ResultVariant\[\] | Array to keep track of the selected variants of the result. Each position of the array is a nest level in the variants' hierarchy, so, the second position will contain a variant that is present inside the variant of the first position, and so on. |
+
+## Methods
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [render(createElement)](./x-components.resultvariantsprovider.render.md) |  | Render function of the provider. It exposes the result with the selected variant merged. |
+|  [selectResultVariant(variant, level)](./x-components.resultvariantsprovider.selectresultvariant.md) |  | Selects a variant of the result. When called, it slices the array of selected variants to remove the selected child variants. Emits the [XEventsTypes.UserSelectedAResultVariant](./x-components.xeventstypes.userselectedaresultvariant.md) when called. |
+

package/docs/API-reference/api/x-components.resultvariantsprovider.render.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [render](./x-components.resultvariantsprovider.render.md)
+
+## ResultVariantsProvider.render() method
+
+Render function of the provider. It exposes the result with the selected variant merged.
+
+<b>Signature:</b>
+
+```typescript
+render(createElement: CreateElement): VNode;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  createElement | CreateElement | Vue createElement method. |
+
+<b>Returns:</b>
+
+VNode
+
+- The VNode of the first element passed in the slot.
+

package/docs/API-reference/api/x-components.resultvariantsprovider.result.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [result](./x-components.resultvariantsprovider.result.md)
+
+## ResultVariantsProvider.result property
+
+The original result containing the variants.
+
+<b>Signature:</b>
+
+```typescript
+result: Result;
+```

package/docs/API-reference/api/x-components.resultvariantsprovider.resulttoprovide.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [resultToProvide](./x-components.resultvariantsprovider.resulttoprovide.md)
+
+## ResultVariantsProvider.resultToProvide property
+
+Merges the original result with the selected variant. The merge is done with all the selected variants of the array.
+
+<b>Signature:</b>
+
+```typescript
+get resultToProvide(): Result;
+```

package/docs/API-reference/api/x-components.resultvariantsprovider.selectedvariants.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [selectedVariants](./x-components.resultvariantsprovider.selectedvariants.md)
+
+## ResultVariantsProvider.selectedVariants property
+
+Array to keep track of the selected variants of the result. Each position of the array is a nest level in the variants' hierarchy, so, the second position will contain a variant that is present inside the variant of the first position, and so on.
+
+<b>Signature:</b>
+
+```typescript
+selectedVariants: ResultVariant[];
+```

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

@@ -0,0 +1,25 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [selectResultVariant](./x-components.resultvariantsprovider.selectresultvariant.md)
+
+## ResultVariantsProvider.selectResultVariant() method
+
+Selects a variant of the result. When called, it slices the array of selected variants to remove the selected child variants. Emits the [XEventsTypes.UserSelectedAResultVariant](./x-components.xeventstypes.userselectedaresultvariant.md) when called.
+
+<b>Signature:</b>
+
+```typescript
+selectResultVariant(variant: ResultVariant, level?: number): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  variant | ResultVariant | The variant to set. |
+|  level | number | The nest level where the variant is placed inside the result. |
+
+<b>Returns:</b>
+
+void
+

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

@@ -45,5 +45,6 @@ Aside from common [XEvents](./x-components.xevent.md)<!-- -->, this interface al
 |  [UserOpenXProgrammatically](./x-components.xeventstypes.useropenxprogrammatically.md) | void | The user opened X programmatically. Payload: none. |
 |  [UserPressedArrowKey](./x-components.xeventstypes.userpressedarrowkey.md) | [ArrowKey](./x-components.arrowkey.md) | The user pressed an [arrow key](./x-components.arrowkey.md) with the focus on the search-box. Payload: the pressed [arrow key](./x-components.arrowkey.md)<!-- -->. |
 |  [UserReachedEmpathizeTop](./x-components.xeventstypes.userreachedempathizetop.md) | void | The user has reached the top of the empathize and keeps navigating in that direction. Payload: none. |
+|  [UserSelectedAResultVariant](./x-components.xeventstypes.userselectedaresultvariant.md) | { result: Result; variant: ResultVariant; level: number; } | The user selected a result variant. Payload: And object containing the result, the selected variant and the level of the selected variant. |
 |  [UserSelectedASuggestion](./x-components.xeventstypes.userselectedasuggestion.md) | Suggestion | User selected any kind of suggestion (query-suggestion, popular-search...) Payload: The [suggestion](./x-types.suggestion.md) that the user selected. |
 

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

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XEventsTypes](./x-components.xeventstypes.md) &gt; [UserSelectedAResultVariant](./x-components.xeventstypes.userselectedaresultvariant.md)
+
+## XEventsTypes.UserSelectedAResultVariant property
+
+The user selected a result variant. Payload: And object containing the result, the selected variant and the level of the selected variant.
+
+<b>Signature:</b>
+
+```typescript
+UserSelectedAResultVariant: {
+        result: Result;
+        variant: ResultVariant;
+        level: number;
+    };
+```

package/docs/API-reference/components/common/result/x-components.result-variant-selector.md

@@ -0,0 +1,300 @@
+---
+
+title: ResultVariantSelector
+
+---
+
+# ResultVariantSelector
+
+Component to show and select the available variants of a product for a given nest level.
+TODO: Add logger warning on mount when result is not injected.
+
+## Props
+
+| Name               | Description                                    | Type                | Default        |
+| ------------------ | ---------------------------------------------- | ------------------- | -------------- |
+| <code>level</code> | The nest level of the variants to be rendered. | <code>number</code> | <code>0</code> |
+
+## Slots
+
+| Name                         | Description     | Bindings<br />(name - type - description)                                                                                                                                                                                                                                       |
+| ---------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>default</code>         | Variants list   | **variants** <code>ResultVariant[]</code> - Array containing the available variants<br />**selectedVariant** <code>ResultVariant \| undefined</code> - The selected variant<br />**selectVariant** <code>(variant: ResultVariant) => void</code> - Callback to select a variant |
+| <code>variant</code>         | Variant item    | **variant** <code>ResultVariant</code> - The variant item<br />**isSelected** <code>boolean</code> - Indicates if the variant is selected<br />**selectVariant** <code>() => void</code> - Callback to select the variant                                                       |
+| <code>variant-content</code> | Variant content | **variant** <code>ResultVariant</code> - The variant item<br />**isSelected** <code>boolean</code> - Indicates if the variant is selected                                                                                                                                       |
+
+## Events
+
+This component doesn't emit events.
+
+## See it in action
+
+Here you have a basic example of how the `ResultVariantSelector` component is rendered.
+
+Take into account that this component **must** be a child of a `ResultVariantsProvider` component.
+
+Also, the component is intended to be used overwriting the content with the slots.
+
+By default it will render a list of buttons containing the available variants.
+
+This component only has a required `level` prop, that indicates the level of the variants to be
+rendered.
+
+```vue
+<template>
+  <ResultVariantsProvider :result="result" #default="{ result }">
+    <p>Result name: {{ result.name }}</p>
+
+    <h1>Select color</h1>
+    <ResultVariantSelector :level="0" #variant="{ variant, selectVariant }" />
+
+    <h1>Select size</h1>
+    <ResultVariantSelector :level="1" #variant="{ variant, selectVariant }" />
+  </ResultVariantsProvider>
+</template>
+
+<script>
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector
+} from "@empathyco/x-components";
+
+export default {
+  name: "ResultVariantSelectorDemo",
+  components: {
+    ResultVariantsProvider,
+    ResultVariantSelector
+  },
+  data() {
+    return {
+      result: {
+        id: "jacket",
+        modelName: "Result",
+        type: "Product",
+        isWishlisted: false,
+        identifier: { value: "jacket" },
+        images: [],
+        name: "jacket",
+        price: { hasDiscount: false, originalValue: 10, value: 10 },
+        url: "/products/jacket",
+        variants: [
+          {
+            name: "red",
+            variants: [
+              {
+                name: "red XL"
+              },
+              {
+                name: "red L"
+              }
+            ]
+          },
+          {
+            name: "blue",
+            variants: [
+              {
+                name: "blue S"
+              },
+              {
+                name: "blue M"
+              },
+              {
+                name: "blue L"
+              }
+            ]
+          }
+        ]
+      }
+    };
+  }
+};
+</script>
+```
+
+### Play with the default slot
+
+In this example the default slot is used to customize the list.
+
+```vue
+<template>
+  <ResultVariantsProvider :result="result" #default="{ result }">
+    <p>Result name: {{ result.name }}</p>
+
+    <ResultVariantSelector
+      :level="0"
+      #default="{ variants, selectedVariant, selectVariant }"
+    >
+      <div>
+        <p v-if="selectedVariant">
+          Selected variant: {{ selectedVariant.name }}
+        </p>
+        <ul class="x-list x-list--horizontal">
+          <li v-for="(variant, index) in variants" :key="index">
+            <button @click="selectVariant(variant)">{{ variant.name }}</button>
+          </li>
+        </ul>
+      </div>
+    </ResultVariantSelector>
+  </ResultVariantsProvider>
+</template>
+
+<script>
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector
+} from "@empathyco/x-components";
+
+export default {
+  name: "ResultVariantSelectorDemo",
+  components: {
+    ResultVariantsProvider,
+    ResultVariantSelector
+  },
+  data() {
+    return {
+      result: {
+        id: "jacket",
+        modelName: "Result",
+        type: "Product",
+        isWishlisted: false,
+        identifier: { value: "jacket" },
+        images: [],
+        name: "jacket",
+        price: { hasDiscount: false, originalValue: 10, value: 10 },
+        url: "/products/jacket",
+        variants: [
+          {
+            name: "red"
+          },
+          {
+            name: "blue"
+          }
+        ]
+      }
+    };
+  }
+};
+</script>
+```
+
+### Play with variant-slot
+
+In this example the variant-slot is used to customize the variant item.
+
+The variant will be rendered inside a list.
+
+```vue
+<template>
+  <ResultVariantsProvider :result="result" #default="{ result }">
+    <p>Result name: {{ result.name }}</p>
+
+    <ResultVariantSelector
+      :level="0"
+      #variant="{ variant, isSelected, selectVariant }"
+    >
+      <div>
+        <button @click="selectVariant">
+          {{ variant.name }}
+          <span v-if="isSelected">SELECTED!</span>
+        </button>
+      </div>
+    </ResultVariantSelector>
+  </ResultVariantsProvider>
+</template>
+
+<script>
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector
+} from "@empathyco/x-components";
+
+export default {
+  name: "ResultVariantSelectorDemo",
+  components: {
+    ResultVariantsProvider,
+    ResultVariantSelector
+  },
+  data() {
+    return {
+      result: {
+        id: "jacket",
+        modelName: "Result",
+        type: "Product",
+        isWishlisted: false,
+        identifier: { value: "jacket" },
+        images: [],
+        name: "jacket",
+        price: { hasDiscount: false, originalValue: 10, value: 10 },
+        url: "/products/jacket",
+        variants: [
+          {
+            name: "red"
+          },
+          {
+            name: "blue"
+          }
+        ]
+      }
+    };
+  }
+};
+</script>
+```
+
+### Play with variant-content slot
+
+In this example the variant-content slot is used to customize the content of the default variant
+button.
+
+```vue
+<template>
+  <ResultVariantsProvider :result="result" #default="{ result }">
+    <p>Result name: {{ result.name }}</p>
+
+    <ResultVariantSelector #variant-content="{ variant, isSelected }">
+      <div>
+        {{ variant.name }}
+        <span v-if="isSelected">SELECTED!</span>
+      </div>
+    </ResultVariantSelector>
+  </ResultVariantsProvider>
+</template>
+
+<script>
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector
+} from "@empathyco/x-components";
+
+export default {
+  name: "ResultVariantSelectorDemo",
+  components: {
+    ResultVariantsProvider,
+    ResultVariantSelector
+  },
+  data() {
+    return {
+      result: {
+        id: "jacket",
+        modelName: "Result",
+        type: "Product",
+        isWishlisted: false,
+        identifier: { value: "jacket" },
+        images: [],
+        name: "jacket",
+        price: { hasDiscount: false, originalValue: 10, value: 10 },
+        url: "/products/jacket",
+        variants: [
+          {
+            name: "red"
+          },
+          {
+            name: "blue"
+          }
+        ]
+      }
+    };
+  }
+};
+</script>
+```