@pnx-mixtape/mxds 0.0.21 → 0.0.23

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

@@ -0,0 +1,508 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Component/Popover Bottom smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-bottom"
+            style="anchor-name: --popover-bottom"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-bottom"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-bottom"
+         data-placement="bottom"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover BottomEnd smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-bottom-end"
+            style="anchor-name: --popover-bottom-end"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-bottom-end"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-bottom-end"
+         data-placement="bottom-end"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover BottomStart smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-bottom-start"
+            style="anchor-name: --popover-bottom-start"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-bottom-start"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-bottom-start"
+         data-placement="bottom-start"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover Left smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-left"
+            style="anchor-name: --popover-left"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-left"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-left"
+         data-placement="left"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover LeftEnd smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-left-end"
+            style="anchor-name: --popover-left-end"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-left-end"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-left-end"
+         data-placement="left-end"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover LeftStart smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-left-start"
+            style="anchor-name: --popover-left-start"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-left-start"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-left-start"
+         data-placement="left-start"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover Popover smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover"
+            style="anchor-name: --popover"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover"
+         data-placement="bottom"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover Right smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-right"
+            style="anchor-name: --popover-right"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-right"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-right"
+         data-placement="right"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover RightEnd smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-right-end"
+            style="anchor-name: --popover-right-end"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-right-end"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-right-end"
+         data-placement="right-end"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover RightStart smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-right-start"
+            style="anchor-name: --popover-right-start"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-right-start"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-right-start"
+         data-placement="right-start"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover Top smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-top"
+            style="anchor-name: --popover-top"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-top"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-top"
+         data-placement="top"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover TopEnd smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-top-end"
+            style="anchor-name: --popover-top-end"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-top-end"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-top-end"
+         data-placement="top-end"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;
+
+exports[`Component/Popover TopStart smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-popover>
+    <button id="unique-0"
+            popovertarget="popover-top-start"
+            style="anchor-name: --popover-top-start"
+            class="mx-button"
+            type="button"
+    >
+      <span>
+        Popover trigger
+      </span>
+    </button>
+    <div class="mx-popover"
+         id="popover-top-start"
+         aria-describedby="unique-0"
+         style="position-anchor: --popover-top-start"
+         data-placement="top-start"
+         role="tooltip"
+         popover
+    >
+      <div class="mx-rich-text mx-vertical-flow">
+        <h2>
+          Popover heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman.
+        </p>
+        <a href="#">
+          <span>
+            Learn more
+          </span>
+        </a>
+      </div>
+    </div>
+  </mx-popover>
+</div>
+`;

package/src/Component/{DropMenu → Popover}/polyfills.js

@@ -8,9 +8,7 @@ import { computePosition } from "@floating-ui/dom"
 export default class Polyfills {
   constructor(popover) {
     this.popover = popover
-    this.trigger = document.querySelector(
-      `[popovertarget="${popover.getAttribute("id")}"`,
-    )
+    this.trigger = document.querySelector(`[popovertarget="${popover.getAttribute("id")}"`)
     this.positionPopover = this.positionPopover.bind(this)
     this.popover.addEventListener("toggle", this.positionPopover)
   }
@@ -18,11 +16,15 @@ export default class Polyfills {
   positionPopover = ({ newState }) => {
     if (newState === "open") {
       computePosition(this.trigger, this.popover, {
-        placement: "bottom-start",
+        placement: this.placement || "bottom-start",
       }).then(({ x, y }) => {
         this.popover.style.insetInlineStart = `${x}px`
         this.popover.style.insetBlockStart = `${y}px`
       })
     }
   }
+
+  get placement() {
+    return this.popover.getAttribute("data-placement")
+  }
 }

package/src/Component/Popover/popover.css

@@ -0,0 +1,113 @@
+/**
+ * Popover
+ *
+ * **Experimental** Using new CSS Anchoring and Popover API's, requires JS polyfill.
+ */
+
+@layer design-system.defaults {
+  mx-popover {
+    display: block;
+  }
+}
+
+@layer design-system.components {
+  .mx-popover__trigger:has(~ :popover-open) {
+    &::before,
+    & .mx-icon--chevron-down {
+      rotate: 180deg;
+    }
+  }
+
+  :where(.mx-popover) {
+    display: none;
+    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)));
+    border-radius: var(--popover-radius, var(--border-radius));
+    box-shadow: var(--popover-shadow, var(--box-shadow));
+    max-inline-size: var(--popover-width, 30ch);
+    margin-block: var(--popover-top, var(--spacing-xxxs)) 0;
+    margin-inline: 0;
+    position-area: block-end center;
+    position-try-fallbacks: flip-block flip-inline;
+    inline-size: max-content;
+    min-inline-size: anchor-size(width);
+
+    &[data-placement="bottom-start"] {
+      position-area: block-end span-inline-end;
+    }
+
+    &[data-placement="bottom-end"] {
+      position-area: block-end span-inline-start;
+    }
+
+    &[data-placement="top"] {
+      position-area: block-start center;
+      margin-block: 0 var(--popover-top, var(--spacing-xxxs));
+    }
+
+    &[data-placement="top-start"] {
+      position-area: block-start span-inline-end;
+      margin-block: 0 var(--popover-top, var(--spacing-xxxs));
+    }
+
+    &[data-placement="top-end"] {
+      position-area: block-start span-inline-start;
+      margin-block: 0 var(--popover-top, var(--spacing-xxxs));
+    }
+
+    &[data-placement="right"] {
+      position-area: center inline-end;
+      margin-block: 0;
+      margin-inline: var(--popover-top, var(--spacing-xxs)) 0;
+    }
+
+    &[data-placement="right-start"] {
+      position-area: span-block-end inline-end;
+      margin-block: 0;
+      margin-inline: var(--popover-top, var(--spacing-xxs)) 0;
+    }
+
+    &[data-placement="right-end"] {
+      position-area: span-block-start inline-end;
+      margin-block: 0;
+      margin-inline: var(--popover-top, var(--spacing-xxs)) 0;
+    }
+
+    &[data-placement="left"] {
+      position-area: center inline-start;
+      margin-block: 0;
+      margin-inline: 0 var(--popover-top, var(--spacing-xxs));
+    }
+
+    &[data-placement="left-start"] {
+      position-area: span-block-end inline-start;
+      margin-block: 0;
+      margin-inline: 0 var(--popover-top, var(--spacing-xxs));
+    }
+
+    &[data-placement="left-end"] {
+      position-area: span-block-start inline-start;
+      margin-block: 0;
+      margin-inline: 0 var(--popover-top, var(--spacing-xxs));
+    }
+
+    &:popover-open {
+      opacity: 1;
+      display: block;
+
+      @starting-style {
+        opacity: 0;
+        display: block;
+      }
+    }
+
+    & :is(h2, h3) {
+      --heading-font-size: var(--font-size-m);
+    }
+  }
+}

