@pnx-mixtape/mxds 0.0.24 → 0.0.26

package/src/Component/Popover/popover.css

@@ -23,10 +23,9 @@
     opacity: 0;
     position: absolute;
     padding: var(--popover-padding, var(--spacing-xs));
-    background-color: var(--popover-background, var(--background, var(--colour-background)));
-    color: var(--popover-foreground, var(--foreground, var(--colour-foreground)));
-    border: var(--popover-line-width, 0) solid
-      var(--popover-line-colour, var(--line-colour, var(--colour-border)));
+    background-color: var(--popover-background, var(--colour-background));
+    color: var(--popover-foreground, var(--colour-foreground));
+    border: var(--popover-line-width, 0) solid var(--popover-line-colour, var(--colour-border));
     border-radius: var(--popover-radius, var(--border-radius));
     box-shadow: var(--popover-shadow, var(--box-shadow));
     max-inline-size: var(--popover-width, 30ch);

package/src/Component/ResultsBar/ResultsBar.stories.tsx

@@ -3,9 +3,11 @@ import Component from "./ResultsBar"
 import "./results-bar.css"
 import ResultsBarInfo from "./Components/ResultsBarInfo"
 import ResultsBarSort from "./Components/ResultsBarSort"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
+  decorators: [Page],
   component: Component,
   args: {
     children: <ResultsBarInfo number={1} pageCount={10} total={250} />,

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

@@ -1,54 +1,33 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/ResultsBar Empty smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-results-bar mx-results-bar--empty">
-    <span aria-live="assertive"
-          aria-atomic="true"
-    >
-      Sorry, no results were found for your search
-    </span>
-  </div>
-</div>
+exports[`Empty 1`] = `
+"
+<div class="mx-results-bar mx-results-bar--empty">
+      <span aria-live="assertive" aria-atomic="true">Sorry, no results were found for your search</span>
+    </div>
+"
 `;
 
-exports[`Component/ResultsBar ResultsBar smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-results-bar">
-    <span aria-live="polite">
-      Showing results 1 - 10 of 250 results
-    </span>
-  </div>
-</div>
+exports[`Results Bar 1`] = `
+"
+<div class="mx-results-bar">
+      <span aria-live="polite">Showing results 1 - 10 of 250 results</span>
+    </div>
+"
 `;
 
-exports[`Component/ResultsBar Sort smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-results-bar">
-    <span aria-live="polite">
-      Showing results 1 - 10 of 250 results
-    </span>
-    <div class="mx-results-bar__sort">
-      <label class="mx-label"
-             for="results-sort"
-      >
-        Sort by
-      </label>
-      <select class="mx-input__select"
-              id="results-sort"
-              name="results-sort"
-      >
-        <option value="Most recent">
-          Most recent
-        </option>
-        <option value="A-Z">
-          A-Z
-        </option>
-        <option value="Z-A">
-          Z-A
-        </option>
-      </select>
+exports[`Sort 1`] = `
+"
+<div class="mx-results-bar">
+      <span aria-live="polite">Showing results 1 - 10 of 250 results</span>
+        <div class="mx-results-bar__sort">
+      <label class="mx-label" for="results-sort">Sort by</label>
+      <select class="mx-input__select" id="results-sort" name="results-sort">
+                  <option value="Most recent">Most recent</option>
+                  <option value="A-Z">A-Z</option>
+                  <option value="Z-A">Z-A</option>
+              </select>
     </div>
   </div>
-</div>
+"
 `;

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

@@ -1,53 +1,7 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/ResultsBar Empty smoke-test 1`] = `
-<div class="mx-results-bar">
-  <span aria-live="assertive"
-        aria-atomic="true"
-  >
-    Sorry, no results were found for your search
-  </span>
-</div>
-`;
+exports[`Empty 1`] = `"<div class="mx-results-bar"><span aria-live="assertive" aria-atomic="true">Sorry, no results were found for your search</span></div>"`;
 
-exports[`Component/ResultsBar ResultsBar smoke-test 1`] = `
-<div class="mx-results-bar">
-  <span aria-live="polite">
-    Showing results 1 - 10 of 250 results
-  </span>
-</div>
-`;
+exports[`Results Bar 1`] = `"<div class="mx-results-bar"><span aria-live="polite">Showing results 1 - 10 of 250 results</span></div>"`;
 
-exports[`Component/ResultsBar Sort smoke-test 1`] = `
-<div class="mx-results-bar">
-  <span aria-live="polite">
-    Showing results 1 - 10 of 250 results
-  </span>
-  <div class="mx-results-bar__sort">
-    <label class="mx-label"
-           for="results-sort"
-    >
-      Sort by
-    </label>
-    <select id="results-sort"
-            class="mx-input__select"
-            aria-describedby="unique-0"
-            aria-invalid="false"
-            name="unique-0"
-    >
-      <option value>
-        Select one
-      </option>
-      <option value="1">
-        Option 1
-      </option>
-      <option value="2">
-        Option 2
-      </option>
-      <option value="3">
-        Option 3
-      </option>
-    </select>
-  </div>
-</div>
-`;
+exports[`Sort 1`] = `"<div class="mx-results-bar"><span aria-live="polite">Showing results 1 - 10 of 250 results</span><div class="mx-results-bar__sort"><label class="mx-label" for="results-sort">Sort by</label><select id="results-sort" class="mx-input__select" aria-describedby="results-sort-help" aria-invalid="false" name="results-sort"><option value="">Select one</option><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option></select></div></div>"`;

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

@@ -1,89 +1,84 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/SideNavigation SideNavigation smoke-test 1`] = `
-<div class="mx-page default">
-  <nav class="mx-nav mx-side-nav"
-       aria-label="Sidebar nav"
-       "
-  >
-    <div class="mx-side-nav__parent"
-         id="sidenav-story"
-    >
-      <a href="#">
-        <span>
-          About
-        </span>
-      </a>
-    </div>
-    <ul class="mx-nav__level-1">
-      <li>
-        <a href="#">
-          News
-        </a>
-      </li>
-      <li class="mx-nav__has-subnav">
-        <a href="#">
-          What we do
-        </a>
-        <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">
-          Sub-navigation
-        </button>
-        <ul class="mx-nav__level-2">
+exports[`Side Navigation 1`] = `
+"
+
+<nav class="mx-nav mx-side-nav" aria-label="Sidebar nav" "="">
+  <div class="mx-side-nav__parent" id="sidenav-story">
+    
+<a href="#">
+  
+  <span>About</span>
+    
+</a>
+
+  </div>
+      <ul class="mx-nav__level-1">
           <li>
-            <a href="#">
-              Events
-            </a>
-          </li>
+                  <a href="#">
+            News
+          </a>
+                      </li>
           <li class="mx-nav__has-subnav">
-            <a href="#">
-              Who we are
-            </a>
-            <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">
-              Sub-navigation
-            </button>
-            <ul class="mx-nav__level-3">
-              <li>
-                <a href="#">
-                  Our team
-                </a>
-              </li>
-              <li>
-                <a href="#"
-                   aria-current="page"
-                >
-                  Our philosophy
-                </a>
+                  <a href="#">
+            What we do
+          </a>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+              <ul class="mx-nav__level-2">
+          <li>
+                  <a href="#">
+            Events
+          </a>
+                      </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#">
+            Who we are
+          </a>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+              <ul class="mx-nav__level-3">
+          <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="#">
-                  Why music?
-                </a>
+          <li>
+                  <a href="#">
+            Join us
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Careers
+          </a>
+                      </li>
+      </ul>
+
               </li>
-            </ul>
-          </li>
           <li>
-            <a href="#">
-              Join us
-            </a>
-          </li>
+                  <a href="#">
+            Contact
+          </a>
+                      </li>
           <li>
-            <a href="#">
-              Careers
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li>
-        <a href="#">
-          Contact
-        </a>
-      </li>
-      <li>
-        <a href="#">
-          Resources
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
+                  <a href="#">
+            Resources
+          </a>
+                      </li>
+      </ul>
+
+</nav>
+"
 `;

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

@@ -1,34 +1,37 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Component/SocialLinks SocialLinks smoke-test 1`] = `
-<div class="mx-page default">
-  <nav class="mx-social-links"
-       aria-label="Social media links"
-  >
-    <h2 class="mx-heading--m">
-      Follow us
-    </h2>
-    <a href="#">
-      <span class="mx-icon mx-icon--facebook mx-icon--size-md">
-      </span>
-      <span class="sr-only">
-        Facebook
-      </span>
-    </a>
-    <a href="#">
-      <span class="mx-icon mx-icon--instagram mx-icon--size-md">
-      </span>
-      <span class="sr-only">
-        Instagram
-      </span>
-    </a>
-    <a href="#">
-      <span class="mx-icon mx-icon--linkedin mx-icon--size-md">
-      </span>
-      <span class="sr-only">
-        LinkedIn
-      </span>
-    </a>
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Social Links 1`] = `
+"<nav class="mx-social-links" aria-label="Social media links">
+                    
+<h2 class="mx-heading--m">Follow us</h2>
+
+      
+<a href="#">
+  
+<span class="mx-icon mx-icon--facebook mx-icon--size-md"></span>
+
+  <span class="sr-only">Facebook</span>
+    
+</a>
+
+      
+<a href="#">
+  
+<span class="mx-icon mx-icon--instagram mx-icon--size-md"></span>
+
+  <span class="sr-only">Instagram</span>
+    
+</a>
+
+      
+<a href="#">
+  
+<span class="mx-icon mx-icon--linkedin mx-icon--size-md"></span>
+
+  <span class="sr-only">LinkedIn</span>
+    
+</a>
+
   </nav>
-</div>
+"
 `;

