@pnx-mixtape/mxds 0.0.23 → 0.0.26

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

@@ -1,216 +1,43 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Tabs Tabs smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-tabs class="mx-tabs mx-tabs--lined"
-           id="tab-example"
-  >
-    <mx-dropmenu closeonclick="true">
-      <button id="unique-0"
-              class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
-              popovertarget="tab-example"
-              style="anchor-name: --tab-example"
-              hidden
-      >
-        Funk
-      </button>
-      <div class="mx-popover mx-drop-menu"
-           id="tab-example"
-           aria-describedby="unique-0"
-           style="position-anchor: --tab-example"
-           data-placement="bottom-start"
-           popover
-           role="tablist"
-      >
-        <button type="button"
-                role="tab"
-                aria-controls="unique-1"
-                aria-selected="false"
-        >
-          Funk
-        </button>
-        <button type="button"
-                role="tab"
-                aria-controls="unique-2"
-                aria-selected="false"
-        >
-          Soul
-        </button>
-        <button type="button"
-                role="tab"
-                aria-controls="unique-3"
-                aria-selected="false"
-        >
-          Motown
-        </button>
-      </div>
-    </mx-dropmenu>
-    <div class="mx-tabs__list"
-         role="tablist"
-    >
-      <button type="button"
-              role="tab"
-              aria-controls="unique-4"
-              aria-selected="true"
-              tab-index="0"
-      >
-        Funk
-      </button>
-      <button type="button"
-              role="tab"
-              aria-controls="unique-5"
-              aria-selected="false"
-              tab-index="-1"
-      >
-        Soul
-      </button>
-      <button type="button"
-              role="tab"
-              aria-controls="unique-6"
-              aria-selected="false"
-              tab-index="-1"
-      >
-        Motown
-      </button>
-    </div>
-    <div class="mx-tabs__panel mx-vertical-flow mx-container"
-         id="unique-1"
-         data-tab="Funk"
-         role="tabpanel"
-         tabindex="0"
-         aria-label="Funk"
-    >
-      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.
-    </div>
-    <div class="mx-tabs__panel mx-vertical-flow mx-container"
-         id="unique-2"
-         data-tab="Soul"
-         role="tabpanel"
-         tabindex="0"
-         aria-label="Soul"
-         inert
-    >
-      Soul music 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.
-    </div>
-    <div class="mx-tabs__panel mx-vertical-flow mx-container"
-         id="unique-3"
-         data-tab="Motown"
-         role="tabpanel"
-         tabindex="0"
-         aria-label="Motown"
-         inert
-    >
-      Motown lorem 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.
-    </div>
-  </mx-tabs>
+exports[`Tabs 1`] = `
+"
+
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="tab-example-target" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="tab-example-target" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="tab-1" aria-selected="false">Funk</button><button type="button" role="tab" aria-controls="tab-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="tab-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="tab-1" aria-selected="true" tab-index="0">Funk</button><button type="button" role="tab" aria-controls="tab-2" aria-selected="false" tab-index="-1">Soul</button><button type="button" role="tab" aria-controls="tab-3" aria-selected="false" tab-index="-1">Motown</button></div>
+      <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-1" data-tab="Funk" role="tabpanel" tabindex="0" aria-label="Funk">
+  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.
+</div>
+
+      <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-2" data-tab="Soul" role="tabpanel" tabindex="0" aria-label="Soul" inert="">
+  Soul music 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.
+</div>
+
+      <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-3" data-tab="Motown" role="tabpanel" tabindex="0" aria-label="Motown" inert="">
+  Motown lorem 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.
 </div>
-`;
 
