@pnx-mixtape/mxds 0.0.21 → 0.0.23

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

@@ -1,8 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Filters CollapsibleCounter smoke-test 1`] = `
 <div class="mx-page default">
-  <mx-filters class="mx-filters mx-filters--down "
+  <mx-filters class="mx-filters mx-filters--down"
               count="1"
   >
     <mx-accordionmobile>
@@ -41,8 +41,8 @@ exports[`Component/Filters CollapsibleCounter smoke-test 1`] = `
                 >
                 </span>
               </summary>
-              <div class="mx-form-item  mx-accordion__content">
-                <input class="mx-input__text "
+              <div class="mx-form-item mx-accordion__content">
+                <input class="mx-input__text"
                        id="filter-keywords"
                        name="example-keywords"
                        type="text"
@@ -76,8 +76,8 @@ exports[`Component/Filters CollapsibleCounter smoke-test 1`] = `
                 >
                 </span>
               </summary>
-              <fieldset class="mx-form-item mx-fieldset  mx-accordion__content">
-                <div class="mx-checkbox ">
+              <fieldset class="mx-form-item mx-fieldset mx-accordion__content">
+                <div class="mx-checkbox">
                   <input id="category-news"
                          type="checkbox"
                          name="categories"
@@ -88,7 +88,7 @@ exports[`Component/Filters CollapsibleCounter smoke-test 1`] = `
                     News
                   </label>
                 </div>
-                <div class="mx-checkbox ">
+                <div class="mx-checkbox">
                   <input id="category-media"
                          type="checkbox"
                          name="categories"
@@ -99,8 +99,10 @@ exports[`Component/Filters CollapsibleCounter smoke-test 1`] = `
                     Media Releases
                   </label>
                 </div>
-                <div hidden="until-found">
-                  <div class="mx-checkbox ">
+                <div data-hide
+                     hidden="until-found"
+                >
+                  <div class="mx-checkbox">
                     <input id="category-publications"
                            type="checkbox"
                            name="categories"
@@ -121,14 +123,14 @@ exports[`Component/Filters CollapsibleCounter smoke-test 1`] = `
             </details>
           </mx-accordion>
           <div class="mx-form-actions">
-            <button class="mx-button  mx-button--dark"
+            <button class="mx-button mx-button--dark"
                     type="submit"
             >
               <span>
                 Apply filters
               </span>
             </button>
-            <button class="mx-button  mx-button--light"
+            <button class="mx-button mx-button--light"
                     type="reset"
             >
               <span>
@@ -145,7 +147,7 @@ exports[`Component/Filters CollapsibleCounter smoke-test 1`] = `
 
 exports[`Component/Filters CollapsibleRight smoke-test 1`] = `
 <div class="mx-page default">
-  <mx-filters class="mx-filters mx-filters--right "
+  <mx-filters class="mx-filters mx-filters--right"
               count="0"
   >
     <mx-accordionmobile>
@@ -183,14 +185,14 @@ exports[`Component/Filters CollapsibleRight smoke-test 1`] = `
                 >
                 </span>
               </summary>
-              <div class="mx-form-item  mx-accordion__content">
+              <div class="mx-form-item mx-accordion__content">
                 <div class="mx-description"
                      id="unique-0"
                      role="tooltip"
                 >
                   Search by keywords
                 </div>
-                <input class="mx-input__text "
+                <input class="mx-input__text"
                        id="filter-keywords"
                        name="example-keywords"
                        type="text"
@@ -213,8 +215,8 @@ exports[`Component/Filters CollapsibleRight smoke-test 1`] = `
                 >
                 </span>
               </summary>
-              <fieldset class="mx-form-item mx-fieldset  mx-accordion__content">
-                <div class="mx-checkbox ">
+              <fieldset class="mx-form-item mx-fieldset mx-accordion__content">
+                <div class="mx-checkbox">
                   <input id="category-news"
                          type="checkbox"
                          name="categories"
@@ -224,7 +226,7 @@ exports[`Component/Filters CollapsibleRight smoke-test 1`] = `
                     News
                   </label>
                 </div>
-                <div class="mx-checkbox ">
+                <div class="mx-checkbox">
                   <input id="category-media"
                          type="checkbox"
                          name="categories"
@@ -234,7 +236,7 @@ exports[`Component/Filters CollapsibleRight smoke-test 1`] = `
                     Media Releases
                   </label>
                 </div>
-                <div class="mx-checkbox ">
+                <div class="mx-checkbox">
                   <input id="category-publications"
                          type="checkbox"
                          name="categories"
@@ -248,7 +250,7 @@ exports[`Component/Filters CollapsibleRight smoke-test 1`] = `
             </details>
           </mx-accordion>
           <div class="mx-form-actions">
