@pnx-mixtape/mxds 0.0.24 → 0.0.27

package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap

@@ -1,64 +1,5 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Layout/Footer Default smoke-test 1`] = `
-<footer class="mx-footer mx-section--top-l mx-section--bottom-m">
-  <div class="mx-footer__inner">
-    <span class="mx-footer__copyright mx-text--s">
-      © 2022 Company Name
-    </span>
-    <nav class="mx-nav mx-nav--inline mx-footer__links mx-text--s"
-         aria-label="Footer subsidiary links"
-    >
-      <ul>
-        <li class>
-          <a href="http://example.com"
-             class
-          >
-            Sitemap
-          </a>
-        </li>
-        <li class>
-          <a href="http://example.com"
-             class
-          >
-            Privacy &amp; Terms
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</footer>
-`;
+exports[`Default 1`] = `"<footer class="mx-footer mx-section--top-l mx-section--bottom-m"><div class="mx-footer__inner"><span class="mx-footer__copyright mx-text--s">© 2022 Company Name</span><nav class="mx-nav mx-nav--inline mx-footer__links mx-text--s" aria-label="Footer subsidiary links"><ul><li class=""><a href="http://example.com" class="">Sitemap</a></li><li class=""><a href="http://example.com" class="">Privacy &amp; Terms</a></li></ul></nav></div></footer>"`;
 
-exports[`Layout/Footer WithChildren smoke-test 1`] = `
-<footer class="mx-footer mx-section--top-l mx-section--bottom-m">
-  <div class="mx-footer__inner">
-    <div class="mx-footer__aoc mx-text--s">
-      Ullamcorper lobortis aliquam nulla nisl adipiscing cras fermentum dictumst netus felis semper elit adipiscing cum montes varius condimentum scelerisque condimentum diam a.
-    </div>
-    <span class="mx-footer__copyright mx-text--s">
-      © 2022 Company Name
-    </span>
-    <nav class="mx-nav mx-nav--inline mx-footer__links mx-text--s"
-         aria-label="Footer subsidiary links"
-    >
-      <ul>
-        <li class>
-          <a href="http://example.com"
-             class
-          >
-            Sitemap
-          </a>
-        </li>
-        <li class>
-          <a href="http://example.com"
-             class
-          >
-            Privacy &amp; Terms
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</footer>
-`;
+exports[`With Children 1`] = `"<footer class="mx-footer mx-section--top-l mx-section--bottom-m"><div class="mx-footer__inner"><div class="mx-footer__aoc mx-text--s">Ullamcorper lobortis aliquam nulla nisl adipiscing cras fermentum dictumst netus felis semper elit adipiscing cum montes varius condimentum scelerisque condimentum diam a.</div><span class="mx-footer__copyright mx-text--s">© 2022 Company Name</span><nav class="mx-nav mx-nav--inline mx-footer__links mx-text--s" aria-label="Footer subsidiary links"><ul><li class=""><a href="http://example.com" class="">Sitemap</a></li><li class=""><a href="http://example.com" class="">Privacy &amp; Terms</a></li></ul></nav></div></footer>"`;

package/src/Layout/Footer/footer.css

