@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.0

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

@@ -11,7 +11,7 @@ exports[`Collapsible Counter 1`] = `
       </summary>
   
   <form class="mx-filters__form mx-vertical-flow" action="#">
-              
+        
   <mx-accordion>
     <details class="mx-accordion mx-filter-item" id="filter-keywords-container" open="">
       <summary class="mx-accordion__toggle">
@@ -25,7 +25,7 @@ exports[`Collapsible Counter 1`] = `
         
 <input class="mx-input__text" id="filter-keywords" name="unique-0" type="text" value="" aria-label="Keywords" aria-describedby="unique-0">
 
-    <div class="mx-description" id="unique-0" role="tooltip">
+    <div class="mx-description" id="unique-0">
   Search by keywords
 </div>
 
@@ -35,7 +35,6 @@ exports[`Collapsible Counter 1`] = `
     </details>
   </mx-accordion>
 
-          
   <mx-accordion>
     <details class="mx-accordion mx-filter-item" id="filter-categories-container" open="">
       <summary class="mx-accordion__toggle">
@@ -46,47 +45,48 @@ exports[`Collapsible Counter 1`] = `
 <fieldset class="mx-form-item mx-fieldset mx-accordion__content">
   
   
-                    
+      
 <div class="mx-checkbox">
   <input id="category-news" type="checkbox" name="categories" value="news" checked="checked">
   <label for="category-news">News</label>
 </div>
-              
+
 <div class="mx-checkbox">
   <input id="category-media" type="checkbox" name="categories" value="media" checked="checked">
   <label for="category-media">Media Releases</label>
 </div>
-                          <div data-hide="" hidden="until-found">
-                                                      
+
+    <div data-hide="" hidden="until-found">
+      
 <div class="mx-checkbox">
   <input id="category-publications" type="checkbox" name="categories" value="publications">
   <label for="category-publications">Publications</label>
 </div>
-              </div>
-      <button data-show="" class="mx-button mx-button--light" type="button">Show all (3)</button>
-        
+
+    </div>
+    <button data-show="" class="mx-button mx-button--light" type="button">Show all (3)</button>
+    
   
 </fieldset>
 
     </details>
   </mx-accordion>
 
-              <div class="mx-form-actions">
-                    
+          <div class="mx-form-actions">
+          
   <button class="mx-button mx-button--dark" type="submit">
     
     <span>Apply filters</span>
     
   </button>
-
-                    
+  
   <button class="mx-button mx-button--light" type="reset">
     
     <span>Clear all filters</span>
     
   </button>
 
-              </div>
+      </div>
       </form>
 
       </details>
@@ -110,7 +110,7 @@ exports[`Collapsible Right 1`] = `
         Filters
         <button class="mx-button mx-button--icon-only mx-icon mx-icon--close" data-close="">Close filters</button>
       </div>
-              
+        
   <mx-accordion>
     <details class="mx-accordion mx-filter-item" id="filter-keywords-container" open="">
       <summary class="mx-accordion__toggle">
@@ -120,7 +120,7 @@ exports[`Collapsible Right 1`] = `
 
 <div class="mx-form-item mx-accordion__content">
   
-  <div class="mx-description" id="unique-0" role="tooltip">
+  <div class="mx-description" id="unique-0">
   Search by keywords
 </div>
 
@@ -134,7 +134,6 @@ exports[`Collapsible Right 1`] = `
     </details>
   </mx-accordion>
 
-          
   <mx-accordion>
     <details class="mx-accordion mx-filter-item" id="filter-categories-container" open="">
       <summary class="mx-accordion__toggle">
@@ -145,47 +144,44 @@ exports[`Collapsible Right 1`] = `
 <fieldset class="mx-form-item mx-fieldset mx-accordion__content">
   
   
-                    
+      
 <div class="mx-checkbox">
   <input id="category-news" type="checkbox" name="categories" value="news">
   <label for="category-news">News</label>
 </div>
 
-              
 <div class="mx-checkbox">
   <input id="category-media" type="checkbox" name="categories" value="media">
   <label for="category-media">Media Releases</label>
 </div>
 
