draft-components 0.52.4 → 0.54.0

package/scss/components/_date-picker.scss

@@ -0,0 +1,178 @@
+@use 'sass:math' as math;
+
+$_calendar-cell-gap: $gap-2x;
+$_calendar-cell-size: px-to-rem(30px);
+$_calendar-day-border: 1px dashed var(--dc-calendar-border-color);
+
+.dc-date-picker,
+.dc-date-range-picker {
+  display: inline-block;
+}
+
+.dc-calendar {
+  font-family: var(--dc-font-base);
+}
+
+.dc-calendar-header {
+  display: flex;
+  align-items: center;
+}
+
+.dc-calendar-header > * + * {
+  margin-left: $gap-1x;
+}
+
+.dc-calendar-header__title {
+  font-size: $font-size-sm;
+  font-weight: $font-weight-normal;
+  flex: auto;
+  text-align: center;
+  color: var(--dc-calendar-text-color);
+}
+
+.dc-calendar-header__title::first-letter {
+  text-transform: uppercase;
+}
+
+.dc-calendar-header__btn {
+  color: var(--dc-calendar-arrow-color);
+}
+
+.dc-calendar__row-group > * + * {
+  margin-top: $_calendar-cell-gap;
+}
+
+.dc-calendar__row-group > *:first-child {
+  justify-content: flex-end;
+}
+
+.dc-calendar-row {
+  display: flex;
+}
+
+.dc-calendar-row_head {
+  margin-bottom: $gap-2x;
+  padding: $gap-2x 0;
+  border-bottom: 1px solid var(--dc-calendar-border-secondary-color);
+}
+
+.dc-calendar-row_head > * {
+  font-size: $font-size-xs;
+  flex: auto;
+  text-align: center;
+  color: var(--dc-calendar-text-secondary-color);
+}
+
+.dc-calendar-row_head > * + * {
+  margin-left: $_calendar-cell-gap;
+}
+
+.dc-calendar-day {
+  position: relative;
+  flex: 0 0 $_calendar-cell-size;
+  height: $_calendar-cell-size;
+  color: var(--dc-calendar-text-color);
+}
+
+.dc-calendar-day::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: '';
+  border-radius: inherit;
+}
+
+.dc-calendar-day__btn {
+  font-size: $font-size-sm;
+  line-height: 1;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: $_calendar-cell-size;
+  height: $_calendar-cell-size;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  color: inherit;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  background: none;
+  appearance: none;
+}
+
+.dc-calendar-day__btn:hover {
+  z-index: 1;
+  border-color: var(--dc-calendar-border-color);
+}
+
+.dc-calendar-day__btn:focus {
+  z-index: 1;
+  outline: none;
+  @include focus-ring;
+}
+
+.dc-calendar-day_range-preview-start:not(.dc-calendar-day_selected) .dc-calendar-day__btn,
+.dc-calendar-day_range-preview-end:not(.dc-calendar-day_selected) .dc-calendar-day__btn {
+  border-color: var(--dc-calendar-border-color);
+}
+
+.dc-calendar-day + .dc-calendar-day {
+  padding-left: $_calendar-cell-gap;
+}
+
+.dc-calendar-day + .dc-calendar-day_range-start,
+.dc-calendar-day + .dc-calendar-day_range-preview-start {
+  margin-left: $_calendar-cell-gap;
+  padding-left: 0;
+}
+
+.dc-calendar-day_in-range::before {
+  background: $blue-100;
+}
+
+.dc-calendar-day_in-range-preview::before {
+  border-top: $_calendar-day-border;
+  border-bottom: $_calendar-day-border;
+}
+
+.dc-calendar-day_in-range-preview:first-child::before,
+.dc-calendar-day_in-range-preview.dc-calendar-day_range-preview-start::before {
+  border-left: $_calendar-day-border;
+}
+
+.dc-calendar-day_in-range-preview:last-child::before,
+.dc-calendar-day_in-range-preview.dc-calendar-day_range-preview-end::before {
+  border-right: $_calendar-day-border;
+}
+
+.dc-calendar-day_range-start,
+.dc-calendar-day_range-preview-start,
+.dc-calendar-day:first-child {
+  border-top-left-radius: math.div($_calendar-cell-size, 2);
+  border-bottom-left-radius: math.div($_calendar-cell-size, 2);
+}
+
+.dc-calendar-day_range-end,
+.dc-calendar-day_range-preview-end,
+.dc-calendar-day:last-child {
+  border-top-right-radius: math.div($_calendar-cell-size, 2);
+  border-bottom-right-radius: math.div($_calendar-cell-size, 2);
+}
+
+.dc-calendar-day_current {
+  color: var(--dc-calendar-current-day-text-color);
+}
+
+.dc-calendar-day_selected {
+  color: var(--dc-calendar-selected-day-text-color);
+}
+
+.dc-calendar-day_selected .dc-calendar-day__btn {
+  background: var(--dc-calendar-selected-day-bg-color);
+}
+
+.dc-calendar-day_selected .dc-calendar-day__btn:hover {
+  border-color: var(--dc-calendar-selected-day-bg-color);
+}

