From 00422d1ab8dd2275c6d075379c8c22eb31e55ced Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Sat, 26 Jun 2021 13:31:49 -0700
Subject: [PATCH] feat(ui-shell): add isSelected prop to HeaderNavItem

---
 COMPONENT_INDEX.md                            | 11 ++++++-----
 docs/src/COMPONENT_API.json                   |  8 ++++++++
 src/UIShell/GlobalHeader/HeaderNavItem.svelte |  4 ++++
 types/UIShell/GlobalHeader/HeaderNavItem.d.ts |  5 +++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index b0b7e881..fd9ab6e5 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1653,11 +1653,12 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                                       | Default value     | Description                                   |
-| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- |
-| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
-| href      | <code>let</code> | No       | <code>string</code>                        | --                | Specify the `href` attribute                  |
-| text      | <code>let</code> | No       | <code>string</code>                        | --                | Specify the text                              |
+| Prop name  | Kind             | Reactive | Type                                       | Default value     | Description                                   |
+| :--------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- |
+| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
+| href       | <code>let</code> | No       | <code>string</code>                        | --                | Specify the `href` attribute                  |
+| text       | <code>let</code> | No       | <code>string</code>                        | --                | Specify the text                              |
+| isSelected | <code>let</code> | No       | --                                         | --                | Set to `true` to select the item              |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 9bb03b8f..54b94f5e 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -4078,6 +4078,14 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "isSelected",
+          "kind": "let",
+          "description": "Set to `true` to select the item",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "ref",
           "kind": "let",
diff --git a/src/UIShell/GlobalHeader/HeaderNavItem.svelte b/src/UIShell/GlobalHeader/HeaderNavItem.svelte
index 3d8c752e..053a31a5 100644
--- a/src/UIShell/GlobalHeader/HeaderNavItem.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNavItem.svelte
@@ -11,6 +11,9 @@
    */
   export let text = undefined;
 
+  /** Set to `true` to select the item */
+  export let isSelected = undefined;
+
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 </script>
@@ -23,6 +26,7 @@
     href="{href}"
     rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
     class:bx--header__menu-item="{true}"
+    aria-current="{isSelected ? 'page' : undefined}"
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts
index 6309cc47..de003e7f 100644
--- a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts
@@ -13,6 +13,11 @@ export interface HeaderNavItemProps
    */
   text?: string;
 
+  /**
+   * Set to `true` to select the item
+   */
+  isSelected?: undefined;
+
   /**
    * Obtain a reference to the HTML anchor element
    * @default null