@utahdts/utah-design-system 2.0.3 → 3.0.0

package/css/1-settings/_icons.scss

@@ -343,4 +343,19 @@
   .utds-icon-after-share::after {
     content: "\0032";
   }
+
+  .utds-icon-before-policy::before,
+  .utds-icon-after-policy::after {
+    content: "\0033";
+  }
+
+  .utds-icon-before-login::before,
+  .utds-icon-after-login::after {
+    content: "\0034";
+  }
+
+  .utds-icon-before-logout::before,
+  .utds-icon-after-logout::after {
+    content: "\0035";
+  }
 }

package/css/1-settings/_settings-index.scss

@@ -54,7 +54,7 @@ variables and settings
   --hover-gray-color: rgba(0, 0, 0, 0.07);
   --hover-gray-color-opaque: rgba(233, 233, 233);
 
-  --code-color: #{color-swatches.$neutral-gray-16};
+  --code-color: #{color-swatches.$neutral-gray-17};
   --gray-border: #{color-swatches.$neutral-gray-15};
 
   --danger-color: #ba0000;

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

@@ -56,3 +56,6 @@ component specific, BEM (Block, Element, Modifier)
 
 /* ---- Project Components ---- */
 @use "project-components/swatch-list";
+
+/* ---- Utah Header ---- */
+@use "utah-header/index.scss";

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

@@ -9,29 +9,59 @@
     min-height: var(--form-ele-small);
     line-height: 1;
 