package/src/Component/SocialShare/SocialShare.stories.tsx

@@ -1,7 +1,8 @@
 import SocialShare from "./SocialShare"
+import { Page } from "../../../.storybook-react/decorators"
 
 export default {
-  title: "Elements/Social Share",
+  decorators: [Page],
   component: SocialShare,
   args: {
     shareUrl: "https://previousnext.com.au",

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

@@ -1,40 +1,24 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/SocialShare SocialShare smoke-test 1`] = `
-<div class="mx-page default">
-  <nav class="mx-social-share flex gap--s"
-       aria-label="Social share buttons"
-  >
-    <a class="mx-link mx-icon mx-icon--only mx-icon--bluesky"
-       href="https://bsky.app/intent/compose"
-       target="_blank"
-    >
+exports[`Social Share 1`] = `
+"
+<nav class="mx-social-share flex gap--s" aria-label="Social share buttons">
+  
+      <a class="mx-link mx-icon mx-icon--only mx-icon--bluesky" href="https://bsky.app/intent/compose" target="_blank">
       Share to Bluesky
     </a>
-    <a class="mx-link mx-icon mx-icon--only mx-icon--twitter"
-       href="https://twitter.com/intent/tweet"
-       target="_blank"
-    >
+        <a class="mx-link mx-icon mx-icon--only mx-icon--twitter" href="https://twitter.com/intent/tweet" target="_blank">
       Share to X (Twitter)
     </a>
-    <a class="mx-link mx-icon mx-icon--only mx-icon--linkedin"
-       href="https://www.linkedin.com/shareArticle"
-       target="_blank"
-    >
+        <a class="mx-link mx-icon mx-icon--only mx-icon--linkedin" href="https://www.linkedin.com/shareArticle" target="_blank">
       Share to LinkedIn
     </a>
-    <a class="mx-link mx-icon mx-icon--only mx-icon--facebook"
-       href="https://www.facebook.com/sharer.php"
-       target="_blank"
-    >
+        <a class="mx-link mx-icon mx-icon--only mx-icon--facebook" href="https://www.facebook.com/sharer.php" target="_blank">
       Share to Facebook
     </a>
-    <a class="mx-link mx-icon mx-icon--only mx-icon--email"
-       href="mailto:"
-       target="_blank"
-    >
+        <a class="mx-link mx-icon mx-icon--only mx-icon--email" href="mailto:" target="_blank">
       Share via email
     </a>
   </nav>
-</div>
+"
 `;

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

@@ -1,25 +1,7 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Elements/Social Share Facebook smoke-test 1`] = `
-<a href="https://www.facebook.com/sharer/sharer.php?url=https://previousnext.com.au"
-   class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--facebook"
->
-  Share on facebook
-</a>
-`;
+exports[`Facebook 1`] = `"<a href="https://www.facebook.com/sharer/sharer.php?url=https://previousnext.com.au" class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--facebook">Share on facebook</a>"`;
 
-exports[`Elements/Social Share LinkedIn smoke-test 1`] = `
-<a href="https://www.linkedin.com/sharing/share-offsite//?url=https://previousnext.com.au"
-   class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--linkedin"
->
-  Share on linkedin
-</a>
-`;
+exports[`Linked In 1`] = `"<a href="https://www.linkedin.com/sharing/share-offsite//?url=https://previousnext.com.au" class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--linkedin">Share on linkedin</a>"`;
 
-exports[`Elements/Social Share Twitter smoke-test 1`] = `
-<a href="https://twitter.com/intent/tweet/?url=https://previousnext.com.au&amp;text=Hello%20World!!"
-   class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--twitter"
->
-  Share on twitter
-</a>
-`;
+exports[`Twitter 1`] = `"<a href="https://twitter.com/intent/tweet/?url=https://previousnext.com.au&amp;text=Hello%20World!!" class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--twitter">Share on twitter</a>"`;

package/src/Component/SocialShare/social-share.twig

@@ -6,6 +6,7 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <nav{{ attributes }} aria-label="Social share buttons">
+  {{ title }}
   {% if bluesky is not empty %}
     <a class="mx-link mx-icon mx-icon--only mx-icon--bluesky" href="{{ bluesky }}" target="_blank">
       Share to Bluesky

package/src/Component/Steps/__snapshots__/StepItem.stories.ts.snap

@@ -1,31 +1,19 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Steps/StepItem Filled smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-steps__panel mx-steps--fill">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
-      <h2>
-        Funk
-      </h2>
-      <p>
-        Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
-      </p>
-    </div>
+exports[`Filled 1`] = `
+"<div class="mx-steps__panel mx-steps--fill">
+  <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+  <h2>Funk</h2><p>Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.</p>
   </div>
 </div>
+"
 `;
 
-exports[`Component/Steps/StepItem StepItem smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-steps__panel">
-    <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
-      <h2>
-        Funk
-      </h2>
-      <p>
-        Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
-      </p>
-    </div>
+exports[`Step Item 1`] = `
+"<div class="mx-steps__panel">
+  <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
+  <h2>Funk</h2><p>Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.</p>
   </div>
 </div>
+"
 `;