feat: add custom icon to accordian header

src/components/layout-elements/Accordion/AccordionHeader.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { tremorTwMerge } from "lib";
+import { BaseColors, Color, colorPalette, getColorClassNames, tremorTwMerge } from "lib";
 import React, { useContext } from "react";
 
 import { Disclosure } from "@headlessui/react";
@@ -9,14 +9,30 @@ import { makeClassName, sizing, spacing } from "lib";
 
 const makeAccordionHeaderClassName = makeClassName("AccordionHeader");
 
-const AccordionHeader = React.forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement>
->((props, ref) => {
-  const { children, className, ...other } = props;
+interface AccordionHeaderOptions {
+  openIcon?: React.ElementType;
+  closedIcon?: React.ElementType;
+  colors?: Color | string;
+}
+export interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  options?: AccordionHeaderOptions;
+}
 
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultOpen?: boolean;
+}
+
+const AccordionHeader = React.forwardRef<HTMLButtonElement, AccordionHeaderProps>((props, ref) => {
+  const { children, className, options, ...other } = props;
   const { isOpen } = useContext(OpenContext);
 
+  const CustomIcon =
+    options?.closedIcon && options.openIcon
+      ? isOpen
+        ? options.openIcon
+        : options.closedIcon
+      : null;
+
   return (
     <Disclosure.Button
       ref={ref}
@@ -44,19 +60,31 @@ const AccordionHeader = React.forwardRef<
         {children}
       </div>
       <div>
-        <ArrowUpHeadIcon
-          className={tremorTwMerge(
-            makeAccordionHeaderClassName("arrowIcon"),
-            // light
-            "text-tremor-content-subtle",
-            // dark
-            "dark:text-dark-tremor-content-subtle",
-            spacing.twoXs.negativeMarginRight,
-            sizing.md.height,
-            sizing.md.width,
-            isOpen ? "transition-all" : "transition-all -rotate-180",
-          )}
-        />
+        {CustomIcon ? (
+          <CustomIcon
+            className={tremorTwMerge(
+              makeAccordionHeaderClassName("arrowIcon"),
+              getColorClassNames(options?.colors ?? BaseColors.Gray, colorPalette.text).textColor,
+              spacing.twoXs.negativeMarginRight,
+              sizing.md.height,
+              sizing.md.width,
+            )}
+          />
+        ) : (
+          <ArrowUpHeadIcon
+            className={tremorTwMerge(
+              makeAccordionHeaderClassName("arrowIcon"),
+              // light
+              "text-tremor-content-subtle",
+              // dark
+              "dark:text-dark-tremor-content-subtle",
+              spacing.twoXs.negativeMarginRight,
+              sizing.md.height,
+              sizing.md.width,
+              isOpen ? "transition-all" : "transition-all -rotate-180",
+            )}
+          />
+        )}
       </div>
     </Disclosure.Button>
   );

src/stories/layout-elements/Accordion.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { Accordion } from "components";
 import { SimpleAccordion } from "./helpers/SimpleAccordion";
+import { SimpleCustomIconAccordionList } from "./helpers/SimpleCustomIconAccordion";
 
 const meta: Meta<typeof Accordion> = {
   title: "UI/Layout/Accordion",
@@ -25,3 +26,7 @@ export const DefaultOpen: Story = {
     defaultOpen: true,
   },
 };
+
+export const WithCustomIcon: Story = {
+  render: SimpleCustomIconAccordionList,
+};

src/stories/layout-elements/helpers/SimpleCustomIconAccordion.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { ArrowRightIcon, ArrowUpHeadIcon, ChevronRightFill } from "assets";
+import {
+  Accordion,
+  AccordionBody,
+  AccordionHeader,
+  AccordionList,
+  Callout,
+  Text,
+} from "components";
+
+export const CustomIconAccordion = (args: any) => (
+  <Accordion {...args}>
+    <div className="flex flex-row items-center gap-4">
+      <AccordionHeader
+        className="w-12"
+        options={{
+          openIcon: ArrowUpHeadIcon,
+          closedIcon: ChevronRightFill,
+          colors: "blue",
+        }}
+      />
+      <Text>Product A</Text>
+    </div>
+    <AccordionBody>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. Sit amet,
+      consetetur sadipscing elitr. Per aspera ad astra.
+      <Callout
+        title={"Performing as Average"}
+        icon={ArrowRightIcon}
+        color="gray"
+        className="mt-2"
+      ></Callout>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue
+      blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.
+    </AccordionBody>
+  </Accordion>
+);
+
+export const SimpleCustomIconAccordionList = (args: any) => {
+  return (
+    <AccordionList {...args}>
+      <CustomIconAccordion />
+      <CustomIconAccordion />
+      <CustomIconAccordion />
+    </AccordionList>
+  );
+};