Skip to content

Implement mj-accordion components #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 3, 2025
Merged

Implement mj-accordion components #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 178 additions & 0 deletions src/Elements/BodyComponents/MjAccordion.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
<?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\BodyComponents;

use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;

/**
* Mjml Accordion Element
*
* Accordion is an interactive component to stack content in tabs,
* so the information is collapsed and only the titles are visible.
*
* @link https://documentation.mjml.io/#mj-accordion
*
* @since 1.0.0
*/
class MjAccordion extends AbstractElement
{
public const string TAG_NAME = 'mj-accordion';

public const bool ENDING_TAG = false;

/**
* List of allowed attributes on the element
*
* @var array<string, array<string, string>>
*/
protected array $allowedAttributes = [
'border' => [
'unit' => 'string',
'type' => 'string',
'description' => 'border',
'default_value' => '2px solid black',
],
'container-background-color' => [
'unit' => 'color',
'type' => 'color',
'description' => 'background color of the cell',
'default_value' => '',
],
'css-class' => [
'unit' => 'string',
'type' => 'string',
'description' => 'class name added to root HTML element',
'default_value' => '',
],
'font-family' => [
'unit' => 'string',
'type' => 'string',
'description' => 'font family',
'default_value' => 'Ubuntu, Helvetica, Arial, sans-serif',
],
'icon-align' => [
'unit' => 'string',
'type' => 'string',
'description' => 'icon alignment (top/middle/bottom)',
'default_value' => 'middle',
],
'icon-height' => [
'unit' => 'px',
'type' => 'string',
'description' => 'icon height',
'default_value' => '32px',
],
'icon-position' => [
'unit' => 'string',
'type' => 'string',
'description' => 'icon position (left/right)',
'default_value' => 'right',
],
'icon-unwrapped-url' => [
'unit' => 'string',
'type' => 'string',
'description' => 'icon when accordion is unwrapped',
'default_value' => 'https://i.imgur.com/bIXv1bk.png',
],
'icon-wrapped-url' => [
'unit' => 'string',
'type' => 'string',
'description' => 'icon when accordion is wrapped',
'default_value' => 'https://i.imgur.com/w4uTygT.png',
],
'icon-width' => [
'unit' => 'px',
'type' => 'string',
'description' => 'icon width',
'default_value' => '32px',
],
'padding' => [
'unit' => 'px',
'type' => 'string',
'description' => 'supports up to 4 parameters',
'default_value' => '10px 25px',
],
'padding-bottom' => [
'unit' => 'px',
'type' => 'measure',
'description' => 'bottom offset',
'default_value' => '',
],
'padding-left' => [
'unit' => 'px',
'type' => 'measure',
'description' => 'left offset',
'default_value' => '',
],
'padding-right' => [
'unit' => 'px',
'type' => 'measure',
'description' => 'right offset',
'default_value' => '',
],
'padding-top' => [
'unit' => 'px',
'type' => 'measure',
'description' => 'top offset',
'default_value' => '',
],
];

protected array $defaultAttributes = [
'border' => '2px solid black',
'font-family' => 'Ubuntu, Helvetica, Arial, sans-serif',
'icon-align' => 'middle',
'icon-height' => '32px',
'icon-position' => 'right',
'icon-unwrapped-url' => 'https://i.imgur.com/bIXv1bk.png',
'icon-wrapped-url' => 'https://i.imgur.com/w4uTygT.png',
'icon-width' => '32px',
'padding' => '10px 25px',
];

public function render(): string
{
$children = $this->getChildren() ?? [];
$content = $this->renderChildren($children, []);

return $content;
}

/**
* Gets the context for child elements.
*
* @return array<string, mixed>
*/
public function getChildContext(): array
{
return [
...$this->context,
'border' => $this->getAttribute('border'),
'font-family' => $this->getAttribute('font-family'),
'icon-align' => $this->getAttribute('icon-align'),
'icon-height' => $this->getAttribute('icon-height'),
'icon-position' => $this->getAttribute('icon-position'),
'icon-unwrapped-url' => $this->getAttribute('icon-unwrapped-url'),
'icon-wrapped-url' => $this->getAttribute('icon-wrapped-url'),
'icon-width' => $this->getAttribute('icon-width'),
];
}

/**
* @return array<string, array<string, string>>
*/
public function getStyles(): array
{
return [];
}
}
158 changes: 158 additions & 0 deletions src/Elements/BodyComponents/MjAccordionElement.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
<?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\BodyComponents;

