Merge pull request #397 from deriv-com/meenu-accoridan-block-improvem…

…ents

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();
   });

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>
         )}

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';