@utahdts/utah-design-system 0.8.0 → 0.9.5

package/css/1-settings/_class-vars.scss

@@ -1,6 +1,6 @@
 /*
-############     _settings-index.scss      ############
-CSS Class Variables
+############     _class-vars.scss      ############
+CSS Classes - SCSS Variables
 */
 
 $base-class: ".utah-design-system";

package/css/1-settings/_media-size-vars.scss

@@ -0,0 +1,11 @@
+/*
+############     _media-size-vars.scss      ############
+Media Sizes - SCSS Variables
+*/
+
+$media-size-mobile: 640px;
+$media-size-tablet-portrait: 768px;
+$media-size-tablet-landscape: 1024px;
+$media-size-desktop-small: 1200px;
+$media-size-desktop-medium: 1440px;
+$media-size-desktop-large: 1920px;

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

@@ -80,13 +80,14 @@ variables and settings
   --form-checkbox-large: 1.375rem;
 
     /* content layout sizes */
-  --content-width-narrow: 800px;
+  --content-width-narrow: 808px;
   --content-width: 1224px;
   --content-width-wide: 1432px;
   --documentation-width: 700px;
   --documentation-left-width: 200px;
   --documentation-right-width: 200px;
   --documentation-padding: var(--spacing-2xl) var(--spacing-xl);
+  --documentation-padding-small: var(--spacing-xl) var(--spacing);
 
   /* elevation box shadows */
   --drop-shadow-color: rgba(0, 0, 0, 0.3);

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

@@ -17,15 +17,18 @@ elemental html: h1, h2, h3, ul, li, etc.
   h1 {
     font-size: var(--font-size-4xl);
     margin: 0;
+    line-height: 1.1;
   }
   h2 {
     font-size: var(--font-size-3xl);
     margin: 0;
+    line-height: 1.2;
   }
   h3 {
     font-size: var(--font-size-2xl );
     font-weight: var(--font-weight-semi-bold);
     margin: 0;
+    line-height: 1.3;
   }
   h4 {
     font-size: var(--font-size-l);
@@ -56,31 +59,7 @@ elemental html: h1, h2, h3, ul, li, etc.
       background: var(--primary-color-light);
     }
   }
