BILL-3514/subnav update

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## v2.0.0-beta.52
+
+Add an option to pass stringToMatch prop to `SubnavigationItem`, this can be used to pass a string that is turned into a regex pattern
 ## v2.0.0-beta.51
 
 Updates the prop definitions for `TopNavDropdown` so that `title` is no longer a required prop.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.51",
+  "version": "2.0.0-beta.52",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"

src/components/Subnavigation/SubnavigationItem.vue

@@ -5,12 +5,20 @@
       :underline="false"
       :disabled="disabled"
       :tabindex="disabled ? -1 : 0"
-      :class="['inline-block px-1 py-3 !text-gray-500 type-small-600 whitespace-nowrap focus-visible:!outline-none',
-               'focus-visible:before:content[``] focus-visible:before:z-10 focus-visible:before:absolute focus-visible:before:inset-0 focus-visible:before:bottom-[-3px] ',
-               'hover:before:content[``] hover:before:z-10 hover:before:absolute hover:before:inset-0 hover:before:bottom-[-3px] hover:before:border-b-2',
-               { 'hover:!text-gray-600 focus-visible:!text-gray-600 focus-visible:before:border-b-2 hover:before:border-gray-300 focus-visible:before:border-gray-300': !active && !disabled },
-               { '!text-black before:content[``] before:z-10 before:absolute before:inset-0 before:bottom-[-3px] before:border-b-2 before:border-black': active },
-               { '!text-gray-300': disabled }]"
+      :class="[
+        'inline-block px-1 py-3 !text-gray-500 type-small-600 whitespace-nowrap focus-visible:!outline-none',
+        'focus-visible:before:content[``] focus-visible:before:z-10 focus-visible:before:absolute focus-visible:before:inset-0 focus-visible:before:bottom-[-3px] ',
+        'hover:before:content[``] hover:before:z-10 hover:before:absolute hover:before:inset-0 hover:before:bottom-[-3px] hover:before:border-b-2',
+        {
+          'hover:!text-gray-600 focus-visible:!text-gray-600 focus-visible:before:border-b-2 hover:before:border-gray-300 focus-visible:before:border-gray-300':
+            !active && !disabled
+        },
+        {
+          '!text-black before:content[``] before:z-10 before:absolute before:inset-0 before:bottom-[-3px] before:border-b-2 before:border-black':
+            active
+        },
+        { '!text-gray-300': disabled }
+      ]"
     >
       {{ title }}
       <div class="flex items-center">
@@ -25,7 +33,9 @@ import LobLink from '../Link/Link';
 
 export default {
   name: 'SubnavigationItem',
-  components: { LobLink },
+  components: {
+    LobLink
+  },
   props: {
     title: {
       type: String,
@@ -42,11 +52,23 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    stringToMatch: {
+      type: String,
+      default: ''
     }
   },
   computed: {
     active () {
-      return this.matchQueryString ? this.$route.fullPath === this.to : this.$route?.fullPath?.includes(this.to);
+      if (this.stringToMatch) {
+        const pattern = new RegExp(`${this.stringToMatch}`, 'gi');
+        if (pattern.test(this.$route.fullPath)) {
+          return true;
+        }
+      }
+      return this.matchQueryString ?
+        this.$route.fullPath === this.to :
+        this.$route?.fullPath?.includes(this.to);
     }
   }
 };