@pnx-mixtape/mxds 0.0.5 → 0.0.7

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

@@ -0,0 +1,184 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/ListItem BlockLink smoke-test 1`] = `
+<div class="mx-container">
+  <article class="mx-list-item mx-list-item--block">
+    <div class="mx-list-item__content mx-vertical-flow">
+      <div class="mx-heading--m">
+        <a href="#">
+          <span>
+            List item title
+          </span>
+        </a>
+      </div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Component/ListItem ImageReverse smoke-test 1`] = `
+<div class="mx-container">
+  <article class="mx-list-item mx-list-item--reverse">
+    <figure class="mx-list-item__media">
+      <picture>
+        <img src="https://picsum.photos/id/56/200/200?grayscale"
+             alt="Blurry bubbles"
+        >
+      </picture>
+    </figure>
+    <div class="mx-list-item__content mx-vertical-flow">
+      <strong class="mx-text--s">
+        Publication
+      </strong>
+      <div class="mx-text--s">
+        25 May 2025
+      </div>
+      <div class="mx-heading--m">
+        <a href="#">
+          <span>
+            List item title
+          </span>
+        </a>
+      </div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Component/ListItem ListItem smoke-test 1`] = `
+<div class="mx-container">
+  <article class="mx-list-item">
+    <div class="mx-list-item__content mx-vertical-flow">
+      <div class="mx-heading--m">
+        <a href="#">
+          <span>
+            List item title
+          </span>
+        </a>
+      </div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Component/ListItem WithImage smoke-test 1`] = `
+<div class="mx-container">
+  <article class="mx-list-item">
+    <figure class="mx-list-item__media">
+      <picture>
+        <img src="https://picsum.photos/id/56/200/200?grayscale"
+             alt="Blurry bubbles"
+        >
+      </picture>
+    </figure>
+    <div class="mx-list-item__content mx-vertical-flow">
+      <strong class="mx-text--s">
+        Publication
+      </strong>
+      <div class="mx-text--s">
+        25 May 2025
+      </div>
+      <div class="mx-heading--m">
+        <a href="#">
+          <span>
+            List item title
+          </span>
+        </a>
+      </div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Component/ListItem WithInfo smoke-test 1`] = `
+<div class="mx-container">
+  <article class="mx-list-item">
+    <div class="mx-list-item__content mx-vertical-flow">
+      <strong class="mx-text--s">
+        Publication
+      </strong>
+      <div class="mx-text--s">
+        25 May 2025
+      </div>
+      <div class="mx-heading--m">
+        <a href="#">
+          <span>
+            List item title
+          </span>
+        </a>
+      </div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Component/ListItem WithTags smoke-test 1`] = `
+<div class="mx-container">
+  <article class="mx-list-item">
+    <div class="mx-list-item__content mx-vertical-flow">
+      <strong class="mx-text--s">
+        Resource
+      </strong>
+      <div class="mx-heading--m">
+        <a href="#">
+          <span>
+            List item title
+          </span>
+        </a>
+      </div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <ul class="mx-tags">
+        <li>
+          <span class="mx-tag">
+            Music
+          </span>
+        </li>
+        <li>
+          <span class="mx-tag">
+            News
+          </span>
+        </li>
+      </ul>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Component/ListItem WithUrl smoke-test 1`] = `
+<div class="mx-container">
+  <article class="mx-list-item">
+    <div class="mx-list-item__content mx-vertical-flow">
+      <div class="mx-heading--m">
+        <a href="#">
+          <span>
+            List item title
+          </span>
+        </a>
+      </div>
+      <div class="mx-text--s">
+        https://example.com/some-thing
+      </div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
+  </article>
+</div>
+`;

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Elements/ListItem ListItem smoke-test 1`] = `
+<div class="mx-container">
+  <article class="mx-list-item">
+    <div class="mx-list-item__content mx-vertical-flow">
+      <div class="mx-heading--m">
+        <a href="http://example.com"
+           class="mx-link"
+        >
+          Teaser title
+        </a>
+      </div>
+      <p class="mx-text--s">
+        18 May 2040
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </div>
+  </article>
+</div>
+`;

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()
       },
     )