@elliemae/ds-basic 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/form/ComboBox/index.js

@@ -1,3 +1,2 @@
 export * from '@elliemae/ds-form/ComboBox/v1/DSComboBox';
-export * from '@elliemae/ds-form/ComboBox/v2/Combobox';
 export { default as DSComboBox2, default } from '@elliemae/ds-form/ComboBox/v2/Combobox';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-basic",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.13",
   "license": "MIT",
   "description": "EllieMae UI Design System Library",
   "module": "./esm/index.js",
@@ -284,69 +284,66 @@
   },
   "author": "ICE MT",
   "scripts": {
-    "test:e2e": "../../../node_modules/pui-e2e-test-sdk/node_modules/.bin/wdio run ../../../wdio.conf.js",
+    "test:e2e": "../../../node_modules//node_modules/.bin/wdio run ../../../wdio.conf.js",
     "test:reports": "../../../node_modules/pui-e2e-test-sdk/node_modules/.bin/allure open",
     "copy:scss": "gulp copy-fonts copy-styles copy-packages-scss && gulp copy-dist-index-scss",
     "compile:scss": "node-sass ./styles/dimsum.scss ./dist/css/dimsum.css",
     "prebuild:css": "yarn run copy:scss && yarn run compile:scss",
-    "build:css": "postcss ./dist/css/dimsum.css -u autoprefixer -b \">= 0.5% in US and last 2 major versions, not samsung > 0, Firefox ESR, not dead\" -r --no-map && postcss ./dist/css/dimsum.css -m -u cssnano -o ./dist/css/dimsum.min.css",
+    "build:css": "postcss ./dist/css/dimsum.css -u autoprefixer -b \"> 0.5% in US, not ie 11, not dead\" -r --no-map && postcss ./dist/css/dimsum.css -m -u cssnano -o ./dist/css/dimsum.min.css",
     "scss:dev": "yarn scss:compile -- --watch",
     "prebuild": "exit 0",
     "build": "node ../../scripts/build/build.js && yarn build:css",
     "dev": "node ../../scripts/build/build.js -w"
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "2.0.0-alpha.1",
-    "@elliemae/ds-app-picker": "2.0.0-alpha.1",
-    "@elliemae/ds-backdrop": "2.0.0-alpha.1",
-    "@elliemae/ds-breadcrumb": "2.0.0-alpha.1",
-    "@elliemae/ds-button": "2.0.0-alpha.1",
-    "@elliemae/ds-button-group": "2.0.0-alpha.1",
-    "@elliemae/ds-card": "2.0.0-alpha.1",
-    "@elliemae/ds-circular-progress-indicator": "2.0.0-alpha.1",
-    "@elliemae/ds-classnames": "2.0.0-alpha.1",
-    "@elliemae/ds-dropdownmenu": "2.0.0-alpha.1",
-    "@elliemae/ds-form": "2.0.0-alpha.1",
-    "@elliemae/ds-grid": "2.0.0-alpha.1",
-    "@elliemae/ds-group-box": "2.0.0-alpha.1",
-    "@elliemae/ds-header": "2.0.0-alpha.1",
-    "@elliemae/ds-hidden": "2.0.0-alpha.1",
-    "@elliemae/ds-icon": "2.0.0-alpha.1",
-    "@elliemae/ds-icons": "2.0.0-alpha.1",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-alpha.1",
-    "@elliemae/ds-label-value": "2.0.0-alpha.1",
-    "@elliemae/ds-list-section-header": "2.0.0-alpha.1",
-    "@elliemae/ds-loading-indicator": "2.0.0-alpha.1",
-    "@elliemae/ds-menu": "2.0.0-alpha.1",
-    "@elliemae/ds-mobile": "2.0.0-alpha.1",
-    "@elliemae/ds-overlay": "2.0.0-alpha.1",
-    "@elliemae/ds-page-header": "2.0.0-alpha.1",
-    "@elliemae/ds-page-number": "2.0.0-alpha.1",
-    "@elliemae/ds-pills": "2.0.0-alpha.1",
-    "@elliemae/ds-popover": "2.0.0-alpha.1",
-    "@elliemae/ds-popper": "2.0.0-alpha.1",
-    "@elliemae/ds-portal": "2.0.0-alpha.1",
-    "@elliemae/ds-progress-indicator": "2.0.0-alpha.1",
-    "@elliemae/ds-read-more": "2.0.0-alpha.1",
-    "@elliemae/ds-resizeable-container": "2.0.0-alpha.1",
-    "@elliemae/ds-separator": "2.0.0-alpha.1",
-    "@elliemae/ds-shared": "2.0.0-alpha.1",
-    "@elliemae/ds-side-panel": "2.0.0-alpha.1",
-    "@elliemae/ds-slider": "2.0.0-alpha.1",
-    "@elliemae/ds-spinner": "2.0.0-alpha.1",
-    "@elliemae/ds-system": "2.0.0-alpha.1",
-    "@elliemae/ds-tabs": "2.0.0-alpha.1",
-    "@elliemae/ds-text-wrapper": "2.0.0-alpha.1",
-    "@elliemae/ds-time-picker": "2.0.0-alpha.1",
-    "@elliemae/ds-toast": "2.0.0-alpha.1",
-    "@elliemae/ds-toolbar": "2.0.0-alpha.1",
-    "@elliemae/ds-tooltip": "2.0.0-alpha.1",
-    "@elliemae/ds-truncated-expandable-text": "2.0.0-alpha.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.1",
-    "@elliemae/ds-utilities": "2.0.0-alpha.1",
-    "@elliemae/ds-zipcode-search": "2.0.0-alpha.1",
-    "@elliemae/ds-zoom": "2.0.0-alpha.1",
-    "react-dates": "~18.5.0"
+    "@elliemae/ds-accordion": "2.0.0-alpha.13",
+    "@elliemae/ds-app-picker": "2.0.0-alpha.13",
+    "@elliemae/ds-backdrop": "2.0.0-alpha.13",
+    "@elliemae/ds-breadcrumb": "2.0.0-alpha.13",
+    "@elliemae/ds-button": "2.0.0-alpha.13",
+    "@elliemae/ds-button-group": "2.0.0-alpha.13",
+    "@elliemae/ds-card": "2.0.0-alpha.13",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0-alpha.13",
+    "@elliemae/ds-form": "2.0.0-alpha.13",
+    "@elliemae/ds-grid": "2.0.0-alpha.13",
+    "@elliemae/ds-group-box": "2.0.0-alpha.13",
+    "@elliemae/ds-header": "2.0.0-alpha.13",
+    "@elliemae/ds-hidden": "2.0.0-alpha.13",
+    "@elliemae/ds-icon": "2.0.0-alpha.13",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-alpha.13",
+    "@elliemae/ds-label-value": "2.0.0-alpha.13",
+    "@elliemae/ds-list-section-header": "2.0.0-alpha.13",
+    "@elliemae/ds-loading-indicator": "2.0.0-alpha.13",
+    "@elliemae/ds-menu": "2.0.0-alpha.13",
+    "@elliemae/ds-overlay": "2.0.0-alpha.13",
+    "@elliemae/ds-page-header": "2.0.0-alpha.13",
+    "@elliemae/ds-page-number": "2.0.0-alpha.13",
+    "@elliemae/ds-pills": "2.0.0-alpha.13",
+    "@elliemae/ds-popover": "2.0.0-alpha.13",
+    "@elliemae/ds-popper": "2.0.0-alpha.13",
+    "@elliemae/ds-portal": "2.0.0-alpha.13",
+    "@elliemae/ds-progress-indicator": "2.0.0-alpha.13",
+    "@elliemae/ds-read-more": "2.0.0-alpha.13",
+    "@elliemae/ds-resizeable-container": "2.0.0-alpha.13",
+    "@elliemae/ds-separator": "2.0.0-alpha.13",
+    "@elliemae/ds-side-panel": "2.0.0-alpha.13",
+    "@elliemae/ds-slider": "2.0.0-alpha.13",
+    "@elliemae/ds-spinner": "2.0.0-alpha.13",
+    "@elliemae/ds-tabs": "2.0.0-alpha.13",
+    "@elliemae/ds-text-wrapper": "2.0.0-alpha.13",
+    "@elliemae/ds-time-picker": "2.0.0-alpha.13",
+    "@elliemae/ds-toast": "2.0.0-alpha.13",
+    "@elliemae/ds-toolbar": "2.0.0-alpha.13",
+    "@elliemae/ds-tooltip": "2.0.0-alpha.13",
+    "@elliemae/ds-truncated-expandable-text": "2.0.0-alpha.13",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.13",
+    "@elliemae/ds-zipcode-search": "2.0.0-alpha.13",
+    "@elliemae/ds-zoom": "2.0.0-alpha.13"
+  },
+  "devDependencies": {
+    "gulp": "~4.0.2",
+    "gulp-debug": "~4.0.0",
+    "gulp-rename": "~2.0.0"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",

package/styles/base/_docs/theming.md

@@ -61,7 +61,7 @@ $theme-color-neutral-800: #25292F;
 $theme-color-neutral-700: #353C46;
 $theme-color-neutral-600: #464F5C;
 $theme-color-neutral-500: #697489;
-$theme-color-neutral-400: #A9B1BE;
+$theme-color-neutral-400: #8C93A6;
 $theme-color-neutral-300: #B0B9C8;
 $theme-color-neutral-200: #CBCFD7;
 $theme-color-neutral-100: #E0E3E8;

package/styles/components/index.scss

@@ -27,7 +27,6 @@
 @import 'packages/ds-progress-indicator/DSProgressIndicator';
 @import 'packages/ds-spinner/DSSpinner';
 @import 'packages/ds-loading-indicator/DSLoadingIndicator';
-@import 'packages/ds-tabs/DSTabs';
 @import 'packages/ds-tooltip/v1/DSTooltip';
 @import 'packages/ds-popover/DSPopover';
 @import 'packages/ds-overlay/DSOverlay';
@@ -48,7 +47,6 @@
 @import 'packages/ds-page-number/DSPageNumber';
 @import 'packages/ds-zipcode-search/DSZipCodeSearch';
 @import 'packages/ds-circular-progress-indicator/DSCircularProgressIndicator';
-@import 'packages/ds-app-picker/DSAppPicker';
 
 @import '~react-dates/lib/css/_datepicker.css';
 

package/styles/components/packages/ds-basic/index.scss

@@ -29,7 +29,6 @@
 @import '../../ds-toast/src/DSToast';
 @import '../../ds-spinner/src/DSSpinner';
 @import '../../ds-loading-indicator/src/DSLoadingIndicator';
-@import '../../ds-tabs/src/DSTabs';
 @import '../../ds-tooltip/src/v1/DSTooltip';
 @import '../../ds-popover/src/DSPopover';
 @import '../../ds-overlay/src/DSOverlay';
@@ -50,4 +49,3 @@
 @import '../../ds-page-number/src/DSPageNumber';
 @import '../../ds-zipcode-search/src/DSZipCodeSearch';
 @import '../../ds-circular-progress-indicator/src/DSCircularProgressIndicator';
-@import '../../ds-app-picker/src/DSAppPicker';

package/styles/components/packages/ds-basic/styles/dist-index.scss

@@ -27,7 +27,6 @@
 @import 'packages/ds-progress-indicator/DSProgressIndicator';
 @import 'packages/ds-spinner/DSSpinner';
 @import 'packages/ds-loading-indicator/DSLoadingIndicator';
-@import 'packages/ds-tabs/DSTabs';
 @import 'packages/ds-tooltip/v1/DSTooltip';
 @import 'packages/ds-popover/DSPopover';
 @import 'packages/ds-overlay/DSOverlay';
@@ -48,7 +47,6 @@
 @import 'packages/ds-page-number/DSPageNumber';
 @import 'packages/ds-zipcode-search/DSZipCodeSearch';
 @import 'packages/ds-circular-progress-indicator/DSCircularProgressIndicator';
-@import 'packages/ds-app-picker/DSAppPicker';
 
 @import '~react-dates/lib/css/_datepicker.css';
 

package/styles/components/packages/ds-basic/styles/themes/theme-default.scss

@@ -18,15 +18,15 @@ Change these color values below to your brand colors.
 // Brand - Primary
 $theme-color-brand-primary-900: null;
 $theme-color-brand-primary-800: #005181;
-$theme-color-brand-primary-700: #006AA9;
+$theme-color-brand-primary-700: #006aa9;
 $theme-color-brand-primary-600: #1e79c2;
-$theme-color-brand-primary-500: #1394E5;
-$theme-color-brand-primary-400: #52A6EC;
-$theme-color-brand-primary-300: #A3D6FF;
-$theme-color-brand-primary-200: #EBF6FF;
-$theme-color-brand-primary-100: #F6FBFF;
+$theme-color-brand-primary-500: #1394e5;
+$theme-color-brand-primary-400: #52a6ec;
+$theme-color-brand-primary-300: #a3d6ff;
+$theme-color-brand-primary-200: #ebf6ff;
+$theme-color-brand-primary-100: #f6fbff;
 
-// Brand - Secondary 
+// Brand - Secondary
 $theme-color-brand-secondary-900: null;
 $theme-color-brand-secondary-800: null;
 $theme-color-brand-secondary-700: null;
@@ -40,60 +40,58 @@ $theme-color-brand-secondary-100: null;
 //Neutral - Used for text, borders, shadows, background, etc
 $theme-color-neutral-1000: #000000;
 $theme-color-neutral-900: #333333;
-$theme-color-neutral-800: #25292F;
-$theme-color-neutral-700: #353C46;
-$theme-color-neutral-600: #464F5C;
+$theme-color-neutral-800: #25292f;
+$theme-color-neutral-700: #353c46;
+$theme-color-neutral-600: #464f5c;
 $theme-color-neutral-500: #697489;
-$theme-color-neutral-400: #A9B1BE;
-$theme-color-neutral-300: #B0B9C8;
-$theme-color-neutral-200: #CBCFD7;
-$theme-color-neutral-100: #E0E3E8;
-$theme-color-neutral-080: #EBEDF0;
-$theme-color-neutral-050: #F6F7F9;
-$theme-color-neutral-000: #FFFFFF;
+$theme-color-neutral-400: #8c93a6;
+$theme-color-neutral-300: #b0b9c8;
+$theme-color-neutral-200: #cbcfd7;
+$theme-color-neutral-100: #e0e3e8;
+$theme-color-neutral-080: #ebedf0;
+$theme-color-neutral-050: #f6f7f9;
+$theme-color-neutral-000: #ffffff;
 
-// Success - Used to communicate status or feedback to the user 
-$theme-color-success-900: #207E56;
+// Success - Used to communicate status or feedback to the user
+$theme-color-success-900: #207e56;
 $theme-color-success-800: null;
 $theme-color-success-700: null;
 $theme-color-success-600: null;
 $theme-color-success-500: null;
 $theme-color-success-400: null;
-$theme-color-success-300: #D4F0E5;
+$theme-color-success-300: #d4f0e5;
 $theme-color-success-200: null;
 $theme-color-success-100: null;
 // Danger - Used to communicate status or feedback to the user
-$theme-color-danger-900: #C64252;
+$theme-color-danger-900: #c64252;
 $theme-color-danger-800: null;
 $theme-color-danger-700: null;
 $theme-color-danger-600: null;
 $theme-color-danger-500: null;
 $theme-color-danger-400: null;
 $theme-color-danger-300: null;
-$theme-color-danger-200: #F7CDD2;
+$theme-color-danger-200: #f7cdd2;
 $theme-color-danger-100: null;
 // Warning - Used to communicate status or feedback to the user
-$theme-color-warning-900: #D17A00;
+$theme-color-warning-900: #d17a00;
 $theme-color-warning-800: null;
-$theme-color-warning-700: #FF9400;
-$theme-color-warning-600: #FBB431;
-$theme-color-warning-500: #FBB431;
-$theme-color-warning-400: #FBDE31;
+$theme-color-warning-700: #ff9400;
+$theme-color-warning-600: #fbb431;
+$theme-color-warning-500: #fbb431;
+$theme-color-warning-400: #fbde31;
 $theme-color-warning-300: null;
 $theme-color-warning-200: null;
 $theme-color-warning-100: null;
 
-
 // **TYPOGRAPHY**
 // Typeface
 // Change the typeface.
-$theme-font-family: "proxima-nova", Arial, sans-serif !default;
+$theme-font-family: Roboto !default;
 
 // Type Scale
 // Change the font-sizes of HTML typed tags below.
 $theme-base-font-size: 13px;
 
-
 // **BORDER RADIUS**
 // How round would you like your containers to be?
 $theme-base-border-radius: 2px;

package/styles/components/packages/ds-basic/styles/themes/theme-demo.scss

@@ -42,7 +42,7 @@ $theme-color-neutral-800: #25292F;
 $theme-color-neutral-700: #353C46;
 $theme-color-neutral-600: #464F5C;
 $theme-color-neutral-500: #697489;
-$theme-color-neutral-400: #A9B1BE;
+$theme-color-neutral-400: #8C93A6;
 $theme-color-neutral-300: #B0B9C8;
 $theme-color-neutral-200: #CBCFD7;
 $theme-color-neutral-100: #E0E3E8;

package/styles/components/packages/ds-button/DSButton.scss

@@ -52,7 +52,7 @@ $text-disabled: #5c6574;
   position: relative;
 
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     left: 0;
@@ -236,7 +236,7 @@ div.#{$btn-el} {
 
   @at-root .#{$input-addon-group}__addon {
     .#{$btn-el-text} {
-      border: $border-type color(neutral, 200);
+      border: $border-type color(neutral, 400);
     }
   }
 
