@pnx-mixtape/mxds 0.0.24 → 0.0.26

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

@@ -1,274 +1,151 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/UtilityList Horizontal smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-utility-list>
-    <nav class="mx-utility-list mx-nav mx-nav--inline"
-         aria-label="Page tools"
-    >
-      <ul>
-        <li>
-          <button data-copy
-                  type="button"
-                  class="mx-button mx-button--small mx-button--light"
-          >
-            <span class="mx-icon mx-icon--link">
-            </span>
-            <span data-copy-label
-                  class="mx-utility-list__label"
-            >
-              Copy link
-            </span>
+exports[`Horizontal 1`] = `
+"
+<mx-utility-list>
+  <nav class="mx-utility-list mx-nav mx-nav--inline" aria-label="Page tools">
+    <ul>
+            <li>
+        <button data-copy="" type="button" class="mx-button mx-button--small mx-button--light">
+          <span class="mx-icon mx-icon--link"></span>
+          <span data-copy-label="" class="mx-utility-list__label">Copy link</span>
+        </button>
+      </li>
+                    <li>
+          <button data-print="" type="button" class="mx-button mx-button--small mx-button--light">
+            <span class="mx-icon mx-icon--print"></span>
+            <span class="mx-utility-list__label">Print page</span>
           </button>
         </li>
-        <li>
-          <button data-print
-                  type="button"
-                  class="mx-button mx-button--small mx-button--light"
-          >
-            <span class="mx-icon mx-icon--print">
-            </span>
-            <span class="mx-utility-list__label">
-              Print page
-            </span>
-          </button>
-        </li>
-        <li>
+                          <li>
           <mx-popover>
-            <button type="button"
-                    id="unique-0"
-                    class="mx-popover__trigger mx-button mx-button--small mx-button--light"
-                    popovertarget="utility-list-share"
-                    style="anchor-name: --utility-list-share"
-            >
-              <span class="mx-icon mx-icon--share">
-              </span>
-              <span class="mx-utility-list__label">
-                Share this page
-              </span>
-              <span class="mx-icon mx-icon--chevron-down">
-              </span>
+            <button type="button" id="utility-list-share-target" class="mx-popover__trigger mx-button mx-button--small mx-button--light" popovertarget="utility-list-share" style="anchor-name: --utility-list-share">
+              <span class="mx-icon mx-icon--share"></span>
+              <span class="mx-utility-list__label">Share this page</span>
+              <span class="mx-icon mx-icon--chevron-down"></span>
             </button>
-            <div class="mx-popover mx-utility-list__share"
-                 id="utility-list-share"
-                 aria-describedby="unique-0"
-                 style="position-anchor: --utility-list-share"
-                 data-placement="bottom"
-                 popover
-            >
-              <nav class="mx-social-share flex gap--s"
-                   aria-label="Social share buttons"
-              >
-                <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"
-                >
-                  Share to Facebook
-                </a>
-                <a class="mx-link mx-icon mx-icon--only mx-icon--email"
-                   href="mailto:"
-                   target="_blank"
-                >
-                  Share via email
-                </a>
-              </nav>
+            <div class="mx-popover mx-utility-list__share" id="utility-list-share" aria-describedby="utility-list-share-target" style="position-anchor: --utility-list-share" data-placement="bottom" popover="">
+              
+<nav class="mx-social-share flex gap--s" aria-label="Social share buttons">
+  
+          <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">
+      Share to Facebook
+    </a>
+        <a class="mx-link mx-icon mx-icon--only mx-icon--email" href="mailto:" target="_blank">
+      Share via email
+    </a>
+  </nav>
+
             </div>
           </mx-popover>
         </li>
-      </ul>
-    </nav>
-  </mx-utility-list>
-</div>
+          </ul>
+  </nav>
+</mx-utility-list>
+"
 `;
 
