@kaizen/components 1.68.6 → 1.68.8

package/src/TitleBlockZen/TitleBlockZen.spec.tsx

@@ -1,16 +1,16 @@
-import React from "react"
-import { render, waitFor, screen, within } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { vi } from "vitest"
-import { CustomBreadcrumbProps, SectionTitleRenderProps } from "./types"
-import { TitleBlockZen } from "./index"
+import React from 'react'
+import { render, waitFor, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import { CustomBreadcrumbProps, SectionTitleRenderProps } from './types'
+import { TitleBlockZen } from './index'
 
 const user = userEvent.setup()
 
 const mockMatchMedia = (matches: boolean = false): void => {
-  Object.defineProperty(window, "matchMedia", {
+  Object.defineProperty(window, 'matchMedia', {
     writable: true,
-    value: vi.fn().mockImplementation(query => ({
+    value: vi.fn().mockImplementation((query) => ({
       matches,
       media: query,
       onchange: null,
@@ -23,43 +23,43 @@ const mockMatchMedia = (matches: boolean = false): void => {
   })
 }
 
-describe("<TitleBlockZen />", () => {
+describe('<TitleBlockZen />', () => {
   beforeEach(() => {
     mockMatchMedia()
   })
-  describe("when the primary action is a button with only an href", () => {
+  describe('when the primary action is a button with only an href', () => {
     const primaryActionAsLink = {
-      label: "primaryActionLabel",
-      href: "#primaryActionHref",
+      label: 'primaryActionLabel',
+      href: '#primaryActionHref',
       primary: true,
     }
 
-    it("renders the primary action button label and href", () => {
+    it('renders the primary action button label and href', () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" primaryAction={primaryActionAsLink}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId("title-block-primary-action-button")
+      const btn = getByTestId('title-block-primary-action-button')
       expect(btn.textContent).toEqual(primaryActionAsLink.label)
-      expect(btn.getAttribute("href")).toEqual(primaryActionAsLink.href)
+      expect(btn.getAttribute('href')).toEqual(primaryActionAsLink.href)
     })
 
-    it("passes the href to the mobile action drawer button", () => {
+    it('passes the href to the mobile action drawer button', () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" primaryAction={primaryActionAsLink}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId("title-block-mobile-actions-primary-button")
-      expect(btn.getAttribute("href")).toEqual(primaryActionAsLink.href)
+      const btn = getByTestId('title-block-mobile-actions-primary-button')
+      expect(btn.getAttribute('href')).toEqual(primaryActionAsLink.href)
     })
   })
 
-  describe("when the primary action is a button with only an onClick", () => {
+  describe('when the primary action is a button with only an onClick', () => {
     const testOnClickFn = vi.fn()
     const primaryActionAsButton = {
-      label: "primaryActionLabel",
+      label: 'primaryActionLabel',
       onClick: testOnClickFn,
       primary: true,
     }
@@ -68,13 +68,13 @@ describe("<TitleBlockZen />", () => {
       testOnClickFn.mockClear()
     })
 
-    it("renders the primary action button label and onClick", async () => {
+    it('renders the primary action button label and onClick', async () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" primaryAction={primaryActionAsButton}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId("title-block-primary-action-button")
+      const btn = getByTestId('title-block-primary-action-button')
       expect(btn.textContent).toEqual(primaryActionAsButton.label)
       await user.click(btn)
 
@@ -83,14 +83,14 @@ describe("<TitleBlockZen />", () => {
       })
     })
 
-    it("creates a mobile actions primary button", async () => {
+    it('creates a mobile actions primary button', async () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" primaryAction={primaryActionAsButton}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      const btn = getByTestId("title-block-mobile-actions-primary-button")
+      const btn = getByTestId('title-block-mobile-actions-primary-button')
       expect(btn.textContent).toEqual(primaryActionAsButton.label)
       await user.click(btn)
       await waitFor(() => {
@@ -99,17 +99,17 @@ describe("<TitleBlockZen />", () => {
     })
   })
 
-  describe("when the primary action is disabled", () => {
+  describe('when the primary action is disabled', () => {
     const testOnClickFn = vi.fn()
     const primaryActionAsButton = {
-      label: "primaryActionLabel",
+      label: 'primaryActionLabel',
       onClick: testOnClickFn,
       disabled: true,
       primary: true,
     }
     const primaryActionAsLink = {
-      label: "primaryActionLabel",
-      href: "#primaryActionHref",
+      label: 'primaryActionLabel',
+      href: '#primaryActionHref',
       disabled: true,
       primary: true,
     }
@@ -117,15 +117,13 @@ describe("<TitleBlockZen />", () => {
       testOnClickFn.mockClear()
     })
 
-    it("renders a disabled primary action button", async () => {
+    it('renders a disabled primary action button', async () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" primaryAction={primaryActionAsButton}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId(
-        "title-block-primary-action-button"
-      ) as HTMLButtonElement
+      const btn = getByTestId('title-block-primary-action-button') as HTMLButtonElement
       expect(btn.textContent).toEqual(primaryActionAsButton.label)
       expect(btn.disabled).toBeTruthy()
       await user.click(btn)
@@ -135,29 +133,25 @@ describe("<TitleBlockZen />", () => {
       })
     })
 
-    it("renders a disabled primary action link button", () => {
+    it('renders a disabled primary action link button', () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" primaryAction={primaryActionAsLink}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId(
-        "title-block-primary-action-button"
-      ) as HTMLButtonElement
+      const btn = getByTestId('title-block-primary-action-button') as HTMLButtonElement
       expect(btn.textContent).toEqual(primaryActionAsLink.label)
-      expect(btn.getAttribute("href")).not.toEqual(primaryActionAsLink.href)
+      expect(btn.getAttribute('href')).not.toEqual(primaryActionAsLink.href)
     })
 
-    it("creates a mobile actions primary button with disabled styles and no onClick", async () => {
+    it('creates a mobile actions primary button with disabled styles and no onClick', async () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" primaryAction={primaryActionAsButton}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      const btn = getByTestId(
-        "title-block-mobile-actions-primary-button"
-      ) as HTMLButtonElement
+      const btn = getByTestId('title-block-mobile-actions-primary-button') as HTMLButtonElement
       expect(btn.textContent).toEqual(primaryActionAsButton.label)
       await user.click(btn)
 
@@ -166,26 +160,24 @@ describe("<TitleBlockZen />", () => {
       })
     })
 
-    it("creates a mobile actions primary button with disabled styles and no href", () => {
+    it('creates a mobile actions primary button with disabled styles and no href', () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" primaryAction={primaryActionAsLink}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      const btn = getByTestId(
-        "title-block-mobile-actions-primary-button"
-      ) as HTMLButtonElement
+      const btn = getByTestId('title-block-mobile-actions-primary-button') as HTMLButtonElement
       expect(btn.textContent).toEqual(primaryActionAsLink.label)
-      expect(btn.getAttribute("href")).not.toEqual(primaryActionAsLink.href)
+      expect(btn.getAttribute('href')).not.toEqual(primaryActionAsLink.href)
     })
   })
 
-  describe("when the primary action is a button with both an href and an onClick", () => {
+  describe('when the primary action is a button with both an href and an onClick', () => {
     const testOnClickFn = vi.fn()
     const primaryActionAsLinkAndOnClick = {
-      label: "primaryActionLabel",
-      href: "#primaryActionHref",
+      label: 'primaryActionLabel',
+      href: '#primaryActionHref',
       onClick: testOnClickFn,
       primary: true,
     }
@@ -194,20 +186,15 @@ describe("<TitleBlockZen />", () => {
       testOnClickFn.mockClear()
     })
 
-    it("renders the primary action button label, href and onClick", async () => {
+    it('renders the primary action button label, href and onClick', async () => {
       const { getByTestId } = render(
-        <TitleBlockZen
-          title="Test Title"
-          primaryAction={primaryActionAsLinkAndOnClick}
-        >
+        <TitleBlockZen title="Test Title" primaryAction={primaryActionAsLinkAndOnClick}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId("title-block-primary-action-button")
+      const btn = getByTestId('title-block-primary-action-button')
       expect(btn.textContent).toEqual(primaryActionAsLinkAndOnClick.label)
-      expect(btn.getAttribute("href")).toEqual(
-        primaryActionAsLinkAndOnClick.href
-      )
+      expect(btn.getAttribute('href')).toEqual(primaryActionAsLinkAndOnClick.href)
       await user.click(btn)
 
       await waitFor(() => {
@@ -215,19 +202,14 @@ describe("<TitleBlockZen />", () => {
       })
     })
 
-    it("passes both the href and onClick to the mobile action drawer button", async () => {
+    it('passes both the href and onClick to the mobile action drawer button', async () => {
       const { getByTestId } = render(
-        <TitleBlockZen
-          title="Test Title"
-          primaryAction={primaryActionAsLinkAndOnClick}
-        >
+        <TitleBlockZen title="Test Title" primaryAction={primaryActionAsLinkAndOnClick}>
           Example
-        </TitleBlockZen>
-      )
-      const btn = getByTestId("title-block-mobile-actions-primary-button")
-      expect(btn.getAttribute("href")).toEqual(
-        primaryActionAsLinkAndOnClick.href
+        </TitleBlockZen>,
       )
+      const btn = getByTestId('title-block-mobile-actions-primary-button')
+      expect(btn.getAttribute('href')).toEqual(primaryActionAsLinkAndOnClick.href)
       await user.click(btn)
 
       await waitFor(() => {
@@ -236,28 +218,28 @@ describe("<TitleBlockZen />", () => {
     })
   })
 
-  describe("when the primary action is a menu", () => {
+  describe('when the primary action is a menu', () => {
     const primaryActionAsMenu = {
-      label: "primaryActionLabel",
+      label: 'primaryActionLabel',
       menuItems: [
         {
-          label: "Menu item 1",
-          href: "#",
+          label: 'Menu item 1',
+          href: '#',
         },
         {
-          label: "Menu item 1",
-          href: "#",
+          label: 'Menu item 1',
+          href: '#',
         },
       ],
     }
 
-    it("renders the primary action menu button with label and menu items", async () => {
+    it('renders the primary action menu button with label and menu items', async () => {
       const { getByTestId, getAllByTestId } = render(
         <TitleBlockZen title="Test Title" primaryAction={primaryActionAsMenu}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId("title-block-primary-action-button")
+      const btn = getByTestId('title-block-primary-action-button')
       expect(btn).toHaveAccessibleName(primaryActionAsMenu.label)
       await user.click(btn)
 
@@ -267,80 +249,76 @@ describe("<TitleBlockZen />", () => {
       })
     })
 
-    it("passes the primary menu items to the mobile actions drawer", () => {
+    it('passes the primary menu items to the mobile actions drawer', () => {
       const { getAllByTestId } = render(
         <TitleBlockZen title="Test Title" primaryAction={primaryActionAsMenu}>
           Example
-        </TitleBlockZen>
-      )
-      const menuItems = getAllByTestId(
-        /^title-block-mobile-actions-primary-link-/
+        </TitleBlockZen>,
       )
+      const menuItems = getAllByTestId(/^title-block-mobile-actions-primary-link-/)
       expect(menuItems.length).toEqual(2)
     })
   })
 
-  describe("when the default action is a button with only an href", () => {
+  describe('when the default action is a button with only an href', () => {
     const defaultActionAsLink = {
-      label: "defaultActionLabel",
-      href: "#defaultActionHref",
+      label: 'defaultActionLabel',
+      href: '#defaultActionHref',
     }
 
-    it("renders the default action button label and href", () => {
+    it('renders the default action button label and href', () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" defaultAction={defaultActionAsLink}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId("title-block-default-action-button")
+      const btn = getByTestId('title-block-default-action-button')
       expect(btn.textContent).toEqual(defaultActionAsLink.label)
-      expect(btn.getAttribute("href")).toEqual(defaultActionAsLink.href)
+      expect(btn.getAttribute('href')).toEqual(defaultActionAsLink.href)
     })
 
-    it("creates a mobile actions default action menu item", () => {
+    it('creates a mobile actions default action menu item', () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" defaultAction={defaultActionAsLink}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      const menuItem = getByTestId("title-block-mobile-actions-default-link")
-      expect(menuItem.getAttribute("href")).toEqual(defaultActionAsLink.href)
+      const menuItem = getByTestId('title-block-mobile-actions-default-link')
+      expect(menuItem.getAttribute('href')).toEqual(defaultActionAsLink.href)
       expect(menuItem.textContent).toEqual(defaultActionAsLink.label)
     })
 
-    it("renders the mobile actions menu drawer handle even with no primary action", () => {
+    it('renders the mobile actions menu drawer handle even with no primary action', () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" defaultAction={defaultActionAsLink}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      expect(
-        getByTestId("title-block-mobile-actions-drawer-handle")
-      ).toBeTruthy()
+      expect(getByTestId('title-block-mobile-actions-drawer-handle')).toBeTruthy()
     })
   })
 
-  describe("when the default action is a button with only an onClick", () => {
+  describe('when the default action is a button with only an onClick', () => {
     const testOnClickFn = vi.fn()
     const defaultActionAsButton = {
-      label: "defaultActionLabel",
-      onClick: testOnClickFn,
-      "data-testid": "title-block-mobile-actions-default-action",
+      'label': 'defaultActionLabel',
+      'onClick': testOnClickFn,
+      'data-testid': 'title-block-mobile-actions-default-action',
     }
 
     beforeEach(() => {
       testOnClickFn.mockClear()
     })
 
-    it("renders the default action button label and onClick", async () => {
+    it('renders the default action button label and onClick', async () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" defaultAction={defaultActionAsButton}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId("title-block-default-action-button")
+      const btn = getByTestId('title-block-default-action-button')
       expect(btn.textContent).toEqual(defaultActionAsButton.label)
       await user.click(btn)
 
@@ -349,14 +327,14 @@ describe("<TitleBlockZen />", () => {
       })
     })
 
-    it("creates a mobile actions default action menu item", async () => {
+    it('creates a mobile actions default action menu item', async () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" defaultAction={defaultActionAsButton}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      const menuItem = getByTestId("title-block-mobile-actions-default-action")
+      const menuItem = getByTestId('title-block-mobile-actions-default-action')
       expect(menuItem.textContent).toEqual(defaultActionAsButton.label)
       await user.click(menuItem)
 
@@ -365,24 +343,22 @@ describe("<TitleBlockZen />", () => {
       })
     })
 
-    it("renders the mobile actions menu drawer handle even with no primary action", () => {
+    it('renders the mobile actions menu drawer handle even with no primary action', () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" defaultAction={defaultActionAsButton}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      expect(
-        getByTestId("title-block-mobile-actions-drawer-handle")
-      ).toBeTruthy()
+      expect(getByTestId('title-block-mobile-actions-drawer-handle')).toBeTruthy()
     })
   })
 
-  describe("when the default action is a button with both an href and an onClick", () => {
+  describe('when the default action is a button with both an href and an onClick', () => {
     const testOnClickFn = vi.fn()
     const defaultActionAsLinkAndOnClick = {
-      label: "defaultActionLabel",
-      href: "#defaultActionHref",
+      label: 'defaultActionLabel',
+      href: '#defaultActionHref',
       onClick: testOnClickFn,
     }
 
@@ -390,20 +366,15 @@ describe("<TitleBlockZen />", () => {
       testOnClickFn.mockClear()
     })
 
-    it("renders the default action button label, href and onClick", async () => {
+    it('renders the default action button label, href and onClick', async () => {
       const { getByTestId } = render(
-        <TitleBlockZen
-          title="Test Title"
-          defaultAction={defaultActionAsLinkAndOnClick}
-        >
+        <TitleBlockZen title="Test Title" defaultAction={defaultActionAsLinkAndOnClick}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId("title-block-default-action-button")
+      const btn = getByTestId('title-block-default-action-button')
       expect(btn.textContent).toEqual(defaultActionAsLinkAndOnClick.label)
-      expect(btn.getAttribute("href")).toEqual(
-        defaultActionAsLinkAndOnClick.href
-      )
+      expect(btn.getAttribute('href')).toEqual(defaultActionAsLinkAndOnClick.href)
       await user.click(btn)
 
       await waitFor(() => {
@@ -411,24 +382,17 @@ describe("<TitleBlockZen />", () => {
       })
     })
 
-    it("creates a single mobile actions default link menu item with both href and onClick", async () => {
+    it('creates a single mobile actions default link menu item with both href and onClick', async () => {
       const { getByTestId, queryByTestId } = render(
-        <TitleBlockZen
-          title="Test Title"
-          defaultAction={defaultActionAsLinkAndOnClick}
-        >
+        <TitleBlockZen title="Test Title" defaultAction={defaultActionAsLinkAndOnClick}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      const menuItem = getByTestId("title-block-mobile-actions-default-link")
-      const defaultAction = queryByTestId(
-        "title-block-mobile-actions-default-action"
-      )
+      const menuItem = getByTestId('title-block-mobile-actions-default-link')
+      const defaultAction = queryByTestId('title-block-mobile-actions-default-action')
       expect(defaultAction).toBeFalsy()
-      expect(menuItem.getAttribute("href")).toEqual(
-        defaultActionAsLinkAndOnClick.href
-      )
+      expect(menuItem.getAttribute('href')).toEqual(defaultActionAsLinkAndOnClick.href)
       expect(menuItem.textContent).toEqual(defaultActionAsLinkAndOnClick.label)
       await user.click(menuItem)
 
@@ -438,16 +402,16 @@ describe("<TitleBlockZen />", () => {
     })
   })
 
-  describe("when the default action is disabled", () => {
+  describe('when the default action is disabled', () => {
     const testOnClickFn = vi.fn()
     const defaultActionAsButton = {
-      label: "defaultActionLabel",
+      label: 'defaultActionLabel',
       onClick: testOnClickFn,
       disabled: true,
     }
     const defaultActionAsLink = {
-      label: "defaultActionLabel",
-      href: "#defaultActionHref",
+      label: 'defaultActionLabel',
+      href: '#defaultActionHref',
       disabled: true,
     }
 
@@ -455,15 +419,13 @@ describe("<TitleBlockZen />", () => {
       testOnClickFn.mockClear()
     })
 
-    it("renders a disabled default action button", async () => {
+    it('renders a disabled default action button', async () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" defaultAction={defaultActionAsButton}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId(
-        "title-block-default-action-button"
-      ) as HTMLButtonElement
+      const btn = getByTestId('title-block-default-action-button') as HTMLButtonElement
       expect(btn.textContent).toEqual(defaultActionAsButton.label)
       expect(btn.disabled).toBeTruthy()
       await user.click(btn)
@@ -473,29 +435,25 @@ describe("<TitleBlockZen />", () => {
       })
     })
 
-    it("renders a disabled default action link button", () => {
+    it('renders a disabled default action link button', () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" defaultAction={defaultActionAsLink}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId(
-        "title-block-default-action-button"
-      ) as HTMLButtonElement
+      const btn = getByTestId('title-block-default-action-button') as HTMLButtonElement
       expect(btn.textContent).toEqual(defaultActionAsLink.label)
-      expect(btn.getAttribute("href")).not.toEqual(defaultActionAsLink.href)
+      expect(btn.getAttribute('href')).not.toEqual(defaultActionAsLink.href)
     })
 
-    it("creates a mobile actions default action menu item with disabled styles and no onClick", async () => {
+    it('creates a mobile actions default action menu item with disabled styles and no onClick', async () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" defaultAction={defaultActionAsButton}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      const btn = getByTestId(
-        "title-block-mobile-actions-default-action"
-      ) as HTMLButtonElement
+      const btn = getByTestId('title-block-mobile-actions-default-action') as HTMLButtonElement
       expect(btn.textContent).toEqual(defaultActionAsButton.label)
       await user.click(btn)
 
@@ -504,26 +462,24 @@ describe("<TitleBlockZen />", () => {
       })
     })
 
-    it("creates a mobile actions default link menu item with disabled styles and no href", () => {
+    it('creates a mobile actions default link menu item with disabled styles and no href', () => {
       const { getByTestId } = render(
         <TitleBlockZen title="Test Title" defaultAction={defaultActionAsLink}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      const btn = getByTestId(
-        "title-block-mobile-actions-default-link"
-      ) as HTMLButtonElement
+      const btn = getByTestId('title-block-mobile-actions-default-link') as HTMLButtonElement
       expect(btn.textContent).toEqual(defaultActionAsLink.label)
-      expect(btn.getAttribute("href")).not.toEqual(defaultActionAsLink.href)
+      expect(btn.getAttribute('href')).not.toEqual(defaultActionAsLink.href)
     })
   })
 
-  describe("when a secondary action is passed with both an href and an onClick", () => {
+  describe('when a secondary action is passed with both an href and an onClick', () => {
     const testOnClickFn = vi.fn()
     const secondaryActionWithLinkAndOnClick = {
-      label: "secondaryActionLabel",
-      href: "#secondaryActionHref",
+      label: 'secondaryActionLabel',
+      href: '#secondaryActionHref',
       onClick: testOnClickFn,
     }
 
@@ -531,26 +487,19 @@ describe("<TitleBlockZen />", () => {
       testOnClickFn.mockClear()
     })
 
-    it("renders the secondary action with both the href and onClick", async () => {
+    it('renders the secondary action with both the href and onClick', async () => {
       const mockWarnFn = vi.fn()
-      const spy = vi
-        .spyOn(global.console, "warn")
-        .mockImplementation(mockWarnFn)
+      const spy = vi.spyOn(global.console, 'warn').mockImplementation(mockWarnFn)
       const { getByTestId } = render(
-        <TitleBlockZen
-          title="Test Title"
-          secondaryActions={[secondaryActionWithLinkAndOnClick]}
-        >
+        <TitleBlockZen title="Test Title" secondaryActions={[secondaryActionWithLinkAndOnClick]}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getByTestId("title-block-secondary-actions-button")
+      const btn = getByTestId('title-block-secondary-actions-button')
       expect(btn).toBeTruthy()
       expect(mockWarnFn).toBeCalled()
       expect(btn.textContent).toEqual(secondaryActionWithLinkAndOnClick.label)
-      expect(btn.getAttribute("href")).toEqual(
-        secondaryActionWithLinkAndOnClick.href
-      )
+      expect(btn.getAttribute('href')).toEqual(secondaryActionWithLinkAndOnClick.href)
       await user.click(btn)
       await waitFor(() => {
         expect(testOnClickFn).toHaveBeenCalled()
@@ -558,24 +507,17 @@ describe("<TitleBlockZen />", () => {
       spy.mockRestore()
     })
 
-    it("renders the action as a single mobile actions drawer item with an onClick", async () => {
+    it('renders the action as a single mobile actions drawer item with an onClick', async () => {
       const mockWarnFn = vi.fn()
-      const spy = vi
-        .spyOn(global.console, "warn")
-        .mockImplementation(mockWarnFn)
+      const spy = vi.spyOn(global.console, 'warn').mockImplementation(mockWarnFn)
       const { getAllByTestId } = render(
-        <TitleBlockZen
-          title="Test Title"
-          secondaryActions={[secondaryActionWithLinkAndOnClick]}
-        >
+        <TitleBlockZen title="Test Title" secondaryActions={[secondaryActionWithLinkAndOnClick]}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getAllByTestId("title-block-mobile-actions-secondary-action")
+      const btn = getAllByTestId('title-block-mobile-actions-secondary-action')
       expect(btn.length).toEqual(1)
-      expect(btn[0].getAttribute("href")).not.toEqual(
-        secondaryActionWithLinkAndOnClick.href
-      )
+      expect(btn[0].getAttribute('href')).not.toEqual(secondaryActionWithLinkAndOnClick.href)
       await user.click(btn[0])
 
       await waitFor(() => {
@@ -585,9 +527,9 @@ describe("<TitleBlockZen />", () => {
     })
   })
 
-  describe("when a custom compent is provided for section title", () => {
-    it("renders a custom element in section title", async () => {
-      const expectedText = "This is a button"
+  describe('when a custom compent is provided for section title', () => {
+    it('renders a custom element in section title', async () => {
+      const expectedText = 'This is a button'
       const CustomComponent = (props: SectionTitleRenderProps): JSX.Element => (
         <button type="button">{props.sectionTitle}</button>
       )
@@ -596,48 +538,45 @@ describe("<TitleBlockZen />", () => {
           title="Test title"
           sectionTitle={expectedText}
           renderSectionTitle={CustomComponent}
-        />
+        />,
       )
-      const el = await screen.findByRole("button")
+      const el = await screen.findByRole('button')
       expect(el.textContent).toBe(expectedText)
     })
 
-    it("renders a heading when no render prop is provided", async () => {
-      const expectedText = "My expected text"
+    it('renders a heading when no render prop is provided', async () => {
+      const expectedText = 'My expected text'
       render(<TitleBlockZen title="Test title" sectionTitle={expectedText} />)
-      const el = await screen.findByRole("heading", { level: 2 })
+      const el = await screen.findByRole('heading', { level: 2 })
       expect(el.textContent).toBe(expectedText)
     })
   })
 
-  describe("when a secondary action is passed with only an href", () => {
+  describe('when a secondary action is passed with only an href', () => {
     const secondaryActionWithLink = {
-      label: "secondaryActionLabel",
-      href: "#secondaryActionHref",
+      label: 'secondaryActionLabel',
+      href: '#secondaryActionHref',
     }
 
-    it("renders the action as a single mobile actions drawer item with the correct href", () => {
+    it('renders the action as a single mobile actions drawer item with the correct href', () => {
       const { getAllByTestId } = render(
-        <TitleBlockZen
-          title="Test Title"
-          secondaryActions={[secondaryActionWithLink]}
-        >
+        <TitleBlockZen title="Test Title" secondaryActions={[secondaryActionWithLink]}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getAllByTestId("title-block-mobile-actions-secondary-action")
+      const btn = getAllByTestId('title-block-mobile-actions-secondary-action')
       expect(btn.length).toEqual(1)
-      expect(btn[0].getAttribute("href")).toEqual(secondaryActionWithLink.href)
+      expect(btn[0].getAttribute('href')).toEqual(secondaryActionWithLink.href)
     })
   })
 
-  describe("when autoHideMobileActionsMenu is true", () => {
+  describe('when autoHideMobileActionsMenu is true', () => {
     const secondaryActionWithLink = {
-      label: "secondaryActionLabel",
-      href: "#secondaryActionHref",
+      label: 'secondaryActionLabel',
+      href: '#secondaryActionHref',
     }
 
-    it("hides the other actions menu when user clicks a menu item", async () => {
+    it('hides the other actions menu when user clicks a menu item', async () => {
       const { getAllByTestId } = render(
         <TitleBlockZen
           title="Test Title"
@@ -645,75 +584,63 @@ describe("<TitleBlockZen />", () => {
           autoHideMobileActionsMenu
         >
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      const mobileActionsButton = screen.getByRole("button", {
-        name: "Other actions",
+      const mobileActionsButton = screen.getByRole('button', {
+        name: 'Other actions',
       })
 
-      expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("false")
+      expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
       await user.click(mobileActionsButton)
       await waitFor(() => {
-        expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual(
-          "true"
-        )
+        expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('true')
       })
 
-      const btn = getAllByTestId("title-block-mobile-actions-secondary-action")
+      const btn = getAllByTestId('title-block-mobile-actions-secondary-action')
       expect(btn.length).toEqual(1)
       await user.click(btn[0])
 
       await waitFor(() => {
-        expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual(
-          "false"
-        )
+        expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
       })
     })
   })
 
-  describe("when a disabled secondary action is passed with only an href", () => {
+  describe('when a disabled secondary action is passed with only an href', () => {
     const secondaryActionWithLink = {
-      label: "secondaryActionLabel",
-      href: "#secondaryActionHref",
+      label: 'secondaryActionLabel',
+      href: '#secondaryActionHref',
       disabled: true,
     }
 
-    it("renders the action as a single disabled mobile actions drawer item with no href", () => {
+    it('renders the action as a single disabled mobile actions drawer item with no href', () => {
       const { getAllByTestId } = render(
-        <TitleBlockZen
-          title="Test Title"
-          secondaryActions={[secondaryActionWithLink]}
-        >
+        <TitleBlockZen title="Test Title" secondaryActions={[secondaryActionWithLink]}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getAllByTestId("title-block-mobile-actions-secondary-action")
+      const btn = getAllByTestId('title-block-mobile-actions-secondary-action')
       expect(btn.length).toEqual(1)
-      expect(btn[0].getAttribute("href")).not.toEqual(
-        secondaryActionWithLink.href
-      )
+      expect(btn[0].getAttribute('href')).not.toEqual(secondaryActionWithLink.href)
     })
   })
 
-  describe("when a disabled secondary action is passed with only an onClick", () => {
+  describe('when a disabled secondary action is passed with only an onClick', () => {
     const testOnClickFn = vi.fn()
     const secondaryActionWithOnClick = {
-      label: "secondaryActionLabel",
+      label: 'secondaryActionLabel',
       onClick: testOnClickFn,
       disabled: true,
     }
 
-    it("renders the action as a single disabled mobile actions drawer item with no onClick", async () => {
+    it('renders the action as a single disabled mobile actions drawer item with no onClick', async () => {
       const { getAllByTestId } = render(
-        <TitleBlockZen
-          title="Test Title"
-          secondaryActions={[secondaryActionWithOnClick]}
-        >
+        <TitleBlockZen title="Test Title" secondaryActions={[secondaryActionWithOnClick]}>
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
-      const btn = getAllByTestId("title-block-mobile-actions-secondary-action")
+      const btn = getAllByTestId('title-block-mobile-actions-secondary-action')
       expect(btn.length).toEqual(1)
       await user.click(btn[0])
 
@@ -723,15 +650,15 @@ describe("<TitleBlockZen />", () => {
     })
   })
 
-  describe("when a disabled secondary overflow menu item is passed with only an onClick for the action", () => {
+  describe('when a disabled secondary overflow menu item is passed with only an onClick for the action', () => {
     const testOnClickFn = vi.fn()
     const secondaryOverflowMenuItemWithOnClick = {
-      label: "secondaryActionOverflowMenuItemLabel",
+      label: 'secondaryActionOverflowMenuItemLabel',
       action: testOnClickFn,
       disabled: true,
     }
 
-    it("renders the action as a single disabled mobile actions drawer item with no onClick", async () => {
+    it('renders the action as a single disabled mobile actions drawer item with no onClick', async () => {
       const { getAllByTestId } = render(
         <TitleBlockZen
           title="Test Title"
@@ -739,11 +666,9 @@ describe("<TitleBlockZen />", () => {
           secondaryOverflowMenuItems={[secondaryOverflowMenuItemWithOnClick]}
         >
           Example
-        </TitleBlockZen>
-      )
-      const btn = getAllByTestId(
-        "title-block-mobile-actions-overflow-menu-item"
+        </TitleBlockZen>,
       )
+      const btn = getAllByTestId('title-block-mobile-actions-overflow-menu-item')
       expect(btn.length).toEqual(1)
       await user.click(btn[0])
 
@@ -753,18 +678,17 @@ describe("<TitleBlockZen />", () => {
     })
   })
 
-  describe("automation ID behaviour", () => {
-    describe("when default automation IDs are not provided alongside required conditional renders", () => {
-      it("renders the default automation IDs", () => {
+  describe('automation ID behaviour', () => {
+    describe('when default automation IDs are not provided alongside required conditional renders', () => {
+      it('renders the default automation IDs', () => {
         const automationdIds = {
-          titleAutomationId: "TitleBlock__Title",
-          avatarAutomationId: "TitleBlock__Avatar",
-          subtitleAutomationId: "TitleBlock__Subtitle",
-          sectionTitleAutomationId: "TitleBlock__SectionTitle",
-          sectionTitleDescriptionAutomationId:
-            "TitleBlock__SectionTitleDescription",
-          breadcrumbAutomationId: "TitleBlock__Breadcrumb",
-          breadcrumbTextAutomationId: "TitleBlock__BreadcrumbText",
+          titleAutomationId: 'TitleBlock__Title',
+          avatarAutomationId: 'TitleBlock__Avatar',
+          subtitleAutomationId: 'TitleBlock__Subtitle',
+          sectionTitleAutomationId: 'TitleBlock__SectionTitle',
+          sectionTitleDescriptionAutomationId: 'TitleBlock__SectionTitleDescription',
+          breadcrumbAutomationId: 'TitleBlock__Breadcrumb',
+          breadcrumbTextAutomationId: 'TitleBlock__BreadcrumbText',
         }
 
         const { container } = render(
@@ -773,36 +697,33 @@ describe("<TitleBlockZen />", () => {
             subtitle="Test Subtitle"
             avatar={<div>Test JSX Avatar Component</div>}
             breadcrumb={{
-              text: "Test Breadcrumb",
-              path: "/",
+              text: 'Test Breadcrumb',
+              path: '/',
               handleClick: vi.fn(),
             }}
             sectionTitle="Test Section Title"
             sectionTitleDescription="Test Section Title Description"
           >
             Example
-          </TitleBlockZen>
+          </TitleBlockZen>,
         )
 
         for (const automationId of Object.values(automationdIds)) {
-          expect(
-            container.querySelector(`[data-automation-id="${automationId}"]`)
-          ).toBeTruthy()
+          expect(container.querySelector(`[data-automation-id="${automationId}"]`)).toBeTruthy()
         }
       })
     })
 
-    describe("when default automation IDs are provided alongside required conditional renders", () => {
-      it("renders the provided automation IDs", () => {
+    describe('when default automation IDs are provided alongside required conditional renders', () => {
+      it('renders the provided automation IDs', () => {
         const automationdIds = {
-          titleAutomationId: "titleBlockTitle",
-          avatarAutomationId: "titleBlockAvatar",
-          subtitleAutomationId: "titleBlockSubtitle",
-          sectionTitleAutomationId: "titleBlockSectionTitle",
-          sectionTitleDescriptionAutomationId:
-            "titleBlockSectionTitleDescription",
-          breadcrumbAutomationId: "breadcrumbAutomationId",
-          breadcrumbTextAutomationId: "breadcrumbTextAutomationId",
+          titleAutomationId: 'titleBlockTitle',
+          avatarAutomationId: 'titleBlockAvatar',
+          subtitleAutomationId: 'titleBlockSubtitle',
+          sectionTitleAutomationId: 'titleBlockSectionTitle',
+          sectionTitleDescriptionAutomationId: 'titleBlockSectionTitleDescription',
+          breadcrumbAutomationId: 'breadcrumbAutomationId',
+          breadcrumbTextAutomationId: 'breadcrumbTextAutomationId',
         }
 
         const { container } = render(
@@ -811,8 +732,8 @@ describe("<TitleBlockZen />", () => {
             subtitle="Test Subtitle"
             avatar={<div>Test JSX Avatar Component</div>}
             breadcrumb={{
-              text: "Test Breadcrumb",
-              path: "/",
+              text: 'Test Breadcrumb',
+              path: '/',
               handleClick: vi.fn(),
             }}
             sectionTitle="Test Section Title"
@@ -821,43 +742,37 @@ describe("<TitleBlockZen />", () => {
             avatarAutomationId={automationdIds.avatarAutomationId}
             subtitleAutomationId={automationdIds.subtitleAutomationId}
             sectionTitleAutomationId={automationdIds.sectionTitleAutomationId}
-            sectionTitleDescriptionAutomationId={
-              automationdIds.sectionTitleDescriptionAutomationId
-            }
+            sectionTitleDescriptionAutomationId={automationdIds.sectionTitleDescriptionAutomationId}
             breadcrumbAutomationId={automationdIds.breadcrumbAutomationId}
-            breadcrumbTextAutomationId={
-              automationdIds.breadcrumbTextAutomationId
-            }
+            breadcrumbTextAutomationId={automationdIds.breadcrumbTextAutomationId}
           >
             Example
-          </TitleBlockZen>
+          </TitleBlockZen>,
         )
 
         for (const automationId of Object.values(automationdIds)) {
-          expect(
-            container.querySelector(`[data-automation-id="${automationId}"]`)
-          ).toBeTruthy()
+          expect(container.querySelector(`[data-automation-id="${automationId}"]`)).toBeTruthy()
         }
       })
     })
   })
 
-  describe("breadcrumb", () => {
-    it("renders a link when you pass a path prop", () => {
+  describe('breadcrumb', () => {
+    it('renders a link when you pass a path prop', () => {
       render(
         <TitleBlockZen
           title="Test Title"
           breadcrumb={{
-            text: "Back",
-            path: "/path/to/somewhere",
+            text: 'Back',
+            path: '/path/to/somewhere',
             handleClick: (): void => undefined,
           }}
         >
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      expect(screen.getByRole("link", { name: "Back" })).toBeInTheDocument()
+      expect(screen.getByRole('link', { name: 'Back' })).toBeInTheDocument()
     })
 
     it("renders a button when you don't pass a path prop", () => {
@@ -865,15 +780,15 @@ describe("<TitleBlockZen />", () => {
         <TitleBlockZen
           title="Test Title"
           breadcrumb={{
-            text: "Back",
+            text: 'Back',
             handleClick: (): void => undefined,
           }}
         >
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      expect(screen.getByRole("button", { name: "Back" })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument()
     })
 
     it("renders a custom component when you pass a 'render' prop", async () => {
@@ -894,17 +809,17 @@ describe("<TitleBlockZen />", () => {
         <TitleBlockZen
           title="Test Title"
           breadcrumb={{
-            text: "Back",
+            text: 'Back',
             handleClick: mockFn,
             render: CustomComponent,
           }}
         >
           Example
-        </TitleBlockZen>
+        </TitleBlockZen>,
       )
 
-      const customElement = screen.getByTestId("custom-component")
-      expect(customElement).toHaveTextContent("Back")
+      const customElement = screen.getByTestId('custom-component')
+      expect(customElement).toHaveTextContent('Back')
       await user.click(customElement)
 
       await waitFor(() => {
@@ -915,11 +830,7 @@ describe("<TitleBlockZen />", () => {
 
   describe("renders a custom component when you pass a 'component' prop to a action", () => {
     const MockLinkComponent = (props: any): JSX.Element => (
-      <a
-        className={props.className}
-        href={props.href}
-        data-testid={props["data-testid"]}
-      >
+      <a className={props.className} href={props.href} data-testid={props['data-testid']}>
         {props.children}
       </a>
     )
@@ -928,82 +839,78 @@ describe("<TitleBlockZen />", () => {
         type="button"
         className={props.className}
         onClick={props.onClick}
-        data-testid={props["data-testid"]}
+        data-testid={props['data-testid']}
       >
         {props.children}
       </button>
     )
 
-    describe("primaryAction", () => {
-      it("will render a custom anchor component in the main action toolbar", () => {
+    describe('primaryAction', () => {
+      it('will render a custom anchor component in the main action toolbar', () => {
         render(
           <TitleBlockZen
             title="Test Title"
             primaryAction={{
-              label: "Primary action",
-              href: "#test-primary",
+              label: 'Primary action',
+              href: '#test-primary',
               component: MockLinkComponent,
             }}
           >
             Example
-          </TitleBlockZen>
+          </TitleBlockZen>,
         )
-        const toolbar = screen.getByTestId("title-block-main-actions-toolbar")
-        within(toolbar).getByRole("link", {
-          name: "Primary action",
+        const toolbar = screen.getByTestId('title-block-main-actions-toolbar')
+        within(toolbar).getByRole('link', {
+          name: 'Primary action',
         })
         expect(
-          within(toolbar).getByRole("link", {
-            name: "Primary action",
-          })
-        ).toHaveAttribute("href", "#test-primary")
+          within(toolbar).getByRole('link', {
+            name: 'Primary action',
+          }),
+        ).toHaveAttribute('href', '#test-primary')
       })
 
-      it("will render a custom anchor component in the mobile drawer", () => {
+      it('will render a custom anchor component in the mobile drawer', () => {
         render(
           <TitleBlockZen
             title="Test Title"
             primaryAction={{
-              label: "Primary action",
-              href: "#test-primary",
+              label: 'Primary action',
+              href: '#test-primary',
               component: MockLinkComponent,
             }}
           >
             Example
-          </TitleBlockZen>
+          </TitleBlockZen>,
         )
-        const drawer = screen.getByTestId(
-          "title-block-mobile-actions-drawer-handle"
-        )
-        within(drawer).getByRole("link", {
-          name: "Primary action",
+        const drawer = screen.getByTestId('title-block-mobile-actions-drawer-handle')
+        within(drawer).getByRole('link', {
+          name: 'Primary action',
         })
         expect(
-          within(drawer).getByRole("link", {
-            name: "Primary action",
-          })
-        ).toHaveAttribute("href", "#test-primary")
+          within(drawer).getByRole('link', {
+            name: 'Primary action',
+          }),
+        ).toHaveAttribute('href', '#test-primary')
       })
 
-      it("will render custom button with functional onClick", async () => {
+      it('will render custom button with functional onClick', async () => {
         const testClickFunc = vi.fn()
         render(
           <TitleBlockZen
             title="Test Title"
             primaryAction={{
-              label: "Primary action",
+              label: 'Primary action',
               onClick: testClickFunc,
               component: MockButtonComponent,
             }}
           >
             Example
-          </TitleBlockZen>
-        )
-        const drawer = screen.getByTestId(
-          "title-block-mobile-actions-drawer-handle"
+          </TitleBlockZen>,
         )
-        const drawerBtn = within(drawer).getByRole("button", {
-          name: "Primary action",
+        const drawer = screen.getByTestId('title-block-mobile-actions-drawer-handle')
+        const drawerBtn = within(drawer).getByRole('button', {
+          name: 'Primary action',
         })
         await user.click(drawerBtn)
 
@@ -1012,158 +919,144 @@ describe("<TitleBlockZen />", () => {
         })
       })
 
-      it("will render custom button with children and not label", () => {
+      it('will render custom button with children and not label', () => {
         const testClickFunc = vi.fn()
         render(
           <TitleBlockZen
             title="Test Title"
             primaryAction={{
-              label: "Primary action",
+              label: 'Primary action',
               onClick: testClickFunc,
               component: (props): JSX.Element => (
-                <MockButtonComponent {...props}>
-                  This will replace label
-                </MockButtonComponent>
+                <MockButtonComponent {...props}>This will replace label</MockButtonComponent>
               ),
             }}
           >
             Example
-          </TitleBlockZen>
-        )
-        const drawer = screen.getByTestId(
-          "title-block-mobile-actions-drawer-handle"
+          </TitleBlockZen>,
         )
-        within(drawer).getByRole("button", {
-          name: "This will replace label",
+        const drawer = screen.getByTestId('title-block-mobile-actions-drawer-handle')
+        within(drawer).getByRole('button', {
+          name: 'This will replace label',
         })
         expect(
-          within(drawer).queryByRole("button", {
-            name: "Primary action",
-          })
+          within(drawer).queryByRole('button', {
+            name: 'Primary action',
+          }),
         ).toBeFalsy()
       })
     })
 
-    describe("secondaryActions", () => {
-      it("will render multiple custom anchor components in the secondary actions toolbar", () => {
+    describe('secondaryActions', () => {
+      it('will render multiple custom anchor components in the secondary actions toolbar', () => {
         render(
           <TitleBlockZen
             title="Test Title"
             secondaryActions={[
               {
-                label: "Secondary action 1",
-                href: "#test-secondary",
+                label: 'Secondary action 1',
+                href: '#test-secondary',
                 component: MockLinkComponent,
               },
               {
-                label: "Secondary action 2",
-                href: "#test-secondary-2",
+                label: 'Secondary action 2',
+                href: '#test-secondary-2',
                 component: MockLinkComponent,
               },
             ]}
           >
             Example
-          </TitleBlockZen>
+          </TitleBlockZen>,
         )
-        const toolbar = screen.getByTestId(
-          "title-block-secondary-actions-toolbar"
-        )
-        const links = within(toolbar).getAllByRole("link")
+        const toolbar = screen.getByTestId('title-block-secondary-actions-toolbar')
+        const links = within(toolbar).getAllByRole('link')
         expect(links.length).toBe(2)
-        expect(links[0]).toHaveAttribute("href", "#test-secondary")
-        expect(links[1]).toHaveAttribute("href", "#test-secondary-2")
+        expect(links[0]).toHaveAttribute('href', '#test-secondary')
+        expect(links[1]).toHaveAttribute('href', '#test-secondary-2')
       })
 
-      it("will render multiple custom anchor components in the secondary actions mobile Drawer", () => {
+      it('will render multiple custom anchor components in the secondary actions mobile Drawer', () => {
         render(
           <TitleBlockZen
             title="Test Title"
             secondaryActions={[
               {
-                label: "Secondary action 1",
-                href: "#test-secondary",
+                label: 'Secondary action 1',
+                href: '#test-secondary',
                 component: MockLinkComponent,
               },
               {
-                label: "Secondary action 2",
-                href: "#test-secondary-2",
+                label: 'Secondary action 2',
+                href: '#test-secondary-2',
                 component: MockLinkComponent,
               },
             ]}
           >
             Example
-          </TitleBlockZen>
-        )
-        const links = screen.getAllByTestId(
-          "title-block-mobile-actions-secondary-action"
+          </TitleBlockZen>,
         )
+        const links = screen.getAllByTestId('title-block-mobile-actions-secondary-action')
         expect(links.length).toBe(2)
-        expect(links[0]).toHaveAttribute("href", "#test-secondary")
-        expect(links[1]).toHaveAttribute("href", "#test-secondary-2")
+        expect(links[0]).toHaveAttribute('href', '#test-secondary')
+        expect(links[1]).toHaveAttribute('href', '#test-secondary-2')
       })
     })
 
-    describe("defaultAction", () => {
-      it("will render a custom anchor components in the main action toolbar", () => {
+    describe('defaultAction', () => {
+      it('will render a custom anchor components in the main action toolbar', () => {
         render(
           <TitleBlockZen
             title="Test Title"
             defaultAction={{
-              label: "Default action",
-              href: "#test-default",
+              label: 'Default action',
+              href: '#test-default',
               component: MockLinkComponent,
             }}
           >
             Example
-          </TitleBlockZen>
+          </TitleBlockZen>,
         )
-        const toolbar = screen.getByTestId("title-block-main-actions-toolbar")
-        const defaultActionAnchor = within(toolbar).getByRole("link", {
-          name: "Default action",
+        const toolbar = screen.getByTestId('title-block-main-actions-toolbar')
+        const defaultActionAnchor = within(toolbar).getByRole('link', {
+          name: 'Default action',
         })
-        expect(defaultActionAnchor).toHaveAttribute("href", "#test-default")
+        expect(defaultActionAnchor).toHaveAttribute('href', '#test-default')
       })
 
-      it("will render the component above primary action in the Drawer content if it is a link", () => {
+      it('will render the component above primary action in the Drawer content if it is a link', () => {
         render(
           <TitleBlockZen
             title="Test Title"
             defaultAction={{
-              label: "Default action",
-              href: "#test-default",
+              label: 'Default action',
+              href: '#test-default',
               component: MockLinkComponent,
             }}
           >
             Example
-          </TitleBlockZen>
-        )
-        const mobileActionLink = screen.getByTestId(
-          "title-block-mobile-actions-default-link"
+          </TitleBlockZen>,
         )
+        const mobileActionLink = screen.getByTestId('title-block-mobile-actions-default-link')
 
         expect(mobileActionLink).toBeInTheDocument()
       })
 
-      it("will render the component in the top list of the Drawer content if it is a clickable button", () => {
+      it('will render the component in the top list of the Drawer content if it is a clickable button', () => {
         const testClickFunc = vi.fn()
         render(
           <TitleBlockZen
             title="Test Title"
             defaultAction={{
-              label: "Default action",
+              label: 'Default action',
               onClick: testClickFunc,
               component: MockButtonComponent,
             }}
           >
             Example
-          </TitleBlockZen>
+          </TitleBlockZen>,
         )
-        expect(
-          screen.queryByTestId("title-block-mobile-actions-default-link")
-        ).toBeFalsy()
-        expect(
-          screen.getByTestId("title-block-mobile-actions-default-action")
-        ).toBeInTheDocument()
+        expect(screen.queryByTestId('title-block-mobile-actions-default-link')).toBeFalsy()
+        expect(screen.getByTestId('title-block-mobile-actions-default-action')).toBeInTheDocument()
       })
     })
   })