@central-design-system/components 4.0.0-alpha.3 → 4.0.0-alpha.5

package/src/components/CdsDatePicker/CdsDatePicker.scss

@@ -0,0 +1,574 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsDatePicker.variables' as *;
+
+@include tools.layer('components') {
+  .cds-date-picker {
+    display: inline-flex;
+    flex-direction: column;
+    width: $date-picker-calendar-width;
+    min-width: $date-picker-calendar-width;
+    max-width: 100%;
+    color: map.get($date-picker-color, 'color');
+    background-color: map.get($date-picker-color, 'background');
+
+    &__header {
+      padding: $date-picker-header-padding;
+      border-bottom: $date-picker-header-border map.get($date-picker-color, 'border');
+
+      &-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      &-description {
+        display: flex;
+        color: map.get($date-picker-color, 'description');
+
+        @include tools.cds-text-regular-100;
+      }
+
+      &-label {
+        color: map.get($date-picker-color, 'label');
+        outline: none;
+
+        @include tools.cds-text-regular-300;
+      }
+
+      &-year {
+        cursor: pointer;
+        outline: none;
+      }
+    }
+
+    &__container {
+      display: flex;
+      flex: 10000 1 0;
+      flex-flow: column wrap;
+      user-select: none;
+      outline: 0;
+    }
+
+    &__body {
+      position: relative;
+      display: flex;
+      flex: 10000 1 0;
+      flex-flow: column nowrap;
+      height: auto;
+      max-height: 100%;
+      outline: none;
+    }
+
+    &__view {
+      flex: 1 0 auto;
+      width: 100%;
+      height: auto;
+      min-height: $date-picker-calendar-height;
+      padding: $date-picker-calendar-padding;
+    }
+
+    &__actions {
+      padding: 0 $date-picker-calendar-padding $date-picker-calendar-padding;
+    }
+
+    &__navigation {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: space-between;
+      width: $date-picker-calendar-navigation-month-width;
+      padding: $date-picker-calendar-navigation-padding;
+
+      &--months {
+        display: flex;
+        justify-content: center;
+
+        .cds-button {
+          width: $date-picker-calendar-navigation-month-width;
+          padding: $date-picker-month-btn-padding;
+
+          &.cds-button--appearance-tertiary {
+            background-color: transparent;
+          }
+
+          .cds-button__content {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &:hover {
+            background-color: map.get($date-picker-color, 'hover');
+
+            .cds-button__content {
+              color: map.get($date-picker-color, 'color');
+            }
+          }
+        }
+      }
+
+      &--years {
+        display: flex;
+        justify-content: center;
+        width: $date-picker-calendar-navigation-years-width;
+
+        .cds-button {
+          width: $date-picker-calendar-navigation-years-width;
+
+          &.cds-button--appearance-tertiary {
+            background-color: transparent;
+          }
+
+          &:hover {
+            background-color: map.get($date-picker-color, 'hover');
+
+            .cds-button__content {
+              color: map.get($date-picker-color, 'color');
+            }
+          }
+        }
+      }
+    }
+
+    &__arrow {
+      .cds-button.cds-button--appearance-tertiary {
+        background-color: transparent;
+
+        &:hover {
+          background-color: map.get($date-picker-color, 'hover');
+        }
+      }
+    }
+
+    &__calendar-weekdays {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: center;
+      padding: $date-picker-weekdays-padding;
+      margin: $date-picker-calendar-navigation-gap;
+      color: map.get($date-picker-color, 'weekdays');
+    }
+
+    &__weekdays-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $date-picker-weekdays-width;
+      padding: $date-picker-weekdays-padding;
+
+      &:last-child,
+      &:nth-last-child(2) {
+        color: map.get($date-picker-color, 'holiday');
+      }
+
+      @include tools.cds-text-regular-50;
+    }
+
+    &__calendar-days-container {
+      position: relative;
+      padding: $date-picker-days-gap $date-picker-calendar-padding;
+      margin: calc($date-picker-days-gap * -1) calc($date-picker-calendar-padding * -1);
+      overflow: hidden;
+    }
+
+    &__calendar-days {
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: $date-picker-days-gap;
+      place-content: flex-start center;
+      width: 100%;
+      height: 100%;
+    }
+
+    &__calendar-item {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: $date-picker-day-width;
+      height: $date-picker-day-height;
+      vertical-align: middle;
+
+      &::after {
+        position: absolute;
+        bottom: $date-picker-day-dot-gap;
+        width: $date-picker-day-dot;
+        height: $date-picker-day-dot;
+        pointer-events: none;
+        content: "";
+        background-color: transparent;
+        border-radius: 50%;
+      }
+
+      &--fill {
+        color: map.get($date-picker-color, 'fill-day');
+
+        > .cds-date-picker__calendar-day {
+          .cds-button__content {
+            color: map.get($date-picker-color, 'fill-day') !important;
+          }
+        }
+      }
+
+      &--hide-sibling-month {
+        visibility: hidden;
+      }
+
+      &--today {
+        .cds-date-picker__calendar-day {
+          &::before {
+            position: absolute;
+            inset: 0;
+            box-sizing: border-box;
+            content: '';
+            border: $date-picker-day-border map.get($date-picker-color, 'today');
+            border-radius: $date-picker-day-border-radius;
+          }
+        }
+      }
+
+      &--event {
+        &--default {
+          &::after {
+            background-color: map.get($date-picker-color, 'dot-default');
+          }
+
+          &.cds-date-picker__calendar-item--active {
+            &::after {
+              background-color: map.get($date-picker-color, 'dot-active');
+            }
+          }
+        }
+
+        &--success {
+          &::after {
+            background-color: map.get($date-picker-color, 'dot-success');
+          }
+
+          &.cds-date-picker__calendar-item--active {
+            &::after {
+              background-color: map.get($date-picker-color, 'dot-active');
+            }
+          }
+        }
+
+        &--danger {
+          &::after {
+            background-color: map.get($date-picker-color, 'dot-danger');
+          }
+
+          &.cds-date-picker__calendar-item--active {
+            &::after {
+              background-color: map.get($date-picker-color, 'dot-active');
+            }
+          }
+        }
+
+        &--warning {
+          &::after {
+            background-color: map.get($date-picker-color, 'dot-warning');
+          }
+
+          &.cds-date-picker__calendar-item--active {
+            &::after {
+              background-color: map.get($date-picker-color, 'dot-active');
+            }
+          }
+        }
+      }
+
+      &--out {
+        color: map.get($date-picker-color, 'out');
+      }
+
+      &__range {
+        background-color: map.get($date-picker-color, 'range');
+
+        &--from {
+          background-color: map.get($date-picker-color, 'range');
+
+          > .cds-button {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &--to {
+          background-color: map.get($date-picker-color, 'range');
+
+          > .cds-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+
+        .cds-date-picker__calendar-day {
+          &:hover {
+            background-color: map.get($date-picker-color, 'range-hover') !important;
+          }
+        }
+      }
+
+      &__edit-range {
+        background-color: map.get($date-picker-color, 'range-edit');
+
+        &--from, &--to, &--from--to {
+          .cds-date-picker__calendar-day {
+            background-color: map.get($date-picker-color, 'range-edit-day');
+
+            .cds-button__content {
+              color: map.get($date-picker-color, 'range-edit-text') !important;
+            }
+
+            &:hover {
+              background-color: map.get($date-picker-color, 'range-edit-hover') !important;
+            }
+          }
+        }
+
+        &--from {
+          background-color: map.get($date-picker-color, 'range-edit-active');
+
+          > .cds-button {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &--to {
+          background-color: map.get($date-picker-color, 'range-edit-active');
+
+          > .cds-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+
+    &__calendar-day {
+      width: $date-picker-day-width;
+      height: $date-picker-day-height;
+      border-radius: $date-picker-day-border-radius;
+
+      &.cds-button {
+        &:focus-visible {
+          outline-offset: 0;
+        }
+      }
+
+      &.cds-button--appearance-tertiary {
+        background-color: transparent;
+
+        .cds-button__content {
+          color: map.get($date-picker-color, 'color');
+        }
+
+        &:hover {
+          background-color: map.get($date-picker-color, 'hover');
+        }
+      }
+    }
+
+    &__months {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $date-picker-month-gap;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      padding: $date-picker-month-padding;
+
+      &-item {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+
+        .cds-button {
+          padding: $date-picker-month-btn-padding;
+
+          &:not(.cds-button--appearance-primary) {
+            background-color: transparent;
+
+            .cds-button__content {
+              color: map.get($date-picker-color, 'color');
+            }
+          }
+
+          &:hover {
+            &.cds-button--appearance-tertiary {
+              background-color: map.get($date-picker-color, 'hover');
+            }
+          }
+
+          &:focus-visible {
+            outline-offset: 0;
+          }
+
+          .cds-button__content {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            @include tools.cds-text-regular-200;
+          }
+
+          &:disabled {
+            .cds-button__content {
+              color: map.get($date-picker-color, 'disabled');
+            }
+          }
+        }
+      }
+    }
+
+    &__month {
+      width: $date-picker-month-width;
+
+      &::after {
+        position: absolute;
+        bottom: $date-picker-month-dot-gap;
+        width: $date-picker-month-dot;
+        height: $date-picker-month-dot;
+        pointer-events: none;
+        content: "";
+        background-color: transparent;
+        border-radius: 50%;
+      }
+
+      &--active {
+        background-color: map.get($date-picker-color, 'today');
+      }
+
+      &--today {
+        &::before {
+          position: absolute;
+          inset: 0;
+          box-sizing: border-box;
+          content: '';
+          border: $date-picker-day-border map.get($date-picker-color, 'today');
+          border-radius: $date-picker-day-border-radius;
+        }
+      }
+    }
+
+    &__years {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      width: 100%;
+
+      &-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &-body {
+        display: flex;
+        flex-wrap: wrap;
+        gap: $date-picker-years-gap;
+        justify-content: center;
+
+        .cds-button {
+          &:not(.cds-button--appearance-primary) {
+            background-color: transparent;
+
+            .cds-button__content {
+              color: map.get($date-picker-color, 'color');
+            }
+          }
+
+          &:hover {
+            &.cds-button--appearance-tertiary {
+              background-color: map.get($date-picker-color, 'hover');
+            }
+          }
+
+          &:focus-visible {
+            outline-offset: 0;
+          }
+
+          .cds-button__content {
+            @include tools.cds-text-regular-200;
+          }
+
+          &:disabled {
+            .cds-button__content {
+              color: map.get($date-picker-color, 'disabled');
+            }
+          }
+        }
+      }
+
+      &-item {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    &__year {
+      &::after {
+        position: absolute;
+        bottom: $date-picker-year-dot-gap;
+        width: $date-picker-year-dot;
+        height: $date-picker-year-dot;
+        pointer-events: none;
+        content: "";
+        background-color: transparent;
+        border-radius: 50%;
+      }
+
+      &--active {
+        background-color: map.get($date-picker-color, 'today');
+      }
+
+      &--today {
+        &::before {
+          position: absolute;
+          inset: 0;
+          box-sizing: border-box;
+          content: '';
+          border: $date-picker-day-border map.get($date-picker-color, 'today');
+          border-radius: $date-picker-day-border-radius;
+        }
+      }
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: .6;
+
+      .cds-date-picker__header {
+        pointer-events: none;
+      }
+
+      .cds-date-picker__container {
+        cursor: not-allowed;
+      }
+
+      .cds-date-picker__view {
+        pointer-events: none;
+      }
+    }
+
+    &--readonly {
+      .cds-date-picker__header {
+        pointer-events: none;
+      }
+
+      .cds-date-picker__container {
+        cursor: default;
+      }
+
+      .cds-date-picker__view {
+        pointer-events: none;
+      }
+    }
+  }
+}

package/src/components/CdsDatePicker/styles/_CdsDatePicker.variables.scss

@@ -0,0 +1,56 @@
+@use '../../../styles/tools';
+
+$date-picker-color: (
+  'background': transparent,
+  'color': rgb(var(--cds-color-content-primary)),
+  'weekdays': rgb(var(--cds-color-content-placeholder)),
+  'holiday': rgb(var(--cds-color-status-danger-content)),
+  'hover': rgb(var(--cds-color-fill-primary-hover)),
+  'fill-day': rgb(var(--cds-color-fill-disable)),
+  'today': rgb(var(--cds-color-brand-primary)),
+  'border': rgb(var(--cds-color-line-tertiary)),
+  'label': rgb(var(--cds-color-content-primary)),
+  'description': rgb(var(--cds-color-content-secondary)),
+  'dot-default': rgb(var(--cds-color-brand-primary)),
+  'dot-success': rgb(var(--cds-color-status-success-surface)),
+  'dot-danger': rgb(var(--cds-color-status-danger-surface)),
+  'dot-warning': rgb(var(--cds-color-status-warning-surface)),
+  'dot-active': rgb(var(--cds-color-content-on-dark)),
+  'range': rgb(var(--cds-color-brand-secondary)),
+  'range-hover': rgb(var(--cds-color-brand-secondary-hover)),
+  'range-edit': rgb(var(--cds-color-brand-secondary)),
+  'range-edit-day': rgb(var(--cds-color-brand-primary)),
+  'range-edit-text': rgb(var(--cds-color-content-on-dark)),
+  'range-edit-hover': rgb(var(--cds-color-brand-primary-hover)),
+  'range-edit-active': rgb(var(--cds-color-brand-primary-active)),
+  'disabled': rgb(var(--cds-color-content-disable)),
+  'out': rgb(var(--cds-color-content-disable)),
+) !default;
+$date-picker-calendar-width: tools.to-rem(248px) !default;
+$date-picker-calendar-height: tools.to-rem(316px) !default;
+$date-picker-calendar-padding: var(--cds-spacing-300) !default;
+$date-picker-calendar-navigation-month-width: tools.to-rem(79px) !default;
+$date-picker-calendar-navigation-years-width: tools.to-rem(48px) !default;
+$date-picker-calendar-navigation-padding: var(--cds-spacing-200) 0 !default;
+$date-picker-calendar-navigation-gap: var(--cds-spacing-100) 0 !default;
+$date-picker-header-padding: var(--cds-spacing-200) var(--cds-spacing-400) !default;
+$date-picker-header-border: var(--cds-border-100) solid !default;
+$date-picker-days-gap: var(--cds-spacing-100) !default;
+$date-picker-days-width: tools.to-rem(192px) !default;
+$date-picker-day-width: tools.to-rem(32px) !default;
+$date-picker-day-height: tools.to-rem(32px) !default;
+$date-picker-day-border: var(--cds-border-100) solid !default;
+$date-picker-day-border-radius: var(--cds-border-radius-100) !default;
+$date-picker-day-dot: tools.to-rem(4px) !default;
+$date-picker-day-dot-gap: var(--cds-spacing-100) !default;
+$date-picker-weekdays-width: tools.to-rem(32px) !default;
+$date-picker-weekdays-padding: var(--cds-spacing-100) 0 !default;
+$date-picker-month-gap: var(--cds-spacing-100) var(--cds-spacing-100) !default;
+$date-picker-month-width: tools.to-rem(72px) !default;
+$date-picker-month-dot: tools.to-rem(4px) !default;
+$date-picker-month-dot-gap: var(--cds-spacing-50) !default;
+$date-picker-month-padding: var(--cds-spacing-300) !default;
+$date-picker-month-btn-padding: 0 var(--cds-spacing-100) !default;
+$date-picker-years-gap: var(--cds-spacing-500) var(--cds-spacing-300) !default;
+$date-picker-year-dot: tools.to-rem(4px) !default;
+$date-picker-year-dot-gap: var(--cds-spacing-50) !default;

package/src/components/CdsDescription/CdsDescription.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsDescription.variables' as *;
+
+@include tools.layer('components') {
+  .cds-description {
+    display: flex;
+    align-items: center;
+    color: $description-color;
+    user-select: none;
+  }
+}

package/src/components/CdsDescription/styles/_CdsDescription.variables.scss

@@ -0,0 +1 @@
+$description-color: inherit !default;