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

package/src/Component/GlobalAlert/README.md

@@ -1,27 +1,177 @@
 # Global Alert
 
-### How to use
+A site-wide banner for messages that apply across the whole site (service outages, maintenance, brand-wide announcements). Typically rendered once, above the main layout. Use **[InPageAlert](../InPageAlert/)** instead when the message is scoped to a single page or form (info / error / warning / success feedback).
 
-**CSS**
+## CSS Import
 
-`@import '@pnx-mixtape/mxds/src/Component/GlobalAlert/global-alert.css';`
+```css
+@import "@pnx-mixtape/mxds/src/Component/GlobalAlert/global-alert.css";
+```
 
-**Twig**
+---
 
-You can setup a twig namespace in your project if you wish to use the twig files directly.
+## Twig
 
-- Eg: `{% extends '@mixtape/Component/GlobalAlert/global-alert.twig' %}`
+```twig
+{% include '@mixtape/Component/GlobalAlert/global-alert.twig' with {
+  id: 'maintenance-notice',
+  type: 'light',
+  dismissible: true,
+  title: heading_component,
+  content: '<p>Something happened that requires your attention</p>',
+  link: link_component
+} %}
+```
 
-Alternatively copy/paste the file for more control.
+**global-alert.twig props** (`GlobalAlert` type from `ids-shape`):
 
-**JSX Components**
+| Prop          | Type                    | Description                                                                                                       |
+| ------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `id`          | `string`                | Appended with `type` to form the element id. Used as the `localStorage` key for dismissal                         |
+| `type`        | `GlobalAlertTypes`      | `light` (default) or `critical`                                                                                   |
+| `dismissible` | `boolean`               | When `true`, wraps in `<mx-closable-alert>` with a `[data-container]` inner div and an auto-injected close button |
+| `title`       | `Heading`               | Optional heading rendered above the content. Use a smaller heading modifier (e.g. `h4`) for the visual weight     |
+| `content`     | `string \| WysiwygText` | Main body content (HTML). **Required**                                                                            |
+| `link`        | `Link`                  | Optional link rendered after the content                                                                          |
+| `attributes`  | `Attribute`             | Drupal-style attributes object; `mx-global-alert`, `mx-page`, and the type modifier are merged in                 |
 
-JSX components are available for use with React.
+---
 
-- JSX import: `import { GlobalAlert } from '@pnx-mixtape/mxds/react';`
+## HTML
 
-**Custom Element**
+Minimal, non-dismissible banner:
 
-This javascript just adds the ability to close/dismiss a message, which is recorded in localStorage.
+```html
+<div id="maintenance-notice" class="mx-global-alert mx-global-alert--light">
+  <div class="mx-global-alert__inner">
+    <div class="mx-global-alert__content">
+      <p><b>Scheduled maintenance tonight.</b> Service may be unavailable between 10pm and 2am.</p>
+    </div>
+  </div>
+</div>
+```
 
