@utahdts/utah-design-system 1.11.2 → 1.12.0

package/css/6-components/_components-index.scss

@@ -16,6 +16,7 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/forms/input-wrapper";
 @use "base-components/forms/text-area";
 @use "base-components/forms/text-input";
+@use "base-components/forms/combo-box-input";
 @use "base-components/forms/character-count";
 @use "base-components/forms/checkbox";
 @use "base-components/forms/select-input";
@@ -30,6 +31,7 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/navigation/skip-link";
 @use "base-components/navigation/vertical-menu";
 @use "base-components/navigation/mega-menu";
+@use "base-components/popups/banner";
 @use "base-components/popups/popups";
 @use "base-components/popups/tooltips";
 @use "base-components/popups/modal";

package/css/6-components/base-components/buttons/_tag.scss

@@ -69,18 +69,28 @@
       font-size: var(--font-size-xs);
       padding: var(--spacing-3xs) var(--spacing-2xs);
 
-      .tag--icon svg {
-        height: .65rem;
-        width: .65rem;
+      .tag--icon {
+        svg {
+          height: .65rem;
+          width: .65rem;
+        }
+        [class*=utds-icon-before-]::before {
+          font-size: .7rem;
+        }
       }
     }
 
     &--large {
       font-size: var(--font-size-m);
 
-      .tag--icon svg {
-        height: 1rem;
-        width: 1rem;
+      .tag--icon {
+        svg {
+          height: 1rem;
+          width: 1rem;
+        }
+        [class*=utds-icon-before-]::before {
+          font-size: 1rem;
+        }
       }
     }
 
@@ -93,6 +103,11 @@
         width: 0.8rem;
       }
 
+      [class*=utds-icon-before-]::before {
+        font-size: .8rem;
+        margin: 0;
+      }
+
       &-left {
         margin-right: var(--spacing-2xs);
       }

package/css/6-components/base-components/forms/_combo-box-input.scss

@@ -0,0 +1,81 @@
+@use "../../../2-tools/tools-index";
+
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  .combo-box-input {
+    &[type="text"] {
+      padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
+      &.text-input--clear-icon-visible {
+        padding: 0 var(--spacing-4xl) 0 var(--spacing-xs);
+      }
+    }
+    &__chevron {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: var(--spacing-xs);
+      font-weight: var(--font-weight-normal);
+      &[class*="utds-icon-before-"]::before {
+        font-size: 0.9rem;
+        line-height: 0;
+      }
+      &--is-disabled {
+        color: var(--form-ele-disabled-color);
+      }
+    }
+    &__inner-wrapper {
+      .text-input__clear-button {
+        right: var(--spacing-xl);
+      }
+      .input-wrapper--text-input {
+        margin: 0;
+      }
+    }
+    &__list-box {
+      background: white;
+      border-radius: var(--radius-small);
+      border: 1px solid var(--gray-3-1-contrast);
+      box-sizing: border-box;
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      z-index: 2000;
+    }
+    &__option {
+      padding: var(--spacing-2xs) var(--spacing-s);
+      &:hover {
+        background: var(--hover-gray-color);
+        cursor: default;
+        color: black;
+      }
+      &--selected {
+        background: var(--form-ele-color);
+        color: white;
+      }
+      &--highlighted {
+        background: var(--hover-gray-color);
+        color: black;
+      }
+      @include tools-index.form-ele-focus;
+      &:focus-visible {
+        outline-offset: -2px;
+        border-radius: var(--radius-small1x);
+      }
+    }
+    &__group-wrapper {
+      ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        li.combo-box-input__option {
+          padding: var(--spacing-2xs) var(--spacing-s) var(--spacing-2xs) var(--spacing);
+        }
+      }
+    }
+    &__group-title {
+      padding: var(--spacing-2xs) var(--spacing-s);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+}

package/css/6-components/base-components/forms/_input-wrapper.scss

@@ -18,9 +18,11 @@
     }
 
     &__error-message {
+      margin-top: var(--spacing-3xs);
       color: var(--danger-color);
     }
-    input, textarea {
+    input,
+    textarea {
       display: block;
     }
   }

