Fix/3043 accordion summary not working (#3529)

* creating cumb accordion component

* Refactor Accordion to use app-components pattern

- Created AccordionItem component in app-components for reusability
- Updated layout Accordion to use new app-component architecture
- Refactored LayoutSetSummaryAccordion to use app-components only
- Fixed nested Details structure bug in LayoutSetSummaryAccordion
- All existing tests continue to pass

Author: adamhaeger

src/app-components/Accordion/AccordionItem.module.css

@@ -0,0 +1,9 @@
+@media print {
+  .accordion h2 > button {
+    display: unset !important;
+  }
+
+  .accordion {
+    break-inside: avoid;
+  }
+}

src/app-components/Accordion/AccordionItem.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Details } from '@digdir/designsystemet-react';
+import cn from 'classnames';
+
+import classes from 'src/app-components/Accordion/AccordionItem.module.css';
+
+interface AccordionProps {
+  title: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onToggle?: (isOpen: boolean) => void;
+}
+
+export const AccordionItem = ({
+  title,
+  children,
+  className,
+  open,
+  defaultOpen = false,
+  onToggle,
+}: AccordionProps): React.JSX.Element => {
+  const [isOpen, setOpen] = React.useState(defaultOpen);
+
+  const isControlled = open !== undefined;
+  const currentOpen = isControlled ? open : isOpen;
+
+  const handleToggle = () => {
+    const newOpen = !currentOpen;
+    if (!isControlled) {
+      setOpen(newOpen);
+    }
+    onToggle?.(newOpen);
+  };
+
+  return (
+    <Details
+      open={currentOpen}
+      onToggle={handleToggle}
+      className={cn(className, classes.accordion)}
+    >
+      <Details.Summary>{title}</Details.Summary>
+      <Details.Content>{children}</Details.Content>
+    </Details>
+  );
+};

src/layout/Accordion/Accordion.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { Card } from '@digdir/designsystemet-react';
 
+import { AccordionItem as AccordionComponent } from 'src/app-components/Accordion/AccordionItem';
 import { Flex } from 'src/app-components/Flex/Flex';
 import { useLanguage } from 'src/features/language/useLanguage';
 import classes from 'src/layout/Accordion/Accordion.module.css';
-import { AccordionItem as AltinnAcordionItem } from 'src/layout/Accordion/AccordionItem';
 import { useIsInAccordionGroup } from 'src/layout/AccordionGroup/AccordionGroupContext';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { GenericComponent } from 'src/layout/GenericComponent';
@@ -21,11 +21,11 @@ export const Accordion = ({ baseComponentId }: PropsFromGenericComponent<'Accord
 
   const title = langAsString(textResourceBindings?.title ?? '');
 
-  const AccordionItem = ({ className }: { className?: string }) => (
-    <AltinnAcordionItem
+  const AccordionContent = ({ className }: { className?: string }) => (
+    <AccordionComponent
       title={title}
       className={className}
-      open={openByDefault}
+      defaultOpen={Boolean(openByDefault)}
     >
       <Flex
         item
@@ -40,16 +40,16 @@ export const Accordion = ({ baseComponentId }: PropsFromGenericComponent<'Accord
           />
         ))}
       </Flex>
-    </AltinnAcordionItem>
+    </AccordionComponent>
   );
 
   return (
     <ComponentStructureWrapper baseComponentId={baseComponentId}>
       {renderAsAccordionItem ? (
-        <AccordionItem className={classes.container} />
+        <AccordionContent className={classes.container} />
       ) : (
         <Card data-color='neutral'>
-          <AccordionItem className={classes.container} />
+          <AccordionContent className={classes.container} />
         </Card>
       )}
     </ComponentStructureWrapper>

src/layout/Accordion/AccordionItem.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Details, Label } from '@digdir/designsystemet-react';
-
+import { AccordionItem } from 'src/app-components/Accordion/AccordionItem';
 import { Flex } from 'src/app-components/Flex/Flex';
 import { Lang } from 'src/features/language/Lang';
 import classes from 'src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.module.css';
@@ -14,35 +13,24 @@ type LayoutSetAccordionSummaryProps = {
 
 export function LayoutSetSummaryAccordion({ filteredPages }: LayoutSetAccordionSummaryProps) {
   return filteredPages.map((layoutId: string) => (
-    <Details
+    <AccordionItem
       key={layoutId}
       defaultOpen={true}
-      color='neutral'
       className={classes.summaryItem}
+      title={<Lang id={layoutId} />}
     >
-      <Details>
-        <Details.Summary>
-          <Label asChild>
-            <span>
-              <Lang id={layoutId} />
-            </span>
-          </Label>
-        </Details.Summary>
-        <Details.Content>
-          <Flex
-            container
-            spacing={6}
-            alignItems='flex-start'
-          >
-            <EmptyChildrenBoundary>
-              <PageSummary
-                pageId={layoutId}
-                key={layoutId}
-              />
-            </EmptyChildrenBoundary>
-          </Flex>
-        </Details.Content>
-      </Details>
-    </Details>
+      <Flex
+        container
+        spacing={6}
+        alignItems='flex-start'
+      >
+        <EmptyChildrenBoundary>
+          <PageSummary
+            pageId={layoutId}
+            key={layoutId}
+          />
+        </EmptyChildrenBoundary>
+      </Flex>
+    </AccordionItem>
   ));
 }