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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/design-system/default-theme.css +28 -28
  3. package/design-system/full-theme.css +53 -54
  4. package/docs/build-search-ui/web-archetype-development-guide.md +10 -7
  5. package/docs/build-search-ui/web-archetype-integration-guide.md +15 -14
  6. package/docs/build-search-ui/web-x-components-development-guide.md +5 -4
  7. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,19 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+ ### Documentation
9
+
10
+ - update archetype integration and x-adapter docs (#628)
11
+ ([247899e](https://github.com/empathyco/x/commit/247899e39d4f415f59b8ec1b7376fc72530028c2)),
12
+ closes [EX-6728](https://searchbroker.atlassian.net/browse/EX-6728)
13
+
14
+ # Change Log
15
+
16
+ All notable changes to this project will be documented in this file. See
17
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
18
+
6
19
  ## [3.0.0-alpha.144](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.143...@empathyco/x-components@3.0.0-alpha.144) (2022-08-01)
7
20
 
8
21
  ### ⚠ BREAKING CHANGES
package/design-system/default-theme.css CHANGED
@@ -1166,6 +1166,34 @@
1166
1166
  font-weight: var(--x-number-font-weight-input-placeholder-default);
1167
1167
  line-height: var(--x-size-line-height-input-placeholder-default);
1168
1168
  }
1169
+ :root {
1170
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
1171
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
1172
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
1173
+ --x-color-text-input-default: var(--x-color-text-default);
1174
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
1175
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
1176
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
1177
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
1178
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
1179
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
1180
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
1181
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
1182
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
1183
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
1184
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
1185
+ --x-size-height-input-default: var(--x-size-base-07);
1186
+ --x-size-padding-right-input-default: var(--x-size-base-04);
1187
+ --x-size-padding-left-input-default: var(--x-size-base-04);
1188
+ --x-font-family-input-default: var(--x-font-family-text);
1189
+ --x-size-font-input-default: var(--x-size-font-text);
1190
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
1191
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
1192
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
1193
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
1194
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
1195
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
1196
+ }
1169
1197
  :root {
1170
1198
  --x-string-flow-list: column nowrap;
1171
1199
  --x-size-padding-list: 0;
@@ -2878,32 +2906,4 @@
2878
2906
  --x-size-line-height-base-s: 16px;
2879
2907
  --x-size-line-height-base-m: 24px;
2880
2908
  --x-size-line-height-base-l: 32px;
2881
- }
2882
- :root {
2883
- --x-color-background-input-default: var(--x-color-base-neutral-100);
2884
- --x-color-border-input-default: var(--x-color-base-neutral-70);
2885
- --x-color-border-input-default-focus: var(--x-color-base-lead);
2886
- --x-color-text-input-default: var(--x-color-text-default);
2887
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
2888
- --x-size-border-width-input-default: var(--x-size-border-width-base);
2889
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
2890
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
2891
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
2892
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
2893
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
2894
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
2895
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
2896
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
2897
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
2898
- --x-size-height-input-default: var(--x-size-base-07);
2899
- --x-size-padding-right-input-default: var(--x-size-base-04);
2900
- --x-size-padding-left-input-default: var(--x-size-base-04);
2901
- --x-font-family-input-default: var(--x-font-family-text);
2902
- --x-size-font-input-default: var(--x-size-font-text);
2903
- --x-size-line-height-input-default: var(--x-size-line-height-text);
2904
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
2905
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
2906
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
2907
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
2908
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
2909
2909
  }
package/design-system/full-theme.css CHANGED
@@ -121,6 +121,59 @@
121
121
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
122
122
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
123
123
  }
124
+ [dir="ltr"] .x-button {
125
+ padding-right: var(--x-size-padding-right-button-default);
126
+ }
127
+ [dir="rtl"] .x-button {
128
+ padding-left: var(--x-size-padding-right-button-default);
129
+ }
130
+ [dir="ltr"] .x-button {
131
+ padding-left: var(--x-size-padding-left-button-default);
132
+ }
133
+ [dir="rtl"] .x-button {
134
+ padding-right: var(--x-size-padding-left-button-default);
135
+ }
136
+ [dir="ltr"] .x-button {
137
+ border-left-width: var(--x-size-border-width-left-button-default);
138
+ }
139
+ [dir="rtl"] .x-button {
140
+ border-right-width: var(--x-size-border-width-left-button-default);
141
+ }
142
+ [dir="ltr"] .x-button {
143
+ border-right-width: var(--x-size-border-width-right-button-default);
144
+ }
145
+ [dir="rtl"] .x-button {
146
+ border-left-width: var(--x-size-border-width-right-button-default);
147
+ }
148
+ .x-button {
149
+ display: inline-flex;
150
+ justify-content: center;
151
+ align-items: center;
152
+ box-sizing: border-box;
153
+ margin: 0;
154
+ gap: var(--x-size-gap-button-default);
155
+ min-height: var(--x-size-height-button-default);
156
+ background-color: var(--x-color-background-button-default);
157
+ border-color: var(--x-color-border-button-default);
158
+ color: var(--x-color-text-button-default);
159
+ border-style: solid;
160
+ border-top-width: var(--x-size-border-width-top-button-default);
161
+ border-bottom-width: var(--x-size-border-width-bottom-button-default);
162
+ border-radius: var(--x-size-border-radius-top-left-button-default) var(--x-size-border-radius-top-right-button-default) var(--x-size-border-radius-bottom-right-button-default) var(--x-size-border-radius-bottom-left-button-default);
163
+ font-family: var(--x-font-family-button-default);
164
+ font-size: var(--x-size-font-button-default);
165
+ font-weight: var(--x-number-font-weight-button-default);
166
+ line-height: var(--x-size-line-height-button-default);
167
+ cursor: pointer;
168
+ }
169
+ @media not all and (min-resolution: 0.001dpcm) {
170
+ .x-button {
171
+ gap: 0;
172
+ }
173
+ .x-button > *:not(:last-child) {
174
+ margin-right: var(--x-size-gap-button-default);
175
+ }
176
+ }
124
177
  :root {
125
178
  --x-color-background-button-default: var(--x-color-base-lead);
126
179
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -7540,57 +7593,3 @@
7540
7593
  .x-normal-case {
7541
7594
  text-transform: none;
7542
7595
  }
7543
-
7544
- [dir="ltr"] .x-button {
7545
- padding-right: var(--x-size-padding-right-button-default);
7546
- }
7547
- [dir="rtl"] .x-button {
7548
- padding-left: var(--x-size-padding-right-button-default);
7549
- }
7550
- [dir="ltr"] .x-button {
7551
- padding-left: var(--x-size-padding-left-button-default);
7552
- }
7553
- [dir="rtl"] .x-button {
7554
- padding-right: var(--x-size-padding-left-button-default);
7555
- }
7556
- [dir="ltr"] .x-button {
7557
- border-left-width: var(--x-size-border-width-left-button-default);
7558
- }
7559
- [dir="rtl"] .x-button {
7560
- border-right-width: var(--x-size-border-width-left-button-default);
7561
- }
7562
- [dir="ltr"] .x-button {
7563
- border-right-width: var(--x-size-border-width-right-button-default);
7564
- }
7565
- [dir="rtl"] .x-button {
7566
- border-left-width: var(--x-size-border-width-right-button-default);
7567
- }
7568
- .x-button {
7569
- display: inline-flex;
7570
- justify-content: center;
7571
- align-items: center;
7572
- box-sizing: border-box;
7573
- margin: 0;
7574
- gap: var(--x-size-gap-button-default);
7575
- min-height: var(--x-size-height-button-default);
7576
- background-color: var(--x-color-background-button-default);
7577
- border-color: var(--x-color-border-button-default);
7578
- color: var(--x-color-text-button-default);
7579
- border-style: solid;
7580
- border-top-width: var(--x-size-border-width-top-button-default);
7581
- border-bottom-width: var(--x-size-border-width-bottom-button-default);
7582
- border-radius: var(--x-size-border-radius-top-left-button-default) var(--x-size-border-radius-top-right-button-default) var(--x-size-border-radius-bottom-right-button-default) var(--x-size-border-radius-bottom-left-button-default);
7583
- font-family: var(--x-font-family-button-default);
7584
- font-size: var(--x-size-font-button-default);
7585
- font-weight: var(--x-number-font-weight-button-default);
7586
- line-height: var(--x-size-line-height-button-default);
7587
- cursor: pointer;
7588
- }
7589
- @media not all and (min-resolution: 0.001dpcm) {
7590
- .x-button {
7591
- gap: 0;
7592
- }
7593
- .x-button > *:not(:last-child) {
7594
- margin-right: var(--x-size-gap-button-default);
7595
- }
7596
- }
package/docs/build-search-ui/web-archetype-development-guide.md CHANGED
@@ -22,9 +22,9 @@ requires knowledge of JavaScript and Vue.js.
22
22
 
23
23
  To use Interface X Archetype as a search UI layer, you need:
24
24
 
25
- - **Empathy Search API** (or any search API that you use to retrieve search data).
26
- - **Empathy Search Adapter** to communicate with the Empathy Search API (or any search adapter to
27
- connect with the search API you are using).
25
+ - **Empathy Platform Search API** (or any search API that you use to retrieve search data).
26
+ - **Empathy Platform Search Adapter** to communicate with the Empathy Platform Search API (or the
27
+ Empathy Search Adapter to connect with the search API you are using).
28
28
 
29
29
  :::
30
30
 
@@ -102,16 +102,19 @@ Interface X Archetype repository.
102
102
 
103
103
  ## Configuring the search adapter
104
104
 
105
- Before using your project, configure the Empathy Search Adapter in the
106
- `x-archetype/src/adapter/adapter.ts` file to make it work with the Empathy Search API.
105
+ Before using your project, configure the Empathy Platform Search Adapter in the
106
+ `x-archetype/src/adapter/adapter.ts` file. The Empathy Platform Search Adapter contains a sample
107
+ configuration for setup, global configurations, or mappers that points to a demo environment. You
108
+ need to adjust the configuration according to the search features you use in your project.
107
109
 
108
110
  Export the required search adapter with your configuration as you will need it for the search
109
111
  [xPlugin configuration](#configuring-the-plugin).
110
112
 
111
113
  ::: interact
112
114
 
113
- For detailed information about other configuration options in the Empathy Search Adapter, go to the
114
- [x-adapter repository](https://github.com/empathyco/x/tree/main/packages/x-adapter).
115
+ For detailed information about other configuration options in the Empathy Platform Search Adapter,
116
+ go to the
117
+ [x-adapter-platform repository](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform).
115
118
 
116
119
  :::
117
120
 
package/docs/build-search-ui/web-archetype-integration-guide.md CHANGED
@@ -69,7 +69,6 @@ initialize Interface X:
69
69
  ```js
70
70
  window.initX = {
71
71
  instance: 'my-store',
72
- env: 'live',
73
72
  scope: 'desktop',
74
73
  lang: 'en',
75
74
  currency: 'EUR',
@@ -83,7 +82,7 @@ window.initX = {
83
82
  window.initX = function () {
84
83
  return {
85
84
  instance: 'my-store',
86
- env: location.href.includes('.pre.') ? 'staging' : 'live',
85
+ env: location.href.includes('.pre.') ? 'staging' : undefined,
87
86
  scope: 'web',
88
87
  lang: localStorage.get('lang'),
89
88
  currency: localStorage.get('currency'),
@@ -105,7 +104,9 @@ more information on the supported parameters, check out
105
104
 
106
105
  Once the snippet configuration is ready, add the Interface X script to your webpage. The script
107
106
  is hosted in a URL with the following syntax:
108
- `https://x.<environment?>.empathy.co/<instance>/app.js`.
107
+
108
+ - **Production**: `https://x.empathy.co/{INSTANCE}/app.js`
109
+ - **Staging**: `https://x.staging.empathy.co/{INSTANCE}/app.js`
109
110
 
110
111
  For example, to load the production version script for the instance _my-store_, you need to add the
111
112
  following scripts to your HTML:
@@ -114,7 +115,6 @@ following scripts to your HTML:
114
115
  <script>
115
116
  window.initX = {
116
117
  instance: 'my-store',
117
- env: 'live',
118
118
  scope: 'desktop',
119
119
  lang: 'en',
120
120
  currency: 'EUR',
@@ -131,7 +131,7 @@ attribute `src` so that it points to the staging environment as follows:
131
131
  <script>
132
132
  window.initX = {
133
133
  instance: 'my-store',
134
- env: 'live', // Note that here you are using a production API with the staging version of Interface X
134
+ env: 'staging', // By removing this param you would be using a production API with the staging version of Interface X
135
135
  scope: 'desktop',
136
136
  lang: 'en',
137
137
  currency: 'EUR',
@@ -156,7 +156,9 @@ On-demand initialization allows you to control when Interface&nbsp;X is loaded.
156
156
  #### Loading the script
157
157
 
158
158
  Add the Interface&nbsp;X script hosted in a URL with the following syntax:
159
- `https://x.<environment?>.empathy.co/<instance>/app.js`.
159
+
160
+ - **Production**: `https://x.empathy.co/{INSTANCE}/app.js`
161
+ - **Staging**: `https://x.staging.empathy.co/{INSTANCE}/app.js`
160
162
 
161
163
  For example, to load the production version script for the instance _my-store_, you need to add the
162
164
  following script to your HTML:
@@ -180,11 +182,10 @@ initialization function** created automatically in the
180
182
  object to provide the initialization options:
181
183
 
182
184
  ```html
183
- <script src="https://x.empathy.co/my-store/app.js"></script>
185
+ <script src="https://x.empathy.co/my-store/app.js" type="module"></script>
184
186
  <script>
185
187
  window.InterfaceX.init({
186
188
  instance: 'my-store',
187
- env: 'live',
188
189
  scope: 'desktop',
189
190
  lang: 'en',
190
191
  currency: 'EUR',
@@ -219,12 +220,12 @@ The
219
220
  [snippet configuration](https://github.com/empathyco/x-archetype/blob/main/public/snippet-script.js)
220
221
  allows you to configure multiple initialization options for the Interface&nbsp;X project such as
221
222
  language, currency, and shopper's personal data consent. The snippet configuration supports the
222
- following configuration options:
223
+ following configuration parameters:
223
224
 
224
- | Name | Type | Description |
225
+ | Parameter | Type | Description |
225
226
  | ------------------------------------------------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
226
227
  | `instance` | `string` | _Required._ ID of the API client instance. It's provided by Empathy. |
227
- | `env` | `'live'` &#124; `'staging'` | _Optional_. API environment to use. You can use the Interface&nbsp;X production version with the staging API, and vice versa. |
228
+ | `env` | `staging` | _Optional_. API environment to use. Note that if you **do not** declare this parameter, you'll use the production API. Instead, use `env: 'staging'` to point to the staging API. |
228
229
  | `scope` | `string` | _Optional_. Context where the search interface is executed, i.e. `mobile`, `mobile-app`, `tablet`, `desktop`. |
229
230
  | `lang` | `string` | _Required._ Language to use. By default, it's used for both the frontend and the API requests. |
230
231
  | `searchLang` | `string` | _Optional_. Language to use for the API requests **only**. |
@@ -260,11 +261,10 @@ For example, you subscribe to the `UserClickedResultAddToCart` event to add a pr
260
261
  shopping cart:
261
262
 
262
263
  ```html
263
- <script src="https://x.empathy.co/my-store/app.js"></script>
264
+ <script src="https://x.empathy.co/my-store/app.js" type="module"></script>
264
265
  <script>
265
266
  window.InterfaceX.init({
266
267
  instance: 'my-store',
267
- env: 'live',
268
268
  scope: 'desktop',
269
269
  lang: 'en',
270
270
  currency: 'EUR',
@@ -297,7 +297,8 @@ etc.). See the corresponding `events.types.ts` file for each module in the
297
297
  The
298
298
  [X&nbsp;API](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-installer/api/base-api.ts)
299
299
  object allows your commerce store to communicate with Interface&nbsp;X. It supports multiple
300
- functions to integrate Interface&nbsp;X in your website.
300
+ functions to integrate Interface&nbsp;X in your website. You can access these functions inside the
301
+ `window.InterfaceX` object.
301
302
 
302
303
  | Function | Parameters | Description |
303
304
  | ------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
package/docs/build-search-ui/web-x-components-development-guide.md CHANGED
@@ -33,8 +33,7 @@ You can find the X&nbsp;Components library in the
33
33
  To integrate the X&nbsp;Components in a frontend UI, you need:
34
34
 
35
35
  - **Empathy Search API** to retrieve search data (or any other search API)
36
- - A **search adapter** to communicate with the search API. You can use the
37
- [Empathy Platform Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform)
36
+ - A **search adapter** to communicate with the search API.
38
37
  - Your commerce store built on a **Vue** project, or on a **React** project using the
39
38
  [React Wrapper](https://github.com/empathyco/x/tree/main/packages/react-wrapper).
40
39
 
@@ -93,8 +92,10 @@ If you do not use the Empathy Search API, you need to build your own adapter.
93
92
 
94
93
  :::
95
94
 
96
- For more information, see
97
- [Using the Empathy Search Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter).
95
+ For more information, see the
96
+ [Empathy Search Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter) and
97
+ [Empathy Platform Search Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform)
98
+ libraries.
98
99
 
99
100
  ## Configuring the plugin
100
101
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.144",
3
+ "version": "3.0.0-alpha.145",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -125,5 +125,5 @@
125
125
  "access": "public",
126
126
  "directory": "dist"
127
127
  },
128
- "gitHead": "542f8c7e4128adb2674c447fbfed4d14752583f5"
128
+ "gitHead": "425daae064fc399aece12544ec4c57a05494c732"
129
129
  }