@pnx-mixtape/mxds 0.0.23 → 0.0.26

package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap

@@ -1,91 +1,56 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Layout/Section/Flow Flow smoke-test 1`] = `
-<div class="mx-page default">
-  <section class="mx-section--flow">
-    <p>
-      first section has top and bottom spacing
-    </p>
-  </section>
-  <section class="mx-section--flow">
-    <p>
-      section with normal flow
-    </p>
-  </section>
-  <section class="mx-section--flow">
-    <p>
-      section with normal flow
-    </p>
-  </section>
-  <section class="mx-section--group mx-background--alt">
-    <p>
-      certain sections can be
-    </p>
-  </section>
-  <section class="mx-section--group mx-background--alt">
-    <p>
-      grouped togther as siblings
-    </p>
-  </section>
-  <section class="mx-section--group mx-background--alt">
-    <p>
-      with their own spacing rules
-    </p>
-  </section>
-  <section class="mx-section--flow">
-    <p>
-      section on it's own has top and bottom spacing
-    </p>
-  </section>
-  <section class="mx-section--group mx-background--alt">
-    <p>
-      groups can be combined with flow
-    </p>
-  </section>
-  <section class="mx-section--flow mx-section--group mx-background--alt">
-    <p>
-      for standard spacing
-    </p>
-  </section>
-  <section class="mx-section--flow">
-    <p>
-      section after group own has top and bottom spacing
-    </p>
-  </section>
-  <section class="mx-section--flow">
-    <p>
-      section with normal flow
-    </p>
-  </section>
-  <section class="mx-section--flow mx-background--alt">
-    <p>
-      section with background that breaks the flow, also has top and bottom spacing
-    </p>
-  </section>
-  <section class="mx-section--flow">
-    <p>
-      section after background own has top and bottom spacing
-    </p>
-  </section>
-  <section class="mx-section--flow">
-    <p>
-      section with normal flow
-    </p>
-  </section>
-  <section class="mx-section--group">
-    <p>
-      groups can be used normally for larger spacing
-    </p>
-  </section>
-  <section class="mx-section--group mx-background--alt">
-    <p>
-      adding a background breaks the grouping
-    </p>
-  </section>
-  <section class="mx-section--group mx-background--alt">
-    <p>
-      into a new group
-    </p>
-  </section>
-</div>
+exports[`Flow 1`] = `
+"<section class="mx-section--flow">
+  <p>first section has top and bottom spacing</p>
+</section>
+<section class="mx-section--flow">
+  <p>section with normal flow</p>
+</section>
+<section class="mx-section--flow">
+  <p>section with normal flow</p>
+</section>
+<section class="mx-section--group mx-background--alt">
+  <p>certain sections can be</p>
+</section>
+<section class="mx-section--group mx-background--alt">
+  <p>grouped togther as siblings</p>
+</section>
+<section class="mx-section--group mx-background--alt">
+  <p>with their own spacing rules</p>
+</section>
+<section class="mx-section--flow">
+  <p>section on it's own has top and bottom spacing</p>
+</section>
+<section class="mx-section--group mx-background--alt">
+  <p>groups can be combined with flow</p>
+</section>
+<section class="mx-section--flow mx-section--group mx-background--alt">
+  <p>for standard spacing</p>
+</section>
+<section class="mx-section--flow">
+  <p>section after group own has top and bottom spacing</p>
+</section>
+<section class="mx-section--flow">
+  <p>section with normal flow</p>
+</section>
+<section class="mx-section--flow mx-background--alt">
+  <p>section with background that breaks the flow, also has top and bottom spacing</p>
+</section>
+<section class="mx-section--flow">
+  <p>section after background own has top and bottom spacing</p>
+</section>
+<section class="mx-section--flow">
+  <p>section with normal flow</p>
+</section>
+<section class="mx-section--group">
+  <p>groups can be used normally for larger spacing</p>
+</section>
+<section class="mx-section--group mx-background--alt">
+  <p>adding a background breaks the grouping</p>
+</section>
+<section class="mx-section--group mx-background--alt">
+  <p>into a new group</p>
+</section>
+"
 `;

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

