@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.1

package/src/Component/HeroBanner/README.md

@@ -0,0 +1,234 @@
+# HeroBanner
+
+A page-topping banner used to display the page title, a short lead-in, and optional supporting content (image, link list, call-to-action). Supports an enlarged "hero" variant for home and campaign pages, four background colour options, and a side aside for either an image or a LinkList.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Component/HeroBanner/hero-banner.css";
+```
+
+---
+
+## Twig
+
+```twig
+{% include '@mixtape/Component/HeroBanner/hero-banner.twig' with {
+  title: heading_component,
+  subtitle: 'A short lead-in paragraph.',
+  content: wysiwyg_content,
+  link: link_or_button_component,
+  image: image_component,
+  linkList: link_list_component,
+  highlight: false,
+  modifiers: ['white'],
+} %}
+```
+
+**hero-banner.twig props** (`HeroBanner` type from `ids-shape`, extends `WayfindingBlock`):
+
+| Prop        | Type                     | Required | Description                                                             |
+| ----------- | ------------------------ | -------- | ----------------------------------------------------------------------- |
+| `title`     | `Heading`                | yes      | Heading component — should render an `<h1>` when used as the page title |
+| `subtitle`  | `string` / `WysiwygText` | no       | Optional lede-styled paragraph shown below the title                    |
+| `content`   | `WysiwygText`            | no       | Optional rich-text body content                                         |
+| `link`      | `Link` \| `Button`       | no       | Optional call-to-action                                                 |
+| `image`     | `Image`                  | no       | Optional aside image. Ignored when `linkList` is also provided          |
+| `linkList`  | `LinkList`               | no       | Optional aside `LinkList`. Takes precedence over `image`                |
+| `highlight` | `boolean`                | no       | Renders the enlarged `--hero` variant. Default `false`                  |
+| `modifiers` | `HeroBannerModifier[]`   | no       | Background colour modifiers. Default `[WHITE]` (no class)               |
+
+Note: `image` and `linkList` cannot be used together — the template renders `linkList` if present, otherwise `image`.
+
+---
+
+## HTML
+
+Minimal standard banner:
+
+```html
+<section class="mx-section--xl">
+  <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">A short lead-in paragraph.</p>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+With an image aside:
+
+```html
+<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">Lead-in paragraph.</p>
+    </div>
+    <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
+      <picture>
+        <img src="/hero.jpg" alt="Description" />
+      </picture>
+    </div>
+  </div>
+</div>
+```
+
+With a LinkList aside (no image):
+
+```html
+<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>
+    </div>
+    <div class="mx-hero-banner__aside mx-section--xl">
+      <h2 class="mx-heading--m">Popular links</h2>
+      <ul class="mx-link-list">
+        <!-- ... -->
+      </ul>
+    </div>
+  </div>
+</div>
+```
+
+Highlight (larger) variant with background:
+
+```html
+<div class="mx-hero-banner mx-hero-banner--hero mx-background--primary">
+  <div class="mx-hero-banner__inner">
+    <!-- ... -->
+  </div>
+</div>
+```
+
+---
+
+## React
+
+`HeroBanner` renders a wrapping `Section` (at `SectionModifiers.XL`) with a flex-vertical container. Content is passed as children — typically a `Heading`, a lede-styled `Text`, and optionally a `Button` or `Link`.
+
+```tsx
+import { HeroBanner, Heading, Text, Button } from "@pnx-mixtape/mxds/react"
+import { HeadingStyles, TextStyles } from "@pnx-mixtape/mxds/src/enums"
+import { HeadingTypes, ButtonModifiers } from "@pnx-mixtape/ids-shape"
+
+// Standard hero banner
+<HeroBanner>
+  <Heading as={HeadingTypes.ONE}>
+    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>
+</HeroBanner>
+
+// Enlarged "hero" variant with a call to action
+<HeroBanner hero>
+  <Heading as={HeadingTypes.ONE} style={[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>
+</HeroBanner>
+
+// Centre-aligned text
+<HeroBanner center>
+  <Heading as={HeadingTypes.ONE}>
+    Centred headline
+  </Heading>
+</HeroBanner>
+```
+
+**`HeroBanner` props:**
+
+| Prop        | Type        | Default | Description                                                                                                                                                                      |
+| ----------- | ----------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `hero`      | `boolean`   | `false` | Applies the enlarged `--hero` variant. Gives the banner a minimum block size (`600px` by default) and vertically centres content. Typically reserved for home or campaign pages. |
+| `center`    | `boolean`   | `false` | Centre-aligns the banner's text content (`mx-text--center`).                                                                                                                     |
+| `className` | `string`    | —       | Extra class passed to the outer wrapping `Section`.                                                                                                                              |
+| `children`  | `ReactNode` | —       | Banner content — normally a `Heading`, `Text`, and optional action.                                                                                                              |
+
+---
+
+### React ⇄ Twig parity
+
+The Twig template offers features the React component does not yet expose:
+
+| Feature              | React | Twig                                   | Notes                                                                                                          |
+| -------------------- | ----- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `hero` / `center`    | ✅    | ✅                                     | Aligned                                                                                                        |
+| Background modifiers | ❌    | ✅ (`modifiers: HeroBannerModifier[]`) | Use a wrapping element with `mx-background--*` in React, or compose your own banner                            |
+| Aside image          | ❌    | ✅ (`image`)                           | Render the `<div class="mx-hero-banner__aside mx-hero-banner__aside-image">` block manually in React if needed |
+| Aside link list      | ❌    | ✅ (`linkList`)                        | Same — author the aside markup directly until the prop ships                                                   |
+
+Track this in P2; until then, prefer the Twig template for hero banners that need an aside or background colour.
+
+## Modifiers (`HeroBannerModifier` enum from `ids-shape`)
+
+The enum controls the banner background colour. `WHITE` is the default and adds no class.
+
+| `HeroBannerModifier` value | String        | Maps to                  | Appearance                  |
+| -------------------------- | ------------- | ------------------------ | --------------------------- |
+| `WHITE`                    | `"white"`     | — (no class)             | Default page background     |
+| `GREY`                     | `"off-white"` | `mx-background--alt`     | Subtle off-white panel      |
+| `LIGHT`                    | `"light"`     | `mx-background--primary` | Brand primary background    |
+| `DARK`                     | `"dark"`      | `mx-background--reverse` | Dark background, light text |
+
+The React component does **not** currently expose these modifiers — use the Twig template (or apply the background class manually on the outer element) when you need a coloured banner.
+
+---
+
+## Highlight / hero variant
+
+| Context | How to enable                                    |
+| ------- | ------------------------------------------------ |
+| React   | `<HeroBanner hero>`                              |
+| HTML    | add `mx-hero-banner--hero` to the banner `<div>` |
+| Twig    | `highlight: true`                                |
+
+This sets a minimum block size (default `600px`, tunable via `--hero-height`) and vertically centres content. Reserved for home and campaign pages.
+
+---
+
+## Layout behaviour
+
+`mx-hero-banner__inner` uses CSS grid:
+
+- Below the `--large-up` breakpoint: content and aside stack vertically (content above aside).
+- At `--large-up` and above: two columns, `50% / 50%` by default (tunable via `--hero-columns`).
+- When an aside is present, the content column gets `padding-inline-end: var(--gap-xl)` to create visual separation.
+- Headings, h2s and paragraphs inside are width-capped to `var(--container-max-width-narrow)` and use `text-wrap: balance` for nicer line breaks.
+- `h1` inside the banner uses `overflow-wrap: anywhere` to prevent very long words overflowing.
+
+---
+
+## Accessibility
+
+- The banner is a plain `<div>` — it does not impose a landmark role. Wrap or place within an appropriate landmark (`<main>`, `<header>`) as the surrounding page requires.
+- The title should be a single `<h1>` when the banner is used at the top of a page (this is the default expected use).
+- When using the `DARK` background modifier, ensure any CTAs inside use an appropriate contrasting variant (e.g. `ButtonModifiers.DARK` / light button style) so they remain visible.
+- Image asides: always provide a meaningful `alt` on the `<img>`. Use an empty `alt=""` when the image is decorative.
+- The component contains no interactive behaviour of its own — keyboard/screen reader behaviour is determined entirely by the children you pass (heading, link, button, search form, etc.).
+
+---
+
+## Customisation via CSS custom properties
+
+```css
+.mx-hero-banner {
+  --hero-height: 600px; /* min-block-size of the --hero variant */
+  --hero-columns: 50% 50%; /* grid columns at --large-up */
+  --hero-align: center; /* align-self for content + aside (start | center | end) */
+  --hero-image-radius: var(--border-radius); /* border-radius on the image aside */
+}
+```
+
+---
+
+→ Used in context: `mockups/ArticleListingPage.stories.ts:7`

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

