Aizad/FEQ-1566/Added Accordion Component

lib/components/Accordion/Accordion.scss

@@ -0,0 +1,90 @@
+$border: 1px solid var(--du-general-active);
+$animation-duration: 0.3s;
+
+.deriv-accordion {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    min-width: 100%;
+
+    &__wrapper {
+        width: 100%;
+        background-color: var(--du-general-main-2);
+
+        &--default {
+            padding: 24px;
+        }
+
+        &--sm {
+            padding: 16px;
+        }
+
+        &--underline {
+            border-bottom: $border;
+        }
+        &--shadow,
+        &--bordered {
+            border-radius: $border-radius-2;
+            margin-bottom: 8px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+        &--bordered {
+            border: $border;
+        }
+        &--shadow {
+            box-shadow: $deriv-box-shadow;
+        }
+    }
+
+    &__header {
+        outline: none;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &--border-bottom {
+            border-bottom: 1px solid var(--du-border-normal-1);
+        }
+    }
+
+    &__icon {
+        margin-left: auto;
+        display: inline-block;
+        transition: all $animation-duration ease-in-out;
+        &:hover {
+            cursor: pointer;
+        }
+
+        &--active {
+            transform: rotate(-180deg);
+        }
+    }
+
+    &__content {
+        width: 100%;
+        overflow: hidden;
+        max-height: 0px;
+        opacity: 0;
+        transition: all $animation-duration ease-in-out;
+
+        &--no-animations {
+            transition: none;
+        }
+
+        &--active {
+            opacity: 1;
+        }
+
+        &--sm {
+            padding-top: 16px;
+        }
+
+        &--default {
+            padding-top: 24px;
+        }
+    }
+}

lib/components/Accordion/index.tsx

@@ -0,0 +1,157 @@
+import {
+    ReactNode,
+    memo,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+import clsx from "clsx";
+import Chevron from "./Chevron.svg";
+import "./Accordion.scss";
+
+type AccordionVariants = "underline" | "bordered" | "shadow";
+
+type AccordionSection = {
+    title: ReactNode;
+    content: ReactNode;
+};
+
+type AccordionSectionProps = {
+    disableAnimation?: boolean;
+    isActiveSection: boolean;
+    isCompact?: boolean;
+    section: AccordionSection;
+    sectionIndex: number;
+    setActiveIndex: (index: number | null) => void;
+    variant?: AccordionVariants;
+};
+
+type AccordionProps = {
+    allowMultiple?: boolean;
+    disableAnimation?: boolean;
+    isCompact?: AccordionSectionProps["isCompact"];
+    sections: AccordionSection[];
+    variant?: AccordionSectionProps["variant"];
+};
+
+const AccordionVariant = {
+    bordered: "deriv-accordion__wrapper--bordered",
+    shadow: "deriv-accordion__wrapper--shadow",
+    underline: "deriv-accordion__wrapper--underline",
+} as const;
+
+const AccordionSection = memo(
+    ({
+        disableAnimation = false,
+        isActiveSection,
+        isCompact = false,
+        section,
+        sectionIndex,
+        setActiveIndex,
+        variant = "underline",
+    }: AccordionSectionProps) => {
+        const toggleSection = () => {
+            const nextIndex = isActiveSection ? null : sectionIndex;
+            setActiveIndex(nextIndex);
+        };
+
+        const [height, setHeight] = useState("");
+        const heightRef = useRef<HTMLDivElement>(null);
+
+        useEffect(() => {
+            const scrollHeight = heightRef.current?.scrollHeight;
+            setHeight(`${scrollHeight}px`);
+        }, [isActiveSection]);
+
+        return (
+            <div
+                className={clsx(
+                    "deriv-accordion__wrapper",
+                    AccordionVariant[variant],
+                    {
+                        "deriv-accordion__wrapper--default": !isCompact,
+                        "deriv-accordion__wrapper--sm": isCompact,
+                    },
+                )}
+            >
+                <div
+                    className={clsx("deriv-accordion__header", {
+                        "deriv-accordion__header--active": isActiveSection,
+                    })}
+                >
+                    <div>{section.title}</div>
+                    <div
+                        className="deriv-accordion__icon"
+                        onClick={toggleSection}
+                    >
+                        <img
+                            src={Chevron}
+                            className={clsx("deriv-accordion__icon", {
+                                "deriv-accordion__icon--active":
+                                    isActiveSection,
+                            })}
+                        />
+                    </div>
+                </div>
+                <div
+                    className={clsx("deriv-accordion__content", {
+                        "deriv-accordion__content--active": isActiveSection,
+                        "deriv-accordion__content--default":
+                            isActiveSection && !isCompact,
+                        "deriv-accordion__content--sm":
+                            isActiveSection && isCompact,
+                        "deriv-accordion__content--no-animations":
+                            disableAnimation,
+                    })}
+                    ref={heightRef}
+                    style={{ maxHeight: isActiveSection ? height : "0px" }}
+                >
+                    {section.content}
+                </div>
+            </div>
+        );
+    },
+);
+
+export const Accordion = ({
+    allowMultiple = false,
+    disableAnimation = false,
+    isCompact = false,
+    sections,
+    variant,
+}: AccordionProps) => {
+    const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
+
+    const setActiveIndex = useCallback(
+        (index: number) => {
+            setActiveIndexes((prevIndexes) => {
+                if (prevIndexes.includes(index)) {
+                    return prevIndexes.filter((i) => i !== index);
+                } else if (allowMultiple) {
+                    return [...prevIndexes, index];
+                } else {
+                    return [index];
+                }
+            });
+        },
+        [allowMultiple],
+    );
+
+    return (
+        <div className="deriv-accordion">
+            {sections.map((section, sectionIndex) => (
+                <AccordionSection
+                    disableAnimation={disableAnimation}
+                    isActiveSection={activeIndexes.includes(sectionIndex)}
+                    isCompact={isCompact}
+                    key={sectionIndex}
+                    section={section}
+                    sectionIndex={sectionIndex}
+                    setActiveIndex={() => setActiveIndex(sectionIndex)}
+                    variant={variant}
+                />
+            ))}
+        </div>
+    );
+};

lib/main.ts

@@ -1,18 +1,19 @@
+export { Accordion } from "./components/Accordion";
 export { ActionScreen } from "./components/ActionScreen";
 export { Button } from "./components/Button";
 export { Checkbox } from "./components/Checkbox";
 export { Divider } from "./components/Divider";
 export { Dropdown } from "./components/Dropdown";
 export { InlineMessage } from "./components/InlineMessage";
 export { Input } from "./components/Input";
-export { LinearProgressBar } from './components/LinearProgressBar'
+export { LinearProgressBar } from "./components/LinearProgressBar";
 export { Loader } from "./components/Loader";
 export { Modal } from "./components/Modal";
 export { PageLayout } from "./components/PageLayout";
 export { PasswordInput } from "./components/PasswordInput";
 export { SideNote } from "./components/SideNote";
-export { Table } from "./components/Table";
 export { Tab, Tabs } from "./components/Tabs";
+export { Table } from "./components/Table";
 export { Text } from "./components/Text";
 export { TextArea } from "./components/TextArea";
 export { ToggleSwitch } from "./components/ToggleSwitch";

src/stories/Accordion.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from "../../lib/main";
+
+const meta = {
+    title: "Components/Accordion",
+    component: Accordion,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    args: {
+        disableAnimation: false,
+        isCompact: false,
+        allowMultiple: false,
+        variant: "underline",
+        sections: [
+            {
+                title: "Section 1",
+                content: `
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id erat sit amet arcu luctus pharetra. Cras scelerisque dolor non justo dignissim efficitur. Nunc non molestie nunc, venenatis maximus ante. Vestibulum mattis faucibus scelerisque. Nulla tempus semper congue. Phasellus maximus iaculis eleifend. Praesent elementum risus augue, eu viverra eros pulvinar sagittis. Aliquam ullamcorper vel metus at ultricies. Phasellus sollicitudin nibh lacus, nec malesuada felis dapibus eu. Suspendisse ut condimentum felis, vitae accumsan nunc. Nunc non bibendum diam, eget molestie metus. Nam orci sem, porttitor sed libero ut, rutrum tristique nulla. Praesent et odio posuere diam ultricies luctus nec eu nibh. Cras sit amet sagittis erat. Nulla viverra rhoncus magna, vitae aliquet ex consectetur at.
+              `,
+            },
+            {
+                title: "Section 2",
+                content: `
+                Aliquam vel libero et tortor sagittis condimentum. Nam id varius turpis, id pharetra eros. Mauris purus tortor, mattis quis eros in, molestie pharetra lorem. Morbi viverra urna purus, nec ornare purus aliquet et. Curabitur tempus nulla id leo eleifend, sit amet lobortis libero interdum. Proin nulla neque, imperdiet nec metus in, volutpat accumsan sem. Curabitur imperdiet et turpis at condimentum. Nunc nec quam fringilla, porta elit nec, pellentesque ligula.
+
+              `,
+            },
+            {
+                title: "Section 3",
+                content: `
+                Sed lobortis rutrum dui ut consequat. Vestibulum sollicitudin orci eget risus volutpat, quis congue neque pharetra. Nulla sed justo commodo tellus tincidunt lobortis. Nunc tortor augue, consequat eu odio nec, accumsan accumsan lorem. Suspendisse maximus ultricies turpis, consequat mollis diam tempor ut. Fusce a elementum est. Nulla odio elit, malesuada eu leo sit amet, malesuada accumsan magna. Maecenas molestie bibendum lorem, et ullamcorper dui euismod eget. Proin eget dui dapibus lacus fermentum mattis vitae iaculis lectus. Pellentesque in risus in nibh commodo imperdiet. Morbi at tempus dui. Mauris pellentesque mauris id erat blandit, ac ultrices metus efficitur. Donec porttitor neque eget elit volutpat gravida.
+
+              `,
+            },
+        ],
+    },
+    argTypes: {
+        variant: {
+            options: ["underline", "bordered", "shadow"],
+            control: { type: "select" },
+        },
+        sections: {
+            control: {
+                disable: true,
+            },
+        },
+    },
+} satisfies Meta<typeof Accordion>;
+
+export const AllowMultiple: Story = {
+    args: {
+        allowMultiple: true,
+    },
+    render: (args) => (
+        <div className="theme--light">
+            <Accordion {...args} />
+        </div>
+    ),
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Underline: Story = {
+    args: {
+        variant: "underline",
+    },
+    render: (args) => (
+        <div className="theme--light">
+            <Accordion {...args} />
+        </div>
+    ),
+};
+
+export const Bordered: Story = {
+    args: {
+        variant: "bordered",
+    },
+    render: (args) => (
+        <div className="theme--light">
+            <Accordion {...args} />
+        </div>
+    ),
+};
+
+export const Shadow: Story = {
+    args: {
+        variant: "shadow",
+    },
+    render: (args) => (
+        <div className="theme--light">
+            <Accordion {...args} />
+        </div>
+    ),
+};
+
+export const DisabledAnimation: Story = {
+    args: {
+        disableAnimation: true,
+    },
+    render: (args) => (
+        <div className="theme--light">
+            <Accordion {...args} />
+        </div>
+    ),
+};
+
+export const Compact: Story = {
+    args: {
+        isCompact: true,
+    },
+    render: (args) => (
+        <div className="theme--light">
+            <Accordion {...args} />
+        </div>
+    ),
+};