@utahdts/utah-design-system 0.2.0 → 0.3.0

package/README.md

@@ -14,7 +14,6 @@ Please see the [documentation site](https://utahdts.github.io/utah-design-system
 
 ## Install
 
-[![Build Status](https://img.shields.io/github/workflow/status/utahdts/utah-design-system/Build%20and%20Deploy?branch=dev&style=for-the-badge)](https://github.com/utahdts/utah-design-system/actions/workflows/dev-pages-deploy.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@utahdts/utah-design-system.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@utahdts/utah-design-system)
 [![License](https://img.shields.io/npm/l/@utahdts/utah-design-system.svg?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
 [![issues](https://img.shields.io/github/issues-raw/utahdts/utah-design-system?style=for-the-badge)](https://github.com/utahdts/utah-design-system/issues)
@@ -59,3 +58,9 @@ unpkg.com/@utahdts/utah-design-system@0.0.2/css/build/utah-design-system.css
 |-------------------------|-----------------------------------------------------------------------------------------|
 | index.scss<br>(All CSS) | https://unpkg.com/@utahdts/utah-design-system@:version/css/build/utah-design-system.css |
 
+### Site Map
+
+- [Home](https://utahdts.github.io/utah-design-system/)
+- Library
+- [Header](https://utahdts.github.io/utah-design-system/utah-header/)
+- [Documentation and Examples](../website/README.md)

package/css/1-settings/_font-stuff.scss

@@ -21,6 +21,11 @@ Font size variables
   --font-size-5xl: 3rem;     //48
   --font-size-6xl: 3.5rem;   //56
   --font-size-7xl: 4.5rem;   //72
+
+  --font-weight-normal: 400;
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
 }
 
 .font-size-2xs { font-size: var(--font-size-2xs); }
@@ -38,13 +43,6 @@ Font size variables
 .font-size-7xl { font-size: var(--font-size-7xl); }
 
 
-#{class-vars.$base-class} {
-  --font-weight-normal: 400;
-  --font-weight-semi-bold: 600;
-  --font-weight-bold: 700;
-  --font-weight-black: 900;
-}
-
 .font-normal { font-weight: var(--font-weight-normal); }
 .font-semi-bold { font-weight: var(--font-weight-semi-bold); }
 .font-bold { font-weight: var(--font-weight-bold); }

package/css/1-settings/_icons.scss

@@ -3,11 +3,11 @@
 /* Generated by Glyphter (http://www.glyphter.com) on  Fri Jan 20 2023*/
 @font-face {
   font-family: 'utah design system';
-  src: url('/fonts/utah-design-system.eot');
-  src: url('/fonts/utah-design-system.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/utah-design-system.woff') format('woff'),
-       url('/fonts/utah-design-system.ttf') format('truetype'),
-       url('/fonts/utah-design-system.svg#utah-design-system') format('svg');
+  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;
 }
@@ -201,7 +201,19 @@
   .utds-icon-after-copy::after {
     content: '\0067';
   }
-}
 
+  .utds-icon-before-home-menu::before,
+  .utds-icon-after-home-menu::after {
+    content: '\0068';
+  }
 
+  .utds-icon-before-hamburger::before,
+  .utds-icon-after-hamburger::after {
+    content: '\0069';
+  }
 
+  .utds-icon-before-account::before,
+  .utds-icon-after-account::after {
+    content: '\006a';
+  }
+}

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

@@ -110,20 +110,30 @@ variables and settings
 .secondary-color-light-background { background-color: var(--secondary-color-light); }
 .gray-on-secondary-background { background-color: var(--gray-on-secondary-color); }
 
-.secondary-color { color: var(--secondary-color) };
-.secondary-color-border { border-color: var(--secondary-color) };
+.secondary-color { color: var(--secondary-color) }
+.secondary-color-border { border-color: var(--secondary-color) }
 
 .accent-color-background { background-color: var(--accent-color); }
 .accent-color-dark-background { background-color: var(--accent-color-dark); }
 .accent-color-light-background { background-color: var(--accent-color-light); }
 .gray-on-accent-background { background-color: var(--gray-on-accent-color); }
 
-.accent-color { color: var(--accent-color) };
-.accent-color-border { border-color: var(--accent-color) };
+.accent-color { color: var(--accent-color) }
+.accent-color-border { border-color: var(--accent-color) }
 
 .gray-color-background { background-color: var(--gray-color); }
 .gray-color-light-background { background-color: var(--gray-light-color) }
 
 .white-color { color: white; }
 
+.background-frosted-dark {
+	background: rgba(0,0,0,0.6);
+	backdrop-filter: blur(16px) brightness(1.5);
+	-webkit-backdrop-filter: blur(16px) brightness(1.5);
+}
 
+.background-frosted-light {
+	background: rgba(255,255,255,0.1);
+	backdrop-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
+}

package/css/1-settings/_spacing.scss

@@ -18,8 +18,7 @@
   --spacing-4xl: 64px;
   --spacing-5xl: 80px;
   --spacing-6xl: 96px;
-}
-#{class-vars.$base-class} {
+
   .m-spacing { margin: var(--spacing); }
   .mt-spacing { margin-top: var(--spacing); }
   .mr-spacing { margin-right: var(--spacing); }

package/css/2-tools/_tools-index.scss

@@ -45,3 +45,23 @@ scss mixins and functions
     @include form-ele-focus-appearance;
   }
 }
+
+@mixin selected-vertical-menu-item {
+  &.menu-item--selected {
+    font-weight: bold;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
+    //a chiclet
+    &::after {
+      content: '';
+      position: absolute;
+      left: -3px;
+      top: 0;
+      width: 5px;
+      height: 100%;
+      background: var(--primary-color);
+      border-radius: var(--radius-circle);
+    }
+  }
+}

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

@@ -66,8 +66,16 @@ elemental html: h1, h2, h3, ul, li, etc.
       background: var(--gray-light-color);
       padding: var(--spacing-s) var(--spacing);
       border-radius: var(--radius-medium);
+      &--overflow {
+        width: 100%;
+        overflow-x: scroll;
+        box-sizing: border-box;
+      }
     }
   }
