@pnx-mixtape/mxds 0.0.24 → 0.0.27

package/src/Component/Card/Card.stories.tsx

@@ -8,10 +8,12 @@ import Text from "../../Atom/Text/Text"
 import Media from "../../Atom/Media/Media"
 import "./card.css"
 import { AsTypes } from "@pnx-mixtape/ids-shape"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
+  decorators: [Page],
   argTypes: {
     children: { table: { disable: true } },
     as: { options: Object.values(AsTypes) },

package/src/Component/Card/__snapshots__/Card.stories.ts.snap

@@ -1,304 +1,269 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Component/Card BlockLink smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-card--block">
-      <div class="mx-card__content mx-vertical-flow-flex">
-        <h3>
-          Card title
-        </h3>
-        <div class="mx-text--lede mx-vertical-flow-flex">
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-        </div>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            Find out more
-          </span>
-        </a>
-      </div>
-      <figure class="mx-card__media">
-        <picture>
-          <img src="https://picsum.photos/id/56/558/418?grayscale"
-               alt="Blurry bubbles"
-               height="418"
-               width="558"
-          >
-        </picture>
-      </figure>
-    </article>
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Block Link 1`] = `
+"        
+<div class="mx-container">
+<article class="mx-card mx-card--block">
+    <div class="mx-card__content mx-vertical-flow-flex">
+        
+<h3>Card title</h3>
+
+    
+          <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+        
+      
+<a class="mx-link--more" href="#">
+  
+  <span>Find out more</span>
+    
+</a>
+
   </div>
+      <figure class="mx-card__media">
+      <picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Blurry bubbles" height="418" width="558">
+</picture>
+
+    </figure>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/Card Card smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card">
-      <div class="mx-card__content mx-vertical-flow-flex">
-        <h3>
-          Card title
-        </h3>
-        <div class="mx-text--lede mx-vertical-flow-flex">
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-        </div>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            Find out more
-          </span>
-        </a>
-      </div>
-      <figure class="mx-card__media">
-        <picture>
-          <img src="https://picsum.photos/id/56/558/418?grayscale"
-               alt="Blurry bubbles"
-               height="418"
-               width="558"
-          >
-        </picture>
-      </figure>
-    </article>
+exports[`Card 1`] = `
+"
+<div class="mx-container">
+<article class="mx-card">
+    <div class="mx-card__content mx-vertical-flow-flex">
+        
+<h3>Card title</h3>
+
+    
+          <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+        
+      
+<a class="mx-link--more" href="#">
+  
+  <span>Find out more</span>
+    
+</a>
+
   </div>
+      <figure class="mx-card__media">
+      <picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Blurry bubbles" height="418" width="558">
+</picture>
+
+    </figure>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/Card Date smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card">
-      <div class="mx-card__content mx-vertical-flow-flex">
-        <div class="mx-text--s">
-          25 May 2025
-        </div>
-        <h3>
-          Card title
-        </h3>
-        <div class="mx-text--lede mx-vertical-flow-flex">
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-        </div>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            Find out more
-          </span>
-        </a>
-      </div>
-      <figure class="mx-card__media">
-        <picture>
-          <img src="https://picsum.photos/id/56/558/418?grayscale"
-               alt="Blurry bubbles"
-               height="418"
-               width="558"
-          >
-        </picture>
-      </figure>
-    </article>
+exports[`Date 1`] = `
+"
+<div class="mx-container">
+<article class="mx-card">
+    <div class="mx-card__content mx-vertical-flow-flex">
+          <div class="mx-text--s">25 May 2025</div>
+        
+<h3>Card title</h3>
+
+    
+          <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+        
+      
+<a class="mx-link--more" href="#">
+  
+  <span>Find out more</span>
+    
+</a>
+
   </div>
+      <figure class="mx-card__media">
+      <picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Blurry bubbles" height="418" width="558">
+</picture>
+
+    </figure>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/Card IconTile smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-card--block mx-background--box">
+exports[`Icon Tile 1`] = `
+"          
+<div class="mx-container">
+<article class="mx-card mx-card--block mx-background--box">
       <div class="mx-card__icon">
-        <span class="mx-icon mx-icon--heart-selected">
-        </span>
-      </div>
-      <div class="mx-card__content mx-vertical-flow-flex">
-        <h3>
-          Tile title
-        </h3>
-        <div class="mx-text--lede mx-vertical-flow-flex">
-          <p>
-            Tiles are just block cards without an image.
-          </p>
-        </div>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            Find out more
-          </span>
-        </a>
-      </div>
-    </article>
+      
+<span class="mx-icon mx-icon--heart-selected"></span>
+
+    </div>
+    <div class="mx-card__content mx-vertical-flow-flex">
+        
+<h3>Tile title</h3>
+
+    
+          <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
+        
+      
+<a class="mx-link--more" href="#">
+  
+  <span>Find out more</span>
+    
+</a>
+
   </div>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/Card Reverse smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-card--reversed">
-      <div class="mx-card__content mx-vertical-flow-flex">
-        <h3>
-          Card title
-        </h3>
-        <div class="mx-text--lede mx-vertical-flow-flex">
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-        </div>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            Find out more
-          </span>
-        </a>
-      </div>
-      <figure class="mx-card__media">
-        <picture>
-          <img src="https://picsum.photos/id/56/558/418?grayscale"
-               alt="Blurry bubbles"
-               height="418"
-               width="558"
-          >
-        </picture>
-      </figure>
-    </article>
+exports[`Reverse 1`] = `
+"        
+<div class="mx-container">
+<article class="mx-card mx-card--reversed">
+    <div class="mx-card__content mx-vertical-flow-flex">
+        
+<h3>Card title</h3>
+
+    
+          <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+        
+      
+<a class="mx-link--more" href="#">
+  
+  <span>Find out more</span>
+    
+</a>
+
   </div>
+      <figure class="mx-card__media">
+      <picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Blurry bubbles" height="418" width="558">
+</picture>
+
+    </figure>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/Card Tile smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-card--block mx-background--box">
-      <div class="mx-card__content mx-vertical-flow-flex">
-        <h3>
-          Tile title
-        </h3>
-        <div class="mx-text--lede mx-vertical-flow-flex">
-          <p>
-            Tiles are just block cards without an image.
-          </p>
-        </div>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            Find out more
-          </span>
-        </a>
-      </div>
-    </article>
+exports[`Tile 1`] = `
+"          
+<div class="mx-container">
+<article class="mx-card mx-card--block mx-background--box">
+    <div class="mx-card__content mx-vertical-flow-flex">
+        
+<h3>Tile title</h3>
+
+    
+          <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
+        
+      
+<a class="mx-link--more" href="#">
+  
+  <span>Find out more</span>
+    
+</a>
+
   </div>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/Card WithLinkList smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card">
-      <div class="mx-card__content mx-vertical-flow-flex">
-        <h3>
-          Card title
-        </h3>
-        <div class="mx-text--lede mx-vertical-flow-flex">
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-        </div>
-        <ul class="mx-link-list">
-          <li>
-            <a href="#">
-              <span>
-                Link one
-              </span>
-              <span class="mx-icon mx-icon--chevron-right">
-              </span>
-            </a>
-          </li>
-          <li>
-            <a href="#">
-              <span>
-                Link two
-              </span>
-              <span class="mx-icon mx-icon--chevron-right">
-              </span>
-            </a>
-          </li>
-          <li>
-            <a href="#">
-              <span>
-                Link three
-              </span>
-              <span class="mx-icon mx-icon--chevron-right">
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <figure class="mx-card__media">
-        <picture>
-          <img src="https://picsum.photos/id/56/558/418?grayscale"
-               alt="Blurry bubbles"
-               height="418"
-               width="558"
-          >
-        </picture>
-      </figure>
-    </article>
+exports[`With Link List 1`] = `
+"
+<div class="mx-container">
+<article class="mx-card">
+    <div class="mx-card__content mx-vertical-flow-flex">
+        
+<h3>Card title</h3>
+
+    
+          <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+        
+
+<ul class="mx-link-list">
+      <li>
+<a href="#">
+  
+  <span>Link one</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
+      <li>
+<a href="#">
+  
+  <span>Link two</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
+      <li>
+<a href="#">
+  
+  <span>Link three</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
+  </ul>
+
+    
   </div>
+      <figure class="mx-card__media">
+      <picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Blurry bubbles" height="418" width="558">
+</picture>
+
+    </figure>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/Card WithTags smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card">
-      <div class="mx-card__content mx-vertical-flow-flex">
-        <h3>
-          Card title
-        </h3>
-        <ul class="mx-tags">
-          <li>
-            <span class="mx-tag">
-              Music
-            </span>
-          </li>
-          <li>
-            <span class="mx-tag">
-              News
-            </span>
-          </li>
-        </ul>
-        <div class="mx-text--lede mx-vertical-flow-flex">
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-        </div>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            Find out more
-          </span>
-        </a>
-      </div>
-      <figure class="mx-card__media">
-        <picture>
-          <img src="https://picsum.photos/id/56/558/418?grayscale"
-               alt="Blurry bubbles"
-               height="418"
-               width="558"
-          >
-        </picture>
-      </figure>
-    </article>
+exports[`With Tags 1`] = `
+"
+<div class="mx-container">
+<article class="mx-card">
+    <div class="mx-card__content mx-vertical-flow-flex">
+        
+<h3>Card title</h3>
+
+    
+<ul class="mx-tags">
+      <li>
+                    <span class="mx-tag">Music</span>
+            </li>
+      <li>
+                    <span class="mx-tag">News</span>
+            </li>
+  </ul>
+
+          <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+        
+      
+<a class="mx-link--more" href="#">
+  
+  <span>Find out more</span>
+    
+</a>
+
   </div>
+      <figure class="mx-card__media">
+      <picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Blurry bubbles" height="418" width="558">
+</picture>
+
+    </figure>
+  </article>
 </div>
+"
 `;

package/src/Component/Card/__snapshots__/Card.stories.tsx.snap

@@ -1,88 +1,7 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Card BlockLink smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card mx-card--block">
-    <figure class="mx-card__media stack">
-      <div class="mx-skeleton mx-skeleton--bg">
-      </div>
-      <img alt
-           src="https://picsum.photos/id/56/558/418?grayscale"
-      >
-    </figure>
-    <div class="mx-card__content mx-vertical-flow">
-      <h2 class
-          id="key-feature-or-sectio"
-      >
-        Key feature or Section Name
-      </h2>
-      <p class>
-        A short description to help explain enough about the subject matter to encourage visitors to learn more.
-      </p>
-      <a href="http://example.com"
-         class="mx-link mx-link--more"
-      >
-        Learn More
-      </a>
-    </div>
-  </article>
-</div>
-`;
+exports[`Block Link 1`] = `"<div class="mx-container"><article class="mx-card mx-card--block"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-sectio">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
 
-exports[`Component/Card Card smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card">
-    <figure class="mx-card__media stack">
-      <div class="mx-skeleton mx-skeleton--bg">
-      </div>
-      <img alt
-           src="https://picsum.photos/id/56/558/418?grayscale"
-      >
-    </figure>
-    <div class="mx-card__content mx-vertical-flow">
-      <h2 class
-          id="key-feature-or-sectio"
-      >
-        Key feature or Section Name
-      </h2>
-      <p class>
-        A short description to help explain enough about the subject matter to encourage visitors to learn more.
-      </p>
-      <a href="http://example.com"
-         class="mx-link mx-link--more"
-      >
-        Learn More
-      </a>
-    </div>
-  </article>
-</div>
-`;
+exports[`Card 1`] = `"<div class="mx-container"><article class="mx-card"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-sectio">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
 
-exports[`Component/Card Reverse smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card mx-card--reversed">
-    <figure class="mx-card__media stack">
-      <div class="mx-skeleton mx-skeleton--bg">
-      </div>
-      <img alt
-           src="https://picsum.photos/id/56/558/418?grayscale"
-      >
-    </figure>
-    <div class="mx-card__content mx-vertical-flow">
-      <h2 class
-          id="key-feature-or-sectio"
-      >
-        Key feature or Section Name
-      </h2>
-      <p class>
-        A short description to help explain enough about the subject matter to encourage visitors to learn more.
-      </p>
-      <a href="http://example.com"
-         class="mx-link mx-link--more"
-      >
-        Learn More
-      </a>
-    </div>
-  </article>
-</div>
-`;
+exports[`Reverse 1`] = `"<div class="mx-container"><article class="mx-card mx-card--reversed"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-sectio">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;