Merge pull request #6 from slavik990/feature/update-navigation-block

update navigation block
wanoo21 · Mar 27, 2024 · 09c176c · 09c176c
2 parents 092df3f + d7eb9c9
commit 09c176c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/mjml-output/Section.ts b/mjml-output/Section.ts
@@ -1,6 +1,7 @@
 import {IpBlocks, IStructure, IStructureColumnOptions, RenderingClass} from './interfaces';
 import {Button, Divider, Image, Social, Spacer, Text} from './blocks';
 import {createBorder, createPadding, createWidthHeight, defaultStructureColumnsWidth} from './utils';
+import { Navigation } from './blocks/Navigation';
 
 const defaultColumnsOptions: IStructureColumnOptions = {
     background: {
@@ -21,6 +22,8 @@ export class Section implements RenderingClass {
 
     private static getBlock(block: IpBlocks) {
         switch (block.type) {
+            case 'navigation':
+                return new Navigation(block.options).render();
             case 'text':
                 return new Text(block.innerText, block.options).render();
             case 'image':

diff --git a/mjml-output/blocks/Navigation.ts b/mjml-output/blocks/Navigation.ts
@@ -2,13 +2,13 @@ import {
     INavigationBlockOptions,
     NavigationBlock,
     RenderingClass,
-} from "@mjml-output/interfaces";
-
-export class Navigation implements NavigationBlock, RenderingClass {
-
-    constructor(public innerText: string, public options: INavigationBlockOptions) {
+  } from "@mjml-output/interfaces";
+  
+  export class Navigation implements NavigationBlock, RenderingClass {
+  
+    constructor(public options: INavigationBlockOptions) {
     }
-
+  
     render(): string {
         const {
             color,
@@ -22,7 +22,7 @@ export class Navigation implements NavigationBlock, RenderingClass {
             textDecoration,
             hamburger
         } = this.options
-
+  
         return `
             <mj-navbar align="${align}" hamburger="${hamburger ? 'hamburger' :  ''}">
                ${elements.map((el) => {
@@ -31,18 +31,19 @@ export class Navigation implements NavigationBlock, RenderingClass {
                         color="${color}"
                         target="${target}"
                         font-family="${font.family}"
-                        font-size="${font.size}"
+                        font-size="${font.size}px"
                         font-style="${font.style}"
                         font-weight="${font.weight}"
                         letter-spacing="${letterSpacing}px"
                         text-decoration="${textDecoration}"
-                        line-height="${lineHeight}"
-                        padding-top="${padding.top}"
-                        padding-right="${padding.right}"
-                        padding-left="${padding.left}"
-                        padding-bottom="${padding.bottom}"></mj-navbar-link>`
+                        text-transform="none"
+                        line-height="${lineHeight.value}${lineHeight.unit}"
+                        padding-top="${padding.top}px"
+                        padding-right="${padding.right}px"
+                        padding-left="${padding.left}px"
+                        padding-bottom="${padding.bottom}px">${el.label}</mj-navbar-link>`
         })}
             </mj-navbar>
         `;
     }
-}
+  }
diff --git a/mjml-output/interfaces.ts b/mjml-output/interfaces.ts
@@ -4,7 +4,7 @@ export interface RenderingClass {
 
 export abstract class NavigationBlock {
   readonly type?: 'navigation';
-  protected constructor(public innerText: string, public options: INavigationBlockOptions) {
+  protected constructor(public options: INavigationBlockOptions) {
   }
 }
 
@@ -54,6 +54,7 @@ export type IpBlocks =
   | ButtonBlock
   | DividerBlock
   | SpacerBlock
+  | NavigationBlock
   | SocialBlock;
 
 export interface IForRootConf {