package/css/6-components/base-components/popups/_banner.scss

@@ -0,0 +1,182 @@
+@use "../../../1-settings/settings-index";
+@use "../../../1-settings/class-vars";
+@use "../../../1-settings/spacing";
+@use "../../../7-utilities/animation";
+
+#{class-vars.$base-class} {
+  .banner {
+    &__wrapper {
+      display: inline-flex;
+      border-radius: var(--radius-small);
+      background: white;
+      box-shadow: var(--elevation-small-borderless);
+      margin: var(--spacing);
+
+      &:not(.banner--inline) {
+        position: fixed;
+        z-index: 3000;
+      }
+
+      &.banner {
+        &--bottom-left, &--top-left {
+          animation: left-in 1s;
+        }
+
+        &--bottom-right, &--top-right {
+          animation: right-in 1s;
+        }
+
+        &--bottom, &--top {
+          animation: fade-in .5s;
+        }
+
+        &--bottom {
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        &--bottom-left {
+          bottom: 0;
+          left: 0;
+        }
+
+        &--bottom-right {
+          bottom: 0;
+          right: 0;
+        }
+
+        &--top {
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        &--top-left {
+          top: 0;
+          left: 0;
+        }
+
+        &--top-right {
+          top: 0;
+          right: 0;
+        }
+
+        &--info, &--warning, &--danger, &--success {
+          color: white;
+          .banner__close-button button {
+            color: white;
+          }
+        }
+
+        &--info {
+          background-color: var(--info-color);
+        }
+        &--warning {
+          background-color: var(--warning-color);
+        }
+        &--danger {
+          background-color: var(--danger-color);
+        }
+        &--success {
+          background-color: var(--success-color);
+        }
+      }
+    }
+
+    &__message {
+      display: flex;
+      align-items: center;
+      padding: var(--spacing-s) var(--spacing-xs) var(--spacing-s) var(--spacing);
+    }
+
+    &__icon {
+      padding: var(--spacing-s);
+      background-color: rgba(0, 0, 0, 0.3);
+      display: flex;
+      border-radius: var(--radius-small) 0 0 var(--radius-small);
+
+      span {
+        color: white;
+
+        &[class*=utds-icon-before-]::before {
+          margin-right: 0;
+        }
+      }
+    }
+
+    &__close-button {
+      padding: var(--spacing-xs);
+    }
+  }
+
+  &.banner-global__wrapper {
+    z-index: 4000;
+    position: fixed;
+
+    .banner-global{
+      &__zone{
+        position: fixed;
+        display: flex;
+        flex-direction: column-reverse;
+      }
+
+      &__bottom {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        flex-direction: column;
+      }
+
+      &__bottom-left {
+        bottom: 0;
+        left: 0;
+        flex-direction: column;
+      }
+
+      &__bottom-right {
+        bottom: 0;
+        right: 0;
+        flex-direction: column;
+      }
+
+      &__top {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      &__top-left {
+        top: 0;
+        left: 0;
+      }
+
+      &__top-right {
+        top: 0;
+        right: 0;
+      }
+
+      &__bottom, &__top {
+        .banner__wrapper {
+          align-self: baseline;
+        }
+      }
+
+      &__top-right, &__bottom-right {
+        .banner__wrapper {
+          align-self: flex-end;
+        }
+      }
+
+      &__top-left, &__bottom-left {
+        .banner__wrapper {
+          align-self: flex-start;
+        }
+      }
+    }
+
+    .banner__wrapper {
+      position: relative;
+    }
+  }
+}

package/css/6-components/base-components/tablesAndLists/_table.scss

@@ -2,7 +2,7 @@
 
 #{class-vars.$base-class} {
   .table__wrapper {
-    overflow-x: scroll;
+    overflow-x: auto;
   }
   table {
     border-collapse: collapse;

package/css/7-utilities/_animation.scss

@@ -39,3 +39,25 @@
     transform: scale(1) translateX(-50%);
   }
 }
+
+@keyframes left-in {
+  0% {
+    opacity: 0;
+    transform: translate(-100%, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes right-in {
+  0% {
+    opacity: 0;
+    transform: translate(100%, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}