fix(button): use default behavior when is link (#399)

Author: igorwessel

packages/core/src/components/button/button.spec.ts

@@ -1,4 +1,5 @@
 import { newSpecPage } from '@stencil/core/testing'
+
 import { AtomButton } from './button'
 
 describe('AtomButton', () => {
@@ -140,8 +141,10 @@ describe('AtomButton', () => {
 
     await page.waitForChanges()
     const formEl = page.body.querySelector('form') as HTMLFormElement
+
     formEl.requestSubmit = jest.fn
     const buttonEl = page.root?.shadowRoot?.querySelector('ion-button')
+
     jest.spyOn(formEl, 'requestSubmit')
 
     buttonEl?.click()
@@ -157,8 +160,10 @@ describe('AtomButton', () => {
 
     await page.waitForChanges()
     const formEl = page.body.querySelector('form') as HTMLFormElement
+
     formEl.reset = jest.fn()
     const buttonEl = page.root?.shadowRoot?.querySelector('ion-button')
+
     jest.spyOn(formEl, 'reset')
     buttonEl?.click()
 
@@ -173,11 +178,35 @@ describe('AtomButton', () => {
 
     await page.waitForChanges()
     const formEl = page.body.querySelector('form') as HTMLFormElement
+
     formEl.reset = jest.fn()
     const buttonEl = page.root?.shadowRoot?.querySelector('ion-button')
+
     jest.spyOn(formEl, 'reset')
     buttonEl?.click()
 
     expect(formEl.reset).not.toHaveBeenCalled()
   })
+
+  it('should allow default event when is link', async () => {
+    const button = new AtomButton()
+
+    button.href = 'http://example.com'
+    button.download = 'name_file'
+    button.target = '_blank'
+
+    const event = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    })
+
+    jest.spyOn(event, 'preventDefault')
+    jest.spyOn(event, 'stopPropagation')
+
+    //@ts-expect-error - Testing private method
+    button.handleClick(event)
+
+    expect(event.preventDefault).not.toHaveBeenCalled()
+    expect(event.stopPropagation).not.toHaveBeenCalled()
+  })
 })

packages/core/src/components/button/button.tsx

@@ -38,7 +38,13 @@ export class AtomButton {
     submit: 'requestSubmit',
   }
 
+  private get isLink() {
+    return this.href || this.download || this.target
+  }
+
   private handleClick = (event) => {
+    if (this.isLink) return
+
     event.preventDefault()
     event.stopPropagation()
 

packages/core/src/components/button/stories/button.core.stories.tsx

@@ -115,3 +115,45 @@ export const IconAndText: StoryObj = {
     ...Primary.args,
   },
 }
+
+export const Link: StoryObj = {
+  render: (args) => html`
+    <atom-button
+      color="${args.color}"
+      fill="${args.fill}"
+      expand="${args.expand}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}"
+      mode="${args.mode}"
+      shape="${args.shape}"
+      download="${args.download}"
+      href="${args.href}"
+      target="${args.target}"
+    >
+      ${args.label}
+    </atom-button>
+  `,
+  args: {
+    ...Primary.args,
+    href: undefined,
+    download: undefined,
+    target: undefined,
+  },
+  argTypes: {
+    href: {
+      options: ['Download', 'Navigate'],
+      mapping: {
+        Download: '/custom/jsm.svg',
+        Navigate: 'https://www.juntossomosmais.com.br',
+      },
+    },
+    download: {
+      control: 'text',
+    },
+    target: {
+      options: ['_blank', '_self', '_parent', '_top'],
+    },
+  },
+}

packages/core/src/components/button/stories/button.react.stories.tsx

@@ -114,3 +114,45 @@ export const IconAndText: StoryObj = {
     ...Primary.args,
   },
 }
+
+export const Link: StoryObj = {
+  render: (args: any) => (
+    <AtomButton
+      color={args.color}
+      fill={args.fill}
+      size={args.size}
+      disabled={args.disabled}
+      loading={args.loading}
+      type={args.type}
+      mode={args.mode}
+      expand={args.expand}
+      shape={args.shape}
+      download={args.download}
+      href={args.href}
+      target={args.target}
+    >
+      {args.label}
+    </AtomButton>
+  ),
+  args: {
+    ...Primary.args,
+    href: undefined,
+    download: undefined,
+    target: undefined,
+  },
+  argTypes: {
+    href: {
+      options: ['Download', 'Navigate'],
+      mapping: {
+        Download: '/custom/jsm.svg',
+        Navigate: 'https://www.juntossomosmais.com.br',
+      },
+    },
+    download: {
+      control: 'text',
+    },
+    target: {
+      options: ['_blank', '_self', '_parent', '_top'],
+    },
+  },
+}