@elliemae/ds-basic 3.22.0-rc.1 → 3.22.0-rc.11

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-functions/color-functions.scss

@@ -19,28 +19,28 @@
     $fetched-based-color: map-get(map-get($color-palette-data, $hue), 500);
 
     @if $range <= 100 {
-      $fetched-color: lighten($fetched-based-color, 40%);
+      $fetched-color: lighten($fetched-based-color, 40%); 
       @return $fetched-color;
     } @else if $range == 200 {
-      $fetched-color: lighten($fetched-based-color, 30%);
+      $fetched-color: lighten($fetched-based-color, 30%); 
       @return $fetched-color;
     } @else if $range == 300 {
-      $fetched-color: lighten($fetched-based-color, 20%);
+      $fetched-color: lighten($fetched-based-color, 20%); 
       @return $fetched-color;
     } @else if $range == 400 {
-      $fetched-color: lighten($fetched-based-color, 10%);
+      $fetched-color: lighten($fetched-based-color, 10%); 
       @return $fetched-color;
     } @else if $range == 600 {
-      $fetched-color: darken($fetched-based-color, 10%);
+      $fetched-color: darken($fetched-based-color, 10%); 
       @return $fetched-color;
     } @else if $range == 700 {
       $fetched-color: darken($fetched-based-color, 20%);
       @return $fetched-color;
     } @else if $range == 800 {
-      $fetched-color: darken($fetched-based-color, 30%);
+      $fetched-color: darken($fetched-based-color, 30%); 
       @return $fetched-color;
     } @else if $range >= 900 {
-      $fetched-color: darken($fetched-based-color, 40%);
+      $fetched-color: darken($fetched-based-color, 40%); 
       @return $fetched-color;
     } @else {
       @error 'The `#{$range}` could not be found. Make sure you have specify a range between 000 and 1000.';
@@ -50,6 +50,7 @@
   }
 }
 
+
 /// Returns a foreground color based on a given background-color in accordance with accessibility standards.
 ///
 /// @param {Color} $background-color - The background color where the foreground will sit.
@@ -66,6 +67,9 @@
   }
 }
 
+
+
+
 $contrast-warnings: true !default;
 
 ////
@@ -165,7 +169,8 @@ $contrast-warnings: true !default;
 @function get-color($key) {
   @if map-has-key($color-palette-data, $key) {
     @return map-get($color-palette-data, $key);
-  } @else {
+  }
+  @else {
     @error 'given $key is not available in $color-palette-data';
   }
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-functions/iconography-functions.scss

@@ -11,4 +11,4 @@
   } @else {
     @error 'Spacing variant `#{$space}` not found. Available variants: #{$icon-data}';
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-functions/motion-functions.scss

@@ -23,4 +23,4 @@
   } @else {
     @error 'Easing variant `#{$variant}` not found. Available variants: #{$easing-data}';
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-functions/spacing-functions.scss

@@ -13,6 +13,8 @@
   }
 }
 
+
+
 /// The largest named breakpoint in which to include print as a media type
 /// @type Keyword
 $print-breakpoint: large !default;
@@ -23,7 +25,8 @@ $-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
 
 @if nth(map-values($breakpoints), 1) != 0 {
   @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
-} @else {
+}
+@else {
   $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);
 }
 
@@ -49,7 +52,8 @@ $breakpoint-classes: (small medium large) !default;
   // Orientation media queries have a unique syntax
   @if $bp == 'landscape' or $bp == 'portrait' {
     @return '(orientation: #{$bp})';
-  } @else if $bp == 'retina' {
+  }
+  @else if $bp == 'retina' {
     @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
   }
 
@@ -62,7 +66,8 @@ $breakpoint-classes: (small medium large) !default;
 
       $bp: map-get($breakpoints, $bp);
       $named: true;
-    } @else {
+    }
+    @else {
       $bp: 0;
       @warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
     }
@@ -96,7 +101,8 @@ $breakpoint-classes: (small medium large) !default;
         @if $bp-max != null {
           $str: $str + '(max-width: #{$bp-max})';
         }
-      } @else {
+      }
+      @else {
         @warn 'breakpoint(): Only named media queries can have an `only` range.';
       }
     }
@@ -156,8 +162,9 @@ $breakpoint-classes: (small medium large) !default;
     @if $bp != null and $bp <= $pbp {
       @media print, screen and #{$str} {
         @content;
-      }
-    } @else {
+       }
+    }
+    @else {
       @media screen and #{$str} {
         @content;
       }