@@ -288,15 +288,15 @@ div.#{$btn-el} {
 
 // ********************************************
 // Secondary
-.#{$btn-el-secondary}{
+.#{$btn-el-secondary} {
   color: color(brand-primary, 600);
   background-color: color(neutral, 000);
-  border: $border-type color(neutral, 500);
+  border: $border-type color(neutral, 400);
   border-radius: 2px;
 
   @at-root .#{$input-addon-group}__addon {
     .#{$btn-el-secondary} {
-      border: $border-type color(neutral, 200);
+      border: $border-type color(neutral, 400);
     }
   }
 
@@ -393,10 +393,10 @@ div.#{$btn-el} {
 }
 
 $intent-colors: (
-  "success": color("success", 900),
-  "danger": color("danger", 900),
-  "warning": color("warning", 900),
-  "info": color("brand-primary", 600),
+  'success': color('success', 900),
+  'danger': color('danger', 900),
+  'warning': color('warning', 900),
+  'info': color('brand-primary', 600),
 );
 
 @each $intent, $color in $intent-colors {
@@ -425,7 +425,7 @@ $intent-colors: (
     &:hover:not([disabled]),
     &.#{$btn-el-vhover} {
       color: $color;
-      
+
       span.label-wrapper.no-icon {
         &:before {
           background-color: transparent;

package/styles/components/packages/ds-datagrids/DataGrids.scss

@@ -524,6 +524,7 @@ $filter-header-container: #{$data-grid}-filter-header;
   margin-top: space(xxs) * 1.5;
   position: relative;
   right: space(xs) * -1.1;
+  background: white;
 }
 
 // https://jira.elliemae.io/browse/PUI-5348

package/styles/components/packages/ds-date-picker/components/DatePickerPicker/DatePickerPicker.scss

@@ -1,9 +1,8 @@
 .#{$el-icon} {
-  border: $border-type color(neutral, 200);
   @include border-radius(0 $radius $radius 0);
   padding: 0 calc(#{space(xxs)} * 0.5);
 
-  &:hover:not([disabled]) {    
+  &:hover:not([disabled]) {
     border: $border-type color(brand-primary, 600);
   }
 

package/styles/components/packages/ds-form/Checkbox/elements/CheckMark.scss

@@ -42,7 +42,7 @@ $el-label: #{$el-container}__label;
   cursor: pointer;
 
   &.checkbox-true {
-    border: calc(#{space(xxs)} * 0.25) solid color(brand-primary, 600);
+    
     &:after {
       width: space(xxs);
       height: space(xs);

package/styles/components/packages/ds-form/Input/DSInput.scss

@@ -44,7 +44,7 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
 }
 @mixin withReadOnly() {
   border: none;
-  border-top: calc(#{space(xxs)} * 0.25) solid color(neutral, 200);
+  border-top: calc(#{space(xxs)} * 0.25) solid color(neutral, 400);
   background: none;
 }
 
@@ -65,7 +65,7 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
   padding: 0 space(xs);
   z-index: 1;
   @include border-radius($radius);
-  border: $border-type color(neutral, 200);
+  border: $border-type color(neutral, 400);
   text-overflow: ellipsis;
   
   &::-ms-clear {

package/styles/components/packages/ds-form/Input/InputAddonWrapper.scss

@@ -29,7 +29,7 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
 .#{$input-addon-wrapper} {
   @include border-radius($radius);
   display: flex;
-  box-shadow: inset 0 0 0 1px color(neutral, 200);
+  box-shadow: inset 0 0 0 1px color(neutral, 400);
   height: $input-height;
   width: 100%;
 

package/styles/components/packages/ds-form/LargeInputText/DSLargeInputText.scss

@@ -34,7 +34,7 @@ $min-height: space(m) * 1.17;
   background: color(neutral, 000);
   transition: border duration(base) easing(base);
   @include border-radius($radius);
-  @include dsFakeBorder();
+  box-shadow: inset 0 0 0 1px color(neutral, 400);
   padding: 1px;
   &:focus-within {
     padding: 0;