-              
 <div class="mx-checkbox">
   <input id="category-publications" type="checkbox" name="categories" value="publications">
   <label for="category-publications">Publications</label>
 </div>
 
-              
+    
   
 </fieldset>
 
     </details>
   </mx-accordion>
 
-              <div class="mx-form-actions">
-                    
+          <div class="mx-form-actions">
+          
   <button class="mx-button mx-button--dark" type="submit" disabled="">
     
     <span>Apply filters</span>
     
   </button>
-
-                    
+  
   <button class="mx-button mx-button--light" type="reset" disabled="">
     
     <span>Clear all filters</span>
     
   </button>
 
-              </div>
+      </div>
       </form>
 
       </details>
@@ -202,13 +198,15 @@ exports[`Filters 1`] = `
           </h2>
   
   <form class="mx-filters__form mx-vertical-flow" action="#">
-              
+        
 
 <div class="mx-form-item mx-filter-item">
     
-<label class="mx-label" for="filter-keywords">Keywords</label>
+<label class="mx-label" for="filter-keywords">
+  Keywords
+  </label>
 
-  <div class="mx-description" id="unique-0" role="tooltip">
+  <div class="mx-description" id="unique-0">
   Search by keywords
 </div>
 
@@ -220,52 +218,50 @@ exports[`Filters 1`] = `
 </div>
 
 
-          
 
 <fieldset class="mx-form-item mx-fieldset mx-filter-item">
     
-<legend class="mx-legend">Categories</legend>
+<legend class="mx-legend">
+  Categories
+  </legend>
 
   
-                    
+      
 <div class="mx-checkbox">
   <input id="category-news" type="checkbox" name="categories" value="news">
   <label for="category-news">News</label>
 </div>
 
-              
 <div class="mx-checkbox">
   <input id="category-media" type="checkbox" name="categories" value="media">
   <label for="category-media">Media Releases</label>
 </div>
 
-              
 <div class="mx-checkbox">
   <input id="category-publications" type="checkbox" name="categories" value="publications">
   <label for="category-publications">Publications</label>
 </div>
 
-              
+    
   
 </fieldset>
 
 
-              <div class="mx-form-actions">
-                    
+          <div class="mx-form-actions">
+          
   <button class="mx-button mx-button--dark" type="submit" disabled="">
     
     <span>Apply filters</span>
     
   </button>
-
-                    
+  
   <button class="mx-button mx-button--light" type="reset" disabled="">
     
     <span>Clear all filters</span>
     
   </button>
 
-              </div>
+      </div>
       </form>
 
   </mx-filters>
@@ -280,13 +276,15 @@ exports[`Instant 1`] = `
           </h2>
   
   <form class="mx-filters__form mx-vertical-flow" action="#">
-              
+        
 
 <div class="mx-form-item mx-filter-item">
     
-<label class="mx-label" for="filter-keywords">Keywords</label>
+<label class="mx-label" for="filter-keywords">
+  Keywords
+  </label>
 
-  <div class="mx-description" id="unique-0" role="tooltip">
+  <div class="mx-description" id="unique-0">
   Search by keywords
 </div>
 
@@ -298,45 +296,44 @@ exports[`Instant 1`] = `
 </div>
 
 
-          
 
 <fieldset class="mx-form-item mx-fieldset mx-filter-item">
     
-<legend class="mx-legend">Categories</legend>
+<legend class="mx-legend">
+  Categories
+  </legend>
 
   
-                    
+      
 <div class="mx-checkbox">
   <input id="category-news" type="checkbox" name="categories" value="news">
   <label for="category-news">News</label>
 </div>
 
-              
 <div class="mx-checkbox">
   <input id="category-media" type="checkbox" name="categories" value="media">
   <label for="category-media">Media Releases</label>
 </div>
 
-              
 <div class="mx-checkbox">
   <input id="category-publications" type="checkbox" name="categories" value="publications">
   <label for="category-publications">Publications</label>
 </div>
 
