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

package/src/components/CdsSlideView/CdsSlideView.scss

@@ -0,0 +1,183 @@
+@use 'sass:selector';
+@use '../../styles/tools';
+@use '../../styles/settings';
+@use './styles/CdsSlideView.variables' as *;
+
+@include tools.layer('components') {
+  .cds-slide-view {
+    overflow: hidden;
+
+    &__container {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      height: inherit;
+      transition: $slide-view-transition;
+    }
+
+    &__controls {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
+      padding: $slide-view-controls-padding;
+      pointer-events: none;
+
+      > * {
+        pointer-events: auto
+      }
+    }
+
+    &--show-arrows-on-hover {
+      overflow: hidden;
+
+      .cds-slide-view__left {
+        transform: translateX(-200%);
+      }
+
+      @at-root #{selector.append(':has(.cds-slide-view__controls--right)', &)} {
+        .cds-slide-view__left {
+          transform: translateX(200%);
+        }
+      }
+
+      .cds-slide-view__right {
+        transform: translateX(200%);
+      }
+
+      @at-root #{selector.append(':has(.cds-slide-view__controls--left)', &)} {
+        .cds-slide-view__right {
+          transform: translateX(-200%);
+        }
+      }
+
+      &:hover {
+        .cds-slide-view__left,
+        .cds-slide-view__right {
+          transform: translateX(0);
+        }
+      }
+    }
+
+    &--vertical-arrows {
+      .cds-slide-view__controls {
+        flex-direction: column;
+        gap: $slide-view-controls-vertical-gap;
+        justify-content: center;
+
+        &--left {
+          align-items: start;
+        }
+
+        &--right {
+          align-items: end;
+        }
+
+        .cds-slide-view__left,
+        .cds-slide-view__right {
+          .cds-icon {
+            transform: rotate(90deg);
+          }
+        }
+      }
+    }
+
+    &--crossfade > .cds-slide-view__container {
+      isolation: isolate;
+
+      .cds-slide-view-item {
+        mix-blend-mode: $slide-view-crossfade-blend-mode;
+      }
+    }
+  }
+}
+
+@include tools.layer('transitions') {
+  .cds-slide-view {
+    &-x-transition,
+    &-x-reverse-transition,
+    &-y-transition,
+    &-y-reverse-transition {
+      &-enter-active,
+      &-leave-active {
+        transition: $slide-view-transition;
+
+        @media (prefers-reduced-motion: reduce) {
+          transition-duration: 0s;
+        }
+      }
+
+      &-leave-from,
+      &-leave-to {
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+    }
+
+    &-x-transition {
+      &-enter-from {
+        transform: translateX(100%);
+      }
+
+      &-leave-to {
+        transform: translateX(-100%);
+      }
+    }
+
+    &-x-reverse-transition {
+      &-enter-from {
+        transform: translateX(-100%);
+      }
+
+      &-leave-to {
+        transform: translateX(100%);
+      }
+    }
+
+    &-y-transition {
+      &-enter-from {
+        transform: translateY(100%)
+      }
+
+      &-leave-to {
+        transform: translateY(-100%)
+      }
+    }
+
+    &-y-reverse-transition {
+      &-enter-from {
+        transform: translateY(-100%);
+      }
+
+      &-leave-to {
+        transform: translateY(100%);
+      }
+    }
+  }
+
+  .cds-slide-view {
+    &-crossfade-transition {
+      &-enter-active,
+      &-leave-active {
+        transition: $slide-view-transition;
+      }
+
+      &-leave-from,
+      &-leave-to {
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+
+      &-enter-from,
+      &-leave-to {
+        opacity: 0;
+      }
+    }
+  }
+}

package/src/components/CdsSlideView/styles/_CdsSlideView.variables.scss

@@ -0,0 +1,4 @@
+$slide-view-transition: .3s cubic-bezier(.25, .8, .50, 1) !default;
+$slide-view-controls-padding: 0 16px !default;
+$slide-view-controls-vertical-gap: 12px !default;
+$slide-view-crossfade-blend-mode: plus-lighter !default;

package/src/components/CdsStages/CdsStages.scss

@@ -0,0 +1,109 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsStages.variables' as *;
+
+@include tools.layer('components') {
+  .cds-stages {
+    display: grid;
+    padding: 0;
+    margin: 0;
+    overflow-x: auto;
+    list-style: none;
+    border: 0;
+
+    &__stage {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: $stages-inner-padding;
+      color: map.get($stages-color, 'color');
+      list-style: none;
+      background: map.get($stages-color, 'background');
+      border: $stages-border;
+      border-right-color: transparent;
+
+      &:first-child {
+        border-left-color: map.get($stages-color, 'color');
+        border-top-left-radius: $stages-border-radius;
+        border-bottom-left-radius: $stages-border-radius;
+      }
+
+      &:last-child {
+        border-right-color: map.get($stages-color, 'color');
+        border-top-right-radius: $stages-border-radius;
+        border-bottom-right-radius: $stages-border-radius;
+      }
+
+      &--active {
+        color: map.get($stages-color, 'active-text');
+        border-color: map.get($stages-color, 'active');
+
+        .cds-stages__arrow > path:last-child {
+          fill: map.get($stages-color, 'background');
+          stroke: map.get($stages-color, 'active');
+        }
+
+        &:first-child {
+          border-left-color: map.get($stages-color, 'active');
+        }
+
+        &:last-child {
+          border-right-color: map.get($stages-color, 'active');
+        }
+      }
+
+      &--checked {
+        color: map.get($stages-color, 'success-text');
+        border-color: map.get($stages-color, 'success');
+
+        .cds-stages__arrow > path:last-child {
+          fill: map.get($stages-color, 'background');
+          stroke: map.get($stages-color, 'success');
+        }
+
+        &:first-child {
+          border-left-color: map.get($stages-color, 'success');
+        }
+
+        &:last-child {
+          border-right-color: map.get($stages-color, 'success');
+        }
+      }
+
+      &--invalid {
+        color: map.get($stages-color, 'error-text');
+        border-color: map.get($stages-color, 'error');
+
+        .cds-stages__arrow > path:last-child {
+          fill: map.get($stages-color, 'background');
+          stroke: map.get($stages-color, 'error');
+        }
+
+        &:first-child {
+          border-left-color: map.get($stages-color, 'error');
+        }
+
+        &:last-child {
+          border-right-color: map.get($stages-color, 'error');
+        }
+      }
+    }
+
+    &__text {
+      @include tools.cds-text-regular-200;
+    }
+
+    &__arrow {
+      position: absolute;
+      right: $stages-arrow-offset;
+      z-index: tools.z('cds-layer-extra-low');
+
+      > path:last-child {
+        fill: map.get($stages-color, 'background');
+        stroke: map.get($stages-color, 'color');
+        stroke-width: var(--cds-border-200);
+      }
+    }
+  }
+}

package/src/components/CdsStages/styles/_CdsStages.variables.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+$stages-color: (
+  'background': rgb(var(--cds-color-fill-primary)),
+  'color': rgb(var(--cds-color-line-primary)),
+  'text': rgb(var(--cds-color-content-tertiary)),
+  'active': rgb(var(--cds-color-status-progress-line)),
+  'active-text': rgb(var(--cds-color-status-progress-content)),
+  'success': rgb(var(--cds-color-status-success-line)),
+  'success-text': rgb(var(--cds-color-status-success-content)),
+  'error': rgb(var(--cds-color-status-danger-line)),
+  'error-text': rgb(var(--cds-color-status-danger-content))
+) !default;
+$stages-border: var(--cds-border-200) solid map.get($stages-color, 'color') !default;
+$stages-border-radius: var(--cds-border-radius-200) !default;
+$stages-inner-padding: var(--cds-spacing-200) var(--cds-spacing-400) var(--cds-spacing-200) var(--cds-spacing-500) !default;
+$stages-arrow-offset: -15px !default;

package/src/components/CdsStatus/CdsStatus.scss

@@ -0,0 +1,49 @@
+@use '../../styles/tools';
+@use './styles/CdsStatus.variables' as *;
+
+@include tools.layer('components') {
+  .cds-status {
+    display: inline-flex;
+    gap: $status-gap;
+    align-items: center;
+    max-width: $status-max-width;
+    height: $status-height;
+    padding: $status-padding;
+    text-align: center;
+    border-radius: $status-border-radius;
+
+    &__text {
+      display: inline;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: normal;
+      overflow-wrap: normal;
+      white-space: nowrap;
+
+      @include tools.cds-text-bold-100;
+    }
+
+    @each $status in (info, success, warning, danger, progress) {
+      &--#{$status} {
+        color: rgb(var(--cds-color-status-#{$status}-content));
+        background-color: rgb(var(--cds-color-status-#{$status}-fill));
+
+        .cds-status__icon {
+          color: rgb(var(--cds-color-status-#{$status}-surface));
+        }
+      }
+    }
+
+    &--text {
+      padding: 0;
+      background-color: transparent;
+
+      .cds-status__text {
+        color: rgb(var(--cds-color-content-primary));
+        text-transform: none;
+
+        @include tools.cds-text-regular-100;
+      }
+    }
+  }
+}

package/src/components/CdsStatus/styles/_CdsStatus.variables.scss

@@ -0,0 +1,7 @@
+@use '../../../styles/tools';
+
+$status-padding: 0 var(--cds-spacing-100) !default;
+$status-border-radius: var(--cds-border-radius-100) !default;
+$status-gap: var(--cds-spacing-100) !default;
+$status-height: tools.to-rem(20px) !default;
+$status-max-width: 100% !default;

package/src/components/CdsSteps/CdsSteps.scss

@@ -0,0 +1,216 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsSteps.variables' as *;
+
+@include tools.layer('components') {
+  .cds-steps {
+    display: flex;
+    flex-direction: column;
+    gap: $steps-section-gap;
+
+    &__header {
+      display: flex;
+      gap: $steps-header-gap;
+      width: 100%;
+      padding: 0;
+      margin: 0;
+      pointer-events: none;
+      list-style: none;
+      border: 0;
+
+      @include tools.cds-animation-motion(tools.$cds-duration-very-fast, 'ease-in-out', 'basic');
+    }
+
+    &--interactive .cds-steps__header {
+      pointer-events: all;
+    }
+
+    &--vertical {
+      flex-direction: row;
+
+      .cds-steps__header {
+        flex-direction: column;
+        gap: 0;
+        width: auto;
+        height: 100%;
+      }
+    }
+  }
+
+  .cds-steps-item {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: $steps-item-gap;
+    width: 100%;
+    min-width: $steps-item-min-width;
+    list-style: none;
+
+    &__title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: map.get($steps-item-color, 'title');
+      white-space: nowrap;
+
+      @include tools.cds-text-regular-200;
+    }
+
+    &__text {
+      width: 100%;
+      color: map.get($steps-item-color, 'description');
+      overflow-wrap: break-word;
+
+      @include tools.cds-text-regular-200;
+    }
+
+    &__icon {
+      flex-shrink: 0;
+      width: $steps-item-icon-size;
+      height: $steps-item-icon-size;
+      border: $steps-item-icon-border solid map.get($steps-item-color, 'icon-unpassed');
+      border-radius: 50%;
+
+      @include tools.cds-animation-motion(tools.$cds-duration-instant, 'ease-in-out', 'basic');
+    }
+
+    &__indicator {
+      position: relative;
+      width: 100%;
+      height: $steps-item-indicator-size;
+      background-color: map.get($steps-item-color, 'indicator');
+      border-radius: $steps-item-indicator-radius;
+
+      &-stream {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: var(--cds-steps-item-progress, 0%);
+        height: 100%;
+        content: '';
+        background-color: map.get($steps-item-color, 'stream');
+        border-radius: $steps-item-indicator-radius;
+
+        @include tools.cds-animation-motion(tools.$cds-duration-very-fast, 'ease-in-out', 'accent');
+      }
+    }
+
+    &__status {
+      display: flex;
+      gap: $steps-item-status-gap;
+      align-items: center;
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      width: auto;
+      padding-right: $steps-item-content-padding;
+    }
+
+    &--current,
+    &--complete {
+      .cds-steps-item__icon {
+        background-color: map.get($steps-item-color, 'current');
+        border-color: map.get($steps-item-color, 'current');
+      }
+    }
+
+    &--warning {
+      .cds-steps-item__icon {
+        background-color: map.get($steps-item-color, 'warning');
+        border-color: map.get($steps-item-color, 'warning');
+      }
+
+      .cds-steps-item__title {
+        color: map.get($steps-item-color, 'warning-text');
+      }
+    }
+
+    &--disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+
+      .cds-steps-item__title,
+      .cds-steps-item__text {
+        color: map.get($steps-item-color, 'disabled');
+      }
+
+      .cds-steps-item__icon {
+        background-color: transparent;
+        border: $steps-item-icon-border solid map.get($steps-item-color, 'icon-disabled');
+      }
+    }
+
+    &--error {
+      .cds-steps-item__icon {
+        background-color: map.get($steps-item-color, 'error');
+        border: none;
+      }
+
+      .cds-steps-item__title {
+        color: map.get($steps-item-color, 'error-text');
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .cds-steps--interactive .cds-steps-item {
+    cursor: pointer;
+
+    &:hover:not(.cds-steps-item--current, .cds-steps-item--complete) {
+      .cds-steps-item__icon {
+        border-color: map.get($steps-item-color, 'icon-hover');
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      .cds-steps-item__icon {
+        outline: $steps-item-icon-border solid map.get($steps-item-color, 'focus');
+        outline-offset: 1px;
+      }
+    }
+  }
+
+  .cds-steps--vertical .cds-steps-item {
+    flex-direction: row;
+    gap: $steps-item-vertical-gap;
+    width: auto;
+    height: $steps-item-vertical-height;
+
+    .cds-steps-item__status {
+      display: flex;
+      flex-direction: column;
+      padding-top: $steps-item-status-vertical-padding;
+    }
+
+    .cds-steps-item__content {
+      width: $steps-item-vertical-content-width;
+      padding-right: 0;
+      padding-bottom: $steps-item-vertical-content-padding;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .cds-steps-item__indicator {
+      width: $steps-item-indicator-size;
+      height: 100%;
+
+      &-stream {
+        width: 100%;
+        height: var(--cds-steps-item-progress, 0%);
+      }
+    }
+  }
+
+  .cds-steps-actions {
+    display: flex;
+    gap: $steps-actions-gap;
+    align-items: center;
+    justify-content: space-between;
+  }
+}

package/src/components/CdsSteps/styles/_CdsSteps.variables.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+@use '../../../styles/settings';
+
+// CdsSteps
+$steps-section-gap: var(--cds-spacing-400) !default;
+$steps-header-gap: var(--cds-spacing-100) !default;
+
+// CdsStepsItem
+$steps-item-gap: var(--cds-spacing-100) !default;
+$steps-item-min-width: 96px !default;
+$steps-item-status-gap: var(--cds-spacing-100) !default;
+$steps-item-content-padding: var(--cds-spacing-400) !default;
+$steps-item-icon-size: 12px !default;
+$steps-item-icon-border: var(--cds-border-200) !default;
+$steps-item-indicator-size: 4px !default;
+$steps-item-indicator-radius: map.get(settings.$rounded, 'pill') !default;
+
+// CdsStepsItem (vertical)
+$steps-item-vertical-gap: var(--cds-spacing-200) !default;
+$steps-item-vertical-height: 56px !default;
+$steps-item-vertical-content-width: 168px !default;
+$steps-item-vertical-content-padding: var(--cds-spacing-400) !default;
+$steps-item-status-vertical-padding: var(--cds-spacing-100) !default;
+$steps-item-color: (
+  'icon-unpassed': rgb(var(--cds-color-line-primary)),
+  'icon-hover': rgb(var(--cds-color-status-progress-surface)),
+  'icon-disabled': rgb(var(--cds-color-line-disable)),
+  'current': rgb(var(--cds-color-status-progress-surface)),
+  'warning': rgb(var(--cds-color-status-warning-surface)),
+  'warning-text': rgb(var(--cds-color-status-warning-content)),
+  'error': rgb(var(--cds-color-status-danger-surface)),
+  'error-text': rgb(var(--cds-color-status-danger-content)),
+  'disabled': rgb(var(--cds-color-content-disable)),
+  'title': rgb(var(--cds-color-content-primary)),
+  'description': rgb(var(--cds-color-content-secondary)),
+  'focus': rgb(var(--cds-color-line-focus-outline)),
+  'indicator': rgb(var(--cds-color-fill-secondary)),
+  'stream': rgb(var(--cds-color-status-progress-surface))
+) !default;
+
+// CdsStepsActions
+$steps-actions-gap: var(--cds-spacing-200) !default;

package/src/components/CdsSurface/CdsSurface.scss

@@ -0,0 +1,16 @@
+@use 'sass:list';
+@use '../../styles/tools';
+
+$positions: static, relative, fixed, absolute, sticky;
+
+@include tools.layer('components') {
+  .cds-surface {
+    display: block;
+
+    @each $position in $positions {
+      &--#{$position} {
+        position: $position;
+      }
+    }
+  }
+}