lbh-frontend 4.0.0 → 4.1.0-next.1

package/CHANGELOG.md

@@ -6,6 +6,19 @@ Republish on npm as `latest`. The earlier `3.7.0` tarball was published from the
 
 * fix Release Please tag format (`include-component-in-tag: false`) so future releases use `vX.Y.Z` tags
 
+## [4.1.0](https://github.com/LBHackney-IT/lbh-frontend/compare/v4.0.0...v4.1.0) (2026-07-02)
+
+
+### Features
+
+* export Dialog with optional action footer ([#257](https://github.com/LBHackney-IT/lbh-frontend/issues/257)) ([a90ffe3](https://github.com/LBHackney-IT/lbh-frontend/commit/a90ffe37d6b23db551e3514dd16c208f11c17288))
+
+
+### Bug Fixes
+
+* dialog BEM selectors with radix modifier ([#254](https://github.com/LBHackney-IT/lbh-frontend/issues/254)) ([7ef1b81](https://github.com/LBHackney-IT/lbh-frontend/commit/7ef1b81db4a39d02db0c81055e400ceadd1da0e9))
+* import Dialog directly in docs example for SSG ([#259](https://github.com/LBHackney-IT/lbh-frontend/issues/259)) ([49f0b16](https://github.com/LBHackney-IT/lbh-frontend/commit/49f0b16b5d3347202d3f1fa30e7a142d804ab220))
+
 ## [4.0.0](https://github.com/LBHackney-IT/lbh-frontend/compare/v3.7.1...v4.0.0) (2026-06-12)
 
 

package/lbh/all.js

@@ -11,6 +11,7 @@ import Map from "./components/lbh-contact-block/contact-block";
 import Radios from "./components/lbh-radios/radios";
 import Tabs from "./components/lbh-tabs/tabs";
 import Collapsible from "./components/lbh-collapsible/collapsible";
+import Dialog from "./components/lbh-dialog/index";
 
 function nodeListForEach(nodes, callback) {
   if (window.NodeList.prototype.forEach) {
@@ -63,6 +64,7 @@ export {
   Checkboxes,
   CookieBanner,
   Details,
+  Dialog,
   ErrorSummary,
   Map,
   Radios,

package/lbh/components/lbh-dialog/_dialog.scss

@@ -24,11 +24,13 @@
     background: lbh-colour("lbh-white");
     border: 4px solid lbh-colour("lbh-text");
 
-    &__title {
+    // Use full element class names — &__ would compile to .lbh-dialog--radix__*
+    // when the parent selector includes a BEM modifier on the same element.
+    .lbh-dialog__title {
       margin-top: 0;
     }
 
-    &__close {
+    .lbh-dialog__close {
       position: absolute;
       right: 7px;
       top: 7px;
@@ -52,7 +54,7 @@
       }
     }
 
-    &__actions {
+    .lbh-dialog__actions {
       display: flex;
       flex-direction: column;
       align-items: center;

package/lbh/components/lbh-dialog/dialog.test.tsx

@@ -0,0 +1,121 @@
+import React from "react"
+import { fireEvent, render, screen, within } from "@testing-library/react"
+import Dialog from "./index"
+
+describe("Dialog", () => {
+  it("renders title, children, and close button", () => {
+    render(
+      <Dialog isOpen title="Delete record" onDismiss={() => {}}>
+        <p>Are you sure?</p>
+      </Dialog>
+    )
+
+    expect(screen.getByRole("heading", { name: "Delete record" })).toBeTruthy()
+    expect(screen.getByText("Are you sure?")).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Close" })).toBeTruthy()
+  })
+
+  it("does not render actions when no action props are provided", () => {
+    render(
+      <Dialog isOpen title="Information" onDismiss={() => {}}>
+        <p>Details only</p>
+      </Dialog>
+    )
+
+    expect(document.body.querySelector(".lbh-dialog__actions")).toBeNull()
+  })
+
+  it("renders confirm and cancel actions when provided", () => {
+    render(
+      <Dialog
+        isOpen
+        title="Delete record"
+        onDismiss={() => {}}
+        onConfirm={() => {}}
+        confirmText="Yes, delete"
+        onCancel={() => {}}
+        cancelText="No, cancel"
+      >
+        <p>Content</p>
+      </Dialog>
+    )
+
+    expect(screen.getByRole("button", { name: "Yes, delete" })).toBeTruthy()
+    expect(screen.getByRole("button", { name: "No, cancel" })).toBeTruthy()
+  })
+
+  it("renders only confirm when onCancel is omitted", () => {
+    render(
+      <Dialog
+        isOpen
+        title="Sign out"
+        onDismiss={() => {}}
+        onConfirm={() => {}}
+        confirmText="Stay logged in"
+      >
+        <p>You will be signed out.</p>
+      </Dialog>
+    )
+
+    expect(
+      screen.getByRole("button", { name: "Stay logged in" })
+    ).toBeTruthy()
+    expect(screen.queryByRole("button", { name: "No, cancel" })).toBeNull()
+  })
+
+  it("renders only cancel when onConfirm is omitted", () => {
+    render(
+      <Dialog
+        isOpen
+        title="Address"
+        onDismiss={() => {}}
+        onCancel={() => {}}
+        cancelText="Close"
+      >
+        <p>Address details</p>
+      </Dialog>
+    )
+
+    const actions = document.body.querySelector(".lbh-dialog__actions")
+    expect(actions).toBeTruthy()
+    expect(within(actions as HTMLElement).getByRole("button", { name: "Close" })).toBeTruthy()
+    expect(screen.queryByRole("button", { name: "Yes" })).toBeNull()
+  })
+
+  it("calls onDismiss when the close button is clicked", () => {
+    const onDismiss = jest.fn()
+
+    render(
+      <Dialog isOpen title="Close me" onDismiss={onDismiss}>
+        <p>Content</p>
+      </Dialog>
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: "Close" }))
+    expect(onDismiss).toHaveBeenCalledTimes(1)
+  })
+
+  it("calls onConfirm and onCancel when action buttons are clicked", () => {
+    const onConfirm = jest.fn()
+    const onCancel = jest.fn()
+
+    render(
+      <Dialog
+        isOpen
+        title="Confirm"
+        onDismiss={() => {}}
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+        confirmButtonTestId="confirm-action"
+      >
+        <p>Content</p>
+      </Dialog>
+    )
+
+    fireEvent.click(screen.getByTestId("confirm-action"))
+    fireEvent.click(screen.getByRole("button", { name: "No, cancel" }))
+
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+})

package/lbh/components/lbh-dialog/index.tsx

@@ -1,11 +1,20 @@
 import React from "react"
 import * as RadixDialog from "@radix-ui/react-dialog"
 
-interface Props {
+export interface DialogProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof RadixDialog.Content>,
+    "title"
+  > {
   isOpen: boolean
   onDismiss: () => void
-  children: React.ReactNode
   title: string
+  children: React.ReactNode
+  onConfirm?: () => void
+  confirmText?: string
+  confirmButtonTestId?: string
+  onCancel?: () => void
+  cancelText?: string
 }
 
 const Dialog = ({
@@ -13,40 +22,76 @@ const Dialog = ({
   onDismiss,
   children,
   title,
+  onConfirm,
+  confirmText = "Yes",
+  confirmButtonTestId,
+  onCancel,
+  cancelText = "No, cancel",
   ...props
-}: Props): React.ReactElement => (
-  <RadixDialog.Root
-    open={isOpen}
-    onOpenChange={(open) => {
-      if (!open) onDismiss()
-    }}
-  >
-    <RadixDialog.Portal>
-      <RadixDialog.Overlay className="lbh-dialog__overlay" />
-      <RadixDialog.Content className="lbh-dialog lbh-dialog--radix" {...props}>
-        <RadixDialog.Title asChild>
-          <h2 className="lbh-heading-h2 lbh-dialog__title">{title}</h2>
-        </RadixDialog.Title>
-        {children}
-        <RadixDialog.Close asChild>
-          <button type="button" className="lbh-dialog__close">
-            <span className="govuk-visually-hidden">Close</span>
+}: DialogProps): React.ReactElement => {
+  const showActions = Boolean(onConfirm || onCancel)
 
-            <svg width="18" height="18" viewBox="0 0 13 13" fill="none">
-              <path
-                d="M-0.0501709 1.36379L1.36404 -0.050415L12.6778 11.2633L11.2635 12.6775L-0.0501709 1.36379Z"
-                fill="#0B0C0C"
-              />
-              <path
-                d="M11.2635 -0.050293L12.6778 1.36392L1.36404 12.6776L-0.0501709 11.2634L11.2635 -0.050293Z"
-                fill="#0B0C0C"
-              />
-            </svg>
-          </button>
-        </RadixDialog.Close>
-      </RadixDialog.Content>
-    </RadixDialog.Portal>
-  </RadixDialog.Root>
-)
+  return (
+    <RadixDialog.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onDismiss()
+      }}
+    >
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className="lbh-dialog__overlay" />
+        <RadixDialog.Content
+          className="lbh-dialog lbh-dialog--radix"
+          aria-describedby={undefined}
+          {...props}
+        >
+          <RadixDialog.Title asChild>
+            <h2 className="lbh-heading-h2 lbh-dialog__title">{title}</h2>
+          </RadixDialog.Title>
+          {children}
+          <RadixDialog.Close asChild>
+            <button type="button" className="lbh-dialog__close">
+              <span className="govuk-visually-hidden">Close</span>
+
+              <svg width="18" height="18" viewBox="0 0 13 13" fill="none">
+                <path
+                  d="M-0.0501709 1.36379L1.36404 -0.050415L12.6778 11.2633L11.2635 12.6775L-0.0501709 1.36379Z"
+                  fill="#0B0C0C"
+                />
+                <path
+                  d="M11.2635 -0.050293L12.6778 1.36392L1.36404 12.6776L-0.0501709 11.2634L11.2635 -0.050293Z"
+                  fill="#0B0C0C"
+                />
+              </svg>
+            </button>
+          </RadixDialog.Close>
+          {showActions && (
+            <div className="lbh-dialog__actions">
+              {onConfirm && (
+                <button
+                  type="button"
+                  className="govuk-button lbh-button"
+                  onClick={onConfirm}
+                  data-testid={confirmButtonTestId}
+                >
+                  {confirmText}
+                </button>
+              )}
+              {onCancel && (
+                <button
+                  type="button"
+                  className="lbh-link lbh-link--no-visited-state"
+                  onClick={onCancel}
+                >
+                  {cancelText}
+                </button>
+              )}
+            </div>
+          )}
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  )
+}
 
 export default Dialog

package/lbh/index.d.ts

@@ -6,6 +6,7 @@ import { default as Checkboxes } from "./components/lbh-checkboxes/checkboxes";
 import { default as Collapsible } from "./components/lbh-collapsible/collapsible";
 import { default as CookieBanner } from "./components/lbh-cookie-banner/cookie-banner";
 import { default as Details } from "./components/lbh-details/details";
+import { default as Dialog } from "./components/lbh-dialog/index";
 import { default as ErrorSummary } from "./components/lbh-error-summary/error-summary";
 import { default as Map } from "./components/lbh-contact-block/contact-block";
 import { default as Radios } from "./components/lbh-radios/radios";
@@ -26,12 +27,15 @@ export {
   Collapsible,
   CookieBanner,
   Details,
+  Dialog,
   ErrorSummary,
   Map,
   Radios,
   Tabs,
 };
 
+export type { DialogProps } from "./components/lbh-dialog/index";
+
 declare global {
   interface Window {
     LBHFrontend: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lbh-frontend",
-  "version": "4.0.0",
+  "version": "4.1.0-next.1",
   "description": "Everything you need to make digital services for Hackney",
   "license": "MIT",
   "homepage": "https://design-system.hackney.gov.uk",