@pnx-mixtape/mxds 0.0.24 → 0.0.26

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

@@ -1,320 +1,245 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Navigation Collapsible smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-nav>
-    <nav class="mx-nav mx-nav--collapsible"
-         aria-label="Links"
-         id="links-story"
-    >
-      <ul class="mx-nav__level-1">
-        <li>
-          <a href="#">
+exports[`Collapsible 1`] = `
+"  
+
+<mx-nav>
+    <nav class="mx-nav mx-nav--collapsible" aria-label="Links" id="links-story">
+        <ul class="mx-nav__level-1">
+          <li>
+                  <a href="#">
             News
           </a>
-        </li>
-        <li class="mx-nav__has-subnav">
-          <a href="#"
-             id="unique-0"
-          >
+                      </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#" id="list-label-subnav-0--what-we-do">
             What we do
           </a>
-          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
-                  aria-expanded="false"
-                  aria-controls="unique-0"
-          >
-            Sub-navigation
-          </button>
-          <ul class="mx-nav__level-2"
-              inert
-              id="unique-1"
-              aria-labelledby="unique-1"
-          >
-            <li>
-              <a href="#">
-                Events
-              </a>
-            </li>
-            <li class="mx-nav__has-subnav">
-              <a href="#"
-                 id="unique-2"
-              >
-                Who we are
-              </a>
-              <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
-                      aria-expanded="false"
-                      aria-controls="unique-2"
-              >
-                Sub-navigation
-              </button>
-              <ul class="mx-nav__level-3"
-                  inert
-                  id="unique-3"
-                  aria-labelledby="unique-3"
-              >
-                <li>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-0--what-we-do">Sub-navigation</button>
+              <ul class="mx-nav__level-2" inert="" id="subnav-0--what-we-do" aria-labelledby="list-label-subnav-0--what-we-do">
+          <li>
+                  <a href="#">
+            Events
+          </a>
+                      </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#" id="list-label-subnav-1--who-we-are">
+            Who we are
+          </a>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-1--who-we-are">Sub-navigation</button>
+              <ul class="mx-nav__level-3" inert="" id="subnav-1--who-we-are" aria-labelledby="list-label-subnav-1--who-we-are">
+          <li>
+                  <a href="#">
+            Our team
+          </a>
+                      </li>
+          <li>
+                  <a href="#" aria-current="page">
+            Our philosophy
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Why music?
+          </a>
+                      </li>
+      </ul>
+
+              </li>
+          <li>
                   <a href="#">
-                    Our team
-                  </a>
-                </li>
-                <li>
-                  <a href="#"
-                     aria-current="page"
-                  >
-                    Our philosophy
-                  </a>
-                </li>
-                <li>
+            Join us
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Careers
+          </a>
+                      </li>
+      </ul>
+
+              </li>
+          <li>
                   <a href="#">
-                    Why music?
-                  </a>
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a href="#">
-                Join us
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                Careers
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a href="#">
             Contact
           </a>
-        </li>
-        <li>
-          <a href="#">
+                      </li>
+          <li>
+                  <a href="#">
             Resources
           </a>
-        </li>
+                      </li>
       </ul>
-    </nav>
+
+  </nav>
   </mx-nav>
-</div>
+"
 `;
 
