@empathyco/x-components 3.0.0-alpha.145 → 3.0.0-alpha.146

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 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.146](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.145...@empathyco/x-components@3.0.0-alpha.146) (2022-08-03)
+
+### Documentation
+
+- bring functional docs from eDocs project (#630)
+  ([27e6dd6](https://github.com/empathyco/x/commit/27e6dd646084983c37fc52894dc95544253405d5)),
+  closes [EX-6237](https://searchbroker.atlassian.net/browse/EX-6237)
+
+# 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.145](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.144...@empathyco/x-components@3.0.0-alpha.145) (2022-08-01)
 
 ### Documentation

package/design-system/default-theme.css

@@ -407,79 +407,6 @@
 [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
   left: 0;
 }
-:root {
-  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-radius-bottom-right-dropdown-default: var(
-    --x-size-border-radius-dropdown-default
-  );
-  --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-right-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-bottom-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-left-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-default: 0;
-  --x-size-border-width-right-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-size-border-width-bottom-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-size-border-width-left-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
-  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
-  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
-  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
-  --x-color-background-dropdown-toggle-open-default: var(
-    --x-color-background-dropdown-toggle-default
-  );
-  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
-  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
-  --x-color-text-dropdown-default: var(--x-color-text-default);
-  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
-  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
-  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
-  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
-  --x-font-family-dropdown-default: var(--x-font-family-text);
-  --x-size-font-dropdown-default: var(--x-size-font-text);
-  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
-  --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
-  --x-font-decoration-dropdown-item-default-hover: none;
-  --x-font-decoration-dropdown-item-default-selected: none;
-  --x-size-width-dropdown-toggle-default: 100%;
-  --x-size-min-width-dropdown-list-default: 100%;
-  --x-size-gap-dropdown-default: 0;
-  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
-  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
-  --x-size-padding-bottom-dropdown-toggle-default: var(
-    --x-size-padding-bottom-dropdown-item-default
-  );
-  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
-  --x-size-padding-vertical-dropdown-list-default: 0;
-  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
-  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
-  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
-  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
-  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
-  --x-string-box-shadow-dropdown-default: none;
-  --x-string-overflow-dropdown-toggle-default: hidden;
-  --x-string-overflow-dropdown-list-default: hidden;
-}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -2906,4 +2833,77 @@
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
   --x-size-line-height-base-l: 32px;
+}
+:root {
+  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-dropdown-default
+  );
+  --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-right-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-bottom-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-left-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-default: 0;
+  --x-size-border-width-right-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-size-border-width-bottom-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-size-border-width-left-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
+  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
+  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-open-default: var(
+    --x-color-background-dropdown-toggle-default
+  );
+  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
+  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
+  --x-color-text-dropdown-default: var(--x-color-text-default);
+  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
+  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
+  --x-font-family-dropdown-default: var(--x-font-family-text);
+  --x-size-font-dropdown-default: var(--x-size-font-text);
+  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
+  --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
+  --x-font-decoration-dropdown-item-default-hover: none;
+  --x-font-decoration-dropdown-item-default-selected: none;
+  --x-size-width-dropdown-toggle-default: 100%;
+  --x-size-min-width-dropdown-list-default: 100%;
+  --x-size-gap-dropdown-default: 0;
+  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
+  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
+  --x-size-padding-bottom-dropdown-toggle-default: var(
+    --x-size-padding-bottom-dropdown-item-default
+  );
+  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
+  --x-size-padding-vertical-dropdown-list-default: 0;
+  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
+  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
+  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
+  --x-string-box-shadow-dropdown-default: none;
+  --x-string-overflow-dropdown-toggle-default: hidden;
+  --x-string-overflow-dropdown-list-default: hidden;
 }

package/design-system/full-theme.css

@@ -1144,10 +1144,6 @@
   --x-size-width-icon-default: var(--x-size-width-icon-xl);
   --x-size-height-icon-default: var(--x-size-height-icon-xl);
 }
-:root {
-  --x-size-width-icon-xl: var(--x-size-base-07);
-  --x-size-height-icon-xl: var(--x-size-base-07);
-}
 .x-input-group--card.x-input-group,
 .x-input-group--card .x-input-group {
   --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
@@ -7593,3 +7589,8 @@
 .x-normal-case {
   text-transform: none;
 }
+
+:root {
+  --x-size-width-icon-xl: var(--x-size-base-07);
+  --x-size-height-icon-xl: var(--x-size-base-07);
+}

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

@@ -0,0 +1,119 @@
+---
+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
+to the entire product catalogue, so having an outstanding, well-structured, and optimized search UI
+is a must.
+
+However, it’s not enough. With the advanced features provided by some well-known search engines,
+shoppers need a new dimension to **connect effortlessly** to the most relevant products, enjoy a
+**smooth user experience**, and take advantage of **outstanding search and discovery capabilities**.
+
+<img :src="$withBase('/assets/media/intro_experience_and_search.svg')" alt="Experience search and discovery">
+<br/>
+
+## Interface X and Interface X for Apps, the solution
+
+Interface&nbsp;X and Interface&nbsp;X for Apps are a collection of libraries that lets you create a
+smooth, personalized search and discovery experience, while significantly minimizing development
+time. Interface&nbsp;X, and its version for native apps, will renew your search experience interface
+layer, rendering the magic of search and delighting your shoppers with all experiences in one:
+**user**, **search**, **navigation**, and **product discovery**.
+
+There are many things to think about when designing a UI for search and discovery to provide a
+consistent user experience and look-and-feel: every little design element, the layout structure,
+animation, component, configuration, and behavior count. Interface&nbsp;X and Interface&nbsp;X for
+Apps cover everything and even go beyond, thanks to their standalone, configurable building blocks
+that allow you to quickly construct the search UI for your store:
+**Interface&nbsp;X&nbsp;Components** and **Interface&nbsp;X&nbsp;Components for Apps**.
+
+**Mix and match your experience** Each X&nbsp;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.
+
+You can craft your own **UI bundle with the right components for your store**. There are numerous
+X&nbsp;Components to choose from, and the catalogue evolves quickly with new experiences.
+
+To help you discover the components and leverage the UI design process, most of the
+X&nbsp;Components are distributed into **modules** which are intended for different purposes:
+functional experience, interface design and behavior, web and design standardization… Just pick and
+choose the modules and components that best suit your needs.
+
+::: details What does X mean?
+
+- Lightweight libraries
+- Developer friendly. Quick & easy to install and configure
+- Standalone. Work individually or together
+- Out-of-the-box. Ready to go!
+- In your pocket. Multiple components at your disposal
+- Mix & match. Customize to satisfy any design or behavior requirement
+- Mobile-ready. Designed both for web and native apps
+- Adapt to different search services
+- Easy-to-use. Intuitive search and discovery :::
+
+## 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&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.
+:::
+
+::: interact Explore the Empathy Platform
+[interactive map](/explore-empathy-platform/diagram/interface/) for a sneak peak of the
+X&nbsp;Components available! :::
+
+---
+
+## Discover Interface X Components
+
+Check out these X&nbsp;Components for Vue.js applications. They’ll certainly come in handy if you
+want to make the difference!
+
+<CardCarousel :cards="[
+    'x_popular_searches',
+    'x_history_queries',
+    'x_id_results',
+    'x_search_box',
+    'x_query_suggestions',
+    'x_related_tags',
+    'x_next_queries',
+    'x_recommendations',
+    'x_empathize',
+    'x_results',
+    'x_facets']"
+/>
+
+::: note Check out the **Interface X for web [open-source project](https://github.com/empathyco/x)**
+on GitHub! :::
+
+---
+
+## 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.
+
+<CardCarousel :cards="[
+    'x_popular_searches',
+    'x_history_queries',
+    'x_id_results',
+    'x_search_box',
+    'x_query_suggestions',
+    'x_related_tags',
+    'x_next_queries',
+    'x_empathize',
+    'x_results',]"
+/>

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

@@ -0,0 +1,102 @@
+---
+title: Empathize UI
+---
+
+# Empathize
+
+Empathize is a UI container, but not just any container. It’s the
+**[predictive layer](/explore-empathy-platform/overview/predictive-layer.md)** for your search
+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)
+
+**Placement matters** One of the characteristics of 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,
+effortless search experience.
+
+## Use Empathize with...
+
+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
+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 box.
+
+**Combine Empathize with:**
+
+- [Popular Searches](popular-searches.md)
+- [Recommendations](recommendations.md)
+- [History Queries](history-queries.md)
+- [Query Suggestions](query-suggestions.md)
+
+## How it works...
+
+Empathize is an event-driven component. It is 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.
+
+The Empathize container expands when:
+
+- The search box is focused.
+- The shopper clicks on the input field.
+- A query is being typed.
+
+Likewise, the Empathize closes when:
+
+- The shopper closes the Empathize layer.
+- A query suggestion is selected.
+- The shopper presses Enter.
+- The search box loses focus.
+
+Also, it can listen to scroll events to expand and collapse the layer when shoppers scroll up or
+down.
+
+### Extend the performance
+
+The Empathize container is collapsible so that it expands and collapses on shopper interaction. By
+default, this behaviour matches the search input focus: clicking the search input expands the
+Empathize container. Likewise, if the search input loses focus, e.g. the shopper clicks on a
+suggestion and launches the search, the Empathize container disappears.
+
+Alternatively, combine Empathize with one of the scroll components to make it react to scroll in
+addition to or replacing the search box focus. You may prefer to make it more accessible with the
+Keyboard Navigation component. Your shoppers can navigate the components in Empathize with the
+keyboard arrow keys.
+
+<!--
+**Enhance Empathize usability with...**
+- Keyboard scroll
+- Keyboard navigation
+-->
+
+<!--link to keyboard navigation components when available-->
+
+## Spot the difference
+
+Here, Empathize is the **predictive layer** holding the advanced search capabilities built in the
+back. However, in backend terms, Empathize is an Empathy Platform service, fed by a **batch
+application**, that uses the interaction data collected by the
+[Tagging microservices](/explore-empathy-platform/capture-shopper-interaction/) to build advanced
+search capabilities, such as Query Suggestions and Popular Searches. Don’t get confused!
+
+## Tailor the web experience
+
+- Customize content. Display whatever search-related suggestion components you need.
+- Determine when Empathize appears and disappears.
+- Animate how the component opens and closes.
+
+::: interact Want to know more? Learn how to [configure](/empathy-for-developers/ui-reference/) your
+web experience. :::
+
+<!---
+::: note
+To see Empathize in action, play with our showcase.
+:::
+--->

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