-  pre {
-    font-family: var(--fixed-width-font-family);
-    font-size: .95rem;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    margin: 0 0 var(--spacing) 0;
-    &.gray-block {
-      background: var(--gray-light-color);
-      padding: var(--spacing-s) var(--spacing);
-      border-radius: var(--radius-medium);
-    }
-    &.pre-block {
-      &--overflow {
-        width: 100%;
-        overflow-x: scroll;
-        box-sizing: border-box;
-      }
-      &--padded {
-        padding: 0 var(--spacing);
-      }
-    }
-    .pre-block__overflow-content {
-      width: max-content;
-    }
-  }
+  // pre --- see _pre-code.scss
 
   ul, ol {
     padding: 0 0 0 var(--spacing-2xl);

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

@@ -18,6 +18,7 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/forms/info-box";
 @use "base-components/forms/radio-button";
 @use "base-components/forms/switch";
+@use "base-components/forms/fieldset";
 @use "base-components/navigation/main-menu";
 @use "base-components/navigation/menu-item";
 @use "base-components/navigation/pagination";
@@ -30,6 +31,7 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/popups/search-modal";
 @use "base-components/templates/documenation-template";
 @use "base-components/templates/landing-page-template";
+@use "base-components/text/pre-code";
 @use "base-components/forms/input";
 @use "base-components/widgetsInicators/spinner";
 @use "base-components/tablesAndLists/table";

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

@@ -2,25 +2,41 @@
 
 #{class-vars.$base-class} {
   .accordion {
+    width: 100%;
+
     &__header,
     &__header.button {
-      border-radius: 0;
-      font-size: var(--font-size-2xl);
+      border-radius: var(--radius-small);
+      font-size: var(--font-size-xl);
       font-weight: var(--font-weight-bold);
-      padding: var(--spacing);
+      padding: var(--spacing-s) var(--spacing);
       border: none;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       width: 100%;
       box-sizing: border-box;
+
+      [class*=utds-icon-before-]::before {
+        margin-right: 0;
+        font-size: 1.5rem;
+      }
     }
+    &__header {
+      &--open {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
     &__content {
         background: var(--gray-light-color);
         padding: 0;
         box-sizing: border-box;
         height: 0;
         overflow: hidden;
+        border-bottom-left-radius: var(--radius-small);
+        border-bottom-right-radius: var(--radius-small);
 
         &--open {
           height: auto;

package/css/6-components/base-components/footer/_utah-footer.scss

@@ -1,4 +1,5 @@
 @use "../../../1-settings/class-vars";
+@use "../../../1-settings/media-size-vars";
 
 #{class-vars.$base-class}.utds {
   &-footer {
@@ -86,7 +87,7 @@
     }
   }
 }
-@media screen and (max-width: 768px) {
+@media screen and (max-width: #{media-size-vars.$media-size-tablet-portrait}) {
   #{class-vars.$base-class}.utds {
     &-footer {
       flex-wrap: wrap;

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

@@ -0,0 +1,8 @@
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  fieldset {
+    border: none;
+    padding: 0;
+  }
+}

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

@@ -52,9 +52,12 @@
           min-height: auto;
           line-height: 1.7;
 
-          .icon-chevron-down {
-            font-size: 1rem;
-            margin-right: -2px;
+          .menu-item__menu-arrow {
+            font-size: .65rem;
+            margin-left: var(--spacing-2xs);
+            &[class*=utds-icon-before-]::before {
+              margin-right: 0;
+            }
           }
 
           &:hover {

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

@@ -47,7 +47,7 @@
         min-width: unset;
       }
       &__button-title {
-        flex: 1 0 auto;
+        flex: 1 1 auto;
         justify-content: flex-start;
         font-size: var(--font-size-xs);
         padding: var(--spacing-2xs) var(--spacing);

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

@@ -1,6 +1,9 @@
 @use "../../../1-settings/class-vars";
 
 #{class-vars.$base-class} {
+  .table-wrapper {
+    overflow-x: scroll;
+  }
   table {
     border-collapse: collapse;
     thead {

package/css/6-components/base-components/templates/_documenation-template.scss

@@ -1,4 +1,5 @@
 @use "../../../1-settings/class-vars";
+@use "../../../1-settings/media-size-vars";
 
 #{class-vars.$base-class} {
   .documentation-template {
@@ -6,7 +7,7 @@
     flex-direction: row;
     width: 100%;
     max-width: var(--content-width-wide);
-    justify-content: space-around;
+    justify-content: center;
     align-items: flex-start;
 
     &__wrapper {
@@ -18,10 +19,17 @@
       border-right: 1px solid var(--gray-border);
       padding: var(--documentation-padding);
       width: var(--documentation-left-width);
+      min-width: var(--documentation-left-width);
+    }
+    &__right-group {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
     }
     &__content {
       flex: 1 1 auto;
       max-width: var(--documentation-width);
+      min-width: 0;
       padding: var(--documentation-padding);
 
       h1 {
@@ -47,7 +55,75 @@
       border-left: 1px solid var(--gray-border);
       padding: var(--documentation-padding);
       width: var(--documentation-right-width);
+      min-width: var(--documentation-right-width);
     }
 
   }
 }
+
+@media screen and (max-width: 1300px) {
+  #{class-vars.$base-class} {
+    .documentation-template {
+      &__content {
+        max-width: calc(100vw - (6 * var(--spacing-xl)) - (var(--documentation-left-width)) - (var(--documentation-right-width)));
+      }
+    }
+  }
+}
+@media screen and (max-width: #{media-size-vars.$media-size-desktop-small}) {
+  #{class-vars.$base-class} {
+    .documentation-template {
+      &__side-panel-left,
+      &__side-panel-right {
+        min-width: calc(var(--documentation-left-width) - 50px);
+      }
+      &__content {
+        max-width: calc(100vw - (2 * var(--spacing-xl)) - (var(--documentation-left-width)) - (var(--documentation-right-width)) - 100px);
+      }
+    }
+  }
+}
+
+@media screen and (max-width: #{media-size-vars.$media-size-tablet-landscape}) {
+  #{class-vars.$base-class} {
+    .documentation-template {
+      &__right-group {
+        flex-direction: column;
+      }
+      &__side-panel-left {
+        padding: var(--documentation-padding-small);
+      }
+      &__content {
+        order: 2;
+        max-width: calc(100vw - (2 * var(--spacing)) - (var(--documentation-left-width)) - 50px);
+        padding: var(--documentation-padding-small);
+      }
+      &__side-panel-right {
+        order: 1;
+        position: relative;
+
+        // border-left: none;
+        // padding-bottom: 0;
+
+        border-left: 4px solid var(--gray-border);
+        padding-bottom: 0;
+        padding-top: 0;
+        padding-left: var(--spacing);
+        margin-left: var(--spacing);
+        margin-top: var(--spacing-xl);
+      }
+    }
+  }
+}
+@media screen and (max-width: #{media-size-vars.$media-size-tablet-portrait}) {
+  #{class-vars.$base-class} {
+    .documentation-template {
+      &__side-panel-left {
+        display: none;
+      }
+      &__content {
+        max-width: calc(100vw - (2 * var(--spacing)));
+      }
+    }
+  }
+}

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

@@ -1,4 +1,5 @@
 @use "../../../1-settings/class-vars";
+@use "../../../1-settings/media-size-vars";
 
 #{class-vars.$base-class} {
   .landing-page-template {
@@ -9,7 +10,19 @@
     padding-bottom: var(--spacing-xl);
 
     .content-width {
-      max-width: var(--content-width-narrow);
+      max-width: calc(var(--content-width-narrow) + (2 * var(--spacing-2xl)));
+      padding: 0 var(--spacing-2xl);
+      box-sizing: border-box;    }
+  }
+
+}
+
+@media screen and (max-width: #{media-size-vars.$media-size-mobile}) {
+  #{class-vars.$base-class} {
+    .landing-page-template {
+      .content-width {
+        padding: 0 var(--spacing-l);
+      }
     }
   }
 }

package/css/6-components/base-components/text/_pre-code.scss

@@ -0,0 +1,38 @@
+
+@use "../../../../../../@utahdts/utah-design-system/css/1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  .pre-code {
+    &__wrapper {
+      position: relative;
+      width: 100%;
+    }
+  }
+
+  pre {
+    position: relative;
+    font-family: var(--fixed-width-font-family);
+    font-size: .95rem;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    margin: 0 0 var(--spacing) 0;
+    &.gray-block {
+      background: var(--gray-light-color);
+      padding: var(--spacing-s) var(--spacing-xl) var(--spacing-s) var(--spacing);
+      border-radius: var(--radius-medium);
+    }
+    &.pre-code {
+      &--overflow {
+        width: 100%;
+        overflow-x: scroll;
+        box-sizing: border-box;
+      }
+      &--padded {
+        padding: 0 var(--spacing);
+      }
+    }
+    .pre-code__overflow-content {
+      width: max-content;
+    }
+  }
+}

package/dist/style.css

@@ -16,8 +16,8 @@ BEM standard: Block, Element, Modifier
     - cats-r-great--black
  */
 /*
-############     _settings-index.scss      ############
-CSS Class Variables
+############     _class-vars.scss      ############
+CSS Classes - SCSS Variables
 */
 /*
 ############     _spacing.scss      ############
@@ -698,13 +698,14 @@ variables and settings
   --form-checkbox-medium: 1.125rem;
   --form-checkbox-large: 1.375rem;
   /* content layout sizes */
-  --content-width-narrow: 800px;
+  --content-width-narrow: 808px;
   --content-width: 1224px;
   --content-width-wide: 1432px;
   --documentation-width: 700px;
   --documentation-left-width: 200px;
   --documentation-right-width: 200px;
   --documentation-padding: var(--spacing-2xl) var(--spacing-xl);
+  --documentation-padding-small: var(--spacing-xl) var(--spacing);
   /* elevation box shadows */
   --drop-shadow-color: rgba(0, 0, 0, 0.3);
   --elevation-small: 0 3px 6px var(--drop-shadow-color);
@@ -823,8 +824,8 @@ scss mixins and functions
 css resets, etc.
 */
 /*
-############     _settings-index.scss      ############
-CSS Class Variables
+############     _class-vars.scss      ############
+CSS Classes - SCSS Variables
 */
 /*
 ############     _elements-index.scss      ############
@@ -844,17 +845,20 @@ elemental html: h1, h2, h3, ul, li, etc.
 .utah-design-system h1 {
   font-size: var(--font-size-4xl);
   margin: 0;
+  line-height: 1.1;
 }
 
 .utah-design-system h2 {
   font-size: var(--font-size-3xl);
   margin: 0;
+  line-height: 1.2;
 }
 
 .utah-design-system h3 {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-semi-bold);
   margin: 0;
+  line-height: 1.3;
 }
 
 .utah-design-system h4 {
@@ -890,34 +894,6 @@ elemental html: h1, h2, h3, ul, li, etc.
   background: var(--primary-color-light);
 }
 
-.utah-design-system pre {
-  font-family: var(--fixed-width-font-family);
-  font-size: 0.95rem;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  margin: 0 0 var(--spacing) 0;
-}
-
-.utah-design-system pre.gray-block {
-  background: var(--gray-light-color);
-  padding: var(--spacing-s) var(--spacing);
-  border-radius: var(--radius-medium);
-}
-
-.utah-design-system pre.pre-block--overflow {
-  width: 100%;
-  overflow-x: scroll;
-  box-sizing: border-box;
-}
-
-.utah-design-system pre.pre-block--padded {
-  padding: 0 var(--spacing);
-}
-
-.utah-design-system pre .pre-block__overflow-content {
-  width: max-content;
-}
-
 .utah-design-system ul, .utah-design-system ol {
   padding: 0 0 0 var(--spacing-2xl);
   margin: 0;
@@ -958,14 +934,18 @@ containers and general design patterns, 2up, 3up, layout grids, etc.
 }
 
 /*
-############     _settings-index.scss      ############
-CSS Class Variables
+############     _class-vars.scss      ############
+CSS Classes - SCSS Variables
 */
+.utah-design-system .accordion {
+  width: 100%;
+}
+
 .utah-design-system .accordion__header, .utah-design-system .accordion__header.button {
-  border-radius: 0;
-  font-size: var(--font-size-2xl);
+  border-radius: var(--radius-small);
+  font-size: var(--font-size-xl);
   font-weight: var(--font-weight-bold);
-  padding: var(--spacing);
+  padding: var(--spacing-s) var(--spacing);
   border: none;
   display: flex;
   flex-direction: row;
@@ -974,12 +954,24 @@ CSS Class Variables
   box-sizing: border-box;
 }
 
+.utah-design-system .accordion__header [class*=utds-icon-before-]::before, .utah-design-system .accordion__header.button [class*=utds-icon-before-]::before {
+  margin-right: 0;
+  font-size: 1.5rem;
+}
+
+.utah-design-system .accordion__header--open {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .utah-design-system .accordion__content {
   background: var(--gray-light-color);
   padding: 0;
   box-sizing: border-box;
   height: 0;
   overflow: hidden;
+  border-bottom-left-radius: var(--radius-small);
+  border-bottom-right-radius: var(--radius-small);
 }
 
 .utah-design-system .accordion__content--open {
@@ -2125,6 +2117,11 @@ base color swatches for the design system
   color: #699957;
 }
 
+.utah-design-system fieldset {
+  border: none;
+  padding: 0;
+}
+
 .utah-design-system .main-menu__wrapper {
   background-color: var(--gray-light-color);
   display: flex;
@@ -2173,9 +2170,13 @@ base color swatches for the design system
   line-height: 1.7;
 }
 
-.utah-design-system .horizontal-menu > ul li a[href] .icon-chevron-down, .utah-design-system .horizontal-menu > ul li button .icon-chevron-down {
-  font-size: 1rem;
-  margin-right: -2px;
+.utah-design-system .horizontal-menu > ul li a[href] .menu-item__menu-arrow, .utah-design-system .horizontal-menu > ul li button .menu-item__menu-arrow {
+  font-size: 0.65rem;
+  margin-left: var(--spacing-2xs);
+}
+
+.utah-design-system .horizontal-menu > ul li a[href] .menu-item__menu-arrow[class*=utds-icon-before-]::before, .utah-design-system .horizontal-menu > ul li button .menu-item__menu-arrow[class*=utds-icon-before-]::before {
+  margin-right: 0;
 }
 
 .utah-design-system .horizontal-menu > ul li a[href]:hover, .utah-design-system .horizontal-menu > ul li button:hover {
@@ -2380,7 +2381,7 @@ base color swatches for the design system
 }
 
 .utah-design-system .menu-side-panel .menu-item__button-title {
-  flex: 1 0 auto;
+  flex: 1 1 auto;
   justify-content: flex-start;
   font-size: var(--font-size-xs);
   padding: var(--spacing-2xs) var(--spacing);
@@ -3191,13 +3192,14 @@ variables and settings
   --form-checkbox-medium: 1.125rem;
   --form-checkbox-large: 1.375rem;
   /* content layout sizes */
-  --content-width-narrow: 800px;
+  --content-width-narrow: 808px;
   --content-width: 1224px;
   --content-width-wide: 1432px;
   --documentation-width: 700px;
   --documentation-left-width: 200px;
   --documentation-right-width: 200px;
   --documentation-padding: var(--spacing-2xl) var(--spacing-xl);
+  --documentation-padding-small: var(--spacing-xl) var(--spacing);
   /* elevation box shadows */
   --drop-shadow-color: rgba(0, 0, 0, 0.3);
   --elevation-small: 0 3px 6px var(--drop-shadow-color);
@@ -3573,12 +3575,16 @@ variables and settings
   font-size: 1.3rem;
 }
 
+/*
+############     _media-size-vars.scss      ############
+Media Sizes - SCSS Variables
+*/
 .utah-design-system .documentation-template {
   display: flex;
   flex-direction: row;
   width: 100%;
   max-width: var(--content-width-wide);
-  justify-content: space-around;
+  justify-content: center;
   align-items: flex-start;
 }
 
@@ -3591,11 +3597,19 @@ variables and settings
   border-right: 1px solid var(--gray-border);
   padding: var(--documentation-padding);
   width: var(--documentation-left-width);
+  min-width: var(--documentation-left-width);
+}
+
+.utah-design-system .documentation-template__right-group {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
 }
 
 .utah-design-system .documentation-template__content {
   flex: 1 1 auto;
   max-width: var(--documentation-width);
+  min-width: 0;
   padding: var(--documentation-padding);
 }
 
@@ -3620,8 +3634,53 @@ variables and settings
   border-left: 1px solid var(--gray-border);
   padding: var(--documentation-padding);
   width: var(--documentation-right-width);
+  min-width: var(--documentation-right-width);
 }
 
+@media screen and (max-width: 1300px) {
+  .utah-design-system .documentation-template__content {
+    max-width: calc(100vw - 6 * var(--spacing-xl) - (var(--documentation-left-width)) - (var(--documentation-right-width)));
+  }
+}
+@media screen and (max-width: 1200px) {
+  .utah-design-system .documentation-template__side-panel-left, .utah-design-system .documentation-template__side-panel-right {
+    min-width: calc(var(--documentation-left-width) - 50px);
+  }
+  .utah-design-system .documentation-template__content {
+    max-width: calc(100vw - 2 * var(--spacing-xl) - (var(--documentation-left-width)) - (var(--documentation-right-width)) - 100px);
+  }
+}
+@media screen and (max-width: 1024px) {
+  .utah-design-system .documentation-template__right-group {
+    flex-direction: column;
+  }
+  .utah-design-system .documentation-template__side-panel-left {
+    padding: var(--documentation-padding-small);
+  }
+  .utah-design-system .documentation-template__content {
+    order: 2;
+    max-width: calc(100vw - 2 * var(--spacing) - (var(--documentation-left-width)) - 50px);
+    padding: var(--documentation-padding-small);
+  }
+  .utah-design-system .documentation-template__side-panel-right {
+    order: 1;
+    position: relative;
+    border-left: 4px solid var(--gray-border);
+    padding-bottom: 0;
+    padding-top: 0;
+    padding-left: var(--spacing);
+    margin-left: var(--spacing);
+    margin-top: var(--spacing-xl);
+  }
+}
+@media screen and (max-width: 768px) {
+  .utah-design-system .documentation-template__side-panel-left {
+    display: none;
+  }
+  .utah-design-system .documentation-template__content {
+    max-width: calc(100vw - 2 * var(--spacing));
+  }
+}
 .utah-design-system .landing-page-template {
   display: flex;
   justify-content: center;
@@ -3631,7 +3690,48 @@ variables and settings
 }
 
 .utah-design-system .landing-page-template .content-width {
-  max-width: var(--content-width-narrow);
+  max-width: calc(var(--content-width-narrow) + 2 * var(--spacing-2xl));
+  padding: 0 var(--spacing-2xl);
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 640px) {
+  .utah-design-system .landing-page-template .content-width {
+    padding: 0 var(--spacing-l);
+  }
+}
+.utah-design-system .pre-code__wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.utah-design-system pre {
+  position: relative;
+  font-family: var(--fixed-width-font-family);
+  font-size: 0.95rem;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0 0 var(--spacing) 0;
+}
+
+.utah-design-system pre.gray-block {
+  background: var(--gray-light-color);
+  padding: var(--spacing-s) var(--spacing-xl) var(--spacing-s) var(--spacing);
+  border-radius: var(--radius-medium);
+}
+
+.utah-design-system pre.pre-code--overflow {
+  width: 100%;
+  overflow-x: scroll;
+  box-sizing: border-box;
+}
+
+.utah-design-system pre.pre-code--padded {
+  padding: 0 var(--spacing);
+}
+
+.utah-design-system pre .pre-code__overflow-content {
+  width: max-content;
 }
 
 .utah-design-system input.input--height-small,
@@ -3683,6 +3783,10 @@ variables and settings
     transform: rotate(1turn);
   }
 }
