Update Heading

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}`;

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 = ({

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='taxes' /> Information
+    </Heading>
+  ),
+};