Merge pull request #277 from Enterwell/feature/item-accordion

feat: Added ItemAccordion component to ui

apps/docs/components/ExampleItemAccordion.tsx

@@ -0,0 +1,26 @@
+import { ItemAccordion, ItemAccordionDetails, ItemAccordionSummary, ItemAccordionActions } from '@enterwell/react-ui';
+import { Button, Stack, Typography } from '@mui/material';
+
+export function ExampleItemAccordion() {
+    return (
+        <ItemAccordion>
+            <ItemAccordionSummary>
+                <Stack width="160px">
+                    <Typography fontSize={14} fontWeight="bold">
+                        Test title
+                    </Typography>
+                </Stack>
+                <Stack>
+                    <Typography>Test summary text</Typography>
+                </Stack>
+            </ItemAccordionSummary>
+            <ItemAccordionDetails></ItemAccordionDetails>
+            <ItemAccordionActions>
+                <Stack direction={'row'}>
+                    <Button color='warning'>Delete</Button>
+                    <Button color='success'>Update</Button>
+                </Stack>
+            </ItemAccordionActions>
+        </ItemAccordion>
+    )
+}

apps/docs/pages/react-ui/components/item-accordion.mdx

@@ -0,0 +1,33 @@
+---
+title: ItemAccordion
+---
+
+import { ItemAccordion } from '@enterwell/react-ui';
+import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
+import { ExampleItemAccordion } from '../../../components/ExampleItemAccordion.tsx';
+import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';
+
+# ItemAccordion
+
+## Description
+
+<ComponentDescription name="ItemAccordion" />
+
+### Parameters
+
+<ComponentParameters name="ItemAccordion" />
+
+## Example
+
+<ComponentWithSource component={ ExampleItemAccordion } centered />
+
+## Inspect
+
+<details>
+    <summary>Source code</summary>
+    <ComponentSource 
+        package="@enterwell/react-ui" 
+        directory="ItemAccordion" 
+        name="ItemAccordion"
+    />
+</details>

packages/react-ui/.changelog.json

@@ -9,6 +9,7 @@
     "SearchHeader",
     "Select",
     "SplitButton",
-    "TimeInput"
+    "TimeInput",
+    "ItemAccordion"
   ]
 }

packages/react-ui/ItemAccordion/ItemAccordion.tsx

@@ -0,0 +1,12 @@
+import MuiAccordion, { type AccordionProps } from '@mui/material/Accordion';
+
+/**
+ * Item accordion component.
+ * 
+ * @param props - The props of the component
+ * @returns The ItemAccordion component.
+ * @public
+ */
+export function ItemAccordion(props: AccordionProps) {
+  return <MuiAccordion disableGutters {...props} />
+}

packages/react-ui/ItemAccordion/ItemAccordionActions.tsx

@@ -0,0 +1,18 @@
+import { useTheme } from '@mui/material';
+import MuiAccordionActions, { type AccordionActionsProps } from '@mui/material/AccordionActions';
+
+/**
+ * Item accordion actions component.
+ * 
+ * @param props - The props of the component
+ * @returns The ItemAccordionActions component.
+ * @public
+ */
+export function ItemAccordionActions(props: AccordionActionsProps) {
+  const theme = useTheme();
+  return (
+    <MuiAccordionActions {...props} sx={{ borderTop: '1px solid', borderTopColor: theme.palette.divider, ...props.sx }} />
+  );
+}
+
+export default ItemAccordionActions;

packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx

@@ -0,0 +1,18 @@
+import { useTheme } from '@mui/material';
+import MuiAccordionDetails, { type AccordionDetailsProps } from '@mui/material/AccordionDetails';
+
+/**
+ * Item accordion details component.
+ * 
+ * @param props - The props of the component
+ * @returns The ItemAccordionDetails component.
+ * @public
+ */
+export function ItemAccordionDetails(props: AccordionDetailsProps) {
+  const theme = useTheme();
+  return (
+    <MuiAccordionDetails {...props} sx={{ padding: 16, borderTop: '1px solid', borderTopColor: theme.palette.divider, ...props.sx }} />
+  );
+}
+
+export default ItemAccordionDetails;

packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx

@@ -0,0 +1,28 @@
+import MuiAccordionSummary, { type AccordionSummaryProps } from '@mui/material/AccordionSummary';
+import { ExpandMore } from '@mui/icons-material';
+
+/**
+ * Item accordion summary component.
+ * 
+ * @param props - The props of the component
+ * @returns The ItemAccordionSummary component.
+ * @public
+ */
+export function ItemAccordionSummary(props: AccordionSummaryProps) {
+  const {
+    children,
+    ...rest
+  } = props;
+
+  return (
+    <MuiAccordionSummary
+      expandIcon={<ExpandMore color="primary" />}
+      {...rest}
+      sx={{ height: 56, ...rest.sx }}
+    >
+      {children}
+    </MuiAccordionSummary >
+  );
+}
+
+export default ItemAccordionSummary;

packages/react-ui/ItemAccordion/index.tsx

@@ -0,0 +1,4 @@
+export * from "./ItemAccordion";
+export * from "./ItemAccordionSummary";
+export * from "./ItemAccordionDetails";
+export * from "./ItemAccordionActions";

packages/react-ui/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 // component exports
+export * from "./ItemAccordion";
 export * from "./Select";
 export * from "./SplitButton";
 export * from "./DatePicker";

packages/react-ui/temp/react-ui.api.md

@@ -4,6 +4,10 @@
 
 ```ts
 
+import { AccordionActionsProps } from '@mui/material/AccordionActions';
+import { AccordionDetailsProps } from '@mui/material/AccordionDetails';
+import { AccordionProps } from '@mui/material/Accordion';
+import { AccordionSummaryProps } from '@mui/material/AccordionSummary';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { ButtonGroupProps } from '@mui/material';
 import { ButtonProps } from '@mui/material';
@@ -102,6 +106,18 @@ export type DropdownButtonProps = ButtonProps & {
     onClick?: (event: any, value: any) => void;
 };
 
+// @public
+export function ItemAccordion(props: AccordionProps): react_jsx_runtime.JSX.Element;
+
+// @public
+export function ItemAccordionActions(props: AccordionActionsProps): react_jsx_runtime.JSX.Element;
+
+// @public
+export function ItemAccordionDetails(props: AccordionDetailsProps): react_jsx_runtime.JSX.Element;
+
+// @public
+export function ItemAccordionSummary(props: AccordionSummaryProps): react_jsx_runtime.JSX.Element;
+
 // @public
 export function PageDrawer({ expanded, onChange, children, height, minHeight, onResize, color, ...rest }: PageDrawerProps): react_jsx_runtime.JSX.Element;