+.utah-design-system .table-wrapper {
+  overflow-x: scroll;
+}
+
 .utah-design-system table {
   border-collapse: collapse;
 }

package/dist/utah-design-system.es.js

@@ -7,7 +7,7 @@ const index = "";
 const name = "@utahdts/utah-design-system";
 const description = "Utah Design System React Library";
 const displayName = "Utah Design System React Library";
-const version$1 = "0.8.0";
+const version$1 = "0.9.5";
 const exports = {
   ".": {
     "development-local": "./index.js",
@@ -65,7 +65,7 @@ const bugs = {
 };
 const homepage = "https://github.com/utahdts/utah-design-system";
 const dependencies = {
-  "@utahdts/utah-design-system-header": "0.8.0",
+  "@utahdts/utah-design-system-header": "0.9.5",
   lodash: "4.17.21",
   "prop-types": "15.8.1",
   react: "18.x",
@@ -75,22 +75,14 @@ const dependencies = {
   uuid: "9.0.0"
 };
 const devDependencies = {
-  "@types/react": "18.2.0",
+  "@types/react": "18.2.7",
   "@types/react-dom": "18.2.4",
   "@vitejs/plugin-react": "4.0.0",
-  "@vitest/coverage-istanbul": "0.31.0",
-  eslint: "8.40.0",
-  "eslint-config-airbnb": "19.0.4",
-  "eslint-plugin-import": "2.27.5",
-  "eslint-plugin-jsx-a11y": "6.7.1",
-  "eslint-plugin-react": "7.32.2",
-  "eslint-plugin-react-hooks": "4.6.0",
-  "eslint-plugin-react-refresh": "0.4.1",
-  jsdom: "22.0.0",
+  "@vitest/coverage-istanbul": "0.31.2",
+  jsdom: "22.1.0",
   sass: "1.62.1",
-  vite: "4.3.7",
-  "vite-plugin-eslint": "1.8.1",
-  vitest: "0.31.0"
+  vite: "4.3.9",
+  vitest: "0.31.2"
 };
 const type = "module";
 const packageJson = {
@@ -2642,6 +2634,7 @@ const propTypes$S = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   contentClassName: PropTypes.string,
+  headingLevel: PropTypes.number,
   headerClassName: PropTypes.string,
   headerContent: PropTypes.node.isRequired,
   isOpen: PropTypes.bool,
@@ -2650,6 +2643,7 @@ const propTypes$S = {
 const defaultProps$S = {
   className: void 0,
   contentClassName: void 0,
+  headingLevel: 2,
   headerClassName: void 0,
   isOpen: void 0,
   onToggle: void 0
@@ -2658,6 +2652,7 @@ function Accordion({
   children,
   className,
   contentClassName,
+  headingLevel,
   headerClassName,
   headerContent,
   isOpen,
@@ -2674,16 +2669,17 @@ function Accordion({
       setStateIsOpen(!stateIsOpen);
     }
   }
+  const HeadingTag = `h${headingLevel}`;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: joinClassNames(["accordion", className]), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
-        className: joinClassNames(["accordion__header", headerClassName]),
+        className: joinClassNames(["accordion__header", headerClassName, stateIsOpen ? "accordion__header--open" : ""]),
         type: "button",
         onClick: handleEvent(toggleAccordion),
         children: [
-          headerContent,
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `material-symbols-outlined icon-button__icon ${stateIsOpen ? "" : "icon-button__icon--rotate180"}`, children: "expand_circle_down" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(HeadingTag, { children: headerContent }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `utds-icon-before-circle-chevron-up icon-button__icon ${stateIsOpen ? "" : "icon-button__icon--rotate180"}` })
         ]
       }
     ),
@@ -36364,16 +36360,20 @@ const TableBodyDataRowContext = React__default.createContext({});
 const TableContext = createContext({
   allData: [],
   filteredData: [],
+  // eslint-disable-next-line no-console
   registerSortingRule: (sortingRule) => {
     console.error("Context not yet initialized: registerSortingRule", sortingRule);
   },
   // unregister a rule for sorting, generally when a <TableSortingRule> unmounts
+  // eslint-disable-next-line no-console
   unregisterSortingRule: (recordFieldPath) => {
     console.error("Context not yet initialized: unregisterSortingRule", recordFieldPath);
   },
+  // eslint-disable-next-line no-console
   setBodyDataForComponentGuid: (guid, allData, filteredData) => {
     console.error("Context not yet initialized: setBodyDataForComponentGuid", guid, allData, filteredData);
   },
+  // eslint-disable-next-line no-console
   setState: (arg) => {
     console.error("Context not yet initialized: setState", arg);
   },
@@ -36502,7 +36502,6 @@ function TableCell({
       ref: innerRef,
       onClick,
       onDoubleClick,
-      onKeyPress: () => console.log("what should keypress on td do?"),
       role: "gridcell",
       ...rest,
       children
@@ -37662,7 +37661,7 @@ function TableWrapper({
     }),
     [state]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: joinClassNames("some-table-wrapper-className", className), id, ref: innerRef, ...rest, children }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: joinClassNames("table-wrapper", className), id, ref: innerRef, ...rest, children }) });
 }
 TableWrapper.propTypes = propTypes$3;
 TableWrapper.defaultProps = defaultProps$3;
@@ -37681,8 +37680,10 @@ function DocumentationTemplate({
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "documentation-template__wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "documentation-template", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "documentation-template__side-panel-left", children: sidePanelLeftContent }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: "documentation-template__content", ref: contentRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Content, {}) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "documentation-template__side-panel-right", children: sidePanelRightContent })
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "documentation-template__right-group", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: "documentation-template__content", ref: contentRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Content, {}) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "documentation-template__side-panel-right", children: sidePanelRightContent })
+    ] })
   ] }) });
 }
 DocumentationTemplate.propTypes = propTypes$2;
