feat(table component): columns resizing, reordering, sorting and rows selecting

CHANGELOG.md

@@ -2,6 +2,41 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.5.1](http://inindca///compare/v1.5.0...v1.5.1) (2020-09-18)
+
+
+### Bug Fixes
+
+* **doc-site:** fix the sort order of components ([40fcb0c](http://inindca///commit/40fcb0c0beac68670ce87a225439089d951b4a4b))
+
+## [1.5.0](http://inindca///compare/v1.4.0...v1.5.0) (2020-09-17)
+
+
+### Features
+
+* **color-styles:** exporting common color variables ([eec3866](http://inindca///commit/eec3866d0734339b9fa3beace3102178c5f50303))
+
+
+### Bug Fixes
+
+* **gux-dropdown:** better handle asynchronously loaded options ([dcc1c13](http://inindca///commit/dcc1c13033025e723e4a3cf90967f95373f55d8f))
+
+## [1.4.0](http://inindca///compare/v1.3.2...v1.4.0) (2020-09-16)
+
+
+### Features
+
+* **gux-pagination:** added expanded layout ([524d98d](http://inindca///commit/524d98d09d0a21029151c0b5fc74b1f8914f3820))
+
+### [1.3.2](http://inindca///compare/v1.3.1...v1.3.2) (2020-09-15)
+
+
+### Bug Fixes
+
+* **gux-table:** resizeObserver not present in spec tests ([f9193a1](http://inindca///commit/f9193a1e542c87b06b8f64ca2ad83b3784fd9d43))
+
+### [1.3.1](http://inindca///compare/v1.3.0...v1.3.1) (2020-09-14)
+
 ## [1.3.0](http://inindca///compare/v1.2.0...v1.3.0) (2020-09-11)
 
 

README.md

@@ -52,7 +52,7 @@ The library provides a baseline set of CSS styles in the package under `dist/gen
 
 - Baseline styles for browser elements
 - Classes for specific typography patterns
-- CSS variables for colors (coming soon)
+- CSS variables for colors
 - CSS variables for spacing (coming soon)
 
 The best mechanism for importing the stylesheet into your project will depend on how you handle CSS in your project in general. Reach out to the Common UI Development group if you're having trouble with your specific integration.

docs/src/component-listing/app.js

@@ -7,7 +7,7 @@ export function bootstrap() {
   let components = Object.keys(COMPONENT_SPEC)
     .filter(component => !COMPONENT_SPEC[component].hidePage)
     .sort((a, b) => {
-      return a < b ? -1 : 1;
+      return shortName(a) < shortName(b) ? -1 : 1;
     });
 
   document.body.appendChild(

docs/src/components-spec.json

@@ -327,12 +327,16 @@
     "attributes": {
       "compact": "checkbox",
       "object-table": "checkbox",
-      "epmty-message": "text"
+      "epmty-message": "text",
+      "columns-order": "text",
+      "resizable-columns": "checkbox",
+      "selectable-rows": "checkbox"
     },
-    "events": {}
+    "events": {
+      "sortChanged": "Fired when sorting of the table column is changed",
+      "selectionChanged": "Fired when table row was selected/unselected"
+    }
   },
-  "typography": {
-    "attributes": {},
-    "events": {}
-  }
+  "typography": {},
+  "color": {}
 }

docs/webpack.config.js

@@ -86,8 +86,7 @@ module.exports = {
   devServer: {
     compress: true,
     port: 8080,
-    serveIndex: true,
-    disableHostCheck: true
+    serveIndex: true
   }
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genesys/common-webcomponents",
-  "version": "1.3.0",
+  "version": "1.5.1",
   "description": "Common webcomponents",
   "main": "dist/stencil-wrapper.js",
   "types": "dist/types/index.d.ts",

scripts/templates/component/component.less.hbs

@@ -1,3 +1,5 @@
+@import (reference) '../../../style/color.less';
+
 // Variables part
 
 // Style
@@ -9,7 +11,7 @@
 
 // Dark
 .{{componentName}}-dark-theme {
-    color: @gux-off-white;
+    color: @gux-type-dark;
 };
 
 .{{componentPrefix}}dark-theme {
@@ -24,7 +26,7 @@
 
 // Light
 .{{componentName}}-light-theme {
-    color: @gux-grey-2;
+    color: @gux-type;
 };
 
 .{{componentPrefix}}light-theme {
@@ -40,4 +42,4 @@
 // Default Theme
 {{componentName}} {
     .{{componentName}}-light-theme();
-}
+}

src/common-utils.ts

@@ -137,3 +137,32 @@ const DATE_STRING_POSTFIX: string = 'Z'; // always use UTC
 export function fromIsoTimeString(timeStr: string): Date {
   return new Date(DATE_STRING_PREFIX + timeStr.trim() + DATE_STRING_POSTFIX);
 }
+
+/********************************************************
+ * DOM/Event Utilities                                  *
+ *                                                      *
+ * Helpers for components                               *
+ ********************************************************/
+
+/**
+ * Checks to see if an event originated within an element matching a specific selector and
+ * if it did, passes the element to a handler function and returns the handler's result.
+ */
+export function whenEventIsFrom<T>(
+  selector: string,
+  event: Event,
+  handler: (element: HTMLElement) => T
+): T | null {
+  // Don't search for matches above the node where we captured the event;
+  const exitTarget = event.currentTarget as HTMLElement;
+  // Start with the oringal event target
+  let checkTarget = event.target as HTMLElement;
+  while (checkTarget !== exitTarget && checkTarget !== null) {
+    if (checkTarget.matches(selector)) {
+      return handler(checkTarget);
+    } else {
+      checkTarget = checkTarget.parentElement;
+    }
+  }
+  return null;
+}

src/components/beta/form/gux-form-field-beta/gux-form-field-beta.less

@@ -1,3 +1,4 @@
+@import (reference) '../../../../style/color.less';
 
 // Variables part
 
@@ -40,7 +41,7 @@ gux-form-field-beta {
 
 // Dark
 .gux-form-field-dark-theme {
-  color: @gux-off-white;
+  color: @gux-type-dark;
 };
 
 .gux-dark-theme {
@@ -55,7 +56,7 @@ gux-form-field-beta.gux-dark-theme {
 
 // Light
 .gux-form-field-light-theme {
-  color: @gux-grey-2;
+  color: @gux-type;
 };
 
 .gux-light-theme {

src/components/beta/form/gux-form-field/components/gux-error-message-beta/gux-error-message-beta.less

@@ -1,3 +1,5 @@
+@import (reference) '../../../../../../style/color.less';
+
 // Style
 gux-error-message-beta {
   .container {
@@ -16,7 +18,7 @@ gux-error-message-beta {
 
 // Dark
 .gux-error-message-dark-theme {
-  color: @gux-off-white;
+  color: @gux-type-dark;
 };
 
 .gux-dark-theme {
@@ -31,7 +33,7 @@ gux-error-message-beta.gux-dark-theme {
 
 // Light
 .gux-error-message-light-theme {
-  color: @gux-grey-2;
+  color: @gux-type;
 };
 
 .gux-light-theme {

src/components/beta/form/gux-form-field/components/gux-input-checkbox-beta/gux-input-checkbox-beta.less

@@ -1,3 +1,5 @@
+@import (reference) '../../../../../../style/color.less';
+
 @gux-icon-checkbox-unchecked: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%2398a7b8' d='M416 32v352h-352v-352h352zM448 416v-416h-416v416h416z' /%3E%3C/svg%3E");
 @gux-icon-checkbox-unchecked-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%232a60c8' d='M416 32v352h-352v-352h352zM448 416v-416h-416v416h416z' /%3E%3C/svg%3E");
 @gux-icon-checkbox-checked: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%232a60c8' d='M144 272l96 -64l224 224l32 -32l-256 -320l-128 160zM416 228l32 40v-268h-416v416h353l-32 -32h-289v-352h352v196z' /%3E%3C/svg%3E");
@@ -56,8 +58,8 @@ gux-input-checkbox-beta {
     position: absolute;
     left: 4px;
     top: 6px;
-    width: @gux-icon-size-default;
-    height: @gux-icon-size-default;
+    width: @gux-icon-size-default-global;
+    height: @gux-icon-size-default-global;
   }
 
   label.gux-unchecked::after {
@@ -86,7 +88,7 @@ gux-input-checkbox-beta {
 }
 
 .gux-input-checkbox-dark-theme {
-  color: @gux-off-white;
+  color: @gux-type-dark;
 
   label.gux-checked::after {
     background-image: @gux-icon-checkbox-checked-dark;
@@ -113,7 +115,7 @@ gux-input-checkbox-beta.gux-dark-theme {
 
 // Light
 .gux-input-checkbox-light-theme {
-  color: @gux-grey-2;
+  color: @gux-type;
 }
 
 .gux-light-theme {

src/components/beta/form/gux-form-field/components/gux-input-color-beta/gux-input-color-beta.less

@@ -1,3 +1,5 @@
+@import (reference) '../../../../../../style/color.less';
+
 // Variables part
 @background: #f9fafb;
 
@@ -25,15 +27,15 @@ gux-input-color-beta {
     box-shadow: 0 0 0 0 transparent;
     transition: box-shadow 0.2s;
     background-color: @background;
-    border: 1px solid @gux-border-alt;
+    border: 1px solid #dae1e8;
     border-radius: 2px;
     cursor: pointer;
 
     &:focus,
     &.opened {
-      border-color: @gux-dark-blue;
+      border-color: @gux-genesys-dark-blue;
       outline: none;
-      box-shadow: 0 0 4px fade(@gux-blue, 50%);
+      box-shadow: 0 0 4px fade(@gux-genesys-blue, 50%);
     }
 
     &:disabled {
@@ -53,7 +55,7 @@ gux-input-color-beta {
     margin: 9px 0;
     float: left;
     font-size: 12px;
-    color: @gux-grey-2;
+    color: @gux-type;
   }
 
   .gux-input-color-color-select {
@@ -92,25 +94,25 @@ gux-input-color-beta {
 
 // Dark
 .gux-input-color-dark-theme {
-  color: @gux-off-white;
+  color: @gux-type-dark;
 
   .gux-input-color-main-element {
-    border-color: @gux-grey-1;
-    background-color: @gux-border-dark;
+    border-color: @gux-grey-global;
+    background-color: #555d66;
   }
 
   .gux-input-color-main-element:focus,
   .gux-input-color-opened {
-    border-color: @gux-blue;
+    border-color: @gux-genesys-blue;
     box-shadow: none;
   }
 
   .gux-input-color-color-name {
-    color: @gux-off-white;
+    color: @gux-type-dark;
   }
 
   gux-icon {
-    color: @gux-off-white;
+    color: @gux-type-dark;
   }
 }
 
@@ -126,7 +128,7 @@ gux-input-color-beta.gux-dark-theme {
 
 // Light
 .gux-input-color-light-theme {
-  color: @gux-grey-2;
+  color: @gux-type;
 }
 
 .gux-light-theme {