chore(vertical-nav): update routing story to include all top level it…

…ems (#1019)

Updates the routing vertical-nav story to include all top-level item
types (links without a group, links with a group, buttons with a group).

---------

Co-authored-by: GitHub <[email protected]>

.storybook/stories/vertical-nav/vertical-nav-routing.stories.ts

@@ -19,6 +19,8 @@ const navLinks: { iconShapeTuple: IconShapeTuple; text: string; children }[] = [
   { iconShapeTuple: bellIcon, text: 'Notifications', children: childLinks },
   { iconShapeTuple: homeIcon, text: 'Dashboard', children: childLinks },
   { iconShapeTuple: searchIcon, text: 'Search', children: childLinks },
+];
+const navButtonLinks: { iconShapeTuple: IconShapeTuple; text: string; children }[] = [
   { iconShapeTuple: calendarIcon, text: 'Calendar', children: childLinks },
   { iconShapeTuple: folderIcon, text: 'Files', children: childLinks },
   { iconShapeTuple: userIcon, text: 'Profile', children: childLinks },
@@ -33,14 +35,25 @@ const defaultStory: Story = args => ({
           [clrVerticalNavCollapsed]="clrVerticalNavCollapsed"
           (clrVerticalNavCollapsedChange)="clrVerticalNavCollapsedChange($event)"
         >
-          <clr-vertical-nav-group 
-            *ngFor="let navLink of navLinks" 
+          <!-- Example of a top-level link without a group -->
+          <a
+            (click)="handleClick($event, 'settings')"
+            [ngClass]="{ 'active': 'Settings'.toLowerCase() == activeRoute }"
+            clrVerticalNavLink
+            href="javascript:void(0)"
+          >
+            <cds-icon *ngIf="includeIcons" [attr.shape]="navButtonLinks[2].iconShapeTuple[0]" clrVerticalNavIcon></cds-icon>
+            Settings
+          </a>
+          <!-- Example of a top-level link with a group -->
+          <clr-vertical-nav-group
+            *ngFor="let navLink of navLinks"
             [ngClass]="{ 'active': navLink.text.toLowerCase() == activeRoute }"
             [clrVerticalNavGroupExpanded]="clrVerticalNavGroupExpanded"
             (clrVerticalNavGroupExpandedChange)="clrVerticalNavGroupExpandedChange($event)"
           >
             <a
-                (click)="handleClick($event, navLink.text.toLowerCase())"
+              (click)="handleClick($event, navLink.text.toLowerCase())"
               [ngClass]="{ 'active': navLink.text.toLowerCase() == activeRoute }"
               clrVerticalNavLink
               href="javascript:void(0)"
@@ -50,14 +63,34 @@ const defaultStory: Story = args => ({
             </a>
             <clr-vertical-nav-group-children>
               <a clrVerticalNavLink
-                *ngFor="let childNavLink of navLink.children; let index = index"
-                [ngClass]="{ 'active': createRoute(navLink.text, index) == activeRoute }"
-                (click)="handleClick($event, createRoute(navLink.text, index))"
+                 *ngFor="let childNavLink of navLink.children; let index = index"
+                 [ngClass]="{ 'active': createRoute(navLink.text, index) == activeRoute }"
+                 (click)="handleClick($event, createRoute(navLink.text, index))"
+                 href="javascript:void(0)"
               >
                 {{createRoute(navLink.text, index)}}
               </a>
             </clr-vertical-nav-group-children>
           </clr-vertical-nav-group>
+          <!-- Example of a top-level text with a group -->
+          <clr-vertical-nav-group
+            *ngFor="let navButtonLink of navButtonLinks"
+            [ngClass]="{ 'active': navButtonLink.text.toLowerCase() == activeRoute }"
+            [clrVerticalNavGroupExpanded]="clrVerticalNavGroupExpanded"
+            (clrVerticalNavGroupExpandedChange)="clrVerticalNavGroupExpandedChange($event)"
+          >
+            <cds-icon *ngIf="includeIcons" [attr.shape]="navButtonLink.iconShapeTuple[0]" clrVerticalNavIcon></cds-icon>
+            {{navButtonLink.text}}
+            <clr-vertical-nav-group-children>
+              <a clrVerticalNavLink
+                 *ngFor="let childNavLink of navButtonLink.children; let index = index"
+                 [ngClass]="{ 'active': createRoute(navButtonLink.text, index) == activeRoute }"
+                 (click)="handleClick($event, createRoute(navButtonLink.text, index))"
+              >
+                {{createRoute(navButtonLink.text, index)}}
+              </a>
+            </clr-vertical-nav-group-children>
+          </clr-vertical-nav-group>
         </clr-vertical-nav>
       </div>
     </div>
@@ -80,21 +113,23 @@ const defaultParameters: Parameters = {
     toggleByButton: { control: { disable: true }, table: { disable: true } },
     // story helpers
     navLinks: { control: { disable: true }, table: { disable: true } },
+    navButtonLinks: { control: { disable: true }, table: { disable: true } },
     createRoute: { control: { disable: true }, table: { disable: true } },
     handleClick: { control: { disable: true }, table: { disable: true } },
   },
   args: {
     // outputs
     clrVerticalNavCollapsedChange: action('clrVerticalNavCollapsedChange'),
+    clrVerticalNavGroupExpandedChange: action('clrVerticalNavGroupExpandedChange'),
     // story helpers
     navLinks,
+    navButtonLinks,
     activeRoute: 'notifications',
     includeIcons: true,
     createRoute: function (text, i) {
       return `${text.toLowerCase()}/${i}`;
     },
     handleClick: function (event, route) {
-      event.stopPropagation();
       this.activeRoute = route;
     },
   },