Implement all mj-head components

src/Elements/BodyComponents/MjSocial.php

@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MadeByDenis\PhpMjmlRenderer\Elements\BodyComponents;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
+
+class MjSocial extends AbstractElement
+{
+	public const string TAG_NAME = 'mj-social';
+	public const bool ENDING_TAG = false;
+
+	protected array $allowedAttributes = [
+		'align' => ['unit' => 'string', 'type' => 'alignment', 'default_value' => 'center'],
+		'border-radius' => ['unit' => 'px', 'type' => 'string', 'default_value' => '3px'],
+		'color' => ['unit' => 'color', 'type' => 'color', 'default_value' => '#333333'],
+		'font-family' => [
+			'unit' => 'string',
+			'type' => 'string',
+			'default_value' => 'Ubuntu, Helvetica, Arial, sans-serif',
+		],
+		'font-size' => ['unit' => 'px', 'type' => 'string', 'default_value' => '13px'],
+		'icon-size' => ['unit' => 'px', 'type' => 'string', 'default_value' => '20px'],
+		'mode' => ['unit' => 'string', 'type' => 'string', 'default_value' => 'horizontal'],
+		'padding' => ['unit' => 'px', 'type' => 'string', 'default_value' => '10px 25px'],
+	];
+
+	protected array $defaultAttributes = [
+		'align' => 'center',
+		'border-radius' => '3px',
+		'color' => '#333333',
+		'font-size' => '13px',
+		'icon-size' => '20px',
+		'mode' => 'horizontal',
+		'padding' => '10px 25px',
+	];
+
+	public function render(): string
+	{
+		$children = $this->getChildren() ?? [];
+		$content = $this->renderChildren($children, []);
+		$divAttributes = $this->getHtmlAttributes(['style' => 'div']);
+		return "<div $divAttributes>$content</div>";
+	}
+
+	public function getChildContext(): array
+	{
+		return [
+			...$this->context,
+			'border-radius' => $this->getAttribute('border-radius'),
+			'color' => $this->getAttribute('color'),
+			'font-family' => $this->getAttribute('font-family'),
+			'font-size' => $this->getAttribute('font-size'),
+			'icon-size' => $this->getAttribute('icon-size'),
+		];
+	}
+
+	public function getStyles(): array
+	{
+		return ['div' => ['text-align' => $this->getAttribute('align')]];
+	}
+}

src/Elements/BodyComponents/MjSocialElement.php

@@ -0,0 +1,62 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MadeByDenis\PhpMjmlRenderer\Elements\BodyComponents;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
+
+class MjSocialElement extends AbstractElement
+{
+	public const string TAG_NAME = 'mj-social-element';
+	public const bool ENDING_TAG = true;
+
+	protected array $allowedAttributes = [
+		'align' => ['unit' => 'string', 'type' => 'alignment', 'default_value' => 'left'],
+		'background-color' => ['unit' => 'color', 'type' => 'color', 'default_value' => ''],
+		'border-radius' => ['unit' => 'px', 'type' => 'string', 'default_value' => ''],
+		'color' => ['unit' => 'color', 'type' => 'color', 'default_value' => ''],
+		'font-family' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'font-size' => ['unit' => 'px', 'type' => 'string', 'default_value' => ''],
+		'href' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'icon-size' => ['unit' => 'px', 'type' => 'string', 'default_value' => ''],
+		'name' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'padding' => ['unit' => 'px', 'type' => 'string', 'default_value' => '4px'],
+		'src' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'target' => ['unit' => 'string', 'type' => 'string', 'default_value' => '_blank'],
+	];
+
+	protected array $defaultAttributes = [
+		'align' => 'left',
+		'padding' => '4px',
+		'target' => '_blank',
+	];
+
+	public function render(): string
+	{
+		$href = $this->getAttribute('href');
+		$target = $this->getAttribute('target');
+		$src = $this->getAttribute('src');
+		$iconSize = $this->getAttribute('icon-size') ?: $this->context['icon-size'] ?? '20px';
+		$content = $this->getContent();
+
+		$aAttributes = $this->getHtmlAttributes(['style' => 'a']);
+		$icon = $src ? "<img src='$src' width='$iconSize' height='$iconSize' />" : '';
+
+		return "<a href='$href' target='$target' $aAttributes>$icon $content</a>";
+	}
+
+	public function getStyles(): array
+	{
+		$color = $this->getAttribute('color') ?: $this->context['color'] ?? '#333333';
+		$fontFamily = $this->getAttribute('font-family') ?:
+			$this->context['font-family'] ?? 'Ubuntu, Helvetica, Arial, sans-serif';
+
+		return ['a' => [
+			'color' => $color,
+			'font-family' => $fontFamily,
+			'padding' => $this->getAttribute('padding'),
+			'text-decoration' => 'none',
+		]];
+	}
+}

src/Elements/HeadComponents/MjAttributes.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
+
+class MjAttributes extends AbstractElement
+{
+	public const string TAG_NAME = 'mj-attributes';
+	public const bool ENDING_TAG = false;
+
+	protected array $allowedAttributes = [];
+	protected array $defaultAttributes = [];
+
+	public function render(): string
+	{
+		return '';
+	}
+
+	public function getStyles(): array
+	{
+		return [];
+	}
+}

src/Elements/HeadComponents/MjBreakpoint.php

@@ -1,44 +1,18 @@
 <?php
 
-/**
- * PHP MJML Renderer library
- *
- * @package MadeByDenis\PhpMjmlRenderer
- * @link    https://github.com/dingo-d/php-mjml-renderer
- * @license https://opensource.org/licenses/MIT MIT
- */
-
 declare(strict_types=1);
 
 namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
 
 use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
 
-/**
- * Mjml Breakpoint Element
- *
- * @link https://documentation.mjml.io/#mj-breakpoint
- *
- * @since 1.0.0
- */
 class MjBreakpoint extends AbstractElement
 {
 	public const string TAG_NAME = 'mj-breakpoint';
-
 	public const bool ENDING_TAG = false;
 
-	/**
-	 * List of allowed attributes on the element
-	 *
-	 * @var array<string, array<string, string>>
-	 */
 	protected array $allowedAttributes = [
-		'width' => [
-			'unit' => 'px',
-			'type' => 'measure',
-			'description' => 'breakpoint width',
-			'default_value' => '480px',
-		],
+		'width' => ['unit' => 'px', 'type' => 'string', 'default_value' => '480px'],
 	];
 
 	protected array $defaultAttributes = [
@@ -47,14 +21,9 @@ class MjBreakpoint extends AbstractElement
 
 	public function render(): string
 	{
-		// mj-breakpoint doesn't render any HTML
-		// It's processed by mj-head to set responsive breakpoint
 		return '';
 	}
 
-	/**
-	 * @return array<string, array<string, string>>
-	 */
 	public function getStyles(): array
 	{
 		return [];

src/Elements/HeadComponents/MjFont.php

@@ -1,70 +1,35 @@
 <?php
 
-/**
- * PHP MJML Renderer library
- *
- * @package MadeByDenis\PhpMjmlRenderer
- * @link    https://github.com/dingo-d/php-mjml-renderer
- * @license https://opensource.org/licenses/MIT MIT
- */
-
 declare(strict_types=1);
 
 namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
 
 use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
 
-/**
- * Mjml Font Element
- *
- * @link https://documentation.mjml.io/#mj-font
- *
- * @since 1.0.0
- */
 class MjFont extends AbstractElement
 {
 	public const string TAG_NAME = 'mj-font';
-
 	public const bool ENDING_TAG = false;
 
-	/**
-	 * List of allowed attributes on the element
-	 *
-	 * @var array<string, array<string, string>>
-	 */
 	protected array $allowedAttributes = [
-		'name' => [
-			'unit' => 'string',
-			'type' => 'string',
-			'description' => 'font name',
-			'default_value' => '',
-		],
-		'href' => [
-			'unit' => 'string',
-			'type' => 'string',
-			'description' => 'font url',
-			'default_value' => '',
-		],
+		'name' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'href' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
 	];
 
 	protected array $defaultAttributes = [];
 
 	public function render(): string
 	{
-		$name = $this->getAttribute('name');
 		$href = $this->getAttribute('href');
+		$name = $this->getAttribute('name');
 
 		if (!$href) {
 			return '';
 		}
 
-		// Render as a link tag for non-MSO clients
-		return "<!--[if !mso]><!--><link href=\"$href\" rel=\"stylesheet\" type=\"text/css\"><!--<![endif]-->";
+		return "<link href='$href' rel='stylesheet' type='text/css'>";
 	}
 
-	/**
-	 * @return array<string, array<string, string>>
-	 */
 	public function getStyles(): array
 	{
 		return [];