@pnx-mixtape/mxds 0.0.23 → 0.0.26

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

@@ -1,63 +1,73 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Component/Pagination Pagination smoke-test 1`] = `
-<div class="mx-page default">
-  <nav class="mx-pagination"
-       aria-label="Pagination"
-  >
-    <ul class="mx-pagination__items">
-      <li class="mx-pagination__previous">
-        <a href="#">
-          <span class="mx-icon mx-icon--arrow-left">
-          </span>
-          <span>
-            Previous
-          </span>
-        </a>
-      </li>
-      <li class="mx-pagination__item">
-        <a href="#"
-           aria-current="page"
-        >
-          <span>
-            1
-          </span>
-        </a>
-      </li>
-      <li class="mx-pagination__item">
-        <a href="#">
-          <span>
-            2
-          </span>
-        </a>
-      </li>
-      <li class="mx-pagination__item">
-        <a href="#">
-          <span>
-            3
-          </span>
-        </a>
-      </li>
-      <li class="mx-pagination__ellipsis">
-        …
-      </li>
-      <li class="mx-pagination__item">
-        <a href="#">
-          <span>
-            10
-          </span>
-        </a>
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Pagination 1`] = `
+"<nav class="mx-pagination" aria-label="Pagination">
+  <ul class="mx-pagination__items">
+          <li class="mx-pagination__previous">
+        
+<a href="#">
+  
+<span class="mx-icon mx-icon--arrow-left"></span>
+
+  <span>Previous</span>
+    
+</a>
+
       </li>
-      <li class="mx-pagination__next">
-        <a href="#">
-          <span>
-            Next
-          </span>
-          <span class="mx-icon mx-icon--arrow-right">
-          </span>
-        </a>
+              <li class="mx-pagination__item">
+  
+<a href="#" aria-current="page">
+  
+  <span>1</span>
+    
+</a>
+
+</li>
+
+          <li class="mx-pagination__item">
+  
+<a href="#">
+  
+  <span>2</span>
+    
+</a>
+
+</li>
+
+          <li class="mx-pagination__item">
+  
+<a href="#">
+  
+  <span>3</span>
+    
+</a>
+
+</li>
+
+            <li class="mx-pagination__ellipsis">…</li>
+
+          <li class="mx-pagination__item">
+  
+<a href="#">
+  
+  <span>10</span>
+    
+</a>
+
+</li>
+
+              <li class="mx-pagination__next">
+        
+<a href="#">
+  
+  <span>Next</span>
+    
+<span class="mx-icon mx-icon--arrow-right"></span>
+
+</a>
+
       </li>
-    </ul>
-  </nav>
-</div>
+      </ul>
+</nav>
+"
 `;

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

@@ -1,63 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/Pagination Pagination smoke-test 1`] = `
-<nav class="mx-pagination"
-     aria-label="Pagination"
->
-  <ul class="mx-pagination__items">
-    <li class="mx-pagination__previous"
-        aria-hidden="true"
-    >
-      <button type="button"
-              disabled
-      >
-        <span class="mx-icon mx-icon--arrow-left">
-        </span>
-        <span>
-          previous
-        </span>
-      </button>
-    </li>
-    <li class="mx-pagination__item"
-        aria-current="step"
-    >
-      1
-    </li>
-    <li class="mx-pagination__item">
-      <button type="button"
-              data-page="2"
-      >
-        2
-      </button>
-    </li>
-    <li class="mx-pagination__item">
-      <button type="button"
-              data-page="3"
-      >
-        3
-      </button>
-    </li>
-    <li class="mx-pagination__ellipsis">
-      ...
-    </li>
-    <li class="mx-pagination__item">
-      <button type="button"
-              data-page="10"
-      >
-        10
-      </button>
-    </li>
-    <li class="mx-pagination__next">
-      <button type="button"
-              data-page="2"
-      >
-        <span>
-          next
-        </span>
-        <span class="mx-icon mx-icon--arrow-right">
-        </span>
-      </button>
-    </li>
-  </ul>
-</nav>
-`;
+exports[`Pagination 1`] = `"<nav class="mx-pagination" aria-label="Pagination"><ul class="mx-pagination__items"><li class="mx-pagination__previous" aria-hidden="true"><button type="button" disabled=""><span class="mx-icon mx-icon--arrow-left"></span><span>previous</span></button></li><li class="mx-pagination__item" aria-current="step">1</li><li class="mx-pagination__item"><button type="button" data-page="2">2</button></li><li class="mx-pagination__item"><button type="button" data-page="3">3</button></li><li class="mx-pagination__ellipsis">...</li><li class="mx-pagination__item"><button type="button" data-page="10">10</button></li><li class="mx-pagination__next"><button type="button" data-page="2"><span>next</span><span class="mx-icon mx-icon--arrow-right"></span></button></li></ul></nav>"`;