package/scss/components/_date-range-picker-popover.scss

@@ -0,0 +1,112 @@
+.dc-date-range-picker-popover {
+  max-height: initial !important;
+}
+
+.dc-date-range-picker-popover__content {
+}
+
+.dc-date-range-picker-popover__content > * + * {
+  margin-top: $gap-4x;
+}
+
+.dc-date-range-picker-popover__content-body {
+  display: flex;
+}
+
+.dc-date-range-picker-popover__content-body > * + * {
+  margin-left: $gap-4x;
+}
+
+.dc-date-range-picker-popover__content-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.dc-date-range-picker-popover__content-footer > * + * {
+  margin-left: $gap-2x;
+}
+
+.dc-date-preset-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dc-date-preset-list > * + * {
+  margin-top: $gap-1x;
+}
+
+.dc-date-preset-list-item {
+  width: 100%;
+}
+
+.dc-date-preset-list-item__btn {
+  font-size: $font-size-sm;
+  width: 100%;
+  padding: $gap-2x $gap-3x;
+  cursor: pointer;
+  text-align: left;
+  color: var(--dc-date-preset-btn-text-color);
+  border: none;
+  border-radius: $border-radius-md;
+  background: var(--dc-date-preset-btn-bg);
+  appearance: none;
+}
+
+.dc-date-preset-list-item__btn:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 px-to-rem(2px) var(--dc-focus-border-color);
+}
+
+.dc-date-preset-list-item__btn:hover {
+  color: var(--dc-date-preset-hover-btn-text-color);
+  background: var(--dc-date-preset-hover-btn-bg);
+}
+
+.dc-date-preset-list-item__btn_selected,
+.dc-date-preset-list-item__btn_selected:hover {
+  color: var(--dc-date-preset-selected-btn-text-color);
+  background: var(--dc-date-preset-selected-btn-bg);
+}
+
+@media screen and (max-width: 599px) {
+  .dc-date-range-picker-popover__content-body {
+    display: block;
+  }
+
+  .dc-date-range-picker-popover__content-body > * + * {
+    margin-top: $gap-1x;
+    margin-left: 0;
+  }
+
+  .dc-date-preset-list {
+    display: flex;
+    overflow-y: auto;
+    max-width: px-to-rem(258px);
+    padding-bottom: $gap-3x;
+  }
+
+  .dc-date-preset-list > * + * {
+    margin-top: 0;
+    margin-left: $gap-2x;
+  }
+
+  .dc-date-preset-list-item {
+    white-space: nowrap;
+  }
+
+  .dc-date-preset-list-item__btn {
+    border-radius: $border-radius-lg;
+  }
+
+  .dc-date-preset-list-item__btn:not(.dc-date-preset-list-item__btn_selected) {
+    color: var(--dc-date-preset-btn-text-color);
+    background: var(--dc-date-preset-btn-bg);
+  }
+
+  .dc-date-range-picker-popover__content-footer > * {
+    flex: auto;
+  }
+}

package/scss/components/_index.scss

@@ -10,6 +10,8 @@
 @import 'number-input';
 @import 'password-input';
 @import 'datetime-input';
