@pnx-mixtape/mxds 0.0.3 → 0.0.4

package/src/Atom/Table/__snapshots__/Table.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Table Flush smoke-test 1`] = `
+exports[`Atom/Table Flush smoke-test 1`] = `
 <table class=" table--flush">
   <thead>
     <tr>
@@ -65,7 +65,7 @@ exports[`Base/Table Flush smoke-test 1`] = `
 </table>
 `;
 
-exports[`Base/Table Small smoke-test 1`] = `
+exports[`Atom/Table Small smoke-test 1`] = `
 <table class=" table--small">
   <thead>
     <tr>
@@ -130,7 +130,7 @@ exports[`Base/Table Small smoke-test 1`] = `
 </table>
 `;
 
-exports[`Base/Table Table smoke-test 1`] = `
+exports[`Atom/Table Table smoke-test 1`] = `
 <table class>
   <thead>
     <tr>
@@ -195,7 +195,7 @@ exports[`Base/Table Table smoke-test 1`] = `
 </table>
 `;
 
-exports[`Base/Table Zebra smoke-test 1`] = `
+exports[`Atom/Table Zebra smoke-test 1`] = `
 <table class=" table--striped">
   <thead>
     <tr>

package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Table/Responsive TableResponsive smoke-test 1`] = `
+exports[`Atom/Table/Responsive TableResponsive smoke-test 1`] = `
 <div class="table--responsive">
   <table class="table">
     <thead>

package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Typography/Text Text smoke-test 1`] = `
+exports[`Atom/Typography/Text Text smoke-test 1`] = `
 <p class>
   Text
 </p>

package/src/Atom/Text/__snapshots__/TextSizes.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Typography/Text Sizes Example smoke-test 1`] = `
+exports[`Atom/Typography/Text Sizes Example smoke-test 1`] = `
 <div class="vertical-flow">
   <p class="text--embellished-headline">
     Embelished headline: Lorem ipsum dolor sit amet consectetur
@@ -56,7 +56,7 @@ exports[`Base/Typography/Text Sizes Example smoke-test 1`] = `
 </div>
 `;
 
-exports[`Base/Typography/Text Sizes TextSizes smoke-test 1`] = `
+exports[`Atom/Typography/Text Sizes TextSizes smoke-test 1`] = `
 <p class>
   In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
 </p>

package/src/Atom/Video/Video.stories.ts

@@ -6,11 +6,13 @@ const meta: Meta<typeof Component> = {
   title: "Atom/Video",
   tags: ["autodocs"],
   component: Component,
+  args: {
+    src: "https://www.youtube.com/embed/NpEaa2P7qZI",
+    title: "Something from youtube",
+  },
 }
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Video: Story = {
-  args: {},
-}
+export const Video: Story = {}

package/src/Atom/Video/__snapshots__/Video.stories.ts.snap

@@ -1,21 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Video Video smoke-test 1`] = `
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</p>
+exports[`Atom/Video Video smoke-test 1`] = `
 <figure class="video">
-  <iframe title="Some video"
-          width="560"
-          height="315"
-          src="https://www.youtube.com/embed/NpEaa2P7qZI"
-          frameborder="0"
-          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI"
+          title="Something from youtube"
           allowfullscreen
   >
   </iframe>
 </figure>
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-</p>
 `;

package/src/Atom/Video/_video.css

@@ -5,6 +5,11 @@
       aspect-ratio: 16 / 9;
       block-size: 100%;
       inline-size: 100%;
+      border: 0;
     }
   }
+
+  .media--video {
+    inline-size: 100%;
+  }
 }

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Accordion Accordion smoke-test 1`] = `
+exports[`Component/Accordion Accordion smoke-test 1`] = `
 <div class="accordions">
   <div class="accordion__title">
-    <h2 class=" ">
+    <h2 class>
       Accordion group
     </h2>
   </div>
@@ -38,11 +38,11 @@ exports[`Components/Accordion Accordion smoke-test 1`] = `
 </div>
 `;
 
-exports[`Components/Accordion ToggleAll smoke-test 1`] = `
+exports[`Component/Accordion ToggleAll smoke-test 1`] = `
 <div class="accordions">
   <mx-accordion-group>
     <div class="accordion__title">
-      <h2 class=" ">
+      <h2 class>
         Accordion group
       </h2>
       <div class="accordions__toggle-all">

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Accordion Accordion smoke-test 1`] = `
+exports[`Component/Accordion Accordion smoke-test 1`] = `
 <div class="accordion accordion--divided"
      data-open="false"
 >

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/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/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/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/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/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/{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
   }
 }

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

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./twig/story-global-alert.twig"
+import "./global-alert.css"
+import "./Elements/ClosableAlert"
+import {
+  GlobalAlert as GlobalAlertType,
+  GlobalAlertTypes,
+  HeadingTypes,
+} from "@pnx-mixtape/ids-shape"
+
+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" },
+    "link.href": { control: "text" },
+    "link.title": { control: "text" },
+  },
+  args: {
+    title: {
+      title: "In page alert",
+      as: HeadingTypes.TWO,
+      modifiers: [HeadingTypes.FOUR],
+    },
+    content: "Something happened that requires your attention",
+    type: GlobalAlertTypes.LIGHT,
+    dismissible: true,
+  },
+}
+
+export default meta
+type Story = StoryObj<GlobalAlertType>
+
+export const GlobalAlert: Story = {}
+
+export const Critical: Story = {
+  args: {
+    dismissible: false,
+    type: GlobalAlertTypes.CRITICAL,
+  },
+}

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

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./GlobalAlert"
+import "./global-alert.css"
+import { GlobalAlertTypes } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    children: (
+      <p>
+        <b>Something happened.</b> And if you&apos;d like to know what,{" "}
+        <a href="#">Click here</a>.
+      </p>
+    ),
+    dismissible: true,
+  },
+  argTypes: {
+    type: { options: Object.values(GlobalAlertTypes), control: "radio" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const GlobalAlert: Story = {}
+
+export const Critical: Story = {
+  args: {
+    type: GlobalAlertTypes.CRITICAL,
+    dismissible: false,
+  },
+}