-exports[`Component/Tabs WithHeading smoke-test 1`] = `
-<div class="mx-page default">
-  <h2>
-    Tabs heading
-  </h2>
-  <mx-tabs class="mx-tabs mx-tabs--lined"
-           id="tab-example"
-  >
-    <mx-dropmenu closeonclick="true">
-      <button id="unique-0"
-              class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
-              popovertarget="tab-example"
-              style="anchor-name: --tab-example"
-              hidden
-      >
-        Funk
-      </button>
-      <div class="mx-popover mx-drop-menu"
-           id="tab-example"
-           aria-describedby="unique-0"
-           style="position-anchor: --tab-example"
-           data-placement="bottom-start"
-           popover
-           role="tablist"
-      >
-        <button type="button"
-                role="tab"
-                aria-controls="unique-1"
-                aria-selected="false"
-        >
-          Funk
-        </button>
-        <button type="button"
-                role="tab"
-                aria-controls="unique-2"
-                aria-selected="false"
-        >
-          Soul
-        </button>
-        <button type="button"
-                role="tab"
-                aria-controls="unique-3"
-                aria-selected="false"
-        >
-          Motown
-        </button>
-      </div>
-    </mx-dropmenu>
-    <div class="mx-tabs__list"
-         role="tablist"
-    >
-      <button type="button"
-              role="tab"
-              aria-controls="unique-4"
-              aria-selected="true"
-              tab-index="0"
-      >
-        Funk
-      </button>
-      <button type="button"
-              role="tab"
-              aria-controls="unique-5"
-              aria-selected="false"
-              tab-index="-1"
-      >
-        Soul
-      </button>
-      <button type="button"
-              role="tab"
-              aria-controls="unique-6"
-              aria-selected="false"
-              tab-index="-1"
-      >
-        Motown
-      </button>
-    </div>
-    <div class="mx-tabs__panel mx-vertical-flow mx-container"
-         id="unique-1"
-         data-tab="Funk"
-         role="tabpanel"
-         tabindex="0"
-         aria-label="Funk"
-    >
-      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.
-    </div>
-    <div class="mx-tabs__panel mx-vertical-flow mx-container"
-         id="unique-2"
-         data-tab="Soul"
-         role="tabpanel"
-         tabindex="0"
-         aria-label="Soul"
-         inert
-    >
-      Soul music 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.
-    </div>
-    <div class="mx-tabs__panel mx-vertical-flow mx-container"
-         id="unique-3"
-         data-tab="Motown"
-         role="tabpanel"
-         tabindex="0"
-         aria-label="Motown"
-         inert
-    >
-      Motown lorem 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.
-    </div>
   </mx-tabs>
+"
+`;
+
+exports[`With Heading 1`] = `
+"
+
+<h2>Tabs heading</h2>
+
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="tab-example-target" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="tab-example-target" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="tab-1" aria-selected="false">Funk</button><button type="button" role="tab" aria-controls="tab-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="tab-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="tab-1" aria-selected="true" tab-index="0">Funk</button><button type="button" role="tab" aria-controls="tab-2" aria-selected="false" tab-index="-1">Soul</button><button type="button" role="tab" aria-controls="tab-3" aria-selected="false" tab-index="-1">Motown</button></div>
+      <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-1" data-tab="Funk" role="tabpanel" tabindex="0" aria-label="Funk">
+  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.
+</div>
+
+      <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-2" data-tab="Soul" role="tabpanel" tabindex="0" aria-label="Soul" inert="">
+  Soul music 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.
 </div>
+
+      <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-3" data-tab="Motown" role="tabpanel" tabindex="0" aria-label="Motown" inert="">
+  Motown lorem 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.
+</div>
+
+  </mx-tabs>
+"
 `;

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

@@ -1,117 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Tabs Default smoke-test 1`] = `
-<div class="mx-tabs">
-  <div class="mobile-only">
-    <button id="unique-0"
-            type="button"
-            class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-drop-menu__trigger"
-            popovertarget="tabs-storybook"
-            style="anchor-name: --drop-menu-tabs-storybook;"
-    >
-      Tab 1
-    </button>
-    <div id="tabs-storybook"
-         class="mx-drop-menu"
-         popover
-         aria-labelledby="unique-0"
-         aria-describedby="unique-0"
-         role="tablist"
-         style="position-anchor: --drop-menu-tabs-storybook;"
-    >
-      <div id="tabs-storybook-description"
-           class="sr-only"
-      >
-        Results will update when you make a selection. Press escape to close.
-      </div>
-      <button type="button"
-              data-id="tab-1"
-              aria-checked="true"
-              role="tab"
-              aria-controls="unique-1"
-      >
-        Tab 1
-      </button>
-      <button type="button"
-              data-id="tab-2"
-              aria-checked="false"
-              role="tab"
-              aria-controls="unique-2"
-      >
-        Tab 2
-      </button>
-      <button type="button"
-              data-id="tab-3"
-              aria-checked="false"
-              role="tab"
-              aria-controls="unique-3"
-      >
-        Tab 3
-      </button>
-    </div>
-  </div>
-  <div class="mx-tabs__list desktop-only"
-       role="tablist"
-  >
-    <button id="unique-1"
-            aria-controls="unique-4"
-            role="tab"
-            aria-selected="true"
-            tabindex="0"
-            type="button"
-    >
-      Tab 1
-    </button>
-    <button id="unique-2"
-            aria-controls="unique-5"
-            role="tab"
-            aria-selected="false"
-            tabindex="-1"
-            type="button"
-    >
-      Tab 2
-    </button>
-    <button id="unique-3"
-            aria-controls="unique-6"
-            role="tab"
-            aria-selected="false"
-            tabindex="-1"
-            type="button"
-    >
-      Tab 3
-    </button>
-  </div>
-  <div id="unique-4"
-       class="mx-tabs__panel mx-vertical-flow mx-section--l"
-       aria-labelledby="unique-7"
-       role="tabpanel"
-       tabindex="0"
-  >
-    <p>
-      This is tab 1
-    </p>
-  </div>
-  <div id="unique-5"
-       class="mx-tabs__panel mx-vertical-flow mx-section--l"
-       inert
-       aria-labelledby="unique-8"
-       role="tabpanel"
-       tabindex="0"
-  >
-    <p>
-      This is tab 2
-    </p>
-  </div>
-  <div id="unique-6"
-       class="mx-tabs__panel mx-vertical-flow mx-section--l"
-       inert
-       aria-labelledby="unique-9"
-       role="tabpanel"
-       tabindex="0"
-  >
-    <p>
-      This is tab 3
-    </p>
-  </div>
-</div>
-`;
+exports[`Default 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-drop-menu__trigger" popovertarget="tabs-storybook" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><div id="tabs-storybook" class="mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><div id="tabs-storybook-description" class="sr-only">Results will update when you make a selection. Press escape to close.</div><button type="button" data-id="tab-1" aria-checked="true" role="tab" aria-controls="tab-1">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3">Tab 3</button></div></div><div class="mx-tabs__list desktop-only" role="tablist"><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0"><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;

