feat(DesignSystem): add type attribute to Button component

Author: MellyGray

packages/design-system/src/lib/components/button/Button.tsx

@@ -5,13 +5,15 @@ import { IconName } from '../icon/IconName'
 import { Icon } from '../icon/Icon'
 
 type ButtonVariant = 'primary' | 'secondary' | 'link'
+type ButtonType = 'button' | 'reset' | 'submit'
 
 interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant
   disabled?: boolean
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void
   icon?: IconName | ReactNode
   withSpacing?: boolean
+  type?: ButtonType
   children?: ReactNode
 }
 
@@ -21,6 +23,7 @@ export function Button({
   onClick,
   icon,
   withSpacing,
+  type,
   children,
   ...props
 }: ButtonProps) {
@@ -31,6 +34,7 @@ export function Button({
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
       aria-disabled={disabled}
+      type={type}
       {...props}>
       {typeof icon === 'string' ? <Icon name={icon} /> : icon}
       {children}

packages/design-system/tests/component/button/Button.spec.tsx

@@ -54,4 +54,9 @@ describe('Button', () => {
     cy.mount(<Button icon={IconName.COLLECTION} />)
     cy.findByRole('img', { name: IconName.COLLECTION }).should('exist')
   })
+
+  it('renders a button with submit type', () => {
+    cy.mount(<Button type="submit">{clickMeText}</Button>)
+    cy.findByText(clickMeText).should('have.attr', 'type').and('eq', 'submit')
+  })
 })