@bloom-housing/ui-components 7.1.0 → 7.2.1

package/src/icons/Icon.stories.tsx

@@ -0,0 +1,67 @@
+import React from "react"
+import { Icon } from "./Icon"
+
+export default {
+  title: "Icons/Icon",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const IconApplication = () => <Icon size="large" symbol="application" />
+export const IconArrowBack = () => <Icon size="large" symbol="arrowBack" />
+export const IconArrowDown = () => <Icon size="large" symbol="arrowDown" />
+export const IconAssistance = () => <Icon size="large" symbol="assistance" />
+export const IconAsterisk = () => <Icon size="large" symbol="asterisk" />
+export const IconBed = () => <Icon size="large" symbol="bed" />
+export const IconBrowse = () => <Icon size="large" symbol="browse" />
+export const IconBuilding = () => <Icon size="large" symbol="building" />
+export const IconCalendar = () => <Icon size="large" symbol="calendar" />
+export const IconCheck = () => <Icon size="large" symbol="check" />
+export const IconClock = () => <Icon size="large" symbol="clock" />
+export const IconClose = () => <Icon size="large" symbol="close" />
+export const IconCloseRound = () => <Icon size="large" symbol="closeRound" />
+export const IconCloseSmall = () => <Icon size="large" symbol="closeSmall" />
+export const IconCross = () => <Icon size="large" symbol="cross" />
+export const IconDocument = () => <Icon size="large" symbol="document" />
+export const IconDoubleHouse = () => <Icon size="large" symbol="doubleHouse" />
+export const IconDown = () => <Icon size="large" symbol="down" />
+export const IconDownload = () => <Icon size="large" symbol="download" />
+export const IconEdit = () => <Icon size="large" symbol="edit" />
+export const IconEligibility = () => <Icon size="large" symbol="eligibility" />
+export const IconEnvelope = () => <Icon size="large" symbol="envelope" />
+export const IconEye = () => <Icon size="large" symbol="eye" />
+export const IconFavorite = () => <Icon size="large" symbol="favorite" />
+export const IconFile = () => <Icon size="large" symbol="file" />
+export const IconForward = () => <Icon size="large" symbol="forward" />
+export const IconFrontDoor = () => <Icon size="large" symbol="frontDoor" />
+export const IconGlobe = () => <Icon size="large" symbol="globe" />
+export const IconHamburger = () => <Icon size="large" symbol="hamburger" />
+export const IconHouse = () => <Icon size="large" symbol="house" />
+export const IconInfo = () => <Icon size="large" symbol="info" />
+export const IconLeft = () => <Icon size="large" symbol="left" />
+export const IconLightBulb = () => <Icon size="large" symbol="lightbulb" />
+export const IconLike = () => <Icon size="large" symbol="like" />
+export const IconLikeFill = () => <Icon size="large" symbol="likeFill" />
+export const IconLink = () => <Icon size="large" symbol="link" />
+export const IconList = () => <Icon size="large" symbol="list" />
+export const IconLock = () => <Icon size="large" symbol="lock" />
+export const IconMail = () => <Icon size="large" symbol="mail" />
+export const IconMailThin = () => <Icon size="large" symbol="mailThin" />
+export const IconMap = () => <Icon size="large" symbol="map" />
+export const IconMapThin = () => <Icon size="large" symbol="mapThin" />
+export const IconMenu = () => <Icon size="large" symbol="menu" />
+export const IconMessages = () => <Icon size="large" symbol="messages" />
+export const IconOval = () => <Icon size="large" symbol="oval" />
+export const IconPhone = () => <Icon size="large" symbol="phone" />
+export const IconPlus = () => <Icon size="large" symbol="plus" />
+export const IconPolygon = () => <Icon size="large" symbol="polygon" />
+export const IconProfile = () => <Icon size="large" symbol="profile" />
+export const IconQuestion = () => <Icon size="large" symbol="question" />
+export const IconResult = () => <Icon size="large" symbol="result" />
+export const IconRight = () => <Icon size="large" symbol="right" />
+export const IconSearch = () => <Icon size="large" symbol="search" />
+export const IconSettings = () => <Icon size="large" symbol="settings" />
+export const IconSpinner = () => <Icon size="large" symbol="spinner" />
+export const IconStar = () => <Icon size="large" symbol="star" />
+export const IconTicket = () => <Icon size="large" symbol="ticket" />
+export const IconTrash = () => <Icon size="large" symbol="trash" />
+export const IconWarning = () => <Icon size="large" symbol="warning" />

package/src/lists/NumberedList.stories.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+export default {
+  title: "Lists/Numbered List",
+}
+
+export const list = () => {
+  return (
+    <ol className="numbered-list">
+      <li>Item One</li>
+      <li>Item Two</li>
+      <li>Item Three</li>
+    </ol>
+  )
+}

package/src/lists/PreferencesList.stories.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { PreferencesList } from "./PreferencesList"
+import PreferencesListDocumentation from "./PreferencesList.docs.mdx"
+
+export default {
+  title: "Lists/Preferences List 🚩",
+  id: "lists/preferences-list",
+  decorators: [(storyFn: any) => <div>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: PreferencesListDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+const listingPreferences = [
+  {
+    ordinal: 1,
+    links: [],
+    title: "Title 1",
+    description: "Description 1",
+  },
+  {
+    ordinal: 2,
+    links: [
+      {
+        url: "http://www.google.com",
+        title: "Link Title 2",
+      },
+    ],
+    title: "Title 2",
+    subtitle: "Subtitle 2",
+    description: "Description 2",
+  },
+  {
+    ordinal: 3,
+    links: [],
+    title: "Title 3",
+    subtitle: "Subtitle 3",
+    description: "Description 3",
+  },
+]
+
+export const preferences = () => {
+  return <PreferencesList listingPreferences={listingPreferences} />
+}

package/src/locales/es.json

@@ -168,8 +168,7 @@
   "application.household.membersInfo.title": "Antes de añadir a otras personas, asegúrese de que no hayan sido nombradas en ninguna otra solicitud de este listado.",
   "application.household.preferredUnit.legend": "Tipo de unidad preferida",
   "application.household.preferredUnit.options.SRO": "Organización con Potestad Reglamentaria",
-  "application.household.preferredUnit.options.fiveBdrm": "5 dormitorios",
-  "application.household.preferredUnit.options.fourBdrm": "4 dormitorios",
+  "application.household.preferredUnit.options.fourBdrm": "+ de 3 dormitorios",
   "application.household.preferredUnit.options.oneBdrm": "1 dormitorio",
   "application.household.preferredUnit.options.studio": "Estudio",
   "application.household.preferredUnit.options.threeBdrm": "3 dormitorios",
@@ -572,8 +571,7 @@
   "listings.singleRoomOccupancy": "Ocupación de habitación individual",
   "listings.specialNotes": "Observaciones especiales",
   "listings.unitTypes.SRO": "Ocupación de habitación individual",
-  "listings.unitTypes.fiveBdrm": "5 dormitorios",
-  "listings.unitTypes.fourBdrm": "4 dormitorios",
+  "listings.unitTypes.fourBdrm": "4 HABITACIONES",
   "listings.unitTypes.oneBdrm": "1 dormitorio",
   "listings.unitTypes.studio": "Estudio",
   "listings.unitTypes.threeBdrm": "3 dormitorios",

package/src/locales/general.json

@@ -168,8 +168,7 @@
   "application.household.membersInfo.title": "Before adding other people, make sure that they aren't named on any other application for this listing.",
   "application.household.preferredUnit.legend": "Preferred unit type",
   "application.household.preferredUnit.options.SRO": "SRO",
-  "application.household.preferredUnit.options.fiveBdrm": "5 Bedroom",
-  "application.household.preferredUnit.options.fourBdrm": "4 Bedroom",
+  "application.household.preferredUnit.options.fourBdrm": "3+ Bedroom",
   "application.household.preferredUnit.options.oneBdrm": "1 Bedroom",
   "application.household.preferredUnit.options.studio": "Studio",
   "application.household.preferredUnit.options.threeBdrm": "3 Bedroom",
@@ -736,7 +735,6 @@
   "listings.singleRoomOccupancyDescription": "This property offers single rooms for one person only. Tenants may share bathrooms, and sometimes kitchen facilities.",
   "listings.specialNotes": "Special Notes",
   "listings.unitTypes.SRO": "SRO",
-  "listings.unitTypes.fiveBdrm": "5 BR",
   "listings.unitTypes.fourBdrm": "4 BR",
   "listings.unitTypes.oneBdrm": "1 BR",
   "listings.unitTypes.studio": "Studio",

package/src/locales/tl.json

@@ -168,8 +168,7 @@
   "application.household.membersInfo.title": "Bago magdagdag ng ibang tao_ siguraduhing hindi sila pinangalanan sa anumang iba pang application para sa listahang ito.",
   "application.household.preferredUnit.legend": "Napiling uri ng unit",
   "application.household.preferredUnit.options.SRO": "SRO",
-  "application.household.preferredUnit.options.fiveBdrm": "5 Kwarto",
-  "application.household.preferredUnit.options.fourBdrm": "4 Kwarto",
+  "application.household.preferredUnit.options.fourBdrm": "3+ Kwarto",
   "application.household.preferredUnit.options.oneBdrm": "1 Kwarto",
   "application.household.preferredUnit.options.studio": "Studio",
   "application.household.preferredUnit.options.threeBdrm": "3 Kwarto",
@@ -501,7 +500,6 @@
   "listings.singleRoomOccupancy": "SRO",
   "listings.specialNotes": "Espesyal na Mga Paunawa",
   "listings.unitTypes.SRO": "SRO",
-  "listings.unitTypes.fiveBdrm": "5 BR",
   "listings.unitTypes.fourBdrm": "4 BR",
   "listings.unitTypes.oneBdrm": "1 BR",
   "listings.unitTypes.studio": "Studio",

package/src/locales/vi.json

@@ -168,8 +168,7 @@
   "application.household.membersInfo.title": "Trước khi thêm người khác, hãy đảm bảo rằng họ không có tên trên bất kỳ đơn ghi danh nào khác cho danh sách nhà này.",
   "application.household.preferredUnit.legend": "Loại nhà ở ưu tiên",
   "application.household.preferredUnit.options.SRO": "SRO",
-  "application.household.preferredUnit.options.fiveBdrm": "5 Phòng ngủ",
-  "application.household.preferredUnit.options.fourBdrm": "4 Phòng ngủ",
+  "application.household.preferredUnit.options.fourBdrm": "3 Phòng ngủ trở lên",
   "application.household.preferredUnit.options.oneBdrm": "1 Phòng ngủ",
   "application.household.preferredUnit.options.studio": "Một phòng kiểu studio",
   "application.household.preferredUnit.options.threeBdrm": "3 Phòng ngủ",
@@ -549,8 +548,7 @@
   "listings.singleRoomOccupancy": "Số người ở Phòng đơn",
   "listings.specialNotes": "Ghi chú đặc biệt",
   "listings.unitTypes.SRO": "Số người ở Phòng đơn",
-  "listings.unitTypes.fiveBdrm": "5 Phòng ngủ",
-  "listings.unitTypes.fourBdrm": "4 Phòng ngủ",
+  "listings.unitTypes.fourBdrm": "4 BR",
   "listings.unitTypes.oneBdrm": "1 Phòng ngủ",
   "listings.unitTypes.studio": "Một phòng kiểu studio",
   "listings.unitTypes.threeBdrm": "3 Phòng ngủ",

package/src/locales/zh.json

@@ -168,11 +168,10 @@
   "application.household.membersInfo.title": "在加入其他人之前，請確保他們未列在這次上市名單的任何其他申請中。",
   "application.household.preferredUnit.legend": "偏好單位類型",
   "application.household.preferredUnit.options.SRO": "單人套房",
-  "application.household.preferredUnit.options.fiveBdrm": "5 臥室",
-  "application.household.preferredUnit.options.fourBdrm": "4 臥室",
+  "application.household.preferredUnit.options.fourBdrm": "3+ 間卧室",
   "application.household.preferredUnit.options.oneBdrm": "1 間臥室",
   "application.household.preferredUnit.options.studio": "套房",
-  "application.household.preferredUnit.options.threeBdrm": "3 臥室",
+  "application.household.preferredUnit.options.threeBdrm": "3 間臥室",
   "application.household.preferredUnit.options.twoBdrm": "2 間臥室",
   "application.household.preferredUnit.optionsLabel": "請勾選所有適用的單位：",
   "application.household.preferredUnit.preferredUnitType": "首選單位類型",
@@ -554,8 +553,7 @@
   "listings.singleRoomOccupancy": "單人房",
   "listings.specialNotes": "特別備註",
   "listings.unitTypes.SRO": "單人房",
-  "listings.unitTypes.fiveBdrm": "5 臥室",
-  "listings.unitTypes.fourBdrm": "4 臥室",
+  "listings.unitTypes.fourBdrm": "4 BR",
   "listings.unitTypes.oneBdrm": "1 臥室",
   "listings.unitTypes.studio": "套房",
   "listings.unitTypes.threeBdrm": "3 卧室",

package/src/navigation/Breadcrumbs.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+import { Breadcrumbs, BreadcrumbLink } from "./Breadcrumbs"
+
+export default {
+  title: "Navigation/Breadcrumbs",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const Default = () => (
+  <Breadcrumbs>
+    <BreadcrumbLink href="/One">One</BreadcrumbLink>
+    <BreadcrumbLink href="/Two">Two</BreadcrumbLink>
+    <BreadcrumbLink current={true} href="/Three">
+      Three
+    </BreadcrumbLink>
+  </Breadcrumbs>
+)

package/src/navigation/LanguageNav.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+import { LanguageNav } from "./LanguageNav"
+import { text, withKnobs } from "@storybook/addon-knobs"
+
+export default {
+  title: "Navigation/LanguageNav",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>, withKnobs],
+}
+
+export const Default = () => (
+  <LanguageNav
+    ariaLabel={text("ariaLabel", "")}
+    languages={[
+      {
+        label: "English",
+        active: true,
+        onClick: () => {},
+      },
+      {
+        label: "Spanish",
+        active: false,
+        onClick: () => {},
+      },
+    ]}
+  />
+)

package/src/navigation/ProgressNav.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { ProgressNav } from "./ProgressNav"
+import ProgressNavDocs from "./ProgressNav.docs.mdx"
+
+export default {
+  title: "Navigation/Progress Nav 🚩",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: ProgressNavDocs,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const Default = () => (
+  <ProgressNav
+    currentPageSection={2}
+    completedSections={1}
+    labels={["You", "Household", "Income", "Preferences", "Review"]}
+    mounted={true}
+  />
+)
+
+export const barStyle = () => (
+  <ProgressNav
+    currentPageSection={2}
+    completedSections={1}
+    labels={["You", "Household", "Income", "Preferences", "Review"]}
+    mounted={true}
+    style={"bar"}
+  />
+)

package/src/navigation/ProgressNav.tsx

@@ -26,7 +26,7 @@ const ProgressNavItem = (props: {
     }
   }
 
-  const srTextBuilder = (): string | React.ReactFragment => {
+  const srTextBuilder = (): string | React.ReactNode => {
     if (props.section < props.currentPageSection) {
       return (
         <span className="sr-only">

package/src/navigation/SideNav.stories.tsx

@@ -0,0 +1,77 @@
+import React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { StandardTable } from "../tables/StandardTable"
+import { SideNav } from "./SideNav"
+import { mockHeaders, mockData } from "../tables/StandardTable.stories"
+import SideNavDocumentation from "./SideNav.docs.mdx"
+
+export default {
+  title: "Navigation/Side Nav 🚩",
+  id: "navigation/side-nav",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: SideNavDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const Default = () => (
+  <div style={{ maxWidth: "275px" }}>
+    <SideNav
+      navItems={[
+        { label: "Nav Item 1", url: "#", current: false },
+        { label: "Nav Item 2", url: "#", current: false },
+        { label: "Nav Item 3", url: "#" },
+      ]}
+    />
+  </div>
+)
+
+export const Current = () => (
+  <div style={{ maxWidth: "275px" }}>
+    <SideNav
+      navItems={[
+        { label: "Nav Item 1", url: "#", current: true },
+        { label: "Nav Item 2", url: "#", current: false },
+        { label: "Nav Item 3", url: "#", current: false },
+      ]}
+    />
+  </div>
+)
+
+const MultiLevelNav = () => (
+  <SideNav
+    navItems={[
+      { label: "Nav Item 1", url: "#", current: false },
+      {
+        label: "Nav Item 2",
+        url: "#",
+        count: 10,
+        childrenItems: [
+          { label: "Child Item 1", url: "#", count: 7 },
+          { label: "Child Item 2", url: "#", current: true, count: 3 },
+        ],
+      },
+      { label: "Nav Item 3", url: "#" },
+    ]}
+  />
+)
+
+export const ChildItems = () => (
+  <div style={{ maxWidth: "275px" }}>
+    <MultiLevelNav />
+  </div>
+)
+
+export const WithinLayout = () => (
+  <div className="sidebar-detail-layout">
+    <aside>
+      <MultiLevelNav />
+    </aside>
+    <div className="rounded-lg border border-gray-500 overflow-hidden">
+      <StandardTable headers={mockHeaders} data={mockData} />
+    </div>
+  </div>
+)

package/src/navigation/TabNav.stories.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+
+import { TabNav, TabNavItem } from "./TabNav"
+
+export default {
+  title: "Navigation/Tab-like Nav",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  parameters: { actions: { argTypesRegex: "^on[A-Z].*" } },
+}
+
+export const Default = () => {
+  return (
+    <TabNav>
+      <TabNavItem href={"/other"}>Other</TabNavItem>
+      <TabNavItem href={"/default"} current tagContent="15">
+        Default
+      </TabNavItem>
+    </TabNav>
+  )
+}
+// TODO: Fix tab roles for this component in #1489
+Default.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "no-focusable-content",
+          enabled: false,
+        },
+        {
+          id: "nested-interactive",
+          enabled: false,
+        },
+      ],
+    },
+  },
+}
+
+export const Other = () => {
+  return (
+    <TabNav>
+      <TabNavItem href={"/other"} current>
+        Other
+      </TabNavItem>
+      <TabNavItem href={"/default"} tagContent="15">
+        Default
+      </TabNavItem>
+    </TabNav>
+  )
+}
+
+// TODO: Fix tab roles for this component in #1489
+Other.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "no-focusable-content",
+          enabled: false,
+        },
+        {
+          id: "nested-interactive",
+          enabled: false,
+        },
+      ],
+    },
+  },
+}

