@elliemae/ds-basic 2.0.0-rc.9 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-basic",
-  "version": "2.0.0-rc.9",
+  "version": "2.0.0",
   "license": "MIT",
   "description": "EllieMae UI Design System Library",
   "module": "./esm/index.js",
@@ -296,49 +296,49 @@
     "dev": "node ../../scripts/build/build.js -w"
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "2.0.0-rc.9",
-    "@elliemae/ds-app-picker": "2.0.0-rc.9",
-    "@elliemae/ds-backdrop": "2.0.0-rc.9",
-    "@elliemae/ds-breadcrumb": "2.0.0-rc.9",
-    "@elliemae/ds-button": "2.0.0-rc.9",
-    "@elliemae/ds-button-group": "2.0.0-rc.9",
-    "@elliemae/ds-card": "2.0.0-rc.9",
-    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.9",
-    "@elliemae/ds-form": "2.0.0-rc.9",
-    "@elliemae/ds-grid": "2.0.0-rc.9",
-    "@elliemae/ds-group-box": "2.0.0-rc.9",
-    "@elliemae/ds-header": "2.0.0-rc.9",
-    "@elliemae/ds-hidden": "2.0.0-rc.9",
-    "@elliemae/ds-icon": "2.0.0-rc.9",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.9",
-    "@elliemae/ds-label-value": "2.0.0-rc.9",
-    "@elliemae/ds-list-section-header": "2.0.0-rc.9",
-    "@elliemae/ds-loading-indicator": "2.0.0-rc.9",
-    "@elliemae/ds-menu": "2.0.0-rc.9",
-    "@elliemae/ds-overlay": "2.0.0-rc.9",
-    "@elliemae/ds-page-header": "2.0.0-rc.9",
-    "@elliemae/ds-page-number": "2.0.0-rc.9",
-    "@elliemae/ds-pills": "2.0.0-rc.9",
-    "@elliemae/ds-popover": "2.0.0-rc.9",
-    "@elliemae/ds-popper": "2.0.0-rc.9",
-    "@elliemae/ds-portal": "2.0.0-rc.9",
-    "@elliemae/ds-progress-indicator": "2.0.0-rc.9",
-    "@elliemae/ds-read-more": "2.0.0-rc.9",
-    "@elliemae/ds-resizeable-container": "2.0.0-rc.9",
-    "@elliemae/ds-separator": "2.0.0-rc.9",
-    "@elliemae/ds-side-panel": "2.0.0-rc.9",
-    "@elliemae/ds-slider": "2.0.0-rc.9",
-    "@elliemae/ds-spinner": "2.0.0-rc.9",
-    "@elliemae/ds-tabs": "2.0.0-rc.9",
-    "@elliemae/ds-text-wrapper": "2.0.0-rc.9",
-    "@elliemae/ds-time-picker": "2.0.0-rc.9",
-    "@elliemae/ds-toast": "2.0.0-rc.9",
-    "@elliemae/ds-toolbar": "2.0.0-rc.9",
-    "@elliemae/ds-tooltip": "2.0.0-rc.9",
-    "@elliemae/ds-truncated-expandable-text": "2.0.0-rc.9",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.9",
-    "@elliemae/ds-zipcode-search": "2.0.0-rc.9",
-    "@elliemae/ds-zoom": "2.0.0-rc.9"
+    "@elliemae/ds-accordion": "2.0.0",
+    "@elliemae/ds-app-picker": "2.0.0",
+    "@elliemae/ds-backdrop": "2.0.0",
+    "@elliemae/ds-breadcrumb": "2.0.0",
+    "@elliemae/ds-button": "2.0.0",
+    "@elliemae/ds-button-group": "2.0.0",
+    "@elliemae/ds-card": "2.0.0",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0",
+    "@elliemae/ds-form": "2.0.0",
+    "@elliemae/ds-grid": "2.0.0",
+    "@elliemae/ds-group-box": "2.0.0",
+    "@elliemae/ds-header": "2.0.0",
+    "@elliemae/ds-hidden": "2.0.0",
+    "@elliemae/ds-icon": "2.0.0",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0",
+    "@elliemae/ds-label-value": "2.0.0",
+    "@elliemae/ds-list-section-header": "2.0.0",
+    "@elliemae/ds-loading-indicator": "2.0.0",
+    "@elliemae/ds-menu": "2.0.0",
+    "@elliemae/ds-overlay": "2.0.0",
+    "@elliemae/ds-page-header": "2.0.0",
+    "@elliemae/ds-page-number": "2.0.0",
+    "@elliemae/ds-pills": "2.0.0",
+    "@elliemae/ds-popover": "2.0.0",
+    "@elliemae/ds-popper": "2.0.0",
+    "@elliemae/ds-portal": "2.0.0",
+    "@elliemae/ds-progress-indicator": "2.0.0",
+    "@elliemae/ds-read-more": "2.0.0",
+    "@elliemae/ds-resizeable-container": "2.0.0",
+    "@elliemae/ds-separator": "2.0.0",
+    "@elliemae/ds-side-panel": "2.0.0",
+    "@elliemae/ds-slider": "2.0.0",
+    "@elliemae/ds-spinner": "2.0.0",
+    "@elliemae/ds-tabs": "2.0.0",
+    "@elliemae/ds-text-wrapper": "2.0.0",
+    "@elliemae/ds-time-picker": "2.0.0",
+    "@elliemae/ds-toast": "2.0.0",
+    "@elliemae/ds-toolbar": "2.0.0",
+    "@elliemae/ds-tooltip": "2.0.0",
+    "@elliemae/ds-truncated-expandable-text": "2.0.0",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0",
+    "@elliemae/ds-zipcode-search": "2.0.0",
+    "@elliemae/ds-zoom": "2.0.0"
   },
   "devDependencies": {
     "gulp": "~4.0.2",

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/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-app-picker/DSAppPicker.scss

@@ -1,161 +0,0 @@
-$app-picker: #{$prefix}-app-picker;
-$wrapper: #{$app-picker}__wrapper;
-$grid: #{$app-picker}__grid;
-$row: #{$app-picker}__row;
-$chip: #{$app-picker}__chip;
-$chip-label: #{$app-picker}__chip-label;
-$title: #{$app-picker}__section-title;
-$separator: #{$app-picker}__separator;
-$arrow: #{$app-picker}__arrow;
-
-.#{$wrapper} {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 244px;
-  max-height: 449px;
-  overflow-y: scroll;
-  padding: 4px 0;
-  margin: 0 auto;
- 
-  &:focus {
-    outline: none;
-  }
-}
-
-.#{$arrow} {
-  position: relative;
-  top: -21px;
-  margin: 0;
-  fill: #fff;
-}
-
-.#{$grid} {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: 0 8px;
-}
-
-.#{$row} {
-  display: flex;
-  width: 100%;
-}
-
-.#{$title} {
-  color: color('neutral', 700);
-  font-size: font-size(200);
-  font-weight: bold;
-  margin: 8px 0 4px 0;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.#{$chip} {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-radius: 2%;
-  padding: 8px 0 4px 0;
-  margin: 4px;
-  height: 68px;
-  width: 68px;
-  line-height: 1px;
-  background-color: #fff;
-  color: color('brand-primary', 600);
-  cursor: pointer;
-  border: 2px solid transparent;
-
-  &:hover {
-    color: color('brand-primary', 800);
-    background-color: color('brand-primary', 200);
-    .app-picker__icon {
-      fill: color('brand-primary', 800);
-    }
-  }
-
-  &:focus {
-    outline: none;
-    border: 2px solid color('brand-primary', 800);
-  }
-
-  &--disabled {
-    color: color('neutral', 500);
-    cursor: not-allowed;
-
-    .app-picker__icon {
-      fill: color('neutral', 500);
-    }
-   
-    &:focus,
-    &:hover {
-      background-color: #fff;
-      cursor: not-allowed;
-      border: 2px solid transparent;
-
-      .#{$chip-label} {
-        color: color('neutral', 500);
-      }
-    }
-    
-    &:hover .app-picker__icon {
-      fill: color('neutral', 500);
-    }
-  }
-
-  &--selected {
-    color: color('brand-primary', 800);
-    background-color: color('brand-primary', 200);
-    position: relative;
-
-    .app-picker__icon {
-      fill: color('brand-primary', 800);
-    }
-
-    &:focus {
-      border: 2px solid transparent;
-      &::after {
-        border: 2px solid color('brand-primary', 800);
-      }
-    }
-
-    &::after {
-      position: absolute;
-      content: '';
-      top: -2px;
-      left: -2px;
-      width: calc(100% + 4px);
-      height: calc(100% + 4px);
-      border: 1px solid color('brand-primary', 600);
-      border-radius: 2px;
-    }
-  }
-}
-
-.app-picker__icon {
-  fill: color('brand-primary', 600);
-}
-
-#app-picker__button {
-  &:hover {
-    background-color: transparent;
-  }
-}
-
-.#{$chip-label} {
-  font-size: font-size(200);
-  font-weight: 600;
-  word-wrap: break-word;
-  margin: 4px 0;
-  line-height: 12px;
-  text-overflow: ellipsis;
-}
-
-.#{$separator} {
-  border-top: 1px solid color('neutral', 100);
-  border-bottom: none;
-  width: 99%;
-  margin-bottom: 0;
-}