@@ -28,13 +28,13 @@ exports[`Highlight 1`] = `
 <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>
+        
+<h1 class="mx-headline">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>
             
         
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   
   <span>Find out more</span>
     
@@ -70,8 +70,8 @@ exports[`With Link List 1`] = `
 <h2 class="mx-heading--m">Popular links</h2>
 
 <ul class="mx-link-list">
-      <li>
-<a href="#">
+  
+<li><a href="#">
   
   <span>Link one</span>
     
@@ -79,8 +79,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-      <li>
-<a href="#">
+<li><a href="#">
   
   <span>Link two</span>
     
@@ -88,8 +87,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-      <li>
-<a href="#">
+<li><a href="#">
   
   <span>Link three</span>
     
@@ -97,7 +95,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-  </ul>
+</ul>
 
       </div>
       </div>

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

@@ -1,5 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Hero 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[`Hero Banner 1`] = `"<div class="mx-page mx-hero-banner"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p></div></div></div>"`;
 
-exports[`Hero Banner 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>"`;
+exports[`Highlight 1`] = `"<div class="mx-page mx-hero-banner mx-background--primary mx-hero-banner--hero"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="mx-headline" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">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 class="mx-hero-banner__aside mx-section--xl"><img alt="Blurry bubbles" src="https://picsum.photos/id/56/558/418?grayscale"></div></div></div>"`;
+
+exports[`With Link List 1`] = `"<div class="mx-page mx-hero-banner"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p></div><div class="mx-hero-banner__aside mx-section--xl"><h2 class="mx-heading--m" id="popular-links">Popular links</h2><ul class="mx-link-list"><li><a href="#1" class="mx-link">Page link #1<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#2" class="mx-link">Page link #2<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#3" class="mx-link">Page link #3<span class="mx-icon mx-icon--chevron-right"></span></a></li></ul></div></div></div>"`;

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

@@ -3,6 +3,7 @@
  */
 
 @layer design-system.components {
+  /* @public --hero-height --hero-columns --hero-align --hero-image-radius */
   .mx-hero-banner {
     position: relative;
     z-index: 1;
@@ -39,6 +40,10 @@
 
   .mx-hero-banner__content {
     align-self: var(--hero-align, center);
+
+    & search {
+      inline-size: min(100%, var(--container-max-width-narrow));
+    }
   }
 
   .mx-hero-banner__aside {

package/src/Component/HeroSearch/HeroSearch.figma.ts

@@ -0,0 +1,57 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=125-152
+// source=src/Component/HeroSearch/HeroSearch.tsx
+// component=HeroSearch
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const highlight = instance.getBoolean("Highlight")
+const modifier = instance.getEnum("Modifier", {
+  White: null,
+  Dark: "HeroBannerModifier.DARK",
+  Light: "HeroBannerModifier.LIGHT",
+  GreyOffWhite: "HeroBannerModifier.GREY",
+})
+const hasImg = instance.getBoolean("HasImg")
+
+const content = instance.getSlot("Content")
+const search = instance.getSlot("Search")
+const aside = instance.getSlot("Aside")
+
+const highlightProp = highlight ? " highlight" : ""
+const modifierProp = modifier ? ` modifier={${modifier}}` : ""
+const hasImgProp = hasImg ? " hasImg" : ""
+// `aside` is genuinely optional in real code (`{aside && <HeroBannerAside>...}`), but
+// that can't be honestly conditionalized here: `getSlot()` always returns at least one
+// ResultSection representing the Aside SLOT frame itself, even when nothing has been
+// appended inside it — there is no length/emptiness check that distinguishes "designer
+// left this slot untouched" from "designer added real content", so `aside` is always
+// included. An untouched Aside slot resolves to an empty wrapper element (harmless,
+// but not the same as the prop being omitted entirely as real code's `aside &&` would
+// do) — a Figma-representation limitation, not a code gap.
+//
+// IMPORTANT: `aside` must be embedded via a `figma.code`-tagged template, not a plain
+// JS template literal — a slot's raw ResultSection[] only serializes correctly to JSX
+// inside a figma.code tag. A plain `` `aside={${aside}}` `` stringifies it via default
+// toString() and produces literal "[object Object]" in the exported code (a real bug
+// caught after publish, not before — get_code_connect_map is the only way to see the
+// fully-resolved snippet, parse/tsc can't catch this).
+const asideProp = figma.code` aside={${aside}}`
+
+// HeroSearch.tsx is a real composing wrapper, not a thin re-export: `children` and
+// `search` both render inside ONE internal <HeroBannerContent>, and `aside` (when
+// present) inside ONE internal, conditionally-rendered <HeroBannerAside hasImg=.../> —
+// consumers never write HeroBannerContent/HeroBannerAside themselves through this
+// component. Same `Highlight`/`Modifier` composition-limitation note as HeroBanner
+// applies here too (dark/reverse variants don't auto-recolour nested text).
+export default {
+  example: figma.code`<HeroSearch${highlightProp}${modifierProp}${hasImgProp} search={${search}}${asideProp}>${content}</HeroSearch>`,
+  imports: [
+    'import { HeroSearch } from "@pnx-mixtape/mxds/react"',
+    'import { HeroBannerModifier } from "@pnx-mixtape/ids-shape"',
+  ],
+  id: "hero-search",
+  metadata: {
+    nestable: true,
+  },
+}

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

@@ -6,7 +6,7 @@ import {
   HeadingTypes,
   HeroSearch as HeroSearchType,
 } from "@pnx-mixtape/ids-shape"
-import HeroBanner from "../HeroBanner/HeroBanner.stories"
+import HeroBannerMeta from "../HeroBanner/HeroBanner.stories"
 import { Icons } from "../../enums"
 
 // Deps.
@@ -17,6 +17,7 @@ import Icon from "../../Atom/Icon/icon.twig"
 import SearchForm from "../../Form/Search/search-form.twig"
 // css
 import "../LinkList/link-list.css"
+import { modes } from "../../../.storybook/modes"
 
 /**
  * The Hero Search component extends the [HeroBanner](/?path=/docs/component-herobanner--docs) with a search form.
@@ -38,7 +39,7 @@ const meta: Meta<HeroSearchType> = {
     modifiers: [HeroBannerModifier.WHITE],
   },
   argTypes: {
-    ...HeroBanner.argTypes,
+    ...HeroBannerMeta.argTypes,
     search: {
       description: "The [SearchForm](/?path=/docs/form-search--docs) component.",
       control: "text",
@@ -51,6 +52,14 @@ const meta: Meta<HeroSearchType> = {
       },
     },
   },
+  parameters: {
+    chromatic: {
+      modes: {
+        mobile: modes["xs"],
+        desktop: modes["xl"],
+      },
+    },
+  },
 }
 
 export default meta
@@ -84,6 +93,7 @@ export const WithLinkList: Story = {
         Link({
           title: "Link one",
           href: "#",
+          listItem: true,
           iconEnd: Icon({
             icon: Icons.CHEVRON_RIGHT,
           }),
@@ -91,6 +101,7 @@ export const WithLinkList: Story = {
         Link({
           title: "Link two",
           href: "#",
+          listItem: true,
           iconEnd: Icon({
             icon: Icons.CHEVRON_RIGHT,
           }),
@@ -98,6 +109,7 @@ export const WithLinkList: Story = {
         Link({
           title: "Link three",
           href: "#",
+          listItem: true,
           iconEnd: Icon({
             icon: Icons.CHEVRON_RIGHT,
           }),
@@ -105,6 +117,7 @@ export const WithLinkList: Story = {
         Link({
           title: "Link four",
           href: "#",
+          listItem: true,
           iconEnd: Icon({
             icon: Icons.CHEVRON_RIGHT,
           }),
@@ -112,11 +125,12 @@ export const WithLinkList: Story = {
         Link({
           title: "Link five",
           href: "#",
+          listItem: true,
           iconEnd: Icon({
             icon: Icons.CHEVRON_RIGHT,
           }),
         }),
-      ],
+      ].join(""),
     }),
   },
 }

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

@@ -1,11 +1,12 @@
 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 { HeadingTypes, HeroBannerModifier } from "@pnx-mixtape/ids-shape"
 import Heading from "../../Atom/Heading/Heading"
 import { HeadingStyles, TextStyles } from "../../enums"
 import Text from "../../Atom/Text/Text"
 import { Page } from "../../../.storybook-react/decorators"
+import LinkList, { LinkListItem } from "../LinkList/LinkList"
+import FormSearch from "../../Form/Search/FormSearch"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
@@ -14,15 +15,14 @@ const meta: Meta<typeof Component> = {
   args: {
     children: (
       <>
-        <Heading as={HeadingTypes.ONE} modifier={HeadingStyles.HEADLINE}>
-          Always put your best foot forward.
-        </Heading>
-        <Text modifier={TextStyles.XL}>
+        <Heading as={HeadingTypes.ONE}>Always put your best foot forward.</Heading>
+        <Text modifier={TextStyles.LEDE}>
           Make the most of the opportunity by encouraging an action and keeping your copy clear and
           concise.
         </Text>
       </>
     ),
+    search: <FormSearch />,
   },
 }
 
@@ -31,19 +31,47 @@ type Story = StoryObj<typeof meta>
 
 export const HeroSearch: Story = {}
 
-export const Hero: Story = {
+export const Highlight: Story = {
   args: {
-    hero: true,
+    highlight: true,
+    modifier: HeroBannerModifier.LIGHT,
     children: (
       <>
-        <Heading as={HeadingTypes.ONE} modifier={HeadingStyles.HEADLINE}>
+        <Heading as={HeadingTypes.ONE} style={[HeadingStyles.HEADLINE]}>
           Always put your best foot forward.
         </Heading>
-        <Text modifier={TextStyles.XL}>
+        <Text modifier={TextStyles.LEDE}>
           Make the most of the opportunity by encouraging an action and keeping your copy clear and
           concise.
         </Text>
-        <Button modifiers={[ButtonModifiers.DARK]}>Button</Button>
+      </>
+    ),
+  },
+}
+
+export const WithLinkList: Story = {
+  args: {
+    children: (
+      <>
+        <Heading as={HeadingTypes.ONE}>Always put your best foot forward.</Heading>
+        <Text modifier={TextStyles.LEDE}>
+          Make the most of the opportunity by encouraging an action and keeping your copy clear and
+          concise.
+        </Text>
+      </>
+    ),
+    aside: (
+      <>
+        <Heading as={HeadingTypes.TWO} modifiers={[HeadingTypes.FOUR]}>
+          Popular searches
+        </Heading>
+        <LinkList>
+          <LinkListItem to="#1">Page link #1</LinkListItem>
+          <LinkListItem to="#2">Page link #2</LinkListItem>
+          <LinkListItem to="#3">Page link #3</LinkListItem>
+          <LinkListItem to="#4">Page link #4</LinkListItem>
+          <LinkListItem to="#5">Page link #5</LinkListItem>
+        </LinkList>
       </>
     ),
   },

package/src/Component/HeroSearch/HeroSearch.tsx

@@ -1,32 +1,36 @@
-import { ComponentPropsWithoutRef, JSX, PropsWithChildren } from "react"
-import classNames from "classnames"
-import Section from "../../Layout/Section/Section"
-import { SectionStyles } from "../../enums"
+import { ComponentPropsWithoutRef, JSX, PropsWithChildren, ReactNode } from "react"
+import { HeroBannerModifier } from "@pnx-mixtape/ids-shape"
+import HeroBanner from "../HeroBanner/HeroBanner"
+import HeroBannerContent from "../HeroBanner/Components/HeroBannerContent"
+import HeroBannerAside from "../HeroBanner/Components/HeroBannerAside"
 
-type HeroBannerProps = PropsWithChildren &
+type HeroSearchProps = PropsWithChildren &
   ComponentPropsWithoutRef<"div"> & {
-    hero?: boolean
-    center?: boolean
+    highlight?: boolean
+    modifier?: HeroBannerModifier
+    /** Search form rendered inside the hero content area. */
+    search?: ReactNode
+    /** Aside link list or image */
+    aside?: ReactNode
+    hasImg?: boolean
   }
-// @todo expand to have new features
+
 const HeroSearch = ({
-  hero = false,
-  center = false,
+  highlight = false,
+  search,
   children,
-  className,
+  modifier,
+  aside,
+  hasImg = false,
   ...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}
-    >
+}: HeroSearchProps): JSX.Element => (
+  <HeroBanner modifier={modifier} highlight={highlight} {...props}>
+    <HeroBannerContent>
       {children}
-    </div>
-  </Section>
+      {search}
+    </HeroBannerContent>
+    {aside && <HeroBannerAside hasImg={hasImg}>{aside}</HeroBannerAside>}
+  </HeroBanner>
 )
 
 export default HeroSearch