@pnx-mixtape/mxds 0.0.6 → 0.0.8

package/src/Layout/Footer/footer.css

@@ -3,52 +3,129 @@
  */
 
 @layer design-system.layouts {
-  .footer {
+  .mx-footer {
     position: sticky;
     inset-block-start: 100vh;
+  }
 
-    & .nav__toggle {
-      display: none;
+  .mx-footer__inner {
+    display: grid;
+    grid-template-areas: "brand" "social" "navigation" "copyright" "links";
+
+    @media (--medium-up) {
+      grid-template-areas: "brand navigation" "social navigation" "copyright links";
+      gap: 0;
+    }
+
+    &:has(.mx-footer__aoc) {
+      grid-template-areas: "aoc" "brand" "social" "navigation" "copyright" "links";
+
+      @media (--medium-up) {
+        grid-template-areas: "aoc aoc" "brand navigation" "social navigation" "copyright links";
+      }
     }
 
-    & .grid {
-      row-gap: var(--footer-row-gap, var(--spacing-xxxl));
+    & .mx-logo {
+      grid-area: brand;
+      margin-block-end: var(--gap);
     }
-  }
 
-  .footer__logo {
-    @media (--medium-down) {
-      text-align: center;
+    & .mx-social-links {
+      grid-area: social;
+      align-self: end;
+    }
+
+    & .mx-footer__copyright {
+      grid-area: copyright;
+      align-self: end;
+
+      &: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));
+          }
+        }
+      }
+    }
+
+    & .mx-footer__links {
+      grid-area: links;
+      align-self: end;
+
+      @media (--medium-up) {
+        justify-content: end;
+      }
+
+      &:not(:first-child) {
+        margin-block-start: var(--gap);
+      }
     }
   }
 
-  .footer__meta {
-    padding-block-start: var(--spacing-s);
-    border-block-start: var(--line-width, 1px) solid
+  .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;
-    line-height: 2;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--gap);
+  }
 
