@elliemae/ds-basic 2.3.0-next.0 → 3.0.0-alpha.0

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

@@ -1,483 +0,0 @@
-// ********************************************
-// container definition
-$btn-el: #{$prefix}-button;
-$input-addon-group: #{$prefix}-input-addon-group;
-
-// ********************************************
-// element definition
-$btn-icon: #{$prefix}-icon;
-
-// ********************************************
-// modifiers
-$btn-el-s: #{$btn-el}--s;
-$btn-el-m: #{$btn-el}--m;
-$btn-el-l: #{$btn-el}--l;
-$btn-el-fluid: #{$btn-el}--fluid-width;
-
-$btn-el-primary: #{$btn-el}--primary;
-$btn-el-text: #{$btn-el}--text;
-$btn-el-secondary: #{$btn-el}--secondary;
-$btn-el-link: #{$btn-el}--link;
-
-// variants
-$btn-el-vfocus: #{$btn-el}--variant-focus;
-$btn-el-vdefault: #{$btn-el}--variant-default;
-$btn-el-vactive: #{$btn-el}--variant-active;
-$btn-el-vdisabled: #{$btn-el}--variant-disabled;
-$btn-el-vhover: #{$btn-el}--variant-hover;
-$btn-el-focus-poc: #{$btn-el}--focus-poc;
-
-// ********************************************
-// Vars
-$button-height: space(m) * 1.17;
-$button-border-radius: $theme-base-border-radius;
-$button-width: space(l) * 1.3;
-$button-padding: 0 space(s);
-
-$s-size: space(s) * 1.125; //18px;
-$m-size: space(m) * 1.17; //28px
-$l-size: space(l) * 1.25; //40px;
-
-$s-font: font-size(300); //12px
-$m-font: font-size(500); //14px;
-$l-font: font-size(600); //16px;
-
-$border-type: solid border-size(xs);
-$border-type-2: solid border-size(m);
-
-$text-disabled: #5c6574;
-
-@mixin withFocus($color: color(brand-primary, 600)) {
-  outline: none;
-  position: relative;
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    @include dsFocus($color);
-  }
-}
-
-@mixin withDisabled() {
-  cursor: not-allowed;
-}
-
-div.#{$btn-el} {
-  -webkit-appearance: initial;
-}
-
-.#{$btn-el} {
-  @include body-text-style(semibold);
-  @include center();
-  min-width: $button-width;
-  line-height: unset;
-  border-radius: $button-border-radius;
-  padding: $button-padding;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: duration(base) easing(base);
-  position: relative;
-
-  & .label-wrapper {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &--icon-only {
-    min-width: auto;
-    min-width: initial;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .#{$btn-icon} {
-    &:first-child:not(:last-child) {
-      margin-right: space(xs);
-      margin-left: space(xs) * -1;
-    }
-    &:last-child:not(:first-child) {
-      margin-left: space(xs);
-      margin-right: space(xs) * -1;
-    }
-
-    &:last-child,
-    &:first-child {
-      .#{$btn-el} {
-        padding-left: space(s) * -1;
-        padding-right: space(s) * -1;
-      }
-    }
-  }
-}
-
-// ********************************************
-// Sizes
-.#{$btn-el-s} {
-  height: $s-size;
-  font-size: $s-font;
-  &.#{$btn-el}--icon-only {
-    width: $s-size;
-  }
-  // https://jira.elliemae.io/browse/PUI-6990
-  // & .#{$btn-icon} {
-  //   height: 12px;
-  //   width: 12px;
-  //   margin-bottom: 5px;
-  // }
-}
-.#{$btn-el-m} {
-  height: $m-size;
-  font-size: $m-font;
-  &.#{$btn-el}--icon-only {
-    width: $m-size;
-  }
-  // https://jira.elliemae.io/browse/PUI-6990
-  // & .#{$btn-icon} {
-  //   height: 14px;
-  //   width: 14px;
-  //   margin-bottom: 4px;
-  // }
-}
-.#{$btn-el-l} {
-  height: $l-size;
-  font-size: $l-font;
-  &.#{$btn-el}--icon-only {
-    width: $l-size;
-  }
-}
-.#{$btn-el-fluid} {
-  width: 100%;
-}
-
-// ********************************************
-// Primary
-
-.#{$btn-el-primary} {
-  color: color(neutral, 000);
-  background-color: color(brand-primary, 600);
-  border: $border-type color(brand-primary, 600);
-
-  .#{$btn-icon} {
-    @include icon-color(color(neutral, 000));
-  }
-
-  &:hover:not([disabled]),
-  &.#{$btn-el-vhover} {
-    background-color: color(brand-primary, 700);
-    border: $border-type color(brand-primary, 700);
-  }
-
-  &:active,
-  &.#{$btn-el-vactive} {
-    background-color: color(brand-primary, 700);
-    border: $border-type color(brand-primary, 700);
-  }
-
-  &:disabled,
-  &.#{$btn-el-vdisabled} {
-    color: $text-disabled;
-    background-color: color(neutral, 100);
-    border-color: color(neutral, 100);
-    @include withDisabled();
-
-    .#{$btn-icon} {
-      @include icon-color($text-disabled);
-    }
-  }
-
-  &:focus,
-  &.#{$btn-el-vfocus} {
-    &::after {
-      position: absolute;
-      content: '';
-      top: 1px;
-      left: 1px;
-      width: calc(100% - 2px);
-      height: calc(100% - 2px);
-      border: $border-type-2 color(neutral, 000);
-    }
-  }
-
-  &.#{$btn-el-s} {
-    &:focus,
-    &.#{$btn-el-vfocus} {
-      &::after {
-        position: absolute;
-        content: '';
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border: $border-type color(neutral, 000);
-      }
-    }
-  }
-}
-
-// ********************************************
-// Text
-.#{$btn-el-text} {
-  color: color(brand-primary, 600);
-  text-transform: uppercase;
-  letter-spacing: 0;
-  background-color: transparent;
-  border: none;
-  font-weight: 600;
-
-  @at-root .#{$input-addon-group}__addon {
-    .#{$btn-el-text} {
-      border: $border-type color(neutral, 400);
-    }
-  }
-
-  .#{$btn-icon} {
-    @include icon-color(color(brand-primary, 600));
-  }
-
-  &:hover:not([disabled]),
-  &.#{$btn-el-vhover} {
-    color: color(brand-primary, 700);
-    background-color: color(brand-primary, 200);
-  }
-
-  &:active,
-  &.#{$btn-el-vactive} {
-    color: color(brand-primary, 700);
-
-    .#{$btn-icon} {
-      @include icon-color(color(brand-primary, 700));
-    }
-  }
-
-  &:disabled,
-  &.#{$btn-el-vdisabled} {
-    color: color(neutral, 500);
-    background: color(neutral, 000);
-    @include withDisabled();
-
-    .#{$btn-icon} {
-      @include icon-color(color(neutral, 500));
-    }
-  }
-
-  &:focus,
-  &:focus:not([disabled]),
-  &.#{$btn-el-vfocus} {
-    &::after {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border-radius: 2px;
-      border: $border-type-2 color(brand-primary, 700);
-    }
-  }
-}
-
-// ********************************************
-// Secondary
-.#{$btn-el-secondary}{
-  color: color(brand-primary, 600);
-  background-color: color(neutral, 000);
-  border: $border-type color(neutral, 400);
-  border-radius: 2px;
-
-  @at-root .#{$input-addon-group}__addon {
-    .#{$btn-el-secondary} {
-      border: $border-type color(neutral, 400);
-    }
-  }
-
-  .#{$btn-icon} {
-    @include icon-color(color(brand-primary, 600));
-  }
-
-  &:hover:not([disabled]),
-  &.#{$btn-el-vhover} {
-    border: $border-type color(brand-primary, 700);
-
-    .#{$btn-icon} {
-      @include icon-color(color(brand-primary, 700));
-    }
-  }
-
-  &:active,
-  &.#{$btn-el-vactive} {
-    color: color(brand-primary, 700);
-    border: $border-type color(brand-primary, 700);
-
-    .#{$btn-icon} {
-      @include icon-color(color(brand-primary, 700));
-    }
-  }
-
-  &:disabled,
-  &.#{$btn-el-vdisabled} {
-    color: color(neutral, 500);
-    background-color: color(neutral, 000);
-    @include withDisabled();
-
-    .#{$btn-icon} {
-      @include icon-color(color(neutral, 500));
-    }
-  }
-
-  &:focus,
-  &.#{$btn-el-vfocus} {
-    &::after {
-      position: absolute;
-      content: '';
-      top: -1px;
-      left: -1px;
-      width: calc(100% + 2px);
-      height: calc(100% + 2px);
-      border-radius: 2px;
-      border: $border-type-2 color(brand-primary, 700);
-    }
-  }
-}
-
-// ********************************************
-// link
-.#{$btn-el-link} {
-  @include link-text-style();
-  padding: 0;
-  color: color(brand-primary, 600);
-  border: none;
-  display: inline;
-  height: unset;
-  line-height: unset;
-  background: transparent;
-  min-width: auto;
-  min-width: initial;
-
-  &:hover:not([disabled]) {
-    text-decoration-line: underline;
-  }
-
-  &:active {
-    color: color(brand-primary, 700);
-  }
-
-  &:disabled {
-    color: color(neutral, 400);
-    @include withDisabled();
-  }
-
-  &.#{$btn-el}--icon-only {
-    &:focus,
-    &.#{$btn-el-vfocus} {
-      span.label-wrapper {
-        @include withFocus();
-        &::after {
-          top: -2px;
-          left: -2px;
-          width: calc(100% + 4px);
-          height: calc(100% + 4px);
-        }
-      }
-    }
-  }
-}
-
-$intent-colors: (
-  "success": color("success", 900),
-  "danger": color("danger", 900),
-  "warning": color("warning", 900),
-  "info": color("brand-primary", 600),
-);
-
-@each $intent, $color in $intent-colors {
-  // button text
-  .#{$btn-el}-#{$intent}.#{$btn-el-text} {
-    color: $color;
-
-    &:focus,
-    &:focus:not([disabled]),
-    &.#{$btn-el-vfocus} {
-      color: $color;
-
-      &::after {
-        position: absolute;
-        content: '';
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: 2px;
-        border: $border-type-2 $color;
-      }
-    }
-
-    &:hover,
-    &:hover:not([disabled]),
-    &.#{$btn-el-vhover} {
-      color: $color;
-      
-      span.label-wrapper.no-icon {
-        &:before {
-          background-color: transparent;
-          border-radius: 2px;
-        }
-      }
-    }
-
-    &:active {
-      color: darken($color, 10%);
-
-      .#{$btn-icon} {
-        @include icon-color(darken($color, 10%));
-      }
-    }
-  }
-}
-
-// ********************************************
-// Mobile
-@include md {
-  // Sizes
-  .#{$btn-el-s} {
-    height: calc(#{space(s)} * 1.22);
-
-    &.#{$btn-el}--icon-only {
-      width: calc(#{space(s)} * 1.22);
-    }
-  }
-
-  .#{$btn-el-m} {
-    font-size: toMobile(font-size(600));
-    height: calc(#{space(m)} * 1.085);
-
-    &.#{$btn-el}--icon-only {
-      width: calc(#{space(m)} * 1.085);
-    }
-  }
-
-  .#{$btn-el-m}:not(.#{$btn-el}--icon-only) {
-    &.#{$btn-el-primary},
-    &.#{$btn-el-secondary} {
-      min-width: calc(#{space(l)} * 1.016 * 2);
-    }
-  }
-
-  .#{$btn-el-l} {
-    font-size: toMobile(font-size(600));
-    height: calc(#{space(l)} * 1.016);
-
-    &.#{$btn-el}--icon-only {
-      width: calc(#{space(l)} * 1.016);
-    }
-  }
-}

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

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

