Skip to content

Commit 9c2a600

Browse files
dingo-ddingo-d
authored
Merge pull request #21 from dingo-d/feature/mj-divider
Implement mj-divider element
2 parents 098c2c5 + 42beba2 commit 9c2a600

File tree

2 files changed

+320
-0
lines changed

2 files changed

+320
-0
lines changed

‎src/Elements/BodyComponents/MjDivider.php‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<?php
2+
3+
/**
4+
* PHP MJML Renderer library
5+
*
6+
* @package MadeByDenis\PhpMjmlRenderer
7+
* @link https://github.com/dingo-d/php-mjml-renderer
8+
* @license https://opensource.org/licenses/MIT MIT
9+
*/
10+
11+
declare(strict_types=1);
12+
13+
namespace MadeByDenis\PhpMjmlRenderer\Elements\BodyComponents;
14+
15+
use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
16+
17+
/**
18+
* Mjml Divider Element
19+
*
20+
* @link https://documentation.mjml.io/#mj-divider
21+
*
22+
* @since 1.0.0
23+
*/
24+
class MjDivider extends AbstractElement
25+
{
26+
public const string TAG_NAME = 'mj-divider';
27+
28+
public const bool ENDING_TAG = false;
29+
30+
/**
31+
* List of allowed attributes on the element
32+
*
33+
* @var array<string, array<string, string>>
34+
*/
35+
protected array $allowedAttributes = [
36+
'border-color' => [
37+
'unit' => 'color',
38+
'type' => 'color',
39+
'description' => 'divider color',
40+
'default_value' => '#000000',
41+
],
42+
'border-style' => [
43+
'unit' => 'string',
44+
'type' => 'string',
45+
'description' => 'dashed/dotted/solid',
46+
'default_value' => 'solid',
47+
],
48+
'border-width' => [
49+
'unit' => 'px',
50+
'type' => 'measure',
51+
'description' => 'divider width',
52+
'default_value' => '4px',
53+
],
54+
'container-background-color' => [
55+
'unit' => 'color',
56+
'type' => 'color',
57+
'description' => 'inner element background color',
58+
'default_value' => '',
59+
],
60+
'css-class' => [
61+
'unit' => 'string',
62+
'type' => 'string',
63+
'description' => 'class name added to root HTML element',
64+
'default_value' => '',
65+
],
66+
'padding' => [
67+
'unit' => 'px',
68+
'type' => 'measure',
69+
'description' => 'supports up to 4 parameters',
70+
'default_value' => '10px 25px',
71+
],
72+
'padding-top' => [
73+
'unit' => 'px',
74+
'type' => 'measure',
75+
'description' => 'top offset',
76+
'default_value' => '',
77+
],
78+
'padding-bottom' => [
79+
'unit' => 'px',
80+
'type' => 'measure',
81+
'description' => 'bottom offset',
82+
'default_value' => '',
83+
],
84+
'padding-left' => [
85+
'unit' => 'px',
86+
'type' => 'measure',
87+
'description' => 'left offset',
88+
'default_value' => '',
89+
],
90+
'padding-right' => [
91+
'unit' => 'px',
92+
'type' => 'measure',
93+
'description' => 'right offset',
94+
'default_value' => '',
95+
],
96+
'width' => [
97+
'unit' => 'px,%',
98+
'type' => 'measure',
99+
'description' => 'divider width',
100+
'default_value' => '100%',
101+
],
102+
];
103+
104+
protected array $defaultAttributes = [
105+
'border-color' => '#000000',
106+
'border-style' => 'solid',
107+
'border-width' => '4px',
108+
'padding' => '10px 25px',
109+
'width' => '100%',
110+
];
111+
112+
public function render(): string
113+
{
114+
$pAttributes = $this->getHtmlAttributes([
115+
'style' => 'p',
116+
]);
117+
118+
return "<p $pAttributes></p>";
119+
}
120+
121+
/**
122+
* @return array<string, array<string, string>>
123+
*/
124+
public function getStyles(): array
125+
{
126+
return [
127+
'p' => [
128+
'border-top' => $this->getAttribute('border-width') . ' ' .
129+
$this->getAttribute('border-style') . ' ' .
130+
$this->getAttribute('border-color'),
131+
'font-size' => '1px',
132+
'margin' => '0px auto',
133+
'width' => $this->getAttribute('width'),
134+
],
135+
];
136+
}
137+
}

