@pnx-mixtape/mxds 0.0.6 → 0.0.8

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

@@ -1,54 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Header PrimaryHeader smoke-test 1`] = `
-<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"
+<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>

package/src/Layout/Header/_header.css

@@ -3,25 +3,30 @@
  */
 
 @layer design-system.layouts {
-  .header {
+  .mx-header__inner {
     position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto;
+  }
 
-    & .flex {
-      flex-wrap: wrap;
-      align-items: center;
-      position: relative;
+  .mx-header__brand {
+    display: flex;
+    gap: var(--brand-gap, var(--gap));
+    align-items: center;
+    margin-inline-end: auto;
+  }
 
-      &::after {
-        display: none;
-      }
+  .mx-header__name {
+    display: grid;
+  }
 
-      & .logo {
-        margin-inline-end: auto;
-      }
-    }
+  .mx-header__main {
+    display: flex;
+    gap: var(--main-gap, var(--gap));
+    align-items: center;
   }
 
-  .header__nav {
+  .mx-header__nav {
     inline-size: 100%;
     transition:
       0.2s opacity var(--ease),
@@ -44,7 +49,7 @@
     }
   }
 
-  .header__search {
+  .mx-header__search {
     position: absolute;
     inset-block-start: 2px;
     inset-inline-start: 0;
@@ -57,7 +62,6 @@
       display: flex;
       position: relative;
       inline-size: auto;
-      margin-inline-start: var(--spacing-m);
     }
 
     &[inert] {
@@ -67,23 +71,26 @@
         0.2s opacity var(--ease),
         0.2s visibility var(--ease);
     }
+
+    & input {
+      max-inline-size: 150px;
+    }
   }
 
   /**
    * Primary Header Stacked
    */
+  .mx-header__nav-inner {
+    display: flex;
+  }
 
-  .header__nav-right {
+  .mx-header__nav-right {
     margin-inline-start: auto;
   }
 }
 
 @media print {
-  .header .header__nav {
+  .mx-header .mx-header__nav {
     display: none;
   }
-
-  .header .section__content {
-    max-inline-size: 100%;
-  }
 }

package/src/Layout/Header/_toggles.css

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.layouts {
-  .header__toggles {
+  .mx-header__toggles {
     display: flex;
     gap: var(--toggle-gap, var(--spacing-xs));
     padding-inline-end: 2px;
@@ -14,7 +14,7 @@
       display: none;
     }
 
-    & .button--secondary {
+    & .mx-button--secondary {
       border-color: transparent;
     }
 

package/src/Layout/Header/header-stacked.twig

@@ -0,0 +1,49 @@
+{% set baseClass = 'mx-header' %}
+{% set classes = [
+  baseClass,
+  'mx-section',
+  'mx-section--s',
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+<header{{ attributes }}>
+  <div class="mx-header__inner">
+    {% if logo or title or description %}
+      <div class="mx-header__brand">
+        {{ logo }}
+        {% if title or description %}
+          <div class="mx-header__name">
+            {% if title %}<strong>{{ title }}</strong>{% endif %}
+            {{ description }}
+          </div>
+        {% endif %}
+      </div>
+    {% endif %}
+    {% if navigation or search %}
+      <div class="mx-header__toggles">
+        {% if search %}
+          <mx-global-toggle hideMenu><button aria-controls="primary-search" class="mx-button mx-button--icon-only mx-icon mx-icon--search" disabled>Open Search</button></mx-global-toggle>
+        {% endif %}
+        {% if navigation %}
+          <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--menu" disabled>Open Menu</button></mx-global-toggle>
+        {% endif %}
+      </div>
+    {% endif %}
+    {% if search %}
+    <div id="primary-search" class="mx-header__search global-nav-up-only" aria-label="Search">
+      {{ search }}
+    </div>
+    {% endif %}
+  </div>
+</header>
+{% if navigation or controls %}
+<div id="primary-nav" class="mx-header__nav mx-section global-nav-up-only" aria-label="Primary navigation">
+  <div class="mx-header__nav-inner">
+    {{ navigation }}
+    {% if controls %}
+    <div class="mx-header__nav-right">
+      {{ controls }}
+    </div>
+    {% endif %}
+  </div>
+</div>
+{% endif %}

package/src/Layout/Header/header.twig

@@ -1,24 +1,45 @@
-<div class="header section section--s">
-  <div class="flex">
-    {% block logo %}
-      {% include "@mixtape/Layout/Header/twig/logo.twig" %}
-    {% endblock %}
-    <div class="header__toggles">
-      <mx-global-toggle hideMenu><button aria-controls="primary-search" class="button button--icon-only icon icon--search" disabled>Open Search</button></mx-global-toggle>
-      <mx-global-toggle><button aria-controls="primary-nav" class="button button--primary button--icon-only icon icon--menu" disabled>Open Menu</button></mx-global-toggle>
+{% set baseClass = 'mx-header' %}
+{% set classes = [
+  baseClass,
+  'mx-section',
+  'mx-section--s',
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+<header{{ attributes }}>
+  <div class="mx-header__inner">
+    {% if logo or title or description %}
+      <div class="mx-header__brand">
+        {{ logo }}
+        {% if title or description %}
+          <div class="mx-header__name">
+            {% if title %}<strong>{{ title }}</strong>{% endif %}
+            {{ description }}
+          </div>
+        {% endif %}
+      </div>
+    {% endif %}
+    {% if navigation or search %}
+    <div class="mx-header__toggles">
+      {% if search %}
+        <mx-global-toggle hideMenu><button aria-controls="primary-search" class="mx-button mx-button--icon-only mx-icon mx-icon--search" disabled>Open Search</button></mx-global-toggle>
+      {% endif %}
+      {% if navigation %}
+        <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--menu" disabled>Open Menu</button></mx-global-toggle>
+      {% endif %}
     </div>
-    <div id="primary-nav" class="header__nav global-nav-up-only" aria-label="Menu">
-      {% block nav %}
-        {% include "@mixtape/Component/Navigation/navigation-dropdown.twig" %}
-      {% endblock %}
-    </div>
-    <div id="primary-search" class="header__search global-nav-up-only" aria-label="Search">
-      {% block search %}
-        <label for="global-search" class="visually-hidden">Search</label>
-        <span class="header__search-input input__text--icon icon icon--search">
-          <input id="global-search" type="text" placeholder="Search...">
-        </span>
-      {% endblock %}
+    {% endif %}
+    <div class="mx-header__main">
+      {% if navigation %}
+        <div id="primary-nav" class="mx-header__nav global-nav-up-only" aria-label="Primary navigation">
+          {{ navigation }}
+        </div>
+      {% endif %}
+      {% if search %}
+        <div id="primary-search" class="mx-header__search global-nav-up-only" aria-label="Search">
+          {{ search }}
+        </div>
+      {% endif %}
+      {{ controls }}
     </div>
   </div>
-</div>
+</header>

package/src/Layout/Header/twig/logo.twig

@@ -1,3 +1,3 @@
-<a class="logo {{ modifier_class }}" href="{{ link | default('#') }}">
-  <img alt="{{ sitename | default('Mixtape') }}" src="{{ logo_src | default('./mixtape-logo.png') }}" width="120" height="49" />
+<a class="mx-logo" href="{{ href }}">
+  <img alt="{{ alt }}" src="{{ src }}" width="{{ width }}" height="{{ height }}" />
 </a>

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

@@ -1,16 +1,52 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./masthead.twig"
+import Link from "../../Atom/Link/link.twig"
+import Icon from "../../Atom/Icon/icon.twig"
 import "./masthead.css"
+import {
+  Masthead as MastheadType,
+  MastheadModifier,
+} from "@pnx-mixtape/ids-shape"
+import { Page } from "../../../.storybook/decorators"
+import { Icons } from "../../enums"
 
-const meta: Meta<typeof Component> = {
-  title: "Layout/Header/Secondary",
-  tags: ["autodocs"],
+const meta: Meta<MastheadType> = {
+  tags: ["autodocs", "ids-mvp"],
   component: Component,
+  args: {
+    content: "A PreviousNext product",
+  },
+  decorators: [Page],
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<MastheadType>
 
-export const Secondary: Story = {
-  args: {},
+export const Masthead: Story = {}
+
+export const Light: Story = {
+  args: {
+    background: MastheadModifier.LIGHT,
+  },
+}
+
+export const WithLinks: Story = {
+  args: {
+    links: [
+      Link({
+        href: "#",
+        title: "Create account",
+        iconStart: Icon({
+          icon: Icons.USER,
+        }),
+      }),
+      Link({
+        href: "#",
+        title: "Log in",
+        iconStart: Icon({
+          icon: Icons.LOGIN,
+        }),
+      }),
+    ],
+  },
 }

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

@@ -1,32 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Layout/Header/Secondary Secondary smoke-test 1`] = `
-<div class="masthead section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
-  <div class="flex">
-    <span class="text--s">
-      Global message
-    </span>
-    <nav class="mx-nav masthead__nav nav--inline text--s"
-         aria-label="Navigation"
-    >
-      <ul>
-        <li>
-          <a href="#">
-            Secondary Title
-          </a>
-        </li>
-        <li>
-          <a href="#">
-            Secondary Title
-          </a>
-        </li>
-        <li>
-          <a href="#">
-            Secondary Title
-          </a>
-        </li>
-      </ul>
-    </nav>
+exports[`Layout/Masthead Light smoke-test 1`] = `
+<div class="mx-page">
+  <div class="mx-masthead mx-section__full mx-page mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--alt">
+    <div class="flex">
+      A PreviousNext product
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Layout/Masthead Masthead smoke-test 1`] = `
+<div class="mx-page">
+  <div class="mx-masthead mx-section__full mx-page mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--reverse">
+    <div class="flex">
+      A PreviousNext product
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Layout/Masthead WithLinks smoke-test 1`] = `
+<div class="mx-page">
+  <div class="mx-masthead mx-section__full mx-page mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--reverse">
+    <div class="flex">
+      A PreviousNext product
+      <nav class="mx-masthead__nav"
+           aria-label="Additional links"
+      >
+        <a href="#">
+          <span class="mx-icon mx-icon--user ">
+          </span>
+          <span>
+            Create account
+          </span>
+        </a>
+        <a href="#">
+          <span class="mx-icon mx-icon--login ">
+          </span>
+          <span>
+            Log in
+          </span>
+        </a>
+      </nav>
+    </div>
   </div>
 </div>
 `;

package/src/Layout/Masthead/masthead.css

@@ -3,34 +3,25 @@
  */
 
 @layer design-system.layouts {
-  .masthead {
+  .mx-masthead {
     & .flex {
       justify-content: space-between;
       align-items: center;
-      padding-block: var(--secondary-gap, var(--spacing-xxs));
-      padding-inline: 0;
-
-      &::after {
-        display: none;
-      }
     }
   }
 
-  .masthead__nav {
+  .mx-masthead__nav {
     display: none;
 
     @media (--global-nav-up) {
-      display: inline-block;
-    }
-
-    & ul {
-      margin: auto;
+      display: inline-flex;
+      gap: var(--gap);
     }
   }
 }
 
 @media print {
-  .masthead {
+  .mx-masthead {
     display: none;
   }
 }

package/src/Layout/Masthead/masthead.twig

@@ -1,10 +1,28 @@
-<div class="masthead section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
+{% 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',
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% if skipLinks %}
+  <nav class="mx-skip-links" aria-label="Skip to links">
+    {{ skipLinks }}
+  </nav>
+{% endif %}
+{% if content or links %}
+<div{{ attributes }}>
   <div class="flex">
-    {% block left %}
-      <span class="text--s">Global message</span>
-    {% endblock %}
-    {% block right %}
-      {% include "@mixtape/Component/Navigation/navigation.twig" with { 'modifier_class': 'masthead__nav nav--inline text--s' } %}
-    {% endblock %}
+    {{ content }}
+    {% if links  %}
+    <nav class="mx-masthead__nav" aria-label="Additional links">
+      {% for link in links %}
+        {{ link }}
+      {% endfor %}
+    </nav>
+    {% endif %}
   </div>
 </div>
+{% endif %}

package/src/Layout/Page/Page.tsx

@@ -6,9 +6,9 @@ type PageProps = PropsWithChildren & {
 }
 
 const Page = ({ children, header, footer }: PageProps): JSX.Element => (
-  <div className="page">
+  <div className="mx-page">
     {header}
-    <main className="section">{children}</main>
+    <main className="mx-section">{children}</main>
     {footer}
   </div>
 )