@solexllc/usx 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solexllc/usx",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Compiled USWDS-based component styles for USX.",
   "license": "MIT",
   "repository": {
@@ -32,7 +32,7 @@
     "src"
   ],
   "dependencies": {
-    "@solexllc/usx-theme": "0.2.2"
+    "@solexllc/usx-theme": "0.2.3"
   },
   "devDependencies": {
     "sass": "^1.98.0"

package/src/_utilities.scss

@@ -77,7 +77,7 @@
 }
 
 .usx-circle {
-  border-radius: $usx-radius-full;
+  border-radius: $usx-radius-full !important;
   overflow: clip;
 }
 

package/src/components/_header.scss

@@ -86,9 +86,9 @@
       .usa-nav__inner {
         margin-left: auto;
         margin-right: auto;
-        max-width: calc($max-layout-width + 4rem);
-        padding-left: 2rem;
-        padding-right: 2rem;
+        max-width: usx-when($max-layout-width, $max-layout-width, 64rem);
+        padding-left: units(4);
+        padding-right: units(4);
         position: relative;
 
         // .usa-nav__close (mobile-only) is hidden at this width, and
@@ -140,9 +140,9 @@
 
     .usa-nav__submenu.usa-megamenu {
       left: 0;
-      padding-left: 2rem;
-      padding-right: 2rem;
-      max-width: calc($max-layout-width + 4rem);
+      padding-left: units(4);
+      padding-right: units(4);
+      max-width: usx-when($max-layout-width, $max-layout-width, 64rem);
       margin-left: auto;
       margin-right: auto;
     }
@@ -228,10 +228,7 @@
     }
 
     .usa-nav__inner {
-      @if $max-layout-width {
-        max-width: calc($max-layout-width + 4rem);
-      }
-
+      max-width: usx-when($max-layout-width, $max-layout-width, 64rem);
       margin-left: auto;
       margin-right: auto;
       padding-left: 1rem;

package/src/components/_hero.scss

@@ -36,14 +36,9 @@
     position: relative;
     z-index: 1;
     width: 100%;
-    max-width: $max-layout-width;
+    max-width: usx-when($max-layout-width, $max-layout-width, 64rem);
     margin-inline: auto;
-    padding-block: 4rem;
-    padding-inline: 1.5rem;
-
-    padding-block: usx-when($usx-hero-padding-block);
-
-    padding-inline: usx-when($usx-hero-padding-inline);
+    padding: 0 units(4);
   }
 
   &--has-overlay.usx-hero--custom-overlay::before {
@@ -54,7 +49,7 @@
     min-width: 0;
     overflow-wrap: anywhere;
     max-width: 40rem;
-    padding: 2rem;
+    padding: units(4);
     background-color: rgb(0 0 0 / 90%);
 
     // Radius follows the app-wide radius-box group (null/square by default,
@@ -85,7 +80,7 @@
 
   &__secondary {
     min-width: 0;
-    margin-top: 2rem;
+    margin-top: units(4);
     overflow-wrap: anywhere;
   }
 

package/src/components/_layout.scss

@@ -2,18 +2,80 @@
 
 /* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
 .usx-layout {
+  position: relative;
   min-height: 100vh;
 
   background-color: usx-when($usx-surface-1);
 
+  &.usx-expanded {
+    .usx-layout__single-column,
+    .usx-layout__content {
+      max-width: 1600px;
+    }
+
+    .usx-layout__grid-container {
+      grid-template-columns:
+        [page-start] units(2) [left-sidebar-start] 0 [content-start] minmax(0, 1600px) [content-end] 0 [right-sidebar-end] units(2) [page-end];
+
+      @include at-media('tablet') {
+        grid-template-columns:
+          [page-start] units(4) [left-sidebar-start] 0 [content-start] minmax(0, 1600px) [content-end] 0 [right-sidebar-end] units(4) [page-end];
+      }
+
+      @include at-media('desktop') {
+        grid-template-columns:
+          [page-start] 1fr [left-sidebar-start] $max-sidebar-width [content-start] minmax(0, 1600px) [content-end] $max-sidebar-width [right-sidebar-end] 1fr [page-end];
+      }
+    }
+  }
+
+  &__expand-button {
+    display: none;
+    position: absolute;
+    right: calc(0px - units(4));
+    top: 0;
+    width: units(5);
+    height: units(5);
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    color: usx-when($usx-color-primary, #005ea2);
+
+    // Below this width there's no room to grow into, so hide the toggle.
+    @include at-media('desktop') {
+      display: flex;
+    }
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }
+
+  &__expand-icon--contract {
+    display: none;
+  }
+
+  &.usx-expanded &__expand-icon--expand {
+    display: none;
+  }
+
+  &.usx-expanded &__expand-icon--contract {
+    display: block;
+  }
+
   // ── Single column layout ──────────────────────────────────────────────────
   // Centers content with max-width and responsive gutters
   // | gutter | content (max-width 960px) | gutter |
 
   &__single-column {
-    max-width: calc($max-layout-width + units(4));
+    max-width: usx-when($max-layout-width, $max-layout-width, 64rem);
     margin: 0 auto;
-    padding: 0 units(2);
+    padding: 0 units(4);
+    position: relative;
   }
 
   // ── Multi-column grid layout ──────────────────────────────────────────────
@@ -21,28 +83,35 @@
   // | gutter | left sidebar | content | right sidebar | gutter |
 
   &__grid-container {
+    position: relative;
     display: grid;
     grid-template-rows: auto;
     grid-template-columns:
-      [page-start] units(2) [left-sidebar-start] 0 [content-start] minmax(0, $max-layout-width) [content-end] 0 [right-sidebar-end] units(2) [page-end];
+      [page-start] units(2) [left-sidebar-start] 0 [content-start] minmax(0, usx-when($max-layout-width, $max-layout-width, 64rem)) [content-end] 0 [right-sidebar-end] units(2) [page-end];
 
     @include at-media('tablet') {
       grid-template-columns:
-        [page-start] units(4) [left-sidebar-start] 0 [content-start] minmax(0, $max-layout-width) [content-end] 0 [right-sidebar-end] units(4) [page-end];
+        [page-start] units(4) [left-sidebar-start] 0 [content-start] minmax(0, usx-when($max-layout-width, $max-layout-width, 64rem)) [content-end] 0 [right-sidebar-end] units(4) [page-end];
     }
 
     @include at-media('desktop') {
       grid-template-columns:
-        [page-start] 1fr [left-sidebar-start] $max-sidebar-width [content-start] minmax(0, $max-layout-width) [content-end] $max-sidebar-width [right-sidebar-end] 1fr [page-end];
+        [page-start] 1fr [left-sidebar-start] $max-sidebar-width [content-start] minmax(0, usx-when($max-layout-width, $max-layout-width, 64rem)) [content-end] $max-sidebar-width [right-sidebar-end] 1fr [page-end];
     }
   }
 
   // ── Content areas ─────────────────────────────────────────────────────────
 
   &__content {
+    position: relative;
     grid-column: content-start / span content-end;
     grid-row: 1;
-    max-width: calc($max-layout-width + units(4));
+    max-width: usx-when($max-layout-width, $max-layout-width, 64rem);
+    padding: 0 units(4);
+
+    .usx-layout__expand-button {
+      top: units(3);
+    }
 
 
     // Content that leaves space for a left sidebar
@@ -65,10 +134,17 @@
 
       @include at-media('desktop') {
         grid-column: left-sidebar-start / span content-end;
-        justify-self: flex-end;
+        width: 100%;
+        justify-self: end;
         padding-left: units(4);
       }
     }
+
+    &:not(&--right) {
+      .usx-layout__expand-button {
+        right: units(4);
+      }
+    }
   }
 
   // ── Sidebar areas ─────────────────────────────────────────────────────────
@@ -77,19 +153,20 @@
     grid-column: left-sidebar-start / span content-start;
     grid-row: 1;
     height: 100%;
+    padding: 0 0 0 units(4);
   }
 
   &__sidebar--right {
     grid-column: content-end / span right-sidebar-end;
     grid-row: 1;
     height: 100%;
+    padding: 0 units(4) 0 0;
   }
 
   // Hide sidebars on mobile/tablet, show on desktop
   &__sidebar--right,
   &__sidebar--left {
     display: none;
-    padding: 0 units(4);
 
     @include at-media('desktop') {
       display: block;

package/src/components/_misc-banner.scss

@@ -50,7 +50,7 @@
     .usx-misc-banner__return-text {
       margin: 0;
       position: relative;
-      padding-left: 2rem;
+      padding-left: units(4);
       display: none;
       margin-left: auto;
 

package/src/components/_modal.scss

@@ -26,7 +26,7 @@
     }
 
     .usa-modal__main {
-      padding: 2rem;
+      padding: units(4);
       padding-top: 0;
       width: 100%;
       max-width: 100%;

package/src/components/_page.scss

@@ -2,8 +2,8 @@
 
 /* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
 .usx-page {
-  margin-top: 2rem;
-  margin-bottom: 4rem;
+  margin-top: units(4);
+  margin-bottom: units(8);
 
   background-color: usx-when($usx-page-bg);
 
@@ -18,7 +18,7 @@
     display: block;
 
     p {
-      max-width: 64ex;
+      max-width: usx-when($max-layout-width, $max-layout-width, 64rem);
     }
   }
 }

package/src/components/_pagination.scss

@@ -166,12 +166,12 @@
     display: flex;
 
     .usa-pagination__link {
-      padding: .5rem;
+      padding: units(1);
       margin: 0;
 
       .usa-icon {
-        height: 2rem;
-        width: 2rem;
+        height: units(4);
+        width: units(4);
       }
     }
   }

package/src/components/_section.scss

@@ -2,7 +2,7 @@
 
 /* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
 .usx-section {
-  margin: 2rem 0;
+  margin: units(4) 0;
 
   background-color: usx-when($usx-section-bg);
 

package/src/components/_sidenav.scss

@@ -3,7 +3,7 @@
 /* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
 .usx-layout {
   .usx-sidenav {
-    margin-top: 2rem;
+    margin-top: units(4);
   }
 }
 
@@ -14,7 +14,7 @@
 
   &.usx-sidenav--sticky {
     position: sticky;
-    top: 2rem;
+    top: units(4);
   }
 
   .usa-sidenav__item {

package/src/components/_table.scss

@@ -266,7 +266,7 @@
   // ── Placeholder ───────────────────────────────────────────────────────────────
   .usx-table__placeholder-cell {
     text-align: center;
-    padding: 2rem 1rem;
+    padding: units(4) units(2);
     font-style: italic;
 
     color: usx-when($usx-table-placeholder-text);

package/src/icons/contract.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="11.1664 10.5 24.0006 24.0039" width="24" height="24">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M20.9401 16.9421V10.5H17.6068V16.9421H11.1664V20.2754H20.9401V20.2716V16.9421ZM20.9401 28.0618V34.5039H17.6068V28.0618H11.1664V24.7285H20.9401V24.7323V28.0618ZM25.3933 10.5V16.9421V20.2716V20.2754H35.167V16.9421H28.7266V10.5H25.3933ZM25.3933 28.0618V34.5039H28.7266V28.0618H35.167V24.7285H25.3933V24.7323V28.0618Z" />
+</svg>

package/src/icons/expand.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="10.5 10.5 24 24" width="24" height="24">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M10.5 13.8333V20.2754H13.8333L13.8333 13.8333H20.2738V10.5H10.5V10.5038V13.8333ZM10.5 31.1706V24.7285H13.8333L13.8333 31.1706H20.2738V34.5039H10.5V34.5002V31.1706ZM34.5 20.2754V13.8333V10.5038V10.5H24.7262V13.8333H31.1667L31.1667 20.2754H34.5ZM34.5 31.1706V24.7285H31.1667L31.1667 31.1706H24.7262V34.5039H34.5V34.5002V31.1706Z" />
+</svg>

package/src/img/usx-icons.json

@@ -1,5 +1,7 @@
 {
   "items": [
-    { "name": "spinner", "meta": "loading spin progress busy wait" }
+    { "name": "spinner", "meta": "loading spin progress busy wait" },
+    { "name": "expand", "meta": "expand enlarge widen maximize" },
+    { "name": "contract", "meta": "contract shrink narrow minimize collapse" }
   ]
 }

package/src/img/usx-sprite.svg

@@ -7,6 +7,12 @@
     search.
     Reference icons with: <use href="./img/usx-sprite.svg#icon-name" />
   -->
+  <symbol id="contract" viewBox="11.1664 10.5 24.0006 24.0039">
+    <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M20.9401 16.9421V10.5H17.6068V16.9421H11.1664V20.2754H20.9401V20.2716V16.9421ZM20.9401 28.0618V34.5039H17.6068V28.0618H11.1664V24.7285H20.9401V24.7323V28.0618ZM25.3933 10.5V16.9421V20.2716V20.2754H35.167V16.9421H28.7266V10.5H25.3933ZM25.3933 28.0618V34.5039H28.7266V28.0618H35.167V24.7285H25.3933V24.7323V28.0618Z" />
+  </symbol>
+  <symbol id="expand" viewBox="10.5 10.5 24 24">
+    <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M10.5 13.8333V20.2754H13.8333L13.8333 13.8333H20.2738V10.5H10.5V10.5038V13.8333ZM10.5 31.1706V24.7285H13.8333L13.8333 31.1706H20.2738V34.5039H10.5V34.5002V31.1706ZM34.5 20.2754V13.8333V10.5038V10.5H24.7262V13.8333H31.1667L31.1667 20.2754H34.5ZM34.5 31.1706V24.7285H31.1667L31.1667 31.1706H24.7262V34.5039H34.5V34.5002V31.1706Z" />
+  </symbol>
   <symbol id="spinner" viewBox="0 0 24 24">
     <!-- Track: full circle at low opacity -->
     <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.2" />