@@ -37819,9 +37820,11 @@ const SettingsShape = PropTypes.shape({
   domLocationTarget: DomLocationTargetShape,
   footer: FooterSettingsShape,
   logo: LogoShape,
-  mainMenu: MainMenuShape,
+  // mainMenu can be 'false' for the interactive presets
+  mainMenu: PropTypes.oneOfType([MainMenuShape, PropTypes.bool]),
   mediaSizes: MediaSizesShape.isRequired,
-  onSearch: PropTypes.func,
+  // onSearch can be 'false' for the interactive presets
+  onSearch: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   showTitle: PropTypes.bool.isRequired,
   size: PropTypes.oneOf(Object.values(sizes)),
   title: PropTypes.string.isRequired,

package/dist/utah-design-system.umd.js

@@ -23,7 +23,7 @@
   const name = "@utahdts/utah-design-system";
   const description = "Utah Design System React Library";
   const displayName = "Utah Design System React Library";
-  const version$1 = "0.8.0";
+  const version$1 = "0.9.5";
   const exports$1 = {
     ".": {
       "development-local": "./index.js",
@@ -81,7 +81,7 @@
   };
   const homepage = "https://github.com/utahdts/utah-design-system";
   const dependencies = {
-    "@utahdts/utah-design-system-header": "0.8.0",
+    "@utahdts/utah-design-system-header": "0.9.5",
     lodash: "4.17.21",
     "prop-types": "15.8.1",
     react: "18.x",
@@ -91,22 +91,14 @@
     uuid: "9.0.0"
   };
   const devDependencies = {
-    "@types/react": "18.2.0",
+    "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
     "@vitejs/plugin-react": "4.0.0",
-    "@vitest/coverage-istanbul": "0.31.0",
-    eslint: "8.40.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.32.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-react-refresh": "0.4.1",
-    jsdom: "22.0.0",
+    "@vitest/coverage-istanbul": "0.31.2",
+    jsdom: "22.1.0",
     sass: "1.62.1",
-    vite: "4.3.7",
-    "vite-plugin-eslint": "1.8.1",
-    vitest: "0.31.0"
+    vite: "4.3.9",
+    vitest: "0.31.2"
   };
   const type = "module";
   const packageJson = {
@@ -2658,6 +2650,7 @@
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     contentClassName: PropTypes.string,
+    headingLevel: PropTypes.number,
     headerClassName: PropTypes.string,
     headerContent: PropTypes.node.isRequired,
     isOpen: PropTypes.bool,
@@ -2666,6 +2659,7 @@
   const defaultProps$S = {
     className: void 0,
     contentClassName: void 0,
+    headingLevel: 2,
     headerClassName: void 0,
     isOpen: void 0,
     onToggle: void 0
@@ -2674,6 +2668,7 @@
     children,
     className,
     contentClassName,
+    headingLevel,
     headerClassName,
     headerContent,
     isOpen,
@@ -2690,16 +2685,17 @@
         setStateIsOpen(!stateIsOpen);
       }
     }
+    const HeadingTag = `h${headingLevel}`;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: joinClassNames(["accordion", className]), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
         {
-          className: joinClassNames(["accordion__header", headerClassName]),
+          className: joinClassNames(["accordion__header", headerClassName, stateIsOpen ? "accordion__header--open" : ""]),
           type: "button",
           onClick: handleEvent(toggleAccordion),
           children: [
-            headerContent,
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `material-symbols-outlined icon-button__icon ${stateIsOpen ? "" : "icon-button__icon--rotate180"}`, children: "expand_circle_down" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(HeadingTag, { children: headerContent }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `utds-icon-before-circle-chevron-up icon-button__icon ${stateIsOpen ? "" : "icon-button__icon--rotate180"}` })
           ]
         }
       ),
@@ -36380,16 +36376,20 @@
   const TableContext = React.createContext({
     allData: [],
     filteredData: [],
+    // eslint-disable-next-line no-console
     registerSortingRule: (sortingRule) => {
       console.error("Context not yet initialized: registerSortingRule", sortingRule);
     },
     // unregister a rule for sorting, generally when a <TableSortingRule> unmounts
+    // eslint-disable-next-line no-console
     unregisterSortingRule: (recordFieldPath) => {
       console.error("Context not yet initialized: unregisterSortingRule", recordFieldPath);
     },
+    // eslint-disable-next-line no-console
     setBodyDataForComponentGuid: (guid, allData, filteredData) => {
       console.error("Context not yet initialized: setBodyDataForComponentGuid", guid, allData, filteredData);
     },
+    // eslint-disable-next-line no-console
     setState: (arg) => {
       console.error("Context not yet initialized: setState", arg);
     },
@@ -36518,7 +36518,6 @@
         ref: innerRef,
         onClick,
         onDoubleClick,
-        onKeyPress: () => console.log("what should keypress on td do?"),
         role: "gridcell",
         ...rest,
         children
@@ -37678,7 +37677,7 @@
       }),
       [state]
     );
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: joinClassNames("some-table-wrapper-className", className), id, ref: innerRef, ...rest, children }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: joinClassNames("table-wrapper", className), id, ref: innerRef, ...rest, children }) });
   }
   TableWrapper.propTypes = propTypes$3;
   TableWrapper.defaultProps = defaultProps$3;
