@pnx-mixtape/mxds 0.0.2 → 0.0.4

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

@@ -1,43 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/InPageAlert Closable smoke-test 1`] = `
-<mx-closable-alert class="message message--"
-                   id="unique-0"
->
+exports[`Component/InPageAlert InPageAlert smoke-test 1`] = `
+<div class="message ">
   <div class="message__content">
-    <p>
-      <b>
-        Something happened.
-      </b>
-      And if you'd like to know what,
-      <a href="#">
+    Something happened that requires your attention
+    <a class="link "
+       href="#"
+    >
+      <span>
         Click here
-      </a>
-      .
-    </p>
-  </div>
-  <button class="icon icon--close"
-          aria-controls="unique-0"
-          aria-label="Close InPageAlert"
-          type="button"
-  >
-  </button>
-</mx-closable-alert>
-`;
-
-exports[`Components/InPageAlert InPageAlert smoke-test 1`] = `
-<div class="message message--">
-  <div class="message__content">
-    <p>
-      <b>
-        Something happened.
-      </b>
-      And if you'd like to know what,
-      <a href="#">
-        Click here
-      </a>
-      .
-    </p>
+      </span>
+    </a>
   </div>
 </div>
 `;

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

@@ -1,69 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/InPageAlert Error smoke-test 1`] = `
-<div id=":r2:"
-     class="message message--error icon icon--error"
->
-  <p>
-    <b>
-      Something happened.
-    </b>
-    And if you'd like to know what,
-    <a href="#">
-      Click here
-    </a>
-    .
-  </p>
+exports[`Component/InPageAlert Error smoke-test 1`] = `
+<div class="message message--error icon icon--error">
+  <div class="message__content">
+    <p>
+      <b>
+        Something happened.
+      </b>
+      And if you'd like to know what,
+      <a href="#">
+        Click here
+      </a>
+      .
+    </p>
+  </div>
 </div>
 `;
 
-exports[`Components/InPageAlert InPageAlert smoke-test 1`] = `
-<div id=":r0:"
-     class="message message--info icon icon--info"
->
-  <p>
-    <b>
-      Something happened.
-    </b>
-    And if you'd like to know what,
-    <a href="#">
-      Click here
-    </a>
-    .
-  </p>
+exports[`Component/InPageAlert InPageAlert smoke-test 1`] = `
+<div class="message message--info icon icon--info">
+  <div class="message__content">
+    <p>
+      <b>
+        Something happened.
+      </b>
+      And if you'd like to know what,
+      <a href="#">
+        Click here
+      </a>
+      .
+    </p>
+  </div>
 </div>
 `;
 
-exports[`Components/InPageAlert Success smoke-test 1`] = `
-<div id=":r3:"
-     class="message message--success icon icon--success"
->
-  <p>
-    <b>
-      Something happened.
-    </b>
-    And if you'd like to know what,
-    <a href="#">
-      Click here
-    </a>
-    .
-  </p>
+exports[`Component/InPageAlert Success smoke-test 1`] = `
+<div class="message message--success icon icon--success">
+  <div class="message__content">
+    <p>
+      <b>
+        Something happened.
+      </b>
+      And if you'd like to know what,
+      <a href="#">
+        Click here
+      </a>
+      .
+    </p>
+  </div>
 </div>
 `;
 
-exports[`Components/InPageAlert Warning smoke-test 1`] = `
-<div id=":r1:"
-     class="message message--warning icon icon--warning"
->
-  <p>
-    <b>
-      Something happened.
-    </b>
-    And if you'd like to know what,
-    <a href="#">
-      Click here
-    </a>
-    .
-  </p>
+exports[`Component/InPageAlert Warning smoke-test 1`] = `
+<div class="message message--warning icon icon--warning">
+  <div class="message__content">
+    <p>
+      <b>
+        Something happened.
+      </b>
+      And if you'd like to know what,
+      <a href="#">
+        Click here
+      </a>
+      .
+    </p>
+  </div>
 </div>
 `;

package/src/Component/InPageAlert/in-page-alert.css

@@ -2,13 +2,13 @@
  * Messages
  */
 
-@layer defaults {
+@layer design-system.defaults {
   mx-closable-alert {
     display: block;
   }
 }
 
-@layer elements {
+@layer design-system.components {
   .message {
     display: grid;
     gap: var(--gap-s);

package/src/Component/InPageAlert/in-page-alert.twig

@@ -1,18 +1,15 @@
-{% if closable %}
-<mx-closable-alert class="message message--{{ type }}{% if type %} icon icon--{{ type }}{% endif %}"{% if id %} id="{{ id ~ type }}"{% endif %}>
+{% set baseClass = 'message' %}
+{% set classes = [
+  baseClass,
+  type ? baseClass~'--'~type : null,
+  type ? 'icon icon--'~type : null,
+] %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<div {{ attributes }}>
   <div class="message__content">
-    {% block content %}
-      <p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p>
-    {% endblock %}
-  </div>
-</mx-closable-alert>
-{% else %}
-  <div class="message message--{{ type }}{% if type %} icon icon--{{ type }}{% endif %}"{% if id %} id="{{ id ~ type }}"{% endif %}>
-    <div class="message__content">
-      {% block content %}
-        <p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p>
-      {% endblock %}
-    </div>
+    {{ title }}
+    {{ content }}
+    {{ link }}
   </div>
-{% endif %}
-
+</div>

package/src/Component/InPageAlert/twig/story-in-page-alert.twig

@@ -0,0 +1,11 @@
+{% extends "../in-page-alert.twig" %}
+{% if title %}
+  {% set title %}
+    {% include '@mixtape/Atom/Heading/heading.twig' with { title: title.title, as: title.as, modifiers: title.modifiers } only %}
+  {% endset %}
+{% endif %}
+{% if link %}
+  {% set link %}
+    {% include '@mixtape/Atom/Link/link.twig' with { href: link.href, title: link.title } only %}
+  {% endset %}
+{% endif %}

package/src/Component/InPageNavigation/README.md

@@ -4,27 +4,22 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/in-page-navigation.css';`
+`@import '@pnx-mixtape/mxds/src/Component/InPageNavigation/in-page-navigation.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Component/InPageNavigation/in-page-navigation.twig' %}`
+
+Alternatively copy/paste the file for more control.
 
 **Web Components**
 
 Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.
 
