@pnx-mixtape/mxds 0.0.13 → 0.0.15

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/__snapshots__/Page.stories.tsx.snap

@@ -9,18 +9,18 @@ exports[`Layout/Page Page smoke-test 1`] = `
            class="mx-logo"
         >
           <img alt="Mixtape"
-               src="https://mixtape.pnx.io/images/mixtape-logo.png"
                loading="eager"
+               src="https://mixtape.pnx.io/images/mixtape-logo.png"
           >
         </a>
       </div>
       <div class="mx-header__main">
-        <div id=":r0:"
+        <div id="«r0»"
              class="mx-header__nav"
         >
           <nav class="mx-nav mx-nav--dropdown"
                aria-label="Primary Navigation"
-               id=":r0:"
+               id="«r0»"
           >
             <ul class="mx-nav__level-1">
               <li class="mx-nav__has-subnav">

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

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>
 `;