-- ES6 import: `import '@pnx-mixtape/mxds/src/Component/GlobalAlert/Elements/ClosableAlert';`
+Critical variant:
+
+```html
+<div id="outage-notice" class="mx-global-alert mx-global-alert--critical">
+  <div class="mx-global-alert__inner">
+    <div class="mx-global-alert__content">
+      <p><b>Service disruption.</b> We&apos;re investigating an outage affecting logins.</p>
+    </div>
+  </div>
+</div>
+```
+
+### Dismissible (Web Component)
+
+The `<mx-closable-alert>` custom element enhances the wrapper with a close button, `localStorage`-backed dismissal, and a `GlobalAlert-close` custom event. The container must include a `[data-container]` element — the close button is appended to it.
+
+```html
+<mx-closable-alert id="maintenance-notice" class="mx-global-alert mx-global-alert--light">
+  <div class="mx-global-alert__inner" data-container>
+    <div class="mx-global-alert__content">
+      <p>
+        <b>Scheduled maintenance tonight.</b> More info <a href="/status">on our status page</a>.
+      </p>
+    </div>
+  </div>
+</mx-closable-alert>
+```
+
+**Import the JS:**
+
+```js
+import "@pnx-mixtape/mxds/src/Component/GlobalAlert/Elements/ClosableAlert"
+```
+
+**Tag name:** `<mx-closable-alert>`
+
+**How it works:**
+
+- On `connectedCallback`, checks `localStorage.getItem(this.id)` — if set, the element removes itself from the DOM.
+- If no close button (`.mx-icon--close`) exists inside `[data-container]`, one is created and appended automatically with `aria-controls` pointing to the alert id.
+- Clicking close sets `localStorage[id] = "true"`, removes the element, and dispatches a bubbling `GlobalAlert-close` `CustomEvent` with `detail: { id, target }`.
+- If `id` is not set, one is generated with the pattern `mx-alert-<n>` (not stable across reloads — always pass an explicit `id` for reliable dismissal).
+
+---
+
+## React
+
+```tsx
+import { GlobalAlert } from "@pnx-mixtape/mxds/react"
+import { GlobalAlertTypes } from "@pnx-mixtape/ids-shape"
+
+// Default (light) — dismissible
+<GlobalAlert id="maintenance-2026-04" dismissible>
+  <p>
+    <b>Scheduled maintenance tonight.</b> Service may be unavailable between 10pm and 2am.
+  </p>
+</GlobalAlert>
+
+// Critical — usually not dismissible
+<GlobalAlert id="outage-notice" type={GlobalAlertTypes.CRITICAL}>
+  <p>
+    <b>Service disruption.</b> We&apos;re investigating an outage affecting logins.
+  </p>
+</GlobalAlert>
+
+// Light with an inline link
+<GlobalAlert id="new-feature" type={GlobalAlertTypes.LIGHT} dismissible>
+  <p>
+    <b>Something happened.</b> And if you&apos;d like to know what, <a href="#">Click here</a>.
+  </p>
+</GlobalAlert>
+```
+
+**`GlobalAlert` props:**
+
+| Prop          | Type               | Default                      | Description                                                                                                                                   |
+| ------------- | ------------------ | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`        | `GlobalAlertTypes` | `GlobalAlertTypes.LIGHT`     | Visual variant — `light` or `critical`                                                                                                        |
+| `id`          | `string`           | auto-generated via `useId()` | Unique id. **Required for stable dismissal** — used as the `localStorage` key so the alert stays dismissed across page loads                  |
+| `dismissible` | `boolean`          | `false`                      | Adds a close button. When clicked, the id is written to `localStorage` and the alert is unmounted; it will not re-render on subsequent visits |
+| `children`    | `ReactNode`        | —                            | Alert body content (usually a `<p>` with bold intro + optional link)                                                                          |
+
+**Dismiss behaviour (React):** backed by the `useLocalStorage` hook keyed by `id`. If a value exists in `localStorage[id]`, the component renders nothing. Clicking close sets it and triggers a re-render with the alert hidden.
+
+---
+
+## Modifiers
+
+Modifier classes map to `GlobalAlertTypes` enum values (from `@pnx-mixtape/ids-shape`):
+
+| Class                       | `GlobalAlertTypes` value                   | Visual intent                                                                                                            |
+| --------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
+| `mx-global-alert--light`    | `GlobalAlertTypes.LIGHT` (`"light"`)       | Default informational banner. Uses `--colour-primary-light` background with standard foreground colour                   |
+| `mx-global-alert--critical` | `GlobalAlertTypes.CRITICAL` (`"critical"`) | High-severity banner. Uses a tinted error background and `--colour-error` foreground. Conventionally **not** dismissible |
+
+---
+
+## Accessibility
+
+- No `role` or `aria-live` region is applied by the component. If the alert content is added or changed dynamically after page load, wrap it in a live region at the call site (e.g. `role="status"` for light, `role="alert"` for critical).
+- The close button has `aria-label="Close {type} message"` in React and `aria-label="Close GlobalAlert"` in the Web Component, plus `aria-controls` pointing to the alert's `id`.
+- The close button is `type="button"` so it does not submit enclosing forms.
+- **Focus behaviour on dismiss:** the element is removed from the DOM, so focus is lost and returns to `<body>`. If the alert is placed inside an interactive region, consider moving focus to a sensible nearby element after dismissal.
+- Colour is not the only carrier of meaning — always include a short bold lead-in (e.g. "**Service disruption.**") so the severity is readable without relying on the background tint.
+- Always pass an explicit `id` when `dismissible: true` — otherwise the generated id changes between renders and the "stay dismissed" behaviour cannot persist.
+
+---
+
+## Customisation via CSS custom properties
+
+```css
+.mx-global-alert {
+  --alert-background: var(--colour-primary-light);
+  --alert-foreground: var(--colour-foreground);
+  --alert-scheme: light; /* color-scheme value */
+}
+
+.mx-global-alert--critical {
+  --critical-alert-foreground: var(--colour-error);
+  --critical-alert-background: color-mix(in oklch, var(--colour-error), white 95%);
+}
+```
+
+The inner layout uses `--gap-s`, `--spacing-xxs` (block padding), and `--spacing-s` (inline padding). The close button sits in a `--spacing-l` square with a `1rem` `--icon-size`.

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

@@ -2,7 +2,7 @@
 
 exports[`Critical 1`] = `
 "
