@empathyco/x-components 3.0.0-alpha.86 → 3.0.0-alpha.87

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 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.87](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.86...@empathyco/x-components@3.0.0-alpha.87) (2022-04-26)
+
+### Features
+
+- **extra-params:** makes `excludedExtraParams` configurable
+  ([ca2bed1](https://github.com/empathyco/x/commit/ca2bed17c7ef8ed893a65e7d1a055901491ea8fa))
+
+### Documentation
+
+- review build search UI docs
+  ([fc72ad7](https://github.com/empathyco/x/commit/fc72ad78fbff0deaa2f1a417c8e7f005ea2c8470))
+
+# 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.86](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.85...@empathyco/x-components@3.0.0-alpha.86) (2022-04-19)
 
 ### Features

package/design-system/full-theme.css

@@ -2725,6 +2725,27 @@
 .x-message > p {
   margin: 0;
 }
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
+  --x-font-family-message-default: var(--x-font-family-title3);
+  --x-size-font-message-default: var(--x-size-font-title3);
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
 .x-option-list--bottom.x-option-list,
 .x-option-list--bottom .x-option-list {
   --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
@@ -3256,23 +3277,6 @@
     opacity: 1;
   }
 }
-:root {
-  --x-color-border-result-default: var(--x-color-base-lead);
-  --x-color-border-result-picture-default: var(--x-color-border-result-default);
-  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
-  --x-color-border-result-description-default: var(--x-color-border-result-default);
-  --x-color-background-result-default: transparent;
-  --x-size-padding-result-default: 0;
-  --x-size-padding-result-picture-default: 0;
-  --x-size-padding-result-overlay-default: 0;
-  --x-size-padding-result-description-default: 0;
-  --x-size-gap-result-default: var(--x-size-base-03);
-  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
-  --x-size-border-width-result-default: 0;
-  --x-size-border-width-result-picture-default: 0;
-  --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0;
-}
 .x-row {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
@@ -7547,23 +7551,19 @@
 }
 
 :root {
-  --x-string-justify-message-default: center;
-  --x-size-gap-message-default: var(--x-size-base-03);
-  --x-size-padding-message-default: var(--x-size-base-06);
-  --x-color-background-message-default: var(--x-color-base-neutral-95);
-  --x-color-border-message-default: var(--x-color-background-message-default);
-  --x-color-text-message-default: var(--x-color-text-default);
-  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
-  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-width-message-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
-  --x-font-family-message-default: var(--x-font-family-title3);
-  --x-size-font-message-default: var(--x-size-font-title3);
-  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-picture-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --x-size-border-width-result-default: 0;
+  --x-size-border-width-result-picture-default: 0;
+  --x-size-border-width-result-overlay-default: 0;
+  --x-size-border-width-result-description-default: 0;
 }

package/docs/API-reference/api/x-components.snippetconfigextraparams.excludedextraparams.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; [SnippetConfigExtraParams](./x-components.snippetconfigextraparams.md) &gt; [excludedExtraParams](./x-components.snippetconfigextraparams.excludedextraparams.md)
+
+## SnippetConfigExtraParams.excludedExtraParams property
+
+Collection of properties from the snippet config to exclude from the extra params object.
+
+<b>Signature:</b>
+
+```typescript
+protected excludedExtraParams: Array<keyof SnippetConfig>;
+```

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

@@ -17,5 +17,6 @@ export default class SnippetConfigExtraParams extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [excludedExtraParams](./x-components.snippetconfigextraparams.excludedextraparams.md) |  | Array&lt;keyof [SnippetConfig](./x-components.snippetconfig.md)<!-- -->&gt; | Collection of properties from the snippet config to exclude from the extra params object. |
 |  [values?](./x-components.snippetconfigextraparams.values.md) |  | Dictionary&lt;unknown&gt; | <i>(Optional)</i> A Dictionary where the keys are the extra param names and its values. |
 

package/docs/API-reference/components/extra-params/x-components.snippet-config-extra-params.md

@@ -11,9 +11,10 @@ objects of every x-module.
 
 ## Props
 
-| Name                | Description                                                           | Type                    | Default       |
-| ------------------- | --------------------------------------------------------------------- | ----------------------- | ------------- |
-| <code>values</code> | A Dictionary where the keys are the extra param names and its values. | <code>Dictionary</code> | <code></code> |
+| Name                             | Description                                                                                    | Type                    | Default                                                                                                                                                                                                        |
+| -------------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>values</code>              | A Dictionary where the keys are the extra param names and its values.                          | <code>Dictionary</code> | <code></code>                                                                                                                                                                                                  |
+| <code>excludedExtraParams</code> | Collection of properties from the snippet config to exclude from the<br />extra params object. | <code>Array</code>      | <code>(): Array<keyof SnippetConfig> => [<br /> 'callbacks',<br /> 'productId',<br /> 'instance',<br /> 'lang',<br /> 'searchLang',<br /> 'consent',<br /> 'documentDirection',<br /> 'currency'<br />]</code> |
 
 ## See it in action
 

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

@@ -6,13 +6,15 @@ tags:
   - use x components
   - x components
   - interface x
+  - x archetype
+  - archetype
 ---
 
 ::: slot left-intro-column
 
-## Getting started with Interface X Components
+## Getting started with Interface X
 
-Start building your search and discovery experience in a few simple steps:
+Start building your search and discovery experience:
 
 :::
 
@@ -22,12 +24,12 @@ Start building your search and discovery experience in a few simple steps:
 
 :::
 
-- **Discover more about the [Interface X ecosystem](#the-interface-x-ecosystem)** and how
-  Interface X works.
+- **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
   application.
-- **[Develop using the Interface X](#develop-with-interface-x)** inside your current project.
-- **[How to use and configure the Interface X Components](#how-to-use-and-configure-the-interface-x-components)**
+- **[Use and configure the Interface X Components](#use-and-configure-the-interface-x-components)**
   in your project.
 
 <!-- 3. Style your UI. 4. Translate your search experience-->
@@ -43,25 +45,15 @@ numerous components to choose from, and the catalog evolves quickly with new exp
 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](x-architecture/README.md)**.
-
-## Integrate Interface X Archetype
-
-Once you have finished developing or extending your search interface using the
-Interface&nbsp;X&nbsp;Archetype project you will probably want to integrate it into your current
-store. The integration of an existing Archetype into your project is pretty straightforward. You
-will need to load the generated Javascript into your website and initialise it.
-
-To start integrating an existent Archetype into your project please visit
-[extended guide about Archetype integration](web-archetype-integration-guide.md).
+**[architecture](web-x-architecture.md)**.
 
 ## Develop with Interface X
 
-You can use the Interface X in a project in two ways:
+You can use the Interface&nbsp;X in a project in two ways:
 
 - using the separate **Interface&nbsp;X&nbsp;Archetype** project, an out-of-the-box project with all
-  you need to get up and running fast, or
-- integrating the individual **Interface&nbsp;X&nbsp;Components** library in your Vue project for a
+  you need to get up and running fast
+- importing the individual **Interface&nbsp;X&nbsp;Components** library in your Vue project for a
   more custom approach.
 
 ::: note
@@ -73,9 +65,9 @@ You can use Empathy Search API, Elasticsearch, or Solr endpoints with both appro
 ##### Develop 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. Instead of starting from a completely
-blank canvas, ramp up quickly with an already working search and discovery experience. This is the
-perfect solution for most cases. But don’t worry! It’s still super flexible! You’re still able to:
+perfect combination of all the existing X&nbsp;Components. It allows you to ramp up quickly with an
+already working search and discovery experience, instead of starting from a completely blank canvas.
+This is the perfect solution for most cases as you can use it as a springboard to:
 
 - Change the default styles for styles that match your application through design tokens or custom
   CSS.
@@ -86,33 +78,46 @@ perfect solution for most cases. But don’t worry! It’s still super flexible!
 - Create new components or modify the existing ones.
 
 To start developing the X&nbsp;Archetype project, see
-**[Develop via Interface X Archetype](web-archetype-development-guide.md)**.
+**[Develop using Interface&nbsp;X&nbsp;Archetype](web-archetype-development-guide.md)**.
 
 ##### Develop via Interface X Components library
 
 This is the more deep and flexible use of the
-**[Interface X Components library](https://github.com/empathyco/x/tree/main/packages/x-components)**,
+**[Interface&nbsp;X&nbsp;Components library](https://github.com/empathyco/x/tree/main/packages/x-components)**,
 allowing you to import any components you desire into your Vue application. It lets you connect,
 customize, extend, style, or even create new components without any limitations. This is the way to
-go if you like to look under the hood!
+go if you like to look under the hood.
 
 - Mix and match with other Vue components.
 - Implement in Vue or React projects.
 - Extend component behavior with your own development.
 - Determine styles using design tokens or custom CSS.
 
-To get started with the X Components library, check out
-**[Develop using Interface X Components library](web-x-components-integration-guide.md)**.
+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
+
+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.
+
+To integrate the Interface&nbsp;X&nbsp;Archetype into your project, just **load** the generated
+JavaScript file into your website and **initialize** it.
+
+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
 
-## How to use and configure 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.
 
-Using the Interface&nbsp;X&nbsp;Components is a piece of cake! Just import and register the
-component, include it in your template, and you’re ready to go! What’s more, each component offers
-multiple configuration parameters to play around with, allowing you greater flexibility over the
-experience.
+What’s more, each component offers multiple configuration parameters to play around with, giving you
+greater flexibility over the experience.
 
 Unsure how to start? Check out
-**[How to use & configure Interface X Components in your project](web-how-to-use-x-components-guide.md)**.
+**[How to use and configure Interface&nbsp;X&nbsp;Components in your project](web-how-to-use-x-components-guide.md)**.
 
 <!--
 ## Style your UI

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

@@ -1,30 +1,26 @@
 ---
-title: Interface X Archetype Development
+title: Develop using Interface X Archetype
 tags:
   - development
   - archetype
-  - X Components archetype development
+  - X archetype development
   - x development
   - interface x
   - x components
   - archetype development
-  - archetype integration
 ---
 
-# Interface X Archetype Development
+# Develop using Interface X Archetype
 
-In this tutorial, you’ll learn how to start developing with the Interface X Archetype
-project in your store in a matter of minutes, so you can create a search interface layer based on
-predefined features and components.
+In this tutorial, you’ll learn how to build a search and discovery layer based on predefined
+features and components in a matter of minutes using the Interface X Archetype.
 
 For this tutorial, the Empathy Search API is used, but you can use any search API. This guide
 requires knowledge of JavaScript and Vue.js.
 
 ::: note Before you begin
 
-To integrate Interface X Archetype as a search UI layer, you need:
-
-<br/>
+To use Interface&nbsp;X&nbsp;Archetype as a search UI layer, you need:
 
 - **Empathy Search API** (or any search API that you use to retrieve search data).
 - **Empathy Search Adapter** to communicate with the Empathy Search API (or any search adapter to
@@ -32,10 +28,10 @@ To integrate Interface&nbsp;X&nbsp;Archetype as a search UI layer, you need:
 
 :::
 
-##### Steps to start developing in a X Archetype project:
+##### Steps to build a search layer using the X Archetype project:
 
 1. **Clone** the X&nbsp;Archetype project and **initialize** your repository.
-2. Install the **project dependencies** and execute the project.
+2. Install the **project dependencies** and run the project development server.
 3. Configure the **search adapter**.
 4. Configure the **xPlugin**.
 
@@ -109,8 +105,8 @@ Interface&nbsp;X&nbsp;Archetype repository.
 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
 the Empathy Search API. The Empathy Search Adapter contains a sample configuration for setup, global
-configurations, or mappers that points to a demo environment. You need to make some adjustments in
-the configuration according to the search features you use in your project.
+configurations, or mappers that points to a demo environment. You need to adjust the configuration
+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).
@@ -126,13 +122,18 @@ For detailed information about other configuration options in the Empathy Search
 
 Although you configure the values for the `instance`, `language`, `scope`, and `endpoint` options
 when integrating the project, you can still change these values when the project is deployed. Use
-the `/x-archetype/public/snippet-script.js` file to perform hot changes for `lang`, `store`,
-`device`, and `catalog` parameters.
+the `/x-archetype/public/snippet-script.js` file to initialize values for `lang`, `store`, `device`,
+and `catalog` parameters.
 
 For example, you may configure the adapter to use EN as `lang` so that when you search, the results
 are displayed in English. However, if you want to deploy the application in Spain, you want the
 `lang` to be ES. You change these values in the `snippet-script.js` file.
 
+</br>
+
+For detailed information, see
+[Snippet configuration](web-archetype-integration-guide.md#snippet-configuration)
+
 :::
 
 ## 4. Configure the plugin
@@ -167,21 +168,21 @@ new XInstaller(installXOptions).init({
 });
 ```
 
----
+::: develop Next steps
 
-### Next steps
+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:
 
-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).
-- Change the configuration of [X Components](web-how-to-use-x-components-guide.md) or create new
-  ones.
+- [**Integrate an Interface&nbsp;X&nbsp;Archetype project** into an existing website](web-archetype-integration-guide.md).
+- Change the **configuration of [X&nbsp;Components](web-how-to-use-x-components-guide.md)** or
+  create new ones.
 - Adapt the
-  [design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)
+  **[design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)**
   to your branding.
 - Manage
-  [internationalization options](https://github.com/empathyco/x-archetype/blob/main/docs/i18n.md) to
-  support different languages.
+  **[internationalization options](https://github.com/empathyco/x-archetype/blob/main/docs/i18n.md)**
+  to support different languages.
+
+:::
 
 <!-- add links to design system and internationalization content pages when ready-->