@@ -0,0 +1,138 @@
+---
+title: Facets & Filters UI
+---
+
+# Facets & Filters UI
+
+Facets and Filters allow your shoppers to organize your product catalogue in different categories
+and narrow the search results to better find what they are looking for. Shoppers can set filters
+according to the categories or facets defined in the faceted menu, which is usually located on the
+left or upper side of the search engine results page or product listing page.
+
+<img :src="$withBase('/assets/media/x-components_func_facets.gif')" alt="Facets"> <br>
+
+X&nbsp;Components for facets present how you have categorized your products, displaying the
+different aspects available (brand, price, color…), while the filter-related components render the
+values for those aspects that shoppers can use to filter by ("Nestlé", "Kellogg’s" for _brand_;
+“€0 - €10”, “€10 - €50” for _price_; “blue”, “black”, “white” for _color_), allowing you to
+determine how to display them.
+
+<!--Originally, the X&nbsp;Components for facets and filters were designed for **search**. However,
+since they can precisely organize and filter your product catalogue to bring out the products that
+best fit your shoppers’ needs, you can also use them for **catalogue navigation** and **product
+discovery**. You can guide shoppers through your product catalogue faster, allowing them to navigate
+and browse different product classifications directly from the faceted menu in your shop, without
+having to search.-->
+
+::: interact Can't quite capture the concept? Learn more about
+[Facets and Filters](../overview/facets-and-filters-overview.md). :::
+
+## Build a faceted experience with X Components
+
+There is no need to reinvent the wheel to design a good faceting experience, but rather it’s better
+to understand the shopper’s journey and the frontend options available.
+
+Facets and filters can display as different UI element types (select list, search, range…) using the
+numerous X&nbsp;Components available. Flexibly combine X&nbsp;Components to build the connection
+with the product attributes in your catalogue. **Guide** shoppers towards relevant results in record
+time, giving them the opportunity to establish a **dialogue** with your product catalogue and easily
+decide what results to display by adding and clearing filters, or make information on product
+results **clearer and more accessible**, meeting different types of faceting layouts.
+
+<img :src="$withBase('/assets/media/x-components_func_facets.png')" alt="Facets" />
+
+:::details Rendering facets and filters
+
+X&nbsp;Components for facets and filters not only enhances your shoppers’ experience by supporting
+and rendering faceted search and navigation, but also provides different ways to display a faceted
+experience:
+
+</br>
+
+- **Standard facets**: a single-select list that offers a way to describe a product attribute,
+  together with the values available to filter by. For example, a _Color_ facet can include values
+  such as “red”, “blue”, “white”, “black”, or “green”.
+- **Hierarchical facets**: present filter values organized hierarchically, providing a parent-child
+  filtering relationship. Shoppers can filter using the parent subfacet or choose the child subfacet
+  as a more precise filter. For example, the _Category_ facet in a jewellery store can display
+  “Button”, “Short”, and “Long” as child filters for the “Earrings” parent filter.
+- **Number range facets**: allow shoppers to select a range of numerical values and narrow the
+  results within those ranges. Intended for price or size facets that have numeric value type
+  attributes. For example, the _Price_ facet in a grocery store can display “< €0.99”, “€1 – €4.99”,
+  “€5 – €9.99”, or “€10 – €19.99”. Implement **editable number range facets** and let your shoppers
+  define the numerical ranges they want to filter by. Shoppers can type the desired price range to
+  filter by in the _From_ - _To_ or _Min_ - _Max_ input fields available. :::
+
+:::details Extending facets and filters UI
+
+Apart from the main X&nbsp;Components for facets and filters that render product categories and
+their corresponding attributes in different ways, there are components available offering advanced
+options to enhance the faceted experience.
+
+</br>
+
+- **Collapse & expand** to initially display facets collapsed on page load with a predetermined
+  number of filter values. Use a Show more button to expand the full list.
+- **Search box** to perform a text-based search on the filter values so that shoppers quickly find
+  the filters to apply to the results set.
+- **Selected filters list** to keep track of the shopper’s selection and understand the results
+  displayed. Selected filters can be displayed together under the same list or be organized by
+  facets. Shoppers can deselect any of the previously applied filters or clear all at once to try
+  different filtering values.
+- **Selected filters first** to change the order in which filters are initially displayed within a
+  facet so that the selected filters come first in the list. Note that the order of facets and
+  filters is determined by your Search microservice, usually showing the filters with the highest
+  number of products.
+- **Product count** to display the number of matches or occurrences next to the facet filter.
+  Shoppers can instantly see how many products each filter contains, offering a valuable insight on
+  your product catalog.
+- **Zero count** to only display filter values for those filters that **match a product result**,
+  omitting all those filters that have zero occurrences. For example, the query “skirts” in a retail
+  shop returns a large number of results for women and kids, but none for men. In this case, the
+  _Category_ facet only displays the filters “Woman”, “Girl”, and “Baby”.
+
+</br>
+
+Besides, you can use X&nbsp;Components to customize other attributes and behaviors. Transform a
+value returned from the Search microservice of “20 - 50” into “€20 - €50” or turn a numerical value
+into icons or images such as stars for average rating-based filtering, for example.
+
+</br>
+
+You can also change the default single-select behavior and activate **multi-select** controls so
+that shoppers can select more than one filter value at a time from the same facet to expand results.
+:::
+
+## Tailor the web experience
+
+**Layout, location, and display**:
+
+- Place the facets menu wherever you prefer. However, facets are commonly positioned in the left
+  sidebar or as top horizontal facets.
+- Hide or show the facets & filter menu when search results are displayed. Display facets and
+  filters as collapsed lists at first.
+- Animate the display of different elements: facets, filters, and related lists (e.g. selected
+  filters list).
+- Build the layout of facets and filters at your ease: from dropdowns and checkboxes to switches,
+  tags, and sliders.
+
+**Data and content**:
+
+- Select which facets defined in your product catalogue you want to display according to your
+  business strategy or your shoppers’ needs.
+- Configure the content of filters. Allow shoppers to filter results using text, icons, or
+  checkboxes.
+- Configure the content of related buttons (e.g. Show more button). Show whatever you need: text or
+  icons.
+- Customize labels in the facets and filters list. Add a custom title for facets, filters, and
+  related lists (e.g. selected filters list).
+- Customize facet data at your ease. You can opt to render facets defined in your product catalogue
+  automatically, display custom facets, or even render a mix of them.
+
+::: warning Make sure your current Search microservice is compatible with this kind of
+configuration. :::
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'To see Facets and Filters in action, play with our showcase'

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