+@import 'date-picker';
+@import 'date-range-picker-popover';
 @import 'slider';
 @import 'textarea';
 @import 'select';
@@ -26,6 +28,7 @@
 @import 'non-ideal-state-view';
 @import 'loading-view';
 @import 'toast';
+@import 'toaster';
 @import 'breadcrumbs';
 @import 'vertical-navigation';
 @import 'segmented-control';

package/scss/components/_input.scss

@@ -34,7 +34,7 @@
 }
 
 .dc-input_invalid {
-  border-color: var(--dc-input-error-color);
+  --dc-input-border-color: var(--dc-input-error-color);
 }
 
 .dc-input_invalid:focus,

package/scss/components/_non-ideal-state-view.scss

@@ -18,6 +18,10 @@
   color: var(--dc-non-ideal-state-icon-color);
 }
 
+.dc-non-ideal-state__description {
+  color: var(--dc-non-ideal-state-description-color);
+}
+
 .dc-non-ideal-state__icon_red {
   color: $red-500;
 }

package/scss/components/_toast.scss

@@ -1,15 +1,14 @@
 .dc-toast-btn {
+  font-size: $font-size-sm;
   padding: $gap-1x $gap-3x;
+  cursor: pointer;
   transition: $transition-quick;
   transition-property: opacity;
   opacity: $opacity-65;
   color: var(--dc-toast-btn-text-color);
-  cursor: pointer;
   border: none;
   border-radius: $border-radius-md;
   background: var(--dc-toast-btn-bg);
-  backdrop-filter: blur(10px);
-  font-size: $font-size-sm;
   appearance: none;
 
   &:hover {
@@ -17,23 +16,27 @@
   }
 
   &:focus {
-    outline: none;
     opacity: $opacity-100;
+    outline: none;
+    box-shadow: 0 0 0 0.125rem $gray-500;
   }
 }
 
 .dc-toast {
+  font-family: var(--dc-font-base);
+  font-size: $font-size-sm;
+  position: relative;
   display: inline-flex;
   box-sizing: border-box;
   width: auto;
-  max-width: 38rem;
-  min-width: 40%;
+  min-width: px-to-rem(256px);
+  max-width: px-to-rem(600px);
+  text-align: left;
   color: var(--dc-toast-text-color);
-  border-radius: $border-radius-lg;
+  border-radius: $border-radius-xl;
   background: var(--dc-toast-bg);
-  font-family: var(--dc-font-base);
-  font-size: $font-size-sm;
 }
+
 .dc-toast_full-width {
   width: 100%;
   max-width: initial;
@@ -61,31 +64,37 @@
 }
 
 .dc-toast__icon {
-  margin-right: $gap-3x;
+  margin-top: px-to-rem(2px);
+  margin-right: $gap-4x;
 }
+
 .dc-toast_appearance_error .dc-toast__icon {
   color: $red-500;
 }
+
 .dc-toast_appearance_warning .dc-toast__icon {
   color: $orange-500;
 }
+
 .dc-toast_appearance_success .dc-toast__icon {
   color: $green-400;
 }
+
 .dc-toast_appearance_info .dc-toast__icon {
-  color: $blue-300;
+  color: $blue-400;
 }
 
