feat(ui-element): Add Badges Ui element

src/Form/Type/LinkType.php

@@ -24,31 +24,33 @@ class LinkType extends AbstractType
 
     public const TYPE_EXTERNAL = 'external';
 
-    /**
-     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
-     */
     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,7 +62,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 'row_attr' => [
                     'class' => 'ui segment',
                 ],
-                'constraints' => [new Assert\NotBlank()],
+                'constraints' => $options['required'] ? [new Assert\NotBlank()] : [],
             ])
         ;
     }

src/Form/Type/UiElement/BadgesUiElement/BadgeType.php

@@ -0,0 +1,52 @@
+<?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\BadgesUiElement;
+
+use MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\ImageType as MediaManagerImageType;
+use MonsieurBiz\SyliusUiElementsPlugin\Form\Type\LinkType;
+use MonsieurBiz\SyliusUiElementsPlugin\Form\Type\MinimalWysiwygType;
+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,
+                'attr' => [
+                    'class' => 'ui segment',
+                ],
+            ])
+        ;
+    }
+}

src/Form/Type/UiElement/BadgesUiElementType.php

@@ -0,0 +1,57 @@
+<?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\UiElement\BadgesUiElement\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,
+                'allow_add' => true,
+                'allow_delete' => true,
+                'constraints' => [
+                    new Assert\Valid(),
+                    new Assert\Count(['min' => 1, 'max' => 4]),
+                ],
+                'attr' => [
+                    'class' => 'ui segment secondary collection--flex collection--flex-wide',
+                ],
+            ])
+        ;
+    }
+}

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: [800, 800], mode: inset }
+                relative_resize: { widen: 600 }

src/Resources/translations/messages.en.yaml

@@ -67,3 +67,8 @@ monsieurbiz_ui_elements:
         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

@@ -67,3 +67,8 @@ monsieurbiz_ui_elements:
         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,33 @@
+{#
+UI Element template
+type: figures_ui_element
+element fields:
+    - badges
+        - figure
+        - description
+#}
+ {% if element.badges|default([])|length > 0 %}
+    <div class="ui link cards">
+        {% for badge in element.badges %}
+            <div class="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 %}
+                <div class="content">
+                    {{ badge.title|raw }}
+                </div>
+                {% if badge.link.link|default('') is not empty and badge.link.label|default('') is not empty %}
+                    <div class="extra content">
+                        {% if badge.link.type == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\LinkType::TYPE_EXTERNAL') %}
+                            <a style="display: block;" class="ui segment" href="{{ badge.link.link }}" target="_blank" rel="noopener noreferrer">{{ badge.link.label }} <i class="external alternate icon"></i></a>
+                        {% else %}
+                            <a style="display: block;"  class="ui segment" href="{{ badge.link.link }}">{{ badge.link.label }}</a>
+                        {% endif %}
+                    </div>
+                {% endif %}
+            </div>
+        {% endfor %}
+    </div>
+{% endif %}

src/Resources/views/Wireframe/badges.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>