package/src/Component/Tag/Tag.stories.tsx

@@ -1,9 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Tag"
 import "./tag.css"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
   component: Component,
+  decorators: [Page],
   args: {
     children: "Tag name",
   },

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

@@ -1,70 +1,46 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Tag Checkbox smoke-test 1`] = `
-<div class="mx-page default">
-  <ul class="mx-tags">
-    <li>
-      <div class="mx-tag">
-        <input type="checkbox"
-               id="music"
-               name="tag"
-               value="music"
-        >
-        <label for="music">
-          Music
-        </label>
-      </div>
-    </li>
-    <li>
-      <div class="mx-tag">
-        <input type="checkbox"
-               id="news"
-               name="tag"
-               value="news"
-        >
-        <label for="news">
-          News
-        </label>
-      </div>
-    </li>
+exports[`Checkbox 1`] = `
+"
+<ul class="mx-tags">
+      <li>
+                  <div class="mx-tag">
+            <input type="checkbox" id="music" name="tag" value="music">
+            <label for="music">Music</label>
+          </div>
+            </li>
+      <li>
+                  <div class="mx-tag">
+            <input type="checkbox" id="news" name="tag" value="news">
+            <label for="news">News</label>
+          </div>
+            </li>
   </ul>
-</div>
+"
 `;
 
-exports[`Component/Tag Link smoke-test 1`] = `
-<div class="mx-page default">
-  <ul class="mx-tags">
-    <li>
-      <a class="mx-tag"
-         href="#0"
-      >
-        Music
-      </a>
-    </li>
-    <li>
-      <a class="mx-tag"
-         href="#0"
-      >
-        News
-      </a>
-    </li>
+exports[`Link 1`] = `
+"
+<ul class="mx-tags">
+      <li>
+                    <a class="mx-tag" href="#0">Music</a>
+            </li>
+      <li>
+                    <a class="mx-tag" href="#0">News</a>
+            </li>
   </ul>
-</div>
+"
 `;
 
-exports[`Component/Tag Tag smoke-test 1`] = `
-<div class="mx-page default">
-  <ul class="mx-tags">
-    <li>
-      <span class="mx-tag">
-        Music
-      </span>
-    </li>
-    <li>
-      <span class="mx-tag">
-        News
-      </span>
-    </li>
+exports[`Tag 1`] = `
+"
+<ul class="mx-tags">
+      <li>
+                    <span class="mx-tag">Music</span>
+            </li>
+      <li>
+                    <span class="mx-tag">News</span>
+            </li>
   </ul>
-</div>
+"
 `;

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

@@ -1,7 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Tag Tag smoke-test 1`] = `
-<div class="mx-tag">
-  Tag name
-</div>
-`;
+exports[`Tag 1`] = `"<div class="mx-tag">Tag name</div>"`;

package/src/Component/Tag/tags.twig

@@ -1,13 +1,13 @@
-{% set classes = ['mx-tag'] %}
-{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set attributes = (attributes ?? create_attribute()).addClass('mx-tags') %}
+{% set tagAttributes = (tagAttributes ?? create_attribute()).addClass('mx-tag') %}
 
-<ul class="mx-tags">
+<ul{{ attributes }}>
   {% for item in items %}
     <li>
         {% if type == "link" %}
-            <a{{ attributes}} href="{{ item.href }}">{{ item.title }}</a>
+            <a{{ tagAttributes}} href="{{ item.href }}">{{ item.title }}</a>
         {% elseif type == "checkbox" %}
-          <div {{ attributes }}>
+          <div{{ tagAttributes }}>
             <input type="checkbox"
                    id="{{ item.id }}"
                    name="{{ item.name }}"
@@ -16,7 +16,7 @@
             <label for="{{ item.id }}">{{ item.label }}</label>
           </div>
         {% else %}
-            <span{{ attributes }}>{{ item }}</span>
+            <span{{ tagAttributes }}>{{ item }}</span>
         {% endif %}
     </li>
   {% endfor %}