From cbe53c621228155f7bf33d19d1157d1c519cee07 Mon Sep 17 00:00:00 2001
From: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
Date: Wed, 13 May 2026 15:20:55 -0700
Subject: [PATCH 1/2] Update Heading component, tests, and stories.

---
 src/components/Headings/heading.test.tsx     | 16 ++++++++++++++++
 src/components/Headings/heading.tsx          |  8 ++++++--
 src/components/Headings/headings.stories.tsx | 13 ++++++++++++-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/Headings/heading.test.tsx b/src/components/Headings/heading.test.tsx
index 603c31520f..e99038896f 100644
--- a/src/components/Headings/heading.test.tsx
+++ b/src/components/Headings/heading.test.tsx
@@ -37,6 +37,22 @@ describe('<Heading />', () => {
     }
   });
 
+  it('Renders React elements with text', () => {
+    render(
+      <Heading type='2' data-testid='heading-with-element'>
+        <span data-testid='heading-icon' aria-hidden='true' />
+        Information
+      </Heading>,
+    );
+
+    const current = screen.getByTestId('heading-with-element');
+
+    expect(current).toBeInTheDocument();
+    expect(current.tagName.toLowerCase()).toBe('h2');
+    expect(screen.getByTestId('heading-icon')).toBeInTheDocument();
+    expect(current).toHaveTextContent('Information');
+  });
+
   it('Renders Display heading', () => {
     const headingType = `display`;
     const testid = `h${headingType}`;
diff --git a/src/components/Headings/heading.tsx b/src/components/Headings/heading.tsx
index cb95d96cbb..761d462cbe 100644
--- a/src/components/Headings/heading.tsx
+++ b/src/components/Headings/heading.tsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import { JSX } from 'react';
-import type { HTMLProps } from 'react';
+import type { HTMLProps, ReactNode } from 'react';
 
 export type HeadingType =
   | '1'
@@ -12,9 +12,13 @@ export type HeadingType =
   | 'eyebrow'
   | 'slug';
 
-interface HeadingProperties extends HTMLProps<HTMLHeadingElement> {
+interface HeadingProperties extends Omit<
+  HTMLProps<HTMLHeadingElement>,
+  'children'
+> {
   /** Heading type (1-5, display, eyebrow, slug) */
   type?: HeadingType;
+  children?: ReactNode;
 }
 
 export const Heading = ({
diff --git a/src/components/Headings/headings.stories.tsx b/src/components/Headings/headings.stories.tsx
index 1a54e83e33..47428980a8 100644
--- a/src/components/Headings/headings.stories.tsx
+++ b/src/components/Headings/headings.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Heading } from '~/src/index';
 import { expect, within } from 'storybook/test';
+import { Heading, Icon } from '~/src/index';
 /**
  * A successful type hierarchy establishes the order of importance of elements on a page. Consistent scaling, weights, and capitalization are used to create distinction between headings and provide users with familiar focus points when scanning text.
  *
@@ -98,3 +98,14 @@ export const Slug: Story = {
     children: 'Slug',
   },
 };
+
+export const WithIcon: Story = {
+  args: {
+    type: '2',
+  },
+  render: (arguments_) => (
+    <Heading {...arguments_}>
+      <Icon name='help' /> Information
+    </Heading>
+  ),
+};

From 83144e01dd791838cd44d63f40ab3a3fe09c5b45 Mon Sep 17 00:00:00 2001
From: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
Date: Mon, 18 May 2026 16:57:52 -0700
Subject: [PATCH 2/2] switch icon

---
 src/components/Headings/headings.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Headings/headings.stories.tsx b/src/components/Headings/headings.stories.tsx
index 47428980a8..d592b01230 100644
--- a/src/components/Headings/headings.stories.tsx
+++ b/src/components/Headings/headings.stories.tsx
@@ -105,7 +105,7 @@ export const WithIcon: Story = {
   },
   render: (arguments_) => (
     <Heading {...arguments_}>
-      <Icon name='help' /> Information
+      <Icon name='taxes' /> Information
     </Heading>
   ),
 };