Merge pull request #5 from wanoo21/borders-sizes

Borders sizes
wanoo21 · May 24, 2023 · 092df3f · 092df3f
2 parents 4ba2a18 + 51d6e50
commit 092df3f
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 7 deletions.
diff --git a/mjml-output/blocks/Button.ts b/mjml-output/blocks/Button.ts
@@ -29,14 +29,21 @@ export class Button implements ButtonBlock, RenderingClass {
             link,
             innerPadding,
             padding,
-            fullWidth
+            fullWidth,
         } = this.options;
 
+        // const {top = 0, right = 0, left = 0, bottom = 0} = border?.size
+
+
         return `
       <mj-button css-class="ip-button-block"
         ${fullWidth ? 'width="100%"' : ''}
         background-color="${backgroundColor}"
         border="${createBorder(border)}"
+        border-top="${border.size?.top}px ${ border.color } ${border.style}"
+        border-right="${border.size?.right}px ${ border.color } ${border.style}"
+        border-left="${border.size?.left}px ${ border.color } ${border.style}"
+        border-bottom="${border.size?.bottom}px ${ border.color } ${border.style}"
         border-radius="${border.radius}px"
         color="${color}"
         align="${align}"

diff --git a/mjml-output/blocks/Image.ts b/mjml-output/blocks/Image.ts
@@ -18,6 +18,10 @@ export class Image implements ImageBlock, RenderingClass {
             css-class="ip-image-block"
             padding="${createPadding(padding)}"
             border="${createBorder(border)}"
+            border-top="${border.size?.top}px ${border.color} ${border.style}"
+            border-right="${border.size?.right}px ${border.color} ${border.style}"
+            border-left="${border.size?.left}px ${border.color} ${border.style}"
+            border-bottom="${border.size?.bottom}px ${border.color} ${border.style}"
             border-radius="${border.radius}px"
             ${!width.auto ? `width="${width.value}px"` : ''}
             ${!height.auto ? `height="${height.value}px"` : ''}

diff --git a/mjml-output/interfaces.ts b/mjml-output/interfaces.ts
@@ -61,6 +61,13 @@ export interface IForRootConf {
   OwnerEmail: string;
 }
 
+export interface ISize {
+  top: number;
+  right: number;
+  left: number;
+  bottom: number;
+}
+
 export type TStructureTypes =
   | 'cols_1'
   | 'cols_2'
@@ -94,6 +101,7 @@ export type TBackgroundRepeat =
 export interface IBorder {
   color: string;
   style: string;
+  size: ISize;
   width: number;
   radius?: number;
 }
@@ -146,12 +154,12 @@ export interface ILink {
 
 export interface IStructureColumnOptions {
   background: IBackground;
-  border: IBorder;
+  border: Omit<IBorder, 'size'>;
   verticalAlign: TVerticalAlign;
 }
 
 export interface IStructureOptions {
-  border: IBorder;
+  border: Omit<IBorder, 'size'>;
   background: IBackground;
   padding: IPadding;
   margin: IMargin;
@@ -224,7 +232,7 @@ export interface IHtmlBlockOptions {
 }
 
 export interface IDividerBlockOptions {
-  border: IBorder;
+  border: Omit<IBorder, 'size'>;
   padding: IPadding;
 }
 

diff --git a/mjml-output/utils.ts b/mjml-output/utils.ts
@@ -1,12 +1,12 @@
 import {IBackground, IBorder, IFont, ILineHeight, IPadding, IWidthHeight, TStructureTypes} from './interfaces';
 import {Declaration, Rule, StyleRules} from "css";
 
-export function createBorder({color = '#000000', style = 'solid', width = 4}: IBorder): string {
+export function createBorder({color = '#000000', style = 'solid', width = 4}: Omit<IBorder, 'size'>): string {
     if (width <= 0) return '0';
     return `${width}px ${style} ${color}`;
 }
 
-export function extractBorder(border: string | undefined): IBorder {
+export function extractBorder(border: string | undefined): Omit<IBorder, "size"> {
     if (!border) return {width: 4, style: 'solid', color: '#000000'}
     const [width, style, color] = border.split(' ');
     return {width: parseInt(width), color, style}

diff --git a/mjml-to-email/interfaces.ts b/mjml-to-email/interfaces.ts
@@ -42,7 +42,8 @@ export abstract class MjmlToObject<T> {
     extractBorder(): IBorder {
         return {
             ...extractBorder(this.block.attr('border')),
-            radius: parseInt(this.block.attr('border-radius') || '0px')
+            radius: parseInt(this.block.attr('border-radius') || '0px'),
+            size: {top: 0, right: 0, bottom: 0, left: 0}
         }
     }