feat(ui-breadcrumb,ui-link): add onMouseEnter prop

Closes: INSTUI-3930
instructure · Nov 8, 2023 · 67b3b87 · 67b3b87
1 parent da016c8
commit 67b3b87
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 5 deletions.
diff --git a/packages/ui-breadcrumb/src/Breadcrumb/BreadcrumbLink/__new-tests__/BreadcrumbLink.test.tsx b/packages/ui-breadcrumb/src/Breadcrumb/BreadcrumbLink/__new-tests__/BreadcrumbLink.test.tsx
@@ -63,6 +63,20 @@ describe('<BreadcrumbLink />', () => {
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
+  it('should respond to mouseEnter event when provided with onMouseEnter prop', () => {
+    const onMouseEnter = jest.fn()
+
+    render(
+      <BreadcrumbLink onMouseEnter={onMouseEnter} href={TEST_LINK}>
+        {TEST_TEXT_01}
+      </BreadcrumbLink>
+    )
+    const link = screen.getByRole('link')
+    fireEvent.mouseEnter(link)
+
+    expect(onMouseEnter).toHaveBeenCalledTimes(1)
+  })
+
   it('should allow to prop to pass through', () => {
     const { container } = render(
       <BreadcrumbLink to={TEST_TO}>{TEST_TEXT_01}</BreadcrumbLink>

diff --git a/packages/ui-breadcrumb/src/Breadcrumb/BreadcrumbLink/index.tsx b/packages/ui-breadcrumb/src/Breadcrumb/BreadcrumbLink/index.tsx
@@ -54,7 +54,8 @@ class BreadcrumbLink extends Component<BreadcrumbLinkProps> {
   }
 
   render() {
-    const { children, href, renderIcon, iconPlacement, onClick } = this.props
+    const { children, href, renderIcon, iconPlacement, onClick, onMouseEnter } =
+      this.props
 
     const props = omitProps(this.props, BreadcrumbLink.allowedProps)
 
@@ -65,6 +66,7 @@ class BreadcrumbLink extends Component<BreadcrumbLinkProps> {
         renderIcon={renderIcon}
         iconPlacement={iconPlacement}
         onClick={onClick}
+        onMouseEnter={onMouseEnter}
         isWithinText={false}
         elementRef={this.handleRef}
       >

diff --git a/packages/ui-breadcrumb/src/Breadcrumb/BreadcrumbLink/props.ts b/packages/ui-breadcrumb/src/Breadcrumb/BreadcrumbLink/props.ts
@@ -47,6 +47,10 @@ type BreadcrumbLinkOwnProps = {
    * If the Breadcrumb.Link has an onClick prop (and no href), it will render as a button
    */
   onClick?: (event: React.MouseEvent<ViewOwnProps, MouseEvent>) => void
+  /**
+   * Fires when the Link is hovered
+   */
+  onMouseEnter?: (event: React.MouseEvent<ViewOwnProps, MouseEvent>) => void
   /**
    * Sets the font-size of the breadcrumb text
    */
@@ -82,6 +86,7 @@ const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node.isRequired,
   href: PropTypes.string,
   onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   iconPlacement: PropTypes.oneOf(['start', 'end'])
@@ -92,6 +97,7 @@ const allowedProps: AllowedPropKeys = [
   'href',
   'iconPlacement',
   'onClick',
+  'onMouseEnter',
   'renderIcon',
   'size'
 ]

diff --git a/packages/ui-link/src/Link/__tests__/Link.test.tsx b/packages/ui-link/src/Link/__tests__/Link.test.tsx
@@ -116,6 +116,19 @@ describe('<Link />', async () => {
     })
   })
 
+  it('should call the onMouseEnter prop when mouseEntered', async () => {
+    const onMouseEnter = stub()
+    await mount(<Link onMouseEnter={onMouseEnter}>Hello World</Link>)
+
+    const link = await LinkLocator.find()
+
+    await link.mouseEnter()
+
+    await wait(() => {
+      expect(onMouseEnter).to.have.been.called()
+    })
+  })
+
   it('should pass down an icon via the icon property', async () => {
     const customIcon = (
       <svg height="100" width="100">

diff --git a/packages/ui-link/src/Link/index.tsx b/packages/ui-link/src/Link/index.tsx
@@ -213,6 +213,7 @@ class Link extends Component<LinkProps, LinkState> {
     const {
       children,
       onClick,
+      onMouseEnter,
       color,
       href,
       margin,
@@ -241,6 +242,7 @@ class Link extends Component<LinkProps, LinkState> {
         display={this.display}
         margin={margin}
         href={href}
+        onMouseEnter={onMouseEnter}
         onClick={this.handleClick}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}

diff --git a/packages/ui-link/src/Link/props.ts b/packages/ui-link/src/Link/props.ts
@@ -112,6 +112,11 @@ type LinkOwnProps = {
    */
   isWithinText?: boolean
 
+  /**
+   * Fires when the Link loses focus
+   */
+  onBlur?: (event: React.FocusEvent<ViewOwnProps>) => void
+
   /**
    * Fires when the Link is clicked
    */
@@ -123,9 +128,9 @@ type LinkOwnProps = {
   onFocus?: (event: React.FocusEvent<ViewOwnProps>) => void
 
   /**
-   * Fires when the Link loses focus
+   * Fires when the Link is hovered
    */
-  onBlur?: (event: React.FocusEvent<ViewOwnProps>) => void
+  onMouseEnter?: (event: React.MouseEvent<ViewOwnProps>) => void
 }
 
 export type LinkStyleProps = {
@@ -168,9 +173,10 @@ const propTypes: PropValidators<PropKeys> = {
     'inline-flex'
   ]),
   isWithinText: PropTypes.bool,
+  onBlur: PropTypes.func,
   onClick: PropTypes.func,
   onFocus: PropTypes.func,
-  onBlur: PropTypes.func
+  onMouseEnter: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -187,9 +193,10 @@ const allowedProps: AllowedPropKeys = [
   'iconPlacement',
   'display',
   'isWithinText',
+  'onBlur',
   'onClick',
   'onFocus',
-  'onBlur'
+  'onMouseEnter'
 ]
 
 export type { LinkProps, LinkState, LinkStyle }