add Accordion component

Author: clarasb

chartlets.js/packages/lib/src/plugins/mui/Accordion.test.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2019-2026 by Brockmann Consult Development team
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Accordion } from "./Accordion";
+import { createChangeHandler } from "@/plugins/mui/common.test";
+
+describe("Accordion", () => {
+  it("should render the Accordion component", () => {
+    render(
+      <Accordion
+        id="acc"
+        type="Accordion"
+        label="My Accordion"
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("My Accordion")).not.toBeUndefined();
+  });
+
+  it("should fire 'expanded' property", () => {
+    const { recordedEvents, onChange } = createChangeHandler();
+
+    render(
+      <Accordion
+        id="acc"
+        type="Accordion"
+        expanded={false}
+        label="My Accordion"
+        onChange={onChange}
+      ></Accordion>,
+    );
+
+    // MUI Summary renders a button element
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(recordedEvents.length).toEqual(1);
+    expect(recordedEvents[0]).toEqual({
+      componentType: "Accordion",
+      id: "acc",
+      property: "expanded",
+      value: true,
+    });
+  });
+});

chartlets.js/packages/lib/src/plugins/mui/Accordion.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2019-2026 by Brockmann Consult Development team
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import MuiAccordion from "@mui/material/Accordion";
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
+import MuiAccordionSummary from "@mui/material/AccordionSummary";
+import MuiTypography from "@mui/material/Typography";
+
+import type { ComponentState, ComponentProps } from "@/index";
+import { Children } from "@/index";
+import { Icon } from "./Icon";
+import type { SyntheticEvent } from "react";
+
+interface AccordionState extends ComponentState {
+  label?: string;
+  icon?: string;
+  expanded?: boolean;
+  disabled?: boolean;
+}
+
+interface AccordionProps extends ComponentProps, AccordionState {}
+
+export const Accordion = ({
+  id,
+  style,
+  label,
+  icon,
+  expanded,
+  disabled,
+  children: nodes,
+  onChange,
+}: AccordionProps) => {
+  const handleChange = (_event: SyntheticEvent, isExpanded: boolean) => {
+    if (id) {
+      onChange?.({
+        componentType: "Accordion",
+        id,
+        property: "expanded",
+        value: isExpanded,
+      });
+    }
+  };
+  return (
+    <div>
+      <MuiAccordion
+        id={id}
+        style={style}
+        expanded={expanded}
+        disabled={disabled}
+        onChange={handleChange}
+      >
+        <MuiAccordionSummary
+          expandIcon={icon ? <Icon iconName={icon} /> : undefined}
+        >
+          {label ? (
+            <MuiTypography component="span">{label}</MuiTypography>
+          ) : null}
+        </MuiAccordionSummary>
+
+        {nodes && (
+          <MuiAccordionDetails>
+            <Children nodes={nodes} onChange={onChange} />
+          </MuiAccordionDetails>
+        )}
+      </MuiAccordion>
+    </div>
+  );
+};

chartlets.js/packages/lib/src/plugins/mui/index.ts

@@ -5,6 +5,7 @@
  */
 
 import type { Plugin } from "@/index";
+import { Accordion } from "./Accordion";
 import { Box } from "./Box";
 import { Button } from "./Button";
 import { Checkbox } from "./Checkbox";
@@ -25,6 +26,7 @@ import { Table } from "@/plugins/mui/Table";
 export default function mui(): Plugin {
   return {
     components: [
+      ["Accordion", Accordion],
       ["Box", Box],
       ["Button", Button],
       ["Checkbox", Checkbox],

chartlets.py/chartlets/components/__init__.py

@@ -2,6 +2,7 @@
 #  Permissions are hereby granted under the terms of the MIT License:
 #  https://opensource.org/licenses/MIT.
 
+from .accordion import Accordion
 from .box import Box
 from .button import Button
 from .button import IconButton

chartlets.py/chartlets/components/accordion.py

@@ -0,0 +1,27 @@
+#  Copyright (c) 2019-2026 by Brockmann Consult Development team
+#  Permissions are hereby granted under the terms of the MIT License:
+#  https://opensource.org/licenses/MIT.
+
+
+from dataclasses import dataclass, field
+
+from chartlets import Component
+
+@dataclass(frozen=True)
+class Accordion(Component):
+    """Accordion container."""
+
+    label: str | None = None
+    """Header of the accordion."""
+
+    icon: str | None = None
+    """Material icon name for the expand icon (e.g. 'expand_more')."""
+
+    expanded: bool = field(default=False)
+    """If set, controls whether the accordion is expanded."""
+
+    disabled: bool | None = None
+    """If set, controls whether the accordion is disabled."""
+
+    children: list[Component] = field(default_factory=list)
+    """Accordion content."""