@pnx-mixtape/mxds 0.0.13 → 0.0.15

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

@@ -1,79 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Section/Breakouts Breakouts smoke-test 1`] = `
-<div class="mx-page">
-  <section class="mx-section mx-section--flow">
+<div class="mx-page default">
+  <p>
+    Default is container width, with an inline gutter for smaller screens.
+  </p>
+  <p class="mx-section--narrow ">
+    Or for optimum content width with .section--narrow
+  </p>
+  <p class="mx-section--feature">
+    or slightly larger feature widths with .section--feature
+  </p>
+  <p class="mx-section--full">
+    or full width with .section--full
+  </p>
+  <p class="mx-section--flow">
+    Sections can be spaced naturally with .mx-section--flow
+  </p>
+  <p class="mx-section--flow mx-section--feature">
+    to create a gap between them, even if they have different widths.
+  </p>
+  <p class="mx-section--group">
+    Or they can be grouped together
+  </p>
+  <p class="mx-section--feature mx-section--group">
+    even if they have different content widths.
+  </p>
+  <section class="mx-page mx-section--flow mx-background--reverse">
     <p>
-      Default is container width, with an inline gutter for smaller screens.
-    </p>
-  </section>
-  <section class="mx-section mx-section__full mx-section--flow">
-    <p>
-      Section can have children with different content widths;
+      Any section can have a background color, or utilise any of the section vertical spacing classes
     </p>
-    <p class="mx-section__narrow">
-      like the optimum content width with .section__narrow
+    <p class="mx-section--s">
+      even children
     </p>
-    <p class="mx-section__feature">
-      or slightly larger feature widths with .section__feature
+    <p class="mx-background--box mx-section--m mx-background--reset">
+      and ones with their own backgrounds.
     </p>
-    <p class="mx-section__full">
-      or full width with .section__full
+    <p class="mx-section--s mx-section--narrow">
+      A section with a background colour creates a subgrid.
     </p>
   </section>
-  <section class="mx-section mx-section--flow">
+  <section class="mx-page mx-section--flow mx-background--alt">
     <p>
-      Sections can be nested
+      Page can be nested and have the same content width options as un-nested ones;
     </p>
-    <section class="mx-section">
-      <p>
-        and have the same content width options are un-nested ones;
-      </p>
-      <p class="mx-section__narrow">
-        like the optimum content widths with .section__narrow
+    <section class="mx-page mx-section--flow">
+      <p class="mx-section--narrow">
+        like the optimum content widths with .section--narrow
       </p>
-      <p class="mx-section__feature">
-        or slightly larger feature widths with .section__feature
+      <p class="mx-section--feature">
+        or slightly larger feature widths with .section--feature
       </p>
-      <p class="mx-section__full">
-        or full width with .section__full
+      <p class="mx-section--full">
+        or full width with .section--full
       </p>
     </section>
-  </section>
-  <section class="mx-section mx-section__narrow mx-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="mx-section mx-section--flow mx-background--reverse">
-    <p>
-      Any section can have a background color, or utilise any of the section vertical spacing classes
-    </p>
-    <section class="mx-section--bottom-l">
+    <section class="mx-page mx-page--feature mx-section--flow">
       <p>
-        even children
+        Pages can say for all children to have a certain width
       </p>
-    </section>
-    <section class="mx-section--l mx-background--reset">
       <p>
-        and ones with their own backgrounds.
+        by using .page--narrow or .page--feature or .page--full
+      </p>
+      <p>
+        on the parent.
       </p>
     </section>
   </section>
-  <section class="mx-section mx-section--group">
+  <section class="mx-section--narrow mx-section--flow">
     <p>
-      Sections can be grouped together
+      Sections can also say for all children to have a certain width
     </p>
-  </section>
-  <section class="mx-section mx-section__feature mx-section--group">
     <p>
-      even if they have different content widths.
+      by using .section--narrow or .section--feature or .section--full
+    </p>
+    <p>
+      on the parent.
     </p>
   </section>
 </div>

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

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

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Section Section smoke-test 1`] = `
-<div class="mx-page">
-  <div class="mx-section  mx-section--xl">
+<div class="mx-page default">
+  <div class=" mx-section--xl">
     <div class="mx-container">
       <div class="mx-section__header">
         <h2>

