fix: megamenu links (#1498)

* fix: megamenu links * fix: add padding
telekom · Jan 20, 2023 · bd9c848 · bd9c848
1 parent 2434514
commit bd9c848
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 18 deletions.
diff --git a/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-heading.css b/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-heading.css
@@ -5,7 +5,9 @@
   --height: 22px;
 }
 
-[part='base'] {
+[part='base'],
+[part='link'],
+[part='heading'] {
   font-weight: var(--font-weight);
   font-size: var(--font-weight);
   line-height: var(--line-height);
@@ -22,3 +24,17 @@
 [part='scale-icon-navigation-right'] {
   margin-left: 7px;
 }
+
+[part='link'] {
+  cursor: pointer;
+  color: var(--telekom-color-text-and-icon-standard);
+  text-decoration: none;
+}
+
+[part='link']:hover {
+  color: var(--telekom-color-text-and-icon-primary-hovered);
+}
+
+[part='link']:active {
+  color: var(--telekom-color-text-and-icon-primary-pressed);
+}
diff --git a/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-heading.tsx b/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-heading.tsx
@@ -9,7 +9,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Component, h, Host, Element } from '@stencil/core';
+import { Component, h, Host, Element, Prop } from '@stencil/core';
 import { HTMLStencilElement } from '@stencil/core/internal';
 
 @Component({
@@ -20,20 +20,38 @@ import { HTMLStencilElement } from '@stencil/core/internal';
 export class TelekomMegaMenuHeading {
   @Element() hostElement: HTMLStencilElement;
 
+  @Prop() href: string;
+
   render() {
     return (
       <Host>
-        <div part="base">
-          <div part="custom-icon">
-            <slot name="custom-icon"></slot>
-          </div>
-          <slot></slot>
-          <scale-icon-navigation-right
-            size={8}
-            selected
-            part="scale-icon-navigation-right"
-          />
-        </div>
+        <h2 part="base">
+          {this.href ? (
+            <a href={this.href} part="link">
+              <div part="custom-icon">
+                <slot name="custom-icon"></slot>
+              </div>
+              <slot></slot>
+              <scale-icon-navigation-right
+                size={10}
+                selected
+                part="scale-icon-navigation-right"
+              />
+            </a>
+          ) : (
+            <div part="heading">
+              <div part="custom-icon">
+                <slot name="custom-icon"></slot>
+              </div>
+              <slot></slot>
+              <scale-icon-navigation-right
+                size={10}
+                selected
+                part="scale-icon-navigation-right"
+              />
+            </div>
+          )}
+        </h2>
       </Host>
     );
   }

diff --git a/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-item.css b/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-item.css
@@ -3,11 +3,28 @@
   --font-size: var(--telekom-typography-font-size-body);
   --font-weight: var(--telekom-typography-font-weight-regular);
   --line-height: var(--telekom-typography-line-spacing-standard);
+  --left-padding: var(--telekom-spacing-unit-x8);
 }
 
 [part='base'] {
+  display: inline-flex;
   margin-top: var(--margin-top);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
+  padding-left: var(--left-padding);
+}
+
+[part='link'] {
+  cursor: pointer;
+  color: var(--telekom-color-text-and-icon-standard);
+  text-decoration: none;
+}
+
+[part='link']:hover {
+  color: var(--telekom-color-text-and-icon-primary-hovered);
+}
+
+[part='link']:active {
+  color: var(--telekom-color-text-and-icon-primary-pressed);
 }
diff --git a/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-item.tsx b/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-item.tsx
@@ -9,7 +9,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Component, h, Host, Element } from '@stencil/core';
+import { Component, h, Host, Element, Prop } from '@stencil/core';
 import { HTMLStencilElement } from '@stencil/core/internal';
 
 @Component({
@@ -19,12 +19,15 @@ import { HTMLStencilElement } from '@stencil/core/internal';
 })
 export class TelekomMegaMenuItem {
   @Element() hostElement: HTMLStencilElement;
+  @Prop() href: string;
 
   render() {
     return (
       <Host>
         <div part="base">
-          <slot></slot>
+          <a part="link" href={this.href}>
+            <slot></slot>
+          </a>
         </div>
       </Host>
     );

diff --git a/packages/components/src/html/telekom-header.html b/packages/components/src/html/telekom-header.html
@@ -69,14 +69,14 @@
           <scale-telekom-nav-flyout hover>
             <scale-telekom-mega-menu>
               <scale-telekom-mega-menu-column>
-                <scale-telekom-mega-menu-heading>
+                <scale-telekom-mega-menu-heading href="https://bing.com">
                   <scale-icon-home-home
                     slot="custom-icon"
                   ></scale-icon-home-home>
-                  <a href="#">Level Subcategory 1.0</a>
+                  Level Subcategory 1.0
                 </scale-telekom-mega-menu-heading>
                 <scale-telekom-mega-menu-list>
-                  <scale-telekom-mega-menu-item>
+                  <scale-telekom-mega-menu-item href="https://google.com">
                     First
                   </scale-telekom-mega-menu-item>
                   <scale-telekom-mega-menu-item>