@@ -37697,8 +37696,10 @@
   }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "documentation-template__wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "documentation-template", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "documentation-template__side-panel-left", children: sidePanelLeftContent }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: "documentation-template__content", ref: contentRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Content, {}) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "documentation-template__side-panel-right", children: sidePanelRightContent })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "documentation-template__right-group", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: "documentation-template__content", ref: contentRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Content, {}) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "documentation-template__side-panel-right", children: sidePanelRightContent })
+      ] })
     ] }) });
   }
   DocumentationTemplate.propTypes = propTypes$2;
@@ -37835,9 +37836,11 @@
     domLocationTarget: DomLocationTargetShape,
     footer: FooterSettingsShape,
     logo: LogoShape,
-    mainMenu: MainMenuShape,
+    // mainMenu can be 'false' for the interactive presets
+    mainMenu: PropTypes.oneOfType([MainMenuShape, PropTypes.bool]),
     mediaSizes: MediaSizesShape.isRequired,
-    onSearch: PropTypes.func,
+    // onSearch can be 'false' for the interactive presets
+    onSearch: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
     showTitle: PropTypes.bool.isRequired,
     size: PropTypes.oneOf(Object.values(utahDesignSystemHeader.sizes)),
     title: PropTypes.string.isRequired,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@utahdts/utah-design-system",
   "description": "Utah Design System React Library",
   "displayName": "Utah Design System React Library",
