feat(nav): link targets in main navigation (#1602)

* feat(nav-main): add link target * fix: update snapshots & readme
telekom · Feb 20, 2023 · bfda3aa · bfda3aa
1 parent 6b08adb
commit bfda3aa
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/packages/components/src/components/telekom/nav-main/__snapshots__/nav-main.spec.ts.snap b/packages/components/src/components/telekom/nav-main/__snapshots__/nav-main.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`NavMain should handle is active props 1`] = `
 <scale-nav-main active="true" mega-menu-visible="true" name="nameDummy">
   <!---->
   <li class="main-navigation__item mega-menu--visible selected">
-    <a aria-current="true" aria-haspopup="false" class="main-navigation__item-link" href="javascript:void(0);">
+    <a aria-current="true" aria-haspopup="false" class="main-navigation__item-link" href="javascript:void(0);" target="_self">
       <span class="main-navigation__item-link-text">
         nameDummy
       </span>
@@ -20,7 +20,7 @@ exports[`NavMain should match snapshot 1`] = `
 <scale-nav-main>
   <!---->
   <li class="main-navigation__item">
-    <a aria-current="false" aria-haspopup="false" class="main-navigation__item-link" href="javascript:void(0);">
+    <a aria-current="false" aria-haspopup="false" class="main-navigation__item-link" href="javascript:void(0);" target="_self">
       <span class="main-navigation__item-link-text"></span>
     </a>
   </li>

diff --git a/packages/components/src/components/telekom/nav-main/nav-main.tsx b/packages/components/src/components/telekom/nav-main/nav-main.tsx
@@ -33,6 +33,8 @@ export class NavMain {
   @Prop() href?: string = 'javascript:void(0);';
   /** (optional) name value */
   @Prop() name: string;
+  /** (optional) target value */
+  @Prop() target?: string = '_self';
 
   @Prop() clickLink: any;
   hasPopup: boolean;
@@ -70,6 +72,7 @@ export class NavMain {
           <a
             class="main-navigation__item-link"
             href={this.href}
+            target={this.target || '_self'}
             aria-current={this.active || this.isActive ? 'true' : 'false'}
             aria-haspopup={this.hasPopup ? 'true' : 'false'}
             onClick={this.clickLink}

diff --git a/packages/components/src/components/telekom/nav-main/readme.md b/packages/components/src/components/telekom/nav-main/readme.md
@@ -17,6 +17,7 @@
 | `megaMenuVisible`   | `mega-menu-visible`    | (optional) if this mega-menu is visible | `boolean` | `false`                 |
 | `name`              | `name`                 | (optional) name value                   | `string`  | `undefined`             |
 | `popup`             | `popup`                |                                         | `boolean` | `undefined`             |
+| `target`            | `target`               | (optional) target value                 | `string`  | `'_self'`               |
 
 
 ## Dependencies