-            <button class="mx-button  mx-button--dark"
+            <button class="mx-button mx-button--dark"
                     type="submit"
                     disabled
             >
@@ -256,7 +258,7 @@ exports[`Component/Filters CollapsibleRight smoke-test 1`] = `
                 Apply filters
               </span>
             </button>
-            <button class="mx-button  mx-button--light"
+            <button class="mx-button mx-button--light"
                     type="reset"
                     disabled
             >
@@ -274,7 +276,7 @@ exports[`Component/Filters CollapsibleRight smoke-test 1`] = `
 
 exports[`Component/Filters Filters smoke-test 1`] = `
 <div class="mx-page default">
-  <mx-filters class="mx-filters mx-filters--down "
+  <mx-filters class="mx-filters"
               count="0"
   >
     <h2 class="mx-filters__title">
@@ -283,8 +285,8 @@ exports[`Component/Filters Filters smoke-test 1`] = `
     <form class="mx-filters__form mx-vertical-flow"
           action="#"
     >
-      <div class="mx-form-item  mx-filter-item">
-        <label class="mx-label "
+      <div class="mx-form-item mx-filter-item">
+        <label class="mx-label"
                for="filter-keywords"
         >
           Keywords
@@ -295,7 +297,7 @@ exports[`Component/Filters Filters smoke-test 1`] = `
         >
           Search by keywords
         </div>
-        <input class="mx-input__text "
+        <input class="mx-input__text"
                id="filter-keywords"
                name="example-keywords"
                type="text"
@@ -303,11 +305,11 @@ exports[`Component/Filters Filters smoke-test 1`] = `
                aria-describedby="unique-0"
         >
       </div>
-      <fieldset class="mx-form-item mx-fieldset  mx-filter-item">
-        <legend class="mx-legend ">
+      <fieldset class="mx-form-item mx-fieldset mx-filter-item">
+        <legend class="mx-legend">
           Categories
         </legend>
-        <div class="mx-checkbox ">
+        <div class="mx-checkbox">
           <input id="category-news"
                  type="checkbox"
                  name="categories"
@@ -317,7 +319,7 @@ exports[`Component/Filters Filters smoke-test 1`] = `
             News
           </label>
         </div>
-        <div class="mx-checkbox ">
+        <div class="mx-checkbox">
           <input id="category-media"
                  type="checkbox"
                  name="categories"
@@ -327,7 +329,7 @@ exports[`Component/Filters Filters smoke-test 1`] = `
             Media Releases
           </label>
         </div>
-        <div class="mx-checkbox ">
+        <div class="mx-checkbox">
           <input id="category-publications"
                  type="checkbox"
                  name="categories"
@@ -339,7 +341,7 @@ exports[`Component/Filters Filters smoke-test 1`] = `
         </div>
       </fieldset>
       <div class="mx-form-actions">
-        <button class="mx-button  mx-button--dark"
+        <button class="mx-button mx-button--dark"
                 type="submit"
                 disabled
         >
@@ -347,7 +349,7 @@ exports[`Component/Filters Filters smoke-test 1`] = `
             Apply filters
           </span>
         </button>
-        <button class="mx-button  mx-button--light"
+        <button class="mx-button mx-button--light"
                 type="reset"
                 disabled
         >
@@ -363,7 +365,7 @@ exports[`Component/Filters Filters smoke-test 1`] = `
 
 exports[`Component/Filters Instant smoke-test 1`] = `
 <div class="mx-page default">
-  <mx-filters class="mx-filters mx-filters--down  mx-filters--auto"
+  <mx-filters class="mx-filters mx-filters--auto"
               count="0"
   >
     <h2 class="mx-filters__title">
@@ -372,8 +374,8 @@ exports[`Component/Filters Instant smoke-test 1`] = `
     <form class="mx-filters__form mx-vertical-flow"
           action="#"
     >
-      <div class="mx-form-item  mx-filter-item">
-        <label class="mx-label "
+      <div class="mx-form-item mx-filter-item">
+        <label class="mx-label"
                for="filter-keywords"
         >
           Keywords
@@ -384,7 +386,7 @@ exports[`Component/Filters Instant smoke-test 1`] = `
         >
           Search by keywords
         </div>
-        <input class="mx-input__text "
+        <input class="mx-input__text"
                id="filter-keywords"
                name="example-keywords"
                type="text"
@@ -392,11 +394,11 @@ exports[`Component/Filters Instant smoke-test 1`] = `
                aria-describedby="unique-0"
         >
       </div>
-      <fieldset class="mx-form-item mx-fieldset  mx-filter-item">
-        <legend class="mx-legend ">
+      <fieldset class="mx-form-item mx-fieldset mx-filter-item">
+        <legend class="mx-legend">
           Categories
         </legend>
-        <div class="mx-checkbox ">
+        <div class="mx-checkbox">
           <input id="category-news"
                  type="checkbox"
                  name="categories"
@@ -406,7 +408,7 @@ exports[`Component/Filters Instant smoke-test 1`] = `
             News
           </label>
         </div>