package/src/Layout/Section/section.css

@@ -83,37 +83,37 @@
     padding-block-end: var(--flow-spacing);
 
     &:is(
-        [class*="mx-background"],
-        [class*="mx-background"] + .mx-section--flow,
-        :not(.mx-section--flow:not(.mx-section--group) + .mx-section--flow)
-      ) {
+      [class*="mx-background"],
+      [class*="mx-background"] + .mx-section--flow,
+      :not(.mx-section--flow:not(.mx-section--group) + .mx-section--flow)
+    ) {
       padding-block-start: var(--flow-spacing);
     }
   }
 
   .mx-section--group {
-    --group-spacing: var(--section-xl, var(--spacing-uul));
+    --group-spacing: var(--section-l, var(--spacing-xl));
 
     padding-block: 0;
 
     /* :first-in-island-of-class */
 
     &:is(
-        :not([class*="mx-background"])
-          + .mx-section--group[class*="mx-background"],
-        :not(.mx-section--group + .mx-section--group)
-      ) {
+      :not([class*="mx-background"])
+        + .mx-section--group[class*="mx-background"],
+      :not(.mx-section--group + .mx-section--group)
+    ) {
       padding-block-start: var(--group-spacing);
     }
 
     /* :last-in-island-of-class */
 
     &:is(
-        :not([class*="mx-background"]):has(
-            + .mx-section--group[class*="mx-background"]
-          ),
-        :not(:has(+ .mx-section--group))
-      ) {
+      :not([class*="mx-background"]):has(
+        + .mx-section--group[class*="mx-background"]
+      ),
+      :not(:has(+ .mx-section--group))
+    ) {
       padding-block-end: var(--group-spacing);
     }
 
@@ -136,10 +136,7 @@
     flex-flow: row wrap;
     gap: var(--spacing-s);
     align-items: center;
-
-    & :is(a, button) {
-      margin-inline-start: auto;
-    }
+    justify-content: space-between;
   }
 }
 

package/src/Layout/Section/section.twig

@@ -1,6 +1,5 @@
 {% set baseClass = 'mx-section' %}
 {% set classes = [
-    baseClass,
     background ? 'mx-background--'~background : null
 ] %}
 {% for modifier in modifiers %}

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

