@utahdts/utah-design-system 1.16.3 → 2.0.0

package/css/1-settings/_icons.scss

@@ -3,7 +3,6 @@
 // icon google font settings:
 // fill: 0, weight 400, grade 0, optical size: 20px
 
-/* Generated by Glyphter (https://www.glyphter.com) on  Fri Jan 20 2023*/
 @font-face {
   font-family: "utah design system";
   src: url("https://cdn.utah.gov/design-system/fonts/utah-design-system.eot");
@@ -245,63 +244,103 @@
     content: "\006d";
   }
 
-    .utds-icon-before-download::before,
-    .utds-icon-after-download::after {
-      content: "\006e";
-    }
-
-    .utds-icon-before-upload::before,
-    .utds-icon-after-upload::after {
-      content: "\006f";
-    }
-
-    .utds-icon-before-favorite::before,
-    .utds-icon-after-favorite::after {
-      content: "\0070";
-    }
-
-    .utds-icon-before-visibility::before,
-    .utds-icon-after-visibility::after {
-      content: "\0071";
-    }
-
-    .utds-icon-before-visibility-off::before,
-    .utds-icon-after-visibility-off::after {
-      content: "\0072";
-    }
-
-    .utds-icon-before-trash::before,
-    .utds-icon-after-trash::after {
-      content: "\0073";
-    }
-
-    .utds-icon-before-calendar::before,
-    .utds-icon-after-calendar::after {
-      content: "\0074";
-    }
-
-    .utds-icon-before-clock::before,
-    .utds-icon-after-clock::after {
-      content: "\0075";
-    }
-
-    .utds-icon-before-double-arrow-up::before,
-    .utds-icon-after-double-arrow-up::after {
-      content: "\0076";
-    }
-
-    .utds-icon-before-double-arrow-right::before,
-    .utds-icon-after-double-arrow-right::after {
-      content: "\0077";
-    }
-
-    .utds-icon-before-double-arrow-down::before,
-    .utds-icon-after-double-arrow-down::after {
-      content: "\0078";
-    }
-
-    .utds-icon-before-double-arrow-left::before,
-    .utds-icon-after-double-arrow-left::after {
-      content: "\0079";
-    }
+  .utds-icon-before-download::before,
+  .utds-icon-after-download::after {
+    content: "\006e";
+  }
+
+  .utds-icon-before-upload::before,
+  .utds-icon-after-upload::after {
+    content: "\006f";
+  }
+
+  .utds-icon-before-favorite::before,
+  .utds-icon-after-favorite::after {
+    content: "\0070";
+  }
+
+  .utds-icon-before-visibility::before,
+  .utds-icon-after-visibility::after {
+    content: "\0071";
+  }
+
+  .utds-icon-before-visibility-off::before,
+  .utds-icon-after-visibility-off::after {
+    content: "\0072";
+  }
+
+  .utds-icon-before-trash::before,
+  .utds-icon-after-trash::after {
+    content: "\0073";
+  }
+
+  .utds-icon-before-calendar::before,
+  .utds-icon-after-calendar::after {
+    content: "\0074";
+  }
+
+  .utds-icon-before-clock::before,
+  .utds-icon-after-clock::after {
+    content: "\0075";
+  }
+
+  .utds-icon-before-double-arrow-up::before,
+  .utds-icon-after-double-arrow-up::after {
+    content: "\0076";
+  }
+
+  .utds-icon-before-double-arrow-right::before,
+  .utds-icon-after-double-arrow-right::after {
+    content: "\0077";
+  }
+
+  .utds-icon-before-double-arrow-down::before,
+  .utds-icon-after-double-arrow-down::after {
+    content: "\0078";
+  }
+
+  .utds-icon-before-double-arrow-left::before,
+  .utds-icon-after-double-arrow-left::after {
+    content: "\0079";
+  }
+
+  .utds-icon-before-filter::before,
+  .utds-icon-after-filter::after {
+    content: "\007a";
+  }
+
+  .utds-icon-before-restart::before,
+  .utds-icon-after-restart::after {
+    content: "\007b";
+  }
+
+  .utds-icon-before-sync::before,
+  .utds-icon-after-sync::after {
+    content: "\007c";
+  }
+
+  .utds-icon-before-refresh::before,
+  .utds-icon-after-refresh::after {
+    content: "\007d";
+  }
+
+  .utds-icon-before-light-mode::before,
+  .utds-icon-after-light-mode::after {
+    content: "\007e";
+  }
+
+  .utds-icon-before-dark-mode::before,
+  .utds-icon-after-dark-mode::after {
+    content: "\0030";
+  }
+
+  .utds-icon-before-mail::before,
+  .utds-icon-after-mail::after {
+    content: "\0031";
+  }
+
+  .utds-icon-before-share::before,
+  .utds-icon-after-share::after {
+    content: "\0032";
+  }
 }

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

