Merge pull request #340 from deriv-com/Jia/update-block-wrapper

deriv-com · Mar 7, 2024 · 9a67efe · 9a67efe
2 parents e5fc9d3 + e99ec02
commit 9a67efe
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/libs/blocks/src/lib/block-wrapper/block-wrapper.spec.tsx b/libs/blocks/src/lib/block-wrapper/block-wrapper.spec.tsx
@@ -8,7 +8,6 @@ describe('ContentText', () => {
     const { container, queryByText } = render(
       <BlockWrapper
         title="Title goes here"
-        color="light"
         description="Description goes here"
         className="py-general-4xl"
       >

diff --git a/libs/blocks/src/lib/block-wrapper/block-wrapper.stories.tsx b/libs/blocks/src/lib/block-wrapper/block-wrapper.stories.tsx
@@ -18,7 +18,7 @@ export const Default: Story = {
   },
 };
 
-export const BloclWrapperWithContent: Story = {
+export const BlockWrapperWithContent: Story = {
   args: {
     title: 'Title goes here',
     description: 'Description goes here',

diff --git a/libs/blocks/src/lib/block-wrapper/index.tsx b/libs/blocks/src/lib/block-wrapper/index.tsx
@@ -14,6 +14,7 @@ export const bgColorVariantClass: { [key in BgVariant]: string } = {
   gray: 'bg-background-primary-base',
 };
 export interface BlockWrapperProps {
+  heading?: 'H2' | 'H1';
   title?: ReactNode;
   description?: ReactNode;
   className?: string;
@@ -22,12 +23,15 @@ export interface BlockWrapperProps {
 }
 
 export const BlockWrapper = ({
+  heading = 'H2',
   title,
   description,
   className,
   background = 'light',
   children,
 }: BlockWrapperProps) => {
+  const HeaderComponent = Heading[heading];
+
   return (
     <Section
       className={qtMerge(
@@ -39,9 +43,9 @@ export const BlockWrapper = ({
     >
       <FluidContainer className="flex flex-col items-center gap-gap-lg">
         {title && (
-          <Heading.H2 className="text-center lg:max-w-[816px]">
+          <HeaderComponent className="text-center lg:max-w-[816px]">
             {title}
-          </Heading.H2>
+          </HeaderComponent>
         )}
         {description && <Text className="text-center">{description}</Text>}
       </FluidContainer>