@odx/ui 4.10.0 → 4.10.1

package/scss/wizard-step.component.scss

@@ -0,0 +1,256 @@
+@use 'sass:math';
+@use 'sass:color';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../abstract/typography';
+
+.odx-wizard-step {
+  $root: &;
+  $parent-root: odx-wizard;
+  $step-size: dimensions.get-size(math.div(20, 24));
+  $icon-size: dimensions.get-size(math.div(13, 24));
+  $border-width: dimensions.get-size(math.div(2, 24));
+
+  cursor: pointer;
+  display: none;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+
+  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+    gap: dimensions.get-size(math.div(8, 24));
+    min-width: var(--odx-horizontal-wizard-width);
+  }
+
+  &.is-disabled {
+    @include utils.non-interactive();
+  }
+
+  &--visible {
+    display: inline-flex;
+  }
+
+  &__label {
+    @include typography.prevent-text-overflow();
+    @include utils.with-outline();
+    @include motion.transition(background-color, outline-color);
+
+    align-self: center;
+    border-radius: var(--odx-v-border-radius-controls);
+    color: var(--odx-c-secondary-disabled);
+    margin: 0 auto;
+    padding: dimensions.get-size(math.div(4, 24));
+    user-select: none;
+
+    #{$root}--valid & {
+      color: var(--odx-control-color-disabled);
+    }
+
+    #{$root}--passed & {
+      color: var(--odx-c-primary);
+    }
+
+    #{$root}--active & {
+      font-weight: var(--odx-typography-font-weight-medium);
+    }
+
+    #{$root}:focus-visible & {
+      background-color: var(--odx-c-focus);
+      outline-color: var(--odx-c-focus-outline);
+    }
+
+    #{$root}:hover & {
+      background-color: var(--blue-700-5);
+    }
+
+    .#{$parent-root}--vertical & {
+      margin: unset;
+    }
+  }
+
+  &__line-before,
+  &__line-after,
+  &__dotted-line {
+    flex: 1;
+
+    .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+      border-bottom: $border-width solid var(--odx-c-secondary-disabled);
+      height: 0;
+    }
+
+    .#{$parent-root}--vertical & {
+      border-left: $border-width solid var(--odx-c-secondary-disabled);
+      width: 0;
+    }
+  }
+
+  &__dotted-line {
+    &:not(.odx-wizard-step__dotted-line--active) {
+      display: none;
+    }
+
+    .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+      align-self: flex-end;
+      border-style: dashed;
+      height: 0;
+      margin-bottom: calc(#{$step-size} / 2 - #{$border-width} / 2);
+      min-width: var(--odx-horizontal-wizard-width);
+    }
+
+    .#{$parent-root}.#{$parent-root}--vertical & {
+      border-style: dashed;
+      margin-left: calc(#{$step-size} / 2 - #{$border-width} / 2);
+      padding-bottom: var(--odx-vertical-wizard-height);
+    }
+
+    #{$root}:first-of-type + & {
+      .#{$parent-root}.#{$parent-root}--vertical & {
+        border-left-color: var(--odx-c-primary);
+      }
+
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: var(--odx-c-primary);
+      }
+    }
+
+    .#{$parent-root}:not(.#{$parent-root}--vertical):has(#{$root}:last-of-type#{$root}--touched) & {
+      &:last-of-type {
+        border-bottom-color: var(--odx-control-color-disabled);
+      }
+    }
+
+    .#{$parent-root}--vertical:has(#{$root}:last-of-type#{$root}--touched) & {
+      &:last-of-type {
+        border-left-color: var(--odx-control-color-disabled);
+      }
+    }
+  }
+
+  &__line-before {
+    #{$root}:first-of-type & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: transparent;
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: transparent;
+      }
+    }
+
+    #{$root}--touched & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: var(--odx-control-color-disabled);
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: var(--odx-control-color-disabled);
+      }
+    }
+
+    #{$root}--passed & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: var(--odx-c-primary);
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: var(--odx-c-primary);
+      }
+    }
+  }
+
+  &__line-after {
+    #{$root}--touched:not(#{$root}--is-last-touched) & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: var(--odx-control-color-disabled);
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: var(--odx-control-color-disabled);
+      }
+    }
+
+    #{$root}:last-of-type & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: transparent;
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: transparent;
+      }
+    }
+
+    #{$root}--passed:not(#{$root}--active) & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: var(--odx-c-primary);
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: var(--odx-c-primary);
+      }
+    }
+  }
+
+  &__holder {
+    align-items: center;
+    display: flex;
+
+    .#{$parent-root}--vertical & {
+      flex-direction: column;
+      height: 100%;
+    }
+  }
+
+  &__circle {
+    @include motion.transition(background-color, color);
+
+    align-items: center;
+    border: $border-width solid var(--odx-c-secondary-disabled);
+    border-radius: 50%;
+    color: var(--odx-c-secondary-disabled);
+    display: flex;
+    height: $step-size;
+    justify-content: center;
+    width: $step-size;
+
+    #{$root}--touched & {
+      border-color: var(--odx-control-color-disabled);
+      color: var(--odx-control-color-disabled);
+    }
+
+    #{$root}--active & {
+      background-color: var(--odx-c-primary);
+      border-color: var(--odx-c-primary);
+      color: var(--odx-c-primary);
+    }
+
+    #{$root}--active#{$root}--valid & {
+      color: var(--white);
+    }
+
+    #{$root}--passed & {
+      border-color: var(--odx-c-primary);
+      color: var(--odx-c-primary);
+    }
+  }
+
+  &__icon {
+    font-size: $icon-size;
+    font-weight: var(--odx-typography-font-weight-semibold);
+    height: $icon-size;
+    visibility: hidden;
+    width: $icon-size;
+
+    #{$root}--valid & {
+      visibility: visible;
+    }
+  }
+
+  .#{$parent-root}--vertical & {
+    align-items: center;
+    flex: 0 0 var(--odx-vertical-wizard-height);
+    flex-direction: row-reverse;
+    gap: dimensions.get-size(math.div(12, 24));
+    justify-content: start;
+  }
+}