@@ -39,6 +39,7 @@ variables and settings
   --form-ele-color: #{color-swatches.$azul-05};
   --form-ele-color-light: #{color-swatches.$azul-12};
   --form-ele-disabled-color: #{color-swatches.$neutral-gray-10};
+  --form-ele-placeholder-color: #757575;
 
   /* ######## --------------------------------------------- ######## */
 
@@ -61,6 +62,8 @@ variables and settings
   --info-color: var(--secondary-color);
   --success-color: #2f8700;
 
+  --badge-color: var(--danger-color);
+
   /* transition timings */
   --timing-xquick: 100ms;
   --timing-quick: 200ms;
@@ -170,6 +173,10 @@ variables and settings
     border-color: var(--accent-color);
   }
 
+  .white-color-background {
+    background-color: white;
+  }
+
   .gray-color-background {
     background-color: var(--gray-color);
   }

package/css/1-settings/_spacing.scss

@@ -75,6 +75,14 @@
   .px-spacing-l { padding-left: var(--spacing-l); padding-right: var(--spacing-l); }
   .py-spacing-l { padding-top: var(--spacing-l); padding-bottom: var(--spacing-l); }
 
+  .p-spacing-xl { padding: var(--spacing-xl); }
+  .pt-spacing-xl { padding-top: var(--spacing-xl); }
+  .pr-spacing-xl { padding-right: var(--spacing-xl); }
+  .pb-spacing-xl { padding-bottom: var(--spacing-xl); }
+  .pl-spacing-xl { padding-left: var(--spacing-xl); }
+  .px-spacing-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
+  .py-spacing-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
+
   .p-spacing-s { padding: var(--spacing-s); }
   .pt-spacing-s { padding-top: var(--spacing-s); }
   .pr-spacing-s { padding-right: var(--spacing-s); }

package/css/4-elements/_elements-index.scss

