@pnx-mixtape/mxds 0.0.13 → 0.0.15

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

@@ -1,33 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/LinkList LinkList smoke-test 1`] = `
-<ul class="mx-link-list">
-  <li>
-    <a href="#">
-      <span>
-        Music
-      </span>
-      <span class="mx-icon mx-icon--chevron-right ">
-      </span>
-    </a>
-  </li>
-  <li>
-    <a href="#">
-      <span>
-        Performances
-      </span>
-      <span class="mx-icon mx-icon--chevron-right ">
-      </span>
-    </a>
-  </li>
-  <li>
-    <a href="#">
-      <span>
-        Get involved
-      </span>
-      <span class="mx-icon mx-icon--chevron-right ">
-      </span>
-    </a>
-  </li>
-</ul>
+<div class="mx-page default">
+  <ul class="mx-link-list">
+    <li>
+      <a href="#">
+        <span>
+          Music
+        </span>
+        <span class="mx-icon mx-icon--chevron-right ">
+        </span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span>
+          Performances
+        </span>
+        <span class="mx-icon mx-icon--chevron-right ">
+        </span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span>
+          Get involved
+        </span>
+        <span class="mx-icon mx-icon--chevron-right ">
+        </span>
+      </a>
+    </li>
+  </ul>
+</div>
 `;

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

@@ -1,8 +1,9 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./list-item.twig"
 import Link from "../../Atom/Link/link.twig"
 import Image from "../../Atom/Image/image.twig"
 import Tags from "../Tag/tags.twig"
+import "../Card/card.css"
 import "./list-item.css"
 import "../Tag/tag.css"
 import {
@@ -23,9 +24,6 @@ const meta: Meta<ListItemType> = {
     content:
       "<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>",
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     modifiers: {
       options: Object.values(ListItemModifiers),

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./ListItem"
 
 const meta: Meta<typeof Component> = {

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

@@ -1,184 +1,198 @@
 // 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 class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-list-item mx-card--block">
+      <div class="mx-card__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>
-      <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>
+    </article>
+  </div>
 </div>
 `;
 
 exports[`Component/ListItem ImageReverse smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-list-item mx-list-item--reversed">
-    <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 class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-list-item mx-card--reversed">
+      <div class="mx-card__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>
-      <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>
+      <figure class="mx-card__media">
+        <picture>
+          <img src="https://picsum.photos/id/56/200/200?grayscale"
+               alt="Blurry bubbles"
+          >
+        </picture>
+      </figure>
+    </article>
+  </div>
 </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 class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-list-item">
+      <div class="mx-card__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>
-      <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>
+    </article>
+  </div>
 </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 class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-list-item">
+      <div class="mx-card__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>
-      <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>
+      <figure class="mx-card__media">
+        <picture>
+          <img src="https://picsum.photos/id/56/200/200?grayscale"
+               alt="Blurry bubbles"
+          >
+        </picture>
+      </figure>
+    </article>
+  </div>
 </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 class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-list-item">
+      <div class="mx-card__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>
-      <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>
+    </article>
+  </div>
 </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 class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-list-item">
+      <div class="mx-card__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>
-      <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>
+    </article>
+  </div>
 </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 class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-list-item">
+      <div class="mx-card__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>
-      <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>
+    </article>
+  </div>
 </div>
 `;

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

@@ -4,56 +4,19 @@
 
 @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--reversed {
-      @container (min-width: token("breakpoint.contentCard")) {
-        grid-template-areas: "content media";
-        grid-template-columns: 1fr auto;
-      }
-    }
-
-    & .mx-list-item__content {
-      grid-area: content;
-    }
+    --media-col: var(--image-width, 200px);
+    --ratio: 1;
+    --large-card-gap: var(--gap-l);
 
-    & :is(.mx-list-item__media, figure) {
-      grid-area: media;
-      display: grid;
-      position: relative;
-      inline-size: 100%;
-      max-inline-size: var(--image-min-width, 100px);
+    & .mx-card__content {
+      --flow-gap: var(--gap-s);
 
-      & img {
-        aspect-ratio: 1 / 1;
-        border-radius: var(--border-radius);
-        object-fit: cover;
-        display: block;
+      & > .mx-text--s {
+        --flow-gap: 0;
       }
     }
   }
 
-  .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
@@ -63,47 +26,3 @@
     }
   }
 }
-
-/**
- * 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

@@ -1,5 +1,5 @@
-{% set baseClass = 'mx-list-item' %}
-{% set classes = [baseClass] %}
+{% set baseClass = 'mx-card' %}
+{% set classes = [baseClass, 'mx-list-item'] %}
 {% for modifier in modifiers %}
   {% set classes = classes|merge([baseClass~"--"~modifier]) %}
 {% endfor %}
@@ -7,12 +7,7 @@
 
 <div class="mx-container">
 <article{{ attributes }}>
-  {% if image is not empty %}
-    <figure class="mx-list-item__media">
-      {{ image }}
-    </figure>
-  {% endif %}
-  <div class="mx-list-item__content mx-vertical-flow">
+  <div class="mx-card__content mx-vertical-flow">
     {% if label is not empty %}
       <strong class="mx-text--s">{{ label }}</strong>
     {% endif %}
@@ -28,5 +23,10 @@
     {{ content }}
     {{ tags }}
   </div>
+  {% if image is not empty %}
+    <figure class="mx-card__media">
+      {{ image }}
+    </figure>
+  {% endif %}
 </article>
 </div>

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Dropdown"
 import "./navigation.css"
 

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./navigation.twig"
 import "./navigation.css"
 import "./Elements/Navigation"

package/src/Component/Navigation/Navigation.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Navigation"
 import "./navigation.css"