@pnx-mixtape/mxds 0.0.19 → 0.0.21

package/src/Component/HeroBanner/HeroBanner.stories.tsx

@@ -1,19 +1,27 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./HeroBanner"
 import Button from "../../Atom/Button/Button"
+import Heading from "../../Atom/Heading/Heading"
 import "./hero-banner.css"
 import { ButtonModifiers, HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { HeadingStyles, TextStyles } from "../../enums"
+import Text from "../../Atom/Text/Text"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
   args: {
-    title: "Always put your best foot forward.",
-    subtitle:
-      "Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.",
-  },
-  argTypes: {
-    headingLevel: { options: Object.values(HeadingTypes), control: "select" },
+    children: (
+      <>
+        <Heading as={HeadingTypes.ONE} modifier={HeadingStyles.HEADLINE}>
+          Always put your best foot forward.
+        </Heading>
+        <Text modifier={TextStyles.XL}>
+          Make the most of the opportunity by encouraging an action and keeping
+          your copy clear and concise.
+        </Text>
+      </>
+    ),
   },
 }
 
@@ -25,6 +33,17 @@ export const HeroBanner: Story = {}
 export const Hero: Story = {
   args: {
     hero: true,
-    children: <Button modifiers={[ButtonModifiers.DARK]}>Button</Button>,
+    children: (
+      <>
+        <Heading as={HeadingTypes.ONE} modifier={HeadingStyles.HEADLINE}>
+          Always put your best foot forward.
+        </Heading>
+        <Text modifier={TextStyles.XL}>
+          Make the most of the opportunity by encouraging an action and keeping
+          your copy clear and concise.
+        </Text>
+        <Button modifiers={[ButtonModifiers.DARK]}>Button</Button>
+      </>
+    ),
   },
 }

package/src/Component/HeroBanner/HeroBanner.tsx