-              
+    
   
 </fieldset>
 
 
-              <div class="mx-form-actions">
-                    
+          <div class="mx-form-actions">
+          
   <button class="mx-button mx-button--light" type="reset" disabled="">
     
     <span>Clear all filters</span>
     
   </button>
 
-              </div>
+      </div>
       </form>
 
   </mx-filters>

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Collapsible 1`] = `"<div class="mx-filters mx-filters--down"><details class="mx-accordion" open=""><summary class="mx-accordion__toggle mx-filters__title">Filters<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></summary><form class="mx-filters__form mx-vertical-flow" action="#"><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-keywords-container" aria-expanded="true">Keywords<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-keywords-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><div class="mx-form-item mx-accordion__content" id="filter-keywords"><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div></section></div><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-categories-container" aria-expanded="true">Categories<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-categories-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><fieldset class="mx-form-item mx-fieldset mx-accordion__content" id="filter-categories"><div class="mx-checkbox"><input id="_r_b_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_b_">News</label></div><div class="mx-checkbox"><input id="_r_e_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_e_">Media Releases</label></div><button class="mx-button mx-button--light" type="button">Show all (3)</button></fieldset></section></div><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark">Apply filters</button><button type="reset" class="mx-button mx-button--light">Clear all filters</button></div></form></details></div>"`;
+
+exports[`Default 1`] = `"<div class="mx-filters"><h2 class="mx-filters__title">Filters</h2><form class="mx-filters__form mx-vertical-flow" action="#"><div class="mx-form-item mx-filter-item" id="filter-keywords"><label class="mx-label" for="filter-keywords">Keywords</label><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div><fieldset class="mx-form-item mx-fieldset mx-filter-item" id="filter-categories"><legend class="mx-legend">Categories</legend><div class="mx-checkbox"><input id="_r_0_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_0_">News</label></div><div class="mx-checkbox"><input id="_r_3_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_3_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_6_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_6_">Publications</label></div></fieldset><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark">Apply filters</button><button type="reset" class="mx-button mx-button--light">Clear all filters</button></div></form></div>"`;
+
+exports[`With Counter 1`] = `"<div class="mx-filters mx-filters--down"><details class="mx-accordion" open=""><summary class="mx-accordion__toggle mx-filters__title">Filters<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></summary><form class="mx-filters__form mx-vertical-flow" action="#"><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-keywords-container" aria-expanded="true">Keywords<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-keywords-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><div class="mx-form-item mx-accordion__content" id="filter-keywords"><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div></section></div><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-categories-container" aria-expanded="true">Categories<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-categories-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><fieldset class="mx-form-item mx-fieldset mx-accordion__content" id="filter-categories"><div class="mx-checkbox"><input id="_r_j_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_j_">News</label></div><div class="mx-checkbox"><input id="_r_m_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_m_">Media Releases</label></div><button class="mx-button mx-button--light" type="button">Show all (3)</button></fieldset></section></div><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark">Apply filters</button><button type="reset" class="mx-button mx-button--light">Clear all filters</button></div></form></details></div>"`;

package/src/Component/Filters/filter-item.twig

@@ -21,22 +21,12 @@
 <{{ as }}{{ attributes }}>
   {{ label }}
   {{ descriptionStart }}
-  {% if fields[0] is not empty %}
-    {% if shownItems is not empty and fields|length > shownItems %}
-      {% for field in fields %}
-        {% if loop.index <= shownItems %}{{ field }}{% endif %}
-      {% endfor %}
-      <div data-hide>
-        {% for field in fields %}
-          {% if loop.index > shownItems %}{{ field }}{% endif %}
-        {% endfor %}
-      </div>
-      <button data-show class="mx-button mx-button--light" type="button">Show all ({{ fields|length }})</button>
-    {% else %}
-      {% for field in fields %}
-        {{ field }}
-      {% endfor %}
-    {% endif %}
+  {% if hiddenFields is not empty %}
+    {{ visibleFields }}
+    <div data-hide>
+      {{ hiddenFields }}
+    </div>
+    <button data-show class="mx-button mx-button--light" type="button">Show all ({{ fieldCount }})</button>
   {% else %}
     {{ fields }}
   {% endif %}

