@utahdts/utah-design-system 1.4.0 → 1.5.1

package/css/1-settings/_icons.scss

@@ -3,14 +3,15 @@
 // icon google font settings:
 // fill: 0, weight 400, grade 0, optical size: 20px
 
-/* Generated by Glyphter (http://www.glyphter.com) on  Fri Jan 20 2023*/
+/* 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');
-  src: url('https://cdn.utah.gov/design-system/fonts/utah-design-system.eot?#iefix') format('embedded-opentype'),
-       url('https://cdn.utah.gov/design-system/fonts/utah-design-system.woff') format('woff'),
-       url('https://cdn.utah.gov/design-system/fonts/utah-design-system.ttf') format('truetype'),
-       url('https://cdn.utah.gov/design-system/fonts/utah-design-system.svg#utah-design-system') format('svg');
+  font-family: "utah design system";
+  src: url("https://cdn.utah.gov/design-system/fonts/utah-design-system.eot");
+  src:
+    url("https://cdn.utah.gov/design-system/fonts/utah-design-system.eot?#iefix") format("embedded-opentype"),
+    url("https://cdn.utah.gov/design-system/fonts/utah-design-system.woff") format("woff"),
+    url("https://cdn.utah.gov/design-system/fonts/utah-design-system.ttf") format("truetype"),
+    url("https://cdn.utah.gov/design-system/fonts/utah-design-system.svg#utah-design-system") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -20,15 +21,15 @@
   --icon-check-mark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12.15'%3E%3Cg%3E%3Cpath d='M6.185,12.15L0,5.966,2.335,3.631l3.85,3.849L13.665,0l2.335,2.335L6.185,12.15Z' style='fill: %23fff;'/%3E%3C/g%3E%3C/svg%3E");
   --icon-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg%3E%3Crect width='14' height='14' style='fill: none;'/%3E%3Cpath d='M3.142,5l3.716,3.71,3.717-3.71,1.142,1.142-4.859,4.858L2,6.142l1.142-1.142Z' style='fill: %23474747;'/%3E%3C/g%3E%3C/svg%3E");
 
-  [class*='utds-icon-before-'],
-  [class*='utds-icon-after-'] {
+  [class*="utds-icon-before-"],
+  [class*="utds-icon-after-"] {
     display: inline-flex;
     align-items: center;
   }
 
-  [class*='utds-icon-after-']::after {
+  [class*="utds-icon-after-"]::after {
     display: inline-block;
-    font-family: 'utah design system';
+    font-family: "utah design system";
     font-style: normal;
     font-weight: normal;
     font-size: 1em;
@@ -37,9 +38,9 @@
     -moz-osx-font-smoothing: grayscale;
     margin-left: var(--spacing-2xs);
   }
-  [class*='utds-icon-before-']::before {
+  [class*="utds-icon-before-"]::before {
     display: inline-block;
-    font-family: 'utah design system';
+    font-family: "utah design system";
     font-style: normal;
     font-weight: normal;
     font-size: 1em;
@@ -50,197 +51,197 @@
   }
   .utds-icon-before-external-link::before,
   .utds-icon-after-external-link::after {
-    content: '\0041';
-    font-size: .65em;
+    content: "\0041";
+    font-size: 0.65em;
   }
 
   .utds-icon-before-waffle::before,
   .utds-icon-after-waffle::after {
-    content: '\0042';
+    content: "\0042";
   }
 
   .utds-icon-before-alert::before,
   .utds-icon-after-alert::after {
-    content: '\0043';
+    content: "\0043";
   }
 
   .utds-icon-before-help::before,
   .utds-icon-after-help::after {
-    content: '\0044';
+    content: "\0044";
   }
 
   .utds-icon-before-bookmark::before,
   .utds-icon-after-bookmark::after {
-    content: '\0045';
+    content: "\0045";
   }
 
   .utds-icon-before-search::before,
   .utds-icon-after-search::after {
-    content: '\0046';
+    content: "\0046";
   }
 
   .utds-icon-before-check::before,
   .utds-icon-after-check::after {
-    content: '\0047';
+    content: "\0047";
   }
 
   .utds-icon-before-star::before,
   .utds-icon-after-star::after {
-    content: '\0048';
+    content: "\0048";
   }
 
   .utds-icon-before-info::before,
   .utds-icon-after-info::after {
-    content: '\0049';
+    content: "\0049";
   }
 
   .utds-icon-before-unfold-less::before,
   .utds-icon-after-unfold-less::after {
-    content: '\004a';
+    content: "\004a";
   }
 
   .utds-icon-before-unfold-more::before,
   .utds-icon-after-unfold-more::after {
-    content: '\004b';
+    content: "\004b";
   }
 
   .utds-icon-before-circle-chevron-down::before,
   .utds-icon-after-circle-chevron-down::after {
-    content: '\004c';
+    content: "\004c";
   }
 
   .utds-icon-before-circle-chevron-up::before,
   .utds-icon-after-circle-chevron-up::after {
-    content: '\004d';
+    content: "\004d";
   }
 
   .utds-icon-before-chevron-up::before,
   .utds-icon-after-chevron-up::after {
-    content: '\004e';
+    content: "\004e";
   }
 
   .utds-icon-before-chevron-right::before,
   .utds-icon-after-chevron-right::after {
-    content: '\004f';
+    content: "\004f";
   }
 
   .utds-icon-before-chevron-down::before,
   .utds-icon-after-chevron-down::after {
-    content: '\0050';
+    content: "\0050";
   }
 
   .utds-icon-before-chevron-left::before,
   .utds-icon-after-chevron-left::after {
-    content: '\0051';
+    content: "\0051";
   }
 
   .utds-icon-before-arrow-up::before,
   .utds-icon-after-arrow-up::after {
-    content: '\0052';
+    content: "\0052";
   }
 
   .utds-icon-before-arrow-right::before,
   .utds-icon-after-arrow-right::after {
-    content: '\0053';
+    content: "\0053";
   }
 
   .utds-icon-before-arrow-down::before,
   .utds-icon-after-arrow-down::after {
-    content: '\0054';
+    content: "\0054";
   }
 
   .utds-icon-before-arrow-left::before,
   .utds-icon-after-arrow-left::after {
-    content: '\0055';
+    content: "\0055";
   }
 
   .utds-icon-before-plus::before,
   .utds-icon-after-plus::after {
-    content: '\0056';
+    content: "\0056";
   }
 
   .utds-icon-before-minus::before,
   .utds-icon-after-minus::after {
-    content: '\0057';
+    content: "\0057";
   }
 
   .utds-icon-before-x-icon::before,
   .utds-icon-after-x-icon::after {
-    content: '\0058';
+    content: "\0058";
   }
 
   .utds-icon-before-edit::before,
   .utds-icon-after-edit::after {
-    content: '\0059';
+    content: "\0059";
   }
 
   .utds-icon-before-edit-box::before,
   .utds-icon-after-edit-box::after {
-    content: '\005a';
+    content: "\005a";
   }
 
   .utds-icon-before-verified::before,
   .utds-icon-after-verified::after {
-    content: '\0061';
+    content: "\0061";
   }
 
   .utds-icon-before-gear::before,
   .utds-icon-after-gear::after {
-    content: '\0062';
+    content: "\0062";
   }
 
   .utds-icon-before-doc::before,
   .utds-icon-after-doc::after {
-    content: '\0063';
+    content: "\0063";
   }
 
   .utds-icon-before-doc-square::before,
   .utds-icon-after-doc-square::after {
-    content: '\0064';
+    content: "\0064";
   }
 
   .utds-icon-before-warning::before,
   .utds-icon-after-warning::after {
-    content: '\0065';
+    content: "\0065";
   }
 
   .utds-icon-before-error::before,
   .utds-icon-after-error::after {
-    content: '\0066';
+    content: "\0066";
   }
 
   .utds-icon-before-copy::before,
   .utds-icon-after-copy::after {
-    content: '\0067';
+    content: "\0067";
   }
 
   .utds-icon-before-home-menu::before,
   .utds-icon-after-home-menu::after {
-    content: '\0068';
+    content: "\0068";
   }
 
   .utds-icon-before-hamburger::before,
   .utds-icon-after-hamburger::after {
-    content: '\0069';
+    content: "\0069";
   }
 
   .utds-icon-before-account::before,
   .utds-icon-after-account::after {
-    content: '\006a';
+    content: "\006a";
   }
 
   .utds-icon-before-lock::before,
   .utds-icon-after-lock::after {
-    content: '\006b';
+    content: "\006b";
   }
 
   .utds-icon-before-more-vertical::before,
   .utds-icon-after-more-vertical::after {
-    content: '\006c';
+    content: "\006c";
   }
 
   .utds-icon-before-more-horizontal::before,
   .utds-icon-after-more-horizontal::after {
-    content: '\006d';
+    content: "\006d";
   }
 }

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

@@ -25,7 +25,7 @@ elemental html: h1, h2, h3, ul, li, etc.
     line-height: 1.2;
   }
   h3 {
-    font-size: var(--font-size-2xl );
+    font-size: var(--font-size-2xl);
     font-weight: var(--font-weight-semi-bold);
     margin: 0;
     line-height: 1.3;
@@ -50,7 +50,7 @@ elemental html: h1, h2, h3, ul, li, etc.
 
   code {
     font-family: var(--fixed-width-font-family);
-    font-size: .95rem;
+    font-size: 0.95rem;
     background: var(--code-color);
     padding: var(--spacing-3xs) var(--spacing-2xs);
     border-radius: var(--radius-small1x);
@@ -61,7 +61,8 @@ elemental html: h1, h2, h3, ul, li, etc.
   }
   // pre --- see _pre-code.scss
 
-  ul, ol {
+  ul,
+  ol {
     padding: 0 0 0 var(--spacing-2xl);
     margin: 0;
     line-height: 1.7;
@@ -77,19 +78,20 @@ elemental html: h1, h2, h3, ul, li, etc.
   a[href]:not(.button, .action-card) {
     color: var(--primary-color);
     &:hover {
-      box-shadow: -3px -1px 0 0px var(--hover-gray-color-opaque),
-                  3px -1px 0 0px var(--hover-gray-color-opaque),
-                  3px 1px 0 0px var(--hover-gray-color-opaque),
-                  -3px 1px 0 0px var(--hover-gray-color-opaque),
-                  inset 0 0 0 1000px var(--hover-gray-color-opaque);
+      box-shadow:
+        -3px -1px 0 0px var(--hover-gray-color-opaque),
+        3px -1px 0 0px var(--hover-gray-color-opaque),
+        3px 1px 0 0px var(--hover-gray-color-opaque),
+        -3px 1px 0 0px var(--hover-gray-color-opaque),
+        inset 0 0 0 1000px var(--hover-gray-color-opaque);
       color: var(--primary-color-dark);
     }
   }
 
   .external-link::after {
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.1143 18.1138'%3E%3Cg%3E%3Cpath d='m15.0996,18.1138H1c-.5527,0-1-.4478-1-1V3.0142c0-.5522.4473-1,1-1h7.043v2H2v12.0996h12.0996v-6.043h2v7.043c0,.5522-.4473,1-1,1Z' style='fill: var(--primary-color);'/%3E%3Crect x='6.5977' y='4.5318' width='11.9697' height='1.9998' transform='translate(-.2262 10.5174) rotate(-45)' style='fill: currentColor;'/%3E%3Cpolygon points='18.1143 8.0425 16.1143 8.0425 16.1143 2 10.0713 2 10.0713 0 18.1143 0 18.1143 8.0425' style='fill: currentColor;'/%3E%3C/g%3E%3C/svg%3E%0A");
-    height: .7rem;
-    width: .7rem;
+    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 18.1143 18.1138'%3E%3Cg%3E%3Cpath d='m15.0996,18.1138H1c-.5527,0-1-.4478-1-1V3.0142c0-.5522.4473-1,1-1h7.043v2H2v12.0996h12.0996v-6.043h2v7.043c0,.5522-.4473,1-1,1Z' style='fill: var(--primary-color);'/%3E%3Crect x='6.5977' y='4.5318' width='11.9697' height='1.9998' transform='translate(-.2262 10.5174) rotate(-45)' style='fill: currentColor;'/%3E%3Cpolygon points='18.1143 8.0425 16.1143 8.0425 16.1143 2 10.0713 2 10.0713 0 18.1143 0 18.1143 8.0425' style='fill: currentColor;'/%3E%3C/g%3E%3C/svg%3E%0A");
+    height: 0.7rem;
+    width: 0.7rem;
     background-position: top left;
 
     display: inline-block;

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

@@ -16,11 +16,12 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 200ms ease-in-out, transform 100ms ease, box-shadow 100ms ease;
+    transition: all 200ms ease-in-out, scale 100ms ease, box-shadow 100ms ease;
     color: var(--gray-color);
     text-decoration: none;
     position: relative;
     -webkit-tap-highlight-color: rgba(0,0,0,0);
+    scale: 1;
 
     svg {
       fill: currentColor;
@@ -42,7 +43,7 @@
       }
     }
     &:active, &--active {
-      transform: scale(.96);
+      scale: .96;
       box-shadow: inset 0 3px 5px rgba(0,0,0,0.5);
     }
 

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

@@ -41,6 +41,12 @@
         &--open {
           height: auto;
           padding: var(--spacing);
+
+          &.accordion__content--bordered {
+            background: transparent;
+            border: 1px solid var(--gray-3-1-contrast);
+            border-top: 0;
+          }
         }
     }
   }

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

@@ -21,6 +21,10 @@
       transform: translateX(calc(100% + var(--spacing-2xs)));
       color: var(--gray-color);
       min-width: max-content;
+      overflow: hidden;
+      &.visually-hidden {
+        min-width: unset;
+      }
     }
     &__wrapper {
       min-width: 20px;
@@ -96,8 +100,6 @@
       font-size: var(--font-size-s);
       line-height: var(--font-size-s);
       &-on, &-off {
-        // display: none;
-        // width: 25px;
         width: calc(100% - var(--form-ele-2small1x));
         position: absolute;
         right: 2px;
@@ -106,7 +108,6 @@
         text-align: center;
         display: inline-block;
         &.show {
-          // display: block;
           opacity: 1;
         }
       }
@@ -128,7 +129,6 @@
   .input-wrapper {
     &--switch {
       label {
-        // padding: var(--spacing-3xs) var(--spacing) var(--spacing-3xs) var(--spacing-xl);
         padding: var(--spacing-3xs) var(--spacing-xs);
       }
     }

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

@@ -24,6 +24,31 @@
     &[aria-invalid="true"] {
       border: 2px solid var(--danger-color)
     }
+
+    &.text-input {
+      &--clear-icon-visible {
+        padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
+      }
+    }
+  }
+  .text-input {
+    &__inner-wrapper {
+      position: relative;
+    }
+    &__clear-button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: var(--spacing-xs);
+      font-weight: var(--font-weight-normal);
+      transition: transform;
+      [class*=utds-icon-before-]::before {
+        font-size: .7rem;
+      }
+      &[disabled]:active {
+        transform: translateY(-50%);
+      }
+    }
   }
 
   textarea {

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

@@ -36,6 +36,7 @@
       padding: var(--spacing-3xs) var(--spacing-s);
       transition: transform 100ms ease-in-out;
       box-shadow: var(--elevation-small);
+      font-weight: var(--font-weight-normal);
     }
 
     &__arrow {
@@ -53,7 +54,8 @@
       &::before {
         visibility: visible;
         content: "";
-        transform: rotate(45deg);
+        left: 50%;
+        transform: translateX(-50%) rotate(45deg);
       }
     }
 

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

@@ -1,7 +1,7 @@
 @use "../../../1-settings/class-vars";
 
 #{class-vars.$base-class} {
-  .table-wrapper {
+  .table__wrapper {
     overflow-x: scroll;
   }
   table {
@@ -10,12 +10,12 @@
       border-bottom: 1px solid var(--gray-color);
       tr {
         th {
-          text-align: center;
+          text-align: left;
           vertical-align: bottom;
           font-weight: bold;
           padding: var(--spacing-s);
-          &.text-left {
-            text-align: left;
+          &.text-center {
+            text-align: center;
           }
           &.text-right {
             text-align: right;
@@ -30,13 +30,32 @@
           padding: var(--spacing-s);
         }
       }
+      tr:last-child {
+        td {
+          border-bottom: 1px solid var(--gray-color);
+        }
+      }
+    }
+    tfoot {
+      tr {
+        td {
+          vertical-align: top;
+          padding: var(--spacing-s);
+          font-weight: bold;
+        }
+      }
     }
     &.table {
       &--alt {
         tbody {
           tr:nth-child(2n) {
             td {
-              background-color: #F5F5F5;
+              background-color: #f5f5f5;
+            }
+          }
+          tr:nth-child(2n-1) {
+            td {
+              background-color: white;
             }
           }
         }
@@ -45,12 +64,12 @@
         tbody {
           tr {
             td {
-              border-bottom: 1px solid var(--gray-3-1-contrast)
+              border-bottom: 1px solid var(--gray-3-1-contrast);
             }
           }
           tr:last-child {
             td {
-              border-bottom: 1px solid var(--gray-color)
+              border-bottom: 1px solid var(--gray-color);
             }
           }
         }
@@ -83,12 +102,57 @@
       &--full-width {
         width: 100%;
       }
+      &--td-center {
+        thead {
+          tr {
+            th {
+              text-align: center;
+            }
+          }
+        }
+        tbody {
+          tr {
+            td {
+              text-align: center;
+            }
+          }
+        }
+      }
     }
     .table-header {
       position: relative;
+
+      /* Table Sorting */
+      &--sortable {
+        padding: 0;
+        button {
+          border: none;
+          background: none;
+          border-radius: var(--radius-circle);
+          justify-content: flex-start;
+          padding: var(--spacing) var(--spacing-s);
+          width: 100%;
+          font-weight: bold;
+          &:hover {
+            background: var(--gray-light-color);
+            color: var(--primary-color);
+          }
+          &:focus-visible {
+            outline-offset: -2PX;
+          }
+        }
+      }
+      &__cell {
+        position: relative;
+        &--sort-ascending {
+          &::after {
+            transform: rotate(180deg);
+          }
+        }
+      }
       &--sorted {
         &::before {
-          content: '';
+          content: "";
           height: 7px;
           width: 100%;
           background: var(--primary-color);
@@ -97,6 +161,69 @@
           left: 0;
           bottom: -4px;
           border-radius: var(--radius-circle);
+          z-index: 1;
+        }
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9.7'%3e%3cpath d='m8 9.7-8-8L1.7 0 8 6.3 14.3 0 16 1.7l-8 8Z' fill='white'/%3e%3c/svg%3e");
+          background-color: var(--primary-color);
+          background-repeat: no-repeat;
+          background-size: 9px;
+          background-position: center;
+          border-radius: var(--radius-circle);
+          bottom: -8px;
+          left: calc(50% - (15px / 2));
+          height: 15px;
+          width: 15px;
+          z-index: 2;
+        }
+        button {
+          color: var(--primary-color);
+        }
+      }
+
+      /* Table Filters */
+      &__row {
+        &--filters {
+          th {
+            background-color: var(--gray-light-color);
+          }
+          th:first-child {
+            border-top-left-radius: var(--radius-medium);
+            border-bottom-left-radius: var(--radius-medium);
+            padding: var(--spacing-s) var(--spacing-2xs) var(--spacing-s) var(--spacing-s);
+          }
+          th:last-child {
+            border-top-right-radius: var(--radius-medium);
+            border-bottom-right-radius: var(--radius-medium);
+            padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-2xs);
+          }
+          th {
+            padding: var(--spacing-s) var(--spacing-2xs);
+          }
+          .input-wrapper {
+            margin: 0;
+            label {
+              /* visually hidden */
+              border: 0;
+              clip: rect(0 0 0 0);
+              height: 1px;
+              margin: -1px;
+              overflow: hidden;
+              padding: 0;
+              position: absolute;
+              width: 1px;
+            }
+            input[type="text"] {
+              border-radius: var(--radius-circle);
+            }
+            select {
+              border-radius: var(--radius-circle);
+              padding: 0 var(--spacing-l) 0 var(--spacing-xs);
+            }
+          }
         }
       }
     }