-exports[`Component/Navigation Dropdown smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-nav flyout>
-    <nav class="mx-nav mx-nav--dropdown"
-         aria-label="Links"
-         id="links-story"
-    >
-      <ul class="mx-nav__level-1">
-        <li>
-          <a href="#">
+exports[`Dropdown 1`] = `
+"  
+
+<mx-nav flyout="">
+    <nav class="mx-nav mx-nav--dropdown" aria-label="Links" id="links-story">
+        <ul class="mx-nav__level-1">
+          <li>
+                  <a href="#">
             News
           </a>
-        </li>
-        <li class="mx-nav__has-subnav">
-          <a href="#"
-             id="unique-0"
-          >
+                      </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#" id="list-label-subnav-0--what-we-do">
             What we do
           </a>
-          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
-                  aria-expanded="false"
-                  aria-controls="unique-0"
-          >
-            Sub-navigation
-          </button>
-          <ul class="mx-nav__level-2"
-              inert
-              id="unique-1"
-              aria-labelledby="unique-1"
-          >
-            <li>
-              <a href="#">
-                Events
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                Who we are
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                Join us
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                Careers
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a href="#">
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-0--what-we-do">Sub-navigation</button>
+              <ul class="mx-nav__level-2" inert="" id="subnav-0--what-we-do" aria-labelledby="list-label-subnav-0--what-we-do">
+          <li>
+                  <a href="#">
+            Events
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Who we are
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Join us
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Careers
+          </a>
+                      </li>
+      </ul>
+
+              </li>
+          <li>
+                  <a href="#">
             Contact
           </a>
-        </li>
-        <li>
-          <a href="#">
+                      </li>
+          <li>
+                  <a href="#">
             Resources
           </a>
-        </li>
+                      </li>
       </ul>
-    </nav>
+
+  </nav>
   </mx-nav>
-</div>
+"
 `;
 
-exports[`Component/Navigation Mega smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-nav edgecheck>
-    <nav class="mx-nav mx-nav--dropdown mx-nav--mega-nav"
-         aria-label="Links"
-         id="links-story"
-    >
-      <ul class="mx-nav__level-1">
-        <li>
-          <a href="#"
-             aria-current="page"
-          >
+exports[`Mega 1`] = `
+"    
+
+<mx-nav edgecheck="">
+    <nav class="mx-nav mx-nav--dropdown mx-nav--mega-nav" aria-label="Links" id="links-story">
+        <ul class="mx-nav__level-1">
+          <li>
+                  <a href="#" aria-current="page">
             Home
           </a>
-        </li>
-        <li class="mx-nav__has-subnav">
-          <a href="#"
-             id="unique-0"
-          >
+                      </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#" id="list-label-subnav-0--about">
             About
           </a>
-          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
-                  aria-expanded="false"
-                  aria-controls="unique-0"
-          >
-            Sub-navigation
-          </button>
-          <ul class="mx-nav__level-2"
-              inert
-              id="unique-1"
-              aria-labelledby="unique-1"
-          >
-            <li class="mx-nav__has-subnav">
-              <a href="#"
-                 aria-current="page"
-                 id="unique-2"
-              >
-                Who
-              </a>
-              <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
-                      aria-expanded="false"
-                      aria-controls="unique-2"
-              >
-                Sub-navigation
-              </button>
-              <ul class="mx-nav__level-3"
-                  inert
-                  id="unique-3"
-                  aria-labelledby="unique-3"
-              >
-                <li>
-                  <a href="#"
-                     aria-current="page"
-                  >
-                    How come?
-                  </a>
-                </li>
-                <li>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-0--about">Sub-navigation</button>
+              <ul class="mx-nav__level-2" inert="" id="subnav-0--about" aria-labelledby="list-label-subnav-0--about">
+          <li class="mx-nav__has-subnav">
+                  <a href="#" aria-current="page" id="list-label-subnav-1--who">
+            Who
+          </a>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-1--who">Sub-navigation</button>
+              <ul class="mx-nav__level-3" inert="" id="subnav-1--who" aria-labelledby="list-label-subnav-1--who">
+          <li>
+                  <a href="#" aria-current="page">
+            How come?
+          </a>
+                      </li>
+          <li>
                   <a href="#">
-                    Why not?
-                  </a>
-                </li>
-                <li>
+            Why not?
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            What for?
+          </a>
+                      </li>
+      </ul>
+
+              </li>
+          <li>
                   <a href="#">
-                    What for?
-                  </a>
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a href="#">
-                What
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                Why
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li class="mx-nav__has-subnav">
-          <a href="#"
-             id="unique-4"
-          >
+            What
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Why
+          </a>
+                      </li>
+      </ul>
+
+              </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#" id="list-label-subnav-2--contact">
             Contact
           </a>
-          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
-                  aria-expanded="false"
-                  aria-controls="unique-4"
-          >
-            Sub-navigation
-          </button>
-          <ul class="mx-nav__level-2"
-              inert
-              id="unique-5"
-              aria-labelledby="unique-5"
-          >
-            <li>
-              <a href="#"
-                 aria-current="page"
-              >
-                How
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                Where
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                When
-              </a>
-            </li>
-          </ul>
-        </li>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-2--contact">Sub-navigation</button>
+              <ul class="mx-nav__level-2" inert="" id="subnav-2--contact" aria-labelledby="list-label-subnav-2--contact">
+          <li>
+                  <a href="#" aria-current="page">
+            How
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Where
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            When
+          </a>
+                      </li>
       </ul>
-    </nav>
+
+              </li>
+      </ul>
+
+  </nav>
   </mx-nav>
-</div>
+"
 `;
 
-exports[`Component/Navigation Navigation smoke-test 1`] = `
-<div class="mx-page default">
-  <nav class="mx-nav"
-       aria-label="Links"
-       id="links-story"
-  >
-    <ul class="mx-nav__level-1">
-      <li>
-        <a href="#"
-           aria-current="page"
-        >
-          Home
-        </a>
-      </li>
-      <li>
-        <a href="#">
-          About
-        </a>
-      </li>
-      <li>
-        <a href="#">
-          Contact
-        </a>
-      </li>
-    </ul>
+exports[`Navigation 1`] = `
+"
+
+  <nav class="mx-nav" aria-label="Links" id="links-story">
+        <ul class="mx-nav__level-1">
+          <li>
+                  <a href="#" aria-current="page">
+            Home
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            About
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Contact
+          </a>
+                      </li>
+      </ul>
+
   </nav>
-</div>
+  "
 `;

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

@@ -1,61 +1,5 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Navigation InlineNavigation smoke-test 1`] = `
-<nav class="mx-nav mx-nav--inline"
-     aria-label="Inline Navigation"
->
-  <ul>
-    <li class>
-      <a href="#"
-         class
-      >
-        Home
-      </a>
-    </li>
-    <li class>
-      <a href="#"
-         class
-      >
-        About
-      </a>
-    </li>
-    <li class>
-      <a href="#"
-         class
-      >
-        Contact
-      </a>
-    </li>
-  </ul>
-</nav>
-`;
+exports[`Inline Navigation 1`] = `"<nav class="mx-nav mx-nav--inline" aria-label="Inline Navigation"><ul><li class=""><a href="#" class="">Home</a></li><li class=""><a href="#" class="">About</a></li><li class=""><a href="#" class="">Contact</a></li></ul></nav>"`;
 