package/scss/wizard.component.scss

@@ -0,0 +1,18 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/breakpoints';
+
+.odx-wizard {
+  --odx-horizontal-wizard-width: #{dimensions.get-size(math.div(100, 24))};
+  --odx-vertical-wizard-height: #{dimensions.get-size(math.div(70, 24))};
+
+  display: flex;
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--overflow:not(&--vertical) {
+    min-width: calc(var(--odx-horizontal-wizard-width) * 7);
+  }
+}

package/323d385340fb9fee6450.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74 29">
-  <path
-    fill="#000000"
-    d="M29.717 2.887c0 1.4-1.127 2.535-2.512 2.535a2.522 2.522 0 0 1-2.514-2.533c0-1.4 1.124-2.534 2.514-2.534a2.523 2.523 0 0 1 2.512 2.532ZM9.827.848H0v2.554h7.779c.903 0 1.635.732 1.644 1.637v14.62a1.65 1.65 0 0 1-1.644 1.64H4.823l.001-15.516H0v18.174h9.827c2.303 0 4.17-1.868 4.192-4.187V5.036C13.998 2.717 12.13.848 9.827.848Zm13.968 6.18c-2.705-.01-4.327.186-5.537.464-1.649.414-2.318.972-2.638 1.24a2.134 2.134 0 0 1-.145.114v15.111h4.596V11.452c-.027-1.55 2.264-2.062 3.722-.984l.002-3.44Zm42.037 1.694c.324-.269.992-.823 2.634-1.235 1.205-.275 2.833-.475 5.534-.464v3.44c-1.457-1.079-3.75-.566-3.726.984v12.509h-4.593V8.84c.04-.028.09-.068.15-.12ZM31.507 21.278h-2.135c-.987.018-1.716-.705-1.737-1.76a37.415 37.415 0 0 1 0-1.91c.014-.968.75-1.743 1.737-1.73h2.135v5.4Zm.679-14.253h-7.447v3.438s2.625-.894 4.448-.894c2.222 0 2.34 1.13 2.322 1.635v2.022h-4.484c-2.048 0-3.709 1.67-3.718 3.734v3.246c0 2.07 1.665 3.75 3.718 3.75h9.077v-13.01c-.015-2.318-1.883-3.92-3.916-3.92Zm1.074-1.604a2.521 2.521 0 0 0 2.512-2.534A2.52 2.52 0 0 0 33.26.355a2.522 2.522 0 0 0-2.513 2.532 2.523 2.523 0 0 0 2.513 2.534ZM43.7 9.605c-1.776 0-1.974 1.253-1.974 1.975v1.67c0 .725.198 1.976 1.974 1.974 1.778-.001 1.975-1.25 1.975-1.975v-1.67c0-.722-.197-1.974-1.975-1.974Zm2.281 8.092H41.33c-2.038.01-3.916-1.604-3.914-3.919V10.98C37.405 8.927 39 7.014 41.3 7.025h8.566v6.72c.004 2.05-1.601 3.96-3.884 3.952Zm-.117 6.877c0 .719-.21 1.971-2.084 1.971-1.869 0-2.078-1.252-2.078-1.97v-1.673c0-.723.21-1.977 2.078-1.977 1.875 0 2.084 1.255 2.084 1.977v1.672Zm.473-6.234-5.21.002c-2.29-.003-3.892 1.868-3.885 3.92v2.785c-.005 2.305 1.88 3.956 3.917 3.953h5.204c2.288 0 3.902-1.915 3.89-3.953v-2.785a3.916 3.916 0 0 0-3.916-3.922Zm9.41-3.326h3.946v-3.449c0-.723-.253-1.975-1.972-1.975-1.722 0-1.973 1.252-1.973 1.975v3.449Zm-.59-7.99 5.173-.001c2.03 0 3.926 1.602 3.923 3.92v6.699h-8.417v2.072c.008.906.696 1.66 2.522 1.66 2.81.005 5.761-.846 5.761-.846v3.428h-8.76c-2.233.004-4.123-1.6-4.118-3.918v-9.093c0-2.33 1.879-3.93 3.916-3.921Z"
-  />
-</svg>