🐛 fix(navigation): hide arrow if no overviewLink is set

.changeset/fast-planets-think.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+In the navigation component the arrow symbol for overview links will only be rendered if the link is valid

CHANGELOG_NEXT.md

@@ -317,7 +317,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 * add animated logo, [#359](/~https://github.com/baloise/design-system/issues/359) ([a5af419](/~https://github.com/baloise/design-system/commit/a5af41968659c23c623d9cc5876ef7bbafe8a130))
 
-
 ### Bug Fixes
 
 * **bal-navbar-logo:** fixed custom logo overflowing header ([#445](/~https://github.com/baloise/design-system/issues/445)) ([2e650e7](/~https://github.com/baloise/design-system/commit/2e650e78cc79d2095f079c58b7710d71b951c30e))

docs/stories/components/bal-nav/bal-nav.data.ts

@@ -271,8 +271,8 @@ export const optionLinkItems = [
           },
         ],
         overviewLink: {
-          value: 'Alle Versicherungslösungen ➞',
-          label: 'Alle Versicherungslösungen ➞',
+          value: 'Alle Versicherungslösungen',
+          label: 'Alle Versicherungslösungen',
           href: 'http://localhost:3334/components/bal-nav/test/bal-nav.visual.html',
         },
       },
@@ -493,8 +493,8 @@ export const optionLinkItems = [
       },
     ],
     overviewLink: {
-      value: 'Privatkunden ➞',
-      label: 'Privatkunden ➞',
+      value: 'Privatkunden',
+      label: 'Privatkunden',
       href: 'http://localhost:3334/components/bal-nav/test/bal-nav.visual.html',
     },
   },

docs/stories/components/bal-nav/bal-nav.mdx

@@ -301,8 +301,8 @@ export const optionLinkItems = [
           },
         ],
         overviewLink: {
-          value: 'Alle Versicherungslösungen ➞',
-          label: 'Alle Versicherungslösungen ➞',
+          value: 'Alle Versicherungslösungen',
+          label: 'Alle Versicherungslösungen',
           href: 'http://localhost:3334/components/bal-nav/test/bal-nav.visual.html',
         },
       },

packages/components/src/components/bal-nav/bal-nav.tsx

@@ -458,7 +458,8 @@ export class NavMetaBar
                     target={this.activeMenuLinkItem?.overviewLink?.target}
                     onClick={() => this.linkItemClickListener(this.activeMenuLinkItem?.overviewLink)}
                   >
-                    {this.activeMenuLinkItem?.overviewLink?.label} ➞
+                    {this.activeMenuLinkItem?.overviewLink?.label}{' '}
+                    {this.activeMenuLinkItem?.overviewLink?.label ? '➞' : ''}
                   </bal-nav-link>
                   {this.renderGridLinks(this.activeMenuLinkItem)}
                 </bal-nav-menu-flyout>

packages/components/src/components/bal-nav/components/overview-link.tsx

@@ -25,7 +25,7 @@ export const OverviewLink: FunctionalComponent<OverviewLinkProps> = ({ item, isM
       target={item.target}
       onClick={ev => onClick(ev)}
     >
-      {item.label} ➞
+      {item.label} {item.label ? '➞' : ''}
     </a>
   )
 }

packages/components/src/components/bal-nav/test/bal-nav-colors.visual.html

@@ -94,8 +94,8 @@
               label: 'Privatkunden',
               active: true,
               overviewLink: {
-                value: 'Privatkunden ➞',
-                label: 'Privatkunden ➞',
+                value: 'Privatkunden',
+                label: 'Privatkunden',
                 href: 'http://localhost:3334/components/bal-nav/test/bal-nav.visual.html',
               },
               mainLinkItems: [

packages/components/src/components/bal-nav/test/bal-nav-long.visual.html

@@ -249,9 +249,9 @@ <h2 class="title is-size-xx-large mb-normal">Heading</h2>
                 'Privatkunden  with a very long additional text content to see if it text breaks nicely or just goes into the nowhere.',
               active: true,
               overviewLink: {
-                value: 'Privatkunden ➞',
+                value: 'Privatkunden',
                 label:
-                  'Privatkunden ➞  with a very long additional text content to see if it text breaks nicely or just goes into the nowhere. It even needs more text content so it is able to break.',
+                  'Privatkunden with a very long additional text content to see if it text breaks nicely or just goes into the nowhere. It even needs more text content so it is able to break.',
                 href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html',
               },
               mainLinkItems: [
@@ -441,8 +441,8 @@ <h2 class="title is-size-xx-large mb-normal">Heading</h2>
                     },
                   ],
                   overviewLink: {
-                    value: 'Alle Versicherungslösungen ➞',
-                    label: 'Alle Versicherungslösungen ➞',
+                    value: 'Alle Versicherungslösungen',
+                    label: 'Alle Versicherungslösungen',
                     href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html',
                   },
                 },
@@ -645,8 +645,8 @@ <h2 class="title is-size-xx-large mb-normal">Heading</h2>
                     },
                   ],
                   overviewLink: {
-                    value: 'Alle Anlage- und Vorsorgelösungen ➞',
-                    label: 'Alle Anlage- und Vorsorgelösungen ➞',
+                    value: 'Alle Anlage- und Vorsorgelösungen',
+                    label: 'Alle Anlage- und Vorsorgelösungen',
                     href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html',
                   },
                 },
@@ -736,8 +736,8 @@ <h2 class="title is-size-xx-large mb-normal">Heading</h2>
                     },
                   ],
                   overviewLink: {
-                    value: 'Alle Bankprodukte ➞',
-                    label: 'Alle Bankprodukte ➞',
+                    value: 'Alle Bankprodukte',
+                    label: 'Alle Bankprodukte',
                     href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html',
                   },
                 },

packages/components/src/components/bal-navigation/bal-navigation-menu/bal-navigation-menu.tsx

@@ -28,7 +28,7 @@ export class NavigationMenu {
             }}
           >
             <a href={this.linkHref} target={this.target} {...this.tracking}>
-              {this.linkName} ➞
+              {this.linkName} {this.linkName ? '➞' : ''}
             </a>
           </div>
         )}