-exports[`Component/Navigation Navigation smoke-test 1`] = `
-<nav class="mx-nav"
-     aria-label="Navigation"
->
-  <ul>
-    <li class>
-      <a href="#"
-         class
-      >
-        Home
-      </a>
-    </li>
-    <li class>
-      <a href="#"
-         class
-      >
-        About
-      </a>
-    </li>
-    <li class>
-      <a href="#"
-         class
-      >
-        Contact
-      </a>
-    </li>
-  </ul>
-</nav>
-`;
+exports[`Navigation 1`] = `"<nav class="mx-nav" aria-label="Navigation"><ul><li class=""><a href="#" class="">Home</a></li><li class=""><a href="#" class="">About</a></li><li class=""><a href="#" class="">Contact</a></li></ul></nav>"`;

package/src/Component/Navigation/_navigation.css

@@ -4,6 +4,8 @@
 
 @layer design-system.atoms {
   .mx-nav {
+    --link-colour: currentcolor;
+
     &:where(:not(:has(ul))),
     ul {
       display: flex;
@@ -14,8 +16,6 @@
     }
 
     & a[href] {
-      --link-colour: currentcolor;
-
       text-decoration-line: var(--nav-underline, none);
 
       &:hover {

package/src/Component/Pagination/Pagination.stories.tsx

@@ -2,9 +2,11 @@ import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Components/PaginationContext"
 import PaginationComponent from "./Pagination"
 import "./pagination.css"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
+  decorators: [Page],
   component: Component,
   argTypes: {
     children: {