Merge pull request #205 from NIAEFEUP/feature/accordion-component

Feature/accordion component

content-scripts/components/Accordion.tsx

@@ -0,0 +1,73 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import jsx from "texsaur";
+
+interface AccordionProps {
+    id: string;
+    header: JSX.Element | (string | JSX.Element)[];
+    max_size: number;
+}
+
+export const Accordion = (
+    { id, header, max_size }: AccordionProps,
+    ...children: (string | JSX.Element)[]
+): JSX.Element => {
+    const toggleAccordion = (event: MouseEvent) => {
+        const button: HTMLElement = event.currentTarget as HTMLElement;
+        const icon: HTMLElement = button.querySelector(
+            `#${id} .se-card-header i`,
+        ) as HTMLElement;
+        const innerContent = document.getElementById(`${id}-content`);
+
+        if (!innerContent || !icon) {
+            console.log("Error: Element not found.");
+            return;
+        }
+
+        const isExpanded = button.getAttribute("data-expanded") === "true";
+
+        if (!isExpanded) {
+            button.setAttribute("data-expanded", "true");
+
+            icon.animate(
+                [{ transform: "rotate(0)" }, { transform: "rotate(180deg)" }],
+                { duration: 300, fill: "forwards", easing: "ease-in" },
+            );
+
+            innerContent.style.maxHeight = `${max_size}px`;
+        } else {
+            button.setAttribute("data-expanded", "false");
+
+            icon.animate(
+                [{ transform: "rotate(180deg)" }, { transform: "rotate(0)" }],
+                { duration: 300, fill: "forwards", easing: "ease-in" },
+            );
+
+            innerContent.style.maxHeight = `0px`;
+        }
+    };
+
+    return (
+        <div className="se-expandable-card" id={id}>
+            <button
+                className="se-card-expand-button se-card-header"
+                data-expanded="false"
+                onclick={toggleAccordion}
+            >
+                <div className="se-card-content">{header}</div>
+                <i className="ri-arrow-down-s-line ri-2x"></i>
+            </button>
+
+            <div
+                className="se-expandable-card-wrapper"
+                id={`${id}-content`}
+                style={{
+                    maxHeight: "0px",
+                    overflow: "hidden",
+                    transition: "max-height 0.3s ease",
+                }}
+            >
+                {children}
+            </div>
+        </div>
+    );
+};

content-scripts/pages/components_page.tsx

@@ -3,8 +3,9 @@ import jsx from "texsaur";
 import Button from "../components/Button";
 import { Table } from "../components/Table";
 import Icon from "../components/Icon";
+import { Accordion } from "../components/Accordion";
 
-const components = ["Icon", "Button", "Table"];
+const components = ["Icon", "Button", "Table", "Accordion"];
 
 export function createComponentsPage() {
     // TODO: remove this check
@@ -208,6 +209,60 @@ export function createComponentsPage() {
                         ]}
                     />
                 </Component>
+
+                {/* Accordion */}
+                <Component
+                    name="Accordion"
+                    description="A collapsible component that can expand to show or hide content."
+                    code={`
+<Accordion
+  id="example-accordion"
+  header= 
+    { <h3>Expandable Content</h3> }
+  max_size={200}
+>
+    <p>This is the content of the accordion</p>
+    <p>This is more content</p>
+    <Table
+        name="my_table_accordion"
+        headers={[
+            ["Component", "Component"],
+            ["Description", "Description"],
+            ["Status", "Status"],
+        ]}
+        data={[
+            ["Button", "A button that can be clicked", "In progress"],
+            ["Input", "A text input field", "Complete"],
+        ]}
+    />
+</Accordion>
+                    `}
+                >
+                    <Accordion
+                        id="example-accordion"
+                        header={<h3>Expandable Content</h3>}
+                        max_size={200}
+                    >
+                        <p>This is the content of the accordion</p>
+                        <p>This is more content</p>
+                        <Table
+                            name="my_table_accordion"
+                            headers={[
+                                ["Component", "Component"],
+                                ["Description", "Description"],
+                                ["Status", "Status"],
+                            ]}
+                            data={[
+                                [
+                                    "Button",
+                                    "A button that can be clicked",
+                                    "In progress",
+                                ],
+                                ["Input", "A text input field", "Complete"],
+                            ]}
+                        />
+                    </Accordion>
+                </Component>
             </div>
         </div>
     );

css/components.css

@@ -129,3 +129,29 @@
         }
     }
 }
+
+.se-card-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+}
+
+.se-card-expand-button {
+    background: inherit !important;
+    border: none !important;
+    padding: none !important;
+    margin: none !important;
+    box-shadow: none !important;
+}
+
+.se-card-expand-button:hover {
+    background: inherit !important;
+}
+
+.se-expandable-card-wrapper {
+    overflow: hidden;
+    transition: max-height 300ms ease-in-out;
+}

manifest.js

@@ -27,7 +27,6 @@ let manifest = {
                 "css/classPage.css",
                 "css/profilePage.css",
                 "css/card.css",
-                "css/expandableCard.css",
             ],
         },
         {