From 04d261858ca034b7840eddf7ca75ddb7f5ea1f90 Mon Sep 17 00:00:00 2001
From: Josip Paladin <jo.paladin@gmail.com>
Date: Thu, 4 Jan 2024 13:49:25 +0100
Subject: [PATCH 1/6] init item accordion component

---
 apps/docs/components/ExampleItemAccordion.tsx | 26 +++++++++++++++
 .../react-ui/components/item-accordion.mdx    | 33 +++++++++++++++++++
 .../react-ui/ItemAccordion/ItemAccordion.tsx  | 12 +++++++
 .../ItemAccordion/ItemAccordionActions.tsx    | 17 ++++++++++
 .../ItemAccordion/ItemAccordionDetails.tsx    | 17 ++++++++++
 .../ItemAccordion/ItemAccordionSummary.tsx    | 27 +++++++++++++++
 packages/react-ui/ItemAccordion/index.tsx     |  4 +++
 .../changes/Added ItemAccordion component     |  0
 packages/react-ui/index.tsx                   |  1 +
 packages/react-ui/temp/react-ui.api.md        | 16 +++++++++
 10 files changed, 153 insertions(+)
 create mode 100644 apps/docs/components/ExampleItemAccordion.tsx
 create mode 100644 apps/docs/pages/react-ui/components/item-accordion.mdx
 create mode 100644 packages/react-ui/ItemAccordion/ItemAccordion.tsx
 create mode 100644 packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
 create mode 100644 packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
 create mode 100644 packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
 create mode 100644 packages/react-ui/ItemAccordion/index.tsx
 create mode 100644 packages/react-ui/changes/Added ItemAccordion component

diff --git a/apps/docs/components/ExampleItemAccordion.tsx b/apps/docs/components/ExampleItemAccordion.tsx
new file mode 100644
index 00000000..f5b9bfbd
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/apps/docs/pages/react-ui/components/item-accordion.mdx b/apps/docs/pages/react-ui/components/item-accordion.mdx
new file mode 100644
index 00000000..48963105
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/react-ui/ItemAccordion/ItemAccordion.tsx b/packages/react-ui/ItemAccordion/ItemAccordion.tsx
new file mode 100644
index 00000000..755116f9
--- /dev/null
+++ b/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} />
+};
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx b/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
new file mode 100644
index 00000000..f904e0ec
--- /dev/null
+++ b/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
@@ -0,0 +1,17 @@
+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) {
+
+  return (
+    <MuiAccordionActions {...props} sx={{ borderTop: '1px solid rgba(0, 0, 0, .125)', ...props.sx }} />
+  );
+}
+
+export default ItemAccordionActions;
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx b/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
new file mode 100644
index 00000000..5ef43d9c
--- /dev/null
+++ b/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
@@ -0,0 +1,17 @@
+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) {
+
+  return (
+    <MuiAccordionDetails sx={{ padding: 16, borderTop: '1px solid rgba(0, 0, 0, .125)' }} {...props} />
+  );
+}
+
+export default ItemAccordionDetails;
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx b/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
new file mode 100644
index 00000000..75538b28
--- /dev/null
+++ b/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
@@ -0,0 +1,27 @@
+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
+      sx={{ height: '52px' }}
+      expandIcon={<ExpandMore color="primary" />}
+      {...rest}
+    >
+      {children}
+    </MuiAccordionSummary>
+  );
+}
+
+export default ItemAccordionSummary;
diff --git a/packages/react-ui/ItemAccordion/index.tsx b/packages/react-ui/ItemAccordion/index.tsx
new file mode 100644
index 00000000..e5f5b8ca
--- /dev/null
+++ b/packages/react-ui/ItemAccordion/index.tsx
@@ -0,0 +1,4 @@
+export * from "./ItemAccordion";
+export * from "./ItemAccordionSummary";
+export * from "./ItemAccordionDetails";
+export * from "./ItemAccordionActions";
diff --git a/packages/react-ui/changes/Added ItemAccordion component b/packages/react-ui/changes/Added ItemAccordion component
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/react-ui/index.tsx b/packages/react-ui/index.tsx
index 9e5500af..9ae55a4d 100644
--- a/packages/react-ui/index.tsx
+++ b/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";
diff --git a/packages/react-ui/temp/react-ui.api.md b/packages/react-ui/temp/react-ui.api.md
index ca594e16..38f5d835 100644
--- a/packages/react-ui/temp/react-ui.api.md
+++ b/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;
 

From 43384465491f1b8f631253e51f9de6fe10223e71 Mon Sep 17 00:00:00 2001
From: Josip Paladin <jo.paladin@gmail.com>
Date: Thu, 4 Jan 2024 15:49:56 +0100
Subject: [PATCH 2/6] fixed props