package/src/Component/Filters/filters.css

@@ -78,12 +78,29 @@
         margin-inline-start: auto;
       }
     }
+
+    & :is(.mx-input__text, .mx-input__select, .mx-input__textarea) {
+      inline-size: 100%;
+    }
   }
 
   .mx-filter-item .mx-accordion__content {
     padding-block-start: var(--spacing-xxxs);
   }
 
+  .mx-filters--sticky {
+    @media (--medium-up) {
+      & .mx-filters__form {
+        position: sticky;
+        inset-block-start: var(--filters-sticky-offset, var(--spacing-l));
+        max-block-size: calc(
+          100dvh - var(--filters-sticky-offset, var(--spacing-l)) - var(--spacing-l)
+        );
+        overflow-y: auto;
+      }
+    }
+  }
+
   .mx-filters--right {
     @media (--medium-down) {
       & .mx-filters__form {

package/src/Component/Filters/filters.twig

@@ -30,14 +30,10 @@
         <button class="mx-button mx-button--icon-only mx-icon mx-icon--close" data-close>Close filters</button>
       </div>
     {% endif %}
-    {% for item in items %}
-      {{ item }}
-    {% endfor %}
+    {{ items }}
     {% if actions is not empty %}
       <div class="mx-form-actions">
-        {% for action in actions %}
-          {{ action }}
-        {% endfor %}
+        {{ actions }}
       </div>
     {% endif %}
   </form>

package/src/Component/Gallery/Components/GalleryTrigger.tsx

@@ -0,0 +1,30 @@
+import { JSX, ComponentPropsWithoutRef, PropsWithChildren } from "react"
+import classNames from "classnames"
+import { useGallery } from "../Gallery"
+
+type GalleryTriggerProps = ComponentPropsWithoutRef<"button"> &
+  PropsWithChildren & {
+    index: number
+    className?: string
+  }
+
+const GalleryTrigger = ({
+  index,
+  children,
+  className,
+  ...props
+}: GalleryTriggerProps): JSX.Element => {
+  const { openAt } = useGallery()
+  return (
+    <button
+      type="button"
+      className={classNames("mx-gallery__trigger", className)}
+      onClick={() => openAt(index)}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default GalleryTrigger

package/src/Component/Gallery/Elements/Gallery.ts

@@ -0,0 +1,45 @@
+/**
+ * Gallery
+ * @file Extends Dialog so opening the modal (native `showModal()`/`close()`)
+ * and all its behaviour (focus trap, focus return, outside click, escape) is
+ * inherited unchanged. The only thing Gallery adds is: when a trigger with a
+ * `data-gallery-index` is clicked, scroll the nested Carousel (if any) to
+ * that slide once the dialog is open.
+ */
+
+import Dialog from "../../Dialog/Elements/Dialog"
+
+export default class Gallery extends Dialog {
+  connectedCallback(): void {
+    super.connectedCallback()
+    if (!this.dialog) return
+
+    const { signal } = this.controller
+    this.openBtns?.forEach(btn =>
+      btn.addEventListener("click", () => this.scrollToTrigger(btn), { signal }),
+    )
+  }
+
+  scrollToTrigger = (trigger: HTMLButtonElement): void => {
+    const index = trigger.dataset.galleryIndex ?? "0"
+    const item = this.carousel?.track?.querySelector<HTMLElement>(`[data-index="${index}"]`)
+    if (!item) return
+    // Carousel marks off-screen slides `inert` via its own IntersectionObserver
+    // — scrollIntoView silently no-ops on an inert element, so clear it first;
+    // Carousel's observer recomputes the correct value once the scroll settles.
+    item.removeAttribute("inert")
+    item.scrollIntoView({ inline: "start", block: "nearest" })
+  }
+
+  get carousel(): HTMLElementTagNameMap["mx-carousel"] | null {
+    return this.querySelector("mx-carousel")
+  }
+}
+
+if (!customElements.get("mx-gallery")) customElements.define("mx-gallery", Gallery)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-gallery": Gallery
+  }
+}

package/src/Component/Gallery/Gallery.stories.ts

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./gallery.twig"
+import Carousel from "../Carousel/carousel.twig"
+import Image from "../../Atom/Image/image.twig"
+import "./gallery.css"
+import "./Elements/Gallery"
+import "../Dialog/dialog.css"
+import "../Carousel/carousel.css"
+import "../Carousel/Elements/Carousel"
+import "../../Atom/Image/_image.css"
+
+const photos = Array.from({ length: 6 }, (_, index) => ({
+  src: `https://picsum.photos/seed/gallery-${index}/800/600`,
+  alt: `Photo ${index + 1}`,
+}))
+
+type GalleryTwigProps = {
+  id?: string
+  preview: string
+  content: string
+  dialogLabel?: string
+}
+
+const meta: Meta<GalleryTwigProps> = {
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<GalleryTwigProps>
+
+/**
+ * A grid of thumbnails — clicking any of them opens a fullscreen carousel of
+ * every photo, starting at the one clicked.
+ */
+export const Grid: Story = {
+  args: {
+    id: "gallery-grid",
+    preview: photos
+      .map(
+        (photo, index) =>
+          `<button type="button" class="mx-gallery__trigger" aria-controls="gallery-grid" data-gallery-index="${index}">${Image(photo)}</button>`,
+      )
+      .join(""),
+    content: Carousel({
+      items: photos.map(photo => Image(photo)).join(""),
+      counter: true,
+    }),
+  },
+}
+
+/**
+ * A single preview image. With only one photo in the set, the modal shows
+ * it directly instead of a carousel.
+ */
+export const SingleImage: Story = {
+  args: {
+    id: "gallery-single",
+    preview: `<button type="button" class="mx-gallery__trigger" aria-controls="gallery-single">${Image(photos[0])}</button>`,
+    content: Image(photos[0]),
+  },
+}

package/src/Component/Gallery/Gallery.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from "@storybook/react-vite"
+import Component from "./Gallery"
+import GalleryTrigger from "./Components/GalleryTrigger"
+import Carousel from "../Carousel/Carousel"
+import "./gallery.css"
+import "../Dialog/dialog.css"
+import "../Carousel/carousel.css"
+import { Page } from "../../../.storybook-react/decorators"
+
+const photos = Array.from({ length: 6 }, (_, index) => ({
+  src: `https://picsum.photos/seed/gallery-${index}/800/600`,
+  alt: `Photo ${index + 1}`,
+}))
+
+const carouselItems = photos.map(photo => <img key={photo.src} src={photo.src} alt={photo.alt} />)
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  decorators: [Page],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * A grid of thumbnails — clicking any of them opens a fullscreen carousel of
+ * every photo, starting at the one clicked.
+ */
+export const Grid: Story = {
+  render: () => (
+    <Component
+      // oxlint-disable-next-line react-perf/jsx-no-jsx-as-prop -- Storybook story, rendered once per view, not a hot re-render path
+      content={<Carousel items={carouselItems} counter />}
+    >
+      {photos.map((photo, index) => (
+        <GalleryTrigger key={photo.src} index={index}>
+          <img src={photo.src} alt={photo.alt} />
+        </GalleryTrigger>
+      ))}
+    </Component>
+  ),
+}
+
+/**
+ * A single preview image. With only one photo in the set, the modal shows
+ * it directly instead of a carousel.
+ */
+export const SingleImage: Story = {
+  render: () => (
+    // oxlint-disable-next-line react-perf/jsx-no-jsx-as-prop -- Storybook story, rendered once per view, not a hot re-render path
+    <Component content={<img src={photos[0].src} alt={photos[0].alt} />}>
+      <GalleryTrigger index={0}>
+        <img src={photos[0].src} alt={photos[0].alt} />
+      </GalleryTrigger>
+    </Component>
+  ),
+}