@elliemae/ds-basic 3.51.0-next.0 → 3.51.0-next.1

package/dist/styles/components/packages/ds-indeterminate-progress-indicator/DSIndeterminateProgressIndicator.scss

@@ -0,0 +1,237 @@
+// ********************************************
+// container definition
+$indeterminate-progress-indicator: #{$prefix}-indeterminate-progress-indicator;
+$complete: #{$indeterminate-progress-indicator}-complete;
+$failed: #{$indeterminate-progress-indicator}-failed;
+$bar: #{$indeterminate-progress-indicator}__bar;
+$indicator: #{$indeterminate-progress-indicator}__bar-indicator;
+$tooltip-text: #{$indeterminate-progress-indicator}-tooltip-text;
+.#{$bar} {
+  background-color: color(neutral, 100);
+  overflow: hidden;
+}
+.#{$indicator} {
+  height: space(xxs);
+}
+
+@keyframes indeterminateAnimation {
+  0% {
+    transform: scaleX(0.015);
+    transform-origin: 0% 0%;
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
+  }
+
+  25% {
+    transform: scaleX(0.4);
+  }
+
+  50% {
+    transform: scaleX(0.015);
+    transform-origin: 100% 0%;
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
+  }
+
+  50.1% {
+    transform: scaleX(0.015);
+    transform-origin: 100% 0%;
+    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
+  }
+
+  75% {
+    transform: scaleX(0.4);
+  }
+
+  100% {
+    transform: scaleX(0.015);
+    transform-origin: 0% 0%;
+    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
+  }
+}
+
+@keyframes processingSuccess {
+  0%,
+  30% {
+    transform: translateX(-50%);
+    width: 50%;
+  }
+  15% {
+    transform: translateX(150%);
+    width: 50%;
+  }
+  0%,
+  60% {
+    transform: translateX(-50%);
+    width: 50%;
+  }
+  45% {
+    transform: translateX(150%);
+    width: 50%;
+  }
+  0%,
+  90% {
+    transform: translateX(-50%);
+    width: 50%;
+  }
+  75% {
+    transform: translateX(150%);
+    width: 50%;
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+@keyframes processingSuccessEnd {
+  0% {
+    transform: translateX(-50%);
+    width: 50%;
+  }
+  45% {
+    transform: translateX(150%);
+    width: 50%;
+  }
+  100% {
+    transform: translateX(0%);
+    background-color: color(success, 900);
+  }
+}
+
+@keyframes processingFail {
+  0%,
+  30% {
+    transform: translateX(-50%);
+    width: 50%;
+  }
+  15% {
+    transform: translateX(150%);
+    width: 50%;
+  }
+  0%,
+  60% {
+    transform: translateX(-50%);
+    width: 50%;
+  }
+  45% {
+    transform: translateX(150%);
+    width: 50%;
+  }
+  0%,
+  90% {
+    transform: translateX(-50%);
+    width: 50%;
+  }
+  75% {
+    transform: translateX(150%);
+    width: 50%;
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+@keyframes processingFailEnd {
+  0% {
+    transform: translateX(-50%);
+    width: 50%;
+  }
+  45% {
+    transform: translateX(150%);
+    width: 50%;
+  }
+  100% {
+    transform: translateX(0%);
+    background-color: #e34256;
+  }
+}
+@keyframes labelAnimation {
+  0% {
+    opacity: 1;
+  }
+  92% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.#{$indeterminate-progress-indicator} {
+  width: 100%;
+  padding: space(xs) space(m);
+
+  &-default {
+    .#{$indicator} {
+      background-color: color(neutral, 500);
+      width: 50%;
+    }
+  }
+  &-complete {
+    .#{$indicator} {
+      background-color: color(success, 900);
+    }
+  }
+  &-failed {
+    .#{$indicator} {
+      background-color: #e34256;
+    }
+  }
+  &-processing {
+    .#{$indicator} {
+      background-color: color(brand-primary, 500);
+      width: 50%;
+    }
+    &.animated {
+      .#{$indicator} {
+        width: 100%;
+        animation: indeterminateAnimation 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
+      }
+    }
+    &.#{$complete} {
+      .#{$indicator} {
+        animation: processingSuccessEnd 1s ease-in-out;
+        animation-fill-mode: forwards;
+      }
+      .#{$tooltip-text} {
+        animation: labelAnimation 1s ease-in-out;
+      }
+    }
+  }
+  &-processing-complete {
+    .#{$indicator} {
+      background-color: color(brand-primary, 500);
+      width: 50%;
+      animation: processingSuccess 4s infinite;
+      animation-fill-mode: forwards;
+    }
+    &.#{$complete} {
+      .#{$indicator} {
+        animation: processingSuccessEnd 1s ease-in-out;
+        animation-fill-mode: forwards;
+      }
+      .#{$tooltip-text} {
+        animation: labelAnimation 1s ease-in-out;
+      }
+    }
+  }
+  &-processing-fail {
+    .#{$indicator} {
+      background-color: color(brand-primary, 500);
+      width: 50%;
+      animation: processingFail 4s infinite;
+      animation-fill-mode: forwards;
+    }
+    &.#{$failed} {
+      .#{$indicator} {
+        animation: processingFailEnd 1s ease-in-out;
+        animation-fill-mode: forwards;
+      }
+      .#{$tooltip-text} {
+        animation: labelAnimation 1s ease-in-out;
+      }
+    }
+  }
+  &.line-only {
+    padding: 0;
+  }
+}