‎tests/Unit/Elements/BodyComponents/MjDividerTest.php‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<?php
2+
3+
namespace MadeByDenis\PhpMjmlRenderer\Tests\Unit\Elements\BodyComponents;
4+
5+
use MadeByDenis\PhpMjmlRenderer\Elements\BodyComponents\MjDivider;
6+
use MadeByDenis\PhpMjmlRenderer\Elements\ElementFactory;
7+
use MadeByDenis\PhpMjmlRenderer\Parser\MjmlNode;
8+
use OutOfBoundsException;
9+
10+
beforeEach(function () {
11+
$this->element = new MjDivider();
12+
});
13+
14+
it('is not ending tag', function () {
15+
expect($this->element->isEndingTag())->toBe(false);
16+
});
17+
18+
it('returns the correct component name', function () {
19+
expect($this->element->getTagName())->toBe('mj-divider');
20+
});
21+
22+
it('returns the correct default attributes', function () {
23+
$attributes = [
24+
'border-color' => '#000000',
25+
'border-style' => 'solid',
26+
'border-width' => '4px',
27+
'padding' => '10px 25px',
28+
'width' => '100%',
29+
];
30+
31+
foreach ($attributes as $key => $value) {
32+
expect($this->element->getAttribute($key))->toBe($value);
33+
}
34+
});
35+
36+
it('will throw out of bounds exception if the allowed attribute is not existing', function () {
37+
$this->element->getAllowedAttributeData('invalid-attribute');
38+
})->throws(OutOfBoundsException::class);
39+
40+
it('will return allowed attribute data', function () {
41+
$data = $this->element->getAllowedAttributeData('border-color');
42+
expect($data)->toBeArray();
43+
expect($data)->toHaveKey('type');
44+
expect($data)->toHaveKey('unit');
45+
});
46+
47+
it('will correctly render a simple divider', function () {
48+
$dividerNode = new MjmlNode(
49+
'mj-divider',
50+
null,
51+
null,
52+
false,
53+
null
54+
);
55+
56+
$factory = new ElementFactory();
57+
$mjDividerElement = $factory->create($dividerNode);
58+
59+
expect($mjDividerElement)->toBeInstanceOf(MjDivider::class);
60+
61+
$out = $mjDividerElement->render();
62+
63+
expect($out)->toContain('<p');
64+
expect($out)->toContain('border-top');
65+
expect($out)->not->toBeEmpty();
66+
});
67+
68+
it('will correctly render a divider with custom color', function () {
69+
$dividerNode = new MjmlNode(
70+
'mj-divider',
71+
['border-color' => '#ff0000'],
72+
null,
73+
false,
74+
null
75+
);
76+
77+
$factory = new ElementFactory();
78+
$mjDividerElement = $factory->create($dividerNode);
79+
80+
$out = $mjDividerElement->render();
81+
82+
expect($out)->toContain('#ff0000');
83+
expect($out)->not->toBeEmpty();
84+
});
85+
86+
it('will correctly render a divider with custom width', function () {
87+
$dividerNode = new MjmlNode(
88+
'mj-divider',
89+
['border-width' => '2px'],
90+
null,
91+
false,
92+
null
93+
);
94+
95+
$factory = new ElementFactory();
96+
$mjDividerElement = $factory->create($dividerNode);
97+
98+
$out = $mjDividerElement->render();
99+
100+
expect($out)->toContain('2px');
101+
expect($out)->not->toBeEmpty();
102+
});
103+
104+
it('will correctly render a divider with dashed style', function () {
105+
$dividerNode = new MjmlNode(
106+
'mj-divider',
107+
['border-style' => 'dashed'],
108+
null,
109+
false,
110+
null
111+
);
112+
113+
$factory = new ElementFactory();
114+
$mjDividerElement = $factory->create($dividerNode);
115+
116+
$out = $mjDividerElement->render();
117+
118+
expect($out)->toContain('dashed');
119+
expect($out)->not->toBeEmpty();
120+
});
121+
122+
it('will correctly render a divider with dotted style', function () {
123+
$dividerNode = new MjmlNode(
124+
'mj-divider',
125+
['border-style' => 'dotted'],
126+
null,
127+
false,
128+
null
129+
);
130+
131+
$factory = new ElementFactory();
132+
$mjDividerElement = $factory->create($dividerNode);
133+
134+
$out = $mjDividerElement->render();
135+
136+
expect($out)->toContain('dotted');
137+
expect($out)->not->toBeEmpty();
138+
});
139+
140+
it('will correctly render a divider with custom width percentage', function () {
141+
$dividerNode = new MjmlNode(
142+
'mj-divider',
143+
['width' => '50%'],
144+
null,
145+
false,
146+
null
147+
);
148+
149+
$factory = new ElementFactory();
150+
$mjDividerElement = $factory->create($dividerNode);
151+
152+
$out = $mjDividerElement->render();
153+
154+
expect($out)->toContain('width');
155+
expect($out)->toContain('50%');
156+
expect($out)->not->toBeEmpty();
157+
});
158+
159+
it('will correctly render a divider with all custom properties', function () {
160+
$dividerNode = new MjmlNode(
161+
'mj-divider',
162+
[
163+
'border-color' => '#cccccc',
164+
'border-style' => 'dashed',
165+
'border-width' => '1px',
166+
'width' => '80%',
167+
],
168+
null,
169+
false,
170+
null
171+
);
172+
173+
$factory = new ElementFactory();
174+
$mjDividerElement = $factory->create($dividerNode);
175+
176+
$out = $mjDividerElement->render();
177+
178+
expect($out)->toContain('#cccccc');
179+
expect($out)->toContain('dashed');
180+
expect($out)->toContain('1px');
181+
expect($out)->toContain('80%');
182+
expect($out)->not->toBeEmpty();
183+
});

0 commit comments

Comments
 (0)