@pnx-mixtape/mxds 0.0.11 → 0.0.13

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

@@ -1,25 +1,28 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./header.twig"
-import StackedComponent from "./header-stacked.twig"
-import Icon from "../../Atom/Icon/icon.twig"
-import Logo from "../Header/twig/logo.twig"
-import SearchForm from "../../Form/Search/search-form.twig"
-import InputText from "../../Form/TextInput/input-text.twig"
-import Button from "../../Atom/Button/button.twig"
-import Navigation from "../../Component/Navigation/navigation.twig"
 import "./_header.css"
 import "./_toggles.css"
 import "./Elements/GlobalToggle"
-import "../../Component/Navigation/Elements/Navigation"
-import {
-  ButtonTypes,
-  Header as HeaderType,
-  InputTypeTypes,
-} from "@pnx-mixtape/ids-shape"
+import { ButtonTypes, Header as HeaderType } from "@pnx-mixtape/ids-shape"
 import { Page } from "../../../.storybook/decorators"
 import { Icons } from "../../enums"
 
-const meta: Meta<HeaderType> = {
+// Deps.
+import Icon from "../../Atom/Icon/icon.twig"
+import Logo from "../Header/twig/logo.twig"
+import Button from "../../Atom/Button/button.twig"
+import Navigation from "../../Component/Navigation/navigation.twig"
+import SearchForm from "../../Form/Search/search-form.twig"
+// js.
+import "../../Component/Navigation/Elements/Navigation"
+// css.
+import "../../Component/Navigation/navigation.css"
+
+type MxHeaderType = HeaderType & {
+  stacked: boolean
+}
+
+const meta: Meta<MxHeaderType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
@@ -64,6 +67,7 @@ const meta: Meta<HeaderType> = {
     deepControls: { enabled: true },
   },
   argTypes: {
+    stacked: { control: "boolean" },
     title: { control: "text" },
     description: { control: "text" },
     // @ts-expect-error The controls follow the shape
@@ -75,7 +79,7 @@ const meta: Meta<HeaderType> = {
 }
 
 export default meta
-type Story = StoryObj<HeaderType>
+type Story = StoryObj<MxHeaderType>
 
 export const Header: Story = {}
 
@@ -90,21 +94,7 @@ export const Search: Story = {
   args: {
     search: SearchForm({
       action: "#search",
-      input: InputText({
-        id: "search-keyword",
-        type: InputTypeTypes.SEARCH,
-        name: "search-form",
-        placeholder: "Keywords...",
-        label: "Search by keywords",
-      }),
-      button: Button({
-        title: "Search",
-        iconOnly: true,
-        iconStart: Icon({
-          icon: Icons.SEARCH,
-        }),
-        as: ButtonTypes.SUBMIT,
-      }),
+      id: "search-keyword",
     }),
   },
 }
@@ -125,23 +115,10 @@ export const Controls: Story = {
 
 export const Stacked: Story = {
   args: {
+    stacked: true,
     search: SearchForm({
       action: "#search",
-      input: InputText({
-        id: "search-keyword",
-        type: InputTypeTypes.SEARCH,
-        name: "search-form",
-        placeholder: "Keywords...",
-        label: "Search by keywords",
-      }),
-      button: Button({
-        title: "Search",
-        iconOnly: true,
-        iconStart: Icon({
-          icon: Icons.SEARCH,
-        }),
-        as: ButtonTypes.SUBMIT,
-      }),
+      id: "search-keyword",
     }),
     controls: [
       Button({
@@ -248,5 +225,4 @@ export const Stacked: Story = {
       ],
     }),
   },
-  render: args => `${StackedComponent(args)}`,
 }

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

@@ -2,7 +2,7 @@
 
 exports[`Layout/Header Controls smoke-test 1`] = `
 <div class="mx-page">
-  <header class="mx-header mx-section mx-section--s">
+  <header class="mx-header mx-section__full mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -77,7 +77,7 @@ exports[`Layout/Header Controls smoke-test 1`] = `
 
 exports[`Layout/Header Header smoke-test 1`] = `
 <div class="mx-page">
-  <header class="mx-header mx-section mx-section--s">
+  <header class="mx-header mx-section__full mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -143,7 +143,7 @@ exports[`Layout/Header Header smoke-test 1`] = `
 
 exports[`Layout/Header Search smoke-test 1`] = `
 <div class="mx-page">
-  <header class="mx-header mx-section mx-section--s">
+  <header class="mx-header mx-section__full mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -228,7 +228,7 @@ exports[`Layout/Header Search smoke-test 1`] = `
             <button class="mx-button mx-button--icon-only"
                     type="submit"
             >
-              <span class="mx-icon mx-icon--search ">
+              <span class="mx-icon mx-icon--search">
               </span>
               <span class="sr-only">
                 Search
@@ -244,7 +244,7 @@ exports[`Layout/Header Search smoke-test 1`] = `
 
 exports[`Layout/Header Stacked smoke-test 1`] = `
 <div class="mx-page">
-  <header class="mx-header mx-section mx-section--s">
+  <header class="mx-header mx-section__full mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -273,38 +273,40 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
           </button>
         </mx-global-toggle>
       </div>
-      <div id="unique-0"
-           class="mx-header__search"
-           aria-label="Search"
-           role="region"
-      >
-        <form class="mx-form mx-form--inline-button"
-              role="search"
-              action="#search"
+      <div class="mx-header__main">
+        <div id="unique-0"
+             class="mx-header__search"
+             aria-label="Search"
+             role="region"
         >
-          <input class="mx-input__text "
-                 id="search-keyword"
-                 name="search-form"
-                 type="search"
-                 value
-                 aria-label="Search by keywords"
-                 placeholder="Keywords..."
-          >
-          <button class="mx-button mx-button--icon-only"
-                  type="submit"
+          <form class="mx-form mx-form--inline-button"
+                role="search"
+                action="#search"
           >
-            <span class="mx-icon mx-icon--search ">
-            </span>
-            <span class="sr-only">
-              Search
-            </span>
-          </button>
-        </form>
+            <input class="mx-input__text "
+                   id="search-keyword"
+                   name="search-form"
+                   type="search"
+                   value
+                   aria-label="Search by keywords"
+                   placeholder="Keywords..."
+            >
+            <button class="mx-button mx-button--icon-only"
+                    type="submit"
+            >
+              <span class="mx-icon mx-icon--search">
+              </span>
+              <span class="sr-only">
+                Search
+              </span>
+            </button>
+          </form>
+        </div>
       </div>
     </div>
   </header>
   <div id="unique-1"
-       class="mx-header__nav mx-section"
+       class="mx-header__nav mx-section__full mx-page"
        aria-label="Primary navigation"
        role="region"
   >
@@ -450,7 +452,7 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
 
 exports[`Layout/Header WithTitle smoke-test 1`] = `
 <div class="mx-page">
-  <header class="mx-header mx-section mx-section--s">
+  <header class="mx-header mx-section__full 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

@@ -7,6 +7,7 @@
     position: relative;
     display: grid;
     grid-template-columns: 1fr auto;
+    align-items: center;
   }
 
   .mx-header__brand {
@@ -51,6 +52,7 @@
 
   .mx-header__search {
     position: absolute;
+    z-index: 2;
     inset-block-start: 2px;
     inset-inline-start: 0;
     inline-size: 100%;
@@ -73,7 +75,9 @@
     }
 
     & input {
-      max-inline-size: 150px;
+      @media (--global-nav-up) {
+        max-inline-size: 150px;
+      }
     }
   }
 
@@ -81,11 +85,19 @@
    * Primary Header Stacked
    */
   .mx-header__nav-inner {
-    display: flex;
+    @media (--global-nav-up) {
+      display: flex;
+    }
   }
 
   .mx-header__nav-right {
-    margin-inline-start: auto;
+    margin-block: var(--spacing-m);
+
+    @media (--global-nav-up) {
+      margin-inline-start: auto;
+      margin-block: 0;
+      padding-block: 4px;
+    }
   }
 }
 

package/src/Layout/Header/header.twig

@@ -1,7 +1,8 @@
 {% set baseClass = 'mx-header' %}
 {% set classes = [
   baseClass,
-  'mx-section',
+  'mx-section__full',
+  'mx-page',
   'mx-section--s',
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
@@ -29,7 +30,7 @@
     </div>
     {% endif %}
     <div class="mx-header__main">
-      {% if navigation is not empty %}
+      {% if navigation is not empty and not stacked %}
         <div id="primary-nav" class="mx-header__nav global-nav-up-only" aria-label="Primary navigation">
           {{ navigation }}
         </div>
@@ -39,9 +40,25 @@
           {{ search }}
         </div>
       {% endif %}
-      {% for control in controls %}
-        {{ control }}
-      {% endfor %}
+      {% if not stacked %}
+        {% for control in controls %}
+          {{ control }}
+        {% endfor %}
+      {% endif %}
     </div>
   </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 class="mx-header__nav-inner">
+      {{ navigation }}
+      {% if controls is not empty %}
+        <div class="mx-header__nav-right">
+          {% for control in controls %}
+            {{ control }}
+          {% endfor %}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+{% endif %}

package/src/Layout/Sidebar/Sidebar.stories.ts

@@ -6,11 +6,9 @@ import { Page } from "../../../.storybook/decorators"
 
 type SidebarArgs = {
   content?: string | HTMLElement
-  contentClass?: string
   order?: SidebarOrder
   before?: boolean
   sidebarContent?: string | HTMLElement
-  sidebarClass?: string
 }
 
 const meta: Meta<SidebarArgs> = {

package/src/Layout/Sidebar/sidebar.css

@@ -9,14 +9,21 @@
     }
 
     &:where(:has(> aside)) {
-      @media (--medium-up) {
-        display: grid;
-        grid-template-columns: var(--container-max-width, 76ch) auto;
-        gap: var(--sidebar-gap, var(--gap));
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--sidebar-gap, var(--gap));
+      justify-content: space-between;
 
-        @media (--large-up) {
-          --sidebar-gap: 18ch;
-        }
+      & > aside {
+        flex-grow: 1;
+        max-inline-size: var(--sidebar-width, 24ch);
+      }
+
+      & > section {
+        flex-basis: 0;
+        flex-grow: 999;
+        min-inline-size: var(--content-min, 50%);
+        max-inline-size: var(--container-max-width, 76ch);
       }
 
       &.mx-grid--sidebar-rev {
@@ -44,16 +51,6 @@
           }
         }
       }
-
-      &:is(.mx-grid--sidebar-rev, .mx-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);
     }
   }
 }

package/src/Layout/Sidebar/sidebar.twig

@@ -4,10 +4,12 @@
   order ? "mx-grid--"~order : null,
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set sidebarAttributes = (sidebarAttributes ?? create_attribute()) %}
+{% set contentAttributes = (contentAttributes ?? create_attribute()) %}
 
 {% if sidebarContent is not empty %}
   {% set sidebar %}
-    <aside{% if sidebarClass is not empty %} class="{{ sidebarClass }}"{% endif %}>
+    <aside{{ sidebarAttributes }}>
       {{ sidebarContent }}
     </aside>
   {% endset %}
@@ -17,7 +19,7 @@
   {% if sidebar is not empty and before %}
     {{ sidebar }}
   {% endif %}
-  <section{% if contentClass is not empty %} class="{{ contentClass }}"{% endif %}>
+  <section{{ contentAttributes }}>
     {{ content }}
   </section>
   {% if sidebar is not empty and not before %}

package/dist/build/steps.entry.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=steps.entry.js.map

package/dist/build/steps.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"steps.entry.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -1,51 +0,0 @@
-{% 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 is not empty or title is not empty or description is not empty %}
-      <div class="mx-header__brand">
-        <a class="mx-logo" href="/">{{ logo }}</a>
-        {% if title is not empty or description is not empty %}
-          <div class="mx-header__name">
-            {% if title is not empty %}<strong>{{ title }}</strong>{% endif %}
-            {{ description }}
-          </div>
-        {% endif %}
-      </div>
-    {% endif %}
-    {% if navigation is not empty or search is not empty %}
-      <div class="mx-header__toggles">
-        {% if search is not empty %}
-          <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 is not empty %}
-          <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 is not empty %}
-    <div id="primary-search" class="mx-header__search global-nav-up-only" aria-label="Search">
-      {{ search }}
-    </div>
-    {% endif %}
-  </div>
-</header>
-{% if navigation is not empty or controls is not empty %}
-<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 is not empty %}
-    <div class="mx-header__nav-right">
-      {% for control in controls %}
-        {{ control }}
-      {% endfor %}
-    </div>
-    {% endif %}
-  </div>
-</div>
-{% endif %}