@pnx-mixtape/mxds 0.0.13 → 0.0.14

package/src/Layout/Footer/footer.css

@@ -33,6 +33,8 @@
     & .mx-social-links {
       grid-area: social;
       align-self: end;
+      display: flex;
+      gap: var(--spacing-xxxs);
     }
 
     & .mx-footer__copyright {
@@ -41,15 +43,11 @@
 
       &:not(:first-child) {
         padding-block-start: var(--spacing-s);
-        border-block-start: var(--line-width, 1px) solid
-          var(--line-colour, var(--colour-border));
         margin-block-start: var(--gap);
 
         & + .mx-footer__links {
           @media (--medium-up) {
             padding-block-start: var(--spacing-s);
-            border-block-start: var(--line-width, 1px) solid
-              var(--line-colour, var(--colour-border));
           }
         }
       }
@@ -72,8 +70,6 @@
   .mx-footer__aoc {
     grid-area: aoc;
     padding-block-end: var(--footer-row-gap, var(--spacing-xxl));
-    border-block-end: var(--line-width, 1px) solid
-      var(--line-colour, var(--colour-border));
     margin-block-end: var(--gap);
     text-align: center;
   }

package/src/Layout/Footer/footer.twig

@@ -1,7 +1,6 @@
 {% set baseClass = 'mx-footer' %}
 {% set classes = [
   baseClass,
-  'mx-section',
   'mx-section--top-l',
   'mx-section--bottom-m',
   background == "light" ? 'mx-background--alt' : 'mx-background--reverse',

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./grid.twig"
 import GridItem from "./grid-item.twig"
 import "./grid.css"
@@ -14,12 +14,12 @@ const meta: Meta<GridType> = {
   component: Component,
   args: {
     items: [
-      GridItem({ item: "item 1" }),
-      GridItem({ item: "item 2" }),
-      GridItem({ item: "item 3" }),
-      GridItem({ item: "item 4" }),
-      GridItem({ item: "item 5" }),
-      GridItem({ item: "item 6" }),
+      GridItem({ item: "<span>item 1</span>" }),
+      GridItem({ item: "<span>item 2</span>" }),
+      GridItem({ item: "<span>item 3</span>" }),
+      GridItem({ item: "<span>item 4</span>" }),
+      GridItem({ item: "<span>item 5</span>" }),
+      GridItem({ item: "<span>item 6</span>" }),
     ],
     as: SectionTypes.DIV,
     modifiers: [GridModifiers.SM_2, GridModifiers.LG_4],
@@ -59,7 +59,7 @@ export const Span: Story = {
   args: {
     modifiers: [GridModifiers.SM_2, GridModifiers.MD_3],
     items: [
-      GridItem({ item: "item 1" }),
+      GridItem({ item: "<span>item 1</span>" }),
       GridItem({
         item: "item 2, span 2",
         modifiers: [GridModifiers.MD_2],

package/src/Layout/Grid/Grid.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @eslint-react/no-array-index-key, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Grid"
 import { AsTypes, GridModifiers, SectionTypes } from "@pnx-mixtape/ids-shape"
 

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

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

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

@@ -7,7 +7,7 @@
     --container-name: grid-item;
 
     @container grid-item (min-width: token("breakpoint.l")) {
-      --grid-gap: var(--gap-l);
+      --grid-gap: var(--large-grid-gap, var(--gap-l));
     }
 
     &

package/src/Layout/Grid/grid-item.twig

@@ -9,8 +9,10 @@
   <{{ as }}{{ attributes.addClass("mx-container") }}>
   {{ item }}
   </{{ as }}>
-{% else %}
+{% elseif classes is not empty or as != "div" %}
   <{{ as }}{{ attributes }}>
   {{ item }}
   </{{ as }}>
+{% else %}
+  {{ item }}
 {% endif %}

package/src/Layout/Grid/grid.css

@@ -16,7 +16,7 @@
     gap: var(--grid-gap, var(--gap));
 
     @media (--large-up) {
-      --grid-gap: var(--gap-l);
+      --grid-gap: var(--large-grid-gap, var(--gap-l));
     }
 
     &:is(ul, ol) {

package/src/Layout/Header/Header.stories.ts

@@ -1,10 +1,9 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./header.twig"
 import "./_header.css"
 import "./_toggles.css"
 import "./Elements/GlobalToggle"
 import { ButtonTypes, Header as HeaderType } from "@pnx-mixtape/ids-shape"
-import { Page } from "../../../.storybook/decorators"
 import { Icons } from "../../enums"
 
 // Deps.
@@ -63,9 +62,6 @@ const meta: Meta<MxHeaderType> = {
       ],
     }),
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     stacked: { control: "boolean" },
     title: { control: "text" },
@@ -75,7 +71,6 @@ const meta: Meta<MxHeaderType> = {
     "logo.image.src": { control: "text" },
     "logo.image.alt": { control: "text" },
   },
-  decorators: [Page],
 }
 
 export default meta

package/src/Layout/Header/Header.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Header"
 import { mixtapeLogo, navigationItems } from "../../../mockups/constants"
 import "./header.css"

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Header Controls smoke-test 1`] = `
-<div class="mx-page">
-  <header class="mx-header mx-section__full mx-page mx-section--s">
+<div class="mx-page default">
+  <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -76,8 +76,8 @@ exports[`Layout/Header Controls smoke-test 1`] = `
 `;
 
 exports[`Layout/Header Header smoke-test 1`] = `
-<div class="mx-page">
-  <header class="mx-header mx-section__full mx-page mx-section--s">
+<div class="mx-page default">
+  <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -142,8 +142,8 @@ exports[`Layout/Header Header smoke-test 1`] = `
 `;
 
 exports[`Layout/Header Search smoke-test 1`] = `
-<div class="mx-page">
-  <header class="mx-header mx-section__full mx-page mx-section--s">
+<div class="mx-page default">
+  <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -243,8 +243,8 @@ exports[`Layout/Header Search smoke-test 1`] = `
 `;
 
 exports[`Layout/Header Stacked smoke-test 1`] = `
-<div class="mx-page">
-  <header class="mx-header mx-section__full mx-page mx-section--s">
+<div class="mx-page default">
+  <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -306,7 +306,7 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
     </div>
   </header>
   <div id="unique-1"
-       class="mx-header__nav mx-section__full mx-page"
+       class="mx-header__nav mx-page"
        aria-label="Primary navigation"
        role="region"
   >
@@ -451,8 +451,8 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
 `;
 
 exports[`Layout/Header WithTitle smoke-test 1`] = `
-<div class="mx-page">
-  <header class="mx-header mx-section__full mx-page mx-section--s">
+<div class="mx-page default">
+  <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"

package/src/Layout/Header/_header.css

@@ -29,9 +29,13 @@
 
   .mx-header__nav {
     inline-size: 100%;
-    transition:
-      0.2s opacity var(--ease),
-      0.2s visibility var(--ease);
+    opacity: 1;
+    display: grid;
+
+    @starting-style {
+      opacity: 0;
+      display: grid;
+    }
 
     @media (--global-nav-up) {
       z-index: 2;
@@ -41,12 +45,9 @@
     }
 
     &[inert] {
-      block-size: 0;
+      display: none;
       opacity: 0;
-      visibility: hidden;
-      transition:
-        0.2s opacity var(--ease),
-        0.2s visibility var(--ease);
+      transition-duration: 0.4s;
     }
   }
 
@@ -56,22 +57,23 @@
     inset-block-start: 2px;
     inset-inline-start: 0;
     inline-size: 100%;
-    transition:
-      0.2s opacity var(--ease),
-      0.2s visibility var(--ease);
+    opacity: 1;
+    display: flex;
+
+    @starting-style {
+      opacity: 0;
+      display: grid;
+    }
 
     @media (--global-nav-up) {
-      display: flex;
       position: relative;
       inline-size: auto;
     }
 
     &[inert] {
+      display: none;
       opacity: 0;
-      visibility: hidden;
-      transition:
-        0.2s opacity var(--ease),
-        0.2s visibility var(--ease);
+      transition-duration: 0.4s;
     }
 
     & input {

package/src/Layout/Header/header.twig

@@ -1,7 +1,6 @@
 {% set baseClass = 'mx-header' %}
 {% set classes = [
   baseClass,
-  'mx-section__full',
   'mx-page',
   'mx-section--s',
 ] %}
@@ -49,7 +48,7 @@
   </div>
 </header>
 {% if stacked and (navigation is not empty or controls is not empty) %}
-  <div id="primary-nav" class="mx-header__nav mx-section__full mx-page global-nav-up-only" aria-label="Primary navigation">
+  <div id="primary-nav" class="mx-header__nav mx-page global-nav-up-only" aria-label="Primary navigation">
     <div class="mx-header__nav-inner">
       {{ navigation }}
       {% if controls is not empty %}

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./masthead.twig"
 import Link from "../../Atom/Link/link.twig"
 import Icon from "../../Atom/Icon/icon.twig"
@@ -7,7 +7,6 @@ import {
   Masthead as MastheadType,
   MastheadModifier,
 } from "@pnx-mixtape/ids-shape"
-import { Page } from "../../../.storybook/decorators"
 import { Icons } from "../../enums"
 
 const meta: Meta<MastheadType> = {
@@ -26,7 +25,6 @@ const meta: Meta<MastheadType> = {
       }),
     ],
   },
-  decorators: [Page],
 }
 
 export default meta

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Masthead Light smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <nav class="mx-skip-links"
        aria-label="Skip to links"
   >
@@ -16,7 +16,7 @@ exports[`Layout/Masthead Light smoke-test 1`] = `
       </span>
     </a>
   </nav>
-  <div class="mx-masthead mx-section__full mx-page mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--alt">
+  <div class="mx-masthead mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--alt">
     <div class="flex">
       <div>
         A PreviousNext product
@@ -27,7 +27,7 @@ exports[`Layout/Masthead Light smoke-test 1`] = `
 `;
 
 exports[`Layout/Masthead Masthead smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <nav class="mx-skip-links"
        aria-label="Skip to links"
   >
@@ -42,7 +42,7 @@ exports[`Layout/Masthead Masthead smoke-test 1`] = `
       </span>
     </a>
   </nav>
-  <div class="mx-masthead mx-section__full mx-page mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--reverse">
+  <div class="mx-masthead mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--reverse">
     <div class="flex">
       <div>
         A PreviousNext product
@@ -53,7 +53,7 @@ exports[`Layout/Masthead Masthead smoke-test 1`] = `
 `;
 
 exports[`Layout/Masthead WithLinks smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <nav class="mx-skip-links"
        aria-label="Skip to links"
   >
@@ -68,7 +68,7 @@ exports[`Layout/Masthead WithLinks smoke-test 1`] = `
       </span>
     </a>
   </nav>
-  <div class="mx-masthead mx-section__full mx-page mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--reverse">
+  <div class="mx-masthead mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--reverse">
     <div class="flex">
       <div>
         A PreviousNext product

package/src/Layout/Masthead/masthead.twig

@@ -1,8 +1,6 @@
 {% set baseClass = 'mx-masthead' %}
 {% set classes = [
   baseClass,
-  'mx-section__full',
-  'mx-page',
   'mx-spacing--top-xxs mx-spacing--bottom-xxs',
   background == "light" ? 'mx-background--alt' : 'mx-background--reverse',
 ] %}

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Page"
 import { mixtapeHeader, mixtapeFooter } from "../../../mockups/constants"
 import HeroBanner from "../../Component/HeroBanner/HeroBanner"

package/src/Layout/Page/page.css

@@ -24,62 +24,38 @@
       var(--full) [full-end];
 
     &
-      > *:where(
-        :not(
-            .mx-page,
-            .mx-section__full,
-            .mx-section__narrow,
-            .mx-section__feature,
-            .mx-section[class*="mx-background--"]
-          )
+      > :where(
+        *:not(.mx-page, [class*="mx-background--"]),
+        .mx-background--box
       ) {
-      grid-column: container;
+      grid-column: var(--grid-column, container);
     }
 
-    /* Immediate nested can be subgrid. */
-    & > :where(.mx-page) {
-      grid-column: full;
-      display: grid;
-      grid-template-columns: subgrid;
-    }
-
-    /* Deeper nested cannot be subgrid, needs it's children to be full width by default. */
-    &
-      > *
-      :where(.mx-page:not(.mx-page--narrow, .mx-page--feature))
-      > *:where(:not(.mx-section__narrow, .mx-section__feature)) {
-      grid-column: full;
-    }
-
-    /** Adding a background triggers subgrid */
-    & > :where(.mx-section[class*="mx-background--"]) {
+    /* Immediate nested or adding a background triggers subgrid */
+    & > :where(.mx-page, [class*="mx-background--"]:not(.mx-background--box)) {
       grid-column: full;
       display: grid;
       grid-template-columns: subgrid;
 
       &
-        > *:where(
-          :not(
-              .mx-page,
-              .mx-section__full,
-              .mx-section__narrow,
-              .mx-section__feature
-            )
+        > :where(
+          *:not(.mx-page, [class*="mx-background--"]),
+          .mx-background--box
         ) {
-        grid-column: container;
+        grid-column: var(--grid-column, container);
       }
     }
   }
 
-  :where(:is(.mx-page--feature > *, .mx-section__feature)) {
-    grid-column: feature;
+  :where(.mx-page--feature > *, .mx-section--feature) {
+    --grid-column: feature;
   }
 
-  :where(:is(.mx-page--narrow > *, .mx-section__narrow)) {
-    grid-column: narrow;
+  :where(.mx-page--narrow > *, .mx-section--narrow) {
+    --grid-column: narrow;
   }
 
-  :where(:is(.mx-page--full > *, .mx-section__full)) {
-    grid-column: full;
+  :where(.mx-page--full > *, .mx-section--full) {
+    --grid-column: full;
   }
 }

package/src/Layout/Page/page.twig

@@ -1,8 +1,13 @@
 {% set classes = ['mx-page'] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set mainAttributes = (attributes ?? create_attribute()).addClass(classes) %}
 <div{{ attributes }}>
   {{ masthead }}
   {{ header }}
-  <main>{{ main }}</main>
+  <main{{ mainAttributes }}>
+    {% for child in main %}
+      {{ child }}
+    {% endfor %}
+  </main>
   {{ footer }}
 </div>

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

@@ -1,25 +1,77 @@
-import { Meta, StoryObj } from "@storybook/html"
-import { Page } from "../../../.storybook/decorators"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./twig/section-background.twig"
 import "./section.css"
-import { Section as SectionType } from "@pnx-mixtape/ids-shape"
+import {
+  HeadingTypes,
+  Section as SectionType,
+  SectionModifiers,
+  SectionTypes,
+  Image as ImageType,
+} from "@pnx-mixtape/ids-shape"
+import { BackgroundStyles, Icons } from "../../enums"
 
-const meta: Meta<SectionType> = {
+// Deps.
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+import Image from "../../Atom/Image/image.twig"
+
+type MxSectionType = SectionType & {
+  image?: ImageType
+}
+
+const meta: Meta<MxSectionType> = {
   tags: ["autodocs"],
   component: Component,
-  decorators: [Page],
   args: {
-    background: "background--alt",
+    image: Image({
+      src: "https://picsum.photos/id/56/1642/560?grayscale",
+      alt: "Blurry bubbles",
+    }),
+    modifiers: [SectionModifiers.XL],
+    as: SectionTypes.DIV,
+    container: true,
+    title: Heading({
+      title: "Section name",
+      as: HeadingTypes.TWO,
+    }),
+    content:
+      '<p class="mx-text--lede">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p>',
+    link: Link({
+      href: "#",
+      title: "See more content",
+      more: true,
+      iconEnd: Icon({
+        icon: Icons.ARROW_RIGHT,
+      }),
+    }),
+  },
+  argTypes: {
+    modifiers: {
+      options: Object.values(SectionModifiers),
+      control: "multi-select",
+    },
+    background: {
+      options: Object.values(BackgroundStyles),
+      control: "select",
+    },
+    as: { options: Object.values(SectionTypes), control: "select" },
+    container: { control: "boolean" },
+    // @ts-expect-error The controls follow the shape
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+    "link.href": { control: "text" },
+    "link.title": { control: "text" },
   },
 }
 
 export default meta
-type Story = StoryObj<SectionType>
+type Story = StoryObj<MxSectionType>
 
 export const Background: Story = {}
 
 export const Dark: Story = {
   args: {
-    background: "background--reverse",
+    background: BackgroundStyles.REVERSE,
   },
 }

package/src/Layout/Section/Breakouts.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-breakout.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