Add submit button styles support to block styles renderer
[MAILPOET-2604]
This commit is contained in:
committed by
Veljko V
parent
2c69d07109
commit
94784cfd8a
@@ -31,7 +31,7 @@ class Submit {
|
||||
|
||||
$html .= 'data-automation-id="subscribe-submit-button" ';
|
||||
|
||||
$styles = $this->stylesRenderer->render($block['styles'] ?? []);
|
||||
$styles = $this->stylesRenderer->renderForButton($block['styles'] ?? []);
|
||||
|
||||
if ($styles) {
|
||||
$html .= 'style="' . $styles . '" ';
|
||||
|
@@ -36,7 +36,7 @@ class Text {
|
||||
$automationId = 'data-automation-id="form_' . $block['id'] . '" ';
|
||||
}
|
||||
|
||||
$styles = $this->inputStylesRenderer->render($block['styles'] ?? []);
|
||||
$styles = $this->inputStylesRenderer->renderForTextInput($block['styles'] ?? []);
|
||||
|
||||
if (in_array($block['id'], ['email', 'last_name', 'first_name'], true)) {
|
||||
$automationId = 'data-automation-id="form_' . $block['id'] . '" ';
|
||||
|
@@ -27,7 +27,7 @@ class Textarea {
|
||||
|
||||
public function render(array $block, array $formSettings): string {
|
||||
$html = '';
|
||||
$styles = $this->inputStylesRenderer->render($block['styles'] ?? []);
|
||||
$styles = $this->inputStylesRenderer->renderForTextInput($block['styles'] ?? []);
|
||||
|
||||
$html .= $this->rendererHelper->renderLabel($block, $formSettings);
|
||||
|
||||
|
@@ -3,7 +3,7 @@
|
||||
namespace MailPoet\Form;
|
||||
|
||||
class BlockStylesRenderer {
|
||||
public function render(array $styles): string {
|
||||
public function renderForTextInput(array $styles): string {
|
||||
$rules = [];
|
||||
if (isset($styles['full_width']) && intval($styles['full_width'])) {
|
||||
$rules[] = 'width:100%;';
|
||||
@@ -25,4 +25,18 @@ class BlockStylesRenderer {
|
||||
}
|
||||
return implode('', $rules);
|
||||
}
|
||||
|
||||
public function renderForButton(array $styles): string {
|
||||
$rules = [];
|
||||
if (isset($styles['font_color'])) {
|
||||
$rules[] = "color:{$styles['font_color']};";
|
||||
}
|
||||
if (isset($styles['font_size'])) {
|
||||
$rules[] = "font-size:" . intval($styles['font_size']) . "px;";
|
||||
}
|
||||
if (isset($styles['bold']) && $styles['bold'] === '1') {
|
||||
$rules[] = "font-weight:bold;";
|
||||
}
|
||||
return $this->renderForTextInput($styles) . implode('', $rules);
|
||||
}
|
||||
}
|
||||
|
@@ -51,7 +51,7 @@ class SubmitTest extends \MailPoetUnitTest {
|
||||
|
||||
public function testItShouldRenderSubmit() {
|
||||
$this->rendererHelperMock->expects($this->once())->method('getFieldLabel')->willReturn('Submit label');
|
||||
$this->stylesRendererMock->expects($this->once())->method('render')->willReturn('border-radius: 10px;');
|
||||
$this->stylesRendererMock->expects($this->once())->method('renderForButton')->willReturn('border-radius: 10px;');
|
||||
$html = $this->submit->render($this->block);
|
||||
$input = $this->htmlParser->getElementByXpath($html, '//input');
|
||||
$type = $this->htmlParser->getAttribute($input, 'type');
|
||||
|
@@ -59,7 +59,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;');
|
||||
$this->stylesRendererMock->expects($this->once())->method('renderForTextInput')->willReturn('border-radius: 10px;');
|
||||
|
||||
$html = $this->text->render($this->block, []);
|
||||
$input = $this->htmlParser->getElementByXpath($html, '//input');
|
||||
|
@@ -59,7 +59,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;');
|
||||
$this->stylesRendererMock->expects($this->once())->method('renderForTextInput')->willReturn('border-radius: 10px;');
|
||||
|
||||
$html = $this->textarea->render($this->block, []);
|
||||
$textarea = $this->htmlParser->getElementByXpath($html, '//textarea');
|
||||
|
74
tests/unit/Form/BlockStylesRendererTest.php
Normal file
74
tests/unit/Form/BlockStylesRendererTest.php
Normal file
@@ -0,0 +1,74 @@
|
||||
<?php
|
||||
|
||||
namespace MailPoet\Test\Form;
|
||||
|
||||
use MailPoet\Form\BlockStylesRenderer;
|
||||
|
||||
require_once __DIR__ . '/HtmlParser.php';
|
||||
|
||||
class BlockStylesRendererTest extends \MailPoetUnitTest {
|
||||
/** @var BlockStylesRenderer */
|
||||
private $renderer;
|
||||
|
||||
public function _before() {
|
||||
parent::_before();
|
||||
$this->renderer = new BlockStylesRenderer();
|
||||
}
|
||||
|
||||
public function testItShouldReturnEmptyStringForNoStylesOrUnsupportedStyles() {
|
||||
expect($this->renderer->renderForTextInput([]))->equals('');
|
||||
expect($this->renderer->renderForTextInput(['nonsense' => '10px']))->equals('');
|
||||
}
|
||||
|
||||
public function testItShouldRenderSingleTextInputStyles() {
|
||||
expect($this->renderer->renderForTextInput(['border_radius' => 10]))->equals('border-style:solid;border-radius:10px;');
|
||||
expect($this->renderer->renderForTextInput(['border_color' => '#fff']))->equals('border-style:solid;border-color:#fff;');
|
||||
expect($this->renderer->renderForTextInput(['border_size' => 10]))->equals('border-style:solid;border-width:10px;');
|
||||
expect($this->renderer->renderForTextInput(['background_color' => '#dddddd']))->equals('background-color:#dddddd;');
|
||||
}
|
||||
|
||||
public function testItShouldCompleteTextInputStyles() {
|
||||
$styles = [
|
||||
'border_radius' => 10,
|
||||
'border_color' => '#fff',
|
||||
'border_size' => 10,
|
||||
'background_color' => '#dddddd',
|
||||
'bold' => '1',
|
||||
];
|
||||
$result = $this->renderer->renderForTextInput($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;');
|
||||
expect($result)->notContains('font-weight:bold;');
|
||||
}
|
||||
|
||||
public function testItShouldRenderSingleButtonStyles() {
|
||||
expect($this->renderer->renderForButton(['border_radius' => 10]))->equals('border-style:solid;border-radius:10px;');
|
||||
expect($this->renderer->renderForButton(['border_color' => '#fff']))->equals('border-style:solid;border-color:#fff;');
|
||||
expect($this->renderer->renderForButton(['border_size' => 10]))->equals('border-style:solid;border-width:10px;');
|
||||
expect($this->renderer->renderForButton(['background_color' => '#dddddd']))->equals('background-color:#dddddd;');
|
||||
expect($this->renderer->renderForButton(['font_color' => '#aaa']))->equals('color:#aaa;');
|
||||
expect($this->renderer->renderForButton(['font_size' => 10]))->equals('font-size:10px;');
|
||||
}
|
||||
|
||||
public function testItShouldCompleteButtonStyles() {
|
||||
$styles = [
|
||||
'border_radius' => 10,
|
||||
'border_color' => '#fff',
|
||||
'border_size' => 10,
|
||||
'background_color' => '#dddddd',
|
||||
'font_color' => '#eeeeee',
|
||||
'font_size' => 8,
|
||||
'bold' => '1',
|
||||
];
|
||||
$result = $this->renderer->renderForButton($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;');
|
||||
expect($result)->contains('color:#eeeeee;');
|
||||
expect($result)->contains('font-size:8px;');
|
||||
expect($result)->contains('font-weight:bold;');
|
||||
}
|
||||
}
|
@@ -1,43 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace MailPoet\Test\Form;
|
||||
|
||||
use MailPoet\Form\BlockStylesRenderer;
|
||||
|
||||
require_once __DIR__ . '/HtmlParser.php';
|
||||
|
||||
class TextInputStylesRendererTest extends \MailPoetUnitTest {
|
||||
/** @var BlockStylesRenderer */
|
||||
private $renderer;
|
||||
|
||||
public function _before() {
|
||||
parent::_before();
|
||||
$this->renderer = new BlockStylesRenderer();
|
||||
}
|
||||
|
||||
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-style:solid;border-radius:10px;');
|
||||
expect($this->renderer->render(['border_color' => '#fff']))->equals('border-style:solid;border-color:#fff;');
|
||||
expect($this->renderer->render(['border_size' => 10]))->equals('border-style:solid;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;');
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user