@empathyco/x-components 3.0.0-alpha.37 → 3.0.0-alpha.38

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 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.38](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.37...@empathyco/x-components@3.0.0-alpha.38) (2021-12-22)
+
+### Features
+
+- **desing-system:** Add new color tokens. (#275)
+  ([e93fcc4](https://github.com/empathyco/x/commit/e93fcc4cea0e975441695f14a66b0863cb5896af)),
+  closes [EX-5171](https://searchbroker.atlassian.net/browse/EX-5171)
+- **test:** refactor base tests to cypress component testing
+  ([dc7a924](https://github.com/empathyco/x/commit/dc7a924b612411470742d222bcc6531fa656ce13)),
+  closes [EX-4928](https://searchbroker.atlassian.net/browse/EX-4928)
+- **x-plugin:** Add selected sort (#274)
+  ([b4c0d14](https://github.com/empathyco/x/commit/b4c0d140ca5eba8de189068fef5dd2a6249c1207)),
+  closes [EX-5165](https://searchbroker.atlassian.net/browse/EX-5165)
+
+### Bug Fixes
+
+- **components:** Fix infinite scroll not working in Android Chrome. (#277)
+  ([19c3d77](https://github.com/empathyco/x/commit/19c3d77f124a1bbc099bae0e5dbb80fb30a132a1)),
+  closes [EX-5181](https://searchbroker.atlassian.net/browse/EX-5181)
+- **search:** rows and start parameters calculations moved from getter to action to avoid multiple
+  requests
+  ([84752ba](https://github.com/empathyco/x/commit/84752ba3eb1ab728b6adf5cc62ea31646f42b959)),
+  closes [EX-5047](https://searchbroker.atlassian.net/browse/EX-5047)
+
+# 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.37](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.36...@empathyco/x-components@3.0.0-alpha.37) (2021-12-15)
 
 ### Features

package/design-system/base.css

@@ -12,9 +12,11 @@
   --x-color-base-neutral-35: #595959;
   --x-color-base-neutral-70: #b3b3b3;
   --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff; }
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #b90276;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26; }
 
-/* Update this value if adding more values */
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;

package/design-system/default-theme.css

@@ -2190,9 +2190,11 @@
   --x-color-base-neutral-35: #595959;
   --x-color-base-neutral-70: #b3b3b3;
   --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff; }
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #b90276;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26; }
 
-/* Update this value if adding more values */
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;

package/design-system/full-theme.css

@@ -12,9 +12,11 @@
   --x-color-base-neutral-35: #595959;
   --x-color-base-neutral-70: #b3b3b3;
   --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff; }
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #b90276;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26; }
 
-/* Update this value if adding more values */
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -3028,7 +3030,7 @@
   --x-color-text-default: var(--x-color-text-accent); }
 
 :root {
-  --x-color-text-accent: var(--x-color-base-auxiliary); }
+  --x-color-text-accent: var(--x-color-base-accent); }
 
 .x-text--bold.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-bold); }
@@ -3187,6 +3189,15 @@
 .x-background--neutral-100 {
   background-color: var(--x-color-base-neutral-100) !important; }
 
+.x-background--accent {
+  background-color: var(--x-color-base-accent) !important; }
+
+.x-background--enable {
+  background-color: var(--x-color-base-enable) !important; }
+
+.x-background--disable {
+  background-color: var(--x-color-base-disable) !important; }
+
 .x-border-color--lead {
   border-color: var(--x-color-base-lead) !important; }
 
@@ -3208,30 +3219,15 @@
 .x-border-color--neutral-100 {
   border-color: var(--x-color-base-neutral-100) !important; }
 
-/* Update this value if adding more values */
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important; }
+
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important; }
+
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important; }
 
-@use 'sass:string';
 .x-border-radius--00 {
   border-radius: 0 !important; }
 
@@ -4746,46 +4742,6 @@
   border-width: 0px !important;
   border-style: solid !important; }
 
-.x-border-width--01 {
-  border-width: 1px !important;
-  border-style: solid !important; }
-
-.x-border-width--02 {
-  border-width: 2px !important;
-  border-style: solid !important; }
-
-.x-border-width--03 {
-  border-width: 3px !important;
-  border-style: solid !important; }
-
-.x-border-width--04 {
-  border-width: 4px !important;
-  border-style: solid !important; }
-
-.x-border-width--05 {
-  border-width: 5px !important;
-  border-style: solid !important; }
-
-.x-border-width--06 {
-  border-width: 6px !important;
-  border-style: solid !important; }
-
-.x-border-width--07 {
-  border-width: 7px !important;
-  border-style: solid !important; }
-
-.x-border-width--08 {
-  border-width: 8px !important;
-  border-style: solid !important; }
-
-.x-border-width--09 {
-  border-width: 9px !important;
-  border-style: solid !important; }
-
-.x-border-width--10 {
-  border-width: 10px !important;
-  border-style: solid !important; }
-
 .x-border-width--top-00 {
   border-top-width: 0px !important;
   border-style: solid !important; }
@@ -4812,6 +4768,10 @@
 .x-border-width--left-00 {
   border-style: solid !important; }
 
+.x-border-width--01 {
+  border-width: 1px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-01 {
   border-top-width: 1px !important;
   border-style: solid !important; }
@@ -4838,6 +4798,10 @@
 .x-border-width--left-01 {
   border-style: solid !important; }
 
+.x-border-width--02 {
+  border-width: 2px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-02 {
   border-top-width: 2px !important;
   border-style: solid !important; }
@@ -4864,6 +4828,10 @@
 .x-border-width--left-02 {
   border-style: solid !important; }
 
+.x-border-width--03 {
+  border-width: 3px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-03 {
   border-top-width: 3px !important;
   border-style: solid !important; }
@@ -4890,6 +4858,10 @@
 .x-border-width--left-03 {
   border-style: solid !important; }
 
+.x-border-width--04 {
+  border-width: 4px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-04 {
   border-top-width: 4px !important;
   border-style: solid !important; }
@@ -4916,6 +4888,10 @@
 .x-border-width--left-04 {
   border-style: solid !important; }
 
+.x-border-width--05 {
+  border-width: 5px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-05 {
   border-top-width: 5px !important;
   border-style: solid !important; }
@@ -4942,6 +4918,10 @@
 .x-border-width--left-05 {
   border-style: solid !important; }
 
+.x-border-width--06 {
+  border-width: 6px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-06 {
   border-top-width: 6px !important;
   border-style: solid !important; }
@@ -4968,6 +4948,10 @@
 .x-border-width--left-06 {
   border-style: solid !important; }
 
+.x-border-width--07 {
+  border-width: 7px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-07 {
   border-top-width: 7px !important;
   border-style: solid !important; }
@@ -4994,6 +4978,10 @@
 .x-border-width--left-07 {
   border-style: solid !important; }
 
+.x-border-width--08 {
+  border-width: 8px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-08 {
   border-top-width: 8px !important;
   border-style: solid !important; }
@@ -5020,6 +5008,10 @@
 .x-border-width--left-08 {
   border-style: solid !important; }
 
+.x-border-width--09 {
+  border-width: 9px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-09 {
   border-top-width: 9px !important;
   border-style: solid !important; }
@@ -5046,6 +5038,10 @@
 .x-border-width--left-09 {
   border-style: solid !important; }
 
+.x-border-width--10 {
+  border-width: 10px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-10 {
   border-top-width: 10px !important;
   border-style: solid !important; }
@@ -5110,6 +5106,8 @@
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
 :root {
+  /* Shadow none */
+  --x-string-box-shadow-00: none;
   /* Shadow 1dp */
   --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
     0 1px 3px 0 rgba(0, 0, 0, 0.2);
@@ -5174,6 +5172,15 @@
 .x-font-color--neutral-100 {
   color: var(--x-color-base-neutral-100) !important; }
 
+.x-font-color--accent {
+  color: var(--x-color-base-accent) !important; }
+
+.x-font-color--enable {
+  color: var(--x-color-base-enable) !important; }
+
+.x-font-color--disable {
+  color: var(--x-color-base-disable) !important; }
+
 .x-font-weight--light {
   font-weight: var(--x-number-font-weight-base-light) !important; }
 
@@ -5183,30 +5190,6 @@
 .x-font-weight--bold {
   font-weight: var(--x-number-font-weight-base-bold) !important; }
 
-/* Update this value if adding more values */
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
-
-@use 'sass:string';
 .x-margin--auto {
   margin: auto !important; }
 
@@ -5669,30 +5652,6 @@
 [dir="rtl"] .x-margin--left-20 {
   margin-right: var(--x-size-base-20) !important; }
 
-/* Update this value if adding more values */
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
-
-@use 'sass:string';
 .x-padding--00 {
   padding: 0 !important; }
 
@@ -6133,3 +6092,4 @@
 
 [dir="rtl"] .x-padding--left-20 {
   padding-right: var(--x-size-base-20) !important; }
+

package/design-system/typography-accent.token.css

@@ -1,2 +1,2 @@
 :root {
-  --x-color-text-accent: var(--x-color-base-auxiliary); }
+  --x-color-text-accent: var(--x-color-base-accent); }

package/design-system/utilities-background-color.css

@@ -18,3 +18,12 @@
 
 .x-background--neutral-100 {
   background-color: var(--x-color-base-neutral-100) !important; }
+
+.x-background--accent {
+  background-color: var(--x-color-base-accent) !important; }
+
+.x-background--enable {
+  background-color: var(--x-color-base-enable) !important; }
+
+.x-background--disable {
+  background-color: var(--x-color-base-disable) !important; }

package/design-system/utilities-border-color.css

@@ -18,3 +18,12 @@
 
 .x-border-color--neutral-100 {
   border-color: var(--x-color-base-neutral-100) !important; }
+
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important; }
+
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important; }
+
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important; }

package/design-system/utilities-border-radius.css

@@ -1,27 +1,3 @@
-/* Update this value if adding more values */
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
-
-@use 'sass:string';
 .x-border-radius--00 {
   border-radius: 0 !important; }
 

package/design-system/utilities-border-width.css

@@ -6,46 +6,6 @@
   border-width: 0px !important;
   border-style: solid !important; }
 
-.x-border-width--01 {
-  border-width: 1px !important;
-  border-style: solid !important; }
-
-.x-border-width--02 {
-  border-width: 2px !important;
-  border-style: solid !important; }
-
-.x-border-width--03 {
-  border-width: 3px !important;
-  border-style: solid !important; }
-
-.x-border-width--04 {
-  border-width: 4px !important;
-  border-style: solid !important; }
-
-.x-border-width--05 {
-  border-width: 5px !important;
-  border-style: solid !important; }
-
-.x-border-width--06 {
-  border-width: 6px !important;
-  border-style: solid !important; }
-
-.x-border-width--07 {
-  border-width: 7px !important;
-  border-style: solid !important; }
-
-.x-border-width--08 {
-  border-width: 8px !important;
-  border-style: solid !important; }
-
-.x-border-width--09 {
-  border-width: 9px !important;
-  border-style: solid !important; }
-
-.x-border-width--10 {
-  border-width: 10px !important;
-  border-style: solid !important; }
-
 .x-border-width--top-00 {
   border-top-width: 0px !important;
   border-style: solid !important; }
@@ -72,6 +32,10 @@
 .x-border-width--left-00 {
   border-style: solid !important; }
 
+.x-border-width--01 {
+  border-width: 1px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-01 {
   border-top-width: 1px !important;
   border-style: solid !important; }
@@ -98,6 +62,10 @@
 .x-border-width--left-01 {
   border-style: solid !important; }
 
+.x-border-width--02 {
+  border-width: 2px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-02 {
   border-top-width: 2px !important;
   border-style: solid !important; }
@@ -124,6 +92,10 @@
 .x-border-width--left-02 {
   border-style: solid !important; }
 
+.x-border-width--03 {
+  border-width: 3px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-03 {
   border-top-width: 3px !important;
   border-style: solid !important; }
@@ -150,6 +122,10 @@
 .x-border-width--left-03 {
   border-style: solid !important; }
 
+.x-border-width--04 {
+  border-width: 4px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-04 {
   border-top-width: 4px !important;
   border-style: solid !important; }
@@ -176,6 +152,10 @@
 .x-border-width--left-04 {
   border-style: solid !important; }
 
+.x-border-width--05 {
+  border-width: 5px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-05 {
   border-top-width: 5px !important;
   border-style: solid !important; }
@@ -202,6 +182,10 @@
 .x-border-width--left-05 {
   border-style: solid !important; }
 
+.x-border-width--06 {
+  border-width: 6px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-06 {
   border-top-width: 6px !important;
   border-style: solid !important; }
@@ -228,6 +212,10 @@
 .x-border-width--left-06 {
   border-style: solid !important; }
 
+.x-border-width--07 {
+  border-width: 7px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-07 {
   border-top-width: 7px !important;
   border-style: solid !important; }
@@ -254,6 +242,10 @@
 .x-border-width--left-07 {
   border-style: solid !important; }
 
+.x-border-width--08 {
+  border-width: 8px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-08 {
   border-top-width: 8px !important;
   border-style: solid !important; }
@@ -280,6 +272,10 @@
 .x-border-width--left-08 {
   border-style: solid !important; }
 
+.x-border-width--09 {
+  border-width: 9px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-09 {
   border-top-width: 9px !important;
   border-style: solid !important; }
@@ -306,6 +302,10 @@
 .x-border-width--left-09 {
   border-style: solid !important; }
 
+.x-border-width--10 {
+  border-width: 10px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-10 {
   border-top-width: 10px !important;
   border-style: solid !important; }

package/design-system/utilities-box-shadow.css

@@ -2,6 +2,8 @@
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
 :root {
+  /* Shadow none */
+  --x-string-box-shadow-00: none;
   /* Shadow 1dp */
   --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
     0 1px 3px 0 rgba(0, 0, 0, 0.2);

package/design-system/utilities-font-color.css

@@ -18,3 +18,12 @@
 
 .x-font-color--neutral-100 {
   color: var(--x-color-base-neutral-100) !important; }
+
+.x-font-color--accent {
+  color: var(--x-color-base-accent) !important; }
+
+.x-font-color--enable {
+  color: var(--x-color-base-enable) !important; }
+
+.x-font-color--disable {
+  color: var(--x-color-base-disable) !important; }

package/design-system/utilities-margin.css

@@ -1,27 +1,3 @@
-/* Update this value if adding more values */
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
-
-@use 'sass:string';
 .x-margin--auto {
   margin: auto !important; }
 

package/design-system/utilities-padding.css

@@ -1,27 +1,3 @@
-/* Update this value if adding more values */
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
-
-@use 'sass:string';
 .x-padding--00 {
   padding: 0 !important; }
 

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

@@ -9,5 +9,5 @@ Default implementation for [SearchActions.fetchAndSaveSearchResponse()](./x-comp
 <b>Signature:</b>
 
 ```typescript
-fetchAndSaveSearchResponse: (context: SearchActionContext, request: SearchRequest | null) => void | Promise<void>
+fetchAndSaveSearchResponse: (context: SearchActionContext, request: InternalSearchRequest | null) => void | Promise<void>
 ```

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

@@ -9,5 +9,5 @@ Requests and stores the search response.
 <b>Signature:</b>
 
 ```typescript
-fetchAndSaveSearchResponseWire: import("../..").Wire<import("@empathyco/x-adapter").SearchRequest | null>
+fetchAndSaveSearchResponseWire: import("../..").Wire<import("./types").InternalSearchRequest | null>
 ```