Add featured text ui element

monsieurbiz · Sep 4, 2024 · e4635d5 · e4635d5
1 parent 94aa3b3
commit e4635d5
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 54 deletions.
diff --git a/src/Form/Type/UiElement/FeaturedTextUiElementType.php b/src/Form/Type/UiElement/FeaturedTextUiElementType.php
@@ -0,0 +1,61 @@
+<?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\SyliusRichEditorPlugin\Form\Type\WysiwygType;
+use MonsieurBiz\SyliusRichEditorPlugin\WysiwygEditor\EditorInterface;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+#[AsUiElement(
+    code: 'monsieurbiz_ui_elements.featured_text_ui_element',
+    icon: 'font',
+    title: 'monsieurbiz_ui_elements.ui_element.featured_text_ui_element.title',
+    description: 'monsieurbiz_ui_elements.ui_element.featured_text_ui_element.description',
+    templates: new TemplatesUiElement(
+        adminRender: '@MonsieurBizSyliusUiElementsPlugin/Admin/UiElement/featured_text_ui_element.html.twig',
+        frontRender: '@MonsieurBizSyliusUiElementsPlugin/Shop/UiElement/featured_text_ui_element.html.twig',
+    ),
+    tags: [],
+    wireframe: 'featured-text',
+)]
+class FeaturedTextUiElementType extends AbstractType
+{
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('content', WysiwygType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.content',
+                'editor_height' => 120,
+                'editor_toolbar_type' => EditorInterface::TOOLBAR_TYPE_CUSTOM,
+                'editor_toolbar_buttons' => [
+                    ['undo', 'redo'],
+                    ['bold', 'underline', 'italic', 'strike'],
+                    ['fontColor', 'hiliteColor'],
+                    ['removeFormat'],
+                    ['link'],
+                    ['showBlocks', 'codeView'],
+                ],
+                'required' => true,
+                'constraints' => [
+                    new Assert\NotBlank(),
+                ],
+            ])
+        ;
+    }
+}
diff --git a/src/Form/Type/UiElement/IntroUiElementType.php b/src/Form/Type/UiElement/IntroUiElementType.php
@@ -21,7 +21,7 @@
 
 #[AsUiElement(
     code: 'monsieurbiz_ui_elements.intro_ui_element',
