@pnx-mixtape/mxds 0.0.2 → 0.0.4

package/src/Layout/Grid/grid.css

@@ -2,7 +2,7 @@
  * Dynamic Grid
  */
 
-@layer layout {
+@layer design-system.layouts {
   .grid {
     --grid-repeat: auto-fit;
     --grid-min: 20ch;
@@ -111,7 +111,7 @@
 /**
  * Grid items.
  */
-@layer layout {
+@layer design-system.layouts {
   [class*="grid-item__span-"] {
     grid-column: auto / var(--grid-span, auto);
   }

package/src/Layout/Header/_header.css

@@ -2,7 +2,7 @@
  * Primary Header
  */
 
-@layer components {
+@layer design-system.layouts {
   .header {
     position: relative;
 

package/src/Layout/Header/_toggles.css

@@ -2,7 +2,7 @@
  * Global Header
  */
 
-@layer components {
+@layer design-system.layouts {
   .header__toggles {
     display: flex;
     gap: var(--toggle-gap, var(--spacing-xs));

package/src/Layout/Header/header.entry.js

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

package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Header/Secondary Secondary smoke-test 1`] = `
-<div class="global__secondary section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
+<div class="masthead section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
   <div class="flex">
     <span class="text--s">
       Global message
     </span>
-    <nav class="nav global__secondary__nav nav--inline text--s"
+    <nav class="nav masthead__nav nav--inline text--s"
          aria-label="Navigation"
     >
       <ul>

package/src/Layout/Masthead/masthead.css

@@ -1,9 +1,9 @@
 /**
- * Secondary Header
+ * Masthead
  */
 
-@layer components {
-  .global__secondary {
+@layer design-system.layouts {
+  .masthead {
     & .flex {
       justify-content: space-between;
       align-items: center;
@@ -16,7 +16,7 @@
     }
   }
 
-  .global__secondary__nav {
+  .masthead__nav {
     display: none;
 
     @media (--global-nav-up) {
@@ -30,7 +30,7 @@
 }
 
 @media print {
-  .global__secondary {
+  .masthead {
     display: none;
   }
 }

package/src/Layout/Masthead/masthead.twig

@@ -1,10 +1,10 @@
-<div class="global__secondary section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
+<div class="masthead section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
   <div class="flex">
     {% block left %}
       <span class="text--s">Global message</span>
     {% endblock %}
     {% block right %}
-      {% include "@mixtape/Component/Navigation/navigation.twig" with { 'modifier_class': 'global__secondary__nav nav--inline text--s' } %}
+      {% include "@mixtape/Component/Navigation/navigation.twig" with { 'modifier_class': 'masthead__nav nav--inline text--s' } %}
     {% endblock %}
   </div>
 </div>

package/src/Layout/Page/README.md

@@ -4,7 +4,7 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/page.css';`
+`@import '@pnx-mixtape/mxds/src/Layout/Page/page.css';`
 
 **Twig**
 
@@ -16,4 +16,4 @@ Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-- JSX import: `import { Page, PageSidebar, HeroBanner } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { Page, PageSidebar, HeroBanner } from '@pnx-mixtape/mxds/src/react';`

package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap

@@ -55,7 +55,7 @@ exports[`Layout/Page Page smoke-test 1`] = `
   </header>
   <main class="section">
     <div class="page section--xl">
-      <div class="page-title vertical-flow">
+      <div class="hero-banner vertical-flow">
         <h1 class="headline"
             id="always-put-your-best-"
         >

package/src/Layout/Page/page.css

@@ -2,7 +2,7 @@
  * Page
  */
 
-@layer layout {
+@layer design-system.layouts {
   :where(.page) {
     --plus: token("size.container.plus");
     --minus: token("size.container.minus");
@@ -83,7 +83,7 @@
  * Page with Sidebar
  */
 
-@layer layout {
+@layer design-system.layouts {
   .grid--sidebar {
     &:where(:not(:has(> aside))) {
       grid-column: narrow;

package/src/Layout/README.md

@@ -4,7 +4,8 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/grid.css';`
+`@import '@pnx-mixtape/mxds/src/Layout/Grid/grid.css';`
+`@import '@pnx-mixtape/mxds/src/Layout/Section/section.css';`
 
 **Twig**
 
@@ -16,4 +17,4 @@ Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-- JSX import: `import { Section, Grid, SectionGrid } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { Section, Grid, SectionGrid } from '@pnx-mixtape/mxds/src/react';`

package/src/Layout/Section/Section.stories.ts

@@ -26,9 +26,8 @@ const meta: Meta<SectionType> = {
       href: "#",
       title: "See more content",
       more: true,
-      icon: {
+      iconEnd: {
         icon: Icons.ARROW_RIGHT,
-        align: AlignmentTypes.END,
       },
     },
     content:

package/src/Layout/Section/__snapshots__/Background.stories.ts.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Section/Background Background smoke-test 1`] = `
+<div class="page">
+  <section class="section background--alt">
+    <figure class="background--image section__full"
+            aria-hidden="true"
+    >
+      <img src="https://picsum.photos/id/56/1642/560?grayscale"
+           alt
+      >
+    </figure>
+    <div class="section--xl">
+      <div class="section__header">
+        <h2>
+          Section with background image
+        </h2>
+        <a class="button button--dark"
+           href="#"
+        >
+          Learn more
+        </a>
+      </div>
+      <p>
+        A short description to help explain enough about the subject matter to encourage visitors to learn more.
+      </p>
+    </div>
+  </section>
+</div>
+`;
+
+exports[`Layout/Section/Background Dark smoke-test 1`] = `
+<div class="page">
+  <section class="section background--reverse">
+    <figure class="background--image section__full"
+            aria-hidden="true"
+    >
+      <img src="https://picsum.photos/id/56/1642/560?grayscale"
+           alt
+      >
+    </figure>
+    <div class="section--xl">
+      <div class="section__header">
+        <h2>
+          Section with background image
+        </h2>
+        <a class="button button--dark"
+           href="#"
+        >
+          Learn more
+        </a>
+      </div>
+      <p>
+        A short description to help explain enough about the subject matter to encourage visitors to learn more.
+      </p>
+    </div>
+  </section>
+</div>
+`;

package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Section/Breakouts Breakouts smoke-test 1`] = `
+<div class="page">
+  <section class="section section--flow">
+    <p>
+      Default is container width, with an inline gutter for smaller screens.
+    </p>
+  </section>
+  <section class="section section__full section--flow">
+    <p>
+      Section can have children with different content widths;
+    </p>
+    <p class="section__narrow">
+      like the optimum content width with .section__narrow
+    </p>
+    <p class="section__feature">
+      or slightly larger feature widths with .section__feature
+    </p>
+    <p class="section__full">
+      or full width with .section__full
+    </p>
+  </section>
+  <section class="section section--flow">
+    <p>
+      Sections can be nested
+    </p>
+    <section class="section">
+      <p>
+        and have the same content width options are un-nested ones;
+      </p>
+      <p class="section__narrow">
+        like the optimum content widths with .section__narrow
+      </p>
+      <p class="section__feature">
+        or slightly larger feature widths with .section__feature
+      </p>
+      <p class="section__full">
+        or full width with .section__full
+      </p>
+    </section>
+  </section>
+  <section class="section section__narrow section--flow">
+    <p>
+      Sections can say for all children to have a certain width
+    </p>
+    <p>
+      by using .section__narrow or .section__feature or .section__full
+    </p>
+    <p>
+      on the parent.
+    </p>
+  </section>
+  <section class="section section--flow background--reverse">
+    <p>
+      Any section can have a background color, or utilise any of the section vertical spacing classes
+    </p>
+    <section class="section--bottom-l">
+      <p>
+        even children
+      </p>
+    </section>
+    <section class="section--l background--reset">
+      <p>
+        and ones with their own backgrounds.
+      </p>
+    </section>
+  </section>
+  <section class="section section--group">
+    <p>
+      Sections can be grouped together
+    </p>
+  </section>
+  <section class="section section__feature section--group">
+    <p>
+      even if they have different content widths.
+    </p>
+  </section>
+</div>
+`;

package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Section/Flow Flow smoke-test 1`] = `
+<div class="page">
+  <section class="section section--flow">
+    <p>
+      first section has top and bottom spacing
+    </p>
+  </section>
+  <section class="section section--flow">
+    <p>
+      section with normal flow
+    </p>
+  </section>
+  <section class="section section--flow">
+    <p>
+      section with normal flow
+    </p>
+  </section>
+  <section class="section section--group background--alt">
+    <p>
+      certain sections can be
+    </p>
+  </section>
+  <section class="section section--group background--alt">
+    <p>
+      grouped togther as siblings
+    </p>
+  </section>
+  <section class="section section--group background--alt">
+    <p>
+      with their own spacing rules
+    </p>
+  </section>
+  <section class="section section--flow">
+    <p>
+      section on it's own has top and bottom spacing
+    </p>
+  </section>
+  <section class="section section--group background--alt">
+    <p>
+      groups can be combined with flow
+    </p>
+  </section>
+  <section class="section section--flow section--group background--alt">
+    <p>
+      for standard spacing
+    </p>
+  </section>
+  <section class="section section--flow">
+    <p>
+      section after group own has top and bottom spacing
+    </p>
+  </section>
+  <section class="section section--flow">
+    <p>
+      section with normal flow
+    </p>
+  </section>
+  <section class="section section--flow background--alt">
+    <p>
+      section with background that breaks the flow, also has top and bottom spacing
+    </p>
+  </section>
+  <section class="section section--flow">
+    <p>
+      section after background own has top and bottom spacing
+    </p>
+  </section>
+  <section class="section section--flow">
+    <p>
+      section with normal flow
+    </p>
+  </section>
+  <section class="section section--group">
+    <p>
+      groups can be used normally for larger spacing
+    </p>
+  </section>
+  <section class="section section--group background--alt">
+    <p>
+      adding a background breaks the grouping
+    </p>
+  </section>
+  <section class="section section--group background--alt">
+    <p>
+      into a new group
+    </p>
+  </section>
+</div>
+`;

package/src/Layout/Section/__snapshots__/Section.stories.ts.snap

@@ -1,19 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Section Section smoke-test 1`] = `
-<section class="section xl">
-  <div class="vertical-flow">
-    <h2>
-      Key feature or Section Name
-    </h2>
-    <p>
-      A short description to help explain enough about the subject matter to encourage visitors to learn more.
-    </p>
-    <a class="link--more"
-       href="#"
-    >
-      Learn more
-    </a>
+<div class="page">
+  <div class="section  section--xl">
+    <div class="container">
+      <div class="section__header">
+        <h2 class>
+          Section name
+        </h2>
+        <a class="link link--more "
+           href="#"
+        >
+          <span>
+            See more content
+          </span>
+          <span class="icon icon--arrow-right ">
+          </span>
+        </a>
+      </div>
+      <p class="text--lede">
+        A short description to help explain enough about the subject matter to encourage visitors to learn more.
+      </p>
+    </div>
   </div>
-</section>
+</div>
 `;

package/src/Layout/Section/section.css

@@ -2,7 +2,7 @@
  * Section
  */
 
-@layer layout {
+@layer design-system.layouts {
   .container {
     --container-name: container;
 
@@ -76,7 +76,7 @@
  * see https://www.bram.us/2022/12/13/quantity-queries-for-islands-of-elements-with-the-same-class-thanks-to-css-has/
  */
 
-@layer layout {
+@layer design-system.layouts {
   .section--flow {
     --flow-spacing: var(--section-l, var(--spacing-xl));
 
@@ -126,7 +126,7 @@
  * Section header
  */
 
-@layer layout {
+@layer design-system.layouts {
   .section__header {
     margin-block-end: var(--spacing-m);
     display: flex;
@@ -144,7 +144,7 @@
  * Section Background image
  */
 
-@layer layout {
+@layer design-system.layouts {
   :is(.section--has-background, .section:has(.background--image)) {
     overflow: hidden;
     position: relative;

package/src/Layout/Section/twig/section-story.twig

@@ -4,7 +4,7 @@
 {% endset %}
 {% if link %}
   {% set link %}
-    {% include '@mixtape/Atom/Link/link.twig' with { href: link.href, title: link.title, more: link.more, icon: link.icon } only %}
+    {% include '@mixtape/Atom/Link/twig/story-link.twig' with { href: link.href, title: link.title, more: link.more, iconEnd: link.iconEnd } only %}
   {% endset %}
 {% endif %}
 {% if content %}

package/src/Layout/Sidebar/sidebar.css

@@ -2,7 +2,7 @@
  * Sidebar
  */
 
-@layer layout {
+@layer design-system.layouts {
   .grid--sidebar {
     &:where(:not(:has(> aside))) {
       grid-column: narrow;

package/src/Utility/Drupal/README.md

@@ -6,4 +6,4 @@ Helper components for Drupal specific elements.
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/drupal.css';`
+`@import '@pnx-mixtape/mxds/src/drupal.css';`

package/src/Utility/README.md

@@ -6,7 +6,7 @@ Common code, used by other components, and utility classes.
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/utilities.css';`
+`@import '@pnx-mixtape/mxds/src/Utility/utilities.css';`
 
 **JS**
 

package/src/Utility/_layout-utils.css

@@ -1,4 +1,4 @@
-@layer utilities {
+@layer design-system.utilities {
   .stack {
     display: grid;
     grid-template-areas: "stack";

package/src/Utility/utilities.css

@@ -1,6 +1,6 @@
 @import "_layout-utils.css";
 
-@layer utilities {
+@layer design-system.utilities {
   .hidden,
   .visually-hidden,
   .sr-only {
@@ -24,7 +24,7 @@
  * Responsive utility class
  */
 
-@layer utilities {
+@layer design-system.utilities {
   .mobile-only {
     @media (--large-up) {
       display: none;
@@ -56,7 +56,7 @@
 /**
  * Skeleton and loading UI.
  */
-@layer utilities {
+@layer design-system.utilities {
   .skeleton {
     --background: hsl(0deg 0% 0% / 10%);
     --opacity-low: 0.5;

package/src/elements.ts

@@ -4,7 +4,7 @@ export { default as AccordionMobile } from "./Component/Accordion/Elements/Accor
 export { default as AccordionDiv } from "./Component/Accordion/Elements/AccordionDiv"
 export { default as Dialog } from "./Component/Dialog/Elements/Dialog"
 export { default as DropMenu } from "./Component/DropMenu/Elements/DropMenu"
-export { default as InPageAlert } from "./Component/InPageAlert/Elements/InPageAlert"
+export { default as ClosableAlert } from "./Component/GlobalAlert/Elements/ClosableAlert"
 export { default as Sticky } from "./Component/Sticky/Elements/Sticky"
 export { default as Tabs } from "./Component/Tabs/Elements/Tabs"
 export { default as GlobalToggle } from "./Layout/Header/Elements/GlobalToggle"

package/dist/build/Accordion.js

@@ -1,61 +0,0 @@
-import { m as makeAnchor } from "./chunks/utilities-BIk0P2KX.js";
-class Accordion extends HTMLElement {
-  constructor() {
-    super();
-    this.handleOpen = () => {
-      if (!this.details) return;
-      this.details.open = true;
-    };
-    this.handleClose = () => {
-      if (!this.details) return;
-      this.details.open = false;
-    };
-    this.handleHash = () => {
-      const { hash } = window.location;
-      if (hash && hash === `#${this.details?.id}`) {
-        this.handleOpen();
-      }
-    };
-    this.generatedId = () => {
-      const string = this.trigger?.textContent?.trim();
-      return !string ? "" : makeAnchor(string);
-    };
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-  }
-  connectedCallback() {
-    if (!this.details || !this.trigger) return;
-    const { signal } = this.controller;
-    document.addEventListener("beforeprint", this.handleOpen, {
-      signal
-    });
-    document.addEventListener("afterprint", this.handleClose, {
-      signal
-    });
-    this.handleHash();
-    document.addEventListener("hashchange", this.handleHash, { signal });
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-  }
-  get details() {
-    const details = this.querySelector("details");
-    if (!details) {
-      throw new Error(`${this.localName} must contain a <details> element.`);
-    }
-    details.id = details.id || this.generatedId();
-    return details;
-  }
-  get trigger() {
-    const trigger = this.querySelector("summary");
-    if (!trigger) {
-      throw new Error(`${this.localName} must contain a <summary> element.`);
-    }
-    return trigger;
-  }
-}
-customElements.define("mx-accordion", Accordion);
-export {
-  Accordion as default
-};
-//# sourceMappingURL=Accordion.js.map

package/dist/build/Accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.js","sources":["../../src/Component/Accordion/Elements/Accordion.ts"],"sourcesContent":["/**\n * Accordion\n * @file Support opening on hash, adding an ID attribute and toggling on print.\n */\n\nimport { makeAnchor } from \"../../../Utility/utilities\"\n\nexport default class Accordion extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.details || !this.trigger) return\n\n    const { signal }: AbortController = this.controller\n    document.addEventListener(\"beforeprint\", this.handleOpen, {\n      signal,\n    })\n    document.addEventListener(\"afterprint\", this.handleClose, {\n      signal,\n    })\n    this.handleHash()\n    document.addEventListener(\"hashchange\", this.handleHash, { signal })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleOpen = (): void => {\n    if (!this.details) return\n    this.details.open = true\n  }\n\n  handleClose = (): void => {\n    if (!this.details) return\n    this.details.open = false\n  }\n\n  handleHash = (): void => {\n    const { hash }: Location = window.location\n    if (hash && hash === `#${this.details?.id}`) {\n      this.handleOpen()\n    }\n  }\n\n  get details(): HTMLDetailsElement | null {\n    const details: HTMLDetailsElement | null = this.querySelector(\"details\")\n    if (!details) {\n      throw new Error(`${this.localName} must contain a <details> element.`)\n    }\n    details.id = details.id || this.generatedId()\n    return details\n  }\n\n  get trigger(): HTMLElement | null {\n    const trigger: HTMLElement | null = this.querySelector(\"summary\")\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a <summary> element.`)\n    }\n    return trigger\n  }\n\n  generatedId = (): string => {\n    const string: string | undefined = this.trigger?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n}\n\ncustomElements.define(\"mx-accordion\", Accordion)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion\": Accordion\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,kBAAkB,YAAY;AAAA,EAIjD,cAAc;AACN;AAuBR,SAAA,aAAa,MAAY;AACnB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,cAAc,MAAY;AACpB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,aAAa,MAAY;AACjB,YAAA,EAAE,KAAK,IAAc,OAAO;AAClC,UAAI,QAAQ,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI;AAC3C,aAAK,WAAW;AAAA,MAClB;AAAA,IAAA;AAoBF,SAAA,cAAc,MAAc;AAC1B,YAAM,SAA6B,KAAK,SAAS,aAAa,KAAK;AACnE,aAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,IAAA;AA1DlC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAS;AAE9B,UAAA,EAAE,OAAO,IAAqB,KAAK;AAChC,aAAA,iBAAiB,eAAe,KAAK,YAAY;AAAA,MACxD;AAAA,IAAA,CACD;AACQ,aAAA,iBAAiB,cAAc,KAAK,aAAa;AAAA,MACxD;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAChB,aAAS,iBAAiB,cAAc,KAAK,YAAY,EAAE,QAAQ;AAAA,EACrE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAmBA,IAAI,UAAqC;AACjC,UAAA,UAAqC,KAAK,cAAc,SAAS;AACvE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACA,YAAQ,KAAK,QAAQ,MAAM,KAAK,YAAY;AACrC,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,UAA8B;AAC1B,UAAA,UAA8B,KAAK,cAAc,SAAS;AAChE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACO,WAAA;AAAA,EACT;AAMF;AAEA,eAAe,OAAO,gBAAgB,SAAS;"}