@@ -1,117 +1,107 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Layout/Section Background smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-background--primary mx-section--xl">
-    <div class="mx-container">
-      <div class="mx-section__header">
-        <h2>
-          Section name
-        </h2>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            See more content
-          </span>
-          <span class="mx-icon mx-icon--arrow-right">
-          </span>
-        </a>
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Background 1`] = `
+"    
+<div class="mx-background--primary mx-section--xl">
+      <div class="mx-container">
+            <div class="mx-section__header">
+      
+<h2>Section name</h2>
+
+        
+<a class="mx-link--more" href="#">
+  
+  <span>See more content</span>
+    
+<span class="mx-icon mx-icon--arrow-right"></span>
+
+</a>
+
+      </div>
+        <p class="mx-text--lede">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p>
       </div>
-      <p class="mx-text--lede">
-        A short description to help explain enough about the subject matter to encourage visitors to learn more.
-      </p>
-    </div>
   </div>
-</div>
+"
 `;
 
-exports[`Layout/Section Box smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-background--box mx-section--xl">
-    <div class="mx-container">
-      <div class="mx-section__header">
-        <h2>
-          Section name
-        </h2>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            See more content
-          </span>
-          <span class="mx-icon mx-icon--arrow-right">
-          </span>
-        </a>
+exports[`Box 1`] = `
+"    
+<div class="mx-background--box mx-section--xl">
+      <div class="mx-container">
+            <div class="mx-section__header">
+      
+<h2>Section name</h2>
+
+        
+<a class="mx-link--more" href="#">
+  
+  <span>See more content</span>
+    
+<span class="mx-icon mx-icon--arrow-right"></span>
+
+</a>
+
+      </div>
+        <p class="mx-text--lede">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p>
       </div>
-      <p class="mx-text--lede">
-        A short description to help explain enough about the subject matter to encourage visitors to learn more.
-      </p>
-    </div>
   </div>
-</div>
+"
 `;
 
