@pnx-mixtape/mxds 0.0.6 → 0.0.8

package/src/Component/Tabs/Elements/Tabs.ts

@@ -1,8 +1,9 @@
 /**
  * Tab toggle handler
  */
-import "../../DropMenu/Elements/DropMenu"
-import type { DropMenuEvent } from "../../DropMenu/Elements/DropMenu"
+
+import DropMenu, { DropMenuEvent } from "../../DropMenu/Elements/DropMenu"
+import { createElement, makeAnchor } from "../../../Utility/utilities"
 
 type TabsType = {
   panel: HTMLElement
@@ -14,48 +15,43 @@ export default class Tabs extends HTMLElement {
   internals_: ElementInternals
   controller: AbortController
   tabs?: Map<string, TabsType>
+  mq: string
   locationHash?: string
   tabFocus?: number = 0
+  tabListClasses?: string
+  dropTriggerClasses?: string
+  dropMenuId?: string
 
   constructor() {
     super()
     this.internals_ = this.attachInternals()
     this.controller = new AbortController()
+    this.mq = this.getAttribute("mq") || "(max-width: 720px)"
   }
 
   connectedCallback(): void {
-    if (!this.triggers || !this.panels) return
+    if (!this.panels) return
     this.locationHash = window.location.hash
 
     this.tabs = new Map()
-    this.triggers.forEach((tab: HTMLButtonElement): void => {
-      const id: string = tab.getAttribute("aria-controls")
-      const panel: HTMLElement = this.querySelector(`#${id}`)
-      const button: HTMLButtonElement = this.dropMenu.querySelector(
-        `[aria-controls=${id}]`,
-      )
+    this.panels.forEach((panel: HTMLDivElement): void => {
+      const id: string = panel.id
+      const name: string = panel.getAttribute("aria-label")
+      const tabTemplate = `<button type="button" role="tab" aria-controls="${id}" aria-selected="false">${name}</button>`
+      const tab = createElement(tabTemplate) as HTMLButtonElement
+      this.tabList.appendChild(tab)
+      const button = createElement(tabTemplate) as HTMLButtonElement
+      this.dropMenuMenu.appendChild(button)
       if (id && panel && button) {
-        const labelId = `tab-label-${id}`
-        tab.setAttribute("id", labelId)
-        tab.setAttribute("role", "tab")
-        tab.setAttribute("aria-selected", "false")
-        tab.setAttribute("tab-index", "-1")
-        panel.setAttribute("aria-labelledby", labelId)
-        panel.setAttribute("role", "tabpanel")
-        panel.setAttribute("tab-index", "0")
         this.tabs.set(id, { panel, tab, button })
       }
     })
 
     const { signal }: AbortController = this.controller
-    this.menu.addEventListener("click", this.handleClick, { signal })
-    this.menu.addEventListener("keydown", this.handleKeydown, { signal })
-
-    this.dropMenu.addEventListener(
-      "drop-menu-select",
-      this.handleDropMenuSelect,
-      { signal },
-    )
+    this.handleBreakpoint(this.breakpoint)
+    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+      signal,
+    })
 
     const hashEl: HTMLElement | null = this.locationHash
       ? this.querySelector(this.locationHash)
@@ -71,6 +67,30 @@ export default class Tabs extends HTMLElement {
     this.controller.abort()
   }
 
+  handleBreakpoint = ({
+    matches,
+  }: MediaQueryList | MediaQueryListEvent): void => {
+    const { signal }: AbortController = this.controller
+    this.dropMenuTrigger.toggleAttribute("hidden", !matches)
+    this.tabList.toggleAttribute("hidden", matches)
+    if (matches) {
+      this.dropMenuMenu.addEventListener(
+        "drop-menu-select",
+        this.handleDropMenuSelect,
+        { signal },
+      )
+      this.tabList.removeEventListener("click", this.handleClick)
+      this.tabList.removeEventListener("keydown", this.handleKeydown)
+    } else {
+      this.tabList.addEventListener("click", this.handleClick, { signal })
+      this.tabList.addEventListener("keydown", this.handleKeydown, { signal })
+      this.dropMenuMenu.removeEventListener(
+        "drop-menu-select",
+        this.handleDropMenuSelect,
+      )
+    }
+  }
+
   handleKeydown = ({ key }: KeyboardEvent): void => {
     if (key === "ArrowRight" || key === "ArrowLeft") {
       this.triggers[this.tabFocus].setAttribute("tabindex", "-1")
@@ -126,47 +146,72 @@ export default class Tabs extends HTMLElement {
     this.dispatchEvent(newEvent)
   }
 
-  get dropMenu(): HTMLDivElement | null {
-    const dropMenu: HTMLDivElement | null = this.querySelector(".drop-menu")
-    if (!dropMenu) {
-      throw new Error(`${this.localName} must contain a .drop-menu`)
-    }
-    return dropMenu
+  get dropMenu(): DropMenu | null {
+    const existingMenu = this.querySelector("mx-dropmenu")
+    if (existingMenu) return existingMenu
+    this.dropTriggerClasses =
+      this.getAttribute("dropTriggerClasses") ||
+      "mx-button mx-icon mx-icon--chevron-down mx-icon--end"
+    this.dropMenuId = this.id || makeAnchor("tab-drop-menu")
+    const name = `${this.dropMenuId}-target`
+    const tabDropMenu = new DropMenu()
+    tabDropMenu.setAttribute("closeOnClick", "true")
+    const trigger = createElement(`<button
+                  id="${name}"
+                  class="mx-drop-menu__trigger ${this.dropTriggerClasses}"
+                  popovertarget="${this.dropMenuId}"
+                  hidden
+              ></button>`)
+    const menu = createElement(
+      `<div
+                  class="mx-drop-menu"
+                  id="${this.dropMenuId}"
+                  aria-labelledby="${name}"
+                  anchor="${name}"
+                  popover
+                  role="tablist"
+              ></div>`,
+    )
+    tabDropMenu.append(trigger, menu)
+    this.prepend(tabDropMenu)
+    return tabDropMenu
+  }
+
+  get dropMenuMenu(): HTMLDivElement {
+    return this.dropMenu.querySelector('[popover][role="tablist"]')
   }
 
   get dropMenuTrigger(): HTMLButtonElement | null {
-    const trigger: HTMLButtonElement | null = this.querySelector(
-      ".drop-menu__trigger",
-    )
-    if (!trigger) {
-      throw new Error(`${this.localName} must contain a .drop-menu__trigger`)
-    }
-    return trigger
+    return this.dropMenu.querySelector("[popovertarget]")
   }
 
-  get menu(): HTMLDivElement | null {
-    const menu: HTMLDivElement | null = this.querySelector(".tab__list")
-    if (!menu) {
-      throw new Error(`${this.localName} must contain a .tab__list`)
-    }
-    menu.setAttribute("role", "tablist")
-    return menu
+  get tabList(): HTMLDivElement {
+    this.tabListClasses = this.getAttribute("tabListClasses") || "mx-tabs__list"
+    const existingTabList: HTMLDivElement = this.querySelector(
+      '[role="tablist"]:not([popover])',
+    )
+    if (existingTabList) return existingTabList
+    const tabList = createElement(
+      `<div class="${this.tabListClasses}" role="tablist" hidden></div>`,
+    ) as HTMLDivElement
+    this.prepend(tabList)
+    return tabList
   }
 
   get triggers(): NodeListOf<HTMLButtonElement> | null {
     const triggers: NodeListOf<HTMLButtonElement> | null =
-      this.querySelectorAll(".tab__list button")
+      this.tabList.querySelectorAll('[role="tab"]')
     if (!triggers.length) {
-      throw new Error(`${this.localName} must contain .tab__list buttons`)
+      throw new Error(`${this.localName} must contain [role="tab"]`)
     }
     return triggers
   }
 
   get panels(): NodeListOf<HTMLElement> | null {
     const panels: NodeListOf<HTMLElement> | null =
-      this.querySelectorAll(".tab__panel")
+      this.querySelectorAll('[role="tabpanel"]')
     if (!panels.length) {
-      throw new Error(`${this.localName} must contain .tab__panel's`)
+      throw new Error(`${this.localName} must contain [role="tabpanel"]`)
     }
     return panels
   }
@@ -175,6 +220,10 @@ export default class Tabs extends HTMLElement {
     return this.querySelector('[aria-selected="true"]')
   }
 
+  get breakpoint(): MediaQueryList {
+    return window.matchMedia(this.mq)
+  }
+
   set active(id: string) {
     this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {
       if (key === id) {

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

@@ -1,22 +1,59 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./tabs.twig"
+import TabItem from "./tab-item.twig"
 import "./tabs.css"
-import "../Card/card.css"
 import "../DropMenu/drop-menu.css"
 import "./Elements/Tabs"
-import { TabStyles } from "../../enums"
+import { HeadingTypes, Tabs as TabsType } from "@pnx-mixtape/ids-shape"
 
-const meta: Meta<typeof Component> = {
-  tags: ["autodocs"],
+const meta: Meta<TabsType> = {
+  tags: ["autodocs", "ids-mvp"],
   component: Component,
+  args: {
+    items: [
+      TabItem({
+        id: "tab-1",
+        title: "Funk",
+        content:
+          "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.",
+      }),
+      TabItem({
+        id: "tab-2",
+        title: "Soul",
+        content:
+          "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.",
+      }),
+      TabItem({
+        id: "tab-3",
+        title: "Motown",
+        content:
+          "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.",
+      }),
+    ],
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // ID's are not valid due to test-runner, and having two sets of tabs (mobile and desktop).
+            id: "aria-valid-attr-value",
+            enabled: false,
+          },
+        ],
+      },
+    },
+    deepControls: { enabled: true },
+  },
   argTypes: {
-    modifier: { options: Object.values(TabStyles), control: "select" },
+    id: { control: "text" },
+    // @ts-expect-error The controls follow the shape
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
   },
 }
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Tabs: Story = {
-  args: {},
-}
+export const Tabs: Story = {}

package/src/Component/Tabs/Tabs.stories.tsx

@@ -13,9 +13,9 @@ import { TabStyles } from "../../enums"
 const defaultChildren = (
   <Fragment>
     <TabDropMenu>
-      <DropMenuItem id="tab-1" label="Tab 1" aria-controls="tab-1" />
-      <DropMenuItem id="tab-2" label="Tab 2" aria-controls="tab-2" />
-      <DropMenuItem id="tab-3" label="Tab 3" aria-controls="tab-3" />
+      <DropMenuItem id="tab-1" label="Tab 1" aria-controls="tab-1" role="tab" />
+      <DropMenuItem id="tab-2" label="Tab 2" aria-controls="tab-2" role="tab" />
+      <DropMenuItem id="tab-3" label="Tab 3" aria-controls="tab-3" role="tab" />
     </TabDropMenu>
     <TabList>
       <Tab id="tab-1">Tab 1</Tab>

package/src/Component/Tabs/Tabs.tsx

@@ -86,8 +86,8 @@ const Tabs = ({ children, active, modifier, id }: TabsProps): JSX.Element => {
         selectedItem={[activeTab]}
       >
         <div
-          className={classNames("tabs", {
-            [`tabs--${modifier}`]: modifier,
+          className={classNames("mx-tabs", {
+            [`mx-tabs--${modifier}`]: modifier,
           })}
         >
           {children}

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

@@ -1,144 +1,98 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Tabs Tabs smoke-test 1`] = `
-<mx-tabs class="tabs tabs--">
-  <mx-dropmenu closeonclick
-               class="mobile-only"
-  >
+<mx-tabs class="mx-tabs mx-tabs--lined">
+  <mx-dropmenu closeonclick="true">
     <button id="unique-0"
-            class="drop-menu__trigger button icon icon--chevron-down icon--end"
-            popovertarget="tab-menu"
+            class="mx-drop-menu__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
+            popovertarget="tab-drop-menu"
+            hidden
     >
-      Lorem ipsum
+      Funk
     </button>
-    <div class="drop-menu"
-         id="tab-menu"
+    <div class="mx-drop-menu"
+         id="tab-drop-menu"
          aria-labelledby="unique-0"
-         anchor="tab-menu-target"
+         anchor="tab-drop-menu-target"
          popover
-         role="menu"
+         role="tablist"
     >
       <button type="button"
+              role="tab"
               aria-controls="unique-1"
-              class
-              role="menuitemradio"
-              aria-checked="false"
+              aria-selected="false"
       >
-        Lorem ipsum
+        Funk
       </button>
       <button type="button"
+              role="tab"
               aria-controls="unique-2"
-              class
-              role="menuitemradio"
-              aria-checked="false"
+              aria-selected="false"
       >
-        Ut enim
+        Soul
       </button>
       <button type="button"
+              role="tab"
               aria-controls="unique-3"
-              class
-              role="menuitemradio"
-              aria-checked="false"
+              aria-selected="false"
       >
-        Excepteur sint
+        Motown
       </button>
     </div>
   </mx-dropmenu>
-  <div class="tab__list desktop-only"
+  <div class="mx-tabs__list"
        role="tablist"
   >
-    <button class="button"
-            type="button"
-            aria-controls="unique-4"
-            id="unique-1"
+    <button type="button"
             role="tab"
+            aria-controls="unique-4"
             aria-selected="true"
             tab-index="0"
     >
-      Lorem ipsum
+      Funk
     </button>
-    <button class="button"
-            type="button"
-            aria-controls="unique-5"
-            id="unique-2"
+    <button type="button"
             role="tab"
+            aria-controls="unique-5"
             aria-selected="false"
             tab-index="-1"
     >
-      Ut enim
+      Soul
     </button>
-    <button class="button"
-            type="button"
-            aria-controls="unique-6"
-            id="unique-3"
+    <button type="button"
             role="tab"
+            aria-controls="unique-6"
             aria-selected="false"
             tab-index="-1"
     >
-      Excepteur sint
+      Motown
     </button>
   </div>
-  <div id="unique-4"
-       class="tab__panel vertical-flow container section--l"
-       aria-labelledby="unique-7"
+  <div class="mx-tabs__panel mx-vertical-flow mx-container mx-section--l"
+       id="unique-1"
        role="tabpanel"
-       tab-index="0"
+       tabindex="0"
+       aria-label="Funk"
   >
-    <div class="mx-container">
-      <article class="mx-card ">
-        <figure class="mx-card__media">
-          https://picsum.photos/id/56/558/418?grayscale
-        </figure>
-        <div class="mx-card__content mx-vertical-flow-flex">
-          Lorem ipsum
-          <div class="mx-text--lede">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </div>
-        </div>
-      </article>
-    </div>
+    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 id="unique-5"
-       class="tab__panel vertical-flow container section--l"
-       inert
-       aria-labelledby="unique-8"
+  <div class="mx-tabs__panel mx-vertical-flow mx-container mx-section--l"
+       id="unique-2"
        role="tabpanel"
-       tab-index="0"
+       tabindex="0"
+       aria-label="Soul"
+       inert
   >
-    <div class="mx-container">
-      <article class="mx-card ">
-        <figure class="mx-card__media">
-          https://picsum.photos/id/56/558/418?grayscale
-        </figure>
-        <div class="mx-card__content mx-vertical-flow-flex">
-          Ut enim
-          <div class="mx-text--lede">
-            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          </div>
-        </div>
-      </article>
-    </div>
+    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 id="unique-6"
-       class="tab__panel vertical-flow container section--l"
-       inert
-       aria-labelledby="unique-9"
+  <div class="mx-tabs__panel mx-vertical-flow mx-container mx-section--l"
+       id="unique-3"
        role="tabpanel"
-       tab-index="0"
+       tabindex="0"
+       aria-label="Motown"
+       inert
   >
-    <div class="mx-container">
-      <article class="mx-card ">
-        <figure class="mx-card__media">
-          https://picsum.photos/id/56/558/418?grayscale
-        </figure>
-        <div class="mx-card__content mx-vertical-flow-flex">
-          Excepteur sint
-          <div class="mx-text--lede">
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          </div>
-        </div>
-      </article>
-    </div>
+    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>
 `;

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

@@ -1,22 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Tabs Default smoke-test 1`] = `
-<div class="tabs">
+<div class="mx-tabs">
   <div class="mobile-only">
     <button id="unique-0"
             type="button"
-            class="button icon icon--chevron-down icon--end drop-menu__trigger"
+            class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-drop-menu__trigger"
             popovertarget="tabs-storybook"
             style="anchor-name: --drop-menu-tabs-storybook;"
     >
       Tab 1
     </button>
     <div id="tabs-storybook"
-         class="drop-menu"
+         class="mx-drop-menu"
          popover
          aria-labelledby="unique-0"
          aria-describedby="unique-0"
-         role="menu"
+         role="tablist"
          style="position-anchor: --drop-menu-tabs-storybook;"
     >
       <div id="tabs-storybook-description"
@@ -27,7 +27,7 @@ exports[`Component/Tabs Default smoke-test 1`] = `
       <button type="button"
               data-id="tab-1"
               aria-checked="true"
-              role="menuitemradio"
+              role="tab"
               aria-controls="unique-1"
       >
         Tab 1
@@ -35,7 +35,7 @@ exports[`Component/Tabs Default smoke-test 1`] = `
       <button type="button"
               data-id="tab-2"
               aria-checked="false"
-              role="menuitemradio"
+              role="tab"
               aria-controls="unique-2"
       >
         Tab 2
@@ -43,20 +43,19 @@ exports[`Component/Tabs Default smoke-test 1`] = `
       <button type="button"
               data-id="tab-3"
               aria-checked="false"
-              role="menuitemradio"
+              role="tab"
               aria-controls="unique-3"
       >
         Tab 3
       </button>
     </div>
   </div>
-  <div class="tab__list desktop-only"
+  <div class="mx-tabs__list desktop-only"
        role="tablist"
   >
     <button id="unique-1"
             aria-controls="unique-4"
             role="tab"
-            class="button"
             aria-selected="true"
             tabindex="0"
             type="button"
@@ -66,7 +65,6 @@ exports[`Component/Tabs Default smoke-test 1`] = `
     <button id="unique-2"
             aria-controls="unique-5"
             role="tab"
-            class="button"
             aria-selected="false"
             tabindex="-1"
             type="button"
@@ -76,7 +74,6 @@ exports[`Component/Tabs Default smoke-test 1`] = `
     <button id="unique-3"
             aria-controls="unique-6"
             role="tab"
-            class="button"
             aria-selected="false"
             tabindex="-1"
             type="button"
@@ -85,7 +82,7 @@ exports[`Component/Tabs Default smoke-test 1`] = `
     </button>
   </div>
   <div id="unique-4"
-       class="tab__panel vertical-flow section--l"
+       class="mx-tabs__panel mx-vertical-flow mx-section--l"
        aria-labelledby="unique-7"
        role="tabpanel"
        tabindex="0"
@@ -95,7 +92,7 @@ exports[`Component/Tabs Default smoke-test 1`] = `
     </p>
   </div>
   <div id="unique-5"
-       class="tab__panel vertical-flow section--l"
+       class="mx-tabs__panel mx-vertical-flow mx-section--l"
        inert
        aria-labelledby="unique-8"
        role="tabpanel"
@@ -106,7 +103,7 @@ exports[`Component/Tabs Default smoke-test 1`] = `
     </p>
   </div>
   <div id="unique-6"
-       class="tab__panel vertical-flow section--l"
+       class="mx-tabs__panel mx-vertical-flow mx-section--l"
        inert
        aria-labelledby="unique-9"
        role="tabpanel"

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

@@ -0,0 +1,11 @@
+{% set baseClass = 'mx-tabs__panel' %}
+{% set classes = [
+  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 %}>
+  {{ content }}
+</div>