feat: add new product template v2 options

ZopaPublic · Jul 28, 2024 · 72b82b4 · 72b82b4
1 parent 3b95beb
commit 72b82b4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -235,7 +235,8 @@ export interface SpinnerTheme {
   };
 }
 
-export interface TypographyTheme {
+export interface TypographyTheme<Font = any> {
+  font?: Font;
   primary: string;
   text: {
     color: string;

diff --git a/src/components/templates/ProductTemplate/ProductTemplate/ProductTemplateV2.tsx b/src/components/templates/ProductTemplate/ProductTemplate/ProductTemplateV2.tsx
@@ -7,12 +7,16 @@ import FlexRow from '../../../layout/FlexRow/FlexRow';
 import { ReactElement } from 'react';
 import { navbarOpenHeight } from '../../../../constants';
 import styled from 'styled-components';
+import { useThemeContext } from '../../../styles/Theme';
+import { Text } from '../../../..';
 
 export interface ProductTemplateV2 {
-  backgroundColor: string;
-  header: {
-    backgroundColor: string;
-    height: string;
+  titleClassName: string;
+  subtitleClassName: string;
+  form: {
+    subheadingPostion: 'before' | 'after';
+    headingClassName: string;
+    subheadingClassName: string;
   };
 }
 type MaybeHeaderProps = {
@@ -66,4 +70,22 @@ function ProductTemplate({ header, children, contentWidth = 6 }: ProductTemplate
   );
 }
 
-export { ProductTemplate };
+type PreLabelProps = {
+  title: string;
+  subtitle: string;
+};
+
+const PreLabel = ({ title, subtitle }: PreLabelProps) => {
+  const theme = useThemeContext();
+  return (
+    <>
+      <Text size="body" className={`mb-2 ${theme?.productTemplateV2?.form.headingClassName}`} as="p">
+        {title}
+      </Text>
+      <Text size="small" className={`mb-4 ${theme?.productTemplateV2?.form.subheadingClassName}`}>
+        {subtitle}
+      </Text>
+    </>
+  );
+};
+export { ProductTemplate, PreLabel };
diff --git a/src/index.ts b/src/index.ts
@@ -13,7 +13,7 @@ export {
   mobileNavbarHeight,
 } from './constants';
 export { default as GlobalStyles } from './components/styles/GlobalStyles';
-export { ThemeProvider } from './components/styles/Theme';
+export { ThemeProvider, zopaTheme } from './components/styles/Theme';
 // Atoms
 export { default as ScrollableArea } from './components/atoms/ScrollableArea/ScrollableArea';
 export { default as Alert } from './components/atoms/Alert/Alert';
@@ -71,7 +71,10 @@ export * from './components/organisms/Tabs';
 export * from './components/organisms/Carousel';
 // Templates
 export { default as ProductTemplate } from './components/templates/ProductTemplate';
-export { ProductTemplate as ProductTemplateV2 } from './components/templates/ProductTemplate/ProductTemplate/ProductTemplateV2';
+export {
+  ProductTemplate as ProductTemplateV2,
+  PreLabel,
+} from './components/templates/ProductTemplate/ProductTemplate/ProductTemplateV2';
 
 export { default as ErrorPageTemplate } from './components/templates/ErrorPages';
 // Layout