package/dist/styles/components/packages/ds-label-value/DSLabelValue.scss

@@ -0,0 +1,132 @@
+// ********************************************
+// container definition
+$el-label-value: #{$prefix}-labelValue;
+$el-label-value-group: #{$prefix}-labelValueGroup;
+
+// ********************************************
+// elements definition
+$el-wrapper: #{$el-label-value}__wrapper;
+$el-label-value-group-wrapper: #{$el-label-value-group}__wrapper;
+$el-label-value-wrapper: #{$el-label-value}__label-value-wrapper;
+$el-label-value-label: #{$el-label-value}__label;
+$el-label-value-value: #{$el-label-value}__value;
+
+.#{$el-label-value-group-wrapper} {
+  display: flex;
+  flex-direction: column;
+  width: fit-content; 
+  max-width: 100%;
+}
+
+.#{$el-label-value-group-wrapper}--horizontal {
+  flex-direction: row;
+
+  &.#{$el-label-value-group-wrapper}--inline {
+    .#{$el-wrapper} {
+      .#{$el-label-value-wrapper} {
+        flex-direction: row;
+  
+        .#{$el-label-value-label} {
+          margin-right: space(xs)
+        }
+      }
+    }
+  }  
+}
+
+.#{$el-label-value-group-wrapper}--vertical {
+  align-items: flex-end;
+
+  &.#{$el-label-value-group-wrapper}--inline {
+    align-items: unset;
+    .#{$el-wrapper} {
+      margin: space(xs);
+
+      .#{$el-label-value-wrapper} {
+        flex-direction: row;
+  
+        .#{$el-label-value-label} {
+          margin-right: space(xs)
+        }
+      }
+    }
+  }  
+}
+
+.#{$el-wrapper} {
+  display: flex;
+  flex-direction: row;
+  width: auto; 
+  max-width: 100%;
+  margin: space(s);
+
+  .em-ds-icon {
+    margin-top: 1rem;
+    fill: color(neutral, 500);
+    height: auto;
+    margin-right: space(xxs);
+    
+    svg {
+      height: auto;
+    }
+  }
+
+  &.#{$el-wrapper}--inverted {
+    .em-ds-icon {
+      margin-bottom: 1rem;
+      margin-top: unset;
+    }
+  }
+
+  .#{$el-label-value-wrapper} {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    flex-direction: column;
+
+    .#{$el-label-value-value} {
+      display: inline-flex;
+    }
+  
+    .#{$el-label-value-label}--neutral500,
+    .#{$el-label-value-value}--neutral500 {
+      color: color(neutral, 500);
+    }
+  
+    .#{$el-label-value-label}--left,
+    .#{$el-label-value-value}--left {
+      text-align: left;
+    }
+  
+    .#{$el-label-value-label}--right,
+    .#{$el-label-value-value}--right {
+      text-align: right;
+    }
+  
+    .#{$el-label-value-label}--center,
+    .#{$el-label-value-value}--center {
+      text-align: center;
+    } 
+  
+    .#{$el-label-value-label}--neutral700,
+    .#{$el-label-value-value}--neutral700 {
+      color: color(neutral, 700);
+    } 
+    
+    .#{$el-label-value-value}--s {
+      font-size: 1rem;
+    }   
+  
+    .#{$el-label-value-value}--m {
+      font-size: 1.0769rem;
+    }  
+    
+    .#{$el-label-value-value}--l {    
+      font-size: space(s);
+    }
+  
+    .#{$el-label-value-value}--semibold {    
+      font-weight: 600;
+    }     
+  }
+}