-.dc-toast__heading,
-.dc-toast__message {
-  margin: 0;
+.dc-toast__message,
+.dc-toast__informative-text {
   font-size: inherit;
   font-weight: $font-weight-normal;
-  line-height: $leading-tight;
+  line-height: $leading-normal;
+  margin: 0;
 }
 
-.dc-toast__message {
-  opacity: $opacity-75;
+.dc-toast__informative-text {
+  font-size: 90%;
+  color: var(--dc-toast-secondary-text-color);
 }
 
 .dc-toast__content > * + * {

package/scss/components/_toaster.scss

@@ -0,0 +1,87 @@
+.toaster {
+  position: fixed;
+  z-index: $zindex-toast;
+  right: $gap-2x;
+  left: $gap-2x;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  pointer-events: none;
+}
+
+.toaster_position_top-left,
+.toaster_position_top-center,
+.toaster_position_top-right {
+  top: $gap-2x;
+}
+
+.toaster_position_bottom-left,
+.toaster_position_bottom-center,
+.toaster_position_bottom-right {
+  bottom: $gap-2x;
+}
+
+.toaster_position_top-left > *,
+.toaster_position_bottom-left > * {
+  text-align: left;
+}
+
+.toaster_position_top-center > *,
+.toaster_position_bottom-center > * {
+  text-align: center;
+}
+
+.toaster_position_top-right > *,
+.toaster_position_bottom-right > * {
+  text-align: right;
+}
+
+.toaster > * {
+  position: absolute;
+  right: 0;
+  left: 0;
+  transition: transform 250ms ease;
+  transform: translateX(-50%, 0);
+}
+
+.toaster__item {
+  animation: 250ms ease forwards;
+  pointer-events: all;
+  box-shadow: 0 0 0 1px $gray-600, $shadow-lg;
+}
+
+@keyframes dc-show-toast-from-top {
+  from {
+    opacity: 0;
+    transform: translateY(-100%) scale(0.75);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.toaster_position_top-left .toaster__item,
+.toaster_position_top-center .toaster__item,
+.toaster_position_top-right .toaster__item {
+  animation-name: dc-show-toast-from-top;
+}
+
+@keyframes dc-show-toast-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(0) scale(0.75);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-100%) scale(1);
+  }
+}
+
+.toaster_position_bottom-left .toaster__item,
+.toaster_position_bottom-center .toaster__item,
+.toaster_position_bottom-right .toaster__item {
+  animation-name: dc-show-toast-from-bottom;
+}
+

package/scss/themes/_default-theme.scss

@@ -153,6 +153,30 @@
   --dc-slider-track-bg: #{$gray-400};
   --dc-slider-fill-track-bg: #{$blue-500};
 
+  /*------------------------------------*\
+   #DATE PICKER
+  \*------------------------------------*/
+  --dc-calendar-text-color: #{$gray-800};
+  --dc-calendar-text-secondary-color: #{$gray-500};
+  --dc-calendar-border-color: #{$gray-500};
+  --dc-calendar-border-secondary-color: #{$gray-200};
+  --dc-calendar-arrow-color: #{$blue-600};
+  --dc-calendar-current-day-text-color: #{$orange-600};
+  --dc-calendar-selected-day-text-color: #{$white};
+  --dc-calendar-selected-day-bg-color: #{$blue-500};
+
+  /*------------------------------------*\
+   #DATE RANGE PICKER POPOVER
+  \*------------------------------------*/
+  --dc-date-preset-btn-text-color: #{$gray-500};
+  --dc-date-preset-btn-bg: none;
+  --dc-date-preset-phone-btn-text-color: #{$gray-800};
+  --dc-date-preset-phone-btn-bg: #{$gray-100};
+  --dc-date-preset-hover-btn-text-color: #{$gray-800};
+  --dc-date-preset-hover-btn-bg: #{$gray-100};
+  --dc-date-preset-selected-btn-text-color: #{$blue-700};
+  --dc-date-preset-selected-btn-bg: #{$blue-100};
+
   /*------------------------------------*\
    #ACTIONS GROUP
   \*------------------------------------*/
@@ -163,20 +187,18 @@
    #NON IDEAL STATE VIEW
   \*------------------------------------*/
   --dc-non-ideal-state-text-color: var(--dc-primary-text-color);
+  --dc-non-ideal-state-description-color: var(--dc-secondary-text-color);
   --dc-non-ideal-state-icon-color: var(--dc-tertiary-text-color);
 
   /*------------------------------------*\
    #TOAST
   \*------------------------------------*/
-  --dc-toast-bg: #{$gray-800};
+  --dc-toast-bg: #{$gray-700};
   --dc-toast-text-color: #{$white};
+  --dc-toast-secondary-text-color: #{$gray-300};
   --dc-toast-btn-bg: #{rgba($white, $opacity-10)};
   --dc-toast-btn-text-color: #{$white};
 
-  @supports (backdrop-filter: blur()) {
-    --dc-toast-bg: #{rgba($gray-800, $opacity-90)};
-  }
-
   /*------------------------------------*\
    #BREADCRUMBS
   \*------------------------------------*/