@pnx-mixtape/mxds 0.0.6 → 0.0.7

package/src/Component/ListItem/list-item.css

@@ -0,0 +1,109 @@
+/**
+ * List Item
+ */
+
+@layer design-system.components {
+  .mx-list-item {
+    display: grid;
+    gap: var(--list-item-gap, var(--gap));
+  }
+
+  .mx-list-item:has(> .mx-list-item__media) {
+    grid-template: "media" "content" 1fr / 1fr;
+
+    @container (min-width: token("breakpoint.contentCard")) {
+      --list-item-gap: var(--gap-l);
+      --image-min-width: var(--image-max-width, 200px);
+
+      grid-template: "media content" 1fr / auto 1fr;
+      align-items: center;
+    }
+
+    &.mx-list-item--reverse {
+      @container (min-width: token("breakpoint.contentCard")) {
+        grid-template-areas: "content media";
+        grid-template-columns: 1fr auto;
+      }
+    }
+
+    & .mx-list-item__content {
+      grid-area: content;
+    }
+
+    & :is(.mx-list-item__media, figure) {
+      grid-area: media;
+      display: grid;
+      position: relative;
+      inline-size: 100%;
+      max-inline-size: var(--image-min-width, 100px);
+
+      & img {
+        aspect-ratio: 1 / 1;
+        border-radius: var(--border-radius);
+        object-fit: cover;
+        display: block;
+      }
+    }
+  }
+
+  .mx-list-item__content {
+    --flow-gap: var(--gap-s);
+
+    & > .mx-text--s {
+      --flow-gap: 0;
+    }
+  }
+
+  :is(.mx-list-item, .mx-container:has(> .mx-list-item)) {
+    &:where(:not(:first-child)) {
+      border-block-start: var(--line-width, 1px) solid
+        var(--line-colour, var(--colour-border));
+      padding-block-start: var(--gap);
+      margin-block-start: var(--gap);
+    }
+  }
+}
+
+/**
+ * List item grid
+ */
+
+@layer design-system.components {
+  .mx-grid:has(> *:nth-child(2):last-child)
+    > :is(.mx-list-item, .mx-container:has(.mx-list-item)) {
+    inline-size: 100%;
+    max-inline-size: var(--max-list-item-width, 37ch);
+    margin-inline: auto;
+  }
+}
+
+/**
+ * Block list item
+ */
+
+@layer design-system.components {
+  .mx-list-item--block {
+    position: relative;
+
+    &:focus-within {
+      border-radius: var(--border-radius);
+      outline: var(--outline-width) var(--outline-style) var(--outline-color);
+      outline-offset: 2px;
+    }
+
+    & :is(a[href], button) {
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    & a::after {
+      content: "";
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+}

package/src/Component/ListItem/list-item.twig

@@ -0,0 +1,32 @@
+{% set baseClass = 'mx-list-item' %}
+{% set classes = [baseClass] %}
+{% for modifier in modifiers %}
+  {% set classes = classes|merge([baseClass~"--"~modifier]) %}
+{% endfor %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+
+<div class="mx-container">
+<article{{ attributes }}>
+  {% if image %}
+    <figure class="mx-list-item__media">
+      {{ image }}
+    </figure>
+  {% endif %}
+  <div class="mx-list-item__content mx-vertical-flow">
+    {% if label %}
+      <strong class="mx-text--s">{{ label }}</strong>
+    {% endif %}
+    {% if info and infoBefore %}
+      <div class="mx-text--s">{{ info }}</div>
+    {% endif %}
+    <div class="mx-heading--m">
+      {{ link }}
+    </div>
+    {% if info and not infoBefore %}
+      <div class="mx-text--s">{{ info }}</div>
+    {% endif %}
+    {{ content }}
+    {{ tags }}
+  </div>
+</article>
+</div>

package/src/Component/Navigation/Components/DropdownLevel.tsx

@@ -59,7 +59,7 @@ const DropdownLevel = ({
   return (
     <li
       className={classNames({
-        "nav__has-subnav": item.items,
+        "mx-nav__has-subnav": item.items,
         className,
       })}
       onMouseEnter={handleMouseEnter}
@@ -76,10 +76,15 @@ const DropdownLevel = ({
             onKeyDown={handleKeyDown}
             aria-controls={dropdownId}
             aria-expanded={on}
-            className={classNames("nav__toggle", "icon", "icon--only", {
-              "icon--chevron-down": !on,
-              "icon--chevron-up": on,
-            })}
+            className={classNames(
+              "mx-nav__toggle",
+              "mx-icon",
+              "mx-icon--only",
+              {
+                "mx-icon--chevron-down": !on,
+                "mx-icon--chevron-up": on,
+              },
+            )}
             type="button"
           >
             Sub-navigation
@@ -87,7 +92,7 @@ const DropdownLevel = ({
           {on && (
             <ul
               id={dropdownId}
-              className={classNames("nav__level-2", "nav--open")}
+              className={classNames("mx-nav__level-2", "mx-nav--open")}
             >
               {item.items.map(subitem => (
                 <li key={subitem.id} className={classNames(subitem.className)}>

package/src/Component/Navigation/Dropdown.tsx

@@ -22,11 +22,11 @@ const Dropdown = ({
 
   return (
     <nav
-      className={classNames("nav", "nav--dropdown", { className })}
+      className={classNames("mx-nav", "mx-nav--dropdown", { className })}
       aria-label={title}
       {...props}
     >
-      <ul className="nav__level-1">
+      <ul className="mx-nav__level-1">
         {items &&
           items.map((item: NavigationItem) => (
             <DropdownLevel item={item} isMobile={isMobile} key={item.id} />

package/src/Component/Navigation/Elements/Navigation.ts

@@ -57,7 +57,7 @@ export default class Navigation extends HTMLElement {
       const link: HTMLAnchorElement = item.querySelector(":scope > a")
       const id: string = makeAnchor(`subnav-${index}-${link.textContent}`, 30)
       const trigger: HTMLButtonElement = item.querySelector(
-        ":scope > button.nav__toggle",
+        ":scope > button.mx-nav__toggle",
       )
       if (item && link && trigger) {
         const labelId = `list-label-${id}`
@@ -89,7 +89,7 @@ export default class Navigation extends HTMLElement {
   handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {
     const { isOpen, id } = detail
     const { item } = this.subNavs.get(id)
-    item.classList.toggle("nav--open")
+    item.classList.toggle("mx-nav--open")
     if (isOpen) {
       this.keyboard.attachPopup(id, this.handleCloseAny)
     } else {
@@ -120,9 +120,10 @@ export default class Navigation extends HTMLElement {
   handleBreakpoint = ({
     matches,
   }: MediaQueryList | MediaQueryListEvent): void => {
+    const { signal }: AbortController = this.controller
     if (matches) {
-      this.addEventListener("mouseover", this.handleFlyout)
-      this.addEventListener("mouseleave", this.handleCloseAny)
+      this.addEventListener("mouseover", this.handleFlyout, { signal })
+      this.addEventListener("mouseleave", this.handleCloseAny, { signal })
       if (this.edgeCheck) this.handleEdgeCheck()
     } else {
       this.removeEventListener("mouseover", this.handleFlyout)
@@ -135,7 +136,7 @@ export default class Navigation extends HTMLElement {
     const edgeCheck: IntersectionObserver = new IntersectionObserver(
       ([{ boundingClientRect, target }], obs) => {
         if (windowInnerWidth < boundingClientRect.right)
-          target.classList.add("nav--reverse")
+          target.classList.add("mx-nav--reverse")
         obs.disconnect()
       },
     )

package/src/Component/Navigation/Navigation.stories.ts

@@ -1,15 +1,271 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./navigation.twig"
 import "./navigation.css"
+import "./Elements/Navigation"
+import { Navigation as NavigationType } from "@pnx-mixtape/ids-shape"
 
-const meta: Meta<typeof Component> = {
-  tags: ["autodocs"],
+type MxNavigationType = NavigationType & {
+  type?: "collapsible" | "dropdown" | "mega" | "footer"
+}
+
+const meta: Meta<MxNavigationType> = {
+  tags: ["autodocs", "ids-mvp"],
   component: Component,
+  args: {
+    id: "links-story",
+    title: "Links",
+    items: [
+      {
+        link: {
+          title: "Home",
+          href: "#",
+          current: true,
+        },
+      },
+      {
+        link: {
+          title: "About",
+          href: "#",
+        },
+      },
+      {
+        link: {
+          title: "Contact",
+          href: "#",
+        },
+      },
+    ],
+  },
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<MxNavigationType>
+
+export const Navigation: Story = {}
+
+export const Collapsible: Story = {
+  args: {
+    type: "collapsible",
+    items: [
+      {
+        link: {
+          title: "News",
+          href: "#",
+        },
+      },
+      {
+        link: {
+          title: "What we do",
+          href: "#",
+        },
+        items: [
+          {
+            link: {
+              title: "Events",
+              href: "#",
+            },
+          },
+          {
+            link: {
+              title: "Who we are",
+              href: "#",
+            },
+            items: [
+              {
+                link: {
+                  title: "Our team",
+                  href: "#",
+                },
+              },
+              {
+                link: {
+                  title: "Our philosophy",
+                  href: "#",
+                  current: true,
+                },
+              },
+              {
+                link: {
+                  title: "Why music?",
+                  href: "#",
+                },
+              },
+            ],
+          },
+          {
+            link: {
+              title: "Join us",
+              href: "#",
+            },
+          },
+          {
+            link: {
+              title: "Careers",
+              href: "#",
+            },
+          },
+        ],
+      },
+      {
+        link: {
+          title: "Contact",
+          href: "#",
+        },
+      },
+      {
+        link: {
+          title: "Resources",
+          href: "#",
+        },
+      },
+    ],
+  },
+}
+
+export const Dropdown: Story = {
+  args: {
+    type: "dropdown",
+    items: [
+      {
+        link: {
+          title: "News",
+          href: "#",
+        },
+      },
+      {
+        link: {
+          title: "What we do",
+          href: "#",
+        },
+        items: [
+          {
+            link: {
+              title: "Events",
+              href: "#",
+            },
+          },
+          {
+            link: {
+              title: "Who we are",
+              href: "#",
+            },
+          },
+          {
+            link: {
+              title: "Join us",
+              href: "#",
+            },
+          },
+          {
+            link: {
+              title: "Careers",
+              href: "#",
+            },
+          },
+        ],
+      },
+      {
+        link: {
+          title: "Contact",
+          href: "#",
+        },
+      },
+      {
+        link: {
+          title: "Resources",
+          href: "#",
+        },
+      },
+    ],
+  },
+}
 
-export const Navigation: Story = {
-  args: {},
+export const Mega: Story = {
+  args: {
+    type: "mega",
+    items: [
+      {
+        link: {
+          title: "Home",
+          href: "#",
+          current: true,
+        },
+      },
+      {
+        link: {
+          title: "About",
+          href: "#",
+        },
+        items: [
+          {
+            link: {
+              title: "Who",
+              href: "#",
+              current: true,
+            },
+            items: [
+              {
+                link: {
+                  title: "How come?",
+                  href: "#",
+                  current: true,
+                },
+              },
+              {
+                link: {
+                  title: "Why not?",
+                  href: "#",
+                },
+              },
+              {
+                link: {
+                  title: "What for?",
+                  href: "#",
+                },
+              },
+            ],
+          },
+          {
+            link: {
+              title: "What",
+              href: "#",
+            },
+          },
+          {
+            link: {
+              title: "Why",
+              href: "#",
+            },
+          },
+        ],
+      },
+      {
+        link: {
+          title: "Contact",
+          href: "#",
+        },
+        items: [
+          {
+            link: {
+              title: "How",
+              href: "#",
+              current: true,
+            },
+          },
+          {
+            link: {
+              title: "Where",
+              href: "#",
+            },
+          },
+          {
+            link: {
+              title: "When",
+              href: "#",
+            },
+          },
+        ],
+      },
+    ],
+  },
 }

package/src/Component/Navigation/Navigation.tsx

@@ -26,9 +26,9 @@ const Navigation = ({
 }: Navigationprops): JSX.Element => (
   <nav
     className={classNames(
-      "nav",
+      "mx-nav",
       {
-        "nav--inline": inline,
+        "mx-nav--inline": inline,
       },
       className,
     )}

package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Navigation/Dropdown Dropdown smoke-test 1`] = `
-<nav class="nav nav--dropdown"
+<nav class="mx-nav mx-nav--dropdown"
      aria-label="Menu"
      id="navigation"
 >
-  <ul class="nav__level-1">
-    <li class="nav__has-subnav">
+  <ul class="mx-nav__level-1">
+    <li class="mx-nav__has-subnav">
       <a href="#"
          class
       >
@@ -14,7 +14,7 @@ exports[`Component/Navigation/Dropdown Dropdown smoke-test 1`] = `
       </a>
       <button aria-controls="unique-0"
               aria-expanded="false"
-              class="nav__toggle icon icon--only icon--chevron-down"
+              class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down"
               type="button"
       >
         Sub-navigation