@pnx-mixtape/mxds 0.0.6 → 0.0.7

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

@@ -1,79 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Page Page smoke-test 1`] = `
-<div class="page">
-  <header class="page global__primary section--s">
-    <div class="flex">
-      <a href="https://mixtape.pnx.io/"
-         class="logo"
-      >
-        <img alt="Mixtape"
-             src="https://mixtape.pnx.io/images/mixtape-logo.png"
-             loading="eager"
+<div class="mx-page">
+  <header class="mx-page mx-header mx-section--s">
+    <div class="mx-header__inner">
+      <div class="mx-header__brand">
+        <a href="https://mixtape.pnx.io/"
+           class="mx-logo"
         >
-      </a>
-      <div id=":r0:"
-           class="global__primary__nav"
-      >
-        <nav class="nav nav--dropdown"
-             aria-label="Primary Navigation"
-             id=":r0:"
+          <img alt="Mixtape"
+               src="https://mixtape.pnx.io/images/mixtape-logo.png"
+               loading="eager"
+          >
+        </a>
+      </div>
+      <div class="mx-header__main">
+        <div id=":r0:"
+             class="mx-header__nav"
         >
-          <ul class="nav__level-1">
-            <li class="nav__has-subnav">
-              <a href="http://example.com/#1"
-                 class
-              >
-                Home
-              </a>
-              <button aria-controls="unique-0"
-                      aria-expanded="false"
-                      class="nav__toggle icon icon--only icon--chevron-down"
-                      type="button"
-              >
-                Sub-navigation
-              </button>
-            </li>
-            <li class>
-              <a href="http://example.com/#2"
-                 class
-              >
-                About
-              </a>
-            </li>
-            <li class>
-              <a href="http://example.com/#3"
-                 class
-              >
-                Contact
-              </a>
-            </li>
-          </ul>
-        </nav>
+          <nav class="mx-nav mx-nav--dropdown"
+               aria-label="Primary Navigation"
+               id=":r0:"
+          >
+            <ul class="mx-nav__level-1">
+              <li class="mx-nav__has-subnav">
+                <a href="http://example.com/#1"
+                   class
+                >
+                  Home
+                </a>
+                <button aria-controls="unique-0"
+                        aria-expanded="false"
+                        class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down"
+                        type="button"
+                >
+                  Sub-navigation
+                </button>
+              </li>
+              <li class>
+                <a href="http://example.com/#2"
+                   class
+                >
+                  About
+                </a>
+              </li>
+              <li class>
+                <a href="http://example.com/#3"
+                   class
+                >
+                  Contact
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
       </div>
     </div>
   </header>
-  <main class="section">
-    <div class="page section--xl">
-      <div class="hero-banner vertical-flow">
-        <h1 class="headline"
+  <main class="mx-section">
+    <div class="mx-page mx-section--xl">
+      <div class="mx-hero-banner mx-vertical-flow">
+        <h1 class="mx-headline"
             id="always-put-your-best-"
         >
           Always put your best foot forward.
         </h1>
-        <p class="text--xl">
+        <p class="mx-text--xl">
           Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
         </p>
       </div>
     </div>
   </main>
-  <footer class="page section--top-l section--bottom-m">
-    <div class="grid">
-      <div class="grid--12-col footer__meta">
-        <span>
-          © 2022 Company Name
-        </span>
-      </div>
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m">
+    <div class="mx-footer__inner">
+      <span class="mx-footer__copyright mx-text--s">
+        © 2022 Company Name
+      </span>
     </div>
   </footer>
 </div>