@@ -11,7 +11,6 @@ elemental html: h1, h2, h3, ul, li, etc.
   line-height: 1.4;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: white;
   color: var(--gray-color);
 
   h1 {

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

@@ -7,6 +7,8 @@ component specific, BEM (Block, Element, Modifier)
 /* ---- Base Components ---- */
 @use "base-components/containers/accordion";
 @use "base-components/containers/action-card";
+@use "base-components/containers/card";
+@use "base-components/containers/drawer";
 @use "base-components/containers/tab-group";
 @use "base-components/buttons/button";
 @use "base-components/buttons/icon-button";
@@ -46,7 +48,9 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/text/block-quote";
 @use "base-components/text/pre-code";
 @use "base-components/forms/input";
-@use "base-components/widgetsInicators/spinner";
+@use "base-components/widgetsIndicators/badge";
+@use "base-components/widgetsIndicators/skeleton";
+@use "base-components/widgetsIndicators/spinner";
 @use "base-components/tablesAndLists/table";
 @use "base-components/templates/on-this-page";
 

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

@@ -9,16 +9,59 @@
     min-height: var(--form-ele-small);
     line-height: 1;
 
+    &--primary-color {
+      background-color: var(--primary-color);
+      color: white;
+      fill: white;
+    }
+    &--primary-color-light {
+      background-color: var(--primary-color-light);
+    }
+    &--secondary-color {
+      background-color: var(--secondary-color);
+      color: white;
+      fill: white;
+    }
+    &--secondary-color-light {
+      background-color: var(--secondary-color-light);
+    }
+    &--accent-color {
+      background-color: var(--accent-color);
+      color: white;
+      fill: white;
+    }
+    &--accent-color-light {
+      background-color: var(--accent-color-light);
+    }
+
+    &--selected {
+      background-color: var(--gray-color);
+      color: white;
+      fill: white;
+
+      &.tag--primary-color {
+        background-color: var(--primary-color);
+        border: none;
+      }
+      &.tag--secondary-color {
+        background-color: var(--secondary-color);
+        border: none;
+      }
+      &.tag--accent-color {
+        background-color: var(--accent-color);
+        border: none;
+      }
+    }
+
     &__button[type="button"] {
       border: 1px solid var(--gray-medium-color);
       padding: var(--spacing-2xs) var(--spacing-xs);
       border-radius: var(--radius-small);
-      background-color: var(--gray-light-color);
       height: 100%;
       line-height: 1.4;
 
       &.tag--selected {
-        background-color: var(--gray-color);
+        background-color: var(--form-ele-color);
         color: white;
         fill: white;
       }

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

@@ -29,6 +29,10 @@
       }
     }
 
+    .accordion__header h1 {
+      margin: 0;
+    }
+
     &__content {
         background: var(--gray-light-color);
         padding: 0;

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

@@ -0,0 +1,43 @@
+@use "../../../1-settings/class-vars";
+
+/*
+############     _action-card.scss      ############
+*/
+#{class-vars.$base-class} {
+  .card {
+    background: white;
+    border: 1px solid var(--gray-color);
+
+    &__title {
+      font-size: var(--font-size-3xl);
+      font-weight: var(--font-weight-bold);
+      box-sizing: border-box;
+    }
+
+    &--solid {
+      border: none;
+    }
+
+    &__image {
+      object-fit: cover;
+      max-height: 175px;
+      width: 100%;
+    }
+
+    &__icon {
+      font-size: var(--font-size-4xl);
+      font-weight: 100;
+      margin-bottom: var(--spacing-s);
+      line-height: 1;
+    }
+
+    &--horizontal {
+      display: flex;
+
+      .card__image {
+        max-height: 100%;
+        max-width: 33%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+@use "../../../1-settings/class-vars";
+@use "../../../7-utilities/animation";
+
+/*
+############     _drawer.scss      ############
+*/
+#{class-vars.$base-class} {
+  .drawer {
+    &-wrapper {
+      height: 100vh;
+      position: fixed;
+      right: 0;
+      top: 0;
+      width: 100vw;
+      z-index: 9999;
+    }
+
+    &__backdrop {
+      animation: 200ms ease-in-out 100ms fade-in both;
+      height: 100%;
+      width: 100%;
+    }
+
+    &__inner {
+      background: white;
+      display: inline-block;
+      height: 100%;
+      overflow-y: auto;
+      padding: var(--spacing);
+
+      &.drawer--right {
+        animation: 200ms ease-in-out 100ms right-in both;
+        margin-left: auto;
+        margin-right: 0;
+      }
+
+      &.drawer--left {
+        animation: 200ms ease-in-out 100ms left-in both;
+        margin-left: 0;
+        margin-right: auto;
+      }
+    }
+
+    &__title {
+      font-weight: var(--font-weight-bold);
+      font-size: var(--font-size-2xl);
+      padding: var(--spacing-xs) calc(var(--spacing) + 1.4rem) var(--spacing-xs) var(--spacing-l);
+    }
+
+    &__content, &__footer {
+      line-height: 1.6rem;
+      padding: var(--spacing-xs) var(--spacing-l);
+    }
+
+    &__close-button {
+      position: absolute !important;
+      top: var(--spacing-2xs);
+      right: var(--spacing-2xs);
+
+      .utds-icon-before-x-icon::before {
+        font-size: 0.7rem;
+      }
+    }
+  }
+}

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

@@ -47,11 +47,44 @@
       }
     }
     &__panel {
-      display: none;
       padding-top: var(--spacing);
       &--selected {
         display: block;
       }
     }
+    &--vertical {
+      display: flex;
+      .tab-group__list {
+        flex-direction: column;
+        margin-right: var(--spacing-l);
+        justify-content: flex-start;
+        padding-top: var(--spacing);
+        position: relative;
+
+        &:after {
+          content: '';
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 1px;
+          height: calc(100% - var(--spacing));
+          background: var(--gray-color);
+        }
+      }
+      .tab-group__tab {
+        flex: 0;
+        &:after {
+          z-index: 2;
+          width: 1px;
+          height: 100%;
+        }
+        &--selected:after {
+          bottom: 0;
+          left: -2px;
+          width: 5px;
+          height: 100%;
+        }
+      }
+    }
   }
 }

