Add badge UI element

src/Form/Type/BadgeType.php

@@ -0,0 +1,51 @@
+<?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\SyliusMediaManagerPlugin\Form\Type\ImageType as MediaManagerImageType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+final class BadgeType 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' => true,
+                'constraints' => [
+                    new Assert\NotBlank(),
+                ],
+            ])
+            ->add('image', MediaManagerImageType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.image',
+                'required' => true,
+                'constraints' => [
+                    new Assert\NotBlank(),
+                ],
+            ])
+            ->add('link', LinkType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.link',
+                'required' => false,
+                'with_label' => false,
+                'attr' => [
+                    'class' => 'ui segment',
+                ],
+            ])
+        ;
+    }
+}

src/Form/Type/LinkType.php

@@ -16,6 +16,7 @@
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\Extension\Core\Type\UrlType;
 use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Validator\Constraints as Assert;
 
 class LinkType extends AbstractType
@@ -25,30 +26,35 @@ class LinkType extends AbstractType
     public const TYPE_EXTERNAL = 'external';
 
     /**
-     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      */
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
+        $linkConstraints = [
+            new Assert\AtLeastOneOf([
+                'includeInternalMessages' => false,
+                'message' => 'monsieurbiz_ui_elements.errors.not_valid_url',
+                'constraints' => [
+                    new Assert\Url(['protocols' => ['http', 'https'], 'relativeProtocol' => true]),
+                    new Assert\Regex(['pattern' => '`^(#|/.*)$`']),
+                ],
+            ]),
+        ];
+
+        if (true === $options['required']) {
+            $linkConstraints[] = new Assert\NotBlank();
+        }
+
         $builder
             ->add('link', UrlType::class, [
                 'label' => 'monsieurbiz_ui_elements.common.fields.link',
                 'required' => true,
-                'constraints' => [
-                    new Assert\AtLeastOneOf([
-                        'includeInternalMessages' => false,
-                        'message' => 'monsieurbiz_ui_elements.errors.not_valid_url',
-                        'constraints' => [
-                            new Assert\Url(['protocols' => ['http', 'https'], 'relativeProtocol' => true]),
-                            new Assert\Regex(['pattern' => '`^(#|/.*)$`']),
-                        ],
-                    ]),
-                    new Assert\NotBlank(),
-                ],
+                'constraints' => $linkConstraints,
             ])
             ->add('label', TextType::class, [
                 'label' => 'monsieurbiz_ui_elements.common.fields.label',
                 'required' => true,
-                'constraints' => [new Assert\NotBlank()],
+                'constraints' => $options['required'] ? [new Assert\NotBlank()] : [],
             ])
             ->add('type', ChoiceType::class, [
                 'label' => 'monsieurbiz_ui_elements.common.fields.link_type',
@@ -60,8 +66,20 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 'row_attr' => [
                     'class' => 'ui segment',
                 ],
-                'constraints' => [new Assert\NotBlank()],
+                'constraints' => $options['required'] ? [new Assert\NotBlank()] : [],
             ])
         ;
+
+        if (false === $options['with_label']) {
+            $builder->remove('label');
+        }
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'with_label' => true,
+        ]);
+        $resolver->setAllowedTypes('with_label', ['bool']);
     }
 }

src/Form/Type/UiElement/BadgesUiElementType.php

@@ -0,0 +1,58 @@
+<?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\BadgeType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+#[AsUiElement(
+    code: 'monsieurbiz_ui_elements.badges_ui_element',
+    icon: 'th',
+    title: 'monsieurbiz_ui_elements.ui_element.badges_ui_element.title',
+    description: 'monsieurbiz_ui_elements.ui_element.badges_ui_element.description',
+    templates: new TemplatesUiElement(
+        adminRender: '@MonsieurBizSyliusUiElementsPlugin/Admin/UiElement/badges_ui_element.html.twig',
+        frontRender: '@MonsieurBizSyliusUiElementsPlugin/Shop/UiElement/badges_ui_element.html.twig',
+    ),
+    wireframe: 'badges',
+    tags: [],
+)]
+class BadgesUiElementType extends AbstractType
+{
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('badges', CollectionType::class, [
+                'label' => 'monsieurbiz_ui_elements.ui_element.badges_ui_element.fields.badges',
+                'entry_type' => BadgeType::class,
+                'prototype_name' => '__badge__',
+                'allow_add' => true,
+                'allow_delete' => true,
+                'constraints' => [
+                    new Assert\Valid(),
+                    new Assert\Count(['min' => 1]),
+                ],
+                'attr' => [
+                    'class' => 'ui segment secondary collection--flex collection--flex-wide',
+                ],
+            ])
+        ;
+    }
+}

src/Form/Type/UiElement/FiguresUiElementType.php

@@ -43,6 +43,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             'button_add_label' => 'monsieurbiz_ui_elements.ui_element.figures_ui_element.buttons.add_element',
             'button_delete_label' => 'monsieurbiz_ui_elements.ui_element.figures_ui_element.buttons.delete_element',
             'entry_type' => FigureType::class,
+            'prototype_name' => '__figure__',
             'allow_add' => true,
             'allow_delete' => true,
             'constraints' => [new Assert\Valid()],

src/Form/Type/UiElement/LinksUiElementType.php

@@ -78,6 +78,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ])
             ->add('links', CollectionType::class, [
                 'label' => 'monsieurbiz_ui_elements.common.fields.links',
+                'prototype_name' => '__link__',
                 'entry_type' => LinkType::class,
                 'allow_add' => true,
                 'allow_delete' => true,

src/Form/Type/UiElement/LogosUiElementType.php

@@ -47,6 +47,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ->add('logos', CollectionType::class, [
                 'label' => 'monsieurbiz_ui_elements.common.fields.logos',
                 'entry_type' => ImageType::class,
+                'prototype_name' => '__logo__',
                 'allow_add' => true,
                 'allow_delete' => true,
                 'constraints' => [new Assert\Valid()],

src/Resources/config/images.yaml

@@ -8,3 +8,7 @@ liip_imagine:
             filters:
                 thumbnail: { size: [800, 800], mode: inset }
                 relative_resize: { widen: 600 }
+        monsieurbiz_sylius_ui_elements_badges:
+            filters:
+                thumbnail: { size: [600, 600], mode: inset }
+                relative_resize: { widen: 300 }

src/Resources/translations/messages.en.yaml

@@ -64,6 +64,8 @@ monsieurbiz_ui_elements:
             buttons:
                 add_element: "Add logo"
                 delete_element: "Delete logo"
-        header_ui_element:
-            title: "Header Element"
-            description: "Header with title and subtitle"
+        badges_ui_element:
+            title: "Badges Element"
+            description: "Collection of badges with image, title  and link"
+            fields:
+                badges: "Badges"

src/Resources/translations/messages.fr.yaml

@@ -64,6 +64,8 @@ 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"
+        badges_ui_element:
+            title: "Lame Badges"
+            description: "Ensemble de badges avec image, titre et lien"
+            fields:
+                badges: "Badges"

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

@@ -0,0 +1,49 @@
+{#
+UI Element template
+type: figures_ui_element
+element fields:
+    - badges
+        - title
+        - image
+        - link
+            - link
+            - type
+#}
+
+ {% if element.badges|default([])|length > 0 %}
+    {% set columns = 'four' %}
+    {% if element.badges|length == 3 %}
+        {% set columns = 'three' %}
+    {% endif %}
+    {% if element.badges|length == 2 %}
+        {% set columns = 'two' %}
+    {% endif %}
+    {% 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>
+{% endif %}