From f978fd1c02d4db03ee744b25def1ebd1f4673455 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 16 Dec 2024 10:54:06 +0000
Subject: [PATCH] Add as property to improve

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Heading/Heading.stories.tsx   |  8 ++++++++
 .../canon/src/components/Heading/Heading.tsx     | 16 ++++++++++------
 packages/canon/src/components/Heading/types.ts   |  1 +
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/canon/src/components/Heading/Heading.stories.tsx b/packages/canon/src/components/Heading/Heading.stories.tsx
index d93c7dbb59..38fd839cf5 100644
--- a/packages/canon/src/components/Heading/Heading.stories.tsx
+++ b/packages/canon/src/components/Heading/Heading.stories.tsx
@@ -40,3 +40,11 @@ export const Responsive: Story = {
     },
   },
 };
+
+export const CustomTag: Story = {
+  args: {
+    ...Default.args,
+    variant: 'title5',
+    as: 'h2',
+  },
+};
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index 86a2fc39ee..6e45433b91 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -19,17 +19,21 @@ import { HeadingProps } from './types';
 import { useTheme } from '../../theme/context';
 import { getResponsiveValue } from '../../utils/getResponsiveValue';
 
-export const Heading = forwardRef<HTMLParagraphElement, HeadingProps>(
+export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
   (props, ref) => {
-    const { children, variant = 'title1', ...restProps } = props;
+    const { children, variant = 'title1', as = 'h1', ...restProps } = props;
     const { breakpoint } = useTheme();
     const responsiveVariant = getResponsiveValue(variant, breakpoint);
 
-    console.log(breakpoint);
-    console.log(responsiveVariant);
+    let Component = as;
+    if (variant === 'title2') Component = 'h2';
+    if (variant === 'title3') Component = 'h3';
+    if (variant === 'title4') Component = 'h4';
+    if (variant === 'title5') Component = 'h5';
+    if (as) Component = as;
 
     return (
-      <p
+      <Component
         ref={ref}
         {...restProps}
         className={`text ${
@@ -37,7 +41,7 @@ export const Heading = forwardRef<HTMLParagraphElement, HeadingProps>(
         }`}
       >
         {children}
-      </p>
+      </Component>
     );
   },
 );
diff --git a/packages/canon/src/components/Heading/types.ts b/packages/canon/src/components/Heading/types.ts
index 86145e5738..fb37cf6414 100644
--- a/packages/canon/src/components/Heading/types.ts
+++ b/packages/canon/src/components/Heading/types.ts
@@ -32,4 +32,5 @@ export interface HeadingProps {
           'display' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5'
         >
       >;
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }