Render form input and textarea styles on frontend

[MAILPOET-2599]

lib/DI/ContainerConfigurator.php

@@ -174,6 +174,7 @@ class ContainerConfigurator implements IContainerConfigurator {
     $container->autowire(\MailPoet\Form\FormsRepository::class);
     $container->autowire(\MailPoet\Form\Renderer::class)->setPublic(true);
     $container->autowire(\MailPoet\Form\BlocksRenderer::class);
+    $container->autowire(\MailPoet\Form\TextInputStylesRenderer::class);
     $container->autowire(\MailPoet\Form\Block\BlockRendererHelper::class);
     $container->autowire(\MailPoet\Form\Block\Column::class);
     $container->autowire(\MailPoet\Form\Block\Columns::class);

lib/Form/Block/Text.php

@@ -2,13 +2,19 @@
 
 namespace MailPoet\Form\Block;
 
+use MailPoet\Form\TextInputStylesRenderer;
+
 class Text {
 
   /** @var BlockRendererHelper */
   private $rendererHelper;
 
-  public function __construct(BlockRendererHelper $rendererHelper) {
+  /** @var TextInputStylesRenderer */
+  private $inputStylesRenderer;
+
+  public function __construct(BlockRendererHelper $rendererHelper, TextInputStylesRenderer $inputStylesRenderer) {
     $this->rendererHelper = $rendererHelper;
+    $this->inputStylesRenderer = $inputStylesRenderer;
   }
 
   public function render(array $block, array $formSettings): string {
@@ -17,6 +23,7 @@ class Text {
     if ($block['id'] === 'email') {
       $type = 'email';
     }
+    $styles = $this->inputStylesRenderer->render($block['styles'] ?? []);
 
     if (in_array($block['id'], ['email', 'last_name', 'first_name'], true)) {
       $automationId = 'data-automation-id="form_' . $block['id'] . '" ';
@@ -34,6 +41,10 @@ class Text {
 
     $html .= 'value="' . $this->rendererHelper->getFieldValue($block) . '" ';
 
+    if ($styles) {
+      $html .= 'style="' . $styles . '" ';
+    }
+
     $html .= $automationId;
 
     $html .= $this->rendererHelper->renderInputPlaceholder($block);

lib/Form/Block/Textarea.php

@@ -2,16 +2,23 @@
 
 namespace MailPoet\Form\Block;
 
+use MailPoet\Form\TextInputStylesRenderer;
+
 class Textarea {
   /** @var BlockRendererHelper */
   private $rendererHelper;
 
-  public function __construct(BlockRendererHelper $rendererHelper) {
+  /** @var TextInputStylesRenderer */
+  private $inputStylesRenderer;
+
+  public function __construct(BlockRendererHelper $rendererHelper, TextInputStylesRenderer $inputStylesRenderer) {
     $this->rendererHelper = $rendererHelper;
+    $this->inputStylesRenderer = $inputStylesRenderer;
   }
 
   public function render(array $block, array $formSettings): string {
     $html = '';
+    $styles = $this->inputStylesRenderer->render($block['styles'] ?? []);
 
     $html .= '<div class="mailpoet_paragraph">';
 
@@ -29,6 +36,10 @@ class Textarea {
 
     $html .= $this->rendererHelper->getInputModifiers($block);
 
+    if ($styles) {
+      $html .= 'style="' . $styles . '" ';
+    }
+
     $html .= '>' . $this->rendererHelper->getFieldValue($block) . '</textarea>';
 
     $html .= '</div>';

lib/Form/TextInputStylesRenderer.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace MailPoet\Form;
+
+class TextInputStylesRenderer {
+  public function render(array $styles): string {
+    $rules = [];
+    if (isset($styles['full_width']) && intval($styles['full_width'])) {
+      $rules[] = 'width:100%;';
+    }
+    if (isset($styles['background_color'])) {
+      $rules[] = "background-color:{$styles['background_color']};";
+    }
+    if (isset($styles['border_radius'])) {
+      $rules[] = "border-radius:" . intval($styles['border_radius']) . "px;";
+    }
+    if (isset($styles['border_size'])) {
+      $rules[] = "border-width:" . intval($styles['border_size']) . "px;";
+    }
+    if (isset($styles['border_color'])) {
+      $rules[] = "border-color:{$styles['border_color']};";
+    }
+    return implode('', $rules);
+  }
+}

tests/unit/Form/Block/TextTest.php

@@ -4,6 +4,7 @@ namespace MailPoet\Test\Form\Block;
 
 use MailPoet\Form\Block\BlockRendererHelper;
 use MailPoet\Form\Block\Text;
+use MailPoet\Form\TextInputStylesRenderer;
 use MailPoet\Test\Form\HtmlParser;
 use PHPUnit\Framework\MockObject\MockObject;
 
@@ -16,6 +17,9 @@ class TextTest extends \MailPoetUnitTest {
   /** @var MockObject & BlockRendererHelper */
   private $rendererHelperMock;
 
+  /** @var MockObject & TextInputStylesRenderer */
+  private $stylesRendererMock;
+
   /** @var HtmlParser */
   private $htmlParser;
 
@@ -36,7 +40,8 @@ class TextTest extends \MailPoetUnitTest {
   public function _before() {
     parent::_before();
     $this->rendererHelperMock = $this->createMock(BlockRendererHelper::class);
-    $this->text = new Text($this->rendererHelperMock);
+    $this->stylesRendererMock = $this->createMock(TextInputStylesRenderer::class);
+    $this->text = new Text($this->rendererHelperMock, $this->stylesRendererMock);
     $this->htmlParser = new HtmlParser();
   }
 
@@ -48,6 +53,7 @@ class TextTest extends \MailPoetUnitTest {
     $this->rendererHelperMock->expects($this->once())->method('getFieldValue')->willReturn('val');
     $this->rendererHelperMock->expects($this->once())->method('renderInputPlaceholder')->willReturn('');
     $this->rendererHelperMock->expects($this->once())->method('getInputModifiers')->willReturn(' modifiers="mod" ');
+    $this->stylesRendererMock->expects($this->once())->method('render')->willReturn('border-radius: 10px;');
 
     $html = $this->text->render($this->block, []);
     $input = $this->htmlParser->getElementByXpath($html, '//input');
@@ -57,11 +63,13 @@ class TextTest extends \MailPoetUnitTest {
     $value = $this->htmlParser->getAttribute($input, 'value');
     $modifiers = $this->htmlParser->getAttribute($input, 'modifiers');
     $class = $this->htmlParser->getAttribute($input, 'class');
+    $style = $this->htmlParser->getAttribute($input, 'style');
     expect($name->value)->equals('data[Field name]');
     expect($type->value)->equals('text');
     expect($validation->value)->equals('1');
     expect($value->value)->equals('val');
     expect($modifiers->value)->equals('mod');
     expect($class->value)->equals('mailpoet_text');
+    expect($style->value)->equals('border-radius: 10px;');
   }
 }

tests/unit/Form/Block/TextareaTest.php

@@ -4,6 +4,7 @@ namespace MailPoet\Test\Form\Block;
 
 use MailPoet\Form\Block\BlockRendererHelper;
 use MailPoet\Form\Block\Textarea;
+use MailPoet\Form\TextInputStylesRenderer;
 use MailPoet\Test\Form\HtmlParser;
 use PHPUnit\Framework\MockObject\MockObject;
 
@@ -16,6 +17,9 @@ class TextareaTest extends \MailPoetUnitTest {
   /** @var MockObject & BlockRendererHelper */
   private $rendererHelperMock;
 
+  /** @var MockObject & TextInputStylesRenderer */
+  private $stylesRendererMock;
+
   /** @var HtmlParser */
   private $htmlParser;
 
@@ -37,7 +41,8 @@ class TextareaTest extends \MailPoetUnitTest {
   public function _before() {
     parent::_before();
     $this->rendererHelperMock = $this->createMock(BlockRendererHelper::class);
-    $this->textarea = new Textarea($this->rendererHelperMock);
+    $this->stylesRendererMock = $this->createMock(TextInputStylesRenderer::class);
+    $this->textarea = new Textarea($this->rendererHelperMock, $this->stylesRendererMock);
     $this->htmlParser = new HtmlParser();
   }
 
@@ -48,6 +53,7 @@ class TextareaTest extends \MailPoetUnitTest {
     $this->rendererHelperMock->expects($this->once())->method('getInputValidation')->willReturn(' validation="1" ');
     $this->rendererHelperMock->expects($this->once())->method('getInputModifiers')->willReturn(' modifiers="mod" ');
     $this->rendererHelperMock->expects($this->once())->method('getFieldValue')->willReturn('val');
+    $this->stylesRendererMock->expects($this->once())->method('render')->willReturn('border-radius: 10px;');
 
     $html = $this->textarea->render($this->block, []);
     $textarea = $this->htmlParser->getElementByXpath($html, '//textarea');
@@ -55,10 +61,12 @@ class TextareaTest extends \MailPoetUnitTest {
     $validation = $this->htmlParser->getAttribute($textarea, 'validation');
     $modifiers = $this->htmlParser->getAttribute($textarea, 'modifiers');
     $class = $this->htmlParser->getAttribute($textarea, 'class');
+    $style = $this->htmlParser->getAttribute($textarea, 'style');
     expect($textarea->textContent)->equals('val');
     expect($name->value)->equals('data[Field name]');
     expect($validation->value)->equals('1');
     expect($class->value)->equals('mailpoet_textarea');
     expect($modifiers->value)->equals('mod');
+    expect($style->value)->equals('border-radius: 10px;');
   }
 }

tests/unit/Form/TextInputStylesRendererTest.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace MailPoet\Test\Form;
+
+use MailPoet\Form\TextInputStylesRenderer;
+
+require_once __DIR__ . '/HtmlParser.php';
+
+class TextInputStylesRendererTest extends \MailPoetUnitTest {
+  /** @var TextInputStylesRenderer */
+  private $renderer;
+
+  public function _before() {
+    parent::_before();
+    $this->renderer = new TextInputStylesRenderer();
+  }
+
+  public function testItShouldReturnEmptyStringForNoStylesOrUnsupportedStyles() {
+    expect($this->renderer->render([]))->equals('');
+    expect($this->renderer->render(['nonsense' => '10px']))->equals('');
+  }
+
+  public function testItShouldRenderSingleStyles() {
+    expect($this->renderer->render(['border_radius' => 10]))->equals('border-radius:10px;');
+    expect($this->renderer->render(['border_color' => '#fff']))->equals('border-color:#fff;');
+    expect($this->renderer->render(['border_size' => 10]))->equals('border-width:10px;');
+    expect($this->renderer->render(['background_color' => '#dddddd']))->equals('background-color:#dddddd;');
+  }
+
+  public function testItShouldCompleteStyles() {
+    $styles = [
+      'border_radius' => 10,
+      'border_color' => '#fff',
+      'border_size' => 10,
+      'background_color' => '#dddddd',
+    ];
+    $result = $this->renderer->render($styles);
+    expect($result)->contains('border-radius:10px;');
+    expect($result)->contains('border-color:#fff;');
+    expect($result)->contains('border-width:10px;');
+    expect($result)->contains('background-color:#dddddd;');
+  }
+}