From d8b31c0466f7739d0073b52ba708d60571fe3ef9 Mon Sep 17 00:00:00 2001 From: Arpit Jain Date: Wed, 17 Jun 2026 15:55:56 +0900 Subject: [PATCH] Fix slug heading styles and regression coverage Signed-off-by: Arpit Jain --- src/components/Headings/heading.test.tsx | 4 ++-- src/components/Headings/heading.tsx | 1 + src/components/Headings/headings.stories.tsx | 14 ++++++++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/Headings/heading.test.tsx b/src/components/Headings/heading.test.tsx index 603c31520f..30e0cb8d5a 100644 --- a/src/components/Headings/heading.test.tsx +++ b/src/components/Headings/heading.test.tsx @@ -89,10 +89,10 @@ describe('', () => { expect(wrapper).toBeInTheDocument(); expect(wrapper.tagName.toLowerCase()).toBe('header'); - expect(wrapper.classList.contains('m-slug-header')); + expect(wrapper.classList.contains('m-slug-header')).toBeTruthy(); const content = screen.getByText(text); expect(content.tagName.toLowerCase()).toBe('h2'); - expect(content.classList.contains('a-heading')); + expect(content.classList.contains('m-slug-header__heading')).toBeTruthy(); }); }); diff --git a/src/components/Headings/heading.tsx b/src/components/Headings/heading.tsx index 259f6fef55..3ce4274907 100644 --- a/src/components/Headings/heading.tsx +++ b/src/components/Headings/heading.tsx @@ -1,3 +1,4 @@ +import '@cfpb/cfpb-design-system/src/components/cfpb-typography/slug-header.scss'; import classnames from 'classnames'; import { JSX } from 'react'; import type { HTMLProps } from 'react'; diff --git a/src/components/Headings/headings.stories.tsx b/src/components/Headings/headings.stories.tsx index 1a54e83e33..912a51abe6 100644 --- a/src/components/Headings/headings.stories.tsx +++ b/src/components/Headings/headings.stories.tsx @@ -97,4 +97,18 @@ export const Slug: Story = { type: 'slug', children: 'Slug', }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const slugHeading = canvas.getByRole('heading', { + level: 2, + name: /slug/i, + }); + + await expect(slugHeading.classList.contains('m-slug-header__heading')).toBe( + true, + ); + await expect( + slugHeading.closest('header')?.classList.contains('m-slug-header'), + ).toBe(true); + }, };