From a1a8b9dfb28911dc7c7382d646e0e7a66cb58035 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Tue, 8 Aug 2023 11:00:21 -0600
Subject: [PATCH 1/2] feat: [Expandable] Propagate attributes

---
 src/components/Expandable/Expandable.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Expandable/Expandable.tsx b/src/components/Expandable/Expandable.tsx
index c1372ff9..7331a0c4 100644
--- a/src/components/Expandable/Expandable.tsx
+++ b/src/components/Expandable/Expandable.tsx
@@ -5,7 +5,8 @@ import type { ReactNode } from 'react';
 import { useEffect } from 'react';
 import { Icon } from '../Icon/Icon';
 
-export interface ExpandableProperties {
+export interface ExpandableProperties
+  extends React.HTMLAttributes<HTMLDivElement> {
   header: string;
   children: ReactNode;
   inAccordion?: boolean;
@@ -16,7 +17,9 @@ export const Expandable: React.FC<ExpandableProperties> = ({
   header,
   children,
   inAccordion = false,
-  openOnLoad = false
+  openOnLoad = false,
+  className = '',
+  ...properties
 }) => {
   useEffect(() => {
     if (inAccordion) return; // Initialization happens in parent component
@@ -29,13 +32,18 @@ export const Expandable: React.FC<ExpandableProperties> = ({
     'o-expandable',
     'o-expandable__padded',
     'o-expandable__background',
-    'o-expandable__border'
+    'o-expandable__border',
+    className
   ];
 
   if (openOnLoad) expandableClasses.push('o-expandable__onload-open');
 
   return (
-    <div className={classnames(expandableClasses)} data-testid='expandable'>
+    <div
+      className={classnames(expandableClasses)}
+      data-testid='expandable'
+      {...properties}
+    >
       <button
         type='button'
         className='o-expandable_header o-expandable_target'

From 065767659921911f246aa8a204b9cf42ea1f241d Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Tue, 8 Aug 2023 11:00:28 -0600
Subject: [PATCH 2/2] feat: [ExpandableGroup] Propagate attributes

---
 src/components/Expandable/ExpandableGroup.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Expandable/ExpandableGroup.tsx b/src/components/Expandable/ExpandableGroup.tsx
index 3c2f22b7..f4121b92 100644
--- a/src/components/Expandable/ExpandableGroup.tsx
+++ b/src/components/Expandable/ExpandableGroup.tsx
@@ -1,9 +1,11 @@
 import { Expandable as CFPB_Expandable } from '@cfpb/cfpb-expandables/src/Expandable';
+import classnames from 'classnames';
 import type { ReactElement } from 'react';
 import React, { useEffect } from 'react';
 import type { ExpandableProperties } from './Expandable';
 
-export interface ExpandableGroupProperties {
+export interface ExpandableGroupProperties
+  extends React.HTMLAttributes<HTMLDivElement> {
   groupId: string;
   accordion?: boolean;
   children?: ReactElement<ExpandableProperties>[];
@@ -12,10 +14,12 @@ export interface ExpandableGroupProperties {
 export const ExpandableGroup: React.FC<ExpandableGroupProperties> = ({
   groupId,
   accordion = false,
-  children
+  children,
+  className = '',
+  ...properties
 }) => {
-  let cname = 'o-expandable-group';
-  if (accordion) cname += ' o-expandable-group__accordion';
+  const cname = ['o-expandable-group', className];
+  if (accordion) cname.push('o-expandable-group__accordion');
 
   useEffect(() => {
     if (!accordion) return;
@@ -34,7 +38,7 @@ export const ExpandableGroup: React.FC<ExpandableGroupProperties> = ({
     return child;
   });
   return (
-    <div id={groupId} className={cname}>
+    <div id={groupId} className={classnames(cname)} {...properties}>
       {childrenWithProperties}
     </div>
   );