From 97101c6b830c924ad7ce1887657851757f9511b7 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Wed, 25 Oct 2023 15:13:55 +0200
Subject: [PATCH] feat(ui-top-nav-bar): add as property to TopNavBarItem

Closes: INSTUI-3910
---
 .../__tests__/TopNavBarItem.test.tsx             | 16 ++++++++++++++++
 .../src/TopNavBar/TopNavBarItem/index.tsx        |  2 ++
 .../src/TopNavBar/TopNavBarItem/props.ts         | 10 +++++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/__tests__/TopNavBarItem.test.tsx b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/__tests__/TopNavBarItem.test.tsx
index 7b567d154a..aeeef92be9 100644
--- a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/__tests__/TopNavBarItem.test.tsx
+++ b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/__tests__/TopNavBarItem.test.tsx
@@ -1436,6 +1436,22 @@ describe('<TopNavBarItem />', async () => {
     })
   })
 
+  describe('as prop', async () => {
+    it('should render item as a', async () => {
+      await mount(
+        <TopNavBarItem id="item" as='a'>
+          Menu Item
+        </TopNavBarItem>
+      )
+      const component = await TopNavBarItemLocator.find()
+      const button = await component.findButton()
+
+      expect(button).to.have.tagName('a')
+      expect(button).to.not.have.attribute('href')
+    })
+  })
+
+
   describe('href prop', async () => {
     it('should render item as link', async () => {
       await mount(
diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/index.tsx
index c17a784f96..e7ae2502a2 100644
--- a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/index.tsx
+++ b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/index.tsx
@@ -344,6 +344,7 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
   get itemProps(): BaseButtonProps | null {
     const {
       id,
+      as,
       variant,
       href: hrefOriginal,
       onClick: onClickOriginal,
@@ -418,6 +419,7 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
 
     return {
       id,
+      as,
       ...this.colorProps,
       ...this.ariaProps,
       size: this.size,
diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/props.ts b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/props.ts
index ecd6db103d..d20ef0d057 100644
--- a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/props.ts
+++ b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/props.ts
@@ -33,7 +33,8 @@ import type {
   TopNavBarItemTheme,
   OtherHTMLAttributes,
   PropValidators,
-  Renderable
+  Renderable,
+  AsElementType
 } from '@instructure/shared-types'
 
 import { Drilldown } from '@instructure/ui-drilldown'
@@ -75,6 +76,11 @@ const topNavBarItemTooltipPropType = PropTypes.oneOfType([
 ])
 
 type TopNavBarItemOwnProps = {
+  /**
+   * the element type to render as (will default to `<a>` if href is provided)
+   */
+  as?: AsElementType
+
   /**
    * Required id, used for internal tracking,
    * and it also appears as an id on the item element.
@@ -268,6 +274,7 @@ type TopNavBarItemStyleProps = {
 
 const propTypes: PropValidators<PropKeys> = {
   id: PropTypes.string.isRequired,
+  as: PropTypes.elementType,
   children: PropTypes.node.isRequired,
   variant: PropTypes.oneOf(['default', 'button', 'icon', 'avatar']),
   status: PropTypes.oneOf(['default', 'active', 'disabled']),
@@ -296,6 +303,7 @@ const propTypes: PropValidators<PropKeys> = {
 
 const allowedProps: AllowedPropKeys = [
   'id',
+  'as',
   'children',
   'variant',
   'status',