Fix type errors

source/03-components/Accordion/Accordion.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
 import AccordionComponent from './Accordion';
 import accordionArgs from './accordion.yml';
+import { AccordionItemProps } from './AccordionItem';
 
 const meta: Meta<typeof AccordionComponent> = {
   title: 'Components/Accordion',
@@ -11,10 +12,18 @@ const meta: Meta<typeof AccordionComponent> = {
 
 type Story = StoryObj<typeof AccordionComponent>;
 
-accordionArgs.accordionItems = accordionArgs.accordionItems.map(item => {
-  item.content = parse(item.content);
-  return item;
-});
+accordionArgs.accordionItems = accordionArgs.accordionItems.map(
+  (
+    item:
+      | (Omit<AccordionItemProps, 'content'> & { content: string })
+      | AccordionItemProps,
+  ) => {
+    if (typeof item.content === 'string') {
+      item.content = parse(item.content) as string;
+    }
+    return item;
+  },
+);
 
 const Accordion: Story = {
   render: args => <AccordionComponent {...args} />,

source/03-components/Accordion/Accordion.tsx

@@ -34,17 +34,25 @@ function Accordion({
   }, [accordionItemsStatus]);
 
   const openAccordionItem = (items: AccordionItemProps[], index: number) => {
-    return items.with(index, {
-      ...items[index],
-      isOpen: true,
-    });
+    return [
+      ...items.slice(0, index),
+      {
+        ...items[index],
+        isOpen: true,
+      },
+      ...items.slice(index + 1),
+    ];
   };
 
   const closeAccordionItem = (items: AccordionItemProps[], index: number) => {
-    return items.with(index, {
-      ...items[index],
-      isOpen: false,
-    });
+    return [
+      ...items.slice(0, index),
+      {
+        ...items[index],
+        isOpen: false,
+      },
+      ...items.slice(index + 1),
+    ];
   };
 
   const handleClick = (id: string, isOpen = false) => {

source/03-components/Accordion/AccordionItem.tsx

@@ -1,13 +1,19 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
-import { ElementType, MouseEventHandler, useEffect, useRef } from 'react';
+import {
+  ElementType,
+  MouseEventHandler,
+  ReactElement,
+  useEffect,
+  useRef,
+} from 'react';
 import styles from './accordion-item.module.css';
 import { slideCollapse, slideExpand } from '../../06-utility/slide';
 
 export interface AccordionItemProps extends GessoComponent {
   id: string;
   title: string;
-  content: string;
+  content: ReactElement;
   titleElement?: ElementType;
   isOpen?: boolean;
   accordionSpeed?: string;

source/06-utility/slide.ts

@@ -34,7 +34,6 @@ export const slideCollapse = (
     target.style.paddingBottom = '0';
     target.style.marginTop = '0';
     target.style.marginBottom = '0';
-    target.style.marginHeight = 'auto';
 
     window.requestAnimationFrame(() => {
       function hideTarget() {
@@ -70,7 +69,7 @@ export const slideCollapse = (
  *
  * @name slideExpand
  * @param {HTMLElement} target - The element expanding.
- * @param {integer} duration - The duration of the animation, defaults to gesso token standard.
+ * @param {number} duration - The duration of the animation, defaults to gesso token standard.
  * @param {string} easing - The easing of the animation, defaults to gesso token ease-in-out.
  * @param {boolean} hideContent - Whether to hide collapsed content from screen readers, defaults to true.
  */