diff --git a/packages/terra-application-links/CHANGELOG.md b/packages/terra-application-links/CHANGELOG.md index 312d0a97f9b..51fd8fa727d 100644 --- a/packages/terra-application-links/CHANGELOG.md +++ b/packages/terra-application-links/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added `onTabClick` property to ApplicationLinks interface. + ## 6.80.0 - (April 4, 2024) * Changed diff --git a/packages/terra-application-links/src/ApplicationLinks.js b/packages/terra-application-links/src/ApplicationLinks.js index 32f01c9dd47..3f18c9eba4b 100644 --- a/packages/terra-application-links/src/ApplicationLinks.js +++ b/packages/terra-application-links/src/ApplicationLinks.js @@ -27,6 +27,10 @@ const ApplicationLinksPropType = PropTypes.shape({ */ icon: PropTypes.node, })), + /** + * The click callback of the tab. + */ + onTabClick: PropTypes.func, }); const ApplicationLinks = { diff --git a/packages/terra-application-links/src/tabs/ApplicationTabs.jsx b/packages/terra-application-links/src/tabs/ApplicationTabs.jsx index 35648fcf258..a83c8dd6ab1 100644 --- a/packages/terra-application-links/src/tabs/ApplicationTabs.jsx +++ b/packages/terra-application-links/src/tabs/ApplicationTabs.jsx @@ -35,6 +35,10 @@ const propTypes = { icon: PropTypes.icon, })), + /** + * The click callback of the tab. + */ + onTabClick: PropTypes.func, /** * The location as provided by the `withRouter()` HOC. */ @@ -150,6 +154,7 @@ class ApplicationTabs extends React.Component { history, staticContext, hasIcons, + onTabClick, ...customProps } = this.props; @@ -165,6 +170,7 @@ class ApplicationTabs extends React.Component { externalLink: link.externalLink, icon: link.icon, location, + onTabClick, history, }; diff --git a/packages/terra-application-links/src/tabs/_Tab.jsx b/packages/terra-application-links/src/tabs/_Tab.jsx index 5a5f01b505c..5c8920c8670 100644 --- a/packages/terra-application-links/src/tabs/_Tab.jsx +++ b/packages/terra-application-links/src/tabs/_Tab.jsx @@ -98,7 +98,9 @@ class ApplicationTab extends Component { if (!this.isCurrentPath()) { this.props.history.push(this.props.path); - } else if (this.props.onTabClick) { + } + + if (this.props.onTabClick) { this.props.onTabClick(event); } } diff --git a/packages/terra-application-links/tests/jest/ApplicationTabs.test.jsx b/packages/terra-application-links/tests/jest/ApplicationTabs.test.jsx index f19cb6dedb6..6cc48d2d692 100644 --- a/packages/terra-application-links/tests/jest/ApplicationTabs.test.jsx +++ b/packages/terra-application-links/tests/jest/ApplicationTabs.test.jsx @@ -1,6 +1,7 @@ import React from 'react'; import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider'; +import { BrowserRouter } from 'react-router-dom'; import ApplicationTabs from '../../src/tabs/ApplicationTabs'; import testLinkConfig from './testLinkConfig'; import testLinksWithIconsConfig from './testLinksWithIconsConfig'; @@ -11,6 +12,19 @@ it('should render ApplicationTabs with links and alignment', () => { expect(wrapper).toMatchSnapshot(); }); +it('should trigger onTabClick handler', () => { + const onTabClickHandler = jest.fn(); + const wrapper = enzymeIntl.mountWithIntl( + + + , + ); + + wrapper.find('.tab').first().simulate('click'); + + expect(onTabClickHandler).toHaveBeenCalled(); +}); + it('should render ApplicationTabs with icons', () => { const subject = (