package/src/Component/Popover/popover.entry.js

@@ -0,0 +1 @@
+import "./Elements/Popover"

package/src/Component/Popover/popover.twig

@@ -0,0 +1,27 @@
+<mx-popover>
+  {% set id = id|default('popover') %}
+  {% set name = name|default(id ~ '-target') %}
+  {#
+    trigger button requires the following attributes;
+
+    id="{{ name }}"
+    popovertarget="{{ id }}"
+    style="anchor-name: --{{ id }}"
+  #}
+  {{ trigger }}
+  <div
+      class="mx-popover"
+      id="{{ id }}"
+      aria-describedby="{{ name }}"
+      style="position-anchor: --{{ id }}"
+      data-placement="{{ placement }}"
+      role="tooltip"
+      popover
+  >
+    <div class="mx-rich-text mx-vertical-flow">
+      {{ title }}
+      {{ content }}
+      {{ link }}
+    </div>
+  </div>
+</mx-popover>

package/src/Component/ResultsBar/Components/ResultsBarInfo.tsx

@@ -6,16 +6,11 @@ type ResultsBarInfoProps = {
   total: number
 }
 
-const ResultsBarInfo = ({
-  number,
-  pageCount,
-  total,
-}: ResultsBarInfoProps): JSX.Element => (
+const ResultsBarInfo = ({ number, pageCount, total }: ResultsBarInfoProps): JSX.Element => (
   <>
     {total > 0 ? (
       <span aria-live="polite">
-        Showing results {number} - {pageCount > total ? total : pageCount} of{" "}
-        {total} results
+        Showing results {number} - {pageCount > total ? total : pageCount} of {total} results
       </span>
     ) : (
       <span aria-live="assertive" aria-atomic="true">