Merge pull request #169 from likhith-deriv/likhith/feq-2136/accordion…

…-title-enhancement

likhith/feq-2136/chore: added icon support for Accordion title

src/components/Accordion/index.tsx

@@ -9,7 +9,7 @@ type AccordionProps = {
     children: ReactNode;
     defaultOpen?: boolean;
     isCompact?: boolean;
-    title: string;
+    title: string | JSX.Element;
     variant?: AccordionVariants;
 };
 
@@ -51,7 +51,7 @@ export const Accordion = ({
                 onClick={toggleAccordion}
                 aria-expanded={active}
             >
-                <p>{title}</p>
+                {typeof title === "string" ? <p>{title}</p> : title}
                 <img
                     src={Chevron}
                     className={clsx("deriv-accordion__icon", {

stories/Accordion.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Accordion } from "../src/main";
+import DerivBrandLogo from "./mock/brand-deriv-logo.svg";
 
 const meta = {
     title: "Components/Accordion",
@@ -17,7 +18,6 @@ const meta = {
         variant: "underline",
     },
     argTypes: {
-        title: { control: { type: "text" } },
         defaultOpen: { control: { type: "boolean" } },
         variant: {
             options: ["underline", "bordered", "shadow"],
@@ -67,6 +67,26 @@ export const Bordered: Story = {
     ),
 };
 
+export const BorderedWithIcons: Story = {
+    args: {
+        variant: "bordered",
+        title: (
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                <img src={DerivBrandLogo} height={40} width={40} />
+                <span>What is your return policy?</span>
+            </div>
+        ),
+    },
+    render: (args) => (
+        <div {...props}>
+            <Accordion {...args}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </Accordion>
+        </div>
+    ),
+};
+
 export const Shadow: Story = {
     args: {
         variant: "shadow",