-  "version": "0.8.0",
+  "version": "0.9.5",
   "exports": {
     ".": {
       "development-local": "./index.js",
@@ -60,7 +60,7 @@
   },
   "homepage": "https://github.com/utahdts/utah-design-system",
   "dependencies": {
-    "@utahdts/utah-design-system-header": "0.8.0",
+    "@utahdts/utah-design-system-header": "0.9.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
     "react": "18.x",
@@ -70,22 +70,14 @@
     "uuid": "9.0.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.0",
+    "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
     "@vitejs/plugin-react": "4.0.0",
-    "@vitest/coverage-istanbul": "0.31.0",
-    "eslint": "8.40.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.32.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-react-refresh": "0.4.1",
-    "jsdom": "22.0.0",
+    "@vitest/coverage-istanbul": "0.31.2",
+    "jsdom": "22.1.0",
     "sass": "1.62.1",
-    "vite": "4.3.7",
-    "vite-plugin-eslint": "1.8.1",
-    "vitest": "0.31.0"
+    "vite": "4.3.9",
+    "vitest": "0.31.2"
   },
   "type": "module"
 }

package/react/components/containers/accordion/Accordion.jsx

@@ -7,6 +7,7 @@ const propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   contentClassName: PropTypes.string,
+  headingLevel: PropTypes.number,
   headerClassName: PropTypes.string,
   headerContent: PropTypes.node.isRequired,
   isOpen: PropTypes.bool,