package/styles/components/packages/ds-tabs/DSTabs.scss

@@ -1,272 +0,0 @@
-// ********************************************
-// container definition
-$tabs-container: #{$prefix}-tabs;
-$tab-bar-container: #{$tabs-container}-tab-bar;
-$panels-container: #{$tabs-container}-panels;
-
-// ********************************************
-// element definition
-$tab-el: #{$tab-bar-container}__tab;
-$tab-list-el: #{$tabs-container}__list;
-$subtab-list-el: #{$tabs-container}__subtabs-list;
-$tab-separator-el: #{$tabs-container}__tab-separator;
-
-.#{$tabs-container} {
-  &__tab-bar-container {
-    display: flex;
-  }
-}
-
-.#{$tab-bar-container} {
-  &__list {
-    position: relative;
-    border-bottom: border-size() solid color(neutral, 400);
-    display: flex;
-    flex-wrap: nowrap;
-    flex: 1;
-
-    &:not(&--carousel) {
-      padding-left: 16px;
-    }
-  }
-
-  &__list--carousel {
-    max-width: 100%;
-  }
-
-  &__subtabs-list {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    flex: 1;
-
-    .#{$tab-el} {
-      text-transform: capitalize;
-      padding-bottom: 0;
-      padding-top: 0;
-    }
-
-    &--carousel {
-      max-width: 100%;
-    }
-
-    &:not(&--carousel) {
-      padding-left: 16px;
-    }
-  }
-
-  &__tab {
-    position: relative;
-    @include button-link();
-    @include transition(duration(fast) easing(out));
-    text-transform: uppercase;
-    white-space: nowrap;
-    padding: 2px 0;
-    margin-right: space(s);
-    letter-spacing: 0px;
-    line-height: 1.3;
-    color: color(neutral, 700);
-
-    @include onlySafariAndFirefox {
-      -webkit-text-stroke: 0.4px transparent;
-    }
-
-    &:not(:first-child) {
-      margin-left: space(s);
-    }
-
-    &--active {
-      &:not(&--disabled) {
-        @include body-text-style("semibold");
-        color: color(neutral, 700);
-        line-height: 1.3;
-
-        @include safariAndFirefoxBold(color(neutral, 700))
-      }
-    }
-
-    &:not(&--disabled) {
-      &:hover,
-      &:focus {
-        outline: none;
-        color: color(brand-primary, 600);
-
-        @include safariAndFirefoxBold(color(brand-primary, 600))
-      }
-    }
-
-    &--disabled {
-      color: color(neutral, 500);
-      cursor: default;
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    &--separator:not(:last-child):after {
-      content: "";
-      position: absolute;
-      width: border-size(m);
-      right: -18px;
-      top: 1.4px;
-      height: space(xs) * 1.6;
-      background-color: color(neutral, 400);
-    }
-  }
-
-  &__selection-indicator {
-    position: absolute;
-    margin-top: space(xxs);
-    border-bottom: border-size(xl) solid color(brand-primary, 600);
-    pointer-events: none;
-    @include transition(duration(base) easing(in));
-  }
-}
-
-.#{$panels-container} {
-  &__panel {
-    &:focus {
-      outline: none;
-    }
-    padding-top: space(xs);
-  }
-}
-
-// ********************************************
-// Mobile
-@include md {
-  .#{$tab-bar-container} {
-    &__list {
-      background: color(brand-primary, 200);
-      border-bottom: border-size() solid color(brand-primary, 300);
-
-      &--flexible-table-headers {
-        z-index: 0;
-        overflow-x: scroll;
-        overflow-y: hidden;
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-
-      &--left-gradients {
-        &::before {
-          position: fixed;
-          left: 0px;
-          content: "";
-          height: 38px;
-          width: 24px;
-          background: linear-gradient(90deg, #ebf6ff 0%, rgba(238, 238, 238, 0) 100%);
-          z-index: 100;
-          // allow clicks to pass through
-          pointer-events: none;
-        }
-      }
-      &--right-gradients {
-        &::after {
-          position: fixed;
-          right: 0px;
-          content: "";
-          height: 38px;
-          width: 24px;
-          background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, #ebf6ff 100%);
-          z-index: 100;
-          // allow clicks to pass through
-          pointer-events: none;
-        }
-      }
-
-      &--fixed-table-headers {
-        display: flex;
-        overflow-x: hidden;
-        & .em-ds-tabs-tab-bar__tab {
-          flex: 1;
-          overflow: hidden;
-        }
-      }
-
-      &:not(&--carousel) {
-        padding-left: 14px;
-      }
-    }
-
-    &__tab {
-      height: #{toMobile(space(xl) * 0.83)};
-      color: color(brand-primary, 600);
-      font-weight: font-weight(regular);
-      padding: 0;
-      margin-right: 14px;
-      font-size: 13px;
-      line-height: 1.3;
-
-      @include onlySafariAndFirefox {
-        -webkit-text-stroke: 0.4px transparent;
-      }
-
-      &:not(:first-child) {
-        margin-left: 14px;
-      }
-
-      &:focus,
-      &--active {
-        font-weight: font-weight(regular);
-        font-size: 13px;
-        
-        @include safariAndFirefoxBold(color(brand-primary, 700))
-      }
-
-      &--active {
-        &:not(&--disabled) {
-          font-size: 13px;
-          color: color(brand-primary, 700);
-          line-height: 1.3;
-          font-weight: font-weight(regular);
-          -webkit-font-smoothing: subpixel-antialiased; 
-          -webkit-text-stroke: 0.4px color(brand-primary, 700);
-          
-        }
-      }
-
-      &:focus:not(&--disabled) {
-        color: color(brand-primary, 700);
-        font-size: 13px;
-
-        @include safariAndFirefoxBold(color(brand-primary, 700))
-      }
-
-      &:not(&--disabled) {
-        &:hover,
-        &:focus {
-          outline: none;
-          color: color(brand-primary, 700);
-          
-          @include safariAndFirefoxBold(color(brand-primary, 700))
-        }
-      }
-
-      &--separator:not(:last-child):after {
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-
-    // &__tab-separator {
-    // }
-
-    &__selection-indicator {
-      margin-left: 0rem;
-      margin-top: space(xxs) * 0.5;
-      border-bottom-width: 3px;
-    }
-  }
-
-  .#{$panels-container} {
-    &__panel {
-      padding-top: 0;
-    }
-  }
-}