package/src/navigation/Tabs.stories.tsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { Tab, Tabs, TabList, TabPanel } from "./Tabs"
+
+export default {
+  title: "Navigation/Tabs",
+  decorators: [
+    (storyFn: any) => (
+      <div style={{ padding: "1rem" }}>
+        <style>
+          {`
+      .styled {
+        color: blue !important;
+        font-weight: bold;
+      }
+      .tabs__panel.styled {
+        display: block;
+      }
+    `}
+        </style>
+
+        {storyFn()}
+      </div>
+    ),
+  ],
+}
+
+export const Default = () => {
+  return (
+    <Tabs>
+      <TabList>
+        <Tab>Title 1</Tab>
+        <Tab>Title 2</Tab>
+        <Tab>Long Tab Title 3</Tab>
+        <Tab disabled>Disabled Tab</Tab>
+        <Tab selectedClassName="funky">Funky Tab</Tab>
+      </TabList>
+
+      <TabPanel>
+        <h2>Any content 1</h2>
+        <p>Paragraph text 1.</p>
+      </TabPanel>
+      <TabPanel>
+        <h2>Any content 2</h2>
+        <p>Paragraph text 2.</p>
+      </TabPanel>
+      <TabPanel>
+        <h2>Any kind of content here</h2>
+        <p>Paragraph text 3.</p>
+        <p>Paragraph text 3.</p>
+        <p>Paragraph text 3.</p>
+      </TabPanel>
+      <TabPanel>
+        <p>This is disabled</p>
+      </TabPanel>
+      <TabPanel selectedClassName="styled">
+        <p>Feeling funky!</p>
+      </TabPanel>
+    </Tabs>
+  )
+}

