@pnx-mixtape/mxds 0.0.13 → 0.0.15

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

@@ -1,85 +1,121 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Dialog Dialog smoke-test 1`] = `
-<p>
-  <a href="#dialog-df"
-     class="button is-excluded"
+<div class="mx-page default">
+  <a href="#example-dialog"
+     aria-controls="unique-0"
   >
-    Open Me
+    <span>
+      Open dialog
+    </span>
   </a>
-</p>
-<mx-dialog id="dialog-df"
-           data-modal
->
-  <dialog class="dialog">
-    <button autofocus
-            class="button button--icon-only icon icon--close"
-            data-close
-    >
-      Close dialog
-    </button>
-    <div class="dialog__content vertical-flow">
-      <h3>
-        Thanks you're almost done!
-      </h3>
-      <p>
-        To finish the process you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?
-      </p>
-    </div>
-    <div class="form__actions">
-      <button class="button button--primary"
+  <mx-dialog id="unique-0">
+    <dialog class="mx-dialog ">
+      <button autofocus
+              class="mx-button mx-button--icon-only mx-icon mx-icon--close"
               data-close
       >
-        Let's get started
+        Close dialog
       </button>
-      <button class="button"
-              data-close
-      >
-        Cancel
-      </button>
-    </div>
-  </dialog>
-</mx-dialog>
+      <div class="mx-dialog__content mx-vertical-flow">
+        <h2>
+          Dialog heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+        </p>
+        <button data-close
+                class="mx-button  mx-button--dark"
+                type="button"
+        >
+          <span>
+            Let's go
+          </span>
+        </button>
+      </div>
+    </dialog>
+  </mx-dialog>
+</div>
 `;
 
 exports[`Component/Dialog Fullscreen smoke-test 1`] = `
-<p>
-  <a href="#dialog-df"
-     class="button is-excluded"
+<div class="mx-page default">
+  <button aria-controls="unique-0"
+          class="mx-button  mx-button--dark"
+          type="button"
   >
-    Open Me
-  </a>
-</p>
-<mx-dialog id="dialog-df"
-           data-modal
->
-  <dialog class="dialog dialog--fullscreen">
-    <button autofocus
-            class="button button--icon-only icon icon--close"
-            data-close
-    >
-      Close dialog
-    </button>
-    <div class="dialog__content vertical-flow">
-      <h3>
-        Thanks you're almost done!
-      </h3>
-      <p>
-        To finish the process you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?
-      </p>
-    </div>
-    <div class="form__actions">
-      <button class="button button--primary"
+    <span>
+      Open fullscreen modal
+    </span>
+  </button>
+  <mx-dialog id="unique-0"
+             data-modal
+  >
+    <dialog class="mx-dialog mx-dialog--fullscreen">
+      <button autofocus
+              class="mx-button mx-button--icon-only mx-icon mx-icon--close"
               data-close
       >
-        Let's get started
+        Close dialog
       </button>
-      <button class="button"
+      <div class="mx-dialog__content mx-vertical-flow">
+        <h2>
+          Dialog heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+        </p>
+        <button data-close
+                class="mx-button  mx-button--dark"
+                type="button"
+        >
+          <span>
+            Let's go
+          </span>
+        </button>
+      </div>
+    </dialog>
+  </mx-dialog>
+</div>
+`;
+
+exports[`Component/Dialog Modal smoke-test 1`] = `
+<div class="mx-page default">
+  <button aria-controls="unique-0"
+          class="mx-button  mx-button--dark"
+          type="button"
+  >
+    <span>
+      Open modal
+    </span>
+  </button>
+  <mx-dialog id="unique-0"
+             data-modal
+  >
+    <dialog class="mx-dialog ">
+      <button autofocus
+              class="mx-button mx-button--icon-only mx-icon mx-icon--close"
               data-close
       >
-        Cancel
+        Close dialog
       </button>
-    </div>
-  </dialog>
-</mx-dialog>
+      <div class="mx-dialog__content mx-vertical-flow">
+        <h2>
+          Dialog heading
+        </h2>
+        <p>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+        </p>
+        <button data-close
+                class="mx-button  mx-button--dark"
+                type="button"
+        >
+          <span>
+            Let's go
+          </span>
+        </button>
+      </div>
+    </dialog>
+  </mx-dialog>
+</div>
 `;

package/src/Component/Dialog/dialog.css

@@ -9,8 +9,8 @@
 }
 
 @layer design-system.components {
-  .dialog {
-    max-inline-size: var(--container-max-width);
+  .mx-dialog {
+    inline-size: min(100%, var(--container-max-width));
     max-block-size: 90vh;
     overflow: auto hidden;
     overscroll-behavior: contain;
@@ -18,13 +18,34 @@
     border: var(--line-width, 1px) solid
       var(--line-colour, var(--colour-border));
     padding: 0;
-    margin: auto;
+    place-self: center;
+    opacity: 0;
+    transform: translateY(100%);
 
     &::backdrop {
-      background-color: hsla(0deg 0% 100% / 75%);
+      background-color: hsl(0deg 0% 100% / 75%);
+      opacity: 0;
     }
 
-    & .dialog__content {
+    &[open] {
+      opacity: 1;
+      transform: translateY(0);
+
+      @starting-style {
+        opacity: 0;
+        transform: translateY(100%);
+      }
+
+      &::backdrop {
+        opacity: 0.8;
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+
+    & .mx-dialog__content {
       padding: var(--spacing-s);
 
       @media (--medium-up) {
@@ -33,20 +54,13 @@
       }
     }
 
-    & > .icon--close {
+    & > .mx-icon--close {
       position: absolute;
       inset-block-start: var(--spacing-xxs);
       inset-inline-end: var(--spacing-xxs);
       border: 0;
       z-index: 11;
     }
-
-    & .form__actions {
-      border-block-start: var(--line-width, 1px) solid
-        var(--line-colour, var(--colour-border));
-      padding-block: var(--spacing-s);
-      place-content: center;
-    }
   }
 }
 
@@ -55,23 +69,21 @@
  */
 
 @layer design-system.components {
-  .dialog--fullscreen {
+  .mx-dialog--fullscreen {
     box-shadow: none;
     border: 0;
     inset-block-start: 0;
     inline-size: 100%;
-    max-inline-size: none;
     block-size: 100%;
     max-block-size: none;
 
     &[open] {
-      display: flex;
-      flex-direction: column;
+      display: grid;
     }
 
-    & .dialog__content {
-      max-inline-size: var(--container-max-width);
-      margin: auto;
+    & .mx-dialog__content {
+      inline-size: min(100%, var(--container-max-width));
+      place-self: center;
     }
   }
 }

package/src/Component/Dialog/dialog.twig

@@ -1,19 +1,18 @@
-<p><a href="#{{ id|default('dialog-df') }}" class="button is-excluded">{{ title | default('Open Me') }}</a></p>
+{% set baseClass = 'mx-dialog' %}
+{% set classes = [
+  baseClass,
+  fullscreen ? baseClass~'--fullscreen' : null
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
-<mx-dialog id="{{ id|default('dialog-df') }}" data-modal>
-  <dialog class="dialog{% if fullscreen %} dialog--fullscreen{% endif %}">
-    <button autofocus class="button button--icon-only icon icon--close" data-close>Close dialog</button>
-    <div class="dialog__content vertical-flow">
-      {% block content %}
-        <h3>Thanks you're almost done!</h3>
-        <p>To finish the process you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?</p>
-      {% endblock %}
+<mx-dialog id="{{ id }}"{% if modal %} data-modal{% endif %}>
+  <dialog{{ attributes }}{% if open %} open{% endif %}>
+    <button autofocus class="mx-button mx-button--icon-only mx-icon mx-icon--close" data-close>Close dialog</button>
+    <div class="mx-dialog__content mx-vertical-flow">
+      {{ title }}
+      {{ content }}
+      {# Pass in the [data-close] attribute if it's a button that should close the dialog. #}
+      {{ link }}
     </div>
-    {% block actions %}
-      <div class="form__actions">
-        <button class="button button--primary" data-close>Let's get started</button>
-        <button class="button" data-close>Cancel</button>
-      </div>
-    {% endblock %}
   </dialog>
 </mx-dialog>

package/src/Component/DropMenu/Components/DropMenuContext.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-unused-vars, no-console, consistent-return, @eslint-react/web-api/no-leaked-event-listener */
+/* eslint-disable no-console, consistent-return, @eslint-react/web-api/no-leaked-event-listener */
 /**
  * @file Drop Menu hook.
  */
@@ -13,7 +13,7 @@ import {
   Dispatch,
   SetStateAction,
   createContext,
-  useContext,
+  use,
   JSX,
   useMemo,
   PropsWithChildren,
@@ -47,7 +47,7 @@ type DropMenuProviderProps = PropsWithChildren & {
 }
 
 const DropMenuContext = createContext<DropMenuContextValues>(null)
-export const useDropMenuContext = () => useContext(DropMenuContext)
+export const useDropMenuContext = () => use(DropMenuContext)
 
 const defaultSelected: string[] = []
 const defaultOnClick = (): void => {}
@@ -90,7 +90,9 @@ const DropMenuProvider = ({
 
   const handleToggle = ({ newState }: ToggleEvent): void => {
     toggle()
-    const handleClose = (): void => popoverRef.current?.togglePopover()
+    const handleClose = (): void => {
+      popoverRef.current?.togglePopover()
+    }
     if (newState === "open") {
       keyboard.attachPopup(popoverRef.current?.id, handleClose)
     } else {
@@ -182,11 +184,7 @@ const DropMenuProvider = ({
     [dropMenuId, triggerId, descriptionId, on, popoverRef, selected],
   )
 
-  return (
-    <DropMenuContext.Provider value={values}>
-      {children}
-    </DropMenuContext.Provider>
-  )
+  return <DropMenuContext value={values}>{children}</DropMenuContext>
 }
 
 export default DropMenuProvider

package/src/Component/DropMenu/Components/DropMenuItem.tsx

@@ -15,7 +15,7 @@ const DropMenuItem = ({
   ...props
 }: DropMenuItemProps): JSX.Element => {
   const { selected, handleClick, handleKeydown } = useDropMenuContext()
-  const isSelected: boolean = selected.includes(id)
+  const isSelected: boolean = selected?.includes(id)
 
   return (
     <button

package/src/Component/DropMenu/DropMenu.stories.ts

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

package/src/Component/DropMenu/DropMenu.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Components/DropMenuContext"
 import DropMenuContainer from "./DropMenu"
 import DropMenuItem from "./Components/DropMenuItem"

package/src/Component/DropMenu/Elements/DropMenu.ts

@@ -28,7 +28,7 @@ export default class DropMenu extends HTMLElement {
     // Polyfill anchor (everywhere so far).
     if (!("anchorName" in document.documentElement.style)) {
       const { default: Polyfills } = await import("../polyfills.js")
-      new Polyfills(this.menu) // eslint-disable-line no-new
+      new Polyfills(this.menu)
     }
     // Polyfill popover (FF only)
     if (!Object.hasOwn(HTMLElement, "popover")) {

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

@@ -1,32 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/DropMenu DropMenu smoke-test 1`] = `
-<mx-dropmenu closeonclick>
-  <button id="unique-0"
-          class="mx-drop-menu__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
-          popovertarget="dropdown-menu"
-          style="anchor-name: --drop-menu-dropdown-menu"
-  >
-    Categories
-  </button>
-  <div class="mx-drop-menu"
-       id="dropdown-menu"
-       aria-labelledby="unique-0"
-       style="position-anchor: --drop-menu-dropdown-menu"
-       popover
-  >
-    <a href="#news">
-      News
-    </a>
-    <a href="#events">
-      Events
-    </a>
-    <button type="button"
-            data-id="stories"
-            aria-checked="false"
+<div class="mx-page default">
+  <mx-dropmenu closeonclick>
+    <button id="unique-0"
+            class="mx-drop-menu__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
+            popovertarget="dropdown-menu"
+            style="anchor-name: --drop-menu-dropdown-menu"
     >
-      Stories
+      Categories
     </button>
-  </div>
-</mx-dropmenu>
+    <div class="mx-drop-menu"
+         id="dropdown-menu"
+         aria-labelledby="unique-0"
+         style="position-anchor: --drop-menu-dropdown-menu"
+         popover
+    >
+      <a href="#news">
+        News
+      </a>
+      <a href="#events">
+        Events
+      </a>
+      <button type="button"
+              data-id="stories"
+              aria-checked="false"
+      >
+        Stories
+      </button>
+    </div>
+  </mx-dropmenu>
+</div>
 `;

package/src/Component/DropMenu/drop-menu.css

@@ -16,6 +16,8 @@
   }
 
   .mx-drop-menu {
+    display: none;
+    opacity: 0;
     position: absolute;
     background-color: var(
       --drop-menu-background,
@@ -33,14 +35,19 @@
       position-anchor: --drop-menu;
       inset-area: bottom;
       position-area: bottom;
-      position-try-options: flip-block;
+      position-try-fallbacks: flip-block;
       position-try-fallback: flip-block;
       min-inline-size: anchor-size(width);
     }
 
     &:popover-open {
-      display: flex;
-      flex-direction: column;
+      opacity: 1;
+      display: block;
+
+      @starting-style {
+        opacity: 0;
+        display: block;
+      }
     }
 
     & button {
@@ -63,6 +70,7 @@
       padding-inline: var(--spacing-xs);
       cursor: pointer;
       min-inline-size: 15ch;
+      display: block;
     }
   }
 }

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./filters.twig"
 import FilterItem from "./filter-item.twig"
 import "./Elements/Filters"
@@ -89,9 +89,6 @@ const meta: Meta<FiltersType> = {
       }),
     ],
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {},
 }