package/dist/styles/components/packages/ds-loading-indicator/DSLoadingIndicator.scss

@@ -0,0 +1,11 @@
+// ********************************************
+// container definition
+$el-container: #{$prefix}-loading-indicator;
+
+.#{$el-container} {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 201; // loading indicator trumps all modals / overlays; https://jira.elliemae.io/browse/PUI-1712
+}

package/dist/styles/components/packages/ds-menu/Menu.scss

@@ -0,0 +1 @@
+@import '../../ds-common/src/Menu/Menu';

package/dist/styles/components/packages/ds-menu/MenuCombobox.scss

@@ -0,0 +1 @@
+@import '../../ds-common/src/Menu/MenuCombobox';

package/dist/styles/components/packages/ds-menu/MenuItems/MenuItem.scss

@@ -0,0 +1 @@
+@import '../../../ds-common/src/Menu/MenuItems/MenuItem';

package/dist/styles/components/packages/ds-menu/MenuItems/SearchableGroup.scss

@@ -0,0 +1 @@
+@import '../../../ds-common/src/Menu/MenuItems/SearchableGroup';

package/dist/styles/components/packages/ds-modal/DSModal.scss

@@ -0,0 +1,2 @@
+@import './v1/DSModal';
+@import './v2/DSModal';

package/dist/styles/components/packages/ds-modal/v1/DSModal.scss

