@pnx-mixtape/mxds 0.0.21 → 0.0.23

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Pagination Pagination smoke-test 1`] = `
 <div class="mx-page default">
@@ -8,7 +8,7 @@ exports[`Component/Pagination Pagination smoke-test 1`] = `
     <ul class="mx-pagination__items">
       <li class="mx-pagination__previous">
         <a href="#">
-          <span class="mx-icon mx-icon--arrow-left ">
+          <span class="mx-icon mx-icon--arrow-left">
           </span>
           <span>
             Previous
@@ -53,7 +53,7 @@ exports[`Component/Pagination Pagination smoke-test 1`] = `
           <span>
             Next
           </span>
-          <span class="mx-icon mx-icon--arrow-right ">
+          <span class="mx-icon mx-icon--arrow-right">
           </span>
         </a>
       </li>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Pagination Pagination smoke-test 1`] = `
 <nav class="mx-pagination"

package/src/Component/Pagination/pagination.css

@@ -24,10 +24,7 @@
 
     & :is(a, button, [aria-current="page"], [aria-current="step"]) {
       text-decoration-line: none;
-      color: var(
-        --pagination-foreground,
-        var(--foreground, var(--colour-foreground))
-      );
+      color: var(--pagination-foreground, var(--foreground, var(--colour-foreground)));
       display: flex;
       block-size: var(--spacing-l);
       line-height: var(--spacing-l);

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

@@ -0,0 +1,55 @@
+/**
+ * Popover
+ * @file Create a Popover using the Popover and Anchor APIs.
+ * Once browser support improves this file won't be needed.
+ * Currently mostly adds polyfills.
+ */
+
+export default class Popover extends HTMLElement {
+  internals_: ElementInternals
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+  }
+
+  async connectedCallback() {
+    if (!this.container || !this.trigger) return
+
+    // Polyfill anchor (everywhere so far).
+    if (!("anchorName" in document.documentElement.style)) {
+      const { default: Polyfills } = await import("../polyfills.js")
+      new Polyfills(this.container)
+    }
+    // Polyfill popover (FF only)
+    if (!Object.hasOwn(HTMLElement, "popover")) {
+      await import("@oddbird/popover-polyfill")
+    }
+  }
+
+  get container(): HTMLDivElement | null {
+    const menu: HTMLDivElement = this.querySelector("[popover]")
+    if (!menu) {
+      throw new Error(`${this.localName} must contain a <div popover> element.`)
+    }
+    return menu
+  }
+
+  get trigger(): HTMLButtonElement | null {
+    const trigger: HTMLButtonElement = this.querySelector(`[popovertarget=${this.container?.id}]`)
+    if (!trigger) {
+      throw new Error(
+        `${this.localName} must contain a <button popovertarget="${this.container.id}">`,
+      )
+    }
+    return trigger
+  }
+}
+
+if (!customElements.get("mx-popover")) customElements.define("mx-popover", Popover)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-popover": Popover
+  }
+}

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

