fix(GovAlta#2162): accordion - add rotate for right arrow position & …

…dispatch onChange event
vanessatran-ddi · Nov 5, 2024 · 1e5e559 · 1e5e559
1 parent cefabdb
commit 1e5e559
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/libs/react-components/src/lib/accordion/accordion.tsx b/libs/react-components/src/lib/accordion/accordion.tsx
@@ -1,10 +1,11 @@
-import { ReactNode } from "react";
+import React, { ReactNode, useEffect, useRef } from "react";
 import { Margins } from "../../common/styling";
 
 export type GoAHeadingSize = "small" | "medium";
 export type GoAIconPosition = "left" | "right";
 
 interface WCProps extends Margins {
+  ref: React.RefObject<HTMLElement>;
   open?: boolean;
   headingSize?: GoAHeadingSize;
   heading: string;
@@ -33,6 +34,7 @@ export interface GoAAccordionProps extends Margins {
   maxWidth?: string;
   testid?: string;
   iconPosition?: GoAIconPosition;
+  onChange?: (open: boolean) => void;
   children: ReactNode;
 }
 
@@ -45,14 +47,32 @@ export function GoAAccordion({
   iconPosition,
   maxWidth,
   testid,
+  onChange,
   children,
   mt,
   mr,
   mb,
   ml,
 }: GoAAccordionProps): JSX.Element {
+  const ref = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (element && onChange) {
+      const handler = (event: Event) => {
+        const customEvent = event as CustomEvent;
+        onChange(customEvent.detail.open);
+      };
+      element.addEventListener("_change", handler);
+      return () => {
+        element.removeEventListener("_change", handler);
+      };
+    }
+  }, [onChange]);
+
   return (
     <goa-accordion
+      ref={ref}
       open={open}
       headingSize={headingSize}
       heading={heading}

diff --git a/libs/web-components/src/components/accordion/Accordion.svelte b/libs/web-components/src/components/accordion/Accordion.svelte
@@ -39,6 +39,7 @@
   let _titleEl: HTMLElement;
   let _headingContentSlotChildren: Element[] = [];
   let _accordionId: string = "";
+  let _rootEl: HTMLElement;
   // Reactive
 
   $: isOpen = toBoolean(open);
@@ -64,18 +65,32 @@
     }
     return [];
   }
+
+  function dispatchClickEvent(open?: boolean) {
+    if (!_rootEl) return;
+
+    _rootEl.dispatchEvent(
+      new CustomEvent("_change", {
+        composed: true,
+        bubbles: true,
+        detail: { open: open },
+      }),
+    );
+  }
 </script>
 
 <!-- HTML -->
 <div
   style={`
     ${calculateMargin(mt, mr, mb, ml)};
     max-width: ${maxwidth};
+    --icon-rotate: ${iconposition === "right" ? "180deg" : "90deg"}
   `}
   class="goa-accordion"
+  bind:this={_rootEl}
   data-testid={testid}
 >
-  <details open={isOpen} on:toggle={({ target }) => (open = `${target?.open}`)}>
+<details open={isOpen} on:toggle={({ target }) => { open = `${target?.open}`; dispatchClickEvent(target?.open); }}>
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <summary
       class={`container-${headingsize}`}
@@ -115,7 +130,7 @@
 
       {#if iconposition === "right"}
         <goa-icon
-          type="chevron-forward"
+          type="chevron-down"
           fillcolor={_hovering
       ? "var(--goa-color-interactive-hover)"
       : "var(--goa-color-interactive-default)"}
@@ -256,7 +271,7 @@
   }
 
   details[open] goa-icon {
-    transform: rotate(90deg);
+    transform: rotate(var(--icon-rotate));
   }
 
   details[open] summary {