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

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 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.163](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.162...@empathyco/x-components@3.0.0-alpha.163) (2022-08-29)
+
+### Documentation
+
+- **functional:** add my history ui and related docs (#685)
+  ([3a9ac8a](https://github.com/empathyco/x/commit/3a9ac8a769d64196b31f05872fb92ec26dc635ad))
+
+# 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.162](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.161...@empathyco/x-components@3.0.0-alpha.162) (2022-08-29)
+
+### Build System
+
+- Support SSR with createInjectorSSR for styles. (#674)
+  ([85473c3](https://github.com/empathyco/x/commit/85473c31f5aa755890bef4d20f787ba1453b8843)),
+  closes [EX-6892](https://searchbroker.atlassian.net/browse/EX-6892)
+
+# 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.161](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.160...@empathyco/x-components@3.0.0-alpha.161) (2022-08-26)
+
+### Features
+
+- **components:** variants auto selection (#679)
+  ([c1c8664](https://github.com/empathyco/x/commit/c1c866481ae8866fec4fd9e2dd5389fcba00e62b)),
+  closes [EX-6878](https://searchbroker.atlassian.net/browse/EX-6878)
+
+# 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.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

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);
 }
-:root {
-  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
-  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default);
-  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --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);
@@ -323,6 +313,16 @@
   --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);
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --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-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.resultvariantsprovider.autoselectdepth.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; [autoSelectDepth](./x-components.resultvariantsprovider.autoselectdepth.md)
+
+## ResultVariantsProvider.autoSelectDepth property
+
+The provider by default will auto select the first variants of all levels. This prop allows to limit the number of variants auto selected when the provider is created. Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth to 0 will not select any variant, setting it to 1 will select only the first variant of the first level, and so on.
+
+<b>Signature:</b>
+
+```typescript
+autoSelectDepth: number;
+```

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

@@ -21,6 +21,7 @@ export default class ResultVariantsProvider extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [autoSelectDepth](./x-components.resultvariantsprovider.autoselectdepth.md) |  | number | The provider by default will auto select the first variants of all levels. This prop allows to limit the number of variants auto selected when the provider is created. Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth to 0 will not select any variant, setting it to 1 will select only the first variant of the first level, and so on. |
 |  [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. |
@@ -30,5 +31,7 @@ export default class ResultVariantsProvider extends Vue
 |  Method | Modifiers | Description |
 |  --- | --- | --- |
 |  [render(createElement)](./x-components.resultvariantsprovider.render.md) |  | Render function of the provider. It exposes the result with the selected variant merged. |
+|  [resetSelectedVariants()](./x-components.resultvariantsprovider.resetselectedvariants.md) |  | Resets the selected variants when the result changes. That includes doing the auto selection of the variants when the component is created and when the result is changed. |
+|  [selectFirstVariants(variant)](./x-components.resultvariantsprovider.selectfirstvariants.md) |  | Adds to the selectedVariants array the variants up to the autoSelectDepth level. |
 |  [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.resetselectedvariants.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [resetSelectedVariants](./x-components.resultvariantsprovider.resetselectedvariants.md)
+
+## ResultVariantsProvider.resetSelectedVariants() method
+
+Resets the selected variants when the result changes. That includes doing the auto selection of the variants when the component is created and when the result is changed.
+
+<b>Signature:</b>
+
+```typescript
+resetSelectedVariants(): void;
+```
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.resultvariantsprovider.selectfirstvariants.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [selectFirstVariants](./x-components.resultvariantsprovider.selectfirstvariants.md)
+
+## ResultVariantsProvider.selectFirstVariants() method
+
+Adds to the selectedVariants array the variants up to the autoSelectDepth level.
+
+<b>Signature:</b>
+
+```typescript
+selectFirstVariants(variant?: ResultVariant): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  variant | ResultVariant | Variant to add to the array. |
+
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/components/common/result/x-components.result-variants-provider.md

@@ -15,9 +15,10 @@ set the selected variant to be used from a child.
 
 ## Props
 
-| Name                | Description                                  | Type                | Default       |
-| ------------------- | -------------------------------------------- | ------------------- | ------------- |
-| <code>result</code> | The original result containing the variants. | <code>Result</code> | <code></code> |
+| Name                         | Description                                                                                                                                                                                                                                                                                                                                                                                                  | Type                | Default                               |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | ------------------------------------- |
+| <code>result</code>          | The original result containing the variants.                                                                                                                                                                                                                                                                                                                                                                 | <code>Result</code> | <code></code>                         |
+| <code>autoSelectDepth</code> | The provider by default will auto select the first variants of all levels.<br />This prop allows to limit the number of variants auto selected when the provider is created.<br />Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth<br />to 0 will not select any variant, setting it to 1 will select only the first variant of the<br />first level, and so on. | <code>number</code> | <code>Number.POSITIVE_INFINITY</code> |
 
 ## Events
 
@@ -31,6 +32,8 @@ This component is intended to be used in conjunction with the `ResultVariantSele
 
 The result exposed in the default slot will contain the data of the selected variant.
 
+By default, the first variants of all the levels will be selected when the component is rendered.
+
 ```vue
 <template>
   <ResultVariantsProvider :result="result" #default="{ result }">
@@ -105,3 +108,88 @@ export default {
 };
 </script>
 ```
+
+### Play with props
+
+In this example, the provider has been configured to not auto select any variant. Changing the
+`autoSelectDepth` prop sets the number of variant levels to auto select, being 0 no variants, 1 the
+first variant of the first level, and so on.
+
+```vue
+<template>
+  <ResultVariantsProvider
+    :result="result"
+    :autoSelectDepth="0"
+    #default="{ result }"
+  >
+    <p>Result name: {{ result.name }}</p>
+
+    <h1>Select color</h1>
+    <ResultVariantSelector :level="0" #variant="{ variant, selectVariant }">
+      <button @click="selectVariant">{{ variant.name }}</button>
+    </ResultVariantSelector>
+
+    <h1>Select size</h1>
+    <ResultVariantSelector :level="1" #variant="{ variant, selectVariant }">
+      <button @click="selectVariant">{{ variant.name }}</button>
+    </ResultVariantSelector>
+  </ResultVariantsProvider>
+</template>
+
+<script>
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector
+} from "@empathyco/x-components";
+
+export default {
+  name: "ResultVariantsProviderDemo",
+  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>
+```

package/docs/build-search-ui/web-x-components-development-guide.md

@@ -162,8 +162,8 @@ building your search and discovery UI:
 
 </br>
 <VideoContent
-source="/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4"
-poster="/assets/media/videos/How-to-use-X-components-in-a-real-project.jpeg"
+:source="$withBase('/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4')"
+:poster="$withBase('/assets/media/videos/How-to-use-X-components-in-a-real-project.jpeg')"
 >
 
 Watch how our frontend Team Lead, [Iván Tajes](https://github.com/tajespasarela), integrates the

package/docs/experience-search-and-discovery/README.md

@@ -4,7 +4,7 @@ title: Experience search & discovery
 
 # Experience search & discovery
 
-Search inevitably is key when people look for specific products in an online store. It is the door
+Search inevitably is key when people look for specific products in an online store. It's the door
 to the entire product catalogue, so having an outstanding, well-structured, and optimized search UI
 is a must.
 
@@ -30,8 +30,9 @@ Apps cover everything and even go beyond, thanks to their standalone, configurab
 that allow you to quickly construct the search UI for your store:
 **Interface X Components** and **Interface X Components for Apps**.
 
-**Mix and match your experience**  
-Each X Component represents a graphical part of the UI, with
+### Mix and match your experience
+
+Each Interface X Component represents a graphical part of the UI, with
 its own unique view and behavior. They’ve been smartly designed to **work together yet
 independently**, so a single component adds real value to your UI by itself. The more components you
 add and combine, the more functionality you get.
@@ -58,35 +59,7 @@ choose the modules and components that best suit your needs.
 
 :::
 
-## Try X Components to…
-
-- Surprise your shoppers by **rendering shopping-aimed search and discovery features** that
-  intuitively guide and inspire them with trends, suggestions, and recommendations, based on your
-  shoppers’ behavior.
-- Add a **predictive layer** to your search UI that gathers all search functionalities in one, from
-  autocomplete and autosuggest to ideas of what to look for next.
-- Delight your shoppers with an **elegant and multi-configurable SERP** to help them discover what
-  they’re exactly looking for.
-- Enhance the shopping experience by adding **additional features to the SERP** such as add-to-cart
-  buttons or product rating information.
-
-::: warning
-
-Some X Components are supported by Empathy Platform search and discovery features. If you’re
-using a different search engine, make sure it supports all the functionalities you need.
-
-:::
-
-::: interact
-
-Explore the Empathy Platform [interactive map](/explore-empathy-platform/diagram/interface/) for a
-sneak peak of the X Components available!
-
-:::
-
----
-
-## Discover Interface X Components
+#### Discover Interface X Components for web
 
 Check out these X Components for Vue.js applications. They’ll certainly come in handy if you
 want to make the difference!
@@ -94,6 +67,7 @@ want to make the difference!
 <CardCarousel :cards="[
     'x_popular_searches',
     'x_history_queries',
+    'x_my_history',
     'x_id_results',
     'x_search_box',
     'x_query_suggestions',
@@ -105,16 +79,14 @@ want to make the difference!
     'x_facets']"
 />
 
-::: note
+::: interact  
 
 Check out the **Interface X for web [open-source project](https://github.com/empathyco/x)** on
 GitHub!
 
 :::
 
----
-
-## Discover Interface X Components for Apps
+#### Discover Interface X Components for Apps
 
 Check out the X&nbsp;Components available for Interface&nbsp;X for Apps, that can help you create
 your native app search solution.
@@ -122,6 +94,7 @@ your native app search solution.
 <CardCarousel :cards="[
     'x_popular_searches',
     'x_history_queries',
+    'x_my_history',
     'x_id_results',
     'x_search_box',
     'x_query_suggestions',
@@ -130,3 +103,29 @@ your native app search solution.
     'x_empathize',
     'x_results',]"
 />
+
+::: warning
+
+Some X&nbsp;Components are supported by Empathy Platform search and discovery features. If you’re
+using a different search engine, make sure it supports all the functionalities you need.
+
+:::
+
+## Try X Components to…
+
+- Surprise your shoppers by **rendering shopping-aimed search and discovery features** that
+  intuitively guide and inspire them with trends, suggestions, and recommendations, based on your
+  shoppers’ behavior.
+- Add a **predictive layer** to your search UI that gathers all search functionalities in one, from
+  autocomplete and autosuggest to ideas of what to look for next.
+- Delight your shoppers with an **elegant and multi-configurable SERP** to help them discover what
+  they’re exactly looking for.
+- Enhance the shopping experience by adding **additional features to the SERP**, such as add-to-cart
+  buttons or product rating information.
+
+::: interact
+
+Explore the Empathy Platform [interactive map](/explore-empathy-platform/diagram/interface/) for a
+sneak peak of the X&nbsp;Components available!
+
+:::

package/docs/experience-search-and-discovery/empathize.md

@@ -9,11 +9,9 @@ Empathize is a UI container, but not just any container. It’s the
 experience that is usually displayed below the search box. Consider it the natural companion of the
 **[search box](search-box.md)**, featuring search suggestions and recommendations.
 
-![Empathize](/assets/media/xcomponents_func_empathize.gif)
+![Empathize](~@assets/media/xcomponents_func_empathize.gif)
 
-**Placement matters** 
-
-One of the characteristics of X Components is that you can place them
+One of the characteristics of Interface X Components is that you can place them
 wherever you want. However, you know that the placement of the search box in your shop matters. So,
 why have search suggestions and recommendations spread all over the page, far away from the search
 box? The Empathize container brings everything together so that your shoppers perceive a smooth,
@@ -24,10 +22,10 @@ effortless search experience.
 Being the face of your predictive layer, Empathize comes into play before the search process starts
 and only makes sense when used with other components.
 
-Thanks to the nature of X Components, you can mix and match the components you use within
+Thanks to the nature of Interface X Components, you can [mix and match the components](/explore-empathy-platform/experience-search-and-discovery/readme.md#mix-and-match-your-experience)  you use within
 Empathize. For example, provide shoppers with search ideas and use Empathize to display popular
-search terms and trending products. Or anticipate your shoppers’ intent with recent searches and
-query suggestions. There are lots of handy possibilities that you might want to place close to the
+search terms and trending products. Anticipate your shoppers’ intent with recent searches and
+query suggestions. Or give shoppers access to their [complete search history](my-history.md) and let them control tracking search data. There are lots of handy possibilities that you might want to place close to the
 search box.
 
 **Combine Empathize with:**
@@ -36,10 +34,12 @@ search box.
 - [Recommendations](recommendations.md)
 - [History Queries](history-queries.md)
 - [Query Suggestions](query-suggestions.md)
+- [Next Queries](next-queries.md)
+- [ID Results](id-results.md)
 
 ## How it works...
 
-Empathize is an event-driven component. It is determined by events that make it react to shoppers'
+Empathize is an event-driven component. It's determined by events that make it react to shoppers'
 actions, such as clicks or keystrokes. That is the Empathize magic; the component listens by default
 to some events to expand the container and others to collapse it. However, this behavior is
 configurable.
@@ -96,7 +96,7 @@ search capabilities, such as Query Suggestions and Popular Searches. Don’t get
 
 ::: interact
 
-Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/) your web
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/components/empathize/x-components.empathize.md) your web
 experience.
 
 :::

package/docs/experience-search-and-discovery/facets-and-filters.md

@@ -144,7 +144,7 @@ Make sure your current Search microservice is compatible with this kind of confi
 
 ::: interact
 
-Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/) your web
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/components/facets/) your web
 experience.
 
 :::

package/docs/experience-search-and-discovery/history-queries.md

@@ -7,7 +7,7 @@ title: History Queries UI
 The History Queries UI component displays the search history, allowing shoppers to check previous
 searches and revisit products they’ve viewed before in a few clicks.
 
-![History Queries](/assets/media/xcomponents_func_historyqueries.gif)
+![History Queries](~@assets/media/xcomponents_func_historyqueries.gif)
 
 ::: interact
 
@@ -36,7 +36,7 @@ Can't quite capture the concept? Learn more about
 
 ::: interact
 
-Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/) your web
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/components/history-queries/) your web
 experience.
 
 :::
@@ -51,9 +51,14 @@ session will display.
 Combine History Queries with the [Search module](/develop-empathy-platform/ui-reference/components/search/) to ease shoppers' frustrations. That way, you can
 configure it to display only successful history searches.
 
+::: note Search history tracking
+
+Use the [My History](my-history.md) component to access and control search history. Shoppers can view a complete list of history queries and decide to stop saving search history. If search history is disabled, the History Queries list is cleared.
+
+::: 
 
 ::: interact 
 
-To know more about which data is stored in the browser’s data storage, check out [nterface X data privacy and browser local storage](/web-local-storage.md).'
+To know more about which data is stored in the browser’s data storage, check out [Interface X data privacy and browser local storage](web-local-storage.md).
 
 :::

package/docs/experience-search-and-discovery/id-results.md

@@ -38,7 +38,7 @@ Don't quite understand ID results? Learn more about
 
 ::: interact
 
-Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/) your web
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/components/identifier-results/) your web
 experience.
 
 :::

package/docs/experience-search-and-discovery/my-history.md

@@ -0,0 +1,50 @@
+---
+title: My History UI
+---
+
+The My History UI component displays the complete list of history queries, allowing shoppers to reuse previously searched queries.  
+
+![My History](~@assets/media/overview_myhistory.svg)
+
+::: interact
+
+Can't quite capture the concept? Learn more about [My History](/explore-empathy-platform/features/my-history-overview.md). 
+
+:::
+
+From the frontend perspective, My History is a UI component that specifically manages the display of a list of history search suggestions. To display a dashboard featuring shoppers' data privacy and control, My History is combined with other UI elements and components, such as a toggle switch for shoppers to enable or disable search history.
+
+::: note Search data storage
+
+To show the complete list of history queries, My History component uses the history records saved on the shopper’s browser local history. See [Interface X data privacy and browser local storage](/explore-empathy-platform/experience-search-and-discovery/web-local-storage.md) to check out the information stored locally on the shopper’s device.
+
+:::
+
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer.
+- Layout the list of history queries as you want. 
+- Customize date and time format.
+- Animate the display of My History dashboard at your ease.
+- Customize content. Show whatever you need: text, images, icons...
+
+::: note
+
+Configuration options here only apply to tailor the My History component, which provides a way to display the full list of history queries. Other UI elements that comprise the My History feature can be configured as well. Check a complete list of UI components in the [Interface X Components UI Reference](/develop-empathy-platform/ui-reference/).
+
+:::
+
+::: interact  
+
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/components/history-queries/x-components.my-history) your search history experience.  
+
+:::
+
+<!--Include link to twitch session here: Watch how XXX uses the My History UI component in a real project. -->
+
+
+
+
+
+

package/docs/experience-search-and-discovery/next-queries.md

@@ -8,7 +8,7 @@ The Next Queries UI component provides shoppers with ideas on what to search for
 last search. Since next queries are related to the last query, they appear after performing a first
 search.
 
-![Next Queries](/assets/media/xcomponents_func_nextqueries.gif)
+![Next Queries](~@assets/media/xcomponents_func_nextqueries.gif)
 
 Next queries can be **organic**, using information on the most common searches that are performed
 successively or within a same session by shoppers, or **curated**, created manually by the

package/docs/experience-search-and-discovery/popular-searches.md

@@ -8,7 +8,7 @@ The Popular Searches UI component displays what are the top search queries durin
 This type of suggestion can show up even before shoppers have started entering a query or when there
 are no search results to show.
 
-![Popular Searches](/assets/media/xcomponents_func_popularsearches.gif)
+![Popular Searches](~@assets/media/xcomponents_func_popularsearches.gif)
 
 ::: warning
 

package/docs/experience-search-and-discovery/product-results-ui.md

@@ -14,7 +14,7 @@ tailor the display to create the best product discovery experience for your shop
 elements and product-related information you want to include when displaying product results such as
 the price, a picture, or even an add-to-cart button.
 
-![X Components for results display](/assets/media/overview_product_card.svg)
+![X Components for results display](~@assets/media/overview_product_card.svg)
 
 <FootNote>
 

package/docs/experience-search-and-discovery/query-suggestions.md

@@ -8,7 +8,7 @@ The Query Suggestions UI component helps your shoppers with hints of what to loo
 relevant results. They complete and nail down the query as shoppers type without needing to keep
 typing.
 
-![Query Suggestions](/assets/media/xcomponents_func_querysuggestions.gif)
+![Query Suggestions](~@assets/media/xcomponents_func_querysuggestions.gif)
 
 ::: warning
 

package/docs/experience-search-and-discovery/related-tags.md

@@ -10,7 +10,7 @@ the results appear to fine-tune the search with extra information and get highly
 They are shown as labels usually at the top of the results page, but can be displayed anywhere
 instead.
 
-![Related Tags](/assets/media/xcomponents_func_relatedtags.gif)
+![Related Tags](~@assets/media/xcomponents_func_relatedtags.gif)
 
 ::: warning
 

package/docs/experience-search-and-discovery/serp-ui.md

@@ -8,7 +8,7 @@ To handle and display search results, the layout of results and other related di
 paramount. For example, how to arrange results on the SERP or the features shoppers expect to easily
 navigate and organize results are key points to have in mind. <br/>
 
-![X Components for results layout](/assets/media/xcomponents_func_results_layout.svg)
+![X Components for results layout](~@assets/media/xcomponents_func_results_layout.svg)
 
 <FootNote>
 

package/docs/experience-search-and-discovery/web-local-storage.md

@@ -10,8 +10,8 @@ tags:
 
 # Interface X data privacy and browser local storage
 
-Interface X for web _doesn't use cookies_ for storing data. The
-Interface X Components use the web browser's local storage to save the technical data
+Interface X for web **does not use cookies** for storing data. The
+[Interface X Components](readme.md#interface-x-and-interface-x-for-apps-the-solution) use the web browser's local storage to save the technical data
 required to provide the services associated with the search & discovery experience. The data remains
 in the shopper's device until the expiration time is reached or the shopper chooses to delete it.
 
@@ -20,6 +20,6 @@ local storage:
 
 | Key                    | Duration                                             | Purpose                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | ---------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `x-session-id`         | 30 minutes                                           | Short-term session ID to be sent to the Tagging API. It identifies short sessions in a device. It does not identify individual shoppers in any way. It is required for [Analytics](https://docs.empathy.co/explore-empathy-platform/understand-data-privacy/), [Next Queries](https://docs.empathy.co/explore-empathy-platform/features/history-queries-overview.html), and [Related Tags](https://docs.empathy.co/explore-empathy-platform/features/related-tags-overview.html) features |
+| `x-session-id`         | 30 minutes                                           | Short-term session ID to be sent to the Tagging API. It identifies short sessions in a device. It does not identify individual shoppers in any way. It's required for [Analytics](/explore-empathy-platform/understand-data-privacy/), [Next Queries](/explore-empathy-platform/features/history-queries-overview.html), and [Related Tags](/explore-empathy-platform/features/related-tags-overview.html) features |
 | `x-session-time-stamp` | 30 minutes                                           | Timestamp for the current session ID                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | `x-history-queries`    | Stored until the shopper clears/disables the feature | List of the searches performed that the shopper has chosen to store, which are shown in different steps of the search journey.                                                                                                                                                                                                                                                                                                                                                            |