@@ -15,6 +16,7 @@ const propTypes = {
 const defaultProps = {
   className: undefined,
   contentClassName: undefined,
+  headingLevel: 2,
   headerClassName: undefined,
   isOpen: undefined,
   onToggle: undefined,
@@ -24,6 +26,7 @@ function Accordion({
   children,
   className,
   contentClassName,
+  headingLevel,
   headerClassName,
   headerContent,
   isOpen,
@@ -42,15 +45,17 @@ function Accordion({
       setStateIsOpen(!stateIsOpen);
     }
   }
+  const HeadingTag = `h${headingLevel}`;
+
   return (
     <div className={joinClassNames(['accordion', className])}>
       <button
-        className={joinClassNames(['accordion__header', headerClassName])}
+        className={joinClassNames(['accordion__header', headerClassName, stateIsOpen ? 'accordion__header--open' : ''])}
         type="button"
         onClick={handleEvent(toggleAccordion)}
       >
-        {headerContent}
-        <span className={`material-symbols-outlined icon-button__icon ${stateIsOpen ? '' : 'icon-button__icon--rotate180'}`}>expand_circle_down</span>
+        <HeadingTag>{headerContent}</HeadingTag>
+        <span className={`utds-icon-before-circle-chevron-up icon-button__icon ${stateIsOpen ? '' : 'icon-button__icon--rotate180'}`} />
       </button>
 
       <div className={joinClassNames(['accordion__content', contentClassName, stateIsOpen ? 'accordion__content--open' : ''])}>

package/react/components/table/TableCell.jsx

@@ -35,7 +35,6 @@ function TableCell({
       ref={innerRef}
       onClick={onClick}
       onDoubleClick={onDoubleClick}
-      onKeyPress={() => console.log('what should keypress on td do?')}
       role="gridcell"
       {...rest}
     >

package/react/components/table/TableWrapper.jsx

@@ -168,7 +168,7 @@ function TableWrapper({
   );
   return (
     <TableContext.Provider value={contextValue}>
-      <div className={joinClassNames('some-table-wrapper-className', className)} id={id} ref={innerRef} {...rest}>
+      <div className={joinClassNames('table-wrapper', className)} id={id} ref={innerRef} {...rest}>
         {children}
       </div>
     </TableContext.Provider>

package/react/components/table/util/TableContext.jsx

@@ -3,10 +3,14 @@ import { createContext } from 'react';
 const TableContext = createContext({
   allData: [],
   filteredData: [],
+  // eslint-disable-next-line no-console
   registerSortingRule: (sortingRule) => { console.error('Context not yet initialized: registerSortingRule', sortingRule); },
   // unregister a rule for sorting, generally when a <TableSortingRule> unmounts
+  // eslint-disable-next-line no-console
   unregisterSortingRule: (recordFieldPath) => { console.error('Context not yet initialized: unregisterSortingRule', recordFieldPath); },
+  // eslint-disable-next-line no-console
   setBodyDataForComponentGuid: (guid, allData, filteredData) => { console.error('Context not yet initialized: setBodyDataForComponentGuid', guid, allData, filteredData); },
+  // eslint-disable-next-line no-console
   setState: (arg) => { console.error('Context not yet initialized: setState', arg); },
   state: {},
 });

package/react/components/templates/DocumentationTemplate.jsx

@@ -21,11 +21,13 @@ function DocumentationTemplate({
         <div className="documentation-template__side-panel-left">
           {sidePanelLeftContent}
         </div>
-        <main className="documentation-template__content" ref={contentRef}>
-          <Content />
-        </main>
-        <div className="documentation-template__side-panel-right">
-          {sidePanelRightContent}
+        <div className="documentation-template__right-group">
+          <main className="documentation-template__content" ref={contentRef}>
+            <Content />
+          </main>
+          <div className="documentation-template__side-panel-right">
+            {sidePanelRightContent}
+          </div>
         </div>
       </div>
     </div>

package/react/propTypesShapes/header/SettingsShape.js

@@ -18,9 +18,11 @@ export default PropTypes.shape({
   domLocationTarget: DomLocationTargetShape,
   footer: FooterSettingsShape,
   logo: LogoShape,
-  mainMenu: MainMenuShape,
+  // mainMenu can be 'false' for the interactive presets
+  mainMenu: PropTypes.oneOfType([MainMenuShape, PropTypes.bool]),
   mediaSizes: MediaSizesShape.isRequired,
-  onSearch: PropTypes.func,
+  // onSearch can be 'false' for the interactive presets
+  onSearch: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   showTitle: PropTypes.bool.isRequired,
   size: PropTypes.oneOf(Object.values(sizes)),
   title: PropTypes.string.isRequired,