-exports[`Component/UtilityList PDF smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-utility-list>
-    <nav class="mx-utility-list mx-nav"
-         aria-label="Page tools"
-    >
-      <ul>
-        <li>
-          <button data-copy
-                  type="button"
-                  class="mx-button mx-button--small mx-button--light"
-          >
-            <span class="mx-icon mx-icon--link">
-            </span>
-            <span data-copy-label
-                  class="mx-utility-list__label"
-            >
-              Copy link
-            </span>
-          </button>
-        </li>
-        <li>
-          <button data-print
-                  type="button"
-                  class="mx-button mx-button--small mx-button--light"
-          >
-            <span class="mx-icon mx-icon--print">
-            </span>
-            <span class="mx-utility-list__label">
-              Print page
-            </span>
+exports[`PDF 1`] = `
+"
+<mx-utility-list>
+  <nav class="mx-utility-list mx-nav" aria-label="Page tools">
+    <ul>
+            <li>
+        <button data-copy="" type="button" class="mx-button mx-button--small mx-button--light">
+          <span class="mx-icon mx-icon--link"></span>
+          <span data-copy-label="" class="mx-utility-list__label">Copy link</span>
+        </button>
+      </li>
+                    <li>
+          <button data-print="" type="button" class="mx-button mx-button--small mx-button--light">
+            <span class="mx-icon mx-icon--print"></span>
+            <span class="mx-utility-list__label">Print page</span>
           </button>
         </li>
-        <li>
-          <button data-pdf
-                  type="button"
-                  class="mx-button mx-button--small mx-button--light"
-          >
-            <span class="mx-icon mx-icon--download">
-            </span>
-            <span class="mx-utility-list__label">
-              Download PDF
-            </span>
+                    <li>
+          <button data-pdf="" type="button" class="mx-button mx-button--small mx-button--light">
+            <span class="mx-icon mx-icon--download"></span>
+            <span class="mx-utility-list__label">Download PDF</span>
           </button>
         </li>
-        <li>
+                    <li>
           <mx-popover>
-            <button type="button"
-                    id="unique-0"
-                    class="mx-popover__trigger mx-button mx-button--small mx-button--light"
-                    popovertarget="utility-list-share"
-                    style="anchor-name: --utility-list-share"
-            >
-              <span class="mx-icon mx-icon--share">
-              </span>
-              <span class="mx-utility-list__label">
-                Share this page
-              </span>
-              <span class="mx-icon mx-icon--chevron-down">
-              </span>
+            <button type="button" id="utility-list-share-target" class="mx-popover__trigger mx-button mx-button--small mx-button--light" popovertarget="utility-list-share" style="anchor-name: --utility-list-share">
+              <span class="mx-icon mx-icon--share"></span>
+              <span class="mx-utility-list__label">Share this page</span>
+              <span class="mx-icon mx-icon--chevron-down"></span>
             </button>
-            <div class="mx-popover mx-utility-list__share"
-                 id="utility-list-share"
-                 aria-describedby="unique-0"
-                 style="position-anchor: --utility-list-share"
-                 data-placement="bottom"
-                 popover
-            >
-              <nav class="mx-social-share flex gap--s"
-                   aria-label="Social share buttons"
-              >
-                <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"
-                >
-                  Share to Facebook
-                </a>
-                <a class="mx-link mx-icon mx-icon--only mx-icon--email"
-                   href="mailto:"
-                   target="_blank"
-                >
-                  Share via email
-                </a>
-              </nav>
+            <div class="mx-popover mx-utility-list__share" id="utility-list-share" aria-describedby="utility-list-share-target" style="position-anchor: --utility-list-share" data-placement="bottom" popover="">
+              
+<nav class="mx-social-share flex gap--s" aria-label="Social share buttons">
+  
+          <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">
+      Share to Facebook
+    </a>
+        <a class="mx-link mx-icon mx-icon--only mx-icon--email" href="mailto:" target="_blank">
+      Share via email
+    </a>
+  </nav>
+
             </div>
           </mx-popover>
         </li>
-      </ul>
-    </nav>
-  </mx-utility-list>
-</div>
+          </ul>
+  </nav>
+</mx-utility-list>
+"
 `;
 
-exports[`Component/UtilityList UtilityList smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-utility-list>
-    <nav class="mx-utility-list mx-nav"
-         aria-label="Page tools"
-    >
-      <ul>
-        <li>
-          <button data-copy
-                  type="button"
-                  class="mx-button mx-button--small mx-button--light"
-          >
-            <span class="mx-icon mx-icon--link">
-            </span>
-            <span data-copy-label
-                  class="mx-utility-list__label"
-            >
-              Copy link
-            </span>
-          </button>
-        </li>
-        <li>
-          <button data-print
-                  type="button"
-                  class="mx-button mx-button--small mx-button--light"
-          >
-            <span class="mx-icon mx-icon--print">
-            </span>
-            <span class="mx-utility-list__label">
-              Print page
-            </span>
+exports[`Utility List 1`] = `
+"
+<mx-utility-list>
+  <nav class="mx-utility-list mx-nav" aria-label="Page tools">
+    <ul>
+            <li>
+        <button data-copy="" type="button" class="mx-button mx-button--small mx-button--light">
+          <span class="mx-icon mx-icon--link"></span>
+          <span data-copy-label="" class="mx-utility-list__label">Copy link</span>
+        </button>
+      </li>
+                    <li>
+          <button data-print="" type="button" class="mx-button mx-button--small mx-button--light">
+            <span class="mx-icon mx-icon--print"></span>
+            <span class="mx-utility-list__label">Print page</span>
           </button>
         </li>
-        <li>
+                          <li>
           <mx-popover>
-            <button type="button"
-                    id="unique-0"
-                    class="mx-popover__trigger mx-button mx-button--small mx-button--light"
-                    popovertarget="utility-list-share"
-                    style="anchor-name: --utility-list-share"
-            >
-              <span class="mx-icon mx-icon--share">
-              </span>
-              <span class="mx-utility-list__label">
-                Share this page
-              </span>
-              <span class="mx-icon mx-icon--chevron-down">
-              </span>
+            <button type="button" id="utility-list-share-target" class="mx-popover__trigger mx-button mx-button--small mx-button--light" popovertarget="utility-list-share" style="anchor-name: --utility-list-share">
+              <span class="mx-icon mx-icon--share"></span>
+              <span class="mx-utility-list__label">Share this page</span>
+              <span class="mx-icon mx-icon--chevron-down"></span>
             </button>
-            <div class="mx-popover mx-utility-list__share"
-                 id="utility-list-share"
-                 aria-describedby="unique-0"
-                 style="position-anchor: --utility-list-share"
-                 data-placement="bottom"
-                 popover
-            >
-              <nav class="mx-social-share flex gap--s"
-                   aria-label="Social share buttons"
-              >
-                <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"
-                >
-                  Share to Facebook
-                </a>
-                <a class="mx-link mx-icon mx-icon--only mx-icon--email"
-                   href="mailto:"
-                   target="_blank"
-                >
-                  Share via email
-                </a>
-              </nav>
+            <div class="mx-popover mx-utility-list__share" id="utility-list-share" aria-describedby="utility-list-share-target" style="position-anchor: --utility-list-share" data-placement="bottom" popover="">
+              
+<nav class="mx-social-share flex gap--s" aria-label="Social share buttons">
+  
+          <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">
+      Share to Facebook
+    </a>
+        <a class="mx-link mx-icon mx-icon--only mx-icon--email" href="mailto:" target="_blank">
+      Share via email
+    </a>
+  </nav>
+
             </div>
           </mx-popover>
         </li>
-      </ul>
-    </nav>
-  </mx-utility-list>
-</div>
+          </ul>
+  </nav>
+</mx-utility-list>
+"
 `;

package/src/Component/UtilityList/utility-list.css

@@ -22,6 +22,10 @@
     &:where(.mx-nav--inline) {
       gap: var(--inline-nav-gap, 0);
     }
+
+    &[class*="mx-background--"] {
+      padding-block: var(--spacing-xs);
+    }
   }
 
   .mx-utility-list__share {

package/src/Component/UtilityList/utility-list.twig

@@ -1,7 +1,8 @@
 {% set classes = [
   "mx-utility-list",
   "mx-nav",
-  horizontal ? 'mx-nav--inline' : null
+  horizontal ? 'mx-nav--inline' : null,
+  background ? 'mx-background--'~background : null
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 {% set id = id|default('utility-list-share') %}

package/src/Form/Checkbox/FormCheckbox.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import FormCheckbox, { Checkbox, SingleCheckbox } from "./FormCheckbox"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof SingleCheckbox> = {
-  title: "Form/Checkboxes",
-  tags: ["no-snapshot"],
+  decorators: [Page],
   component: SingleCheckbox,
 }
 

package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap

@@ -1,32 +1,19 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Form/Checkbox Checkbox smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-checkbox">
-    <input id="single-checkbox"
-           type="checkbox"
-           name="terms"
-           value="agree"
-    >
-    <label for="single-checkbox">
-      I agree to the terms and conditions.
-    </label>
-  </div>
+exports[`Checkbox 1`] = `
+"
+<div class="mx-checkbox">
+  <input id="single-checkbox" type="checkbox" name="terms" value="agree">
+  <label for="single-checkbox">I agree to the terms and conditions.</label>
 </div>
+"
 `;
 
-exports[`Form/Checkbox Checked smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-checkbox">
-    <input id="single-checkbox"
-           type="checkbox"
-           name="terms"
-           value="agree"
-           checked="checked"
-    >
-    <label for="single-checkbox">
-      I agree to the terms and conditions.
-    </label>
-  </div>
+exports[`Checked 1`] = `
+"
+<div class="mx-checkbox">
+  <input id="single-checkbox" type="checkbox" name="terms" value="agree" checked="checked">
+  <label for="single-checkbox">I agree to the terms and conditions.</label>
 </div>
+"
 `;

package/src/Form/Checkbox/__snapshots__/FormCheckbox.stories.tsx.snap

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Checkbox Group 1`] = `"<fieldset class="mx-form-item" role="group" id="react-aria-_r_1_"><legend>Checkbox group</legend><div class="mx-checkbox"><input id="_r_6_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="1"><label for="_r_6_">Option #1</label></div><div class="mx-checkbox"><input id="_r_7_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="2"><label for="_r_7_">Option #2</label></div><div class="mx-checkbox"><input id="_r_8_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="3"><label for="_r_8_">Option #3</label></div></fieldset>"`;
+
+exports[`Single 1`] = `"<div class="mx-checkbox"><input id="_r_0_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="option"><label for="_r_0_">Check me out</label></div>"`;

package/src/Form/Description/FormDescription.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./FormDescription"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
-  title: "Form/Description",
+  decorators: [Page],
   component: Component,
   args: {
     id: "mix-label",

package/src/Form/Description/__snapshots__/Description.stories.ts.snap

@@ -1,12 +1,8 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Form/Description Description smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-description"
-       id="help-description"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
+exports[`Description 1`] = `
+"<div class="mx-description" id="help-description" role="tooltip">
+  Help text that provides additional information about the field.
 </div>
+"
 `;

package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap

@@ -1,10 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Form/Description Description smoke-test 1`] = `
-<div id="mix-label-help"
-     role="tooltip"
-     class="mx-description"
->
-  Some help text
-</div>
-`;
+exports[`Description 1`] = `"<div id="mix-label-help" role="tooltip" class="mx-description">Some help text</div>"`;

package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap

@@ -1,23 +1,15 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Form/Description/FormStatus Message smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-error-message"
-       id="status-message"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
+exports[`Message 1`] = `
+"<div class="mx-error-message" id="status-message" role="tooltip">
+  Help text that provides additional information about the field.
 </div>
+"
 `;
 
-exports[`Form/Description/FormStatus Success smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-success-message"
-       id="status-message"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
+exports[`Success 1`] = `
+"<div class="mx-success-message" id="status-message" role="tooltip">
+  Help text that provides additional information about the field.
 </div>
+"
 `;

package/src/Form/Form/Form.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Form"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
-  title: "Form",
+  decorators: [Page],
   component: Component,
 }
 

package/src/Form/Form/FormTitle.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./FormTitle"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
-  title: "Form/FormTitle",
+  decorators: [Page],
   component: Component,
 }
 

package/src/Form/Form/__snapshots__/Form.stories.tsx.snap

@@ -1,6 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Form Form smoke-test 1`] = `
-<form>
-</form>
-`;
+exports[`Form 1`] = `"<form></form>"`;

package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap

@@ -1,9 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Form/FormTitle FormTitle smoke-test 1`] = `
-<h2 class="mx-title"
-    id="create-an-account"
->
-  Create an account
-</h2>
-`;
+exports[`Form Title 1`] = `"<h2 class="mx-title" id="create-an-account">Create an account</h2>"`;