@@ -0,0 +1,187 @@
+// ********************************************
+// container definition
+$el-container: #{$prefix}-modal;
+$el-overlay: #{$el-container}-overlay;
+$el-content: #{$el-container}-content;
+$el-header: #{$el-container}-modal-header;
+$el-footer: #{$el-container}-modal-footer;
+$el-actions: #{$el-container}-modal-footer-actions;
+
+
+// ********************************************
+// elements
+$el-header-title: #{$el-header}__title;
+$el-header-icon: #{$el-header}__icon;
+$el-body: #{$el-container}__body;
+$el-body-wrapper: #{$el-container}__body-wrapper;
+$el-footer-btn: #{$el-container}__button-action;
+
+
+// ********************************************
+// modifiers
+$el-size-xsmall: #{$el-container}--x-small;
+$el-size-small: #{$el-container}--small;
+$el-size-medium: #{$el-container}--medium;
+$el-size-large: #{$el-container}--large;
+$el-size-xlarge: #{$el-container}--x-large;
+$el-fluid-actions: #{$el-footer}--fluid-actions;
+$el-loading-actions: #{$el-footer}--loading;
+$el-center: #{$el-container}--center;
+
+// ********************************************
+// Vars
+$modal-body-min-height: 96px; // from Spec
+$border-style:solid 1px;  // from Spec
+$modal-margin: space(m) auto;
+
+
+
+// ********************************************
+// Basic
+body.ReactModal__Body--open {
+  overflow: hidden;
+}
+
+.#{$el-overlay} {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  outline: 0;
+  background-color: rgba(color(neutral, 800), 0.5); // TO BE DEFINED
+  overflow: auto;
+  @include transition(duration(slower) easing(out));
+
+  &[class*='after-open'] {
+    opacity: 1;
+  }
+
+  &[class*='before-close'] {
+    opacity: 0;
+  }
+
+  &.#{$el-center} {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.#{$el-container}{
+  //@include transition(duration(slower) easing(out));
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: color(neutral, 000);
+  background-clip: padding-box;
+  min-width: space(xxl) * 2;
+  &:focus{
+    outline: none;
+  }
+}
+
+
+.#{$el-size-xsmall}{
+  max-width: space(xxl) * 5;
+  margin: $modal-margin;
+}
+
+.#{$el-size-small}{
+  max-width: space(xxl) * 7.5;
+  margin: $modal-margin;
+}
+
+.#{$el-size-medium}{
+  max-width: space(xxl) * 9;
+  margin: $modal-margin;
+}
+
+.#{$el-size-large}{
+  max-width: space(xxl) * 12;
+  margin: $modal-margin;
+}
+
+.#{$el-size-xlarge}{
+  max-width: space(xxl) * 16;
+  margin: $modal-margin;
+}
+
+// ********************************************
+// HEADER
+.#{$el-header}{
+  background: color(neutral, 050);
+  display: flex;
+  align-items: flex-start;
+  border-bottom: $border-style color(neutral, 080);
+  padding: space(s);
+  flex: 0 0 auto;
+}
+.#{$el-header-title}{
+  @include h3-text-style();
+  color: color(neutral, 700);
+  word-break: break-word;
+}
+
+.#{$el-header-icon} {
+  cursor: pointer;
+  margin-left: auto;
+  padding-left: space(s);
+}
+
+// ********************************************
+// BODY
+.#{$el-body} {
+  padding: space(m);
+  flex: 1 1 auto;
+}
+
+.#{$el-body-wrapper} {
+  padding-bottom: space(s);
+  overflow-y: hidden;
+  overflow-x: auto;
+  word-break: break-word;
+}
+
+
+// ********************************************
+// FOOTER
+.#{$el-footer} {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: $border-style color(neutral, 080);
+  padding: space(s);
+  flex: 0 0 auto;
+}
+
+.#{$el-actions} {
+  display: flex;
+}
+
+.#{$el-footer-btn} {
+  margin-left: space(s);
+}
+.#{$el-fluid-actions} {
+
+  .#{$el-actions} {
+    flex-direction: column;
+    flex:1;
+  }
+
+  .#{$el-footer-btn} {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
+// .#{$el-loading-actions} {
+
+//   .#{$el-footer-btn} {
+//     opacity: 0;
+//   }
+// }
+
+
+@import './ModalFeedBack/ModalFeedBack';

package/dist/styles/components/packages/ds-modal/v1/ModalFeedBack/ModalFeedBack.scss

@@ -0,0 +1,42 @@
+$icon-selector :#{$prefix}-icon;
+
+.#{$prefix}-modal-feedback{
+  display: flex;
+  justify-content: center;
+  padding-bottom: space(s);
+
+  .#{$icon-selector}{
+    height: space(xxl);
+    width: space(xxl);
+  }
+
+  &--modal-type-warning{
+    .#{$icon-selector}{
+      @include icon-color(color(warning, 700));
+    }
+  }
+
+  &--modal-type-error{
+    .#{$icon-selector}{
+      @include icon-color(color(danger, 900));
+    }
+  }
+
+  &--modal-type-success{
+    .#{$icon-selector}{
+      @include icon-color(color(success, 900));
+    }
+  }
+
+  &--modal-type-help{
+    .#{$icon-selector}{
+      @include icon-color(color(brand-primary, 400));
+    }
+  }
+
+  &--modal-type-info{
+    .#{$icon-selector}{
+      @include icon-color(color(brand-primary, 400));
+    }
+  }
+}