package/styles/dist-index.scss

@@ -1,74 +0,0 @@
-@import 'packages/ds-form/ExpandableInput/DSExpandableInput';
-@import 'packages/ds-form/SearchBox/DSSearchBox';
-@import 'packages/ds-form/TimeInput/DSTimeInput';
-@import 'packages/ds-form/InputGroup/DSInputGroup';
-@import 'packages/ds-button/DSButton';
-@import 'packages/ds-separator/DSSeparator';
-@import 'packages/ds-label-value/DSLabelValue';
-@import 'packages/ds-group-box/DSGroupBox';
-@import 'packages/ds-form/Checkbox/DSCheckbox';
-@import 'packages/ds-form/FormItem/Error/DSError';
-@import 'packages/ds-form/FormItem/Label/DSLabel';
-@import 'packages/ds-form/FormItem/DSFormItemLayout';
-@import 'packages/ds-form/Input/DSInput';
-@import 'packages/ds-form/DateInput/DSDateInput';
-@import 'packages/ds-form/Input/InputAddonWrapper';
-@import 'packages/ds-form/Toggle/DSToggle';
-@import 'packages/ds-form/FloatingLabelInput/DSFloatingLabelInput';
-@import 'packages/ds-form/InputMask/DSInputMask';
-@import 'packages/ds-form/LargeInputText/DSLargeInputText';
-@import 'packages/ds-form/Radio/DSRadio';
-@import 'packages/ds-form/InputProtected/DSInputProtected';
-@import 'packages/ds-text-wrapper/DSTextWrapper';
-@import 'packages/ds-truncated-tooltip-text/DSTruncatedTooltipText';
-@import 'packages/ds-toolbar/DSToolbar';
-@import 'packages/ds-time-picker/DSTimePicker';
-@import 'packages/ds-toast/DSToast';
-@import 'packages/ds-progress-indicator/DSProgressIndicator';
-@import 'packages/ds-spinner/DSSpinner';
-@import 'packages/ds-loading-indicator/DSLoadingIndicator';
-@import 'packages/ds-tooltip/v1/DSTooltip';
-@import 'packages/ds-popover/DSPopover';
-@import 'packages/ds-overlay/DSOverlay';
-@import 'packages/ds-portal/DSPortal';
-@import 'packages/ds-icon/DSIcon';
-@import 'packages/ds-card/DSCard';
-@import 'packages/ds-form/ComboBox/DSComboBox';
-@import 'packages/ds-button-group/DSButtonGroup';
-@import 'packages/ds-form/RadioGroup/DSRadioGroup';
-@import 'packages/ds-form/CheckboxGroup/DSCheckboxGroup';
-@import 'packages/ds-form/RequiredMark/RequiredMark';
-@import 'packages/ds-menu/Menu';
-@import 'packages/ds-page-header/DSPageHeader';
-@import 'packages/ds-pills/DSPills';
-@import 'packages/ds-zoom/DSZoom';
-@import 'packages/ds-indeterminate-progress-indicator/DSIndeterminateProgressIndicator';
-@import 'packages/ds-page-number/DSPageNumber';
-@import 'packages/ds-zipcode-search/DSZipCodeSearch';
-@import 'packages/ds-circular-progress-indicator/DSCircularProgressIndicator';
-
-@import '~react-dates/lib/css/_datepicker.css';
-
-@import 'packages/ds-filterbar/DSFilterBar';
-@import 'packages/ds-shuttle/DSShuttle';
-@import 'packages/ds-modal/DSModal';
-@import 'packages/ds-modal-slide/DSModalSlide';
-@import 'packages/ds-dropdownmenu/DSDropdownMenu';
-@import 'packages/ds-datagrids/DataGrids';
-@import 'packages/ds-treeview/Tree';
-@import 'packages/ds-query-builder/DSQueryBuilder';
-@import 'packages/ds-search-field/DSSearchField';
-@import 'packages/ds-date-time-recurrence-picker/DSDateTimeRecurrenceSelector';
-@import 'packages/ds-number-range-field/DSNumberRangeField';
-@import 'packages/ds-uploader/DSUploader';
-@import 'packages/ds-ribbon/DSRibbon';
-@import 'packages/ds-date-picker/DSDatePicker';
-@import 'packages/ds-date-time-picker/DSDateTimePicker';
-@import 'packages/ds-date-range-picker/DSDateRangePicker';
-@import 'packages/ds-date-range-selector/DSDateRangeSelector';
-@import 'packages/ds-codeeditor/DSCodeEditor';
-@import 'packages/ds-wysiwygeditor/DSWYSIWYGEditor';
-@import 'packages/ds-imagelibrarymodal/DSImageLibraryModal';
-@import 'packages/ds-wizard/DSWizard';
-@import 'packages/ds-card-array/DSCardArray';
-@import 'packages/ds-comments/DSComments';