-  <div class="mx-global-alert mx-page mx-global-alert--critical" id="critical-alertcritical">
+  <div class="mx-global-alert mx-page mx-global-alert--critical" role="alert" aria-live="assertive" aria-atomic="true" id="critical-alert">
     <div class="mx-global-alert__inner">
       <div class="mx-global-alert__content">
                           
@@ -19,7 +19,7 @@ exports[`Critical 1`] = `
 
 exports[`Global Alert 1`] = `
 "
-<mx-closable-alert class="mx-global-alert mx-page mx-global-alert--light" id="unique-0">
+<mx-closable-alert class="mx-global-alert mx-page mx-global-alert--light" role="status" aria-live="polite" aria-atomic="true" id="unique-0">
   <div class="mx-global-alert__inner" data-container="">
     <div class="mx-global-alert__content">
                         

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

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Critical 1`] = `"<div id="_r_1_" class="mx-global-alert mx-global-alert--critical"><div class="mx-global-alert__inner"><div class="mx-global-alert__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div></div>"`;
+exports[`Critical 1`] = `"<div id="_r_1_" role="alert" aria-live="assertive" aria-atomic="true" class="mx-global-alert mx-global-alert--critical"><div class="mx-global-alert__inner"><div class="mx-global-alert__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div></div>"`;
 
-exports[`Global Alert 1`] = `"<div id="_r_0_" class="mx-global-alert mx-global-alert--light"><div class="mx-global-alert__inner"><div class="mx-global-alert__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div><button class="mx-icon mx-icon--close" aria-label="Close light message" type="button"></button></div></div>"`;
+exports[`Global Alert 1`] = `"<div id="_r_0_" role="status" aria-live="polite" aria-atomic="true" class="mx-global-alert mx-global-alert--light"><div class="mx-global-alert__inner"><div class="mx-global-alert__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div><button class="mx-icon mx-icon--close" aria-label="Close light message" type="button"></button></div></div>"`;

package/src/Component/GlobalAlert/global-alert.css

@@ -9,6 +9,7 @@
 }
 
 @layer design-system.components {
+  /* @public --alert-background --alert-foreground --alert-scheme */
   .mx-global-alert {
     background-color: var(--alert-background, var(--colour-primary-light));
     color: var(--alert-foreground, var(--colour-foreground));

package/src/Component/GlobalAlert/global-alert.twig

@@ -4,10 +4,15 @@
   'mx-page',
   type ? baseClass~'--'~type : null,
 ] %}
-{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set isCritical = type == 'critical' %}
+{% set attributes = (attributes ?? create_attribute())
+  .addClass(classes)
+  .setAttribute('role', isCritical ? 'alert' : 'status')
+  .setAttribute('aria-live', isCritical ? 'assertive' : 'polite')
+  .setAttribute('aria-atomic', 'true') %}
 
 {% if dismissible %}
-<mx-closable-alert {{ attributes}}{% if id is not empty %} id="{{ id ~ type }}"{% endif %}>
+<mx-closable-alert {{ attributes}}{% if id is not empty %} id="{{ id }}"{% endif %}>
   <div class="mx-global-alert__inner" data-container>
     <div class="mx-global-alert__content">
       {{ title }}
@@ -17,7 +22,7 @@
   </div>
 </mx-closable-alert>
 {% else %}
-  <div {{ attributes}}{% if id is not empty %} id="{{ id ~ type }}"{% endif %}>
+  <div {{ attributes}}{% if id is not empty %} id="{{ id }}"{% endif %}>
     <div class="mx-global-alert__inner">
       <div class="mx-global-alert__content">
         {{ title }}

package/src/Component/HeroBanner/Components/HeroBannerAside.figma.ts