@@ -0,0 +1,56 @@
+---
+title: History Queries UI
+---
+
+# 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)
+
+::: interact Can't quite capture the concept? Learn more about
+[History Queries](../features/history-queries-overview.md).  
+:::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer. Combine it with the
+  [Empathize](empathize.md) container to display suggestions under the search bar on shopper
+  interaction.
+- Show as many history suggestions as you want.
+- Choose the number of search records to store in the browser’s local storage to refresh the history
+  list.
+- Animate the display of History Queries at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+- Display History Queries only from successful searches. No result, no search record stored. (Search
+  X module required.)
+- Configure clear buttons at your convenience. Let shoppers clear previous searches one-by-one,
+  all-at-once, or either way.
+- Display only the refined queries to match shopper intent. For example, if “dress” is the initial
+  search, and it’s narrowed down using “long dress”, the history queries list only displays “long
+  dress” since it represents the shopper’s real intention.
+
+::: interact  
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/) your web
+experience.  
+:::
+
+## Extend the performance
+
+You can extend search history performance by combining it with the [Next Queries](next-queries.md)
+component. All suggestions for shoppers about what to look next can be filtered against the
+shopper’s search history so that only those suggestions that haven’t been used before in that
+session will display.
+
+[//]: # 'Link only when available to Search module page in UI reference'
+
+Combine History Queries with the Search X module to ease shoppers' frustrations. That way, you can
+configure it to display only successful history searches.
+
+[//]:
+  #
+  'TIP: To know more about which data is stored in the browser’s data storage, read [page title to be defined].'
+[//]:
+  #
+  'To see History Queries in action, [play with our interactive examples](/develop-empathy-platform/ui-reference/history-queries/history-queries.md#see-it-in-action'

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

@@ -0,0 +1,40 @@
+---
+title: ID Results UI
+---
+
+# ID Results UI
+
+The Identifier Results UI component presents a type of search results intended for product reference
+codes. When shoppers start typing, a reference code query type is detected, and a list displays
+instantly with query-matching product results. When shoppers select an identifier result hint from
+the list, they go directly to the product detail page (PDP).
+
+<img :src="$withBase('/assets/media/xcomponents_func_idresults.gif')" alt="ID Results">
+
+:::warning
+
+ID Results are generated using a Search service that searches the product catalogue by ID. For a
+correct performance, make sure that your current search service supports this type of feature. :::
+
+::: interact
+
+Don't quite understand ID results? Learn more about
+[ID Results](../features/id-results-overview.md). :::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer. Combine it with the
+  [Empathize](empathize.md) container display the ID Results below the search bar on shopper
+  interaction.
+- Show as many ID Results as you want.
+- Animate the display of ID Results at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+- Extend the performance with [results-related components](results-display.md).
+- Meet your own code reference conventions and standards with multiple product reference patterns.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience.
+
+:::
+
+<!-- (To see Identifier Results in action, play with our interactive examples) -->

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

@@ -0,0 +1,52 @@
+---
+title: Next Queries UI
+---
+
+# Next Queries UI
+
+The Next Queries UI component provides shoppers with ideas on what to search for next based on their
+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 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
+merchandiser in the Empathy Platform Playboard.
+
+:::warning Organic next queries are generated using collective shopper behavior to identify query
+pairs that have been used together. For a correct performance, make sure that your current search
+service supports this feature. :::
+
+::: interact Can't quite capture the concept? Learn about
+[Next Queries](../features/next-queries-overview.md). :::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer, although next queries usually display
+  below the search bar after the initial search.
+- Show as many next queries as you want.
+- Animate the display of next queries at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+- Display curated next queries differently to organic next queries.
+
+::: interact Want to know more? Learn how to
+[configure](/develop-empathy-platform/ui-reference/components/next-queries) your web experience. :::
+
+::: design
+
+Read how Empathy UX designer, Marlety García, designed the Next Queries experience for one of our
+customers in the post
+[Popular Next Queries: Towards a conversational search](https://empathy.co/blog/popular-next-searches/).
+
+:::
+
+## Extend the performance
+
+You can combine Next Queries with the [History Queries](history-queries.md) component to display
+next queries that shoppers haven't already used in the session.
+
+:::warning To display only new next queries, the
+[History Queries](../../search/history-queries-overview.md) feature must be implemented. :::
+
+[//]: # 'To see Next Queries in action, [play with our showcase].'

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

@@ -0,0 +1,32 @@
+---
+title: Popular Searches UI
+---
+
+# Popular Searches UI
+
+The Popular Searches UI component displays what are the top search queries during a specific time.
+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)
+
+:::warning Popular Searches are generated using shopper behavior to determine the top searches for a
+given period. For a correct performance, make sure that your current search service supports this
+type of feature. :::
+
+::: interact Can't quite capture the concept? Learn about
+[Popular Searches](../features/popular-searches-overview.md). :::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer. Combine it with the
+  [Empathize](empathize.md) container to display Popular Searches below the search bar on shopper
+  interaction.
+- Show as many popular search terms results as you want.
+- Animate the display of Popular Searches at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'To see Popular Searches in action, play with our showcase'

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

@@ -0,0 +1,68 @@
+---
+title: Product results UI
+---
+
+# Product results UI
+
+After launching a search, some shoppers may just want to take a quick look around, reviewing only
+product thumbnails and quick info on the SERP. While others will prefer to have a more detailed
+overview of the product results with large and multiple images. That’s why the display of results is
+really issue.
+
+Results are rendered thanks to the combination of different X Components. This way, you can
+tailor the display to create the best product discovery experience for your shoppers. Decide the
+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)
+
+<FootNote>
+
+**X&nbsp;Components for results display** <br/> (A) Image, (B) Product information, (C) Price, (D)
+PDP Link, (E) Rating, (F) Add to cart
+
+</FootNote>
+
+::: interact To learn more about the display of results, see
+[Product results](/explore-empathy-platform/overview/product-results-overview.md). :::
+
+**A bunch of components for comprehensive product information** Decide whether you want to include
+the description for the resulting product, a picture, or even rating information:
+
+- **Image**. Include a picture of the product for better product recognition.&nbsp;(A)
+- **Result data and product variants**. Retrieve the information to display about the product –name,
+  description, reference, brand, category, season, colors, types, sizes, or any data from your
+  catalogue.&nbsp;(B)
+- **Pricing**. Indicate the original price of the product, discounts, and special prices.&nbsp;(C)
+- **Product details**. Link your shoppers to the product detail page (PDP).&nbsp;(D)
+- **Rating**. Show how valued a product is among your shoppers.&nbsp;(E)
+- **Add to cart**. Allow your shoppers to add a product to the cart from the search engine results
+  page (SERP), without going through the PDP.&nbsp;(F)
+
+:::warning To include rating and add-to-cart options in results, rating and add-to-cart features
+must be implemented in your product catalogue. :::
+
+## Tailor the web experience
+
+- Customize content. Choose and display the product-related information available in your catalogue.
+- Add a PDP link to the product name or description, the picture, or to the entire product result.
+- Format the price of products with integers and decimals. Decide the length of decimals or whether
+  decimals should be rendered or not.
+- Select the desired currency for prices.
+- Customize the default rendering behavior of pictures when loading or broken.
+- Animate the display of product results.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+## Extend the performance
+
+Traditionally, search results are displayed on the SERP after the query is launched or instantly as
+you type. However, result data is also used by features such as
+[Recommendations](/explore-empathy-platform/experience-search-&-discovery/recommendations.md) and
+[ID Results](/explore-empathy-platform/experience-search-&-discovery/id-results.md). You can combine
+results-related components with these modules to get advanced display options. Include additional
+product information in Recommendations and Identifier Results such as prices and pictures for better
+recognition and understanding of the products displayed.
+
+[//]: # 'TIP: To see the product results in action, play with our showcase.'

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

@@ -0,0 +1,32 @@
+---
+title: Query Suggestions UI
+---
+
+# Query Suggestions UI
+
+The Query Suggestions UI component helps your shoppers with hints of what to look for to get
+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)
+
+:::warning Query Suggestions are generated using collective shopper behavior, extracting the
+keywords used on a specific query. For a correct performance, make sure that your current search
+service supports this type of feature. :::
+
+::: interact Can't quite capture the concept? Learn more about
+[Query Suggestions](../features/query-suggestions-overview.md). :::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer. Combine it with the
+  [Empathize](empathize.md) container to display suggestions below the search bar on shopper
+  interaction.
+- Show as many suggestions as you want.
+- Animate the display of Query Suggestions at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'To see Query Suggestions in action, play with our showcase'

package/docs/experience-search-&-discovery/recommendations.md

@@ -0,0 +1,32 @@
+---
+title: Recommendations UI
+---
+
+# Recommendations UI
+
+The Recommendations UI component shows the most clicked products on the SERP, based on shopper
+interaction within a defined period. They help your shoppers to explore your product catalogue,
+guiding them to specific products without the need to launch any queries.
+
+<img :src="$withBase('/assets/media/xcomponents_func_recommendations.gif')" alt="Recommendations]">
+
+:::warning Recommendations are generated using collective shopper behavior, generating a feed with
+the most clicked products. For a correct performance, make sure that your current search service
+supports this type of feature. :::
+
+::: interact Can't quite capture the concept? Learn more about
+[Recommendations](../search/recommendations-overview.md). :::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer, although they usually appear on the
+  results page.
+- Show as many recommendations as you want.
+- Animate the display of the component at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+- Extend the performance with results-related components.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'TIP To see Recommendations in action, play with our showcase.'

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

@@ -0,0 +1,41 @@
+---
+title: Related Tags UI
+---
+
+# Related Tags UI
+
+The Related Tags UI component helps your shoppers to refine a specific search query and find what
+they’re looking for with just one click. They only appear after the search process is completed, and
+the results appear to fine-tune the search with extra information and get highly relevant results.
+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)
+
+:::warning Related Tags are generated using collective shopper behavior to identify associated terms
+used to refine a search query. For a correct performance, make sure that your current search service
+supports this type of feature. :::
+
+::: interact Can't quite capture the concept? Learn more about
+[Related Tags](../features/related-tags-overview.md). :::
+
+[//]:
+  #
+  'You can configure the behaviour of Related Tags and decide whether they’re selectable or not. If Related Tags aren’t selectable, they modify the initial query syntax by adding the related-search keywords to the query term initially typed in the search bar. Otherwise, the initial query syntax will still remain so that shoppers can select or deselect Related Tags at their ease, exploring different options and combinations.'
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer, although Related Tags usually appear
+  below the search bar after completing the search.
+- Show as many Related Tags as you want.
+- Animate the display of Related Tags at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+
+[//]:
+  #
+  '* Choose if Related Tags are selectable or change the syntax of the initial query in the search box.'
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'tip To see Related Tags in action, play with our showcase'

package/docs/experience-search-&-discovery/search-box.md

@@ -0,0 +1,81 @@
+---
+title: Search Box UI
+---
+
+# Search Box UI
+
+The Search Box UI Component is the main entry point for search where shoppers can type what
+they're looking for in your shop. It usually includes an input field, a search button, and a clear
+button.
+
+<img :src="$withBase('/assets/media/xcomponents_func_searchbox.svg')" alt="Search Box"> <br>
+
+::: interact Can't quite capture the concept? Learn more about
+[Search Box](../overview/search-box-overview.md). :::
+
+It can be combined with other X&nbsp;Components, such as [Query Suggestions](query-suggestions.md)
+or [Next Queries](next-queries.md), to update the query according to shoppers’ intent or
+behaviour. For example, if a shopper selects a query suggestion, the query is instantly updated in
+the input field to the selected suggestion and the search is launched.
+
+:::warning To modify the query syntax using
+[Query Suggestions](../features/query-suggestions-overview.md) or
+[Next Queries](../features/next-queries-overview.md), make sure that your current search service
+supports this type of feature. :::
+
+## Power-up behavior
+
+Every component has a power-up behavior under the hood that is visible to the user but not glaringly
+obvious. For example, in Interface X Components for web, see what happens when:
+
+- _A query with results is **submitted**_:
+
+  - Results are displayed
+  - Related tags are displayed
+  - Next queries are displayed
+  - The query can be displayed in the History Queries or Query Suggestions lists upon configuration
+
+- _A query with results is **cleared** using the clear button_:
+
+  - Any text in the search input is cleared
+  - The results are cleared
+  - The query suggestions are cleared
+  - The next queries are not cleared
+  - The related tags are cleared
+  - The searched query is displayed in history queries
+
+- _Using **instant search and a query is being typed** that has results_:
+
+  - No results are displayed before debounce time
+  - Results are displayed after debounce time
+  - Next queries are displayed after debounce time
+  - Related tags are displayed after debounce time
+
+- _Using **instant search and modifying the initial query**_:
+  - No results related to the second query are displayed before debounce time
+  - Results related to the second query are displayed after debounce time
+  - Displayed results are different from the previous ones
+
+::: warning Deactivating instant search means History Queries are not updated until the search
+button or Enter key is pressed, since the typed query is not submitted until one of these two
+actions is performed. :::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer.
+- Customize content. Allow shoppers to search or clear their search using text or icons.
+- Determine the number of characters shoppers can enter in the search input.
+- Autofocus the input field when the search&nbsp;box is displayed.
+- Auto-accept the query without the need of using a search button or the Enter key. Determine the
+  debounce time to wait before instant search.
+- Configure what will happen after the search is triggered; for example, display Related Tags or
+  Next Queries.
+
+[//]:
+  #
+  'TO BE PUBLISHED IN FUTURE ITERATIONS WHEN THE SEARCH BOX POWER-UP ARE IMPLEMENTED: * Automatically suggest search terms to guide shoppers in constructing their search query. * Prompt shoppers to start their search with animated custom hint messages. '
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'TIP: To see Search Box in action, play with our showcase.'

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

@@ -0,0 +1,109 @@
+---
+title: SERP UI
+---
+
+# SERP UI
+
+To handle and display search results, the layout of results and other related discovery features is
+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)
+
+<FootNote>
+
+**X&nbsp;Components for results layout** <br/> (A) Grid, (B) Number of results, (C) Column Picker,
+(D) Sorting, and (E) Scrolling
+
+</FootNote>
+<br/>
+
+**Choice of the layout view** Your shoppers should be able to select how they’d like the products
+displayed and how the number of products they’d like to see per page, for example.
+
+That’s why the **grid** (A) is the core element of the SERP. It displays the results returned by the
+search service using a grid layout. Its value relies on having a configurable and flexible space to
+place all types of results or even other layout components such as a carousel visualization for
+[Next Queries](next-queries.md) or [Recommendations](recommendations.md).
+
+However, the grid is not the only element to consider when designing the SERP:
+
+[//]:
+  #
+  'To add when ready: Include **pagination** options to browse results throughout the different result pages available or apply **infinite scroll** to ease navigation.'
+
+- Show the **number of results** (B).
+- Allow your shoppers to select the **number of columns** (C) to showcase results.
+- Provide a **[sorting system](/explore-empathy-platform/overview/sorting-overview.md)** (D) so that
+  your shoppers can arrange results according to different criteria such as relevance, price,
+  alphabetical order…
+- Include **[pagination](/explore-empathy-platform/overview/pagination-overview.md)** options to
+  browse results throughout the different result pages available or apply infinite scroll to ease
+  navigation.
+- Apply **infinite scroll** to ease navigation and add a **scroll-to-top button** (E) to quickly
+  move to the top of the results page.
+- Indicate your shoppers whether the
+  **[spellcheck](/explore-empathy-platform/features/spellcheck-overview.md)** feature is applied or
+  not.
+
+::: note Enhance the search experience, adding [Related Tags](related-tags.md) to the SERP so that
+your shoppers can select descriptive keywords to refine the initial query and get highly relevant
+results. :::
+
+::: design As most shoppers don’t like to spend time scrolling and moving between pages, a crucial
+element on the SERP for a great experience is to offer **faceted search**, letting shoppers specify
+the kind of product attributes they’re interested in. :::
+
+::: interact To learn more about the SERP, results display, and their layout, see
+[Results on the SERP](../overview/results-overview.md). :::
+
+## Tailor the web experience
+
+**Grid**
+
+- Customize the layout of the results. Decide whether to display results using a grid or the default
+  list layout.
+- Configure what to display: product results, promotion banners, promoted results, or even next
+  queries and recommendations.
+- Customize the location, style, and content for each type of result.
+- Automatically fill the grid rows with as many columns as it can fit or set the number of columns
+  to divide the grid.
+- Indicate the number of product results to render per page.
+- Animate the display of the grid at your ease.
+- Allow your users to select the number of columns to display. Define if your shoppers will be
+  provided with a dropdown menu or a list with the columns to pick for the grid.
+- Show the total number of product results displayed. Configure the content with text, images, or
+  icons.
+
+**Sorting**
+
+- Choose and configure the sorting options available. Highlight the selected sorting option.
+- Select the display of the sorting system: dropdown menu or a simple list with the sorting options
+  available.
+- Animate the display of the sorting dropdown menu.
+- Set a default sorting option.
+  <!-- TBC: Decide which sorting option to display based on product category. -->
+
+**Pagination & scrolling**
+
+- Customize the content and style for the controls to move between pages.
+- Include an infinite scroll to load more results when reaching the end of the page.
+
+**Scrolling to top**
+
+- Decide when it will be displayed: when reached a defined threshold or the page end.
+- Configure the position and place it wherever you prefer.
+- Customize content. Show whatever you need: text, images, icons.
+- Animate the display of the scroll-to-top button at your ease.
+
+**Spellcheck**
+
+- Display a message to inform your shoppers that the
+  [spellcheck](../features/spellcheck-overview.md) feature has been used to provide results for the
+  current query.
+- Customize the message content at your ease.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'TIP: To see the SERP-related components in action, play with our showcase.'

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

@@ -0,0 +1,25 @@
+---
+title: Interface X data privacy and browser local storage
+tags:
+  - x components
+  - interface x
+  - cookies
+  - local storage
+  - history queries
+---
+
+# 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
+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.
+
+More specifically, Interface X Components store the following elements in the browser's
+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-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.                                                                                                                                                                                                                                                                                                                                                            |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.145",
+  "version": "3.0.0-alpha.146",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -125,5 +125,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "425daae064fc399aece12544ec4c57a05494c732"
+  "gitHead": "a60a14dfbc744871426d1331892fe2957d8802eb"
 }

package/docs/functional-doc/web-local-storage.md

@@ -1,22 +0,0 @@
----
-title: Interface X data privacy and browser local storage
-tags:
-  - x components
-  - interface x
-  - cookies
-  - local storage
-  - history queries
----
-
-# 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 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.
-
-More specifically, Interface X Components store the following elements in the browser's 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-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.                                                                           |