package/types/Accordion/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-accordion';
-export * from '@elliemae/ds-accordion';

package/types/AppPicker/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-app-picker';
-export * from '@elliemae/ds-app-picker';

package/types/Backdrop/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-backdrop';
-export * from '@elliemae/ds-backdrop';

package/types/Breadcrumb/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-breadcrumb';
-export * from '@elliemae/ds-breadcrumb';

package/types/Button/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-button';
-export * from '@elliemae/ds-button';

package/types/ButtonGroup/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-button-group';
-export * from '@elliemae/ds-button-group';

package/types/Card/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-card';
-export * from '@elliemae/ds-card';

package/types/CircularProgressIndicator/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-circular-progress-indicator';
-export * from '@elliemae/ds-circular-progress-indicator';

package/types/Grid/index.d.ts

@@ -1,2 +0,0 @@
-export * from '@elliemae/ds-grid';
-export { default } from '@elliemae/ds-grid';

package/types/GroupBox/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-group-box';
-export * from '@elliemae/ds-group-box';

package/types/Header/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-header';
-export * from '@elliemae/ds-header';

package/types/Hidden/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-hidden';
-export * from '@elliemae/ds-hidden';

package/types/Icon/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-icon';
-export * from '@elliemae/ds-icon';

package/types/IndeterminateProgressIndicator/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-indeterminate-progress-indicator';
-export * from '@elliemae/ds-indeterminate-progress-indicator';

