@pnx-mixtape/mxds 0.0.2 → 0.0.4

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/Breadcrumb Breadcrumb smoke-test 1`] = `
+exports[`Component/Breadcrumb Breadcrumb smoke-test 1`] = `
 <nav class="nav nav--inline nav--breadcrumb ">
   <ul>
     <li>

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/Breadcrumb Breadcrumb smoke-test 1`] = `
+exports[`Component/Breadcrumb Breadcrumb smoke-test 1`] = `
 <nav class="nav nav--breadcrumb nav--inline">
   <ul>
     <li>
@@ -31,7 +31,7 @@ exports[`Navigation/Breadcrumb Breadcrumb smoke-test 1`] = `
 </nav>
 `;
 
-exports[`Navigation/Breadcrumb NoCurrentPage smoke-test 1`] = `
+exports[`Component/Breadcrumb NoCurrentPage smoke-test 1`] = `
 <nav class="nav nav--breadcrumb nav--inline">
   <ul>
     <li>

package/src/Component/Breadcrumb/breadcrumb.css

@@ -2,7 +2,7 @@
  * Breadcrumb Navigation
  */
 
-@layer components {
+@layer design-system.components {
   .nav--breadcrumb {
     --nav-font-size: var(--font-size-s);
 

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

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/Callout Callout smoke-test 1`] = `
+<div class="callout vertical-flow">
+  <h2 class>
+    Callout heading
+  </h2>
+  <p>
+    Some callout content.
+  </p>
+</div>
+`;

package/src/Component/Callout/callout.css

@@ -1,4 +1,4 @@
-@layer components {
+@layer design-system.components {
   .callout {
     padding-inline-start: var(--line-gap, var(--gap));
     border-inline-start: var(--line-width, 6px) solid

package/src/Component/Card/README.md

@@ -4,18 +4,12 @@
 
 **CSS**
 
-`@import @pnx-mixtape/mxds/card.css';`
+`@import @pnx-mixtape/mxds/src/Component/Card/card.css';`
 
-**HTML**
+**Twig**
 
-```html
-<div class="card">
-  <figure class="card__media">
-    <img src="https://via.placeholder.com/788x556" alt="Descriptive text" />
-  </figure>
-  <div class="card__content">
-    <h3>Title</h3>
-    <p>Body content</p>
-  </div>
-</div>
-```
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Component/Card/card.twig' %}`
+
+Alternatively copy/paste the file for more control.

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Card Card smoke-test 1`] = `
+exports[`Component/Card Card smoke-test 1`] = `
 <div class="container">
   <article class="card ">
     <figure class="card__media">
@@ -11,23 +11,25 @@ exports[`Components/Card Card smoke-test 1`] = `
       </picture>
     </figure>
     <div class="card__content vertical-flow-flex">
-      <h3 class=" ">
+      <h3 class>
         Card title
       </h3>
       <div class="text--lede">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       </div>
-      <a class="link--more "
+      <a class="link link--more "
          href="#"
       >
-        Find out more
+        <span>
+          Find out more
+        </span>
       </a>
     </div>
   </article>
 </div>
 `;
 
-exports[`Components/Card Date smoke-test 1`] = `
+exports[`Component/Card Date smoke-test 1`] = `
 <div class="container">
   <article class="card ">
     <figure class="card__media">
@@ -41,23 +43,25 @@ exports[`Components/Card Date smoke-test 1`] = `
       <div class="text--small">
         25 May 2025
       </div>
-      <h3 class=" ">
+      <h3 class>
         Card title
       </h3>
       <div class="text--lede">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       </div>
-      <a class="link--more "
+      <a class="link link--more "
          href="#"
       >
-        Find out more
+        <span>
+          Find out more
+        </span>
       </a>
     </div>
   </article>
 </div>
 `;
 
-exports[`Components/Card Icon smoke-test 1`] = `
+exports[`Component/Card Icon smoke-test 1`] = `
 <div class="container">
   <article class="card ">
     <div class="card__icon">
@@ -65,23 +69,25 @@ exports[`Components/Card Icon smoke-test 1`] = `
       </span>
     </div>
     <div class="card__content vertical-flow-flex">
-      <h3 class=" ">
+      <h3 class>
         Card title
       </h3>
       <div class="text--lede">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       </div>
-      <a class="link--more "
+      <a class="link link--more "
          href="#"
       >
-        Find out more
+        <span>
+          Find out more
+        </span>
       </a>
     </div>
   </article>
 </div>
 `;
 
-exports[`Components/Card LinkList smoke-test 1`] = `
+exports[`Component/Card LinkList smoke-test 1`] = `
 <div class="container">
   <article class="card ">
     <figure class="card__media">
@@ -92,7 +98,7 @@ exports[`Components/Card LinkList smoke-test 1`] = `
       </picture>
     </figure>
     <div class="card__content vertical-flow-flex">
-      <h3 class=" ">
+      <h3 class>
         Card title
       </h3>
       <div class="text--lede">
@@ -126,27 +132,29 @@ exports[`Components/Card LinkList smoke-test 1`] = `
 </div>
 `;
 
-exports[`Components/Card NoImage smoke-test 1`] = `
+exports[`Component/Card NoImage smoke-test 1`] = `
 <div class="container">
   <article class="card ">
     <div class="card__content vertical-flow-flex">
-      <h3 class=" ">
+      <h3 class>
         Card title
       </h3>
       <div class="text--lede">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       </div>
-      <a class="link--more "
+      <a class="link link--more "
          href="#"
       >
-        Find out more
+        <span>
+          Find out more
+        </span>
       </a>
     </div>
   </article>
 </div>
 `;
 
-exports[`Components/Card Tags smoke-test 1`] = `
+exports[`Component/Card Tags smoke-test 1`] = `
 <div class="container">
   <article class="card ">
     <figure class="card__media">
@@ -157,28 +165,30 @@ exports[`Components/Card Tags smoke-test 1`] = `
       </picture>
     </figure>
     <div class="card__content vertical-flow-flex">
-      <h3 class=" ">
+      <h3 class>
         Card title
       </h3>
       <ul class="tags">
         <li>
           <span class="tag">
-            hello
+            Music
           </span>
         </li>
         <li>
           <span class="tag">
-            news
+            News
           </span>
         </li>
       </ul>
       <div class="text--lede">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       </div>
-      <a class="link--more "
+      <a class="link link--more "
          href="#"
       >
-        Find out more
+        <span>
+          Find out more
+        </span>
       </a>
     </div>
   </article>

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Card Card smoke-test 1`] = `
+exports[`Component/Card Card smoke-test 1`] = `
 <div class="container">
   <article class="card">
     <figure class="card__media stack">
@@ -29,7 +29,7 @@ exports[`Components/Card Card smoke-test 1`] = `
 </div>
 `;
 
-exports[`Components/Card Linked smoke-test 1`] = `
+exports[`Component/Card Linked smoke-test 1`] = `
 <div class="container">
   <article class="card card--clickable">
     <figure class="card__media stack">
@@ -58,7 +58,7 @@ exports[`Components/Card Linked smoke-test 1`] = `
 </div>
 `;
 
-exports[`Components/Card Right smoke-test 1`] = `
+exports[`Component/Card Right smoke-test 1`] = `
 <div class="container">
   <article class="card card--right">
     <figure class="card__media stack">

package/src/Component/Card/card.css

@@ -2,7 +2,7 @@
  * Content Card
  */
 
-@layer components {
+@layer design-system.components {
   .card {
     display: grid;
     grid-template: "media" auto "content" 1fr / 1fr;
@@ -82,7 +82,7 @@
  * Content Card Grid
  */
 
-@layer components {
+@layer design-system.components {
   .grid:has(> *:nth-child(2):last-child) > :is(.card, .container:has(.card)) {
     inline-size: 100%;
     max-inline-size: var(--max-card-width, 37ch);
@@ -94,7 +94,7 @@
  * Content Card Linked
  */
 
-@layer components {
+@layer design-system.components {
   a[href].card {
     &:hover {
       color: inherit;

package/src/Component/ContentBlock/README.md

@@ -4,18 +4,12 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/content-block.css';`
+`@import '@pnx-mixtape/mxds/src/Component/ContentBlock/content-block.css';`
 
-**HTML**
+**Twig**
 
-```html
-<div class="content-block">
-  <h2>Title</h2>
-  <p>Body content</p>
-  <div class="content-block__actions">
-    <a href="#" class="button button--large button--primary"
-      >Let's get started</a
-    >
-  </div>
-</div>
-```
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Component/ContentBlock/content-block.twig' %}`
+
+Alternatively copy/paste the file for more control.

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

@@ -1,26 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/ContentBlock ContentBlock smoke-test 1`] = `
-<section class="section section--l section--narrow">
-  <div class="content-block vertical-flow-flex">
-    <h2>
-      Submit your documents in less than 5 minutes. Seriously.
-    </h2>
-    <p class="text--m">
-      Please make sure you have your account details ready.
-    </p>
-    <div class="content-block__actions flex">
-      <a href="#"
-         class="button button--large button--primary"
-      >
-        Let's get started
-      </a>
-      <a href="#"
-         class="button button--large button--text"
-      >
-        Find out more
-      </a>
-    </div>
-  </div>
-</section>
+exports[`Component/ContentBlock ContentBlock smoke-test 1`] = `
+"
+&lt; class="section "&gt;
+          
+  
+"
 `;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/ContentBlock ContentBlock smoke-test 1`] = `
+exports[`Component/ContentBlock ContentBlock smoke-test 1`] = `
 <div class="content-block vertical-flow-flex">
   <h2 class
       id="submit-your-documents"

package/src/Component/ContentBlock/content-block.css

@@ -2,7 +2,7 @@
  * Content block
  */
 
-@layer components {
+@layer design-system.components {
   .content-block {
     inline-size: 100%;
     margin-inline: auto;
@@ -14,7 +14,7 @@
   }
 }
 
-@layer utilities {
+@layer design-system.utilities {
   .vertical-flow-flex.content-block {
     align-items: center;
   }

package/src/Component/Dialog/README.md

@@ -4,60 +4,26 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/dialog.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Dialog/dialog.css';`
 
-**Web Components**
+**Twig**
 
-Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.
+You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- DialogBase import: `import '@pnx-mixtape/mxds/dialog/DialogBase';` and be sure to include `<mx-dialog>` around the `<dialog />` tag.
+- Eg: `{% extends '@mixtape/Component/Dialog/dialog.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JS Custom Element**
+
+Custom Elements are self defined, simply import the desired feature.
+These do not use the Shadow DOM and are not typical Web Components.
+External CSS applies.
+No Polyfills or frameworks are required.
+
+- Dialog import: `import '@pnx-mixtape/mxds/src/Component/Dialog/Elements/Dialog';` and be sure to include `<mx-dialog>` around the `<dialog />` tag.
 - The triggering element should either have `aria-controls="[id]"` or `href="#[id]"` where the ID matches the dialog (required).
 - Use the `[data-modal]` attribute to trigger `HTMLDialogElement.showModal()` on open. When omitted `HTMLDialogElement.show()` is used.
 - Add `[data-close]` to any button that should call `HTMLDialogElement.close()`
 
-```html
-<button aria-controls="example-dialog" class="button button--primary">
-  Dialog trigger
-</button>
-<mx-dialog id="example-dialog" data-modal>
-  <dialog class="dialog">
-    <button
-      autofocus
-      class="button button--icon-only icon icon--close"
-      data-close
-    >
-      Close dialog
-    </button>
-    <div class="dialog__content">
-      <h2>Title</h2>
-      <p>Body content.</p>
-    </div>
-  </dialog>
-</mx-dialog>
-```
-
 See twig files for all HTML examples.
-
-**Vanilla JS (to be deprecated)**
-
-- ES6 import: `import Dialog from '@pnx-mixtape/mxds/dialog';`
-- Script tag: `<script src="dist/dialog.js" type="text/javascript"></script>`
-
-**HTML**
-
-```html
-<button
-  data-dialog
-  aria-controls="example-dialog"
-  class="button button--primary"
->
-  Dialog trigger
-</button>
-
-<dialog class="dialog" id="example-dialog">
-  <div class="dialog__content">
-    <h2>Title</h2>
-    <p>Body content.</p>
-  </div>
-</dialog>
-```

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Dialog Dialog smoke-test 1`] = `
+exports[`Component/Dialog Dialog smoke-test 1`] = `
 <p>
   <a href="#dialog-df"
      class="button is-excluded"
@@ -42,7 +42,7 @@ exports[`Components/Dialog Dialog smoke-test 1`] = `
 </mx-dialog>
 `;
 
-exports[`Components/Dialog Fullscreen smoke-test 1`] = `
+exports[`Component/Dialog Fullscreen smoke-test 1`] = `
 <p>
   <a href="#dialog-df"
      class="button is-excluded"

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Dialog Dialog smoke-test 1`] = `
+exports[`Component/Dialog Dialog smoke-test 1`] = `
 <dialog class="dialog"
         open
 >

package/src/Component/Dialog/dialog.css

@@ -2,13 +2,13 @@
  * Dialog
  */
 
-@layer defaults {
+@layer design-system.defaults {
   mx-dialog {
     display: block;
   }
 }
 
-@layer components {
+@layer design-system.components {
   .dialog {
     max-inline-size: var(--container-max-width);
     max-block-size: 90vh;
@@ -54,7 +54,7 @@
  * Dialog fullscreen.
  */
 
-@layer components {
+@layer design-system.components {
   .dialog--fullscreen {
     box-shadow: none;
     border: 0;

package/src/Component/Dialog/dialog.entry.js

@@ -0,0 +1 @@
+import "./Elements/Dialog"

package/src/Component/DropMenu/README.md

@@ -1,11 +1,26 @@
 # Drop Menu
 
-Documentation and examples: [drop-menu](https://mixtape.pnx.io/drop-menu)
-
 ### How to use
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/drop-menu.css';`
+`@import '@pnx-mixtape/mxds/src/Component/DropMenu/drop-menu.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Component/DropMenu/drop-menu.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JS Custom Element**
+
+Custom Elements are self defined, simply import the desired feature.
+These do not use the Shadow DOM and are not typical Web Components.
+External CSS applies.
+No Polyfills or frameworks are required.
+
+- Dialog import: `import '@pnx-mixtape/mxds/src/Component/DropMenu/Elements/DropMenu';` and be sure to include `<mx-dropmenu>` around the content.
 
-**@todo JS**
+See twig files for all HTML examples.

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/DropMenu DropMenu smoke-test 1`] = `
+exports[`Component/DropMenu DropMenu smoke-test 1`] = `
 <mx-dropmenu closeonclick>
   <button id="unique-0"
           class="drop-menu__trigger button icon icon--chevron-down icon--end"

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/DropMenu DropMenu smoke-test 1`] = `
+exports[`Component/DropMenu DropMenu smoke-test 1`] = `
 <button id="unique-0"
         type="button"
         class="button icon icon--chevron-down icon--end drop-menu__trigger"

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

@@ -6,7 +6,7 @@
  * **Experimental** Using new CSS Anchoring and Popover API's, requires JS polyfill.
  */
 
-@layer elements {
+@layer design-system.components {
   .drop-menu__trigger {
     anchor-name: --drop-menu;
 

package/src/Component/DropMenu/drop-menu.entry.js

@@ -0,0 +1 @@
+import "./Elements/DropMenu"

package/src/Component/{InPageAlert/Elements/InPageAlert.ts → GlobalAlert/Elements/ClosableAlert.ts}

@@ -1,14 +1,14 @@
 /**
- * @file InPageAlerts
+ * @file GlobalAlerts
  *
- * When a InPageAlert is closed the id is written to local storage.
- * This is checked as the page is re-rendered, if a InPageAlert with the same ID is
+ * When a GlobalAlert is closed the id is written to local storage.
+ * This is checked as the page is re-rendered, if a GlobalAlert with the same ID is
  * created it will be removed from the dom.
  */
 
 import { makeAnchor, createElement } from "../../../Utility/utilities"
 
-export default class InPageAlert extends HTMLElement {
+export default class GlobalAlert extends HTMLElement {
   internals_: ElementInternals
   controller: AbortController
 
@@ -19,6 +19,7 @@ export default class InPageAlert extends HTMLElement {
   }
 
   connectedCallback(): void {
+    if (!this.container) return
     this.id = this.id || this.generatedId()
     if (this.localStorage) {
       this.controller.abort()
@@ -41,8 +42,8 @@ export default class InPageAlert extends HTMLElement {
     this.controller.abort()
     this.remove()
     this.localStorage = "true"
-    const newEvent: CustomEvent<{ id: string; target: InPageAlert }> =
-      new CustomEvent("InPageAlert-close", {
+    const newEvent: CustomEvent<{ id: string; target: GlobalAlert }> =
+      new CustomEvent("GlobalAlert-close", {
         bubbles: true,
         cancelable: true,
         detail: {
@@ -61,13 +62,23 @@ export default class InPageAlert extends HTMLElement {
     localStorage.setItem(this.id, value)
   }
 
+  get container(): HTMLElement {
+    const element: HTMLElement = this.querySelector("[data-container]")
+    if (!element) {
+      throw new Error(
+        `${this.localName} must contain a [data-container] element.`,
+      )
+    }
+    return element
+  }
+
   get close(): HTMLButtonElement {
     let closeBtn: HTMLButtonElement = this.querySelector(".icon--close")
     if (!closeBtn) {
       closeBtn = createElement(
-        `<button class="icon icon--close" aria-controls="${this.id}" aria-label="Close InPageAlert" type="button"></button>`,
+        `<button class="icon icon--close" aria-controls="${this.id}" aria-label="Close GlobalAlert" type="button"></button>`,
       ) as HTMLButtonElement
-      this.appendChild(closeBtn)
+      this.container.appendChild(closeBtn)
     }
     return closeBtn
   }
@@ -78,10 +89,10 @@ export default class InPageAlert extends HTMLElement {
   }
 }
 
-customElements.define("mx-closable-alert", InPageAlert)
+customElements.define("mx-closable-alert", GlobalAlert)
 
 declare global {
   interface HTMLElementTagNameMap {
-    "mx-closable-alert": InPageAlert
+    "mx-closable-alert": GlobalAlert
   }
 }