@@ -0,0 +1,259 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import DrupalAttribute from "drupal-attribute"
+import Component from "./popover.twig"
+import {
+  ButtonTypes,
+  HeadingTypes,
+  Popover as PopoverType,
+  PopoverPlacementModifier,
+} from "@pnx-mixtape/ids-shape"
+
+import "./popover.css"
+import "./Elements/Popover"
+
+// Deps.
+import Button from "../../Atom/Button/button.twig"
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+
+// Button attributes needed for trigger.
+const triggerAttr = (id: string): DrupalAttribute => {
+  const attr = new DrupalAttribute()?.setAttribute("id", `${id}-target`)
+  attr?.setAttribute("popovertarget", id)
+  attr?.setAttribute("style", `anchor-name: --${id}`)
+  return attr
+}
+
+/**
+ * A simple floating Popover element, using the Popover and Anchor APIs (and polyfills).
+ * It requires the `Popover` custom element javascript.
+ */
+const meta: Meta<PopoverType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    id: "popover",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover"),
+    }),
+    placement: PopoverPlacementModifier.BOTTOM,
+    content:
+      "<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>",
+    title: Heading({
+      title: "Popover heading",
+      as: HeadingTypes.TWO,
+    }),
+    link: Link({
+      title: "Learn more",
+      href: "#",
+    }),
+  },
+  argTypes: {
+    placement: {
+      description: "Places the Popover relative to the trigger element.",
+      control: "select",
+      options: Object.values(PopoverPlacementModifier),
+      table: {
+        defaultValue: { summary: `${PopoverPlacementModifier.BOTTOM}` },
+        type: { summary: "enum" },
+      },
+    },
+    trigger: {
+      description: `A [Button](/?path=/docs/atom-button--docs) component, for the trigger. The button **must** have the following attributes: **${triggerAttr("[id of popover]")}**`,
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "Button" },
+      },
+    },
+    id: {
+      description: "The Popover id, must match the ID used in the trigger attributes.",
+      type: "string",
+      table: {
+        defaultValue: { summary: "popover" },
+      },
+    },
+    title: {
+      description: "Optional content [Heading](/?path=/docs/atom-heading--docs).",
+      control: "text",
+      table: {
+        type: { summary: "Heading" },
+        subcategory: "Popover content",
+      },
+    },
+    content: {
+      description: "Content.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "WysiwygText" },
+        subcategory: "Popover content",
+      },
+    },
+    link: {
+      description: "Optional content [Link](/?path=/docs/atom-link--docs).",
+      control: "text",
+      table: {
+        type: { summary: "Link" },
+        subcategory: "Popover content",
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<PopoverType>
+
+export const Popover: Story = {}
+
+export const Top: Story = {
+  args: {
+    placement: PopoverPlacementModifier.TOP,
+    id: "popover-top",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-top"),
+    }),
+  },
+}
+
+export const TopStart: Story = {
+  args: {
+    placement: PopoverPlacementModifier.TOP_START,
+    id: "popover-top-start",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-top-start"),
+    }),
+  },
+}
+
+export const TopEnd: Story = {
+  args: {
+    placement: PopoverPlacementModifier.TOP_END,
+    id: "popover-top-end",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-top-end"),
+    }),
+  },
+}
+
+export const Right: Story = {
+  args: {
+    placement: PopoverPlacementModifier.RIGHT,
+    id: "popover-right",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-right"),
+    }),
+  },
+}
+
+export const RightStart: Story = {
+  args: {
+    placement: PopoverPlacementModifier.RIGHT_START,
+    id: "popover-right-start",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-right-start"),
+    }),
+  },
+}
+
+export const RightEnd: Story = {
+  args: {
+    placement: PopoverPlacementModifier.RIGHT_END,
+    id: "popover-right-end",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-right-end"),
+    }),
+  },
+}
+
+export const Left: Story = {
+  args: {
+    placement: PopoverPlacementModifier.LEFT,
+    id: "popover-left",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-left"),
+    }),
+  },
+}
+
+export const LeftStart: Story = {
+  args: {
+    placement: PopoverPlacementModifier.LEFT_START,
+    id: "popover-left-start",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-left-start"),
+    }),
+  },
+}
+
+export const LeftEnd: Story = {
+  args: {
+    placement: PopoverPlacementModifier.LEFT_END,
+    id: "popover-left-end",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-left-end"),
+    }),
+  },
+}
+
+export const Bottom: Story = {
+  args: {
+    placement: PopoverPlacementModifier.BOTTOM,
+    id: "popover-bottom",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-bottom"),
+    }),
+  },
+}
+
+export const BottomStart: Story = {
+  args: {
+    placement: PopoverPlacementModifier.BOTTOM_START,
+    id: "popover-bottom-start",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-bottom-start"),
+    }),
+  },
+}
+
+export const BottomEnd: Story = {
+  args: {
+    placement: PopoverPlacementModifier.BOTTOM_END,
+    id: "popover-bottom-end",
+    trigger: Button({
+      title: "Popover trigger",
+      as: ButtonTypes.BUTTON,
+      attributes: triggerAttr("popover-bottom-end"),
+    }),
+  },
+}