Add Header UI element

src/Form/Type/MinimalWysiwygType.php

@@ -0,0 +1,32 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz's SyliusUiElementsPlugin for Sylius.
+ * (c) Monsieur Biz <[email protected]>
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusUiElementsPlugin\Form\Type;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\WysiwygType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+final class MinimalWysiwygType extends AbstractType
+{
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        parent::configureOptions($resolver);
+        $resolver->setDefault('editor_toolbar_type', 'custom');
+        $resolver->setDefault('editor_toolbar_buttons', [['bold', 'underline', 'italic', 'strike']]);
+        $resolver->setDefault('editor_height', 10);
+    }
+
+    public function getParent(): string
+    {
+        return WysiwygType::class;
+    }
+}

src/Form/Type/UiElement/HeaderUiElementType.php

@@ -0,0 +1,48 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz's SyliusUiElementsPlugin for Sylius.
+ * (c) Monsieur Biz <[email protected]>
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusUiElementsPlugin\Form\Type\UiElement;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Attribute\AsUiElement;
+use MonsieurBiz\SyliusRichEditorPlugin\Attribute\TemplatesUiElement;
+use MonsieurBiz\SyliusUiElementsPlugin\Form\Type\MinimalWysiwygType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+#[AsUiElement(
+    code: 'monsieurbiz_ui_elements.header_ui_element',
+    icon: 'heading',
+    title: 'monsieurbiz_ui_elements.ui_element.header_ui_element.title',
+    description: 'monsieurbiz_ui_elements.ui_element.header_ui_element.description',
+    templates: new TemplatesUiElement(
+        adminRender: '@MonsieurBizSyliusUiElementsPlugin/Admin/UiElement/header_ui_element.html.twig',
+        frontRender: '@MonsieurBizSyliusUiElementsPlugin/Shop/UiElement/header_ui_element.html.twig',
+    ),
+    wireframe: 'header',
+    tags: [],
+)]
+class HeaderUiElementType extends AbstractType
+{
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder->add('title', MinimalWysiwygType::class, [
+            'label' => 'monsieurbiz_ui_elements.common.fields.title',
+            'required' => false,
+        ]);
+        $builder->add('description', MinimalWysiwygType::class, [
+            'label' => 'monsieurbiz_ui_elements.common.fields.subtitle',
+            'required' => false,
+        ]);
+    }
+}

src/Resources/translations/messages.en.yaml

@@ -64,3 +64,6 @@ monsieurbiz_ui_elements:
             buttons:
                 add_element: "Add logo"
                 delete_element: "Delete logo"
+        header_ui_element:
+            title: "Header Element"
+            description: "Header with title and subtitle"

src/Resources/translations/messages.fr.yaml

@@ -64,3 +64,6 @@ monsieurbiz_ui_elements:
             buttons:
                 add_element: "Ajouter un logo"
                 delete_element: "Supprimer un logo"
+        header_ui_element:
+            title: "Lame En-tête"
+            description: "En-tête de page avec titre et description"

src/Resources/views/Admin/UiElement/header_ui_element.html.twig

@@ -0,0 +1,13 @@
+{#
+UI Element template
+type: header_ui_element
+element fields:
+    - title
+    - description
+#}
+{% if element.title|default('') is not empty %}
+    <h1 >{{ element.title|raw }}</h1>
+{% endif %}
+{% if element.description|default('') is not empty %}
+    {{ element.description|raw }}
+{% endif %}

src/Resources/views/Shop/UiElement/header_ui_element.html.twig

@@ -0,0 +1,13 @@
+{#
+UI Element template
+type: header_ui_element
+element fields:
+    - title
+    - description
+#}
+{% if element.title|default('') is not empty %}
+    <h1 >{{ element.title|raw }}</h1>
+{% endif %}
+{% if element.description|default('') is not empty %}
+    {{ element.description|raw }}
+{% endif %}

src/Resources/views/Wireframe/header.svg.twig

@@ -0,0 +1,3 @@
+<svg width="230" height="100" viewBox="0 0 230 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="230" height="100" rx="5" fill="#7A8CCE" fill-opacity="0.1"></rect>
+</svg>