+  .gray-block__overflow-content {
+    width: max-content;
+  }
 
   ul, ol {
     padding: 0 0 0 var(--spacing-2xl);
@@ -82,7 +90,7 @@ elemental html: h1, h2, h3, ul, li, etc.
     border-top: 1px solid var(--gray-border);
   }
 
-  a[href] {
+  a[href]:not(.button) {
     color: var(--primary-color);
     &:hover {
       box-shadow: -3px -1px 0 0px var(--hover-gray-color-opaque),

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

@@ -19,7 +19,10 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/navigation/main-menu";
 @use "base-components/navigation/menu-item";
 @use "base-components/navigation/side-panel-navigation";
+@use "base-components/navigation/vertical-menu";
+@use "base-components/navigation/mega-menu";
 @use "base-components/popups/popups";
+@use "base-components/popups/tooltips";
 @use "base-components/templates/documenation-template";
 @use "base-components/templates/landing-page-template";
 @use "base-components/forms/input";

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

@@ -20,6 +20,7 @@
     color: var(--gray-color);
     text-decoration: none;
     position: relative;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
 
     svg {
       fill: currentColor;

package/css/6-components/base-components/buttons/_icon-button.scss

@@ -80,6 +80,7 @@
 
     [class*='utds-icon-before-'] {
       line-height: .5;
+      display: block;
       &::before {
         margin: 0;
         font-size: 1.25rem;

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

@@ -8,7 +8,6 @@ select {
   border: 1px solid var(--gray-color);
   width: 100%;
   padding: 0 var(--spacing-xs);
-  box-sizing: border-box;
   appearance: none;
   background: white var(--icon-chevron-dark) no-repeat right 5px center;
   background-size: 16px;

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

@@ -170,16 +170,12 @@ input[type=checkbox].switch {
 }
 
 .switch-old::after {
-  left: 1px;
   top: 4px;
   background-color: #fff;
   border-radius: 50%;
   width: 14px;
   height: 14px;
   border: 1px solid color-swatches.$warm-gray-08;
-}
-
-.switch-old::after {
   left: 16px;
   border-color: color-swatches.$aspen-green-08;
   color: color-swatches.$aspen-green-08;

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

@@ -9,7 +9,6 @@ textarea {
   border: 1px solid var(--gray-color);
   width: 100%;
   padding: 0 var(--spacing-xs);
-  box-sizing: border-box;
 
   @include tools-index.form-ele-hover-medium;
   @include tools-index.form-ele-focus;

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

@@ -2,21 +2,41 @@
 @use "../../../1-settings/color-swatches";
 
 #{class-vars.$base-class} {
-  .menu-bar {
-    background-color: var(--gray-light-color);
+  .main-menu {
+    &__wrapper {
+      background-color: var(--gray-light-color);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 var(--spacing-l) 0 var(--spacing-xs);
+
+      .utds-icon-before-search::before {
+       font-size: 1.1rem;
+      }
+    }
 
-    ul {
+    .menu-item__search {
+      margin-left: auto;
+    }
+
+    &__search-placeholder {
+      height: var(--form-ele-medium);
+      width: var(--form-ele-medium);
+    }
+  }
+
+  .horizontal-menu {
+    &>ul {
       list-style-type: none;
       display: flex;
-      margin: 0 var(--spacing-xs) 0 var(--spacing-xs);
       padding: 0;
       li {
 
-        &.menu-item__search {
-          margin-left: auto;
+        .menu-item__title {
+          position: relative;
         }
 
-        a {
+        a[href], button {
           display: flex;
           align-items: center;
           text-decoration: none;
@@ -29,19 +49,8 @@
           box-sizing: border-box;
           font-size: var(--font-size);
           font-weight: var(--font-weight-semi-bold);
-
-          &::after {
-            content: "";
-            width: 100%;
-            height: var(--spacing-2xs);
-            background: transparent;
-            display: block;
-            position: absolute;
-            top: -9px;
-            left: 0;
-            border-bottom-left-radius: var(--spacing-2xs);
-            border-bottom-right-radius: var(--spacing-2xs);
-          }
+          min-height: auto;
+          line-height: 1.7;
 
           .icon-chevron-down {
             font-size: 1rem;
@@ -52,16 +61,23 @@
             color: black;
             box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
           }
-          &.menu-item--selected {
+
+          &.menu-item--selected + span.menu-chiclet {
             &::after {
+              content: "";
+              width: 100%;
+              height: var(--spacing-2xs);
               background: var(--primary-color);
+              display: block;
+              position: absolute;
+              top: 0;
+              left: 0;
+              border-bottom-left-radius: var(--spacing-2xs);
+              border-bottom-right-radius: var(--spacing-2xs);
+              outline: none;
+              outline-offset: 0;
             }
           }
-
-          .menu-item__search-icon {
-            font-size: var(--font-size-l);
-            line-height: 1rem;
-          }
         }
       }
     }

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

@@ -0,0 +1,28 @@
+@use "../../../1-settings/class-vars";
+@use "../../../1-settings/color-swatches";
+
+#{class-vars.$base-class} {
+  .menu-item--mega-menu {
+    .popup__content {
+      padding: var(--spacing) var(--spacing-l);
+      &>ul {
+        display: flex;
+        gap: var(--spacing-xl);
+
+        &>li {
+          font-weight: bold;
+          font-size: var(--font-size-l);
+
+          &>ul {
+            font-size: var(--font-size);
+            font-weight: var(--font-weight-semi-bold);
+          }
+        }
+      }
+      a[href].vertical-menu__link-title {
+        text-decoration: underline;
+        color: var(--primary-color);
+      }
+    }
+  }
+}

package/css/6-components/base-components/navigation/_menu-item.scss

@@ -17,7 +17,7 @@
         color: var(--primary-color);
       }
     }
-    a {
+    a[href] {
       text-decoration: none;
       color: var(--gray-color);
       &.menu-item--selected {

package/css/6-components/base-components/navigation/_side-panel-navigation.scss

@@ -1,4 +1,5 @@
 @use "../../../1-settings/class-vars";
+@use "../../../2-tools/tools-index";
 
 #{class-vars.$base-class} {
   .menu-side-panel {
@@ -37,23 +38,7 @@
             box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
             color: var(--primary-color);
           }
-          &.menu-item--selected {
-            font-weight: bold;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
-            //a chiclet
-            &::after {
-              content: '';
-              position: absolute;
-              left: -3px;
-              top: 0;
-              width: 5px;
-              height: 100%;
-              background: var(--primary-color);
-              border-radius: var(--radius-circle);
-            }
-          }
+          @include tools-index.selected-vertical-menu-item;
         }
       }
 

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

@@ -0,0 +1,71 @@
+@use "../../../1-settings/class-vars";
+@use "../../../2-tools/tools-index";
+
+#{class-vars.$base-class} {
+  ul.vertical-menu {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .vertical-menu {
+    li > ul {
+      padding-left: var(--spacing-s);
+    }
+
+    button.vertical-menu__button-title,
+    a[href].vertical-menu__link-title {
+      border-radius: var(--radius-circle);
+      border: none;
+      box-shadow: none;
+      box-sizing: border-box;
+      color: var(--gray-color);
+      display: flex;
+      font-size: var(--font-size-2xs);
+      justify-content: flex-start;
+      line-height: 1.7;
+      margin: var(--spacing-2xs) 0;
+      min-height: unset;
+      padding: var(--spacing-2xs) var(--spacing);
+      text-align: left;
+      text-decoration: none;
+      width: 100%;
+      position: relative;
+
+      &:hover {
+        background: var(--hover-gray-color);
+        color: var(--primary-color);
+        box-shadow: none;
+      }
+      &:active {
+        transform: none;
+      }
+      @include tools-index.selected-vertical-menu-item;
+    }
+    a.vertical-menu__link-title {
+      &:hover {
+        box-shadow: none;
+      }
+    }
+    &__link-text {
+      flex: 1 0 auto;
+    }
+    &__divider {
+      display: block;
+      margin: var(--spacing-s) var(--spacing-s);
+      height: 1px;
+      background-color: var(--gray-medium-light-color);
+    }
+    & .utds-icon-before-chevron-right {
+      font-size: .6rem;
+      line-height: .5;
+      transform: rotate(0deg);
+      transition: transform var(--timing-quick) ease;
+      &::before {
+        margin-right: 0;
+      }
+      &.is-open {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+@use "../../../1-settings/settings-index";
+@use "../../../1-settings/class-vars";
+@use "../../../1-settings/spacing";
+
+#{class-vars.$base-class} {
+  .tooltip {
+    &__wrapper {
+      position: absolute;
+      z-index: 110;
+      background: none transparent;
+      // initial position so that the tooltip doesn't go off the screen
+      left: 0;
+      top: 0;
+
+      transition: opacity 100ms ease-in-out;
+
+      &--visible {
+        opacity: 1;
+        .tooltip__content {
+          transform: scale(1);
+        }
+      }
+      &--hidden {
+        opacity: 0;
+        pointer-events: none;
+        .tooltip__content {
+          transform: scale(.7);
+        }
+      }
+    }
+    &__content {
+      background: white;
+      border-radius: var(--radius-small);
+      background: var(--gray-color);
+      color: white;
+      box-sizing: border-box;
+      padding: var(--spacing-3xs) var(--spacing-s);
+      transition: transform 100ms ease-in-out;
+      box-shadow: var(--elevation-small);
+    }
+
+    &__arrow {
+      visibility: hidden;
+
+      &, &::before {
+        position: absolute;
+        width: 6px;
+        height: 6px;
+        background: inherit;
+        z-index: -1;
+      }
+
+      &::before {
+        visibility: visible;
+        content: '';
+        transform: rotate(45deg);
+      }
+    }
+
+
+    &__wrapper[data-popper-placement^='top'] {
+      .tooltip__content {
+        transform-origin: bottom;
+      }
+      .tooltip__arrow {
+        bottom: -2px;
+      }
+    }
+
+    &__wrapper[data-popper-placement^='bottom'] {
+      .tooltip__content {
+        transform-origin: top;
+      }
+      .tooltip__arrow {
+        top: -3px;
+      }
+    }
+
+    &__wrapper[data-popper-placement^='left'] {
+      .tooltip__content {
+        transform-origin: right;
+      }
+      .tooltip__arrow {
+        right: -2px;
+      }
+    }
+
+    &__wrapper[data-popper-placement^='right'] {
+      .tooltip__content {
+        transform-origin: left;
+      }
+      .tooltip__arrow {
+        left: -3px;
+      }
+    }
+  }
+}

package/css/6-components/base-components/templates/_landing-page-template.scss

@@ -1,6 +1,8 @@
 .landing-page-template {
   display: flex;
   justify-content: center;
+  align-items: center;
+  flex-direction: column;
 
   .content-width {
     max-width: var(--content-width-narrow);

package/css/6-components/base-components/templates/_on-this-page.scss

@@ -15,7 +15,7 @@
       ul {
         margin-left: var(--spacing);
       }
-      a {
+      a[href] {
         text-decoration: none;
         color: var(--gray-color);
         padding: var(--spacing-2xs) var(--spacing);