feat: add className in productTemplate

ZopaPublic · Jul 23, 2024 · ad2059b · ad2059b
1 parent 47331cf
commit ad2059b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -216,6 +216,7 @@ export interface ScrollableAreaTheme {
 export interface ProductTemplate {
   title?: {
     backgroundColor?: string;
+    className?: string;
   };
 }
 

diff --git a/src/components/templates/ProductTemplate/ProductTemplateTitle/ProductTemplateTitle.tsx b/src/components/templates/ProductTemplate/ProductTemplateTitle/ProductTemplateTitle.tsx
@@ -47,21 +47,31 @@ export function ProductTemplateTitle({
 }: ProductTemplateTitleProps) {
   const { width = 0 } = useViewport();
   const theme = useThemeContext();
+
+  const titleClass = theme.productTemplate?.title?.className;
+
+  console.log('theme', theme);
+
   return (
     <ProductTemplateTitleBackground data-automation={dataAutomation} theme={theme}>
       <ProductTemplateTitleContainer>
         <ProductTemplateTitleInnerContainer className="pt-7 m:pt-9 mx-6 m:mx-0">
-          {title && (
-            <Heading as="h1" size={width > breakpoints.phone ? 'h1' : 'h2'} align="center" className="px-8">
+          {title ? (
+            <Heading
+              as="h1"
+              size={width > breakpoints.phone ? 'h1' : 'h2'}
+              align="center"
+              className={`px-8 ${titleClass}`}
+            >
               {title}
             </Heading>
-          )}
+          ) : null}
           <ProductTemplateTitleWrapper>
-            {subtitle && (
+            {subtitle ? (
               <Text as="p" size="lead" align="center" className="mt-4">
                 {subtitle}
               </Text>
-            )}
+            ) : null}
           </ProductTemplateTitleWrapper>
           {content}
         </ProductTemplateTitleInnerContainer>