fix: [Heading] Rename "Super" heading to "Display" heading

Author: meissadia

src/components/Headings/Heading.test.tsx

@@ -24,8 +24,8 @@ describe('<Heading />', () => {
     }
   });
 
-  it('Renders Super heading', () => {
-    const headingType = `super`;
+  it('Renders Display heading', () => {
+    const headingType = `display`;
     const testid = `h${headingType}`;
     const text = `Heading level ${headingType}`;
 
@@ -39,7 +39,7 @@ describe('<Heading />', () => {
 
     expect(current).toBeInTheDocument();
     expect(current.tagName.toLowerCase()).toBe('h1');
-    expect(current.classList.contains('super'));
+    expect(current.className === 'superheading').toBeTruthy();
   });
 
   it('Renders Eyebrow heading', () => {
@@ -57,7 +57,7 @@ describe('<Heading />', () => {
 
     expect(current).toBeInTheDocument();
     expect(current.tagName.toLowerCase()).toBe('h5');
-    expect(current.classList.contains('eyebrow'));
+    expect(current.className.includes('eyebrow')).toBeTruthy();
   });
 
   it('Renders Slug heading', () => {

src/components/Headings/Heading.tsx

@@ -8,12 +8,12 @@ export type HeadingType =
   | '4'
   | '5'
   | '6'
+  | 'display'
   | 'eyebrow'
-  | 'slug'
-  | 'super';
+  | 'slug';
 
 interface HeadingProperties extends React.HTMLProps<HTMLHeadingElement> {
-  /** Heading type (1-6, super, eyebrow, slug) */
+  /** Heading type (1-6, display, eyebrow, slug) */
   type?: HeadingType;
   /** Heading content */
   children: JSXElement | string;
@@ -38,7 +38,7 @@ export const Heading = ({
     );
   }
 
-  if (type === 'super') {
+  if (type === 'display') {
     DynamicHeading = 'h1';
     classes.push('superheading');
   } else if (type === 'eyebrow') {

src/components/Headings/Headings.stories.tsx

@@ -23,10 +23,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Superheading: Story = {
-  name: 'Super heading',
+export const Display: Story = {
+  name: 'Display heading',
   args: {
-    type: 'super',
+    type: 'display',
     children: 'Display heading'
   }
 };