@@ -196,6 +203,7 @@ $breakpoint-classes: (small medium large) !default;
 ///
 /// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.
 @function -zf-map-next($map, $key) {
+
   // Store the keys of the map as a list
   $values: map-keys($map);
 
@@ -214,6 +222,7 @@ $breakpoint-classes: (small medium large) !default;
   @else {
     @return map-get($map, nth($values, $i));
   }
+
 }
 
 /// Return a list of our named breakpoints less than $key. Useful for dealing with
@@ -279,6 +288,7 @@ $breakpoint-classes: (small medium large) !default;
     @return $map;
   }
 
+
   // Check if the breakpoint name exists globally
   @if not map-has-key($breakpoints, $value) {
     @if type-of($value) == 'number' {

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-functions/typography-functions.scss

@@ -35,4 +35,4 @@
   } @else {
     @error 'Font weight `#{$weight}` not found. Available font weights: #{$font-weight-data}';
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/_mixins-base.scss

@@ -9,4 +9,4 @@
 @import './dimsum-mixins.scss';
 @import './target-ie.scss';
 @import './media-query-mixins.scss';
-@import './font-weight.scss';
+@import './font-weight.scss';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/arrow-mixins.scss

@@ -1,16 +1,19 @@
 @mixin calc-arrow-pos($direction) {
   @if $direction == 'bottom' {
     left: calc(50% - 5px);
+
   } @else if $direction == 'left' {
     top: calc(50% - 5px);
+
   } @else if $direction == 'top' {
     left: calc(50% - 5px);
+
   } @else if $direction == 'right' {
     top: calc(50% - 5px);
   }
 }
 
-@mixin arrow-direction($direction) {
+@mixin arrow-direction($direction){
   display: block;
   height: 0;
   width: 0;
@@ -22,18 +25,21 @@
     border-top: 0;
     margin-top: 0;
     margin-bottom: 0;
+
   } @else if $direction == 'left' {
     border-top-color: transparent;
     border-bottom-color: transparent;
     border-right: 0;
     margin-left: 0;
     margin-right: 0;
+
   } @else if $direction == 'top' {
     border-right-color: transparent;
     border-left-color: transparent;
     border-bottom: 0;
     margin-top: 0;
     margin-bottom: 0;
+
   } @else if $direction == 'right' {
     border-top-color: transparent;
     border-bottom-color: transparent;
@@ -47,19 +53,19 @@
   position: absolute;
   border: solid $color;
 
-  &[data-placement^='bottom'] {
-    @include arrow-direction(bottom);
+  &[data-placement^="bottom"] {
+    @include arrow-direction(bottom)
   }
 
-  &[data-placement^='top'] {
-    @include arrow-direction(top);
+  &[data-placement^="top"] {
+    @include arrow-direction(top)
   }
 
-  &[data-placement^='left'] {
-    @include arrow-direction(left);
+  &[data-placement^="left"] {
+    @include arrow-direction(left)
   }
 
-  &[data-placement^='right'] {
-    @include arrow-direction(right);
+  &[data-placement^="right"] {
+    @include arrow-direction(right)
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/basic-mixins.scss

@@ -57,7 +57,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-@mixin position($pos: absolute, $top: 0, $lft: 0, $wid: 100%, $hgt: 100%) {
+@mixin position($pos: absolute, $top: 0, $lft: 0,$wid: 100%, $hgt: 100%) {
   position: $pos;
   top: $top;
   left: $lft;
@@ -74,19 +74,19 @@
 
 @mixin keyframes($animation-name) {
   @-webkit-keyframes #{$animation-name} {
-    @content;
+      @content;
   }
   @-moz-keyframes #{$animation-name} {
-    @content;
+      @content;
   }
   @-ms-keyframes #{$animation-name} {
-    @content;
+      @content;
   }
   @-o-keyframes #{$animation-name} {
-    @content;
+      @content;
   }
   @keyframes #{$animation-name} {
-    @content;
+      @content;
   }
 }
 @mixin animation($str) {
@@ -115,18 +115,18 @@
   // from Reactabular
   .sort-none:after {
     opacity: 0;
-    content: '\25BE';
+    content: "\25BE";
   }
 
   // from Reactabular
   .sort-asc:after {
-    content: '\25BE';
+    content: "\25BE";
     display: inline-block;
     transform: rotateZ(180deg);
   }
 
   // from Reactabular
   .sort-desc:after {
-    content: '\25BE';
+    content: "\25BE";
   }
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/color-mixins.scss

@@ -1 +1 @@
-// No mixins yet
+// No mixins yet

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/depth-mixins.scss

@@ -1,6 +1,6 @@
 // No mixins yet
 @mixin depth($depth: 100) {
   -webkit-box-shadow: depth($depth);
-  -moz-box-shadow: depth($depth);
-  box-shadow: depth($depth);
-}
+  -moz-box-shadow:    depth($depth);
+  box-shadow:         depth($depth);
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/font-weight.scss

@@ -1,12 +1,12 @@
 @mixin safariAndFirefoxBold($color) {
   @media not all and (min-resolution: 0.001dpcm) {
     font-weight: 400;
-    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-font-smoothing: subpixel-antialiased; 
     -webkit-text-stroke: 0.4px $color;
   }
-  @media screen and (min--moz-device-pixel-ratio: 0) {
+  @media screen and (min--moz-device-pixel-ratio:0) {
     font-weight: 400;
-    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-font-smoothing: subpixel-antialiased; 
     -webkit-text-stroke: 0.4px $color;
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/iconography-mixins.scss

@@ -1,17 +1,18 @@
+
 @mixin icon($size: s, $color: null) {
   $fetched-size: s;
   @if map-has-key($icon-data, $size) {
     $fetched-size: map-get($icon-data, $size);
   }
   height: $fetched-size;
-  width: $fetched-size;
+  width:  $fetched-size;
   svg {
     height: $fetched-size;
-    width: $fetched-size;
+    width:  $fetched-size;
   }
   @if $color != null {
-    @include icon-color($color);
-  }
+    @include icon-color($color)
+  }  
 }
 
 @mixin icon-color($color: color(neutral, 800)) {

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/media-query-mixins.scss

@@ -1,5 +1,5 @@
 @mixin onlyFirefox {
-  @media screen and (min--moz-device-pixel-ratio: 0) {
+  @media screen and (min--moz-device-pixel-ratio:0) {
     @content;
   }
 }
@@ -14,7 +14,7 @@
   @media not all and (min-resolution: 0.001dpcm) {
     @content;
   }
-  @media screen and (min--moz-device-pixel-ratio: 0) {
+  @media screen and (min--moz-device-pixel-ratio:0) {
     @content;
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/motion-mixins.scss

@@ -1 +1 @@
-// No mixins yet
+// No mixins yet

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/spacing-mixins.scss

@@ -4,6 +4,7 @@
   align-items: center;
 }
 
+
 @function toMobile($unit) {
   @return $unit * (13 / 16);
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/target-ie.scss

@@ -2,4 +2,4 @@
   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     @content;
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-mixins/typography-mixins.scss

@@ -1,3 +1,4 @@
+
 $link-text-color: color(brand-primary, 600);
 
 /// Returns desired styles for a given typography style.
@@ -5,67 +6,67 @@ $link-text-color: color(brand-primary, 600);
 /// @param {String} $weight - light, normal, semibold, bold.
 
 @mixin h1-text-style($weight: regular) {
-  font-size: font-size(900);
+  font-size:   font-size(900);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
 @mixin h2-text-style($weight: regular) {
-  font-size: font-size(800);
+  font-size:   font-size(800);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
 @mixin h3-text-style($weight: regular) {
-  font-size: font-size(700);
+  font-size:   font-size(700);
   line-height: line-height(600);
   font-weight: font-weight($weight);
 }
 
 @mixin h4-text-style($weight: regular) {
-  font-size: font-size(600);
+  font-size:   font-size(600);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
 @mixin h5-text-style($weight: regular) {
-  font-size: font-size(500);
+  font-size:   font-size(500);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
-@mixin section-header-text-style($weight: semibold) {
-  font-size: font-size(500);
+@mixin section-header-text-style($weight: semibold) { 
+  font-size:   font-size(500);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
   text-transform: uppercase;
 }
 
 @mixin body-text-style($weight: regular) {
-  font-size: font-size(400);
+  font-size:   font-size(400);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
-@mixin body-small-text-style($weight: regular) {
-  font-size: font-size(300);
+@mixin body-small-text-style($weight: regular) { 
+  font-size:   font-size(300);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
-@mixin body-micro-text-style($weight: regular) {
-  font-size: font-size(200);
+@mixin body-micro-text-style($weight: regular) { 
+  font-size:   font-size(200);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
-@mixin list-text-style($weight: regular) {
-  font-size: font-size(400);
+@mixin list-text-style($weight: regular) { 
+  font-size:   font-size(400);
   line-height: line-height(normal);
   font-weight: font-weight($weight);
 }
 
-@mixin link-text-style($weight: regular) {
+@mixin link-text-style($weight: regular) { 
   line-height: line-height(400);
   font-weight: font-weight($weight);
   color: $link-text-color;

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

@@ -7,23 +7,22 @@
 // we need to rethink how the styles are imported, maybe using css modules
 // or even styled component so we have styles more modularized
 @import '~react-dates/lib/css/_datepicker.css';
-@import '../../../ds-shuttle/src/DSShuttle.scss';
-@import '../../../ds-filterbar/src/DSFilterBar.scss';
-@import '../../../ds-modal/src/DSModal.scss';
-@import '../../../ds-modal-slide/src/DSModalSlide.scss';
-@import '../../../ds-datagrids/src/DataGrids.scss';
-@import '../../../ds-treeview/src/Tree';
-@import '../../../ds-query-builder/src/DSQueryBuilder.scss';
-@import '../../../ds-search-field/src/DSSearchField.scss';
-@import '../../../ds-date-time-recurrence-picker/src/DSDateTimeRecurrenceSelector.scss';
-@import '../../../ds-number-range-field/src/DSNumberRangeField.scss';
-@import '../../../ds-date-picker/src/DSDatePicker.scss';
-@import '../../../ds-date-time-picker/src/DSDateTimePicker.scss';
-@import '../../../ds-date-range-picker/src/DSDateRangePicker.scss';
-@import '../../../ds-date-range-selector/src/DSDateRangeSelector.scss';
-@import '../../../ds-codeeditor/src/DSCodeEditor.scss';
-@import '../../../ds-wysiwygeditor/src/DSWYSIWYGEditor.scss';
-@import '../../../ds-imagelibrarymodal/src/DSImageLibraryModal.scss';
-@import '../../../ds-uploader/src/DSUploader.scss';
-@import '../../../ds-ribbon/src/DSRibbon.scss';
-@import '../../../ds-card-array/src/DSCardArray.scss';
+@import '../../../../legacy/ds-shuttle/src/DSShuttle.scss';
+@import '../../../../legacy/ds-filterbar/src/DSFilterBar.scss';
+@import '../../../../legacy/ds-modal/src/DSModal.scss';
+@import '../../../../layout/ds-modal-slide/src/DSModalSlide.scss';
+@import '../../../../legacy/ds-datagrids/src/DataGrids.scss';
+@import '../../../../data/ds-treeview/src/Tree';
+@import '../../../../data/ds-query-builder/src/DSQueryBuilder.scss';
+@import '../../../../legacy/ds-search-field/src/DSSearchField.scss';
+@import '../../../../legacy/ds-date-time-recurrence-picker/src/DSDateTimeRecurrenceSelector.scss';
+@import '../../../../legacy/ds-number-range-field/src/DSNumberRangeField.scss';
+@import '../../../../legacy/ds-date-picker/src/DSDatePicker.scss';
+@import '../../../../legacy/ds-date-time-picker/src/DSDateTimePicker.scss';
+@import '../../../../legacy/ds-date-range-picker/src/DSDateRangePicker.scss';
+@import '../../../../legacy/ds-date-range-selector/src/DSDateRangeSelector.scss';
+@import '../../../../legacy/ds-codeeditor/src/DSCodeEditor.scss';
+@import '../../../../legacy/ds-wysiwygeditor/src/DSWYSIWYGEditor.scss';
+@import '../../../../legacy/ds-imagelibrarymodal/src/DSImageLibraryModal.scss';
+@import '../../../../layout/ds-ribbon/src/DSRibbon.scss';
+@import '../../../../legacy/ds-card-array/src/DSCardArray.scss';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/dimsum.scss

@@ -3,7 +3,7 @@
 // include grid data
 @import './base/grid.scss';
 
-// elements scss
+// elements scss 
 @import './base/_elements/_elements.scss';
 
 // components from design system

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

@@ -15,16 +15,16 @@ Change these color values below to your brand colors.
 */
 // Brand - Primary
 $theme-color-brand-primary-900: null;
-$theme-color-brand-primary-800: null;
+$theme-color-brand-primary-800: null; 
 $theme-color-brand-primary-700: null;
 $theme-color-brand-primary-600: null;
-$theme-color-brand-primary-500: #00fc00;
+$theme-color-brand-primary-500: #00FC00;
 $theme-color-brand-primary-400: null;
 $theme-color-brand-primary-300: null;
 $theme-color-brand-primary-200: null;
 $theme-color-brand-primary-100: null;
 
-// Brand - Secondary
+// Brand - Secondary 
 $theme-color-brand-secondary-900: null;
 $theme-color-brand-secondary-800: null;
 $theme-color-brand-secondary-700: null;
@@ -38,49 +38,51 @@ $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: #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;
+$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: #32b87c;
+// Success - Used to communicate status or feedback to the user 
+$theme-color-success-900: #32B87C;
 $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: #e34256;
+$theme-color-danger-900: #E34256;
 $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.
@@ -93,4 +95,4 @@ $theme-base-font-size: 13px;
 
 // **BORDER RADIUS**
 // How round would you like your containers to be?
-$theme-base-border-radius: 2px;
+$theme-base-border-radius: 2px;