---
 packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx | 2 +-
 packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx b/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
index 5ef43d9c..6f6a0c8c 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
@@ -10,7 +10,7 @@ import MuiAccordionDetails, { type AccordionDetailsProps } from '@mui/material/A
 export function ItemAccordionDetails(props: AccordionDetailsProps) {
 
   return (
-    <MuiAccordionDetails sx={{ padding: 16, borderTop: '1px solid rgba(0, 0, 0, .125)' }} {...props} />
+    <MuiAccordionDetails {...props} sx={{ padding: 16, borderTop: '1px solid rgba(0, 0, 0, .125)', ...props.sx }} />
   );
 }
 
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx b/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
index 75538b28..2b2d4836 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
@@ -15,12 +15,12 @@ export function ItemAccordionSummary(props: AccordionSummaryProps) {
 
   return (
     <MuiAccordionSummary
-      sx={{ height: '52px' }}
       expandIcon={<ExpandMore color="primary" />}
       {...rest}
+      sx={{ height: 56, ...rest.sx }}
     >
       {children}
-    </MuiAccordionSummary>
+    </MuiAccordionSummary >
   );
 }
 

From d38e9ca5beafe87ea3d91b1ed85ed75c8551fca8 Mon Sep 17 00:00:00 2001
From: Josip Paladin <jo.paladin@gmail.com>
Date: Thu, 4 Jan 2024 15:56:20 +0100
Subject: [PATCH 3/6] comments

