🐛 fix(nav): adjust overview links and popup (#1242)

* fix(nav): adjust overview links and popup

* chore(): update base images

* chore(): update base images

* chore: trigger build

---------

Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com>

Author: hirsch88

.changeset/sweet-hairs-admire.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+Add missing `➞` sign to the overview links in the `bal-nav` component and adjust padding and height of the `bal-popup` component in fullscreen variant.

CHANGELOG_NEXT.md

@@ -399,7 +399,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **tabs:** add hidden, spaceless and float ([bed5b37](https://github.com/baloise/design-system/commit/bed5b37cd398f6fe842d3756ab2b23243daa462b))
 * **tabs:** add hidden, spaceless and float ([1111288](https://github.com/baloise/design-system/commit/1111288f66f137e6ad68d2aeb8afce8e66d4dc75))
 
-
 ### Bug Fixes
 
 * **button:** adjust start height to 48px ([1b11e1b](https://github.com/baloise/design-system/commit/1b11e1b18bdccf2f73231fd32921b98b2ef8f395))

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

@@ -458,7 +458,7 @@ export class NavMetaBar
                     target={this.activeMenuLinkItem?.overviewLink?.target}
                     onClick={() => this.linkItemClickListener(this.activeMenuLinkItem?.overviewLink)}
                   >
-                    {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} ➞
     </a>
   )
 }

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

@@ -44,6 +44,34 @@
                 inventore vel nesciunt. Exercitationem totam doloribus reiciendis quae magni eius ipsa. Inventore sit
                 placeat modi suscipit laborum quisquam laudantium!
               </p>
+              <p>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis qui vero nulla vitae nemo harum laborum
+                iusto voluptate. Enim facilis quod iste dolores sit quidem aspernatur molestias itaque consequatur
+                nostrum? Laborum odio accusantium repudiandae ipsa? Expedita corrupti similique sint aspernatur officiis
+                inventore vel nesciunt. Exercitationem totam doloribus reiciendis quae magni eius ipsa. Inventore sit
+                placeat modi suscipit laborum quisquam laudantium!
+              </p>
+              <p>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis qui vero nulla vitae nemo harum laborum
+                iusto voluptate. Enim facilis quod iste dolores sit quidem aspernatur molestias itaque consequatur
+                nostrum? Laborum odio accusantium repudiandae ipsa? Expedita corrupti similique sint aspernatur officiis
+                inventore vel nesciunt. Exercitationem totam doloribus reiciendis quae magni eius ipsa. Inventore sit
+                placeat modi suscipit laborum quisquam laudantium!
+              </p>
+              <p>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis qui vero nulla vitae nemo harum laborum
+                iusto voluptate. Enim facilis quod iste dolores sit quidem aspernatur molestias itaque consequatur
+                nostrum? Laborum odio accusantium repudiandae ipsa? Expedita corrupti similique sint aspernatur officiis
+                inventore vel nesciunt. Exercitationem totam doloribus reiciendis quae magni eius ipsa. Inventore sit
+                placeat modi suscipit laborum quisquam laudantium!
+              </p>
+              <p>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis qui vero nulla vitae nemo harum laborum
+                iusto voluptate. Enim facilis quod iste dolores sit quidem aspernatur molestias itaque consequatur
+                nostrum? Laborum odio accusantium repudiandae ipsa? Expedita corrupti similique sint aspernatur officiis
+                inventore vel nesciunt. Exercitationem totam doloribus reiciendis quae magni eius ipsa. Inventore sit
+                placeat modi suscipit laborum quisquam laudantium!
+              </p>
             </bal-popup>
 
             <bal-popup id="popup-login" label="Anmelden" content-width="440">
@@ -249,8 +277,8 @@ <h2 class="title is-size-xx-large mb-normal">Heading</h2>
               href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html',
               active: true,
               overviewLink: {
-                value: 'Privatkunden ➞',
-                label: 'Privatkunden ➞',
+                value: 'Privatkunden',
+                label: 'Privatkunden',
                 href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html',
               },
               mainLinkItems: [
@@ -436,8 +464,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',
                   },
                 },
@@ -640,8 +668,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',
                   },
                 },
@@ -731,8 +759,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-popup/bal-popup.sass

@@ -36,8 +36,9 @@
     min-width: 100%
     max-width: 100% !important
     min-height: var(--bal-app-height, 100%)
-    padding-left: var(--bal-container-space)
-    padding-right: var(--bal-container-space)
+    .bal-popup__inner
+      padding-left: var(--bal-container-space)
+      padding-right: var(--bal-container-space)
   &--variant-drawer
     position: fixed
     border-top-left-radius: var(--bal-popup-variant-drawer-radius)
@@ -51,7 +52,7 @@
 
 .bal-popup__inner
   overflow-y: auto
-  max-height: calc(var(--bal-app-height, 100%) - 8rem)
+  max-height: calc(var(--bal-app-height, 100%) - 4rem)
 
 // Popup Head
 // --------------------------------------------------