@odx/ui 1.0.4 → 2.1.1

package/scss/components/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-wizzard-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-wizzard-width);
+    }
+
+    .#{$parent-root}.#{$parent-root}--vertical & {
+      border-style: dashed;
+      margin-left: calc(#{$step-size} / 2 - #{$border-width} / 2);
+      padding-bottom: var(--odx-verticalal-wizzard-heigth);
+    }
+
+    #{$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-bold);
+    height: $icon-size;
+    visibility: hidden;
+    width: $icon-size;
+
+    #{$root}--valid & {
+      visibility: visible;
+    }
+  }
+
+  .#{$parent-root}--vertical & {
+    align-items: center;
+    flex: 0 0 var(--odx-vertical-wizzard-heigth);
+    flex-direction: row-reverse;
+    gap: dimensions.get-size(math.div(12, 24));
+    justify-content: start;
+  }
+}

package/scss/components/wizard.component.scss

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

package/scss/core.scss

@@ -6,12 +6,13 @@ Layout
 */
 
 @use 'layout/base';
+@use 'layout/content';
 @use 'layout/description-list';
 @use 'layout/layout';
 @use 'layout/helpers';
 @use 'layout/typography';
 @use 'layout/text-list';
-@use 'layout/content';
+@use 'layout/application';
 
 /*
   CDK
@@ -32,6 +33,7 @@ Layout
 @use 'components/accordion-item.component';
 @use 'components/action-group.component';
 @use 'components/area-header.component';
+@use 'components/autocomplete.component';
 @use 'components/avatar.component';
 @use 'components/badge.component';
 @use 'components/bar.component';
@@ -41,6 +43,7 @@ Layout
 @use 'components/card.component';
 @use 'components/checkbox.component';
 @use 'components/chip.component';
+@use 'components/chip-list.component';
 @use 'components/circular-progress.component';
 @use 'components/content-box.component';
 @use 'components/dropdown.component';
@@ -59,6 +62,7 @@ Layout
 @use 'components/menu.component';
 @use 'components/modal.component';
 @use 'components/navigation-back.component';
+@use 'components/option.component';
 @use 'components/progress.component';
 @use 'components/radio-button.component';
 @use 'components/radio-group.component';
@@ -70,8 +74,11 @@ Layout
 @use 'components/switch.component';
 @use 'components/tab-bar-item.component';
 @use 'components/tab-bar.component';
+@use 'components/table.component';
 @use 'components/toast.component';
 @use 'components/toast-item.component';
 @use 'components/toggle-button.component';
 @use 'components/toggle-button-group.component';
 @use 'components/tooltip.component';
+@use 'components/wizard.component';
+@use 'components/wizard-step.component';

package/scss/layout/_application.scss

@@ -0,0 +1,75 @@
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../components/icon.component';
+@use './typography';
+
+.odx-app-root,
+.odx-app {
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.odx-app {
+  display: flex;
+  flex-direction: column;
+}
+
+.odx-app-main,
+.odx-app-page {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.odx-app-main {
+  flex-direction: row;
+}
+
+.odx-app-page {
+  flex-direction: column;
+  max-height: 100%;
+
+  &__content {
+    flex: 1 1 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+
+    @include dimensions.padding(0.5, (bottom, left, right));
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, (bottom, left, right));
+      @include dimensions.padding(0.5, top);
+    }
+  }
+}
+
+.odx-app-content {
+  margin: 0 auto;
+  max-width: breakpoints.get-breakpoint-value(desktop);
+  width: 100%;
+
+  &--left-align {
+    margin-left: 0;
+  }
+}
+
+.odx-error-page {
+  align-self: center;
+  text-align: center;
+
+  @include dimensions.padding(2, top);
+
+  &__icon {
+    @extend .odx-icon--xlarge;
+  }
+
+  &__title {
+    @extend .odx-title;
+    @extend .odx-title-3;
+  }
+
+  &__description {
+    @extend .odx-subtitle;
+    @extend .odx-subtitle-5;
+  }
+}

package/scss/layout/_helpers.scss

@@ -57,10 +57,10 @@ html body {
   }
 
   hr,
-  .odx-seperator {
+  .odx-separator {
     @include dimensions.height(1, math.div(1, 24));
 
-    background-color: var(--odx-c-seperator);
+    background-color: var(--odx-c-separator);
     border: 0;
   }
 

package/scss/layout/_layout.scss

@@ -69,9 +69,9 @@ $columns: 12 !default;
     order: $columns;
   }
 
-  #{create-selector(seperator)} {
+  #{create-selector(separator)} {
     background-clip: content-box;
-    border-color: var(--odx-c-seperator);
+    border-color: var(--odx-c-separator);
     border-style: solid;
 
     @each $side in (right, left) {

package/scss/variables/_colors.scss

@@ -35,7 +35,7 @@ body {
 
   --odx-c-box-shadow: var(--blue-800-30);
 
-  --odx-c-seperator: var(--gray-200);
+  --odx-c-separator: var(--gray-200);
 
   --odx-c-background: var(--gray-50);
   --odx-c-background-content: var(--white);