From beebe8769c6ce1da56461ca52deecc989e6c05a7 Mon Sep 17 00:00:00 2001
From: meenakshi-deriv <meenakshi@regentmarkets.com>
Date: Mon, 18 Mar 2024 14:44:23 +0400
Subject: [PATCH 1/2] fix: accordian block fixes

---
 .../src/lib/accordion/base/index.tsx          | 20 ++++++++++++++++---
 .../src/lib/accordion/types/index.ts          |  3 ++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/lib/accordion/base/index.tsx b/libs/components/src/lib/accordion/base/index.tsx
index b6b8b7f27..b6836723f 100644
--- a/libs/components/src/lib/accordion/base/index.tsx
+++ b/libs/components/src/lib/accordion/base/index.tsx
@@ -1,9 +1,10 @@
 import styles from './base.module.css';
 
-import { Heading, qtMerge, Text } from '@deriv/quill-design';
+import { qtMerge, Text } from '@deriv/quill-design';
 import { AccordionProps } from '../types';
 import { StandaloneChevronDownRegularIcon } from '@deriv/quill-icons/Standalone';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
 
 export const Base = ({
   id,
@@ -14,6 +15,7 @@ export const Base = ({
   expanded = false,
   icon,
   divider = 'none',
+  background = 'light',
   customContent: CustomContent,
   contentClass,
   onExpand,
@@ -33,6 +35,11 @@ export const Base = ({
     }
   };
 
+  const bgColorVariantClass = {
+    light: 'bg-background-primary-container',
+    gray: 'bg-background-primary-base',
+  };
+
   const dividerClassNames = {
     both: 'border-x-none border-b-opacity-black-100 border-t-opacity-black-100 border-100',
     bottom: 'border-b-opacity-black-100 !border-t-none border-100',
@@ -114,7 +121,9 @@ export const Base = ({
           <>
             {icon && <div className="flex">{icon}</div>}
             <div className="flex w-full flex-col gap-general-xs">
-              <Heading.H6 className="overflow-hidden">{title}</Heading.H6>
+              <Text className="overflow-hidden text-typography-prominent">
+                {title}
+              </Text>
               {subtitle && (
                 <Text
                   size="sm"
@@ -142,7 +151,12 @@ export const Base = ({
         )}
       >
         {(isAutoExpand || isExpanded) && (
-          <div className="flex h-fit p-general-lg">
+          <div
+            className={clsx(
+              'flex h-fit p-general-lg',
+              bgColorVariantClass[background],
+            )}
+          >
             {Content && <Content />}
           </div>
         )}
diff --git a/libs/components/src/lib/accordion/types/index.ts b/libs/components/src/lib/accordion/types/index.ts
index e3861975a..39ab5a408 100644
--- a/libs/components/src/lib/accordion/types/index.ts
+++ b/libs/components/src/lib/accordion/types/index.ts
@@ -11,7 +11,8 @@ export interface AccordionProps {
   customContent?: () => ReactNode;
   divider?: AccordionDivider;
   contentClass?: string;
+  background?: BgVariant;
   onExpand?: (e: boolean, i: string) => void;
 }
-
+export type BgVariant = 'light' | 'gray';
 export type AccordionDivider = 'none' | 'both' | 'bottom';

From 45dbfe33d38898b913b0498106ac991d5b2c014e Mon Sep 17 00:00:00 2001
From: meenakshi-deriv <meenakshi@regentmarkets.com>
Date: Mon, 18 Mar 2024 15:11:15 +0400
Subject: [PATCH 2/2] fix: test failure fixed

---
 libs/blocks/src/lib/accordion/accordion.spec.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/libs/blocks/src/lib/accordion/accordion.spec.tsx b/libs/blocks/src/lib/accordion/accordion.spec.tsx
index 81c83190f..a627337ff 100644
--- a/libs/blocks/src/lib/accordion/accordion.spec.tsx
+++ b/libs/blocks/src/lib/accordion/accordion.spec.tsx
@@ -29,7 +29,6 @@ describe('AccordionBlock', () => {
   it('renders with correct class names and content', () => {
     const className = 'text-heading-h2';
     const title = 'Title goes here';
-    const childClassName = 'text-heading-h6';
 
     const { getByText } = render(
       <AccordionBlock
@@ -48,11 +47,6 @@ describe('AccordionBlock', () => {
     //renders with the correct title
     expect(getByText(title)).toBeInTheDocument();
 
-    const childTitleElement = getByText(childTitle);
-
-    //renders with correct classname
-    expect(childTitleElement).toHaveClass(childClassName);
-
     //renders with the correct title
     expect(getByText(subTitle)).toBeInTheDocument();
   });