@pnx-mixtape/mxds 0.0.5 → 0.0.7

package/src/Layout/Grid/grid.css

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.layouts {
-  .grid {
+  .mx-grid {
     --grid-repeat: auto-fit;
     --grid-min: 20ch;
 
@@ -25,85 +25,85 @@
     }
   }
 
-  [class*="grid--cols-"] {
+  [class*="mx-grid--cols-"] {
     --grid-repeat: 1;
   }
 
-  .grid--cols-xs-2 {
+  .mx-grid--cols-xs-2 {
     @media (--x-small-up) {
       --grid-repeat: 2;
     }
   }
 
-  .grid--cols-sm-2 {
+  .mx-grid--cols-sm-2 {
     @media (--small-up) {
       --grid-repeat: 2;
     }
   }
 
-  .grid--cols-md-2 {
+  .mx-grid--cols-md-2 {
     @media (--medium-up) {
       --grid-repeat: 2;
     }
   }
 
-  .grid--cols-lg-2 {
+  .mx-grid--cols-lg-2 {
     @media (--large-up) {
       --grid-repeat: 2;
     }
   }
 
-  .grid--cols-xl-2 {
+  .mx-grid--cols-xl-2 {
     @media (--x-large-up) {
       --grid-repeat: 2;
     }
   }
 
-  .grid--cols-md-3 {
+  .mx-grid--cols-md-3 {
     @media (--medium-up) {
       --grid-repeat: 3;
     }
   }
 
-  .grid--cols-lg-3 {
+  .mx-grid--cols-lg-3 {
     @media (--large-up) {
       --grid-repeat: 3;
     }
   }
 
-  .grid--cols-xl-3 {
+  .mx-grid--cols-xl-3 {
     @media (--x-large-up) {
       --grid-repeat: 3;
     }
   }
 
-  .grid--cols-md-4 {
+  .mx-grid--cols-md-4 {
     @media (--medium-up) {
       --grid-repeat: 4;
     }
   }
 
-  .grid--cols-lg-4 {
+  .mx-grid--cols-lg-4 {
     @media (--large-up) {
       --grid-repeat: 4;
     }
   }
 
-  .grid--cols-xl-4 {
+  .mx-grid--cols-xl-4 {
     @media (--x-large-up) {
       --grid-repeat: 4;
     }
   }
 
-  .grid--collapse {
+  .mx-grid--collapse {
     --grid-gap: 0;
   }
 
-  .grid--collapse-cols {
+  .mx-grid--collapse-cols {
     grid-column-gap: 0;
   }
 
-  .grid--collapse-rows {
+  .mx-grid--collapse-rows {
     grid-row-gap: 0;
   }
 }
@@ -112,71 +112,71 @@
  * Grid items.
  */
 @layer design-system.layouts {
-  [class*="grid-item__span-"] {
+  [class*="mx-grid-item__span-"] {
     grid-column: auto / var(--grid-span, auto);
   }
 
-  .grid-item__span-xs-2 {
+  .mx-grid-item__span-xs-2 {
     @media (--x-small-up) {
       --grid-span: span 2;
     }
   }
 
-  .grid-item__span-sm-2 {
+  .mx-grid-item__span-sm-2 {
     @media (--small-up) {
       --grid-span: span 2;
     }
   }
 
-  .grid-item__span-md-2 {
+  .mx-grid-item__span-md-2 {
     @media (--medium-up) {
       --grid-span: span 2;
     }
   }
 
-  .grid-item__span-lg-2 {
+  .mx-grid-item__span-lg-2 {
     @media (--large-up) {
       --grid-span: span 2;
     }
   }
 
-  .grid-item__span-xl-2 {
+  .mx-grid-item__span-xl-2 {
     @media (--x-large-up) {
       --grid-span: span 2;
     }
   }
 
-  .grid-item__span-md-3 {
+  .mx-grid-item__span-md-3 {
     @media (--medium-up) {
       --grid-span: span 3;
     }
   }
 
-  .grid-item__span-lg-3 {
+  .mx-grid-item__span-lg-3 {
     @media (--large-up) {
       --grid-span: span 3;
     }
   }
 
-  .grid-item__span-xl-3 {
+  .mx-grid-item__span-xl-3 {
     @media (--x-large-up) {
       --grid-span: span 3;
     }
   }
 
-  .grid-item__span-md-4 {
+  .mx-grid-item__span-md-4 {
     @media (--medium-up) {
       --grid-span: span 4;
     }
   }
 
-  .grid-item__span-lg-4 {
+  .mx-grid-item__span-lg-4 {
     @media (--large-up) {
       --grid-span: span 4;
     }
   }
 
-  .grid-item__span-xl-4 {
+  .mx-grid-item__span-xl-4 {
     @media (--x-large-up) {
       --grid-span: span 4;
     }
@@ -184,7 +184,7 @@
 }
 
 @media print {
-  .grid {
+  .mx-grid {
     display: block;
   }
 }

package/src/Layout/Grid/grid.twig

@@ -1,10 +1,13 @@
-{% set baseClass = 'grid' %}
+{% set baseClass = 'mx-grid' %}
 {% set classes = [baseClass] %}
 {% 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")

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

@@ -1,18 +1,253 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./header.twig"
-import "./_toggles.css"
+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 { Page } from "../../../.storybook/decorators"
+import { Icons } from "../../enums"
 
-const meta: Meta<typeof Component> = {
-  title: "Layout/Header/Primary",
-  tags: ["autodocs"],
+const meta: Meta<HeaderType> = {
+  tags: ["autodocs", "ids-mvp"],
   component: Component,
+  args: {
+    logo: Logo({
+      href: "#",
+      src: "./mixtape-logo.png",
+      alt: "Mixtape",
+      width: "120",
+    }),
+    navigation: Navigation({
+      id: "header-story",
+      type: "dropdown",
+      title: "Primary navigation",
+      items: [
+        {
+          link: {
+            title: "News",
+            href: "#",
+          },
+        },
+        {
+          link: {
+            title: "About us",
+            href: "#",
+          },
+        },
+        {
+          link: {
+            title: "Contact",
+            href: "#",
+          },
+        },
+        {
+          link: {
+            title: "Resources",
+            href: "#",
+          },
+        },
+      ],
+    }),
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  argTypes: {
+    title: { control: "text" },
+    description: { control: "text" },
+    // @ts-expect-error The controls follow the shape
+    "logo.href": { control: "text" },
+    "logo.image.src": { control: "text" },
+    "logo.image.alt": { control: "text" },
+  },
+  decorators: [Page],
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<HeaderType>
+
+export const Header: Story = {}
+
+export const WithTitle: Story = {
+  args: {
+    title: "Design System",
+    description: "A PreviousNext Product",
+  },
+}
+
+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,
+      }),
+    }),
+  },
+}
+
+export const Controls: Story = {
+  args: {
+    controls: [
+      Button({
+        as: ButtonTypes.BUTTON,
+        title: "Translate",
+        iconEnd: Icon({
+          icon: Icons.CHEVRON_DOWN,
+        }),
+      }),
+    ],
+  },
+}
 
-export const Primary: Story = {
-  args: {},
+export const Stacked: 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,
+      }),
+    }),
+    controls: [
+      Button({
+        as: ButtonTypes.BUTTON,
+        title: "Translate",
+        iconEnd: Icon({
+          icon: Icons.CHEVRON_DOWN,
+        }),
+      }),
+    ],
+    navigation: Navigation({
+      id: "header-stacked-story",
+      type: "mega",
+      title: "Primary navigation",
+      items: [
+        {
+          link: {
+            title: "News",
+            href: "#",
+            current: true,
+          },
+        },
+        {
+          link: {
+            title: "About us",
+            href: "#",
+          },
+          items: [
+            {
+              link: {
+                title: "Who",
+                href: "#",
+                current: true,
+              },
+              items: [
+                {
+                  link: {
+                    title: "How come?",
+                    href: "#",
+                    current: true,
+                  },
+                },
+                {
+                  link: {
+                    title: "Why not?",
+                    href: "#",
+                  },
+                },
+                {
+                  link: {
+                    title: "What for?",
+                    href: "#",
+                  },
+                },
+              ],
+            },
+            {
+              link: {
+                title: "What",
+                href: "#",
+              },
+            },
+            {
+              link: {
+                title: "Why",
+                href: "#",
+              },
+            },
+          ],
+        },
+        {
+          link: {
+            title: "Contact",
+            href: "#",
+          },
+          items: [
+            {
+              link: {
+                title: "How",
+                href: "#",
+                current: true,
+              },
+            },
+            {
+              link: {
+                title: "Where",
+                href: "#",
+              },
+            },
+            {
+              link: {
+                title: "When",
+                href: "#",
+              },
+            },
+          ],
+        },
+        {
+          link: {
+            title: "Resources",
+            href: "#",
+          },
+        },
+      ],
+    }),
+  },
+  render: args => `${StackedComponent(args)}`,
 }

package/src/Layout/Header/Header.tsx

@@ -5,7 +5,8 @@ import GlobalToggle from "./Components/GlobalToggle"
 import NavigationDropdown from "../../Component/Navigation/Dropdown"
 import useToggle from "../../Utility/Hooks/useToggle"
 import useMediaQuery from "../../Utility/Hooks/useMediaQuery"
-import { Icons, SectionStyles, SectionTags } from "../../enums.js"
+import { Icons, SectionStyles } from "../../enums.js"
+import { SectionTypes } from "@pnx-mixtape/ids-shape"
 import { NavigationItem } from "../../Component/Navigation/Navigation"
 
 type PrimaryHeaderProps = PropsWithChildren & {
@@ -30,16 +31,16 @@ const Header = ({
 
   return (
     <Section
-      as={SectionTags.HEADER}
+      as={SectionTypes.HEADER}
       sizes={size}
-      className={classNames("global__primary", className)}
+      className={classNames("mx-header", className)}
       containing
     >
-      <div className="flex">
-        {logo}
+      <div className="mx-header__inner">
+        <div className="mx-header__brand">{logo}</div>
 
         {isMobile === true && (
-          <div className="global__toggles">
+          <div className="mx-header__toggles">
             <GlobalToggle
               toggleId={id}
               icon={Icons.MENU}
@@ -50,21 +51,23 @@ const Header = ({
           </div>
         )}
 
-        <div
-          id={id}
-          className="global__primary__nav"
-          // @ts-expect-error inert is allowed.
-          inert={!on && isMobile ? "" : null}
-        >
-          <NavigationDropdown
-            title="Primary Navigation"
-            items={navigationItems}
-            mediaQuery={mediaQuery}
+        <div className="mx-header__main">
+          <div
             id={id}
-          ></NavigationDropdown>
-        </div>
+            className="mx-header__nav"
+            // @ts-expect-error inert is allowed.
+            inert={!on && isMobile ? "" : null}
+          >
+            <NavigationDropdown
+              title="Primary Navigation"
+              items={navigationItems}
+              mediaQuery={mediaQuery}
+              id={id}
+            ></NavigationDropdown>
+          </div>
 
-        {children}
+          {children}
+        </div>
       </div>
     </Section>
   )