@pnx-mixtape/mxds 0.0.23 → 0.0.26

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

@@ -1,33 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Navigation/Link List LinkList smoke-test 1`] = `
-<ul class="mx-link-list">
-  <li>
-    <a href="#1"
-       class="mx-link"
-    >
-      Page link #1
-      <span class="mx-icon mx-icon--chevron-right">
-      </span>
-    </a>
-  </li>
-  <li>
-    <a href="#2"
-       class="mx-link"
-    >
-      Page link #2
-      <span class="mx-icon mx-icon--chevron-right">
-      </span>
-    </a>
-  </li>
-  <li>
-    <a href="#3"
-       class="mx-link"
-    >
-      Page link #3
-      <span class="mx-icon mx-icon--chevron-right">
-      </span>
-    </a>
-  </li>
-</ul>
-`;
+exports[`Link List 1`] = `"<ul class="mx-link-list"><li><a href="#1" class="mx-link">Page link #1<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#2" class="mx-link">Page link #2<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#3" class="mx-link">Page link #3<span class="mx-icon mx-icon--chevron-right"></span></a></li></ul>"`;

package/src/Component/ListItem/ListItem.stories.tsx

@@ -4,9 +4,10 @@ import ListItemContent from "./Components/ListItemContent"
 import Text from "../../Atom/Text/Text"
 import Link from "../../Atom/Link/Link"
 import { TextStyles, TextTags } from "../../enums"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
