@pnx-mixtape/mxds 0.0.13 → 0.0.14

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

@@ -1,5 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
-import { Page } from "../../../.storybook/decorators"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./twig/sections-flow.twig"
 import "./section.css"
 import { Section as SectionType } from "@pnx-mixtape/ids-shape"
@@ -7,7 +6,6 @@ import { Section as SectionType } from "@pnx-mixtape/ids-shape"
 const meta: Meta<SectionType> = {
   tags: ["autodocs"],
   component: Component,
-  decorators: [Page],
 }
 
 export default meta

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

@@ -1,5 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
-import { Page } from "../../../.storybook/decorators"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./section.twig"
 import Link from "../../Atom/Link/link.twig"
 import Icon from "../../Atom/Icon/icon.twig"
@@ -35,9 +34,6 @@ const meta: Meta<SectionType> = {
       }),
     }),
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     modifiers: {
       options: Object.values(SectionModifiers),
@@ -55,7 +51,6 @@ const meta: Meta<SectionType> = {
     "link.href": { control: "text" },
     "link.title": { control: "text" },
   },
-  decorators: [Page],
 }
 
 export default meta

package/src/Layout/Section/Section.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Section"
 import { PageWidths, SectionFlow, SectionStyles } from "../../enums"
 import { SectionTypes } from "@pnx-mixtape/ids-shape"

package/src/Layout/Section/SectionGrid.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./SectionGrid"
 import { PageWidths, SectionFlow, SectionStyles } from "../../enums"
 import { SectionTypes, GridModifiers } from "@pnx-mixtape/ids-shape"

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

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

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

@@ -92,7 +92,7 @@
   }
 
   .mx-section--group {
-    --group-spacing: var(--section-xl, var(--spacing-uul));
+    --group-spacing: var(--section-l, var(--spacing-xl));
 
     padding-block: 0;
 
@@ -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>