-        <div class="mx-checkbox ">
+        <div class="mx-checkbox">
           <input id="category-media"
                  type="checkbox"
                  name="categories"
@@ -416,7 +418,7 @@ exports[`Component/Filters Instant smoke-test 1`] = `
             Media Releases
           </label>
         </div>
-        <div class="mx-checkbox ">
+        <div class="mx-checkbox">
           <input id="category-publications"
                  type="checkbox"
                  name="categories"
@@ -428,7 +430,7 @@ exports[`Component/Filters Instant smoke-test 1`] = `
         </div>
       </fieldset>
       <div class="mx-form-actions">
-        <button class="mx-button  mx-button--light"
+        <button class="mx-button mx-button--light"
                 type="reset"
                 disabled
         >

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

@@ -26,7 +26,7 @@
       {% for field in fields %}
         {% if loop.index <= shownItems %}{{ field }}{% endif %}
       {% endfor %}
-      <div hidden="until-found">
+      <div data-hide>
         {% for field in fields %}
           {% if loop.index > shownItems %}{{ field }}{% endif %}
         {% endfor %}

package/src/Component/Filters/filters.css

@@ -6,13 +6,40 @@
   .mx-filters {
     display: grid;
     gap: var(--gap);
+
+    &:not(:defined) {
+      & [data-show] {
+        display: none;
+      }
+
+      & .mx-filters__title .mx-icon--chevron-right {
+        @media (--medium-up) {
+          rotate: 90deg;
+        }
+      }
+
+      & [open] .mx-filters__title .mx-icon--chevron-right {
+        @media (--medium-up) {
+          rotate: -90deg;
+        }
+      }
+    }
+
+    &:defined .mx-filters__title {
+      @media (--medium-up) {
+        pointer-events: none;
+
+        & .mx-icon {
+          display: none;
+        }
+      }
+    }
   }
 
   .mx-filters__title {
     --heading-font-size: var(--font-size-l);
     --font-min: calc(
-      var(--heading-font-size) - var(--heading-font-size) *
-        var(--font-size-diff, 0.3)
+      var(--heading-font-size) - var(--heading-font-size) * var(--font-size-diff, 0.3)
     );
 
     font-weight: var(--font-weight-bold);
@@ -26,16 +53,8 @@
     align-items: center;
     min-block-size: 40px;
 
-    @media (--medium-up) {
-      pointer-events: none;
-    }
-
     & .mx-icon {
       margin-inline-start: auto;
-
-      @media (--medium-up) {
-        display: none;
-      }
     }
 
     & [data-counters] {
@@ -59,20 +78,17 @@
         margin-inline-start: auto;
       }
     }
+  }
 