-  title: "Elements/ListItem",
+  decorators: [Page],
   component: Component,
   args: {
     children: (

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

@@ -1,198 +1,184 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/ListItem BlockLink smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-list-item mx-card--block">
-      <div class="mx-card__content mx-vertical-flow">
-        <div class="mx-heading--m">
-          <a href="#">
-            <span>
-              List item title
-            </span>
-          </a>
-        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-    </article>
+exports[`Block Link 1`] = `
+"  
+<div class="mx-container">
+<article class="mx-card mx-list-item mx-card--block">
+  <div class="mx-card__content mx-vertical-flow">
+            <div class="mx-heading--m">
+      
+<a href="#">
+  
+  <span>List item title</span>
+    
+</a>
+
+    </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    
   </div>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/ListItem ImageReverse smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-list-item mx-card--reversed">
-      <div class="mx-card__content mx-vertical-flow">
-        <strong class="mx-text--s">
-          Publication
-        </strong>
-        <div class="mx-text--s">
-          25 May 2025
-        </div>
+exports[`Image Reverse 1`] = `
+"  
+<div class="mx-container">
+<article class="mx-card mx-list-item mx-card--reversed">
+  <div class="mx-card__content mx-vertical-flow">
+          <strong class="mx-text--s">Publication</strong>
+              <div class="mx-text--s">25 May 2025</div>
         <div class="mx-heading--m">
-          <a href="#">
-            <span>
-              List item title
-            </span>
-          </a>
-        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-      <figure class="mx-card__media">
-        <picture>
-          <img src="https://picsum.photos/id/56/200/200?grayscale"
-               alt="Blurry bubbles"
-          >
-        </picture>
-      </figure>
-    </article>
+      
+<a href="#">
+  
+  <span>List item title</span>
+    
+</a>
+
+    </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    
   </div>
+      <figure class="mx-card__media">
+      <picture>
+    <img src="https://picsum.photos/id/56/200/200?grayscale" alt="Blurry bubbles">
+</picture>
+
+    </figure>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/ListItem ListItem smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-list-item">
-      <div class="mx-card__content mx-vertical-flow">
-        <div class="mx-heading--m">
-          <a href="#">
-            <span>
-              List item title
-            </span>
-          </a>
-        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-    </article>
+exports[`List Item 1`] = `
+"
+<div class="mx-container">
+<article class="mx-card mx-list-item">
+  <div class="mx-card__content mx-vertical-flow">
+            <div class="mx-heading--m">
+      
+<a href="#">
+  
+  <span>List item title</span>
+    
+</a>
+
+    </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    
   </div>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/ListItem WithImage smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-list-item">
-      <div class="mx-card__content mx-vertical-flow">
-        <strong class="mx-text--s">
-          Publication
-        </strong>
-        <div class="mx-text--s">
-          25 May 2025
-        </div>
+exports[`With Image 1`] = `
+"
+<div class="mx-container">
+<article class="mx-card mx-list-item">
+  <div class="mx-card__content mx-vertical-flow">
+          <strong class="mx-text--s">Publication</strong>
+              <div class="mx-text--s">25 May 2025</div>
         <div class="mx-heading--m">
-          <a href="#">
-            <span>
-              List item title
-            </span>
-          </a>
-        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-      <figure class="mx-card__media">
-        <picture>
-          <img src="https://picsum.photos/id/56/200/200?grayscale"
-               alt="Blurry bubbles"
-          >
-        </picture>
-      </figure>
-    </article>
+      
+<a href="#">
+  
+  <span>List item title</span>
+    
+</a>
+
+    </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    
   </div>
+      <figure class="mx-card__media">
+      <picture>
+    <img src="https://picsum.photos/id/56/200/200?grayscale" alt="Blurry bubbles">
+</picture>
+
+    </figure>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/ListItem WithInfo smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-list-item">
-      <div class="mx-card__content mx-vertical-flow">
-        <strong class="mx-text--s">
-          Publication
-        </strong>
-        <div class="mx-text--s">
-          25 May 2025
-        </div>
+exports[`With Info 1`] = `
+"
+<div class="mx-container">
+<article class="mx-card mx-list-item">
+  <div class="mx-card__content mx-vertical-flow">
+          <strong class="mx-text--s">Publication</strong>
+              <div class="mx-text--s">25 May 2025</div>
         <div class="mx-heading--m">
-          <a href="#">
-            <span>
-              List item title
-            </span>
-          </a>
-        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-    </article>
+      
+<a href="#">
+  
+  <span>List item title</span>
+    
+</a>
+
+    </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    
   </div>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/ListItem WithTags smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-list-item">
-      <div class="mx-card__content mx-vertical-flow">
-        <strong class="mx-text--s">
-          Resource
-        </strong>
-        <div class="mx-heading--m">
-          <a href="#">
-            <span>
-              List item title
-            </span>
-          </a>
-        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <ul class="mx-tags">
-          <li>
-            <span class="mx-tag">
-              Music
-            </span>
-          </li>
-          <li>
-            <span class="mx-tag">
-              News
-            </span>
-          </li>
-        </ul>
-      </div>
-    </article>
+exports[`With Tags 1`] = `
+"
+<div class="mx-container">
+<article class="mx-card mx-list-item">
+  <div class="mx-card__content mx-vertical-flow">
+          <strong class="mx-text--s">Resource</strong>
+            <div class="mx-heading--m">
+      
+<a href="#">
+  
+  <span>List item title</span>
+    
+</a>
+
+    </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    
+<ul class="mx-tags">
+      <li>
+                    <span class="mx-tag">Music</span>
+            </li>
+      <li>
+                    <span class="mx-tag">News</span>
+            </li>
+  </ul>
+
   </div>
+  </article>
 </div>
+"
 `;
 
-exports[`Component/ListItem WithUrl smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-container">
-    <article class="mx-card mx-list-item">
-      <div class="mx-card__content mx-vertical-flow">
-        <div class="mx-heading--m">
-          <a href="#">
-            <span>
-              List item title
-            </span>
-          </a>
-        </div>
-        <div class="mx-text--s">
-          https://example.com/some-thing
-        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-    </article>
+exports[`With Url 1`] = `
+"
+<div class="mx-container">
+<article class="mx-card mx-list-item">
+  <div class="mx-card__content mx-vertical-flow">
+            <div class="mx-heading--m">
+      
+<a href="#">
+  
+  <span>List item title</span>
+    
+</a>
+
+    </div>
+          <div class="mx-text--s">https://example.com/some-thing</div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    
   </div>
+  </article>
 </div>
+"
 `;

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

@@ -1,26 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Elements/ListItem ListItem smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-list-item">
-    <div class="mx-list-item__content mx-vertical-flow">
-      <strong class="mx-text--s">
-        label
-      </strong>
-      <div class="mx-heading--m">
-        <a href="http://example.com"
-           class="mx-link"
-        >
-          Teaser title
-        </a>
-      </div>
-      <p class="mx-text--s">
-        18 May 2040
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-    </div>
-  </article>
-</div>
-`;
+exports[`List Item 1`] = `"<div class="mx-container"><article class="mx-list-item"><div class="mx-list-item__content mx-vertical-flow"><strong class="mx-text--s">label</strong><div class="mx-heading--m"><a href="http://example.com" class="mx-link">Teaser title</a></div><p class="mx-text--s">18 May 2040</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></article></div>"`;

package/src/Component/Navigation/Dropdown.stories.tsx

@@ -1,9 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Dropdown"
 import "./navigation.css"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
+  decorators: [Page],
   component: Component,
   args: {
     title: "Menu",

package/src/Component/Navigation/Elements/Navigation.ts

@@ -81,7 +81,7 @@ export default class Navigation extends HTMLElement {
 
   disconnectedCallback(): void {
     this.controller.abort()
-    this.subNavs.forEach((subNav: SubNavType): void => subNav.widget.detach())
+    this.subNavs?.forEach((subNav: SubNavType): void => subNav.widget.detach())
   }
 
   handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {
@@ -96,7 +96,7 @@ export default class Navigation extends HTMLElement {
   }
 
   handleCloseAny = (): void => {
-    this.subNavs.forEach(({ widget }: SubNavType): void => {
+    this.subNavs?.forEach(({ widget }: SubNavType): void => {
       if (!widget) return
       if (widget.isOpen) widget.handleToggle()
     })
@@ -108,7 +108,7 @@ export default class Navigation extends HTMLElement {
     if (!parent) return
     const subnav: HTMLUListElement = parent.querySelector(":scope > ul")
     if (!subnav) return
-    this.subNavs.forEach(({ widget, list }: SubNavType): void => {
+    this.subNavs?.forEach(({ widget, list }: SubNavType): void => {
       if (!widget) return
       if (widget.isOpen) widget.handleToggle()
       if (list.id === subnav.id) widget.handleToggle()
@@ -135,10 +135,10 @@ export default class Navigation extends HTMLElement {
         obs.disconnect()
       },
     )
-    this.subNavs.forEach(({ list }: SubNavType): void => {
+    this.subNavs?.forEach(({ list }: SubNavType): void => {
       edgeCheck.observe(list)
       const nestedLists: NodeListOf<HTMLUListElement> = list.querySelectorAll("ul")
-      nestedLists.forEach(nestedList => edgeCheck.observe(nestedList))
+      nestedLists?.forEach(nestedList => edgeCheck.observe(nestedList))
     })
   }
 

package/src/Component/Navigation/Navigation.stories.tsx

@@ -1,9 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Navigation"
 import "./navigation.css"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
+  decorators: [Page],
   component: Component,
   args: {
     title: "Navigation",

package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap

@@ -1,39 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Navigation/Dropdown Dropdown smoke-test 1`] = `
-<nav class="mx-nav mx-nav--dropdown"
-     aria-label="Menu"
-     id="navigation"
->
-  <ul class="mx-nav__level-1">
-    <li class="mx-nav__has-subnav">
-      <a href="#"
-         class
-      >
-        Home
-      </a>
-      <button aria-controls="unique-0"
-              aria-expanded="false"
-              class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down"
-              type="button"
-      >
-        Sub-navigation
-      </button>
-    </li>
-    <li class>
-      <a href="#"
-         class
-      >
-        About
-      </a>
-    </li>
-    <li class>
-      <a href="#"
-         class
-      >
-        Contact
-      </a>
-    </li>
-  </ul>
-</nav>
-`;
+exports[`Dropdown 1`] = `"<nav class="mx-nav mx-nav--dropdown" aria-label="Menu" id="navigation"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="#" class="">Home</a><button aria-controls="_r_0_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="#" class="">About</a></li><li class=""><a href="#" class="">Contact</a></li></ul></nav>"`;