package/src/Layout/Page/page.css

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.layouts {
-  :where(.page) {
+  :where(.mx-page) {
     --plus: token("size.container.plus");
     --minus: token("size.container.minus");
     --diff: calc(var(--plus) - var(--minus));
@@ -26,18 +26,18 @@
     &
       > *:where(
         :not(
-            .page,
-            .section__full,
-            .section__narrow,
-            .section__feature,
-            .section[class*="background--"]
+            .mx-page,
+            .mx-section__full,
+            .mx-section__narrow,
+            .mx-section__feature,
+            .mx-section[class*="mx-background--"]
           )
       ) {
       grid-column: container;
     }
 
     /* Immediate nested can be subgrid. */
-    & > :where(.page) {
+    & > :where(.mx-page) {
       grid-column: full;
       display: grid;
       grid-template-columns: subgrid;
@@ -46,105 +46,40 @@
     /* Deeper nested cannot be subgrid, needs it's children to be full width by default. */
     &
       > *
-      :where(.page:not(.page--narrow, .page--feature))
-      > *:where(:not(.section__narrow, .section__feature)) {
+      :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(.section[class*="background--"]) {
+    & > :where(.mx-section[class*="mx-background--"]) {
       grid-column: full;
       display: grid;
       grid-template-columns: subgrid;
 
       &
         > *:where(
-          :not(.page, .section__full, .section__narrow, .section__feature)
+          :not(
+              .mx-page,
+              .mx-section__full,
+              .mx-section__narrow,
+              .mx-section__feature
+            )
         ) {
         grid-column: container;
       }
     }
   }
 
-  :where(:is(.page--feature > *, .section__feature)) {
+  :where(:is(.mx-page--feature > *, .mx-section__feature)) {
     grid-column: feature;
   }
 
-  :where(:is(.page--narrow > *, .section__narrow)) {
+  :where(:is(.mx-page--narrow > *, .mx-section__narrow)) {
     grid-column: narrow;
   }
 
-  :where(:is(.page--full > *, .section__full)) {
+  :where(:is(.mx-page--full > *, .mx-section__full)) {
     grid-column: full;
   }
 }
-
-/**
- * Page with Sidebar
- */
-
-@layer design-system.layouts {
-  .grid--sidebar {
-    &:where(:not(:has(> aside))) {
-      grid-column: narrow;
-    }
-
-    &:where(:has(> aside)) {
-      @media (--medium-up) {
-        display: grid;
-        grid-template-columns: var(--container-max-width, 76ch) auto;
-        gap: var(--sidebar-gap, var(--gap));
-
-        @media (--large-up) {
-          --sidebar-gap: 18ch;
-        }
-      }
-
-      &.grid--sidebar-rev {
-        & > :is(section, aside) {
-          &:first-child {
-            order: 2;
-          }
-
-          &:last-child {
-            order: 1;
-          }
-        }
-      }
-
-      &.grid--sidebar-rev-lg {
-        @media (--medium-up) {
-          & > :is(section, aside) {
-            &:first-child {
-              order: 2;
-            }
-
-            &:last-child {
-              order: 1;
-            }
-          }
-        }
-      }
-
-      &:is(.grid--sidebar-rev, .grid--sidebar-rev-lg) {
-        @media (--large-up) {
-          grid-template-columns: auto var(--container-max-width, 76ch);
-        }
-      }
-    }
-
-    &:where(:has(> aside:first-child)) {
-      grid-template-columns: auto var(--container-max-width, 76ch);
-    }
-  }
-}
-
-/**
- * Print stylesheet
- */
-
-@media print {
-  .page__sidebar {
-    display: none;
-  }
-}

package/src/Layout/Page/page.twig

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

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

@@ -1,6 +1,9 @@
 import { Meta, StoryObj } from "@storybook/html"
 import { Page } from "../../../.storybook/decorators"
-import Component from "./twig/section-story.twig"
+import Component from "./section.twig"
+import Link from "../../Atom/Link/link.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+import Heading from "../../Atom/Heading/heading.twig"
 import "./section.css"
 import { BackgroundStyles, Icons } from "../../enums"
 import {
@@ -17,20 +20,20 @@ const meta: Meta<SectionType> = {
     modifiers: [SectionModifiers.XL],
     as: SectionTypes.DIV,
     container: true,
-    title: {
+    title: Heading({
       title: "Section name",
       as: HeadingTypes.TWO,
-    },
-    link: {
+    }),
+    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: {
+      iconEnd: Icon({
         icon: Icons.ARROW_RIGHT,
-      },
-    },
-    content:
-      "A short description to help explain enough about the subject matter to encourage visitors to learn more.",
+      }),
+    }),
   },
   parameters: {
     deepControls: { enabled: true },

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

@@ -1,11 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react"
 import Component from "./Section"
-import {
-  PageWidths,
-  SectionFlow,
-  SectionStyles,
-  SectionTags,
-} from "../../enums"
+import { PageWidths, SectionFlow, SectionStyles } from "../../enums"
+import { SectionTypes } from "@pnx-mixtape/ids-shape"
 import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
@@ -19,7 +15,7 @@ const meta: Meta<typeof Component> = {
   argTypes: {
     sizes: { options: Object.values(SectionStyles) },
     width: { options: Object.values(PageWidths) },
-    as: { options: Object.values(SectionTags) },
+    as: { options: Object.values(SectionTypes) },
     flow: { options: Object.values(SectionFlow) },
   },
 }
@@ -37,14 +33,14 @@ export const Default: Story = {
 export const Varied: Story = {
   args: {
     sizes: [SectionStyles.TOP_M, SectionStyles.BOTTOM_XL],
-    as: SectionTags.ASIDE,
+    as: SectionTypes.ASIDE,
   },
 }
 
 export const List: Story = {
   args: {
     sizes: SectionStyles.S,
-    as: SectionTags.LIST,
+    as: SectionTypes.LIST,
     children: (
       <>
         <li>Item 1</li>

package/src/Layout/Section/Section.tsx

@@ -5,12 +5,8 @@ import {
   useMemo,
 } from "react"
 import classNames from "classnames"
-import {
-  PageWidths,
-  SectionFlow,
-  SectionStyles,
-  SectionTags,
-} from "../../enums"
+import { PageWidths, SectionFlow, SectionStyles } from "../../enums"
+import { SectionTypes } from "@pnx-mixtape/ids-shape"
 
 type InnerTagProps = ComponentPropsWithoutRef<"div"> &
   PropsWithChildren & {
@@ -28,7 +24,7 @@ type SectionProps = PropsWithChildren & {
   sizes?: SectionStyles | SectionStyles[]
   width?: PageWidths
   flow?: SectionFlow
-  as?: SectionTags
+  as?: SectionTypes
   className?: string
   innerClassName?: string
   containing?: boolean
@@ -40,7 +36,7 @@ const Section = ({
   sizes,
   width,
   flow,
-  as = SectionTags.DIV,
+  as = SectionTypes.DIV,
   className,
   innerClassName,
   containing = false,
@@ -58,7 +54,7 @@ const Section = ({
   return (
     <Tag
       className={classNames({
-        page: containing,
+        ["mx-page"]: containing,
         [className]: className,
         [sizeClasses.join(" ")]: sizes,
         [`mx-page--${width}`]: width && containing,
@@ -70,7 +66,7 @@ const Section = ({
       <InnerTag
         className={classNames({
           [innerClassName]: innerClassName,
-          container: container,
+          ["mx-container"]: container,
         })}
         condition={!!container || !!innerClassName}
       >

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

@@ -1,12 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react"
 import Component from "./SectionGrid"
-import {
-  GridColumns,
-  PageWidths,
-  SectionFlow,
-  SectionStyles,
-  SectionTags,
-} from "../../enums"
+import { PageWidths, SectionFlow, SectionStyles } from "../../enums"
+import { SectionTypes, GridModifiers } from "@pnx-mixtape/ids-shape"
 import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
@@ -21,13 +16,12 @@ const meta: Meta<typeof Component> = {
         <div>Item 3</div>
       </>
     ),
-    cols: GridColumns.DYNAMIC,
     sizes: SectionStyles.XL,
   },
   argTypes: {
     sizes: { options: Object.values(SectionStyles) },
-    cols: { options: Object.values(GridColumns) },
-    as: { options: Object.values(SectionTags) },
+    cols: { options: Object.values(GridModifiers) },
+    as: { options: Object.values(SectionTypes) },
     width: { options: Object.values(PageWidths) },
     flow: { options: Object.values(SectionFlow) },
   },
@@ -40,7 +34,7 @@ export const SectionGrid: Story = {}
 
 export const List: Story = {
   args: {
-    as: SectionTags.LIST,
+    as: SectionTypes.LIST,
     container: true,
     children: (
       <>

package/src/Layout/Section/SectionGrid.tsx

@@ -1,20 +1,15 @@
 import { JSX, PropsWithChildren, useMemo } from "react"
 import classNames from "classnames"
 import Grid from "../Grid/Grid"
-import {
-  GridColumns,
-  PageWidths,
-  SectionFlow,
-  SectionStyles,
-  SectionTags,
-} from "../../enums"
+import { PageWidths, SectionFlow, SectionStyles } from "../../enums"
+import { SectionTypes, GridModifiers } from "@pnx-mixtape/ids-shape"
 
 type SectionGridProps = PropsWithChildren & {
   sizes?: SectionStyles | SectionStyles[]
   width?: PageWidths
   flow?: SectionFlow
-  as?: SectionTags
-  cols?: GridColumns | GridColumns[]
+  as?: SectionTypes
+  cols?: GridModifiers | GridModifiers[]
   className?: string
   innerClassName?: string
   containing?: boolean
@@ -28,14 +23,14 @@ const SectionGrid = ({
   children,
   className,
   innerClassName,
-  as = SectionTags.DIV,
+  as = SectionTypes.DIV,
   containing = false,
   container = false,
   ...props
 }: SectionGridProps): JSX.Element => {
-  const wrapperAs = as === SectionTags.LIST ? SectionTags.DIV : as
+  const wrapperAs = as === SectionTypes.LIST ? SectionTypes.DIV : as
   const Tag: JSX.ElementType = `${wrapperAs}` as unknown as JSX.ElementType
-  const gridAs = as === SectionTags.LIST ? SectionTags.LIST : SectionTags.DIV
+  const gridAs = as === SectionTypes.LIST ? SectionTypes.LIST : SectionTypes.DIV
 
   const sizeClasses = useMemo<string[]>(() => {
     if (!sizes) return []
@@ -47,7 +42,7 @@ const SectionGrid = ({
   return (
     <Tag
       className={classNames({
-        page: containing,
+        ["mx-page"]: containing,
         [className]: className,
         [sizeClasses.join(" ")]: sizes,
         [`mx-page--${width}`]: width && containing,

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

@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Section/Background Background smoke-test 1`] = `
-<div class="page">
-  <section class="section background--alt">
-    <figure class="background--image section__full"
+<div class="mx-page">
+  <section class="mx-section background--alt">
+    <figure class="mx-background--image mx-section__full"
             aria-hidden="true"
     >
       <img src="https://picsum.photos/id/56/1642/560?grayscale"
            alt
       >
     </figure>
-    <div class="section--xl">
-      <div class="section__header">
+    <div class="mx-section--xl">
+      <div class="mx-section__header">
         <h2>
           Section with background image
         </h2>
-        <a class="button button--dark"
+        <a class="mx-button mx-button--dark"
            href="#"
         >
           Learn more
@@ -30,21 +30,21 @@ exports[`Layout/Section/Background Background smoke-test 1`] = `
 `;
 
 exports[`Layout/Section/Background Dark smoke-test 1`] = `
-<div class="page">
-  <section class="section background--reverse">
-    <figure class="background--image section__full"
+<div class="mx-page">
+  <section class="mx-section background--reverse">
+    <figure class="mx-background--image mx-section__full"
             aria-hidden="true"
     >
       <img src="https://picsum.photos/id/56/1642/560?grayscale"
            alt
       >
     </figure>
-    <div class="section--xl">
-      <div class="section__header">
+    <div class="mx-section--xl">
+      <div class="mx-section__header">
         <h2>
           Section with background image
         </h2>
-        <a class="button button--dark"
+        <a class="mx-button mx-button--dark"
            href="#"
         >
           Learn more

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

@@ -1,46 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Section/Breakouts Breakouts smoke-test 1`] = `
-<div class="page">
-  <section class="section section--flow">
+<div class="mx-page">
+  <section class="mx-section mx-section--flow">
     <p>
       Default is container width, with an inline gutter for smaller screens.
     </p>
   </section>
-  <section class="section section__full section--flow">
+  <section class="mx-section mx-section__full mx-section--flow">
     <p>
       Section can have children with different content widths;
     </p>
-    <p class="section__narrow">
+    <p class="mx-section__narrow">
       like the optimum content width with .section__narrow
     </p>
-    <p class="section__feature">
+    <p class="mx-section__feature">
       or slightly larger feature widths with .section__feature
     </p>
-    <p class="section__full">
+    <p class="mx-section__full">
       or full width with .section__full
     </p>
   </section>
-  <section class="section section--flow">
+  <section class="mx-section mx-section--flow">
     <p>
       Sections can be nested
     </p>
-    <section class="section">
+    <section class="mx-section">
       <p>
         and have the same content width options are un-nested ones;
       </p>
-      <p class="section__narrow">
+      <p class="mx-section__narrow">
         like the optimum content widths with .section__narrow
       </p>
-      <p class="section__feature">
+      <p class="mx-section__feature">
         or slightly larger feature widths with .section__feature
       </p>
-      <p class="section__full">
+      <p class="mx-section__full">
         or full width with .section__full
       </p>
     </section>
   </section>
-  <section class="section section__narrow section--flow">
+  <section class="mx-section mx-section__narrow mx-section--flow">
     <p>
       Sections can say for all children to have a certain width
     </p>
@@ -51,27 +51,27 @@ exports[`Layout/Section/Breakouts Breakouts smoke-test 1`] = `
       on the parent.
     </p>
   </section>
-  <section class="section section--flow background--reverse">
+  <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="section--bottom-l">
+    <section class="mx-section--bottom-l">
       <p>
         even children
       </p>
     </section>
-    <section class="section--l background--reset">
+    <section class="mx-section--l mx-background--reset">
       <p>
         and ones with their own backgrounds.
       </p>
     </section>
   </section>
-  <section class="section section--group">
+  <section class="mx-section mx-section--group">
     <p>
       Sections can be grouped together
     </p>
   </section>
-  <section class="section section__feature section--group">
+  <section class="mx-section mx-section__feature mx-section--group">
     <p>
       even if they have different content widths.
     </p>