@@ -1,31 +1,17 @@
-import {
-  ComponentPropsWithoutRef,
-  JSX,
-  PropsWithChildren,
-  ReactNode,
-} from "react"
+import { ComponentPropsWithoutRef, JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
 import Section from "../../Layout/Section/Section"
-import Heading from "../../Atom/Heading/Heading"
-import Text from "../../Atom/Text/Text"
-import { HeadingStyles, SectionStyles, TextStyles } from "../../enums"
-import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { SectionStyles } from "../../enums"
 
 type HeroBannerProps = PropsWithChildren &
   ComponentPropsWithoutRef<"div"> & {
-    title: string | ReactNode
-    subtitle?: string
     hero?: boolean
     center?: boolean
-    headingLevel?: HeadingTypes
   }
 // @todo expand to have new features
 const HeroBanner = ({
-  title,
   hero = false,
   center = false,
-  headingLevel = HeadingTypes.ONE,
-  subtitle,
   children,
   className,
   ...props
@@ -38,10 +24,6 @@ const HeroBanner = ({
       })}
       {...props}
     >
-      <Heading as={headingLevel} modifier={HeadingStyles.HEADLINE}>
-        {title}
-      </Heading>
-      {subtitle && <Text modifier={TextStyles.XL}>{subtitle}</Text>}
       {children}
     </div>
   </Section>

package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap

@@ -5,7 +5,33 @@ exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
   <div class="mx-page default">
     <div class="mx-hero-banner ">
       <div class="mx-hero-banner__inner">
-        <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
+        <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+          <h1>
+            Hero banner title
+          </h1>
+          <p class="mx-text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
+          <picture>
+            <img src="https://picsum.photos/id/56/558/418?grayscale"
+                 alt="Blurry bubbles"
+            >
+          </picture>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Component/HeroBanner Highlight smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-page default">
+    <div class="mx-hero-banner mx-hero-banner--hero mx-background--primary">
+      <div class="mx-hero-banner__inner">
+        <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
           <h1>
             Hero banner title
           </h1>
@@ -38,7 +64,7 @@ exports[`Component/HeroBanner WithLinkList smoke-test 1`] = `
   <div class="mx-page default">
     <div class="mx-hero-banner ">
       <div class="mx-hero-banner__inner">
-        <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
+        <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
           <h1>
             Hero banner title
           </h1>
@@ -46,7 +72,10 @@ exports[`Component/HeroBanner WithLinkList smoke-test 1`] = `
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
         </div>
-        <div class="mx-hero-banner__aside">
+        <div class="mx-hero-banner__aside mx-section--xl">
+          <h2 class=" mx-heading--m">
+            Popular links
+          </h2>
           <ul class="mx-link-list">
             <li>
               <a href="#">
@@ -82,3 +111,22 @@ exports[`Component/HeroBanner WithLinkList smoke-test 1`] = `
   </div>
 </div>
 `;
+
+exports[`Component/HeroBanner WithoutImage smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-page default">
+    <div class="mx-hero-banner ">
+      <div class="mx-hero-banner__inner">
+        <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+          <h1>
+            Hero banner title
+          </h1>
+          <p class="mx-text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/Component/HeroBanner/hero-banner.css

@@ -1,5 +1,5 @@
 /**
- * Page Title
+ * Hero Banner
  */
 
 @layer design-system.components {
@@ -8,7 +8,7 @@
     z-index: 1;
 
     &.mx-hero-banner--hero {
-      min-block-size: var(--hero-height, 400px);
+      min-block-size: var(--hero-height, 600px);
       place-content: center;
     }
 
@@ -31,14 +31,18 @@
       grid-template-areas: "content aside";
       grid-template-columns: var(--hero-columns, 50% 50%);
     }
+
+    &:where(:has(.mx-hero-banner__aside)) .mx-hero-banner__content {
+      padding-inline-end: var(--gap-xl);
+    }
   }
 
   .mx-hero-banner__content {
-    align-content: center;
+    align-self: var(--hero-align, center);
   }
 
   .mx-hero-banner__aside {
-    align-content: center;
+    align-self: var(--hero-align, center);
 
     &.mx-hero-banner__aside-image {
       overflow: hidden;

package/src/Component/HeroBanner/hero-banner.twig

@@ -20,7 +20,7 @@
 
 <div{{ attributes }}>
   <div class="mx-hero-banner__inner">
-    <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
+    <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
       {{ title }}
       {% if subtitle is not empty %}
         <p class="mx-text--lede">{{ subtitle }}</p>
@@ -29,7 +29,7 @@
       {{ link }}
     </div>
     {% if linkList is not empty %}
-      <div class="mx-hero-banner__aside">
+      <div class="mx-hero-banner__aside mx-section--xl">
         {{ linkList }}
       </div>
     {% elseif image is not empty %}

package/src/Component/HeroSearch/HeroSearch.stories.ts

@@ -0,0 +1,105 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import { Page } from "../../../.storybook/decorators"
+import Component from "./hero-search.twig"
+import "../HeroBanner/hero-banner.css"
+import {
+  HeroBannerModifier,
+  HeadingTypes,
+  HeroSearch as HeroSearchType,
+} from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
+
+// Deps.
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import LinkList from "../LinkList/link-list.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+import SearchForm from "../../Form/Search/search-form.twig"
+// css
+import "../LinkList/link-list.css"
+
+const meta: Meta<HeroSearchType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    subtitle:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    title: Heading({
+      title: "Hero banner title",
+      as: HeadingTypes.ONE,
+    }),
+    search: SearchForm({
+      action: "#search",
+      id: "search-keyword",
+    }),
+  },
+  argTypes: {
+    modifiers: {
+      options: Object.values(HeroBannerModifier),
+      control: "multi-select",
+    },
+  },
+  decorators: [Page],
+}
+
+export default meta
+type Story = StoryObj<HeroSearchType>
+
+export const HeroBanner: Story = {}
+
+export const Highlight: Story = {
+  args: {
+    highlight: true,
+    modifiers: [HeroBannerModifier.LIGHT],
+  },
+}
+
+export const WithLinkList: Story = {
+  args: {
+    link: null,
+    linkList: LinkList({
+      title: Heading({
+        title: "Popular searches",
+        as: HeadingTypes.TWO,
+        modifiers: [HeadingTypes.FOUR],
+      }),
+      items: [
+        Link({
+          title: "Link one",
+          href: "#",
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+        Link({
+          title: "Link two",
+          href: "#",
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+        Link({
+          title: "Link three",
+          href: "#",
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+        Link({
+          title: "Link four",
+          href: "#",
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+        Link({
+          title: "Link five",
+          href: "#",
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+      ],
+    }),
+  },
+}

package/src/Component/HeroSearch/HeroSearch.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from "@storybook/react-vite"
+import Component from "./HeroSearch"
+import Button from "../../Atom/Button/Button"
+import { ButtonModifiers, HeadingTypes } from "@pnx-mixtape/ids-shape"
+import Heading from "../../Atom/Heading/Heading"
+import { HeadingStyles, TextStyles } from "../../enums"
+import Text from "../../Atom/Text/Text"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    children: (
+      <>
+        <Heading as={HeadingTypes.ONE} modifier={HeadingStyles.HEADLINE}>
+          Always put your best foot forward.
+        </Heading>
+        <Text modifier={TextStyles.XL}>
+          Make the most of the opportunity by encouraging an action and keeping
+          your copy clear and concise.
+        </Text>
+      </>
+    ),
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const HeroSearch: Story = {}
+
+export const Hero: Story = {
+  args: {
+    hero: true,
+    children: (
+      <>
+        <Heading as={HeadingTypes.ONE} modifier={HeadingStyles.HEADLINE}>
+          Always put your best foot forward.
+        </Heading>
+        <Text modifier={TextStyles.XL}>
+          Make the most of the opportunity by encouraging an action and keeping
+          your copy clear and concise.
+        </Text>
+        <Button modifiers={[ButtonModifiers.DARK]}>Button</Button>
+      </>
+    ),
+  },
+}

package/src/Component/HeroSearch/HeroSearch.tsx

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef, JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+import Section from "../../Layout/Section/Section"
+import { SectionStyles } from "../../enums"
+
+type HeroBannerProps = PropsWithChildren &
+  ComponentPropsWithoutRef<"div"> & {
+    hero?: boolean
+    center?: boolean
+  }
+// @todo expand to have new features
+const HeroSearch = ({
+  hero = false,
+  center = false,
+  children,
+  className,
+  ...props
+}: HeroBannerProps): JSX.Element => (
+  <Section sizes={SectionStyles.XL} className={className} containing>
+    <div
+      className={classNames("mx-hero-banner", "mx-vertical-flow", {
+        "mx-hero-banner--hero": hero,
+        "mx-text--center": center,
+      })}
+      {...props}
+    >
+      {children}
+    </div>
+  </Section>
+)
+
+export default HeroSearch

package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/HeroSearch HeroBanner smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-page default">
+    <div class="mx-hero-banner mx-hero-search ">
+      <div class="mx-hero-banner__inner">
+        <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+          <h1>
+            Hero banner title
+          </h1>
+          <p class="mx-text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <form class="mx-form mx-form--inline-button"
+                role="search"
+                action="#search"
+          >
+            <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>
+  </div>
+</div>
+`;
+
+exports[`Component/HeroSearch Highlight smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-page default">
+    <div class="mx-hero-banner mx-hero-search mx-hero-banner--hero mx-background--primary">
+      <div class="mx-hero-banner__inner">
+        <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+          <h1>
+            Hero banner title
+          </h1>
+          <p class="mx-text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <form class="mx-form mx-form--inline-button"
+                role="search"
+                action="#search"
+          >
+            <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>
+  </div>
+</div>
+`;
+
+exports[`Component/HeroSearch WithLinkList smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-page default">
+    <div class="mx-hero-banner mx-hero-search ">
+      <div class="mx-hero-banner__inner">
+        <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+          <h1>
+            Hero banner title
+          </h1>
+          <p class="mx-text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <form class="mx-form mx-form--inline-button"
+                role="search"
+                action="#search"
+          >
+            <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 class="mx-hero-banner__aside mx-section--xl">
+          <h2 class=" mx-heading--m">
+            Popular searches
+          </h2>
+          <ul class="mx-link-list">
+            <li>
+              <a href="#">
+                <span>
+                  Link one
+                </span>
+                <span class="mx-icon mx-icon--chevron-right ">
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span>
+                  Link two
+                </span>
+                <span class="mx-icon mx-icon--chevron-right ">
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span>
+                  Link three
+                </span>
+                <span class="mx-icon mx-icon--chevron-right ">
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span>
+                  Link four
+                </span>
+                <span class="mx-icon mx-icon--chevron-right ">
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span>
+                  Link five
+                </span>
+                <span class="mx-icon mx-icon--chevron-right ">
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/HeroSearch Hero smoke-test 1`] = `
+<div class="mx-page mx-section--xl">
+  <div class="mx-hero-banner mx-vertical-flow mx-hero-banner--hero">
+    <h1 class="mx-headline"
+        id="always-put-your-best-"
+    >
+      Always put your best foot forward.
+    </h1>
+    <p class="mx-text--xl">
+      Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
+    </p>
+    <button class="mx-button mx-button--dark"
+            type="button"
+    >
+      Button
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Component/HeroSearch HeroSearch smoke-test 1`] = `
+<div class="mx-page mx-section--xl">
+  <div class="mx-hero-banner mx-vertical-flow">
+    <h1 class="mx-headline"
+        id="always-put-your-best-"
+    >
+      Always put your best foot forward.
+    </h1>
+    <p class="mx-text--xl">
+      Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
+    </p>
+  </div>
+</div>
+`;

package/src/Component/HeroSearch/hero-search.twig

@@ -0,0 +1,43 @@
+{% set baseClass = 'mx-hero-banner' %}
+{% set background = null %}
+{% for modifier in modifiers %}
+  {% if modifier == "dark" %}
+    {% set background = 'mx-background--reverse' %}
+  {% endif %}
+  {% if modifier == "off-white" %}
+    {% set background = 'mx-background--alt' %}
+  {% endif %}
+  {% if modifier == "light" %}
+    {% set background = 'mx-background--primary' %}
+  {% endif %}
+{% endfor %}
+{% set classes = [
+  baseClass,
+  'mx-hero-search',
+  highlight ? baseClass~'--hero' : null,
+  background ? background : null,
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+
+<div{{ attributes }}>
+  <div class="mx-hero-banner__inner">
+    <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+      {{ title }}
+      {% if subtitle is not empty %}
+        <p class="mx-text--lede">{{ subtitle }}</p>
+      {% endif %}
+      {{ content }}
+      {{ link }}
+      {{ search }}
+    </div>
+    {% if linkList is not empty %}
+      <div class="mx-hero-banner__aside mx-section--xl">
+        {{ linkList }}
+      </div>
+    {% elseif image is not empty %}
+      <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
+        {{ image }}
+      </div>
+    {% endif %}
+  </div>
+</div>

package/src/Component/InPageNavigation/InPageNavigation.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Component> = {
   component: Component,
   render: () => (
     <Sidebar before sidebar={<Component />}>
-      <div className="vertical-flow">
+      <div className="mx-vertical-flow">
         <Heading level={HeadingLevels.TWO}>Section 1</Heading>
         <Text>
           In publishing and graphic design, lorem ipsum is a placeholder text