@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Component/Tabs/Tabs.tsx

@@ -24,8 +24,7 @@ type TabContextValues = {
   tabsId: string
 }
 
-const TabContext: Context<TabContextValues> =
-  createContext<TabContextValues>(null)
+const TabContext: Context<TabContextValues> = createContext<TabContextValues>(null)
 export const useTabContext = () => use(TabContext)
 
 type TabsProps = PropsWithChildren & {
@@ -39,24 +38,15 @@ const Tabs = ({ children, active, modifier, id }: TabsProps): JSX.Element => {
   const [activeTabLabel, setActiveTabLabel] = useState<string>("Tabs")
   const tabsId: string = id || useId()
 
-  const handleClick = (
-    event: MouseEvent | KeyboardEvent,
-    key: string,
-  ): void => {
+  const handleClick = (event: MouseEvent | KeyboardEvent, key: string): void => {
     setActiveTab(key)
     const target = event.target as HTMLButtonElement
     setActiveTabLabel(target.textContent)
     if (typeof window === "undefined") return
-    const urlParams: URLSearchParams = new URLSearchParams(
-      window.location.search,
-    )
+    const urlParams: URLSearchParams = new URLSearchParams(window.location.search)
     if (urlParams.get("tab") === key) return
     urlParams.set("tab", key)
-    window.history.replaceState(
-      {},
-      "",
-      `${window.location.pathname}?${urlParams.toString()}`,
-    )
+    window.history.replaceState({}, "", `${window.location.pathname}?${urlParams.toString()}`)
   }
 
   useEffect(() => {
@@ -66,9 +56,7 @@ const Tabs = ({ children, active, modifier, id }: TabsProps): JSX.Element => {
       // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setActiveTab(tabParam)
     }
-    const label: string = document.querySelector(
-      `[aria-controls="${activeTab}"]`,
-    )?.textContent
+    const label: string = document.querySelector(`[aria-controls="${activeTab}"]`)?.textContent
     // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     if (label) setActiveTabLabel(label)
   }, [activeTab])
@@ -80,11 +68,7 @@ const Tabs = ({ children, active, modifier, id }: TabsProps): JSX.Element => {
 
   return (
     <TabContext value={values}>
-      <DropMenuProvider
-        id={tabsId}
-        onClick={handleClick}
-        selectedItem={[activeTab]}
-      >
+      <DropMenuProvider id={tabsId} onClick={handleClick} selectedItem={[activeTab]}>
         <div
           className={classNames("mx-tabs", {
             [`mx-tabs--${modifier}`]: modifier,

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

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Component/Tabs/TabItem TabItem smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-tabs__panel mx-vertical-flow mx-container"
+       id="tab-1"
+       data-tab="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>
+`;

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

@@ -1,20 +1,24 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Tabs Tabs smoke-test 1`] = `
 <div class="mx-page default">
-  <mx-tabs class="mx-tabs mx-tabs--lined">
+  <mx-tabs class="mx-tabs mx-tabs--lined"
+           id="tab-example"
+  >
     <mx-dropmenu closeonclick="true">
       <button id="unique-0"
-              class="mx-drop-menu__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
-              popovertarget="tab-drop-menu"
+              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-drop-menu"
-           id="tab-drop-menu"
-           aria-labelledby="unique-0"
-           anchor="tab-drop-menu-target"
+      <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"
       >
@@ -69,16 +73,18 @@ exports[`Component/Tabs Tabs smoke-test 1`] = `
         Motown
       </button>
     </div>
-    <div class="mx-tabs__panel mx-vertical-flow mx-container mx-section--l"
+    <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 mx-section--l"
+    <div class="mx-tabs__panel mx-vertical-flow mx-container"
          id="unique-2"
+         data-tab="Soul"
          role="tabpanel"
          tabindex="0"
          aria-label="Soul"
@@ -86,8 +92,118 @@ exports[`Component/Tabs Tabs smoke-test 1`] = `
     >
       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 mx-section--l"
+    <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>
+</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"

package/src/Component/Tabs/__snapshots__/Tabs.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/Tabs Default smoke-test 1`] = `
 <div class="mx-tabs">

package/src/Component/Tabs/tab-item.twig

@@ -3,9 +3,8 @@
   baseClass,
   'mx-vertical-flow',
   'mx-container',
-  'mx-section--l'
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
-<div{{ attributes }} id="{{ id }}" role="tabpanel" tabindex="0" aria-label="{{ title }}"{% if active %} data-active{% endif %}>
+<div{{ attributes }} id="{{ id }}" data-tab="{{ title }}"{% if active %} data-active{% endif %}>
   {{ content }}
 </div>

package/src/Component/Tabs/tabs.css

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.defaults {
-  :is(mx-tabs, mx-tabs mx-dropmenu) {
+  mx-tabs {
     display: block;
   }
 }
@@ -18,81 +18,78 @@
       margin-block-start: var(--flow-gap, var(--gap));
     }
 
+    &:not(:defined) {
+      gap: var(--flow-gap, var(--gap));
+    }
+
     & mx-dropmenu {
       grid-area: tabs;
     }
+  }
 
-    & .mx-tabs__list {
-      grid-area: tabs;
+  .mx-tabs__list {
+    grid-area: tabs;
 
-      @media (--medium-up) {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--spacing-xxs);
-      }
+    @media (--medium-up) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-xxs);
+    }
 
-      & button {
-        border: 0;
-        display: block;
-        font-family: inherit;
-        min-inline-size: var(--tab-min-width, 0);
-        padding-block: var(--vertical-padding, var(--spacing-xxs));
-        padding-inline: var(--horizontal-padding, var(--spacing-m));
-        background-color: var(
-          --tab-background,
-          var(--background, var(--colour-background))
-        );
-        color: var(
-          --tab-foreground,
-          var(--foreground, var(--colour-foreground))
-        );
-
-        &[aria-selected="true"] {
-          background-color: var(
-            --tab-active-background,
-            var(--colour-background-alt)
-          );
-          color: var(--tab-active-foreground, var(--colour-foreground));
-        }
+    & button {
+      border: 0;
+      display: block;
+      font-family: inherit;
+      min-inline-size: var(--tab-min-width, 0);
+      padding-block: var(--vertical-padding, var(--spacing-xxs));
+      padding-inline: var(--horizontal-padding, var(--spacing-m));
+      background-color: var(--tab-background, var(--background, var(--colour-background)));
+      color: var(--tab-foreground, var(--foreground, var(--colour-foreground)));
+
+      &[aria-selected="true"] {
+        background-color: var(--tab-active-background, var(--colour-background-alt));
+        color: var(--tab-active-foreground, var(--colour-foreground));
       }
     }
+  }
 
-    & .mx-tabs__panel {
-      grid-area: panels;
-      inline-size: 100%;
-      opacity: 1;
+  .mx-tabs__panel {
+    inline-size: 100%;
+    opacity: 1;
 
-      @starting-style {
-        opacity: 0;
-      }
+    @starting-style {
+      opacity: 0;
+    }
 
-      &[inert] {
-        opacity: 0;
-        transition-duration: 0.4s;
-      }
+    &[inert] {
+      opacity: 0;
+      transition-duration: 0.4s;
     }
+  }
 
-    &.mx-tabs--lined {
-      @media (--medium-up) {
-        & .mx-tabs__list {
-          border-block-end: var(--line-width, 1px) solid
-            var(--line-colour, var(--colour-border));
-
-          & button {
-            border-radius: var(--border-radius) var(--border-radius) 0 0;
-            border: var(--line-width, 1px) solid
-              var(--line-colour, var(--colour-border));
-            border-block-end: 0;
-          }
+  .mx-tabs:defined .mx-tabs__panel {
+    grid-area: panels;
+    padding: var(--tab-panels-padding, var(--section-l, var(--spacing-xl)) 0);
+  }
+
+  .mx-tabs--lined {
+    @media (--medium-up) {
+      & .mx-tabs__list {
+        border-block-end: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
+
+        & button {
+          border-radius: var(--border-radius) var(--border-radius) 0 0;
+          border: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
+          border-block-end: 0;
         }
       }
     }
+  }
 
-    &.mx-tabs--centered {
-      @media (--medium-up) {
-        & .mx-tabs__list {
-          place-content: center;
-        }
+  .mx-tabs--centered {
+    @media (--medium-up) {
+      & .mx-tabs__list {
+        place-content: center;
       }
     }
   }

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

@@ -3,6 +3,9 @@ import Component from "./tags.twig"
 import "./tag.css"
 import { Tags as TagType, TagTypes } from "@pnx-mixtape/ids-shape"
 
+/**
+ * Tags can help categorise content.
+ */
 const meta: Meta<TagType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -10,6 +13,27 @@ const meta: Meta<TagType> = {
     items: ["Music", "News"],
     type: TagTypes.TEXT,
   },
+  argTypes: {
+    type: {
+      description:
+        "Define the type of the tags. Changing the type also requires a different item shape.",
+      options: Object.values(TagTypes),
+      control: "radio",
+      table: {
+        defaultValue: { summary: TagTypes.TEXT },
+        type: { summary: "enum" },
+      },
+    },
+    items: {
+      description: "A list of items to use for the tags, which is different for each `type`.",
+      table: {
+        type: {
+          summary:
+            "string[] | { title: string, href: string }[] | { label: string, id: string, name: string, value: string }[]",
+        },
+      },
+    },
+  },
 }
 
 export default meta
@@ -17,6 +41,9 @@ type Story = StoryObj<TagType>
 
 export const Tag: Story = {}
 
+/**
+ * Tags can be links.
+ */
 export const Link: Story = {
   args: {
     type: TagTypes.LINK,
@@ -33,6 +60,9 @@ export const Link: Story = {
   },
 }
 
+/**
+ * Tags can also be checkboxes, often used for filters.
+ */
 export const Checkbox: Story = {
   args: {
     type: TagTypes.CHECKBOX,

package/src/Component/Tag/Tag.tsx

@@ -7,11 +7,7 @@ type TagProps = PropsWithChildren & {
   as?: AsTags
 }
 
-const Tag = ({
-  children,
-  className,
-  as = AsTags.DIV,
-}: TagProps): JSX.Element => {
+const Tag = ({ children, className, as = AsTags.DIV }: TagProps): JSX.Element => {
   const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
   return <Tag className={classNames("mx-tag", className)}>{children}</Tag>
 }

package/src/Component/Tag/__snapshots__/Tag.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/Tag Checkbox smoke-test 1`] = `
 <div class="mx-page default">

package/src/Component/Tag/__snapshots__/Tag.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/Tag Tag smoke-test 1`] = `
 <div class="mx-tag">

package/src/Component/Tag/tag.css

@@ -7,10 +7,7 @@
     display: inline-flex;
     inline-size: fit-content;
     padding-inline: var(--horizontal-padding, var(--spacing-xxxs));
-    background: var(
-      --tag-background,
-      var(--background, var(--colour-background))
-    );
+    background: var(--tag-background, var(--background, var(--colour-background)));
     color: var(--tag-foreground, var(--foreground, var(--colour-foreground)));
     text-transform: uppercase;
     font-weight: var(--font-weight, var(--font-weight-bold));

package/src/Component/UtilityList/Elements/UtilityList.ts

@@ -0,0 +1,110 @@
+/**
+ * UtilityList
+ * @file Support copy and print functions.
+ */
+
+export default class UtilityList extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+  copyOriginalText?: string
+  copyOriginalIcon?: string
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+    this.copyOriginalIcon = "mx-icon--link"
+  }
+
+  connectedCallback(): void {
+    const { signal }: AbortController = this.controller
+
+    // Handle copy.
+    this.copyBtn?.addEventListener(
+      "click",
+      (): void => {
+        void this.handleCopy()
+      },
+      { signal },
+    )
+
+    // Handle print.
+    this.printBtn?.addEventListener(
+      "click",
+      (): void => {
+        this.handlePrint()
+      },
+      { signal },
+    )
+
+    // Handle PDF.
+    this.pdfBtn?.addEventListener(
+      "click",
+      (): void => {
+        this.handlePDF()
+      },
+      { signal },
+    )
+  }
+
+  disconnectedCallback(): void {
+    this.controller.abort()
+  }
+
+  handleCopy = async (): Promise<void> => {
+    try {
+      await navigator.clipboard
+        .write([
+          new ClipboardItem({
+            ["text/plain"]: window.location.href,
+          }),
+        ])
+        .then(() => {
+          this.copyLabel.textContent = "Copied!"
+          this.copyIcon.classList.replace(this.copyOriginalIcon, "mx-icon--tick")
+          setTimeout(() => {
+            this.copyLabel.textContent = this.copyOriginalText
+            this.copyIcon.classList.replace("mx-icon--tick", this.copyOriginalIcon)
+          }, 3000)
+        })
+    } catch {
+      console.error("Could not copy the url to clipboard")
+    }
+  }
+
+  handlePrint = (): void => window.print()
+
+  // Defaults to Print dialog, to allow Save to PDF.
+  // if this needs to be changed, please extend the class.
+  handlePDF = (): void => window.print()
+
+  get copyBtn(): HTMLButtonElement | null {
+    return this.querySelector("button[data-copy]")
+  }
+
+  get copyLabel(): HTMLSpanElement | null {
+    const el: HTMLSpanElement = this.copyBtn.querySelector("span[data-copy-label]")
+    this.copyOriginalText = el?.textContent ?? undefined
+    return el
+  }
+
+  get copyIcon(): HTMLSpanElement | null {
+    return this.copyBtn.querySelector(".mx-icon")
+  }
+
+  get printBtn(): HTMLButtonElement | null {
+    return this.querySelector("button[data-print]")
+  }
+
+  get pdfBtn(): HTMLButtonElement | null {
+    return this.querySelector("button[data-pdf]")
+  }
+}
+
+if (!customElements.get("mx-utility-list")) customElements.define("mx-utility-list", UtilityList)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-utility-list": UtilityList
+  }
+}