package/css/6-components/base-components/footer/_footer-social-media-bar.scss

@@ -21,11 +21,19 @@
         padding: var(--spacing-xs);
         border-radius: var(--radius-circle);
         transition: all var(--timing-fast) ease-in-out;
+        text-decoration: none;
         svg {
           fill: white;
           height: 30px;
           width: 30px;
         }
+        [class*="utds-icon-before-"]::after,
+        [class*="utds-icon-before-"]::before {
+          font-size: 1.6rem;
+          color: white;
+          margin: 0;
+          padding: 2.5px;
+        }
         &:hover {
           box-shadow: none;
           background: var(--primary-color-dark);

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

@@ -48,9 +48,11 @@
       z-index: 2000;
       max-height: clamp(300px, 40vh, 40vh);
       overflow: auto;
+      width: max-content;
     }
     &__option {
       padding: var(--spacing-2xs) var(--spacing-s);
+      font-weight: var(--font-weight-normal);
       &:hover {
         background: var(--hover-gray-color);
         cursor: default;

package/css/6-components/base-components/forms/_info-box.scss

@@ -4,7 +4,6 @@
   .info-box {
     display: flex;
     align-items: center;
-    min-height: var(--form-ele-medium);
     background: white;
     position: relative;
     border-radius: var(--radius-small);
@@ -25,7 +24,17 @@
     &__content {
       display: flex;
       align-items: center;
-      padding: 0 var(--spacing-s);
+      padding: var(--spacing-xs) var(--spacing-s);
+    }
+
+    &__gray {
+      background-color: var(--gray-light-color);
+    }
+
+    &__primary {
+      &::before {
+        background-color: var(--primary-color);
+      }
     }
 
     &__secondary {
@@ -33,5 +42,29 @@
         background-color: var(--secondary-color);
       }
     }
+
+    &__info {
+      &::before {
+        background-color: var(--info-color);
+      }
+    }
+
+    &__danger {
+      &::before {
+        background-color: var(--danger-color);
+      }
+    }
+
+    &__warning {
+      &::before {
+        background-color: var(--warning-color);
+      }
+    }
+
+    &__success {
+      &::before {
+        background-color: var(--success-color);
+      }
+    }
   }
 }

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

@@ -25,6 +25,11 @@
       }
     }
 
+    &-tags {
+      list-style-type: none;
+      padding-left: 0;
+    }
+
     @include tools-index.form-ele-hover-medium;
 
     &__combo-box {
@@ -51,7 +56,8 @@
       }
     }
 
-    &__chevron, &__clear-button {
+    &__chevron,
+    &__clear-button {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
@@ -67,7 +73,7 @@
     &__clear-button {
       right: var(--spacing-xl);
       [class*="utds-icon-before-"]::before {
-        font-size: .7rem;
+        font-size: 0.7rem;
       }
     }
 
@@ -78,7 +84,7 @@
     &--disabled {
       background-color: var(--disabled-gray);
       cursor: not-allowed;
-      input[type=text] {
+      input[type="text"] {
         background: transparent;
       }
     }