@pnx-mixtape/mxds 0.0.2 → 0.0.4

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

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

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

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

package/src/Component/Pagination/pagination.css

@@ -2,7 +2,7 @@
  * Pagination
  */
 
-@layer elements {
+@layer design-system.components {
   .pagination {
     margin-inline: 0;
     padding: 0;

package/src/Component/Sticky/README.md

@@ -4,20 +4,27 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/sticky.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Sticky/sticky.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/Components/Sticky/twig/sticky.twig' %}`
+- Eg: `{% extends '@mixtape/Component/Sticky/twig/sticky.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-`import { Sticky } from '@pnx-mixtape/mxds/react';`
+`import { Sticky } from '@pnx-mixtape/mxds/src/react';`
 
-**JS**
+**JS Custom Element**
 
-`import Sticky from '@pnx-mixtape/mxds';`
+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/Sticky/Elements/Sticky';` and be sure to include `<mx-sticky>` around the content.
+
+See twig files for all HTML examples.

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

@@ -1,86 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Sticky Sticky smoke-test 1`] = `
-<div class="sticky__trigger">
-</div>
-<mx-sticky style="--sticky-offset: 0"
-           offsetpropname="--sticky-offset"
-           class="sticky section section--l background--alt"
->
-  <div class="section__content">
-    Sticky header
-  </div>
+exports[`Component/Sticky Sticky smoke-test 1`] = `
+"<div class="sticky__trigger"></div><mx-sticky style="--sticky-offset: 0" offsetpropname="--sticky-offset" class="sticky section section--l background--alt">
+  <div class="section__content">Sticky header</div>
 </mx-sticky>
-<section class="section section--l">
-  <div class="page">
-    <div class="grid--sidebar">
-      <aside>
-        <div class="sticky__trigger">
-        </div>
-        <mx-sticky class="sticky--l vertical-flow">
-          <h4>
-            Sticky sidebar
-          </h4>
-          <p>
-            In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
-            <a href="#anchor-test">
-              demonstrate
-            </a>
-            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>
-        </mx-sticky>
-      </aside>
-      <section class="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>
+
+
+&lt; class="section "&gt;
+          
+  
+"
 `;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Sticky Sticky smoke-test 1`] = `
+exports[`Component/Sticky Sticky smoke-test 1`] = `
 <div class="sticky"
      style="--sticky-offset: 150px;"
 >

package/src/Component/Sticky/sticky.css

@@ -8,13 +8,13 @@
   z-index: var(--z-index, 1);
 }
 
-@layer defaults {
+@layer design-system.defaults {
   mx-sticky {
     display: block;
   }
 }
 
-@layer components {
+@layer design-system.components {
   .sticky {
     @mixin sticky;
   }

package/src/Component/Sticky/sticky.entry.js

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

package/src/Component/Tabs/README.md

@@ -4,20 +4,27 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/tabs.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Tabs/tabs.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/Components/Tabs/tabs.twig' %}`
+- Eg: `{% extends '@mixtape/Component/Tabs/tabs.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-`import { Tabs, TabList, Tab, TabPanel } from '@pnx-mixtape/mxds/react';`
+`import { Tabs, TabList, Tab, TabPanel } from '@pnx-mixtape/mxds/src/react';`
 
 **JS Custom Element**
 
-`import Tabs from '@pnx-mixtape/mxds';`
+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/Tabs/Elements/Tabs';` and be sure to include `<mx-tabs>` around the content.
+
+See twig files for all HTML examples.

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tabs Tabs smoke-test 1`] = `
+exports[`Component/Tabs Tabs smoke-test 1`] = `
 <mx-tabs class="tabs tabs--">
   <mx-dropmenu closeonclick
                class="mobile-only"

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tabs Default smoke-test 1`] = `
+exports[`Component/Tabs Default smoke-test 1`] = `
 <div class="tabs">
   <div class="mobile-only">
     <button id="unique-0"

package/src/Component/Tabs/tabs.css

@@ -2,13 +2,13 @@
  * Tabs
  */
 
-@layer defaults {
+@layer design-system.defaults {
   :is(mx-tabs, mx-tabs mx-dropmenu) {
     display: block;
   }
 }
 
-@layer components {
+@layer design-system.components {
   .tabs {
     position: relative;
 

package/src/Component/Tabs/tabs.entry.js

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

package/src/Component/Tag/README.md

@@ -4,7 +4,7 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/ta.cssg';`
+`@import '@pnx-mixtape/mxds/src/Component/Tag/tag.css';`
 
 **Twig**
 
@@ -16,4 +16,4 @@ Alternatively copy/paste the file for more control.
 
 **JSX Components**
 
-- JSX import: `import { Tag } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { Tag } from '@pnx-mixtape/mxds/src/react';`

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tag Checkbox smoke-test 1`] = `
+exports[`Component/Tag Checkbox smoke-test 1`] = `
 <ul class="tags">
   <li>
     <div class="tag">
@@ -29,7 +29,7 @@ exports[`Components/Tag Checkbox smoke-test 1`] = `
 </ul>
 `;
 
-exports[`Components/Tag Link smoke-test 1`] = `
+exports[`Component/Tag Link smoke-test 1`] = `
 <ul class="tags">
   <li>
     <a class="tag"
@@ -48,7 +48,7 @@ exports[`Components/Tag Link smoke-test 1`] = `
 </ul>
 `;
 
-exports[`Components/Tag Tag smoke-test 1`] = `
+exports[`Component/Tag Tag smoke-test 1`] = `
 <ul class="tags">
   <li>
     <span class="tag">

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

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

package/src/Component/Tag/tag.css

@@ -2,7 +2,7 @@
  * Tag
  */
 
-@layer elements {
+@layer design-system.components {
   .tag {
     display: inline-block;
     inline-size: fit-content;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tile Tile smoke-test 1`] = `
+exports[`Component/Tile Tile smoke-test 1`] = `
 <div class="grid grid--xs-2-cols grid--md-4-cols spacing--bottom-l">
   <div class="tile stack ">
     <div class="tile__content vertical-flow-flex">

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tile Tile smoke-test 1`] = `
+exports[`Component/Tile Tile smoke-test 1`] = `
 <div class="tile tile--small stack">
   <div class="tile__content vertical-flow-flex">
     <h3 class="text--l"
@@ -17,7 +17,7 @@ exports[`Components/Tile Tile smoke-test 1`] = `
 </div>
 `;
 
-exports[`Components/Tile WithContent smoke-test 1`] = `
+exports[`Component/Tile WithContent smoke-test 1`] = `
 <div class="tile tile--small stack">
   <div class="tile__content vertical-flow-flex">
     <h3 class="text--l"

package/src/Component/Tile/tiles.css

@@ -1,7 +1,7 @@
 /**
  * Tiles
  */
-@layer components {
+@layer design-system.components {
   .tile {
     --outline-offset: -2px;
     --gap: var(--gap-s);

package/src/Form/README.md

@@ -4,8 +4,8 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/form.cs';`
+`@import '@pnx-mixtape/mxds/src/Form/form.cs';`
 
 **JSX Components**
 
-- JSX import: `import { Form, FormItem, FormText, FormLabel } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { Form, FormItem, FormText, FormLabel } from '@pnx-mixtape/mxds/src/react';`

package/src/Form/form.css

@@ -2,7 +2,7 @@
  * Form
  */
 
-@layer elements {
+@layer design-system.atoms {
   .form__item {
     max-inline-size: var(--container-max-width);
 
@@ -17,7 +17,7 @@
  * Text Input
  */
 
-@layer elements {
+@layer design-system.atoms {
   :is(
       .input__text,
       [type="text"],
@@ -86,7 +86,7 @@
  * Input Divider
  */
 
-@layer elements {
+@layer design-system.atoms {
   .input__divider {
     padding: var(--form-spacing, var(--spacing-s));
     line-height: var(--line-height-ui);
@@ -97,7 +97,7 @@
  * Text Input with Icon
  */
 
-@layer elements {
+@layer design-system.atoms {
   .input__text--icon {
     display: inline-block;
     max-inline-size: 100%;
@@ -136,7 +136,7 @@
  * Text Input with Inline Button
  */
 
-@layer elements {
+@layer design-system.atoms {
   .input__text--inline {
     position: relative;
     display: inline-block;
@@ -168,7 +168,7 @@
  * Label
  */
 
-@layer elements {
+@layer design-system.atoms {
   :is(label, legend) {
     display: block;
     margin-block-end: var(--spacing-xxxs);
@@ -242,7 +242,7 @@
  * Radios
  */
 
-@layer elements {
+@layer design-system.atoms {
   [type="radio"] {
     box-shadow: none;
     appearance: none;
@@ -331,7 +331,7 @@
  * Textarea
  */
 
-@layer elements {
+@layer design-system.atoms {
   textarea {
     block-size: calc(4 * var(--form-element-height, var(--spacing-xxl)));
     inline-size: 100%;
@@ -342,7 +342,7 @@
  * Fieldset
  */
 
-@layer elements {
+@layer design-system.atoms {
   :is(.fieldset, fieldset) {
     border: var(--line-width, 2px) solid
       var(--line-colour, var(--colour-border));
@@ -380,7 +380,7 @@
  * Description
  */
 
-@layer elements {
+@layer design-system.atoms {
   .form__description {
     margin-block: var(--form-spacing, var(--spacing-s));
     margin-inline: 0;
@@ -396,7 +396,7 @@
  * Error message
  */
 
-@layer elements {
+@layer design-system.atoms {
   :is(.form__success-message, .form__error-message) {
     margin-block: var(--form-spacing, var(--spacing-s));
     margin-inline: 0;
@@ -438,7 +438,7 @@
  * Select
  */
 
-@layer elements {
+@layer design-system.atoms {
   select {
     appearance: none;
     cursor: pointer;

package/src/Layout/Footer/FooterMenu/__snapshots__/FooterMenu.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/FooterMenu Footer smoke-test 1`] = `
+exports[`Layout/Footer/FooterMenu Footer smoke-test 1`] = `
 <nav class="nav nav--footer ">
   <ul class="nav__level-1">
     <li class="nav__has-subnav">

package/src/Layout/Footer/FooterMenu/footer-menu.css

@@ -1,7 +1,7 @@
 /**
  * Footer Navigation
  */
-@layer components {
+@layer design-system.components {
   .nav--footer {
     & ul {
       display: grid;

package/src/Layout/Footer/footer.css

@@ -2,7 +2,7 @@
  * Global Footer
  */
 
-@layer components {
+@layer design-system.layouts {
   .footer {
     position: sticky;
     inset-block-start: 100vh;

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

@@ -1,103 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Layout/Grid GridDynamic smoke-test 1`] = `
-<div class="grid grid--dynamic">
-  <div>
-    1
+exports[`Layout/Grid Grid smoke-test 1`] = `
+<div class="grid grid--cols-sm-2 grid--cols-lg-4">
+  <div class>
+    item 1
   </div>
-  <div>
-    2
+  <div class>
+    item 2
   </div>
-  <div>
-    3
+  <div class>
+    item 3
   </div>
-</div>
-<div class="grid grid--xs-2-cols">
-  <div>
-    1
-  </div>
-  <div>
-    2
-  </div>
-</div>
-<div class="grid grid--sm-2-cols">
-  <div>
-    1
-  </div>
-  <div>
-    2
-  </div>
-</div>
-<div class="grid grid--md-2-cols">
-  <div>
-    1
-  </div>
-  <div>
-    2
-  </div>
-</div>
-<div class="grid grid--md-3-cols">
-  <div>
-    1
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    3
-  </div>
-</div>
-<div class="grid grid--lg-3-cols">
-  <div>
-    1
-  </div>
-  <div>
-    2
+  <div class>
+    item 4
   </div>
-  <div>
-    3
+  <div class>
+    item 5
   </div>
-</div>
-<div class="grid grid--sm-2-cols grid--md-4-cols">
-  <div>
-    1
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    3
-  </div>
-  <div>
-    4
+  <div class>
+    item 6
   </div>
 </div>
-<div class="grid grid--md-2-cols grid--lg-4-cols">
-  <div>
-    1
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    3
-  </div>
-  <div>
-    4
-  </div>
-</div>
-<div class="grid grid--xs-2-cols grid--xl-4-cols">
-  <div>
-    1
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    3
+`;
+
+exports[`Layout/Grid List smoke-test 1`] = `
+<ul class="grid grid--cols-sm-2">
+  <li class>
+    list item 1
+  </li>
+  <li class>
+    list item 2
+  </li>
+</ul>
+`;
+
+exports[`Layout/Grid Span smoke-test 1`] = `
+<div class="grid grid--cols-sm-2 grid--cols-md-3">
+  <div class>
+    item 1
   </div>
-  <div>
-    4
+  <div class="grid-item__span-md-2">
+    item 2, span 2
   </div>
 </div>
 `;

package/src/Layout/Grid/container-grid.css

@@ -1,7 +1,7 @@
 /**
  * Container Grid
  */
-@layer layout {
+@layer design-system.layouts {
   .grid.container {
     --container-name: grid-item;
 
@@ -119,7 +119,7 @@
  * Dynamic Container Grid
  */
 
-@layer layout {
+@layer design-system.layouts {
   .grid.container {
     &:is(.grid--dynamic) {
       /* This doesn't play nice in Safari and isn't required, so we unset the container. */