package/types/LabelValue/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-label-value';
-export * from '@elliemae/ds-label-value';

package/types/ListSectionHeader/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-list-section-header';
-export * from '@elliemae/ds-list-section-header';

package/types/LoadingIndicator/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-loading-indicator';
-export * from '@elliemae/ds-loading-indicator';

package/types/Menu/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-menu';
-export * from '@elliemae/ds-menu';

package/types/Overlay/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-overlay';
-export * from '@elliemae/ds-overlay';

package/types/PageHeader/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-page-header';
-export * from '@elliemae/ds-page-header';

package/types/PageNumber/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-page-number';
-export * from '@elliemae/ds-page-number';

package/types/Pills/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-pills';
-export * from '@elliemae/ds-pills';

package/types/Popover/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-popover';
-export * from '@elliemae/ds-popover';

package/types/Popper/index.d.ts

@@ -1,2 +0,0 @@
-export * from '@elliemae/ds-popper';
-export { default } from '@elliemae/ds-popper';

package/types/Portal/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-portal';
-export * from '@elliemae/ds-portal';

package/types/ProgressIndicator/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-progress-indicator';
-export * from '@elliemae/ds-progress-indicator';

package/types/ReadMore/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from '@elliemae/ds-read-more';
-export * from '@elliemae/ds-read-more';

package/types/ResizableContainer/index.d.ts

@@ -1,2 +0,0 @@
-export * from '@elliemae/ds-resizeable-container';
-export { default } from '@elliemae/ds-resizeable-container';