diff --git a/packages/core/src/components/button/button.spec.ts b/packages/core/src/components/button/button.spec.ts
index a21fe43dc..10f4343fc 100644
--- a/packages/core/src/components/button/button.spec.ts
+++ b/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()
+ })
})
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
index 64ad517eb..f02737b2c 100644
--- a/packages/core/src/components/button/button.tsx
+++ b/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()
diff --git a/packages/core/src/components/button/stories/button.core.stories.tsx b/packages/core/src/components/button/stories/button.core.stories.tsx
index e65a10073..b1e060f17 100644
--- a/packages/core/src/components/button/stories/button.core.stories.tsx
+++ b/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`
+
+ ${args.label}
+
+ `,
+ 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'],
+ },
+ },
+}
diff --git a/packages/core/src/components/button/stories/button.react.stories.tsx b/packages/core/src/components/button/stories/button.react.stories.tsx
index 63e1b6212..02351ce83 100644
--- a/packages/core/src/components/button/stories/button.react.stories.tsx
+++ b/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) => (
+
+ {args.label}
+
+ ),
+ 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'],
+ },
+ },
+}