feat(DesignSystem): add HTMLAttributes to ButtonGroup

Author: MellyGray

packages/design-system/src/lib/components/button-group/ButtonGroup.tsx

@@ -1,14 +1,15 @@
 import { PropsWithChildren } from 'react'
 import { ButtonGroup as ButtonGroupBS } from 'react-bootstrap'
 import styles from './ButtonGroup.module.scss'
+import * as React from 'react'
 
-interface ButtonGroupProps {
+interface ButtonGroupProps extends React.HTMLAttributes<HTMLElement> {
   vertical?: boolean
 }
 
-export function ButtonGroup({ vertical, children }: PropsWithChildren<ButtonGroupProps>) {
+export function ButtonGroup({ vertical, children, ...props }: PropsWithChildren<ButtonGroupProps>) {
   return (
-    <ButtonGroupBS vertical={vertical} className={styles.border}>
+    <ButtonGroupBS vertical={vertical} className={styles.border} {...props}>
       {children}
     </ButtonGroupBS>
   )

packages/design-system/tests/component/button-group/ButtonGroup.spec.tsx

@@ -25,4 +25,10 @@ describe('ButtonGroup', () => {
 
     cy.findByRole('group').should('not.have.class', 'btn-group-vertical')
   })
+
+  it('renders html attributes', () => {
+    cy.mount(<ButtonGroup data-testid="button-group" aria-label="button group" />)
+
+    cy.findByRole('group').should('have.attr', 'aria-label', 'button group')
+  })
 })