-- InPageNavigationBase import: `import '@pnx-mixtape/mxds/Components/InPageNavigation/Element';` and be sure to include `<mx-in-page-navigation>` around the `<nav />` tag.
+- InPageNavigationBase import: `import '@pnx-mixtape/mxds/src/Component/InPageNavigation/Element/InPageNavigation';` and be sure to include `<mx-in-page-navigation>` around the `<nav />` tag.
 - Use the `[data-content]` attribute to specify where to look for headings (required).
 - Use the `[data-headings]` attribute to customise the heading levels. Default is h2.
 
-```html
-<mx-in-page-navigation data-content=".page__sections" data-headings="h2, h3">
-  <nav class="in-page-navigation nav nav--jump">
-    <h4>Jump to Section</h4>
-    <ul></ul>
-  </nav>
-</mx-in-page-navigation>
-
-<div class="page__sections">
-  <h2 id="section">Section title</h2>
-</div>
-```
-
 See twig files for all HTML examples.

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

@@ -1,73 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/InPageNavigation InPageNavigation smoke-test 1`] = `
-<section class="section section--l">
-  <div class="page">
-    <div class="grid--sidebar">
-      <aside>
-        <mx-in-page-navigation data-content=".js-content"
-                               data-headings="h2, h3"
-        >
-          <nav class="in-page-navigation nav nav--list">
-            <h4 class="text--embellished-headline">
-              Jump To Section
-            </h4>
-            <ul>
-            </ul>
-          </nav>
-        </mx-in-page-navigation>
-      </aside>
-      <section class="js-content rich-text vertical-flow">
-        <h2>
-          Section 1
-        </h2>
-        <p>
-          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. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-        </p>
-        <h2 id="anchor-test">
-          Section 2
-        </h2>
-        <p>
-          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. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-        </p>
-        <h3>
-          Test level 3
-        </h3>
-        <p>
-          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. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-        </p>
-        <h2>
-          Section 3
-        </h2>
-        <p>
-          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. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-        </p>
-        <h2>
-          Section 4
-        </h2>
-        <p>
-          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. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-        </p>
-        <h2>
-          Section 5
-        </h2>
-        <p>
-          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. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-        </p>
-        <h3>
-          Test level 6
-        </h3>
-        <p>
-          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. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-        </p>
-        <h2>
-          Section 7
-        </h2>
-        <p>
-          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. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-        </p>
-      </section>
-    </div>
-  </div>
-</section>
+exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
+"
+&lt; class="section "&gt;
+          
+  
+"
 `;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/InPageNavigation InPageNavigation smoke-test 1`] = `
+exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
 <div class="grid--sidebar">
   <aside>
     <nav class="in-page-navigation nav nav--list">

package/src/Component/InPageNavigation/in-page-navigation.css

@@ -2,13 +2,13 @@
  * InPageNavigation
  */
 
-@layer defaults {
+@layer design-system.defaults {
   mx-in-page-navigation {
     display: block;
   }
 }
 
-@layer components {
+@layer design-system.components {
   .in-page-navigation {
     & .in-page-navigation__level--h3 {
       padding-inline-start: var(--spacing-s);

package/src/Component/InPageNavigation/in-page-navigation.entry.js

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

package/src/Component/LinkList/README.md

@@ -4,16 +4,16 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/link-list.css';`
+`@import '@pnx-mixtape/mxds/src/Component/LinkList/link-list.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/Components/LinkList/link-list.twig' %}`
+- Eg: `{% extends '@mixtape/Component/LinkList/link-list.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-- JSX import: `import { LinkList, LinkListItem } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { LinkList, LinkListItem } from '@pnx-mixtape/mxds/src/react';`

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

@@ -1,58 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/LinkList LinkList smoke-test 1`] = `
-<section class="section ">
-  <div class="grid">
-    <div class="grid--6-col">
-      <ul class="link-list">
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Music
-          </a>
-        </li>
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Performances
-          </a>
-        </li>
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Get involved
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div class="grid--6-col">
-      <ul class="link-list">
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Music
-          </a>
-        </li>
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Performances
-          </a>
-        </li>
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Get involved
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</section>
+exports[`Component/LinkList LinkList smoke-test 1`] = `
+<ul class="link-list">
+  <li>
+    <a href="#"
+       class="icon icon--chevron-right"
+    >
+      Music
+    </a>
+  </li>
+  <li>
+    <a href="#"
+       class="icon icon--chevron-right"
+    >
+      Performances
+    </a>
+  </li>
+  <li>
+    <a href="#"
+       class="icon icon--chevron-right"
+    >
+      Get involved
+    </a>
+  </li>
+</ul>
 `;

package/src/Component/LinkList/link-list.css

@@ -2,7 +2,7 @@
  * Link List
  */
 
-@layer elements {
+@layer design-system.components {
   .link-list {
     list-style-type: none;
     padding-inline-start: 0;

package/src/Component/Navigation/README.md

@@ -4,14 +4,23 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/navigation.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Navigation/navigation.css';`
 