-    icon: 'indent',
+    icon: 'font',
     title: 'monsieurbiz_ui_elements.ui_element.intro_ui_element.title',
     description: 'monsieurbiz_ui_elements.ui_element.intro_ui_element.description',
     templates: new TemplatesUiElement(

diff --git a/src/Resources/translations/messages.en.yaml b/src/Resources/translations/messages.en.yaml
@@ -72,3 +72,6 @@ monsieurbiz_ui_elements:
         intro_ui_element:
             title: "Intro Element"
             description: "Introduction highlighted text"
+        featured_text_ui_element:
+            title: "Featured Text Element"
+            description: "Highlighted text with left stroke and larger text"
diff --git a/src/Resources/translations/messages.fr.yaml b/src/Resources/translations/messages.fr.yaml
@@ -71,4 +71,7 @@ monsieurbiz_ui_elements:
                 badges: "Badges"
         intro_ui_element:
             title: "Lame Intro"
-            description: "Texte d'introduction mis en avant"
+            description: "Texte d'introduction mis en avant avec un texte plus grand"
+        featured_text_ui_element:
+            title: "Lame texte mis en avant"
+            description: "Un texte mis en avant avec trait à gauche et un texte plus grand"
diff --git a/src/Resources/views/Admin/UiElement/badges_ui_element.html.twig b/src/Resources/views/Admin/UiElement/badges_ui_element.html.twig
@@ -10,7 +10,7 @@ element fields:
             - type
 #}
 
- {% if element.badges|default([])|length > 0 %}
+{% if element.badges|default([])|length > 0 %}
     {% set columns = 'four' %}
     {% if element.badges|length == 3 %}
         {% set columns = 'three' %}
@@ -21,29 +21,30 @@ element fields:
     {% if element.badges|length == 1 %}
         {% set columns = 'one' %}
     {% endif %}
-        <div class="ui grid stackable {{ columns }} columns" style="padding: 0 3vw;">
-            {% for badge in element.badges %}
-                {% set isExternalLink = (badge.link.type|default(null)) == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\LinkType::TYPE_EXTERNAL') %}
-                <div class="column">
-                    {% if badge.link.link|default(null) is not empty %}
-                        <a href="{{ badge.link.link }}" {% if isExternalLink %}target="_blank" rel="noopener noreferrer"{% endif %}>
-                    {% endif %}
-                        <div class="ui card">
-                            {% if badge.image|default(null) is not empty %}
-                                <div class="image">
-                                    <img src="{{ badge.image|imagine_filter('monsieurbiz_sylius_ui_elements_badges') }}">
-                                </div>
-                            {% endif %}
-                            {% if badge.title|default(null) is not empty %}
-                                <div class="content">
-                                    {{ badge.title|raw }}
-                                </div>
-                            {% endif %}
-                        </div>
-                    {% if badge.link.link|default(null) is not empty %}
-                        </a>
-                    {% endif %}
-                </div>
-            {% endfor %}
-        </div>
+    <div class="ui grid stackable {{ columns }} columns" style="padding: 0 3vw;">
+        {% for badge in element.badges %}
+            {% set isExternalLink = (badge.link.type|default(null)) == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\LinkType::TYPE_EXTERNAL') %}
+            <div class="column">
+                {% if badge.link.link|default(null) is not empty %}
+                    <a href="{{ badge.link.link }}" {% if isExternalLink %}target="_blank" rel="noopener noreferrer"{% endif %}>
+                {% endif %}
+                    <div class="ui card">
+                        {% if badge.image|default(null) is not empty %}
+                            <div class="image">
+                                <img src="{{ badge.image|imagine_filter('monsieurbiz_sylius_ui_elements_badges') }}">
+                            </div>
+                        {% endif %}
+                        {% if badge.title|default(null) is not empty %}
+                            <div class="content">
+                                {{ badge.title|raw }}
+                            </div>
+                        {% endif %}
+                    </div>
+                {% if badge.link.link|default(null) is not empty %}
+                    </a>
+                {% endif %}
+            </div>
+        {% endfor %}
+    </div>
+    <div class="ui divider hidden"></div>
 {% endif %}
diff --git a/src/Resources/views/Admin/UiElement/featured_text_ui_element.html.twig b/src/Resources/views/Admin/UiElement/featured_text_ui_element.html.twig
@@ -0,0 +1,10 @@
+{#
+UI Element template
+type: featured_text_ui_element
+element fields:
+    - content
+#}
+<div class="ui container" style="border-left: 4px solid black; padding-left: 10px">
+    {{ element.content|default('')|raw }}
+</div>
+<div class="ui divider hidden"></div>
diff --git a/src/Resources/views/Shop/UiElement/badges_ui_element.html.twig b/src/Resources/views/Shop/UiElement/badges_ui_element.html.twig
@@ -10,7 +10,7 @@ element fields:
             - type
 #}
 
- {% if element.badges|default([])|length > 0 %}
+{% if element.badges|default([])|length > 0 %}
     {% set columns = 'four' %}
     {% if element.badges|length == 3 %}
         {% set columns = 'three' %}
@@ -21,29 +21,30 @@ element fields:
     {% if element.badges|length == 1 %}
         {% set columns = 'one' %}
     {% endif %}
-        <div class="ui grid stackable {{ columns }} columns" style="padding: 0 3vw;">
-            {% for badge in element.badges %}
-                {% set isExternalLink = (badge.link.type|default(null)) == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\LinkType::TYPE_EXTERNAL') %}
-                <div class="column">
-                    {% if badge.link.link|default(null) is not empty %}
-                        <a href="{{ badge.link.link }}" {% if isExternalLink %}target="_blank" rel="noopener noreferrer"{% endif %}>
-                    {% endif %}
-                        <div class="ui card">
-                            {% if badge.image|default(null) is not empty %}
-                                <div class="image">
-                                    <img src="{{ badge.image|imagine_filter('monsieurbiz_sylius_ui_elements_badges') }}">
-                                </div>
-                            {% endif %}
-                            {% if badge.title|default(null) is not empty %}
-                                <div class="content">
-                                    {{ badge.title|raw }}
-                                </div>
-                            {% endif %}
-                        </div>
-                    {% if badge.link.link|default(null) is not empty %}
-                        </a>
-                    {% endif %}
-                </div>
-            {% endfor %}
-        </div>
+    <div class="ui grid stackable {{ columns }} columns" style="padding: 0 3vw;">
+        {% for badge in element.badges %}
+            {% set isExternalLink = (badge.link.type|default(null)) == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\LinkType::TYPE_EXTERNAL') %}
+            <div class="column">
+                {% if badge.link.link|default(null) is not empty %}
+                    <a href="{{ badge.link.link }}" {% if isExternalLink %}target="_blank" rel="noopener noreferrer"{% endif %}>
+                {% endif %}
+                    <div class="ui card">
+                        {% if badge.image|default(null) is not empty %}
+                            <div class="image">
+                                <img src="{{ badge.image|imagine_filter('monsieurbiz_sylius_ui_elements_badges') }}">
+                            </div>
+                        {% endif %}
+                        {% if badge.title|default(null) is not empty %}
+                            <div class="content">
+                                {{ badge.title|raw }}
+                            </div>
+                        {% endif %}
+                    </div>
+                {% if badge.link.link|default(null) is not empty %}
+                    </a>
+                {% endif %}
+            </div>
+        {% endfor %}
+    </div>
+    <div class="ui divider hidden"></div>
 {% endif %}
diff --git a/src/Resources/views/Shop/UiElement/featured_text_ui_element.html.twig b/src/Resources/views/Shop/UiElement/featured_text_ui_element.html.twig
@@ -0,0 +1,10 @@
+{#
+UI Element template
+type: featured_text_ui_element
+element fields:
+    - content
+#}
+<div class="ui container" style="border-left: 4px solid black; padding-left: 10px">
+    {{ element.content|default('')|raw }}
+</div>
+<div class="ui divider hidden"></div>
diff --git a/src/Resources/views/Wireframe/featured-text.svg.twig b/src/Resources/views/Wireframe/featured-text.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>