-    @media (--x-small-down) {
-      flex-direction: column;
+  .mx-nav--footer {
+    grid-area: navigation;
+    margin-block: var(--spacing-xxxl) var(--spacing-l);
+
+    @media (--medium-up) {
+      justify-self: end;
+      margin-block: 0;
+    }
+
+    &:not(:has(.mx-nav__level-2)) ul {
+      flex-flow: row wrap;
+      align-items: center;
+      gap: var(--spacing-l) var(--spacing-xxxl);
     }
 
-    & .nav--inline > ul {
-      @media (--x-small-down) {
-        flex-direction: column;
-        gap: var(--gap-s);
+    &:has(.mx-nav__level-2) {
+      & ul {
+        display: grid;
+      }
+
+      & .mx-nav__level-1 {
+        gap: var(--spacing-l) var(--spacing-xxxl);
+        grid-template-columns: 1fr 1fr;
+
+        @media (--medium-up) {
+          grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        & > li > a {
+          display: inline-block;
+          margin-block-end: var(--spacing-l);
+          font-weight: var(--font-weight-bold);
+        }
+      }
+
+      & .mx-nav__level-2 {
+        gap: var(--spacing-xs);
       }
     }
+
+    & .mx-nav__toggle {
+      display: none;
+    }
   }
 }
 
 @media print {
-  .footer {
+  .mx-footer {
     display: none;
   }
 }

package/src/Layout/Footer/footer.twig

@@ -1,25 +1,31 @@
-<footer class="footer section section--top-l section--bottom-m background--reverse foreground--reverse">
-  <div class="grid">
-    <div class="footer__logo grid--3-col">
-      {% block logos %}
-        {% include "@mixtape/Layout/Header/twig/logo.twig" %}
-      {% endblock %}
-    </div>
-    <div class="footer__navigation grid--9-col">
-      {% block nav %}
-        {% include "./FooterMenu/footer-menu.twig" %}
-      {% endblock %}
-    </div>
-    <div class="footer__meta grid--12-col">
-      {% block meta %}
-        <span class="text--s">&copy; 2019 Company Name</span>
-        <nav class="nav nav--inline text--s" aria-label="Footer subsidiary links">
-          <ul>
-            <li><a href="#">Sitemap</a></li>
-            <li><a href="#">Privacy &amp; Terms</a></li>
-          </ul>
-        </nav>
-      {% endblock %}
-    </div>
+{% 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',
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+<footer{{ attributes }}>
+  <div class="mx-footer__inner">
+  {% if aoc %}
+    <div class="mx-footer__aoc mx-text--s">{{ aoc }}</div>
+  {% endif %}
+
+  {{ logo }}
+  {{ socials }}
+  {{ navigation }}
+
+  {% if copyright %}
+    <span class="mx-footer__copyright mx-text--s">{{ copyright }}</span>
+  {% endif %}
+  {% if links %}
+    <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s" aria-label="Footer subsidiary links">
+      {% for link in links %}
+        {{ link }}
+      {% endfor %}
+    </nav>
+  {% endif %}
   </div>
 </footer>

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

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

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

@@ -1,7 +1,7 @@
 /* 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 Component from "./Grid"
-import { AsTags, GridColumns, GridWidths, SectionTags } from "../../enums"
+import { AsTypes, GridModifiers, SectionTypes } from "@pnx-mixtape/ids-shape"
 
 const Grid = ({ children, ...args }) => (
   <Component wrapper {...args}>
@@ -18,9 +18,11 @@ const meta: Meta<typeof Component> = {
   component: Component,
   render: Grid,
   argTypes: {
-    width: { options: Object.values(GridWidths) },
-    cols: { options: Object.values(GridColumns) },
-    as: { options: [...Object.values(SectionTags), ...Object.values(AsTags)] },
+    width: { options: Object.values(GridModifiers) },
+    cols: { options: Object.values(GridModifiers) },
+    as: {
+      options: [...Object.values(SectionTypes), ...Object.values(AsTypes)],
+    },
   },
 }
 
@@ -29,7 +31,6 @@ type Story = StoryObj<typeof meta>
 
 export const Dynamic: Story = {
   args: {
-    cols: GridColumns.DYNAMIC,
     children: [
       {
         value: "1",
@@ -45,7 +46,7 @@ export const Dynamic: Story = {
 }
 export const Breakpoints: Story = {
   args: {
-    cols: [GridColumns.M_2, GridColumns.L_4],
+    cols: [GridModifiers.MD_2, GridModifiers.LG_4],
     children: [
       {
         value: "1",
@@ -64,21 +65,21 @@ export const Breakpoints: Story = {
 }
 export const Fixed: Story = {
   args: {
+    cols: GridModifiers.MD_3,
     children: [
       {
         value: "1",
-        width: "8",
+        width: GridModifiers.MD_2,
       },
       {
         value: "2",
-        width: "4",
       },
     ],
   },
 }
 export const Container: Story = {
   render: ({ children, ...args }) => (
-    <div className="container">
+    <div className="mx-container">
       <Component wrapper {...args}>
         {children.map((item, key) => (
           <Component key={key} width={item.width}>
@@ -89,7 +90,6 @@ export const Container: Story = {
     </div>
   ),
   args: {
-    cols: GridColumns.DYNAMIC,
     children: [
       {
         value: "1",
@@ -102,23 +102,23 @@ export const Container: Story = {
 }
 export const List: Story = {
   render: ({ children, ...args }) => (
-    <Component wrapper as={SectionTags.LIST} {...args}>
+    <Component wrapper as={SectionTypes.LIST} {...args}>
       {children.map((item, key) => (
-        <Component as={AsTags.LI} key={key} width={item.width}>
+        <Component as={AsTypes.LI} key={key} width={item.width}>
           {item.value}
         </Component>
       ))}
     </Component>
   ),
   args: {
+    cols: GridModifiers.MD_3,
     children: [
       {
         value: "1",
-        width: "8",
+        width: GridModifiers.MD_2,
       },
       {
         value: "2",
-        width: "4",
       },
     ],
   },

package/src/Layout/Grid/Grid.tsx

@@ -1,14 +1,14 @@
 import { JSX, PropsWithChildren, useMemo } from "react"
 import classNames from "classnames"
-import { AsTags, GridColumns, GridWidths, SectionTags } from "../../enums"
+import { AsTypes, GridModifiers, SectionTypes } from "@pnx-mixtape/ids-shape"
 
 type GridProps = PropsWithChildren & {
   wrapper?: boolean
   container?: boolean
-  cols?: GridColumns | GridColumns[]
-  width?: GridWidths
+  cols?: GridModifiers | GridModifiers[]
+  width?: GridModifiers
   className?: string
-  as?: AsTags | SectionTags
+  as?: AsTypes | SectionTypes
 }
 // @todo update grid classes and add span support
 const Grid = ({
@@ -18,7 +18,7 @@ const Grid = ({
   cols,
   width,
   className,
-  as = AsTags.DIV,
+  as = AsTypes.DIV,
   ...props
 }: GridProps): JSX.Element => {
   const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
@@ -26,18 +26,18 @@ const Grid = ({
   const colClasses = useMemo<string[]>(() => {
     if (!cols) return []
     if (Array.isArray(cols))
-      return cols.map((col: GridColumns) => `mx-grid--${col}`)
-    return [`mx-grid--${cols}`]
+      return cols.map((col: GridModifiers) => `mx-grid--cols-${col}`)
+    return [`mx-grid--cols-${cols}`]
   }, [cols])
 
   return (
     <Tag
       className={classNames(
         {
-          grid: wrapper,
-          container: container,
+          ["mx-grid"]: wrapper,
+          ["mx-container"]: container,
           [colClasses.join(" ")]: cols && wrapper,
-          [`mx-grid--${width}-col`]: width,
+          [`mx-grid-item__span-${width}`]: width,
         },
         className,
       )}

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Grid Breakpoints smoke-test 1`] = `
-<div class="grid grid--md-2-cols grid--lg-4-cols">
+<div class="mx-grid mx-grid--cols-md-2 mx-grid--cols-lg-4">
   <div class>
     1
   </div>
@@ -18,8 +18,8 @@ exports[`Layout/Grid Breakpoints smoke-test 1`] = `
 `;
 
 exports[`Layout/Grid Container smoke-test 1`] = `
-<div class="container">
-  <div class="grid grid--dynamic">
+<div class="mx-container">
+  <div class="mx-grid">
     <div class>
       1
     </div>
@@ -31,7 +31,7 @@ exports[`Layout/Grid Container smoke-test 1`] = `
 `;
 
 exports[`Layout/Grid Dynamic smoke-test 1`] = `
-<div class="grid grid--dynamic">
+<div class="mx-grid">
   <div class>
     1
   </div>
@@ -45,22 +45,22 @@ exports[`Layout/Grid Dynamic smoke-test 1`] = `
 `;
 
 exports[`Layout/Grid Fixed smoke-test 1`] = `
-<div class="grid">
-  <div class="grid--8-col">
+<div class="mx-grid mx-grid--cols-md-3">
+  <div class="mx-grid-item__span-md-2">
     1
   </div>
-  <div class="grid--4-col">
+  <div class>
     2
   </div>
 </div>
 `;
 
 exports[`Layout/Grid List smoke-test 1`] = `
-<ul class="grid">
-  <li class="grid--8-col">
+<ul class="mx-grid mx-grid--cols-md-3">
+  <li class="mx-grid-item__span-md-2">
     1
   </li>
-  <li class="grid--4-col">
+  <li class>
     2
   </li>
 </ul>

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

@@ -2,7 +2,7 @@
 {% for modifier in modifiers %}
   {% set classes = classes|merge(["mx-grid-item__span-"~modifier]) %}
 {% endfor %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 {% set as = as|default("div") %}
 
 {% if container %}

package/src/Layout/Grid/grid.twig

@@ -3,8 +3,11 @@
 {% for modifier in modifiers %}
   {% set classes = classes|merge([baseClass~"--cols-"~modifier]) %}
 {% endfor %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set as = as|default("div") %}
 
-<{{ as|default("div") }}{{ attributes }}>
-  {{ items }}
-</{{ as|default("div") }}>
+<{{ as }}{{ attributes }}>
+{% for item in items %}
+  {{ item }}
+{% endfor %}
+</{{ as }}>

package/src/Layout/Header/Components/GlobalToggle.tsx

@@ -22,7 +22,6 @@ const GlobalToggle = ({
       iconOnly={true}
       icon={open ? Icons.CLOSE : icon}
       modifiers={[ButtonModifiers.DARK]}
-      className="global__toggle__menu"
       aria-expanded={open}
       aria-controls={toggleId}
       {...props}

package/src/Layout/Header/Components/Logo.tsx

@@ -9,7 +9,7 @@ type LogoProps = {
 }
 
 const Logo = ({ to, src, alt }: LogoProps): JSX.Element => (
-  <Link to={to} className="logo">
+  <Link to={to} className="mx-logo">
     <Media src={src} alt={alt} loading="eager"></Media>
   </Link>
 )

package/src/Layout/Header/Elements/GlobalToggle.ts

@@ -49,10 +49,15 @@ export default class GlobalToggle extends HTMLElement {
     matches,
   }: MediaQueryList | MediaQueryListEvent): void => {
     if (!this.trigger) return
+    const { signal }: AbortController = this.controller
     if (matches) {
       this.widget.attach()
       this.target.setAttribute("inert", "")
-      this.trigger.addEventListener("disclosure-toggle", this.handleDisclosure)
+      this.trigger.addEventListener(
+        "disclosure-toggle",
+        this.handleDisclosure,
+        { signal },
+      )
     } else {
       this.widget.detach()
       this.target.removeAttribute("inert")