{trailingAction ?
{trailingAction}
: null}
@@ -82,14 +90,16 @@ export const CampaignWizardShell = ({
{municipalityLabel}
) : null}
-
- {stepTitle}
-
+ {hasStepTitle ? (
+
+ {stepTitle}
+
+ ) : null}
{children}
diff --git a/src/components/campaign/shared/WizardMunicipalitySearchStep.tsx b/src/components/campaign/shared/WizardMunicipalitySearchStep.tsx
index 85fd3c77..34a98a1c 100644
--- a/src/components/campaign/shared/WizardMunicipalitySearchStep.tsx
+++ b/src/components/campaign/shared/WizardMunicipalitySearchStep.tsx
@@ -3,6 +3,7 @@
import { useEffect, useMemo, useRef, useState } from 'react'
import { HomeSearchHitRow } from '@/components/campaign/dashboard/HomeSearchHitRow'
+import { HomeSearchHitRowsSkeleton } from '@/components/campaign/dashboard/HomeSearchHitRowsSkeleton'
import { HomeSearchMunicipalityVoteTrailing } from '@/components/campaign/dashboard/HomeSearchMunicipalityVoteTrailing'
import { useHomeSearchQuery } from '@/components/campaign/dashboard/useHomeSearchQuery'
import { CampaignSearchInput } from '@/components/campaign/shared/CampaignSearchInput'
@@ -170,30 +171,35 @@ export const WizardMunicipalitySearchStep = ({
results.mode === 'search' &&
results.municipalities.length === 0
+ const showSkeleton =
+ resultsBusy && displayRows.length === 0 && results.status !== 'error' && !showEmpty
+
return (
-
-
setRaw(event.target.value)}
- autoComplete="off"
- enterKeyHint="search"
- aria-busy={resultsBusy || undefined}
- maxLength={HOME_SEARCH_QUERY_MAX_LENGTH}
- />
+
+
+ setRaw(event.target.value)}
+ autoComplete="off"
+ enterKeyHint="search"
+ aria-busy={resultsBusy || undefined}
+ maxLength={HOME_SEARCH_QUERY_MAX_LENGTH}
+ />
+
@@ -202,6 +208,7 @@ export const WizardMunicipalitySearchStep = ({
{results.message}
) : null}
+ {showSkeleton ?
: null}
{results.status === 'success' && displayRows.length > 0 ? (
{displayRows.map(({ hit, continuityReason }) => (
diff --git a/tests/unit/campaignWizardShell.unit.spec.tsx b/tests/unit/campaignWizardShell.unit.spec.tsx
index 61b7dadb..73922723 100644
--- a/tests/unit/campaignWizardShell.unit.spec.tsx
+++ b/tests/unit/campaignWizardShell.unit.spec.tsx
@@ -12,7 +12,10 @@ import { CampaignWizardShell } from '@/components/campaign/shared/CampaignWizard
import { CampaignMobileTopBar } from '@/components/campaign/shell/CampaignMobileTopBar'
import { CampaignWizardChromeProvider } from '@/components/campaign/shell/CampaignWizardChromeContext'
import { SidebarProvider } from '@/components/ui/Sidebar'
-import { WIZARD_MUNICIPALITY_STEP_TITLE } from '@/lib/campaignWizardCopy'
+import {
+ WIZARD_MUNICIPALITY_STEP_TITLE,
+ wizardFlowChromeAriaLabel,
+} from '@/lib/campaignWizardCopy'
import { stubMatchMedia } from '../helpers/matchMedia'
const renderWizardShell = (props: React.ComponentProps) =>
@@ -86,6 +89,37 @@ describe('CampaignWizardShell', () => {
expect(main.getAttribute('aria-labelledby')).toBe(heading.id)
})
+ it('omits step heading when stepTitle is null and labels main with flow title', () => {
+ const { container } = renderWizardShell({
+ flowTitle: 'Ajustar votos',
+ stepTitle: null,
+ isEntryStep: true,
+ previousHref: '/campanha',
+ children: 'Corpo',
+ })
+
+ expect(screen.queryByRole('heading', { level: 1 })).toBeNull()
+ const main = within(container).getByRole('main')
+ expect(main.getAttribute('aria-labelledby')).toBeNull()
+ expect(main.getAttribute('aria-label')).toBe(wizardFlowChromeAriaLabel('Ajustar votos'))
+ })
+
+ it('uses tighter top padding on mobile when step title is omitted', () => {
+ const { container } = renderWizardShell({
+ flowTitle: 'Ajustar votos',
+ stepTitle: null,
+ isEntryStep: true,
+ previousHref: '/campanha',
+ children: null,
+ })
+
+ const main = container.querySelector('main')
+ expect(main?.className).toMatch(/pt-2/)
+ expect(main?.className).not.toMatch(/pt-3/)
+ expect(main?.className).toMatch(/pb-6/)
+ expect(main?.className).toMatch(/md:py-6/)
+ })
+
it('moves focus to the step title when stepTitle changes', () => {
const { rerender } = render(