@empathyco/x-components 3.0.0-alpha.102 → 3.0.0-alpha.103

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.103](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.102...@empathyco/x-components@3.0.0-alpha.103) (2022-05-25)
+
+### Documentation
+
+- fix links and minor typos
+  ([e0197d5](https://github.com/empathyco/x/commit/e0197d5bff978048aed39dff5878d60682b7aa9f)),
+  closes [EX-6125](https://searchbroker.atlassian.net/browse/EX-6125)
+
+# 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.102](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.101...@empathyco/x-components@3.0.0-alpha.102) (2022-05-19)
 
 ### Features

package/design-system/full-theme.css

@@ -3211,10 +3211,6 @@
   border-radius: var(--x-size-border-radius-progress-bar-default);
   background-color: var(--x-color-background-progress-bar-line-default);
 }
-.x-result.x-result--card {
-  overflow: hidden;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
-}
 :root {
   --x-size-height-progress-bar-line-default: var(--x-size-base-02);
   --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -3224,6 +3220,10 @@
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
   --x-size-border-width-progress-bar-default: 0;
 }
+.x-result.x-result--card {
+  overflow: hidden;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
+}
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }

package/docs/build-search-ui/README.md

@@ -26,10 +26,10 @@ Start building your search and discovery experience:
 
 - **Discover the [Interface X ecosystem](#the-interface-x-ecosystem)** and how Interface X
   works.
-- **[Develop using Interface X](#develop-with-interface-x)** inside your project.
-- **[Integrate the Interface X Archetype](#integrate-interface-x-archetype)** in your store web
+- **[Develop using Interface X](#developing-with-interface-x)** inside your project.
+- **[Integrate the Interface X Archetype](#integrating-interface-x-archetype)** in your store web
   application.
-- **[Use and configure the Interface X Components](#use-and-configure-the-interface-x-components)**
+- **[Use and configure the Interface X Components](#using-and-configuring-the-interface-x-components)**
   in your project.
 
 <!-- 3. Style your UI. 4. Translate your search experience-->
@@ -47,7 +47,7 @@ Check out the **[open source project in GitHub](https://github.com/empathyco/x)*
 Interested in learning more about how Interface&nbsp;X works? Discover more about its
 **[architecture](web-x-architecture.md)**.
 
-## Develop with Interface X
+## Developing with Interface X
 
 You can use the Interface&nbsp;X in a project in two ways:
 
@@ -62,7 +62,7 @@ You can use Empathy Search API, Elasticsearch, or Solr endpoints with both appro
 
 :::
 
-##### Develop via Interface X Archetype
+##### Developing via Interface X Archetype
 
 The **[Interface&nbsp;X&nbsp;Archetype](https://github.com/empathyco/x-archetype)** project is the
 perfect combination of all the existing X&nbsp;Components. It allows you to ramp up quickly with an
@@ -80,7 +80,7 @@ This is the perfect solution for most cases as you can use it as a springboard t
 To start developing the X&nbsp;Archetype project, see
 **[Develop using Interface&nbsp;X&nbsp;Archetype](web-archetype-development-guide.md)**.
 
-##### Develop via Interface X Components library
+##### Developing via Interface X Components library
 
 This is the more deep and flexible use of the
 **[Interface&nbsp;X&nbsp;Components library](https://github.com/empathyco/x/tree/main/packages/x-components)**,
@@ -96,7 +96,7 @@ go if you like to look under the hood.
 To get started with the X&nbsp;Components library, check out
 **[Develop using Interface&nbsp;X&nbsp;Components library](web-x-components-development-guide.md)**.
 
-## Integrate Interface X Archetype
+## Integrating Interface X Archetype
 
 With the **[Interface&nbsp;X&nbsp;Archetype](https://github.com/empathyco/x-archetype)** you have an
 isolated search layer up and running in your store web application in a matter of minutes.
@@ -108,7 +108,7 @@ Check out
 **[Integrate InterfaceX&nbsp;Archetype into an existing website](web-archetype-integration-guide.md)**,
 to integrate the X&nbsp;Archetype project.
 
-## Use and configure the Interface X Components
+## Using and configuring the Interface X Components
 
 To use the Interface&nbsp;X&nbsp;Components, just **import** and **register** the component,
 **include** it in your template, and you’re ready to go.

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

@@ -35,7 +35,7 @@ To use Interface X Archetype as a search UI layer, you need:
 3. Configure the **search adapter**.
 4. Configure the **xPlugin**.
 
-## 1. Clone the project and initialize your repository
+## Cloning the project and initializing your repository
 
 Clone the [X Archetype project](https://github.com/empathyco/x-archetype.git) from the GitHub
 repository to your target folder. You need a non-initialized repository, so make sure you remove the
@@ -79,7 +79,7 @@ repository in the `package.json` file.
 }
 ```
 
-## 2. Install the dependencies and execute the project
+## Installing the dependencies and executing the project
 
 Install the project dependencies via `npm` in the root folder of your cloned repository. Then, you
 can run the project.
@@ -100,7 +100,7 @@ Interface X Archetype repository.
 
 :::
 
-## 3. Configure the search adapter
+## Configuring the search adapter
 
 Before using your project, configure the Empathy Search Adapter in the
 `x-archetype/src/adapter/adapter.ts` file, using the Empathy Adapter Builder to make it work with
@@ -109,7 +109,7 @@ configurations, or mappers that points to a demo environment. You need to adjust
 according to the search features you use in your project.
 
 Export the required search adapter with your configuration as you will need it for the search
-[xPlugin configuration](#4-configure-the-plugin).
+[xPlugin configuration](#configuring-the-plugin).
 
 ::: interact
 
@@ -132,11 +132,11 @@ are displayed in English. However, if you want to deploy the application in Spai
 </br>
 
 For detailed information, see
-[Snippet configuration](web-archetype-integration-guide.md#snippet-configuration)
+[Snippet configuration](web-archetype-integration-guide.md#snippet-configuration).
 
 :::
 
-## 4. Configure the plugin
+## Configuring the plugin
 
 The `xPlugin` initializes the properties needed by the X&nbsp;Components. It has key options that
 you can configure in the `/x-archetype/src/x-components/plugin.options.ts` file.
@@ -173,7 +173,8 @@ new XInstaller(installXOptions).init({
 Once you have your Interface&nbsp;X&nbsp;Archetype project, you're ready to **integrate** it in your
 store or **extend** the search and discovery experience to meet your business needs:
 
-- [**Integrate an Interface&nbsp;X&nbsp;Archetype project** into an existing website](web-archetype-integration-guide.md).
+- [**Integrate an Interface&nbsp;X&nbsp;Archetype project**](web-archetype-integration-guide.md)
+  into an existing website.
 - Change the **configuration of [X&nbsp;Components](web-how-to-use-x-components-guide.md)** or
   create new ones.
 - Adapt the

package/docs/build-search-ui/web-archetype-integration-guide.md

@@ -19,11 +19,13 @@ meet your business needs.
 To integrate the Interface X Archetype layer in your commerce store, just **load** the
 generated Interface X JavaScript file and **initialize** it.
 
-::: note IMPORTANT If the X Archetype script is hosted by Empathy, all the X resources are
-provided by a CDN through the following environment URLs:
+::: note IMPORTANT
 
-- **Production**: https://x.empathy.co/{INSTANCE}/app.js
-- **Staging**: https://x.staging.empathy.co/{INSTANCE}/app.js
+If the X Archetype script is hosted by Empathy, all the X resources are provided by a CDN
+through the following environment URLs:
+
+- **Production**: `https://x.empathy.co/{INSTANCE}/app.js`
+- **Staging**: `https://x.staging.empathy.co/{INSTANCE}/app.js`
 
 Where `{INSTANCE}` is the name of your commerce store. If you require any assistance, contact
 [Empathy Support](mailto:support@empathy.co).
@@ -32,8 +34,8 @@ Where `{INSTANCE}` is the name of your commerce store. If you require any assist
 
 Depending on your business needs, Interface X supports two initialization types:
 
-- **[Automatic initialization](#initializing-interface-x-project-automatically)**
-- **[On-demand initialization](#initializing-interface-x-project-on-demand)**
+- **[Automatic initialization](#initializing-the-interface-x-project-automatically)**
+- **[On-demand initialization](#initializing-the-interface-x-project-on-demand)**
 
 ::: develop Frameworks & libraries integration
 
@@ -43,16 +45,18 @@ for a correct implementation.
 
 :::
 
-## Initializing Interface X project automatically
+## Initializing the Interface X project automatically
 
 Automatic initialization is the easiest way to integrate the Interface X project in a website.
 
-You first **configure the JavaScript snippet** to define either an initialization object or a
-function. Then, you **load and initialize the Interface X script**.
+**Steps to initialize the project automatically**
+
+1. **Configure the JavaScript snippet** to define either an initialization object or a function.
+2. **Load and initialize** the Interface X script.
 
-### 1. Add the snippet configuration
+#### Configuring the snippet  
 
-First, configure the JavaScript snippet to define multiple initialization options, i.e. the API to
+First, add the JavaScript snippet configuration to define multiple initialization options, i.e. the API to
 use, the language or currency to display, or even the tagging parameters to collect search-related
 data to generate conversational search features and analytics.
 
@@ -97,7 +101,7 @@ more information on the supported parameters, check out
 
 :::
 
-### 2. Load the script
+#### Loading the script
 
 Once the snippet configuration is ready, add the Interface X script to your webpage. The script
 is hosted in a URL with the following syntax:
@@ -140,14 +144,16 @@ attribute `src` so that it points to the staging environment as follows:
 Thus, when the Interface X JavaScript file is loaded, it retrieves the configuration from the
 defined object or function.
 
-## Initializing Interface X project on demand
+## Initializing the Interface X project on demand
 
 On-demand initialization allows you to control when Interface X is loaded.
 
-You first **load the Interface X script**. Then, you invoke a function with the required
-initialization options to **initialize Interface X**.
+**Steps to initialize the project on demand**
+
+1. **Load** the Interface X script. 
+2. **Initialize** Interface X.
 
-### 1. Load the script
+#### Loading the script
 
 Add the Interface X script hosted in a URL with the following syntax:
 `https://x.<environment?>.empathy.co/<instance>/app.js`.
@@ -166,9 +172,9 @@ attribute `src` so that it points to the staging environment as follows:
 <script src="https://x.staging.empathy.co/my-store/app.js"></script>
 ```
 
-### 2. Initialize Interface&nbsp;X
+#### Initializing Interface&nbsp;X
 
-Since no initialization configuration was defined when loading the script, you need to **invoke the
+Since no initialization configuration is defined when loading the script, you need to **invoke the
 initialization function** created automatically in the
 [X API](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-installer/api/base-api.ts)
 object to provide the initialization options:
@@ -232,7 +238,7 @@ following configuration options:
 
 ::: note Consent parameter
 
-When the `Consent` parameter is set to `false`, the `sessionId` is not generated nor sent to the
+When the `consent` parameter is set to `false`, the `sessionId` is not generated nor sent to the
 Tagging API. Only shoppers' behavioral data (wisdom of the crowd) is inferred from the current
 session. The `consent` parameter is set to `true` as soon as the shopper accepts the use of cookies.
 If page reload is not triggered after accepting cookies, update the `consent` parameter

package/docs/build-search-ui/web-how-to-use-x-components-guide.md

@@ -24,7 +24,7 @@ you’re ready to use X Components in your project.
 
 2. **Configure the X Components behavior** to customize the search and discovery experience.
 
-## 1. Import and register the X Components
+## Importing and registering the X Components
 
 Many of the X Components are distributed into modules to make them easier to manage. So you
 need to indicate from which module you’re importing each component as appropriate.
@@ -56,7 +56,7 @@ export default {
 //The components are now ready to be used inside your template.
 ```
 
-## 2. Configure the X Components
+## Configuring the X Components
 
 You can configure some behaviors for each component to customize the search experience.
 
@@ -115,7 +115,7 @@ Learn more about the
 
 :::
 
-### Importing the components from the search-box module
+**1. Importing the components from the search-box module**
 
 For this purpose, you need to import the `SearchInput`, `SearchButton`, and `ClearSearchInput`
 components from the `search-box` module to the desired app component. Then, register them and
@@ -147,7 +147,7 @@ Now, you’re ready to start using the component wherever you want in your templ
 </template>
 ```
 
-### Configuring the SearchInput component
+**2. Configuring the SearchInput component**
 
 Next, you want to configure the behavior of the `SearchInput` component. Here you use the
 `maxLength` prop to limit the maximum length to 20 characters.

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

@@ -32,8 +32,6 @@ You can find the X Components library in the
 
 To integrate the X Components in a frontend UI, you need:
 
-<br/>
-
 - **Empathy Search API** to retrieve search data (or any other search API)
 - A **search adapter** to communicate with the search API. You can use the Empathy Adapter and
   configure it with the `EmpathyAdapterBuilder`
@@ -49,7 +47,7 @@ To integrate the X&nbsp;Components in a frontend UI, you need:
 3. Configure the **xPlugin**.
 4. Install and **initialize the xPlugin**.
 
-## 1. Install the dependencies
+## Installing the dependencies
 
 To build your search and discovery UI, the following project dependencies are required:
 
@@ -78,7 +76,7 @@ Install the project dependencies via `npm` as follows:
 npm install --save @empathyco/x-components @empathyco/x-types @empathyco/x-adapter reflect-metadata
 ```
 
-## 2. Configure the search adapter
+## Configuring the search adapter
 
 ::: warning
 
@@ -88,7 +86,7 @@ have imported the `reflect-metadata` polyfill before executing any code of the s
 :::
 
 Next, construct the search adapter. You will need the search adapter in the
-[xPlugin configuration](#3-configure-the-plugin).
+[xPlugin configuration](#configuring-the-plugin).
 
 Empathy Search Adapter is a library for making it easier to consume search APIs. The project
 contains two main parts: an **implementation** to consume the Empathy Search API, and an
@@ -121,7 +119,7 @@ If you do not use the Empathy Search API, you need to build your own adapter.
 For more information, see
 [Using the Empathy Search Adapter](https://github.com/empathyco/x/tree/main/packages/search-adapter).
 
-## 3. Configure the plugin
+## Configuring the plugin
 
 Plugins are self-contained code that usually add global-level functionality to Vue projects. They’re
 specifically objects that expose an `install` method, allowing you to keep your components clear and
@@ -143,7 +141,7 @@ Then, **configure** the xPlugin. It has two key options you need to configure:
 1. **Adapter**: A search adapter is required to connect and communicate with the search API. Here
    you’re using the `EmpathyAdapterBuilder` to communicate specifically with the Empathy Search API.
    If you are not using the Empathy Search API, you need to build your own adapter. See
-   [Configure the search adapter](#2-configure-the-search-adapter).
+   [Configuring the search adapter](#configuring-the-search-adapter).
 
    ::: develop
 
@@ -162,7 +160,7 @@ Then, **configure** the xPlugin. It has two key options you need to configure:
 
    :::
 
-## 4. Install and initialize the plugin
+## Installing and initializing the plugin
 
 Finally, the last step is to install and initialize the xPlugin. You need to do this in the
 `main.ts` or `main.js file` of the project.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.102",
+  "version": "3.0.0-alpha.103",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -125,5 +125,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "47c002879464f4559e8e256cf2b1d1122e81a181"
+  "gitHead": "ebf432d98e58e51b0a1eec708b1d1a78e13f0bb6"
 }