---
 packages/react-ui/ItemAccordion/ItemAccordion.tsx        | 4 ++--
 packages/react-ui/ItemAccordion/ItemAccordionActions.tsx | 4 ++--
 packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx | 4 ++--
 packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx | 5 +++--
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/react-ui/ItemAccordion/ItemAccordion.tsx b/packages/react-ui/ItemAccordion/ItemAccordion.tsx
index 755116f9..495a342e 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordion.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordion.tsx
@@ -3,8 +3,8 @@ import MuiAccordion, { type AccordionProps } from '@mui/material/Accordion';
 /**
  * Item accordion component.
  * 
- * @param props -The props of the component 
- * @returns  The ItemAccordion component.
+ * @param props - The props of the component 
+ * @returns The ItemAccordion component.
  * @public
  */
 export function ItemAccordion(props: AccordionProps) {
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx b/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
index f904e0ec..05ae2f31 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
@@ -3,8 +3,8 @@ import MuiAccordionActions, { type AccordionActionsProps } from '@mui/material/A
 /**
  * Item accordion actions component.
  * 
- * @param props -The props of the component 
- * @returns  The ItemAccordionActions component.
+ * @param props - The props of the component 
+ * @returns The ItemAccordionActions component.
  * @public
  */
 export function ItemAccordionActions(props: AccordionActionsProps) {
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx b/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
index 6f6a0c8c..f8f35963 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
@@ -3,8 +3,8 @@ import MuiAccordionDetails, { type AccordionDetailsProps } from '@mui/material/A
 /**
  * Item accordion details component.
  * 
- * @param props -The props of the component 
- * @returns  The ItemAccordionDetails component.
+ * @param props - The props of the component 
+ * @returns The ItemAccordionDetails component.
  * @public
  */
 export function ItemAccordionDetails(props: AccordionDetailsProps) {
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx b/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
index 2b2d4836..40e93daa 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
@@ -1,10 +1,11 @@
 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.
+ * @param props - The props of the component 
+ * @returns The ItemAccordionSummary component.
  * @public
  */
 export function ItemAccordionSummary(props: AccordionSummaryProps) {

From d51e0652dc581ae96fe6913dc824cfcf4b319925 Mon Sep 17 00:00:00 2001
From: Josip Paladin <jo.paladin@gmail.com>
Date: Thu, 4 Jan 2024 16:20:44 +0100
Subject: [PATCH 4/6] cleanup

---
 packages/react-ui/ItemAccordion/ItemAccordion.tsx        | 4 ++--
 packages/react-ui/ItemAccordion/ItemAccordionActions.tsx | 3 +--
 packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx | 2 +-
 packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx | 2 +-
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/react-ui/ItemAccordion/ItemAccordion.tsx b/packages/react-ui/ItemAccordion/ItemAccordion.tsx
index 495a342e..720e7a56 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordion.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordion.tsx
@@ -3,10 +3,10 @@ import MuiAccordion, { type AccordionProps } from '@mui/material/Accordion';
 /**
  * Item accordion component.
  * 
- * @param props - The props of the component 
+ * @param props - The props of the component
  * @returns The ItemAccordion component.
  * @public
  */
 export function ItemAccordion(props: AccordionProps) {
   return <MuiAccordion disableGutters {...props} />
-};
+}
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx b/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
index 05ae2f31..da226065 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
@@ -3,12 +3,11 @@ import MuiAccordionActions, { type AccordionActionsProps } from '@mui/material/A
 /**
  * Item accordion actions component.
  * 
- * @param props - The props of the component 
+ * @param props - The props of the component
  * @returns The ItemAccordionActions component.
  * @public
  */
 export function ItemAccordionActions(props: AccordionActionsProps) {
-
   return (
     <MuiAccordionActions {...props} sx={{ borderTop: '1px solid rgba(0, 0, 0, .125)', ...props.sx }} />
   );
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx b/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
index f8f35963..2ec0ef7a 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
@@ -3,7 +3,7 @@ import MuiAccordionDetails, { type AccordionDetailsProps } from '@mui/material/A
 /**
  * Item accordion details component.
  * 
- * @param props - The props of the component 
+ * @param props - The props of the component
  * @returns The ItemAccordionDetails component.
  * @public
  */
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx b/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
index 40e93daa..56c788c9 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordionSummary.tsx
@@ -4,7 +4,7 @@ import { ExpandMore } from '@mui/icons-material';
 /**
  * Item accordion summary component.
  * 
- * @param props - The props of the component 
+ * @param props - The props of the component
  * @returns The ItemAccordionSummary component.
  * @public
  */

From 14b0a4c4dbf43060b313dd1fda93291f56fa7f3a Mon Sep 17 00:00:00 2001
From: Josip Paladin <jo.paladin@gmail.com>
Date: Mon, 8 Jan 2024 08:46:56 +0100
Subject: [PATCH 5/6] updated and used changelog categories

---
 packages/react-ui/.changelog.json                              | 3 ++-
 ...component => Added [ItemAccordion] ItemAccordion component} | 0
 2 files changed, 2 insertions(+), 1 deletion(-)
 rename packages/react-ui/changes/{Added ItemAccordion component => Added [ItemAccordion] ItemAccordion component} (100%)

diff --git a/packages/react-ui/.changelog.json b/packages/react-ui/.changelog.json
index ea1c548f..77a91f4b 100644
--- a/packages/react-ui/.changelog.json
+++ b/packages/react-ui/.changelog.json
@@ -9,6 +9,7 @@
     "SearchHeader",
     "Select",
     "SplitButton",
-    "TimeInput"
+    "TimeInput",
+    "ItemAccordion"
   ]
 }
\ No newline at end of file
diff --git a/packages/react-ui/changes/Added ItemAccordion component b/packages/react-ui/changes/Added [ItemAccordion] ItemAccordion component
similarity index 100%
rename from packages/react-ui/changes/Added ItemAccordion component
rename to packages/react-ui/changes/Added [ItemAccordion] ItemAccordion component

From 6abf7e2a6e14720e51a275e48b2e3e0cd16dc20a Mon Sep 17 00:00:00 2001
From: Josip Paladin <jo.paladin@gmail.com>
Date: Mon, 8 Jan 2024 22:36:56 +0100
Subject: [PATCH 6/6] using border color from mui theme divider

---
 packages/react-ui/ItemAccordion/ItemAccordionActions.tsx | 4 +++-
 packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx b/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
index da226065..5db18942 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordionActions.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import MuiAccordionActions, { type AccordionActionsProps } from '@mui/material/AccordionActions';
 
 /**
@@ -8,8 +9,9 @@ import MuiAccordionActions, { type AccordionActionsProps } from '@mui/material/A
  * @public
  */
 export function ItemAccordionActions(props: AccordionActionsProps) {
+  const theme = useTheme();
   return (
-    <MuiAccordionActions {...props} sx={{ borderTop: '1px solid rgba(0, 0, 0, .125)', ...props.sx }} />
+    <MuiAccordionActions {...props} sx={{ borderTop: '1px solid', borderTopColor: theme.palette.divider, ...props.sx }} />
   );
 }
 
diff --git a/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx b/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
index 2ec0ef7a..1ab2002c 100644
--- a/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
+++ b/packages/react-ui/ItemAccordion/ItemAccordionDetails.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import MuiAccordionDetails, { type AccordionDetailsProps } from '@mui/material/AccordionDetails';
 
 /**
@@ -8,9 +9,9 @@ import MuiAccordionDetails, { type AccordionDetailsProps } from '@mui/material/A
  * @public
  */
 export function ItemAccordionDetails(props: AccordionDetailsProps) {
-
+  const theme = useTheme();
   return (
-    <MuiAccordionDetails {...props} sx={{ padding: 16, borderTop: '1px solid rgba(0, 0, 0, .125)', ...props.sx }} />
+    <MuiAccordionDetails {...props} sx={{ padding: 16, borderTop: '1px solid', borderTopColor: theme.palette.divider, ...props.sx }} />
   );
 }