@pnx-mixtape/mxds 0.0.24 → 0.0.26

package/src/Component/DropMenu/DropMenu.tsx

@@ -46,8 +46,7 @@ const DropMenu = ({
         id={triggerId}
         type="button"
         className={classNames([...triggerClassNames, "mx-drop-menu__trigger"])}
-        popovertarget={dropMenuId}
-        // @ts-expect-error anchorName is a valid style.
+        popoverTarget={dropMenuId}
         style={{ anchorName: `--drop-menu-${dropMenuId}` }}
       >
         {label}
@@ -56,7 +55,6 @@ const DropMenu = ({
         id={dropMenuId}
         className={classNames("mx-drop-menu", popoverClassName)}
         popover=""
-        // @ts-expect-error positionAnchor is a valid style.
         style={{ positionAnchor: `--drop-menu-${dropMenuId}` }}
         ref={popoverRef}
         aria-labelledby={ariaLabel ? null : triggerId}

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

@@ -1,76 +1,29 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/DropMenu Buttons smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-dropmenu closeonclick>
-    <button id="unique-0"
-            class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
-            popovertarget="dropdown-menu"
-            style="anchor-name: --dropdown-menu"
-    >
-      Categories
-    </button>
-    <div class="mx-popover mx-drop-menu"
-         id="dropdown-menu"
-         aria-describedby="unique-0"
-         style="position-anchor: --dropdown-menu"
-         data-placement="bottom-start"
-         popover
-         role="menu"
-    >
-      <button type="button"
-              data-id="news"
-              role="menuitemradio"
-              aria-checked="false"
-      >
-        News
-      </button>
-      <button type="button"
-              data-id="events"
-              role="menuitemradio"
-              aria-checked="false"
-      >
-        Events
-      </button>
-      <button type="button"
-              data-id="stories"
-              role="menuitemradio"
-              aria-checked="false"
-      >
-        Stories
-      </button>
-    </div>
-  </mx-dropmenu>
-</div>
+exports[`Buttons 1`] = `
+"<mx-dropmenu closeonclick="">
+<button id="dropdown-menu-target" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
+  Categories
+</button>
+<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="dropdown-menu-target" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
+            <button type="button" data-id="news" role="menuitemradio" aria-checked="false">News</button>
+                <button type="button" data-id="events" role="menuitemradio" aria-checked="false">Events</button>
+                <button type="button" data-id="stories" role="menuitemradio" aria-checked="false">Stories</button>
+      </div>
+</mx-dropmenu>
+"
 `;
 
-exports[`Component/DropMenu DropMenu smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-dropmenu closeonclick>
-    <button id="unique-0"
-            class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
-            popovertarget="dropdown-menu"
-            style="anchor-name: --dropdown-menu"
-    >
-      Categories
-    </button>
-    <div class="mx-popover mx-drop-menu"
-         id="dropdown-menu"
-         aria-describedby="unique-0"
-         style="position-anchor: --dropdown-menu"
-         data-placement="bottom-start"
-         popover
-    >
-      <a href="#news">
-        News
-      </a>
-      <a href="#events">
-        Events
-      </a>
-      <a href="#stories">
-        Stories
-      </a>
-    </div>
-  </mx-dropmenu>
-</div>
+exports[`Drop Menu 1`] = `
+"<mx-dropmenu closeonclick="">
+<button id="dropdown-menu-target" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
+  Categories
+</button>
+<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="dropdown-menu-target" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="">
+            <a href="#news">News</a>
+                <a href="#events">Events</a>
+                <a href="#stories">Stories</a>
+      </div>
+</mx-dropmenu>
+"
 `;

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

@@ -1,47 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/DropMenu DropMenu smoke-test 1`] = `
-<button id="unique-0"
-        type="button"
-        class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-drop-menu__trigger"
-        popovertarget="drop-menu-storybook"
-        style="anchor-name: --drop-menu-drop-menu-storybook;"
->
-  Categories
-</button>
-<div id="drop-menu-storybook"
-     class="mx-drop-menu"
-     popover
-     aria-labelledby="unique-0"
-     aria-describedby="unique-0"
-     role="menu"
-     style="position-anchor: --drop-menu-drop-menu-storybook;"
->
-  <div id="drop-menu-storybook-description"
-       class="sr-only"
-  >
-    Results will update when you make a selection. Press escape to close.
-  </div>
-  <button type="button"
-          data-id="news"
-          aria-checked="false"
-          role="menuitemradio"
-  >
-    News
-  </button>
-  <button type="button"
-          data-id="events"
-          aria-checked="false"
-          role="menuitemradio"
-  >
-    Events
-  </button>
-  <button type="button"
-          data-id="stories"
-          aria-checked="false"
-          role="menuitemradio"
-  >
-    Stories
-  </button>
-</div>
-`;
+exports[`Drop Menu 1`] = `"<button id="drop-menu-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-drop-menu__trigger" popovertarget="drop-menu-storybook" style="anchor-name: --drop-menu-drop-menu-storybook;">Categories</button><div id="drop-menu-storybook" class="mx-drop-menu" popover="" aria-labelledby="drop-menu-storybook-target" aria-describedby="drop-menu-storybook-description" role="menu" style="position-anchor: --drop-menu-drop-menu-storybook;"><div id="drop-menu-storybook-description" class="sr-only">Results will update when you make a selection. Press escape to close.</div><button type="button" data-id="news" aria-checked="false" role="menuitemradio">News</button><button type="button" data-id="events" aria-checked="false" role="menuitemradio">Events</button><button type="button" data-id="stories" aria-checked="false" role="menuitemradio">Stories</button></div>"`;

package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap

@@ -1,135 +1,94 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Filters/FilterItem Collapsible smoke-test 1`] = `
-<div class="mx-page default">
+exports[`Collapsible 1`] = `
+"
   <mx-accordion>
-    <details class="mx-accordion mx-filter-item"
-             id="filter-categories-container"
-             open
-    >
+    <details class="mx-accordion mx-filter-item" id="filter-categories-container" open="">
       <summary class="mx-accordion__toggle">
         Categories
-        <span class="mx-tag"
-              data-counter
-        >
-        </span>
-        <span class="mx-icon mx-icon--chevron-down"
-              aria-hidden="true"
-        >
-        </span>
+        <span class="mx-tag" data-counter=""></span>        <span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span>
       </summary>
-      <fieldset class="mx-form-item mx-fieldset mx-accordion__content">
-        <div class="mx-checkbox">
-          <input id="category-news"
-                 type="checkbox"
-                 name="categories"
-                 value="news"
-                 checked="checked"
-          >
-          <label for="category-news">
-            News
-          </label>
-        </div>
-        <div class="mx-checkbox">
-          <input id="category-media"
-                 type="checkbox"
-                 name="categories"
-                 value="media"
-                 checked="checked"
-          >
-          <label for="category-media">
-            Media Releases
-          </label>
-        </div>
-        <div class="mx-checkbox">
-          <input id="category-publications"
-                 type="checkbox"
-                 name="categories"
-                 value="publications"
-          >
-          <label for="category-publications">
-            Publications
-          </label>
-        </div>
-      </fieldset>
+
+<fieldset class="mx-form-item mx-fieldset mx-accordion__content">
+  
+  
+                    
+<div class="mx-checkbox">
+  <input id="category-news" type="checkbox" name="categories" value="news" checked="checked">
+  <label for="category-news">News</label>
+</div>
+
+              
+<div class="mx-checkbox">
+  <input id="category-media" type="checkbox" name="categories" value="media" checked="checked">
+  <label for="category-media">Media Releases</label>
+</div>
+
+              
+<div class="mx-checkbox">
+  <input id="category-publications" type="checkbox" name="categories" value="publications">
+  <label for="category-publications">Publications</label>
+</div>
+
+              
+  
+</fieldset>
+
     </details>
   </mx-accordion>
-</div>
+"
 `;
 
-exports[`Component/Filters/FilterItem Filters smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-form-item mx-filter-item">
-    <label class="mx-label"
-           for="filter-keywords"
-    >
-      Keywords
-    </label>
-    <div class="mx-description"
-         id="unique-0"
-         role="tooltip"
-    >
-      Search by keywords
-    </div>
-    <input class="mx-input__text"
-           id="filter-keywords"
-           name="example-keywords"
-           type="text"
-           value
-           aria-describedby="unique-0"
-    >
-  </div>
+exports[`Filters 1`] = `
+"
+
+<div class="mx-form-item mx-filter-item">
+    
+<label class="mx-label" for="filter-keywords">Keywords</label>
+
+  <div class="mx-description" id="help-filter-keywords" role="tooltip">
+  Search by keywords
 </div>
+
+        
+<input class="mx-input__text" id="filter-keywords" name="example-keywords" type="text" value="" aria-describedby="help-filter-keywords">
+
+    
+  
+</div>
+
+"
 `;
 
-exports[`Component/Filters/FilterItem ShownItems smoke-test 1`] = `
-<div class="mx-page default">
-  <fieldset class="mx-form-item mx-fieldset mx-filter-item">
-    <label class="mx-label"
-           for="filter-categories"
-    >
-      Categories
-    </label>
-    <div class="mx-checkbox">
-      <input id="category-news"
-             type="checkbox"
-             name="categories"
-             value="news"
-             checked="checked"
-      >
-      <label for="category-news">
-        News
-      </label>
-    </div>
-    <div class="mx-checkbox">
-      <input id="category-media"
-             type="checkbox"
-             name="categories"
-             value="media"
-             checked="checked"
-      >
-      <label for="category-media">
-        Media Releases
-      </label>
-    </div>
-    <div data-hide>
-      <div class="mx-checkbox">
-        <input id="category-publications"
-               type="checkbox"
-               name="categories"
-               value="publications"
-        >
-        <label for="category-publications">
-          Publications
-        </label>
-      </div>
-    </div>
-    <button data-show
-            class="mx-button mx-button--light"
-            type="button"
-    >
-      Show all (3)
-    </button>
-  </fieldset>
+exports[`Shown Items 1`] = `
+"
+
+<fieldset class="mx-form-item mx-fieldset mx-filter-item">
+    
+<label class="mx-label" for="filter-categories">Categories</label>
+
+  
+                    
+<div class="mx-checkbox">
+  <input id="category-news" type="checkbox" name="categories" value="news" checked="checked">
+  <label for="category-news">News</label>
+</div>
+              
+<div class="mx-checkbox">
+  <input id="category-media" type="checkbox" name="categories" value="media" checked="checked">
+  <label for="category-media">Media Releases</label>
 </div>
+                          <div data-hide="">
+                                                      
+<div class="mx-checkbox">
+  <input id="category-publications" type="checkbox" name="categories" value="publications">
+  <label for="category-publications">Publications</label>
+</div>
+              </div>
+      <button data-show="" class="mx-button mx-button--light" type="button">Show all (3)</button>
+        
+  
+</fieldset>
+
+"
 `;