package/src/notifications/AlertBox.stories.tsx

@@ -0,0 +1,112 @@
+import React from "react"
+import { AlertBox } from "./AlertBox"
+import AlertBoxDocumentation from "./AlertBox.docs.mdx"
+import { BADGES } from "../../.storybook/constants"
+import { withMenuLinks } from "../headers/SiteHeader.stories"
+
+export default {
+  title: "Notifications/Alert Box  🚩",
+  id: "notifications/alert-box",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  component: AlertBox,
+  parameters: {
+    docs: {
+      page: AlertBoxDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const AlertBoxAlert = () => (
+  <AlertBox onClose={() => {}} type="alert">
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxAlertInvert = () => (
+  <AlertBox onClose={() => {}} type="alert" inverted>
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxNotice = () => (
+  <AlertBox onClose={() => {}} type="notice">
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxNoticeInvert = () => (
+  <AlertBox onClose={() => {}} type="notice" inverted>
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxNoticeInvertLink = () => (
+  <AlertBox onClose={() => {}} type="notice" inverted>
+    Some warning <a href={""}>with link text</a>
+  </AlertBox>
+)
+
+export const AlertBoxSuccess = () => (
+  <AlertBox onClose={() => {}} type="success">
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxSuccessInvert = () => (
+  <AlertBox onClose={() => {}} type="success" inverted>
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxWarn = () => (
+  <AlertBox onClose={() => {}} type="warn">
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxBoundToLayoutWidth = () => (
+  <AlertBox onClose={() => {}} type="success" boundToLayoutWidth>
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxNarrow = () => (
+  <AlertBox onClose={() => {}} type="success" narrow>
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxSticky = () => (
+  <div style={{ height: "200rem", border: "3px solid gray" }}>
+    <div>{withMenuLinks()}</div>
+    <AlertBox onClose={() => {}} type="success" sticky={true}>
+      Some warning
+    </AlertBox>
+    <div style={{ borderTop: "1px solid gray", padding: "5rem" }}>Page Content</div>
+  </div>
+)
+
+export const styleOverrides = () => {
+  const cssVarsOverride = `
+    .alert-box-overrides .alert-box {
+      --background-color: var(--bloom-color-gray-400);
+      --horizontal-padding: var(--bloom-s3);
+      --font-weight: 400;
+      --close-icon-color: var(--bloom-color-gray-600);
+    }
+  `
+
+  return (
+    <>
+      <div className="alert-box-overrides">
+        <AlertBox onClose={() => {}}>Some warning</AlertBox>
+        <style>{cssVarsOverride}</style>
+      </div>
+
+      <p className="mt-12 font-semibold">Customized using the following variable overrides:</p>
+
+      <pre>{cssVarsOverride.replace(".page-header-overrides ", "")}</pre>
+    </>
+  )
+}