use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;

/**
* Mjml Accordion Element
*
* Individual accordion item that contains title and text.
*
* @link https://documentation.mjml.io/#mj-accordion-element
*
* @since 1.0.0
*/
class MjAccordionElement extends AbstractElement
{
public const string TAG_NAME = 'mj-accordion-element';

public const bool ENDING_TAG = false;

/**
* List of allowed attributes on the element
*
* @var array<string, array<string, string>>
*/
protected array $allowedAttributes = [
'background-color' => [
'unit' => 'color',
'type' => 'color',
'description' => 'background color',
'default_value' => '',
],
'border' => [
'unit' => 'string',
'type' => 'string',
'description' => 'border',
'default_value' => '',
],
'css-class' => [
'unit' => 'string',
'type' => 'string',
'description' => 'class name added to root HTML element',
'default_value' => '',
],
'font-family' => [
'unit' => 'string',
'type' => 'string',
'description' => 'font family',
'default_value' => '',
],
'icon-align' => [
'unit' => 'string',
'type' => 'string',
'description' => 'icon alignment (top/middle/bottom)',
'default_value' => '',
],
'icon-height' => [
'unit' => 'px',
'type' => 'string',
'description' => 'icon height',
'default_value' => '',
],
'icon-position' => [
'unit' => 'string',
'type' => 'string',
'description' => 'icon position (left/right)',
'default_value' => '',
],
'icon-unwrapped-url' => [
'unit' => 'string',
'type' => 'string',
'description' => 'icon when accordion is unwrapped',
'default_value' => '',
],
'icon-wrapped-url' => [
'unit' => 'string',
'type' => 'string',
'description' => 'icon when accordion is wrapped',
'default_value' => '',
],
'icon-width' => [
'unit' => 'px',
'type' => 'string',
'description' => 'icon width',
'default_value' => '',
],
];

protected array $defaultAttributes = [];

public function render(): string
{
$divAttributes = $this->getHtmlAttributes([
'class' => $this->getAttribute('css-class'),
'style' => 'div',
]);

$children = $this->getChildren() ?? [];
$content = $this->renderChildren($children, []);

return "<div $divAttributes>$content</div>";
}

/**
* Gets the context for child elements.
*
* @return array<string, mixed>
*/
public function getChildContext(): array
{
$fontFamily = $this->getAttribute('font-family') ?:
$this->context['font-family'] ?? 'Ubuntu, Helvetica, Arial, sans-serif';

return [
...$this->context,
'background-color' => $this->getAttribute('background-color') ?:
$this->context['background-color'] ?? '',
'border' => $this->getAttribute('border') ?: $this->context['border'] ?? '',
'font-family' => $fontFamily,
'icon-align' => $this->getAttribute('icon-align') ?:
$this->context['icon-align'] ?? 'middle',
'icon-height' => $this->getAttribute('icon-height') ?:
$this->context['icon-height'] ?? '32px',
'icon-position' => $this->getAttribute('icon-position') ?:
$this->context['icon-position'] ?? 'right',
'icon-unwrapped-url' => $this->getAttribute('icon-unwrapped-url') ?:
$this->context['icon-unwrapped-url'] ?? '',
'icon-wrapped-url' => $this->getAttribute('icon-wrapped-url') ?:
$this->context['icon-wrapped-url'] ?? '',
'icon-width' => $this->getAttribute('icon-width') ?:
$this->context['icon-width'] ?? '32px',
];
}

/**
* @return array<string, array<string, string>>
*/
public function getStyles(): array
{
return [
'div' => [
'background-color' => $this->getAttribute('background-color'),
'border' => $this->getAttribute('border'),
],
];
}
}
Loading