-exports[`Layout/Section Header smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-section--xl">
-    <div class="mx-container">
-      <p class="mx-text--lede">
-        A short description to help explain enough about the subject matter to encourage visitors to learn more.
-      </p>
-    </div>
+exports[`Header 1`] = `
+"    
+<div class="mx-section--xl">
+      <div class="mx-container">
+          <p class="mx-text--lede">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p>
+      </div>
   </div>
-</div>
+"
 `;
 
-exports[`Layout/Section Modifiers smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-section--top-s mx-section--bottom-xl">
-    <div class="mx-container">
-      <div class="mx-section__header">
-        <h2>
-          Section name
-        </h2>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            See more content
-          </span>
-          <span class="mx-icon mx-icon--arrow-right">
-          </span>
-        </a>
+exports[`Modifiers 1`] = `
+"        
+<div class="mx-section--top-s mx-section--bottom-xl">
+      <div class="mx-container">
+            <div class="mx-section__header">
+      
+<h2>Section name</h2>
+
+        
+<a class="mx-link--more" href="#">
+  
+  <span>See more content</span>
+    
+<span class="mx-icon mx-icon--arrow-right"></span>
+
+</a>
+
+      </div>
+        <p class="mx-text--lede">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p>
       </div>
-      <p class="mx-text--lede">
-        A short description to help explain enough about the subject matter to encourage visitors to learn more.
-      </p>
-    </div>
   </div>
-</div>
+"
 `;
 
-exports[`Layout/Section Section smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-section--xl">
-    <div class="mx-container">
-      <div class="mx-section__header">
-        <h2>
-          Section name
-        </h2>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            See more content
-          </span>
-          <span class="mx-icon mx-icon--arrow-right">
-          </span>
-        </a>
+exports[`Section 1`] = `
+"    
+<div class="mx-section--xl">
+      <div class="mx-container">
+            <div class="mx-section__header">
+      
+<h2>Section name</h2>
+
+        
+<a class="mx-link--more" href="#">
+  
+  <span>See more content</span>
+    
+<span class="mx-icon mx-icon--arrow-right"></span>
+
+</a>
+
+      </div>
+        <p class="mx-text--lede">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p>
       </div>
-      <p class="mx-text--lede">
-        A short description to help explain enough about the subject matter to encourage visitors to learn more.
-      </p>
-    </div>
   </div>
-</div>
+"
 `;

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

@@ -1,37 +1,7 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Layout/Section Default smoke-test 1`] = `
-<div class="mx-page undefined">
-  <div class="mx-page mx-section--xl mx-page--feature">
-    <p>
-      Some content
-    </p>
-  </div>
-</div>
-`;
+exports[`Default 1`] = `"<div class="mx-page mx-section--xl mx-page--feature"><p>Some content</p></div>"`;
 
-exports[`Layout/Section List smoke-test 1`] = `
-<div class="mx-page undefined">
-  <ul class="mx-page mx-section--s">
-    <li>
-      Item 1
-    </li>
-    <li>
-      Item 2
-    </li>
-    <li>
-      Item 3
-    </li>
-  </ul>
-</div>
-`;
+exports[`List 1`] = `"<ul class="mx-page mx-section--s"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>"`;
 
-exports[`Layout/Section Varied smoke-test 1`] = `
-<div class="mx-page undefined">
-  <aside class="mx-page mx-section--top-m mx-section--bottom-xl">
-    <p>
-      Some content
-    </p>
-  </aside>
-</div>
-`;
+exports[`Varied 1`] = `"<aside class="mx-page mx-section--top-m mx-section--bottom-xl"><p>Some content</p></aside>"`;

package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap

@@ -1,37 +1,5 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Layout/Section/SectionGrid List smoke-test 1`] = `
-<div class="mx-page undefined">
-  <div class="mx-section--xl">
-    <ul class="mx-grid mx-container">
-      <li>
-        Item 1
-      </li>
-      <li>
-        Item 2
-      </li>
-      <li>
-        Item 3
-      </li>
-    </ul>
-  </div>
-</div>
-`;
+exports[`List 1`] = `"<div class="mx-section--xl"><ul class="mx-grid mx-container"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div>"`;
 
-exports[`Layout/Section/SectionGrid SectionGrid smoke-test 1`] = `
-<div class="mx-page undefined">
-  <div class="mx-section--xl">
-    <div class="mx-grid">
-      <div>
-        Item 1
-      </div>
-      <div>
-        Item 2
-      </div>
-      <div>
-        Item 3
-      </div>
-    </div>
-  </div>
-</div>
-`;
+exports[`Section Grid 1`] = `"<div class="mx-section--xl"><div class="mx-grid"><div>Item 1</div><div>Item 2</div><div>Item 3</div></div></div>"`;

package/src/Layout/Section/section.twig

@@ -7,7 +7,7 @@
 {% endfor %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
-<{{ as}}{{ attributes }}>
+<{{ as|default('div') }}{{ attributes }}>
   {% if container %}
     <div class="mx-container">
   {% endif %}
@@ -21,4 +21,4 @@
   {% if container %}
     </div>
   {% endif %}
-</{{ as}}>
+</{{ as|default('div') }}>

package/src/Layout/Sidebar/Sidebar.stories.tsx

@@ -7,6 +7,7 @@ import "./sidebar.css"
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
+  decorators: [Page],
   args: {
     sidebar: <p>Sidebar content</p>,
     children: <p>Main content</p>,
@@ -14,7 +15,6 @@ const meta: Meta<typeof Component> = {
   argTypes: {
     order: { options: Object.values(SidebarOrder), control: "select" },
   },
-  decorators: [Page],
 }
 
 export default meta

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

@@ -1,63 +1,72 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Layout/Sidebar NoSidebar smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-grid--sidebar">
-    <section>
-      Main content
-    </section>
+exports[`No Sidebar 1`] = `
+"
+
+<div class="mx-grid--sidebar">
+    <section class="js-content mx-vertical-flow-grid">
+    Main content
+  </section>
   </div>
-</div>
+"
 `;
 
-exports[`Layout/Sidebar ReverseLarge smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-grid--sidebar mx-grid--sidebar-rev-lg">
-    <section>
-      Main content
-    </section>
-    <aside>
+exports[`Reverse Large 1`] = `
+"
+  
+<div class="mx-grid--sidebar mx-grid--sidebar-rev-lg">
+    <section class="js-content mx-vertical-flow-grid">
+    Main content
+  </section>
+          <aside class="mx-vertical-flow-grid">
       Sidebar content
     </aside>
+  
   </div>
-</div>
+"
 `;
 
-exports[`Layout/Sidebar RevserseMedium smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-grid--sidebar mx-grid--sidebar-rev">
-    <section>
-      Main content
-    </section>
-    <aside>
+exports[`Revserse Medium 1`] = `
+"
+  
+<div class="mx-grid--sidebar mx-grid--sidebar-rev">
+    <section class="js-content mx-vertical-flow-grid">
+    Main content
+  </section>
+          <aside class="mx-vertical-flow-grid">
       Sidebar content
     </aside>
+  
   </div>
-</div>
+"
 `;
 
-exports[`Layout/Sidebar Sidebar smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-grid--sidebar">
-    <section>
-      Main content
-    </section>
-    <aside>
+exports[`Sidebar 1`] = `
+"
+  
+<div class="mx-grid--sidebar">
+    <section class="js-content mx-vertical-flow-grid">
+    Main content
+  </section>
+          <aside class="mx-vertical-flow-grid">
       Sidebar content
     </aside>
+  
   </div>
-</div>
+"
 `;
 
-exports[`Layout/Sidebar SidebarFirst smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-grid--sidebar">
-    <aside>
+exports[`Sidebar First 1`] = `
+"
+  
+<div class="mx-grid--sidebar">
+          <aside class="mx-vertical-flow-grid">
       Sidebar content
     </aside>
-    <section>
-      Main content
-    </section>
+  
+    <section class="js-content mx-vertical-flow-grid">
+    Main content
+  </section>
   </div>
-</div>
+"
 `;

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

@@ -1,47 +1,7 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Layout/Sidebar NoSidebar smoke-test 1`] = `
-<div class="mx-page undefined">
-  <div class="mx-grid--sidebar">
-    <section>
-      <p>
-        Main content
-      </p>
-    </section>
-  </div>
-</div>
-`;
+exports[`No Sidebar 1`] = `"<div class="mx-grid--sidebar"><section><p>Main content</p></section></div>"`;
 
-exports[`Layout/Sidebar Reverse smoke-test 1`] = `
-<div class="mx-page undefined">
-  <div class="mx-grid--sidebar">
-    <aside>
-      <p>
-        Sidebar content
-      </p>
-    </aside>
-    <section>
-      <p>
-        Main content
-      </p>
-    </section>
-  </div>
-</div>
-`;
+exports[`Reverse 1`] = `"<div class="mx-grid--sidebar"><aside><p>Sidebar content</p></aside><section><p>Main content</p></section></div>"`;
 
-exports[`Layout/Sidebar Sidebar smoke-test 1`] = `
-<div class="mx-page undefined">
-  <div class="mx-grid--sidebar">
-    <section>
-      <p>
-        Main content
-      </p>
-    </section>
-    <aside>
-      <p>
-        Sidebar content
-      </p>
-    </aside>
-  </div>
-</div>
-`;
+exports[`Sidebar 1`] = `"<div class="mx-grid--sidebar"><section><p>Main content</p></section><aside><p>Sidebar content</p></aside></div>"`;

package/src/Layout/Sidebar/sidebar.css

@@ -44,7 +44,7 @@
  */
 
 @media print {
-  .mx-page__sidebar {
-    display: none;
+  .mx-grid--sidebar {
+    flex-direction: column;
   }
 }