package/src/Component/Popover/Elements/Popover.ts

@@ -22,7 +22,11 @@ export default class Popover extends HTMLElement {
       new Polyfills(this.container)
     }
     // Polyfill popover (FF only)
-    if (!Object.hasOwn(HTMLElement, "popover")) {
+    if (
+      typeof HTMLElement !== "undefined" &&
+      typeof HTMLElement.prototype === "object" &&
+      "popover" in HTMLElement.prototype
+    ) {
       await import("@oddbird/popover-polyfill")
     }
   }

package/src/Component/Popover/Popover.stories.ts

@@ -7,6 +7,7 @@ import {
   Popover as PopoverType,
   PopoverPlacementModifier,
 } from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
 
 import "./popover.css"
 import "./Elements/Popover"
@@ -15,6 +16,7 @@ import "./Elements/Popover"
 import Button from "../../Atom/Button/button.twig"
 import Heading from "../../Atom/Heading/heading.twig"
 import Link from "../../Atom/Link/link.twig"
+import Icon from "../../Atom/Icon/icon.twig"
 
 // Button attributes needed for trigger.
 const triggerAttr = (id: string): DrupalAttribute => {
@@ -27,6 +29,10 @@ const triggerAttr = (id: string): DrupalAttribute => {
 /**
  * A simple floating Popover element, using the Popover and Anchor APIs (and polyfills).
  * It requires the `Popover` custom element javascript.
+ *
+ * Popovers usage should be limited. Only use on interactive elements (buttons) and
+ * always provide a consistent visual differentiator (eg question icon) when an element has
+ * a tooltip.
  */
 const meta: Meta<PopoverType> = {
   tags: ["autodocs", "ids-mvp"],
@@ -37,6 +43,9 @@ const meta: Meta<PopoverType> = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
     placement: PopoverPlacementModifier.BOTTOM,
     content:
@@ -122,6 +131,9 @@ export const Top: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-top"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -134,6 +146,9 @@ export const TopStart: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-top-start"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -146,6 +161,9 @@ export const TopEnd: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-top-end"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -158,6 +176,9 @@ export const Right: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-right"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -170,6 +191,9 @@ export const RightStart: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-right-start"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -182,6 +206,9 @@ export const RightEnd: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-right-end"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -194,6 +221,9 @@ export const Left: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-left"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -206,6 +236,9 @@ export const LeftStart: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-left-start"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -218,6 +251,9 @@ export const LeftEnd: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-left-end"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -230,6 +266,9 @@ export const Bottom: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-bottom"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -242,6 +281,9 @@ export const BottomStart: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-bottom-start"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }
@@ -254,6 +296,9 @@ export const BottomEnd: Story = {
       title: "Popover trigger",
       as: ButtonTypes.BUTTON,
       attributes: triggerAttr("popover-bottom-end"),
+      iconEnd: Icon({
+        icon: Icons.QUESTION,
+      }),
     }),
   },
 }