Include titleComponent prop to Drawer component

Author: Kubit

src/components/drawer/drawerStandAlone.tsx

@@ -14,10 +14,18 @@ import {
   DrawerTitleContentFooterContainerStyled,
   DrawerTitleStyled,
 } from './drawer.styled';
-import { DrawerTitleComponentType, IDrawerStandAlone } from './types';
+import { IDrawerStandAlone } from './types';
 
 const DrawerStandAloneComponent = (
-  { blocked = false, scrollableRef, shadowRef, footerRef, contentRef, ...props }: IDrawerStandAlone,
+  {
+    blocked = false,
+    scrollableRef,
+    shadowRef,
+    footerRef,
+    contentRef,
+    titleComponent = TextComponentType.H3,
+    ...props
+  }: IDrawerStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
   const uniqueTitleId = useId('drawer-title');
@@ -59,7 +67,7 @@ const DrawerStandAloneComponent = (
           <DrawerTitleStyled
             ref={shadowRef}
             as={Text as unknown as React.ElementType}
-            component={DrawerTitleComponentType.H3 as unknown as TextComponentType}
+            component={titleComponent as unknown as TextComponentType}
             customTypography={props.styles.title}
             dataTestId={`${titleIdFinal}Title`}
             id={titleIdFinal}

src/components/drawer/types/drawer.ts

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { IElementOrIcon } from '@/components/elementOrIcon';
 import { IFooter } from '@/components/footer';
 import { IPopoverControlled } from '@/components/popover';
-import { IText } from '@/components/text';
+import { IText, TextComponentType } from '@/components/text';
 import { CustomTokenTypes } from '@/types';
 import { DeviceBreakpointsType } from '@/types/breakpoints';
 
@@ -27,6 +27,7 @@ export interface IDrawerStandAlone {
   footer?: DrawerFooterType;
   closeIcon?: IElementOrIcon;
   title?: DrawerTextType;
+  titleComponent?: TextComponentType | string;
   open: boolean;
   level: DrawerLevelPositionTypes;
   dataTestId?: string;