-    & .mx-accordion__content {
-      padding-block-start: var(--spacing-xxxs);
-    }
+  .mx-filter-item .mx-accordion__content {
+    padding-block-start: var(--spacing-xxxs);
   }
 
   .mx-filters--right {
     @media (--medium-down) {
       & .mx-filters__form {
         background-color: var(--background, var(--colour-background));
-        padding-inline: var(
-          --gutter,
-          clamp(var(--spacing-s), 6vw, var(--spacing-l))
-        );
+        padding-inline: var(--gutter, clamp(var(--spacing-s), 6vw, var(--spacing-l)));
         padding-block-end: var(--block-padding);
         overflow-y: auto;
         position: fixed;

package/src/Component/GlobalAlert/Elements/ClosableAlert.ts

@@ -42,15 +42,17 @@ export default class GlobalAlert extends HTMLElement {
     this.controller.abort()
     this.remove()
     this.localStorage = "true"
-    const newEvent: CustomEvent<{ id: string; target: GlobalAlert }> =
-      new CustomEvent("GlobalAlert-close", {
+    const newEvent: CustomEvent<{ id: string; target: GlobalAlert }> = new CustomEvent(
+      "GlobalAlert-close",
+      {
         bubbles: true,
         cancelable: true,
         detail: {
           id: this.id,
           target: this,
         },
-      })
+      },
+    )
     this.dispatchEvent(newEvent)
   }
 
@@ -65,9 +67,7 @@ export default class GlobalAlert extends HTMLElement {
   get container(): HTMLElement {
     const element: HTMLElement = this.querySelector("[data-container]")
     if (!element) {
-      throw new Error(
-        `${this.localName} must contain a [data-container] element.`,
-      )
+      throw new Error(`${this.localName} must contain a [data-container] element.`)
     }
     return element
   }
@@ -89,7 +89,8 @@ export default class GlobalAlert extends HTMLElement {
   }
 }
 
-customElements.define("mx-closable-alert", GlobalAlert)
+if (!customElements.get("mx-closable-alert"))
+  customElements.define("mx-closable-alert", GlobalAlert)
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/Component/GlobalAlert/GlobalAlert.stories.ts

@@ -9,29 +9,73 @@ import {
   HeadingTypes,
 } from "@pnx-mixtape/ids-shape"
 
+/**
+ * A Global Alert that can optionally be dismissed.
+ */
 const meta: Meta<GlobalAlertType> = {
   tags: ["autodocs"],
   component: Component,
-  argTypes: {
-    type: { options: Object.values(GlobalAlertTypes), control: "radio" },
-    id: {
-      control: "text",
-      description: "Set an id to get stable localStorage entry.",
-    },
-    dismissible: { control: "boolean" },
-    // @ts-expect-error The controls follow the shape
-    "title.title": { control: "text" },
-    "title.as": { options: Object.values(HeadingTypes), control: "select" },
-  },
   args: {
     title: Heading({
-      title: "In page alert",
+      title: "Global alert",
       as: HeadingTypes.TWO,
       modifiers: [HeadingTypes.FOUR],
     }),
     content: "<p>Something happened that requires your attention</p>",
     type: GlobalAlertTypes.LIGHT,
     dismissible: true,
+    id: "light-alert",
+  },
+  argTypes: {
+    type: {
+      description: "Set the style of alert.",
+      options: Object.values(GlobalAlertTypes),
+      control: "radio",
+      table: {
+        defaultValue: { summary: GlobalAlertTypes.LIGHT },
+        type: { summary: "enum" },
+      },
+    },
+    id: {
+      control: "text",
+      description: "Set an id to ensure a stable localStorage entry. Required for **dismissable**.",
+    },
+    dismissible: {
+      description: "Add a close button, that stays closed after clicked by using localStorage.",
+      control: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    title: {
+      description:
+        "Optional content [Heading](/?path=/docs/atom-heading--docs). It is helpful to use a smaller heading modifier.",
+      control: "text",
+      table: {
+        type: { summary: "Heading" },
+        subcategory: "Alert content",
+      },
+    },
+    content: {
+      description: "Content.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "WysiwygText" },
+        subcategory: "Alert content",
+      },
+    },
+    link: {
+      description: "Optional content [Link](/?path=/docs/atom-link--docs).",
+      control: "text",
+      table: {
+        type: { summary: "Link" },
+        subcategory: "Alert content",
+      },
+    },
   },
 }
 
@@ -40,9 +84,13 @@ type Story = StoryObj<GlobalAlertType>
 
 export const GlobalAlert: Story = {}
 
+/**
+ * The critical variant is usually not dismissable.
+ */
 export const Critical: Story = {
   args: {
     dismissible: false,
     type: GlobalAlertTypes.CRITICAL,
+    id: "critical-alert",
   },
 }

package/src/Component/GlobalAlert/GlobalAlert.stories.tsx

@@ -9,8 +9,7 @@ const meta: Meta<typeof Component> = {
   args: {
     children: (
       <p>
-        <b>Something happened.</b> And if you&apos;d like to know what,{" "}
-        <a href="#">Click here</a>.
+        <b>Something happened.</b> And if you&apos;d like to know what, <a href="#">Click here</a>.
       </p>
     ),
     dismissible: true,

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

@@ -1,12 +1,14 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/GlobalAlert Critical smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-global-alert mx-page mx-global-alert--critical">
+  <div class="mx-global-alert mx-page mx-global-alert--critical"
+       id="critical-alertcritical"
+  >
     <div class="mx-global-alert__inner">
       <div class="mx-global-alert__content">
-        <h2 class=" mx-heading--m">
-          In page alert
+        <h2 class="mx-heading--m">
+          Global alert
         </h2>
         <p>
           Something happened that requires your attention
@@ -26,8 +28,8 @@ exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
          data-container
     >
       <div class="mx-global-alert__content">
-        <h2 class=" mx-heading--m">
-          In page alert
+        <h2 class="mx-heading--m">
+          Global alert
         </h2>
         <p>
           Something happened that requires your attention

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

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/GlobalAlert Critical smoke-test 1`] = `
-<div id="«r1»"
+<div id="_r_1_"
      class="mx-global-alert mx-global-alert--critical"
 >
   <div class="mx-global-alert__inner">
@@ -22,7 +22,7 @@ exports[`Component/GlobalAlert Critical smoke-test 1`] = `
 `;
 
 exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
-<div id="«r0»"
+<div id="_r_0_"
      class="mx-global-alert mx-global-alert--light"
 >
   <div class="mx-global-alert__inner">