@pnx-mixtape/mxds 0.0.6 → 0.0.8

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>
   )