From 41072d17f763a8b801374481065c83823da85a1f Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Thu, 25 Apr 2024 08:37:32 +0400
Subject: [PATCH 1/2] chore: added icon support for Accordion-title

---
 src/components/Accordion/index.tsx |  2 +-
 stories/Accordion.stories.tsx      | 22 +++++++++++++++++++++-
 stories/mock/brand-deriv-logo.svg  |  1 +
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 stories/mock/brand-deriv-logo.svg

diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
index 3c8361ef..d72c6c5b 100644
--- a/src/components/Accordion/index.tsx
+++ b/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;
 };
 
diff --git a/stories/Accordion.stories.tsx b/stories/Accordion.stories.tsx
index a4b1b925..4a34a0ca 100644
--- a/stories/Accordion.stories.tsx
+++ b/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",
diff --git a/stories/mock/brand-deriv-logo.svg b/stories/mock/brand-deriv-logo.svg
new file mode 100644
index 00000000..483a2670
--- /dev/null
+++ b/stories/mock/brand-deriv-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 72 72" role="img" id="selected_downloadable_icon_id" height="120px" width="120px"><path fill="#FF444F" d="M0 28C0 12.536 12.536 0 28 0h16c15.464 0 28 12.536 28 28v16c0 15.464-12.536 28-28 28H28C12.536 72 0 59.464 0 44z"></path><path fill="#fff" d="m45.167 14.917-2.321 13.166h-8.06c-7.518 0-14.684 6.091-16.012 13.61l-.563 3.2c-1.322 7.518 3.695 13.61 11.213 13.61h6.722c5.48 0 10.7-4.436 11.664-9.916L54 13.497zM39.45 47.346c-.296 1.692-1.82 3.07-3.513 3.07h-4.084c-3.38 0-5.64-2.743-5.047-6.128l.352-1.996c.6-3.38 3.824-6.128 7.203-6.128h7.06z"></path></svg>
\ No newline at end of file

From 7877f8f22f4e85d43fc89ef920d66432e8447238 Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Thu, 25 Apr 2024 10:15:57 +0400
Subject: [PATCH 2/2] fix: incorporated review comments

---
 src/components/Accordion/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
index d72c6c5b..98a53101 100644
--- a/src/components/Accordion/index.tsx
+++ b/src/components/Accordion/index.tsx
@@ -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", {