@@ -0,0 +1,20 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=124-522
+// source=src/Component/HeroBanner/Components/HeroBannerAside.tsx
+// component=HeroBannerAside
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const hasImg = instance.getBoolean("HasImg")
+const content = instance.getSlot("Content")
+
+const hasImgProp = hasImg ? " hasImg" : ""
+
+export default {
+  example: figma.code`<HeroBannerAside${hasImgProp}>${content}</HeroBannerAside>`,
+  imports: ['import { HeroBannerAside } from "@pnx-mixtape/mxds/react"'],
+  id: "hero-banner-aside",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/HeroBanner/Components/HeroBannerAside.tsx

@@ -0,0 +1,21 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+
+type AsideProps = PropsWithChildren & {
+  hasImg?: boolean
+}
+
+const HeroBannerAside = ({ children, hasImg = false }: AsideProps): JSX.Element => {
+  return (
+    <div
+      className={classNames("mx-hero-banner__aside", {
+        "mx-hero-banner__aside-image": hasImg,
+        "mx-section--xl": !hasImg,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default HeroBannerAside

package/src/Component/HeroBanner/Components/HeroBannerContent.figma.ts

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=124-450
+// source=src/Component/HeroBanner/Components/HeroBannerContent.tsx
+// component=HeroBannerContent
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const content = instance.getSlot("Content")
+
+export default {
+  example: figma.code`<HeroBannerContent>${content}</HeroBannerContent>`,
+  imports: ['import { HeroBannerContent } from "@pnx-mixtape/mxds/react"'],
+  id: "hero-banner-content",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/HeroBanner/Components/HeroBannerContent.tsx

@@ -0,0 +1,14 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+
+const HeroBannerContent = ({ children }: PropsWithChildren): JSX.Element => {
+  return (
+    <div
+      className={classNames("mx-hero-banner__content", "mx-vertical-flow-flex", "mx-section--xl")}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default HeroBannerContent

package/src/Component/HeroBanner/HeroBanner.figma.ts

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=124-603
+// source=src/Component/HeroBanner/HeroBanner.tsx
+// component=HeroBanner
+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 content = instance.getSlot("Content")
+
+const highlightProp = highlight ? " highlight" : ""
+const modifierProp = modifier ? ` modifier={${modifier}}` : ""
+
+// Known Figma composition limitation, not a code gap: the Dark/reverse-background
+// variants don't auto-recolour the nested HeroBannerContent instance's text the way
+// real CSS custom-property cascading does (`.mx-background--reverse` flips `--scheme`/
+// foreground colour for all descendants) — same class of limitation as HeroSearch's
+// `Center` text-align gap.
+export default {
+  example: figma.code`<HeroBanner${highlightProp}${modifierProp}>${content}</HeroBanner>`,
+  imports: [
+    'import { HeroBanner } from "@pnx-mixtape/mxds/react"',
+    'import { HeroBannerModifier } from "@pnx-mixtape/ids-shape"',
+  ],
+  id: "hero-banner",
+  metadata: {
+    nestable: true,
+  },
+}

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

@@ -16,6 +16,7 @@ import LinkList from "../LinkList/link-list.twig"
 import Icon from "../../Atom/Icon/icon.twig"
 // css
 import "../LinkList/link-list.css"
+import { modes } from "../../../.storybook/modes"
 
 /**
  * Hero Banners are primary used to display the page title.
@@ -108,6 +109,14 @@ const meta: Meta<HeroBannerType> = {
       },
     },
   },
+  parameters: {
+    chromatic: {
+      modes: {
+        mobile: modes["xs"],
+        desktop: modes["xl"],
+      },
+    },
+  },
 }
 
 export default meta
@@ -121,6 +130,11 @@ export const HeroBanner: Story = {}
 export const Highlight: Story = {
   args: {
     highlight: true,
+    title: Heading({
+      title: "Hero banner title",
+      as: HeadingTypes.ONE,
+      customClass: "mx-headline",
+    }),
     modifiers: [HeroBannerModifier.LIGHT],
     link: Link({
       href: "#",
@@ -155,6 +169,7 @@ export const WithLinkList: Story = {
         Link({
           title: "Link one",
           href: "#",
+          listItem: true,
           iconEnd: Icon({
             icon: Icons.CHEVRON_RIGHT,
           }),
@@ -162,6 +177,7 @@ export const WithLinkList: Story = {
         Link({
           title: "Link two",
           href: "#",
+          listItem: true,
           iconEnd: Icon({
             icon: Icons.CHEVRON_RIGHT,
           }),
@@ -169,11 +185,12 @@ export const WithLinkList: Story = {
         Link({
           title: "Link three",
           href: "#",
+          listItem: true,
           iconEnd: Icon({
             icon: Icons.CHEVRON_RIGHT,
           }),
         }),
-      ],
+      ].join(""),
     }),
   },
 }

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

@@ -1,12 +1,16 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./HeroBanner"
+import HeroBannerContent from "./Components/HeroBannerContent"
+import HeroBannerAside from "./Components/HeroBannerAside"
 import Button from "../../Atom/Button/Button"
 import Heading from "../../Atom/Heading/Heading"
+import Text from "../../Atom/Text/Text"
 import "./hero-banner.css"
-import { ButtonModifiers, HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { ButtonModifiers, HeadingTypes, HeroBannerModifier } from "@pnx-mixtape/ids-shape"
 import { HeadingStyles, TextStyles } from "../../enums"
-import Text from "../../Atom/Text/Text"
 import { Page } from "../../../.storybook-react/decorators"
+import Media from "../../Atom/Media/Media"
+import LinkList, { LinkListItem } from "../LinkList/LinkList"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
@@ -14,17 +18,26 @@ const meta: Meta<typeof Component> = {
   decorators: [Page],
   args: {
     children: (
-      <>
-        <Heading as={HeadingTypes.ONE} modifier={HeadingStyles.HEADLINE}>
-          Always put your best foot forward.
-        </Heading>
-        <Text modifier={TextStyles.XL}>
+      <HeroBannerContent>
+        <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>
-      </>
+      </HeroBannerContent>
     ),
   },
+  argTypes: {
+    modifier: {
+      description: "Controls the background colour",
+      options: Object.values(HeroBannerModifier),
+      control: "check",
+      table: {
+        defaultValue: { summary: HeroBannerModifier.WHITE },
+        type: { summary: "enum" },
+      },
+    },
+  },
 }
 
 export default meta
@@ -32,19 +45,51 @@ type Story = StoryObj<typeof meta>
 
 export const HeroBanner: 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}>
-          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>
+        <HeroBannerContent>
+          <Heading as={HeadingTypes.ONE} style={[HeadingStyles.HEADLINE]}>
+            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>
+          <Button modifiers={[ButtonModifiers.DARK]}>Button</Button>
+        </HeroBannerContent>
+        <HeroBannerAside>
+          <Media src="https://picsum.photos/id/56/558/418?grayscale" alt="Blurry bubbles" />
+        </HeroBannerAside>
+      </>
+    ),
+  },
+}
+
+export const WithLinkList: Story = {
+  args: {
+    children: (
+      <>
+        <HeroBannerContent>
+          <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>
+        </HeroBannerContent>
+        <HeroBannerAside>
+          <Heading as={HeadingTypes.TWO} modifiers={[HeadingTypes.FOUR]}>
+            Popular links
+          </Heading>
+          <LinkList>
+            <LinkListItem to="#1">Page link #1</LinkListItem>
+            <LinkListItem to="#2">Page link #2</LinkListItem>
+            <LinkListItem to="#3">Page link #3</LinkListItem>
+          </LinkList>
+        </HeroBannerAside>
       </>
     ),
   },

package/src/Component/HeroBanner/HeroBanner.tsx

@@ -1,29 +1,31 @@
 import { ComponentPropsWithoutRef, JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
 import Section from "../../Layout/Section/Section"
-import { SectionStyles } from "../../enums"
+import { HeroBannerModifier } from "@pnx-mixtape/ids-shape"
 
 type HeroBannerProps = PropsWithChildren &
   ComponentPropsWithoutRef<"div"> & {
-    hero?: boolean
-    center?: boolean
+    highlight?: boolean
+    modifier?: HeroBannerModifier
   }
-// @todo expand to have new features
+
 const HeroBanner = ({
-  hero = false,
-  center = false,
+  highlight = false,
   children,
   className,
+  modifier,
   ...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}
-    >
+  <Section
+    className={classNames("mx-hero-banner", className, {
+      "mx-background--reverse": modifier === "dark",
+      "mx-background--alt": modifier === "off-white",
+      "mx-background--primary": modifier === "light",
+      "mx-hero-banner--hero": highlight,
+    })}
+    containing
+  >
+    <div className={classNames("mx-hero-banner__inner")} {...props}>
       {children}
     </div>
   </Section>