-**@TODO Vanilla JS**
+**Twig**
 
-- ES6 import: `import { Navigation, NavigationFlyout } from '@pnx-mixtape/mxds/mavigation';`
-- ES6 submodule import: `import NavigationFlyout from '@pnx-mixtape/mxds/mavigation/navigation-flyout';`
-- Script tag: `<script src="dist/navigation.js" type="text/javascript"></script>`
+You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-**HTML**
+- Eg: `{% extends '@mixtape/Component/Navigation/navigation.twig' %}`
 
-See various twig files.
+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.
+
+- Sticky import: `import '@pnx-mixtape/mxds/src/Component/Navigation/Elements/Navigation';` and be sure to include `<mx-navigation>` around the menu.
+
+See twig files for all HTML examples.

package/src/Component/Navigation/__snapshots__/Collapsible.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Navigation/Collapsible Collapsible smoke-test 1`] = `
+exports[`Component/Navigation/Collapsible Collapsible smoke-test 1`] = `
 <mx-nav>
   <nav class="nav nav--collapsible">
     <ul class="nav__level-1">

package/src/Component/Navigation/__snapshots__/Dropdown.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Navigation/Dropdown Dropdown smoke-test 1`] = `
+exports[`Component/Navigation/Dropdown Dropdown smoke-test 1`] = `
 <mx-nav flyout>
   <nav class="nav nav--dropdown "
        aria-label="Primary menu"

package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Navigation/Dropdown Dropdown smoke-test 1`] = `
+exports[`Component/Navigation/Dropdown Dropdown smoke-test 1`] = `
 <nav class="nav nav--dropdown"
      aria-label="Menu"
      id="navigation"

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

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

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Navigation InlineNavigation smoke-test 1`] = `
+exports[`Component/Navigation InlineNavigation smoke-test 1`] = `
 <nav class="nav nav--inline"
      aria-label="Inline Navigation"
 >
@@ -30,7 +30,7 @@ exports[`Components/Navigation InlineNavigation smoke-test 1`] = `
 </nav>
 `;
 
-exports[`Components/Navigation Navigation smoke-test 1`] = `
+exports[`Component/Navigation Navigation smoke-test 1`] = `
 <nav class="nav"
      aria-label="Navigation"
 >

package/src/Component/Navigation/_navigation-collapsible.css

@@ -2,7 +2,7 @@
  * Collapsible Navigation
  */
 
-@layer components {
+@layer design-system.components {
   .nav--collapsible {
     & .nav__toggle {
       inset-inline: auto var(--spacing-xxs);

package/src/Component/Navigation/_navigation-dropdown.css

@@ -2,7 +2,7 @@
  * Dropdown Navigation
  */
 
-@layer components {
+@layer design-system.components {
   .nav--dropdown {
     --nav-active-underline: none;
 

package/src/Component/Navigation/_navigation-mega.css

@@ -2,7 +2,7 @@
  * Dropdown Navigation - Mega Nav
  */
 
-@layer components {
+@layer design-system.components {
   .nav--mega-nav {
     @media (--global-nav-down) {
       max-block-size: 100%;

package/src/Component/Navigation/_navigation.css

@@ -2,7 +2,7 @@
  * Navigation
  */
 
-@layer components {
+@layer design-system.components {
   .nav {
     & ul {
       display: flex;

package/src/Component/Navigation/navigation.entry.js

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

package/src/Component/Pagination/README.md

@@ -4,16 +4,16 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/pagination.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Pagination/pagination.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/Components/Pagination/pagination.twig' %}`
+- Eg: `{% extends '@mixtape/Component/Pagination/pagination.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-- JSX import: `import { PaginationContext, Pagination } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { PaginationContext, Pagination } from '@pnx-mixtape/mxds/src/react';`