@@ -10,29 +10,30 @@
 
   .mx-footer__inner {
     display: grid;
-    grid-template-areas: "brand" "social" "navigation" "copyright" "links";
+    grid-template-areas: "navigation" "social" "copyright" "links";
+    gap: var(--gap);
 
     @media (--medium-up) {
-      grid-template-areas: "brand navigation" "social navigation" "copyright links";
-      gap: 0;
+      grid-template-areas: "navigation social" "copyright links";
+      grid-template-columns: 1fr max-content;
     }
 
     &:has(.mx-footer__aoc) {
-      grid-template-areas: "aoc" "brand" "social" "navigation" "copyright" "links";
+      grid-template-areas: "navigation" "social" "aoc" "copyright" "links";
 
       @media (--medium-up) {
-        grid-template-areas: "aoc aoc" "brand navigation" "social navigation" "copyright links";
+        grid-template-areas: "navigation social" "aoc aoc" "copyright links";
       }
     }
 
-    & .mx-logo {
-      grid-area: brand;
-      margin-block-end: var(--gap);
+    & .mx-logo,
+    img {
+      grid-area: copyright;
     }
 
     & .mx-social-links {
       grid-area: social;
-      align-self: end;
+      align-self: start;
       display: flex;
       gap: var(--spacing-xxxs);
     }
@@ -40,17 +41,6 @@
     & .mx-footer__copyright {
       grid-area: copyright;
       align-self: end;
-
-      &:not(:first-child) {
-        padding-block-start: var(--spacing-s);
-        margin-block-start: var(--gap);
-
-        & + .mx-footer__links {
-          @media (--medium-up) {
-            padding-block-start: var(--spacing-s);
-          }
-        }
-      }
     }
 
     & .mx-footer__links {
@@ -60,28 +50,16 @@
       @media (--medium-up) {
         justify-content: end;
       }
-
-      &:not(:first-child) {
-        margin-block-start: var(--gap);
-      }
     }
   }
 
   .mx-footer__aoc {
     grid-area: aoc;
-    padding-block-end: var(--footer-row-gap, var(--spacing-xxl));
-    margin-block-end: var(--gap);
-    text-align: center;
+    padding-block: var(--footer-row-gap, var(--spacing-xxl));
   }
 
   .mx-nav--footer {
     grid-area: navigation;
-    margin-block: var(--spacing-xxxl) var(--spacing-l);
-
-    @media (--medium-up) {
-      justify-self: end;
-      margin-block: 0;
-    }
 
     &:not(:has(.mx-nav__level-2)) ul {
       flex-flow: row wrap;
@@ -95,11 +73,14 @@
       }
 
       & .mx-nav__level-1 {
+        --grid-repeat: 2;
+        --grid-min: 10ch;
+
         gap: var(--spacing-l) var(--spacing-xxxl);
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(var(--grid-repeat), minmax(min(100%, var(--grid-min)), 1fr));
 
         @media (--medium-up) {
-          grid-template-columns: 1fr 1fr 1fr;
+          --grid-repeat: auto-fit;
         }
 
         & > li > a {

package/src/Layout/Footer/footer.twig

@@ -1,20 +1,20 @@
 {% set baseClass = 'mx-footer' %}
 {% set classes = [
   baseClass,
-  'mx-section--top-l',
-  'mx-section--bottom-m',
+  'mx-section--l',
   background == "light" ? 'mx-background--alt' : 'mx-background--reverse',
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <footer{{ attributes }}>
   <div class="mx-footer__inner">
-  {% if aoc is not empty %}
-    <div class="mx-footer__aoc mx-text--s">{{ aoc }}</div>
-  {% endif %}
 
   {{ logo }}
-  {{ socials }}
   {{ navigation }}
+  {{ socials }}
+
+  {% if aoc is not empty %}
+    <div class="mx-footer__aoc">{{ aoc }}</div>
+  {% endif %}
 
   {% if copyright is not empty %}
     <span class="mx-footer__copyright mx-text--s">{{ copyright }}</span>

package/src/Layout/Grid/Grid.stories.tsx

@@ -2,6 +2,7 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Grid"
 import { AsTypes, GridModifiers, SectionTypes } from "@pnx-mixtape/ids-shape"
+import { Page } from "../../../.storybook-react/decorators"
 
 const Grid = ({ children, ...args }) => (
   <Component wrapper {...args}>
@@ -15,6 +16,7 @@ const Grid = ({ children, ...args }) => (
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
+  decorators: [Page],
   component: Component,
   render: Grid,
   argTypes: {

package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap

@@ -1,77 +1,83 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Layout/Grid Breakpoints smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-lg-4">
-    <span>
-      item 1
-    </span>
-    <span>
-      item 2
-    </span>
-    <span>
-      item 3
-    </span>
-    <span>
-      item 4
-    </span>
-    <span>
-      item 5
-    </span>
-    <span>
-      item 6
-    </span>
-  </div>
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Breakpoints 1`] = `
+"    
+<div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-lg-4">
+  
+  <span>item 1</span>
+
+  
+  <span>item 2</span>
+
+  
+  <span>item 3</span>
+
+  
+  <span>item 4</span>
+
+  
+  <span>item 5</span>
+
+  
+  <span>item 6</span>
+
 </div>
+"
 `;
 
-exports[`Layout/Grid Grid smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-grid">
-    <span>
-      item 1
-    </span>
-    <span>
-      item 2
-    </span>
-    <span>
-      item 3
-    </span>
-    <span>
-      item 4
-    </span>
-    <span>
-      item 5
-    </span>
-    <span>
-      item 6
-    </span>
-  </div>
+exports[`Grid 1`] = `
+"
+<div class="mx-grid">
+  
+  <span>item 1</span>
+
+  
+  <span>item 2</span>
+
+  
+  <span>item 3</span>
+
+  
+  <span>item 4</span>
+
+  
+  <span>item 5</span>
+
+  
+  <span>item 6</span>
+
 </div>
+"
 `;
 
-exports[`Layout/Grid List smoke-test 1`] = `
-<div class="mx-page default">
-  <ul class="mx-grid mx-grid--cols-sm-2">
-    <li>
-      list item 1
-    </li>
-    <li>
-      list item 2
-    </li>
-  </ul>
-</div>
+exports[`List 1`] = `
+"  
+<ul class="mx-grid mx-grid--cols-sm-2">
+  
+  <li>
+    list item 1
+  </li>
+
+  
+  <li>
+    list item 2
+  </li>
+
+</ul>
+"
 `;
 
-exports[`Layout/Grid Span smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-md-3">
-    <span>
-      item 1
-    </span>
-    <div class="mx-grid-item__span-md-2">
-      item 2, span 2
-    </div>
+exports[`Span 1`] = `
+"    
+<div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-md-3">
+  
+  <span>item 1</span>
+
+    
+  <div class="mx-grid-item__span-md-2">
+    item 2, span 2
   </div>
+
 </div>
+"
 `;

package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap

@@ -1,67 +1,11 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Layout/Grid Breakpoints smoke-test 1`] = `
-<div class="mx-grid mx-grid--cols-md-2 mx-grid--cols-lg-4">
-  <div class>
-    1
-  </div>
-  <div class>
-    2
-  </div>
-  <div class>
-    3
-  </div>
-  <div class>
-    4
-  </div>
-</div>
-`;
+exports[`Breakpoints 1`] = `"<div class="mx-grid mx-grid--cols-md-2 mx-grid--cols-lg-4"><div class="">1</div><div class="">2</div><div class="">3</div><div class="">4</div></div>"`;
 
-exports[`Layout/Grid Container smoke-test 1`] = `
-<div class="mx-container">
-  <div class="mx-grid">
-    <div class>
-      1
-    </div>
-    <div class>
-      2
-    </div>
-  </div>
-</div>
-`;
+exports[`Container 1`] = `"<div class="mx-container"><div class="mx-grid"><div class="">1</div><div class="">2</div></div></div>"`;
 
-exports[`Layout/Grid Dynamic smoke-test 1`] = `
-<div class="mx-grid">
-  <div class>
-    1
-  </div>
-  <div class>
-    2
-  </div>
-  <div class>
-    3
-  </div>
-</div>
-`;
+exports[`Dynamic 1`] = `"<div class="mx-grid"><div class="">1</div><div class="">2</div><div class="">3</div></div>"`;
 
-exports[`Layout/Grid Fixed smoke-test 1`] = `
-<div class="mx-grid mx-grid--cols-md-3">
-  <div class="mx-grid-item__span-md-2">
-    1
-  </div>
-  <div class>
-    2
-  </div>
-</div>
-`;
+exports[`Fixed 1`] = `"<div class="mx-grid mx-grid--cols-md-3"><div class="mx-grid-item__span-md-2">1</div><div class="">2</div></div>"`;
 
-exports[`Layout/Grid List smoke-test 1`] = `
-<ul class="mx-grid mx-grid--cols-md-3">
-  <li class="mx-grid-item__span-md-2">
-    1
-  </li>
-  <li class>
-    2
-  </li>
-</ul>
-`;
+exports[`List 1`] = `"<ul class="mx-grid mx-grid--cols-md-3"><li class="mx-grid-item__span-md-2">1</li><li class="">2</li></ul>"`;

package/src/Layout/Grid/__snapshots__/GridItem.stories.ts.snap

@@ -1,19 +1,15 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Layout/Grid/GridItem Breakpoints smoke-test 1`] = `
-<div class="mx-page default">
+exports[`Breakpoints 1`] = `
+"    
   <div class="mx-grid-item__span-sm-2 mx-grid-item__span-lg-4">
-    <span>
-      item 1
-    </span>
+    <span>item 1</span>
   </div>
-</div>
+"
 `;
 
-exports[`Layout/Grid/GridItem GridItem smoke-test 1`] = `
-<div class="mx-page default">
-  <span>
-    item 1
-  </span>
-</div>
+exports[`Grid Item 1`] = `
+"
+  <span>item 1</span>
+"
 `;

package/src/Layout/Header/Header.stories.tsx

@@ -2,9 +2,10 @@ import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Header"
 import { mixtapeLogo, navigationItems } from "../../../mockups/constants"
 import "./header.css"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
-  title: "Layout/Header",
+  decorators: [Page],
   component: Component,
   args: {
     logo: mixtapeLogo,