@@ -1,12 +1,31 @@
-<section class="mx-section {{ background }}">
-  <figure class="mx-background--image mx-section__full" aria-hidden="true">
-    <img src="https://picsum.photos/id/56/1642/560?grayscale" alt="">
+{% set baseClass = 'mx-section' %}
+{% set classes = [
+  baseClass,
+  'mx-page',
+  background ? 'mx-background--'~background : null
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set innnerClasses = [
+  container ? 'mx-container' : null
+] %}
+{% for modifier in modifiers %}
+  {% set innnerClasses = innnerClasses|merge([baseClass~"--"~modifier]) %}
+{% endfor %}
+{% set innerAttributes = (innerAttributes ?? create_attribute()).addClass(innnerClasses) %}
+
+<{{ as}}{{ attributes }}>
+{% if image is not empty %}
+  <figure class="mx-background--image mx-section--full" aria-hidden="true">
+    {{ image }}
   </figure>
-  <div class="mx-section--xl">
-    <div class="mx-section__header">
-      <h2>Section with background image</h2>
-      <a class="mx-button mx-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>
+{% endif %}
+  <div{{ innerAttributes }}>
+    {% if title is not empty or link is not empty %}
+      <div class="mx-section__header">
+        {{ title }}
+        {{ link }}
+      </div>
+    {% endif %}
+    {{ content }}
   </div>
-</section>
+</{{ as }}>

package/src/Layout/Section/twig/sections-breakout.twig

@@ -1,38 +1,33 @@
-<section class="mx-section mx-section--flow">
-  <p>Default is container width, with an inline gutter for smaller screens.</p>
-</section>
-<section class="mx-section mx-section__full mx-section--flow">
-  <p>Section can have children with different content widths;</p>
-  <p class="mx-section__narrow">like the optimum content width with .section__narrow</p>
-  <p class="mx-section__feature">or slightly larger feature widths with .section__feature</p>
-  <p class="mx-section__full">or full width with .section__full</p>
-</section>
-<section class="mx-section mx-section--flow">
-  <p>Sections can be nested</p>
-  <section class="mx-section">
-    <p>and have the same content width options are un-nested ones;</p>
-    <p class="mx-section__narrow">like the optimum content widths with .section__narrow</p>
-    <p class="mx-section__feature">or slightly larger feature widths with .section__feature</p>
-    <p class="mx-section__full">or full width with .section__full</p>
-  </section>
-</section>
-<section class="mx-section mx-section__narrow mx-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="mx-section mx-section--flow mx-background--reverse">
+<p>Default is container width, with an inline gutter for smaller screens.</p>
+<p class="mx-section--narrow ">Or for optimum content width with .section--narrow</p>
+<p class="mx-section--feature">or slightly larger feature widths with .section--feature</p>
+<p class="mx-section--full">or full width with .section--full</p>
+<p class="mx-section--flow">Sections can be spaced naturally with .mx-section--flow</p>
+<p class="mx-section--flow mx-section--feature">to create a gap between them, even if they have different widths.</p>
+<p class="mx-section--group">Or they can be grouped together</p>
+<p class="mx-section--feature mx-section--group">even if they have different content widths.</p>
+
+<section class="mx-page mx-section--flow mx-background--reverse">
   <p>Any section can have a background color, or utilise any of the section vertical spacing classes</p>
-  <section class="mx-section--bottom-l">
-    <p>even children</p>
+  <p class="mx-section--s">even children</p>
+  <p class="mx-background--box mx-section--m mx-background--reset">and ones with their own backgrounds.</p>
+  <p class="mx-section--s mx-section--narrow">A section with a background colour creates a subgrid.</p>
+</section>
+<section class="mx-page mx-section--flow mx-background--alt">
+  <p>Page can be nested and have the same content width options as un-nested ones;</p>
+  <section class="mx-page mx-section--flow">
+    <p class="mx-section--narrow">like the optimum content widths with .section--narrow</p>
+    <p class="mx-section--feature">or slightly larger feature widths with .section--feature</p>
+    <p class="mx-section--full">or full width with .section--full</p>
   </section>
-  <section class="mx-section--l mx-background--reset">
-    <p>and ones with their own backgrounds.</p>
+  <section class="mx-page mx-page--feature mx-section--flow">
+    <p>Pages can say for all children to have a certain width</p>
+    <p>by using .page--narrow or .page--feature or .page--full</p>
+    <p>on the parent.</p>
   </section>
 </section>
-<section class="mx-section mx-section--group">
-  <p>Sections can be grouped together</p>
-</section>
-<section class="mx-section mx-section__feature mx-section--group">
-  <p>even if they have different content widths.</p>
+<section class="mx-section--narrow mx-section--flow">
+  <p>Sections can also 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>

package/src/Layout/Section/twig/sections-flow.twig

@@ -1,51 +1,51 @@
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>first section has top and bottom spacing</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section with normal flow</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section with normal flow</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>certain sections can be</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>grouped togther as siblings</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>with their own spacing rules</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section on it's own has top and bottom spacing</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>groups can be combined with flow</p>
 </section>
-<section class="mx-section mx-section--flow mx-section--group mx-background--alt">
+<section class="mx-section--flow mx-section--group mx-background--alt">
   <p>for standard spacing</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section after group own has top and bottom spacing</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section with normal flow</p>
 </section>
-<section class="mx-section mx-section--flow mx-background--alt">
+<section class="mx-section--flow mx-background--alt">
   <p>section with background that breaks the flow, also has top and bottom spacing</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section after background own has top and bottom spacing</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section with normal flow</p>
 </section>
-<section class="mx-section mx-section--group">
+<section class="mx-section--group">
   <p>groups can be used normally for larger spacing</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>adding a background breaks the grouping</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>into a new group</p>
 </section>

package/src/Layout/Section/twig/sections-stacked.twig

@@ -1,19 +1,19 @@
-<section class="mx-section mx-section--xl mx-background--alt mx-vertical-flow">
+<section class="mx-section--xl mx-background--alt mx-vertical-flow">
     <h2>Section Extra Large</h2>
     <p>Extra Large spacing at the section level. Use the <code>section--xl</code> class to apply this spacing to the outter section.</p>
     <a class="mx-link--more" href="#">Learn more</a>
 </section>
-<section class="mx-section mx-section--l mx-vertical-flow">
+<section class="mx-section--l mx-vertical-flow">
     <h2>Section Large</h2>
     <p>Large spacing at the section level. Use the <code>section--l</code> class to apply this spacing to the outter section.</p>
     <a class="mx-link--more" href="#">Learn more</a>
 </section>
-<section class="mx-section mx-section--m mx-background--alt mx-vertical-flow">
+<section class="mx-section--m mx-background--alt mx-vertical-flow">
     <h2>Section Medium</h2>
     <p>Medium spacing at the section level. Use the <code>section--m</code> class to apply this spacing to the outter section.</p>
     <a class="mx-link--more" href="#">Learn more</a>
 </section>
-<section class="mx-section mx-section--s mx-vertical-flow">
+<section class="mx-section--s mx-vertical-flow">
     <h2>Section Small</h2>
     <p>Small spacing at the section level. Use the <code>section--s</code> class to apply this spacing to the outter section.</p>
     <a class="mx-link--more" href="#">Learn more</a>

package/src/Layout/Sidebar/Sidebar.stories.ts

@@ -1,8 +1,7 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import { SidebarOrder } from "../../enums"
 import Component from "./sidebar.twig"
 import "./sidebar.css"
-import { Page } from "../../../.storybook/decorators"
 
 type SidebarArgs = {
   content?: string | HTMLElement
@@ -18,7 +17,6 @@ const meta: Meta<SidebarArgs> = {
     order: { options: Object.values(SidebarOrder), control: "select" },
     before: { control: "boolean" },
   },
-  decorators: [Page],
   args: {
     content: "Main content",
     sidebarContent: "Sidebar content",

package/src/Layout/Sidebar/Sidebar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Sidebar"
 import { Page } from "../../../.storybook-react/decorators"
 import { SidebarOrder } from "../../enums"

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Sidebar NoSidebar smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <div class="mx-grid--sidebar ">
     <section>
       Main content
@@ -11,7 +11,7 @@ exports[`Layout/Sidebar NoSidebar smoke-test 1`] = `
 `;
 
 exports[`Layout/Sidebar ReverseLarge smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <div class="mx-grid--sidebar mx-grid--sidebar-rev-lg">
     <section>
       Main content
@@ -24,7 +24,7 @@ exports[`Layout/Sidebar ReverseLarge smoke-test 1`] = `
 `;
 
 exports[`Layout/Sidebar RevserseMedium smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <div class="mx-grid--sidebar mx-grid--sidebar-rev">
     <section>
       Main content
@@ -37,7 +37,7 @@ exports[`Layout/Sidebar RevserseMedium smoke-test 1`] = `
 `;
 
 exports[`Layout/Sidebar Sidebar smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <div class="mx-grid--sidebar ">
     <section>
       Main content
@@ -50,7 +50,7 @@ exports[`Layout/Sidebar Sidebar smoke-test 1`] = `
 `;
 
 exports[`Layout/Sidebar SidebarFirst smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <div class="mx-grid--sidebar ">
     <aside>
       Sidebar content

package/src/Layout/Sidebar/sidebar.css

@@ -27,28 +27,12 @@
       }
 
       &.mx-grid--sidebar-rev {
-        & > :is(section, aside) {
-          &:first-child {
-            order: 2;
-          }
-
-          &:last-child {
-            order: 1;
-          }
-        }
+        flex-direction: row-reverse;
       }
 
       &.mx-grid--sidebar-rev-lg {
         @media (--medium-up) {
-          & > :is(section, aside) {
-            &:first-child {
-              order: 2;
-            }
-
-            &:last-child {
-              order: 1;
-            }
-          }
+          flex-direction: row-reverse;
         }
       }
     }