-    &--primary-color {
+    &--primary-color, &--primary-color + .tag__clear-button {
       background-color: var(--primary-color);
       color: white;
       fill: white;
+      &[disabled] {
+        background-color: var(--primary-color) !important;
+        color: var(--primary-color-dark) !important;
+        fill: var(--primary-color-dark) !important;
+      }
     }
-    &--primary-color-light {
+    &--primary-color-light, &--primary-color-light + .tag__clear-button {
       background-color: var(--primary-color-light);
+      &[disabled] {
+        background-color: var(--primary-color-light) !important;
+        color: var(--form-ele-disabled-color) !important;
+        fill: var(--form-ele-disabled-color) !important;
+      }
     }
-    &--secondary-color {
+    &--secondary-color, &--secondary-color + .tag__clear-button {
       background-color: var(--secondary-color);
       color: white;
       fill: white;
+      &[disabled] {
+        background-color: var(--secondary-color) !important;
+        color: var(--secondary-color-dark) !important;
+        fill: var(--secondary-color-dark) !important;
+      }
     }
-    &--secondary-color-light {
+    &--secondary-color-light, &--secondary-color-light + .tag__clear-button {
       background-color: var(--secondary-color-light);
+      &[disabled] {
+        background-color: var(--secondary-color-light) !important;
+        color: var(--form-ele-disabled-color) !important;
+        fill: var(--form-ele-disabled-color) !important;
+      }
     }
-    &--accent-color {
+    &--accent-color, &--accent-color + .tag__clear-button {
       background-color: var(--accent-color);
       color: white;
       fill: white;
+      &[disabled] {
+        background-color: var(--accent-color) !important;
+        color: var(--accent-color-dark) !important;
+        fill: var(--accent-color-dark) !important;
+      }
     }
-    &--accent-color-light {
+    &--accent-color-light, &--accent-color-light + .tag__clear-button {
       background-color: var(--accent-color-light);
+      &[disabled] {
+        background-color: var(--accent-color-light) !important;
+        color: var(--form-ele-disabled-color) !important;
+        fill: var(--form-ele-disabled-color) !important;
+      }
     }
 
     &--selected {
@@ -53,6 +83,11 @@
       }
     }
 
+    &  + .tag__clear-button {
+      border-radius: 0 var(--radius-small) var(--radius-small) 0;
+      height: 100%;
+    }
+
     &__button[type="button"] {
       border: 1px solid var(--gray-medium-color);
       padding: var(--spacing-2xs) var(--spacing-xs);
@@ -146,6 +181,7 @@
     &--clearable {
       .tag {
         padding: 0 0 0 var(--spacing-xs);
+        border-radius: var(--radius-small) 0 0 var(--radius-small);
       }
       .tag--small {
         padding: 0 0 0 var(--spacing-xs);

package/css/6-components/base-components/containers/_drawer.scss

@@ -53,11 +53,14 @@
     }
 
     &__close-button {
-      position: absolute !important;
       top: var(--spacing-2xs);
       right: var(--spacing-2xs);
 
-      .utds-icon-before-x-icon::before {
+      &.button {
+        position: absolute;
+      }
+
+      &.icon-button--small [class*=utds-icon-before-]::before {
         font-size: 0.7rem;
       }
     }

package/css/6-components/base-components/containers/_tab-group.scss

@@ -60,6 +60,7 @@
         justify-content: flex-start;
         padding-top: var(--spacing);
         position: relative;
+        flex-shrink: 0;
 
         &:after {
           content: '';

package/css/6-components/base-components/footer/_footer-agency-information.scss

@@ -22,12 +22,12 @@
     }
 
     &__title {
-      &-image {
-        max-width: 300px;
-      }
       font-size: var(--font-size-l);
       font-weight: var(--font-weight-semi-bold);
       margin-top: var(--spacing);
+      &-image {
+        max-width: 300px;
+      }
 
     }
     &__address {

package/css/6-components/base-components/forms/_checkbox.scss

@@ -14,6 +14,8 @@
     flex-shrink: 0;
     margin: 2px var(--spacing-xs) 0 0;
 
+    @include tools-index.form-ele-focus;
+
     &::after {
       content: '';
       display: block;

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

@@ -67,10 +67,10 @@
         color: black;
       }
       &--disabled {
+        color: var(--gray-3-1-contrast);
         &:hover {
           color: var(--gray-3-1-contrast);
         }
-        color: var(--gray-3-1-contrast);
       }
       @include tools-index.form-ele-focus;
       &:focus-visible {
@@ -89,8 +89,28 @@
       }
     }
     &__group-title {
-      padding: var(--spacing-2xs) var(--spacing-s);
       font-weight: var(--font-weight-bold);
+      position: relative;
+      color: var(--gray-color);
+      span {
+        background: white;
+        z-index: 2;
+        position: relative;
+        padding-right:  var(--spacing-s);
+      }
+      &:hover {
+        background-color: transparent;
+        color: var(--gray-color);
+      }
+      &:after {
+        content: "";
+        background: var(--gray-3-1-contrast);
+        display: block;
+        width: calc(100% - var(--spacing-xl));
+        height: 1px;
+        position: absolute;
+        top: 50%;
+      }
     }
   }
 }

package/css/6-components/base-components/forms/_date-input.scss

@@ -22,6 +22,9 @@
       &--is-disabled {
         color: var(--form-ele-disabled-color);
       }
+      &[disabled]:active {
+        transform: translateY(-50%);
+      }
     }
     &__icon-static {
       display: flex;

package/css/6-components/base-components/forms/_file-input.scss

@@ -29,12 +29,12 @@
         transition: box-shadow var(--timing-xquick) ease-in-out;
         z-index: 1;
 
+        @include tools-index.form-ele-hover-medium;
+        @include tools-index.form-ele-focus;
+
         &:disabled {
           cursor: not-allowed;
         }
-
-        @include tools-index.form-ele-hover-medium;
-        @include tools-index.form-ele-focus;
       }
     }
     &__instructions {

package/css/6-components/base-components/forms/_multi-select-input.scss

@@ -17,6 +17,12 @@
     gap: var(--spacing-2xs);
     padding: var(--spacing-2xs) var(--spacing-xl) var(--spacing-2xs) var(--spacing-2xs);
 
+    @include tools-index.form-ele-hover-medium;
+
+    &.invalid {
+      border: 2px solid var(--danger-color);
+    }
+
     &__wrapper {
       position: relative;
 
@@ -30,8 +36,6 @@
       padding-left: 0;
     }
 
-    @include tools-index.form-ele-hover-medium;
-
     &__combo-box {
       flex: 1;
       min-width: 25%;

package/css/6-components/base-components/forms/_radio-button.scss

@@ -12,6 +12,9 @@
     margin: 2px var(--spacing-xs) 0 0;
     flex-shrink: 0;
     background: white;
+
+    @include tools-index.form-ele-focus;
+
     &::after {
       content: '';
       display: block;

package/css/6-components/base-components/forms/_select-input.scss

@@ -22,6 +22,11 @@
         padding: 0 var(--spacing-3xl) 0 var(--spacing-xs);
       }
     }
+
+    &[aria-invalid="true"] {
+      border: 2px solid var(--danger-color)
+    }
+
   }
   .select-input {
     &__inner-wrapper {

package/css/6-components/base-components/forms/_switch.scss

@@ -36,11 +36,13 @@
       position: relative;
       display: inline-flex;
       align-items: center;
+
+      @include tools-index.form-ele-hover-medium;
+
       &--on {
         background: var(--form-ele-color);
       }
 
-      @include tools-index.form-ele-hover-medium;
       &:has(input:focus) {
         @include tools-index.form-ele-focus-appearance;
       }

package/css/6-components/base-components/forms/_text-input.scss

@@ -5,6 +5,7 @@
 #{class-vars.$base-class} {
   input[type="text"],
   input[type="email"],
+  input[type="password"],
   input[type="tel"] {
     color: var(--gray-color);
     min-height: var(--form-ele-medium);
@@ -22,8 +23,8 @@
       cursor: not-allowed;
     }
 
-    &[aria-invalid="true"] {
-      border: 2px solid var(--danger-color)
+    &[aria-invalid="true"]:not(.inside-invalid-wrapper) {
+      border: 2px solid var(--danger-color);
     }
 
     &.text-input {
@@ -43,8 +44,8 @@
       right: var(--spacing-xs);
       font-weight: var(--font-weight-normal);
       transition: transform;
-      [class*=utds-icon-before-]::before {
-        font-size: .7rem;
+      [class*="utds-icon-before-"]::before {
+        font-size: 0.7rem;
       }
       &[disabled]:active {
         transform: translateY(-50%);

package/css/6-components/base-components/navigation/_main-menu.scss

@@ -34,6 +34,7 @@
       list-style-type: none;
       display: flex;
       padding: 0;
+      flex-wrap: wrap;
       li {
 
         .menu-item__title {

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

@@ -62,7 +62,9 @@
           right: 0;
         }
 
-        &--info, &--warning, &--danger, &--success, &--dark {
+        &--info, &--warning, &--danger, &--success, &--dark,
+        &--primary, &--secondary, &--accent,
+        &--primary-dark, &--secondary-dark, &--accent-dark{
           color: white;
           .banner__close-button button, a {
             color: white;
@@ -84,6 +86,33 @@
         &--dark {
           background-color: var(--gray-color);
         }
+        &--primary {
+          background-color: var(--primary-color);
+        }
+        &--primary-light {
+          background-color: var(--primary-color-light);
+        }
+        &--primary-dark {
+          background-color: var(--primary-color-dark);
+        }
+        &--secondary {
+          background-color: var(--secondary-color);
+        }
+        &--secondary-light {
+          background-color: var(--secondary-color-light);
+        }
+        &--secondary-dark {
+          background-color: var(--secondary-color-dark);
+        }
+        &--accent {
+          background-color: var(--accent-color);
+        }
+        &--accent-light {
+          background-color: var(--accent-color-light);
+        }
+        &--accent-dark {
+          background-color: var(--accent-color-dark);
+        }
 
         &--small {
           max-width: 320px;

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

@@ -16,7 +16,7 @@
       tr {
         th {
           text-align: left;
-          vertical-align: bottom;
+          vertical-align: middle;
           font-weight: bold;
           padding: var(--spacing-s);
           line-height: 1.2;

package/css/6-components/base-components/text/_block-quote.scss

@@ -15,5 +15,23 @@
       left: 0;
       background: var(--primary-color-light);
     }
+
+    &--quotation-marks {
+      &::before  {
+        content: '“';
+        font-size: var(--font-size-5xl);
+        width: 5px;
+        background-color: transparent;
+      }
+      &::after  {
+        content: '”';
+        height: 100%;
+        font-size: var(--font-size-5xl);
+        width: 5px;
+        position: absolute;
+        right: var(--spacing);
+        background-color: transparent;
+      }
+    }
   }
 }

package/css/6-components/utah-header/_action-items.scss

@@ -0,0 +1,45 @@
+.utah-design-system {
+  .utds {
+    &-action-items-wrapper {
+      display: flex;
+      gap: var(--spacing);
+      margin-right: var(--spacing);
+    }
+    &-header-action-item {
+      display: flex;
+      align-items: center;
+      &__icon-button {
+        &.icon-button {
+          border: 2px solid transparent;
+          position: relative;
+          &:hover {
+            background: var(--hover-gray-color);
+            color: black;
+            svg {
+              fill: black;
+            }
+          }
+        }
+        &--has-title {
+          .icon-button {
+            padding: 0 var(--spacing-s);
+            flex-direction: row-reverse;
+          }
+        }
+        svg {
+          width: 20px;
+          height: 20px;
+          fill: var(--gray-color);
+        }
+        &.icon-waffle {
+          [class*='utds-icon-before-'].utds-icon-before-waffle::before{
+            font-size: 17px;
+          }
+        }
+      }
+      &__title {
+        margin-left: var(--spacing-xs);
+      }
+    }
+  }
+}

package/css/6-components/utah-header/_badge.scss

@@ -0,0 +1,34 @@
+.utds-badge {
+  &__wrapper {
+    align-items: center;
+    background-color: var(--danger-color);
+    border-radius: var(--radius-circle);
+    box-sizing: border-box;
+    color: white;
+    display: flex;
+    font-size: var(--font-size-2xs);
+    font-weight: var(--font-weight-semi-bold);
+    height: 15px;
+    justify-content: center;
+    line-height: var(--font-size-2xs);
+    min-width: 15px;
+    padding: 1px 2px;
+    position: absolute;
+    right: 0;
+    top: 0;
+   
+    &--action-item {
+      right: -2px;
+      top: -2px
+    }
+
+    &--small {
+      height: 9px;
+      min-width: unset;
+      right: 2px;
+      top: 2px;
+      width: 9px;
+    }
+
+  }
+}

package/css/6-components/utah-header/_citizen-experience.scss

@@ -0,0 +1,10 @@
+.utds-citizen-experience-wrapper, .utds-citizen-experience-wrapper--mobile {
+  justify-content: flex-end;
+  flex: 1;
+}
+.utds-citizen-experience-wrapper {
+  display: flex;
+}
+.utds-citizen-experience-wrapper--mobile {
+  display: none;
+}

package/css/6-components/utah-header/_font.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap');

package/css/6-components/utah-header/_footer.scss

@@ -0,0 +1 @@
+@use "../base-components/footer/utah-footer";

package/css/6-components/utah-header/_logos.scss

@@ -0,0 +1,124 @@
+@use "../../1-settings/media-size-vars";
+
+.utah-design-system {
+  .utds {
+    &-logo-wrapper {
+      position: relative;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      letter-spacing: 0;
+    }
+    &-logo-vert-line {
+      height: 85%;
+      width: 1px;
+      background-color: #707070;
+      margin: 0 var(--spacing-xs) 0 var(--spacing);
+      display: block;
+    }
+    &-title-wrapper {
+      font-size: var(--font-size-3xl);
+      font-weight: 600;
+      color: var(--gray-medium-color);
+      display: flex;
+      align-items: center;
+      flex: 1;
+      height: 100%;
+      gap: var(--spacing-xs);
+      text-decoration: none;
+      border-radius: var(--radius-small);
+      padding: 0 var(--spacing-xs);
+      &__logo {
+        height: 100%;
+        width: auto;
+        max-width: 100%;
+        max-height: 100%;
+        display: flex;
+        align-items: center;
+
+        svg, img {
+          height: 100%;
+          width: auto;
+          max-width: 100%;
+          max-height: 100%;
+        }
+        img {
+          height: auto;
+          &[src*=".svg"] {
+            height: 100%;
+            max-width: 100%;
+          }
+        }
+      }
+      &__title {
+        line-height: .8;
+        color: var(--gray-medium-color);
+      }
+    }
+  }
+
+  .utah-logo-wrapper {
+    height: 100%;
+    margin-bottom: -4px;
+    .popup {
+      &__content {
+        border-radius: var(--radius-small);
+        background: var(--gray-color);
+        color: white;
+        box-sizing: border-box;
+        padding: var(--spacing-3xs) var(--spacing-s);
+        border-color: var(--gray-color)
+      }
+      &__arrow {
+        &::before {
+
+          border-color: var(--gray-color) !important;
+        }
+      }
+    }
+  }
+  button.utah-logo-svg {
+    height: 100%;
+    position: relative;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    &:hover {
+      background: none;
+    }
+    &:active {
+      box-shadow: none;
+    }
+    svg {
+      height: 100%;
+      width: auto;
+      fill: var(--primary-color);
+      font-family: 'Source Sans 3', 'Source Sans Pro', Helvetica, Arial, sans-serif;
+      font-weight: normal;
+      font-size: 14px;
+      display: block;
+    }
+  }
+  .utds-official-website-hover {
+    &__wrapper {
+      font-size: 1rem;
+      font-weight: var(--font-weight-normal);
+      font-family: var(--normal-font-family);
+      text-align: center;
+    }
+  }
+  a[href].utds-title-wrapper {
+    text-decoration: none;
+  }
+}
+
+@media screen and (max-width: #{media-size-vars.$media-size-tablet-portrait}) {
+  .utah-design-system {
+    .utds {
+      &-title-wrapper {
+        font-size: var(--font-size-xl);
+      }
+    }
+  }
+}
+