diff --git a/src/Elements/BodyComponents/MjCarousel.php b/src/Elements/BodyComponents/MjCarousel.php new file mode 100644 index 0000000..bbd1d0e --- /dev/null +++ b/src/Elements/BodyComponents/MjCarousel.php @@ -0,0 +1,114 @@ +> + */ + protected array $allowedAttributes = [ + 'align' => [ + 'unit' => 'string', + 'type' => 'alignment', + 'description' => 'horizontal alignment', + 'default_value' => 'center', + ], + 'border-radius' => [ + 'unit' => 'px', + 'type' => 'string', + 'description' => 'border radius', + 'default_value' => '', + ], + 'container-background-color' => [ + 'unit' => 'color', + 'type' => 'color', + 'description' => 'column background color', + 'default_value' => '', + ], + 'icon-width' => [ + 'unit' => 'px', + 'type' => 'string', + 'description' => 'width of icons', + 'default_value' => '44px', + ], + 'left-icon' => [ + 'unit' => 'string', + 'type' => 'string', + 'description' => 'icon on the left', + 'default_value' => 'https://i.imgur.com/xTh3hln.png', + ], + 'right-icon' => [ + 'unit' => 'string', + 'type' => 'string', + 'description' => 'icon on the right', + 'default_value' => 'https://i.imgur.com/os7o9kz.png', + ], + 'thumbnails' => [ + 'unit' => 'string', + 'type' => 'string', + 'description' => 'display or not thumbnails (visible/hidden)', + 'default_value' => 'visible', + ], + ]; + + protected array $defaultAttributes = [ + 'align' => 'center', + 'icon-width' => '44px', + 'left-icon' => 'https://i.imgur.com/xTh3hln.png', + 'right-icon' => 'https://i.imgur.com/os7o9kz.png', + 'thumbnails' => 'visible', + ]; + + public function render(): string + { + $divAttributes = $this->getHtmlAttributes([ + 'style' => 'div', + ]); + + $children = $this->getChildren() ?? []; + $content = $this->renderChildren($children, []); + + return "
$content
"; + } + + /** + * @return array> + */ + public function getStyles(): array + { + return [ + 'div' => [ + 'text-align' => $this->getAttribute('align'), + 'border-radius' => $this->getAttribute('border-radius'), + ], + ]; + } +} diff --git a/src/Elements/BodyComponents/MjCarouselImage.php b/src/Elements/BodyComponents/MjCarouselImage.php new file mode 100644 index 0000000..51760eb --- /dev/null +++ b/src/Elements/BodyComponents/MjCarouselImage.php @@ -0,0 +1,109 @@ +> + */ + protected array $allowedAttributes = [ + 'alt' => [ + 'unit' => 'string', + 'type' => 'string', + 'description' => 'image description', + 'default_value' => '', + ], + 'href' => [ + 'unit' => 'string', + 'type' => 'string', + 'description' => 'link to redirect to on click', + 'default_value' => '', + ], + 'rel' => [ + 'unit' => 'string', + 'type' => 'string', + 'description' => 'specify the rel attribute', + 'default_value' => '', + ], + 'src' => [ + 'unit' => 'string', + 'type' => 'string', + 'description' => 'image source', + 'default_value' => '', + ], + 'target' => [ + 'unit' => 'string', + 'type' => 'string', + 'description' => 'link target on click', + 'default_value' => '_blank', + ], + 'thumbnails-src' => [ + 'unit' => 'string', + 'type' => 'string', + 'description' => 'thumbnail source', + 'default_value' => '', + ], + 'title' => [ + 'unit' => 'string', + 'type' => 'string', + 'description' => 'image title', + 'default_value' => '', + ], + ]; + + protected array $defaultAttributes = [ + 'target' => '_blank', + ]; + + public function render(): string + { + $src = $this->getAttribute('src'); + $alt = $this->getAttribute('alt'); + $href = $this->getAttribute('href'); + $target = $this->getAttribute('target'); + + $imgTag = "$alt"; + + if ($href) { + return "$imgTag"; + } + + return $imgTag; + } + + /** + * @return array> + */ + public function getStyles(): array + { + return []; + } +} diff --git a/tests/Unit/Elements/BodyComponents/MjCarouselTest.php b/tests/Unit/Elements/BodyComponents/MjCarouselTest.php new file mode 100644 index 0000000..a29ad59 --- /dev/null +++ b/tests/Unit/Elements/BodyComponents/MjCarouselTest.php @@ -0,0 +1,50 @@ +getTagName())->toBe('mj-carousel'); + }); + + it('has correct default attributes', function () { + $element = new MjCarousel(); + expect($element->getAttribute('align'))->toBe('center'); + expect($element->getAttribute('thumbnails'))->toBe('visible'); + }); + + it('renders correctly', function () { + $element = new MjCarousel(); + $out = $element->render(); + expect($out)->toContain('getTagName())->toBe('mj-carousel-image'); + }); + + it('renders image correctly', function () { + $element = new MjCarouselImage(['src' => 'test.jpg', 'alt' => 'Test']); + $out = $element->render(); + expect($out)->toContain('toContain('test.jpg'); + expect($out)->toContain('Test'); + }); + + it('renders with link when href is provided', function () { + $element = new MjCarouselImage([ + 'src' => 'test.jpg', + 'href' => 'https://example.com', + ]); + $out = $element->render(); + expect($out)->toContain('