Op 249 style sulu templates in test app

features/show_featured_pages_on_homepage.feature

@@ -15,6 +15,6 @@ Feature: Show featured pages on homepage
     Scenario: See the featured pages on homepage
         When I visit this channel's homepage
         Then I should see 3 featured pages.
-        And I should see featured page "Blog Page 1"
+        And I should see featured page "Modern design trends in Europe"
         And I should see featured page "Blog Page 2"
-        And I should see featured page "Blog Page 3"
+        And I should see featured page "Shoe sizes tables of the World"

spec/Renderer/Block/SuluBlockRendererStrategySpec.php

@@ -22,9 +22,8 @@ class SuluBlockRendererStrategySpec extends ObjectBehavior
     function let(
         SuluBlockRenderStrategyInterface $blockRenderer1,
         SuluBlockRenderStrategyInterface $blockRenderer2,
-        LoggerInterface $logger
-    )
-    {
+        LoggerInterface $logger,
+    ) {
         $this->beConstructedWith([$blockRenderer1, $blockRenderer2], $logger);
     }
 

spec/Renderer/Page/SuluPageRendererStrategySpec.php

@@ -21,7 +21,7 @@ class SuluPageRendererStrategySpec extends ObjectBehavior
     function let(
         SuluPageRenderStrategyInterface $pageRenderer1,
         SuluPageRenderStrategyInterface $pageRenderer2,
-        LoggerInterface $logger
+        LoggerInterface $logger,
     ) {
         $this->beConstructedWith([$pageRenderer1, $pageRenderer2], $logger);
     }

tests/Application/assets/shop/entry.js

@@ -0,0 +1,2 @@
+import './scss/main.scss';
+import './img';

tests/Application/assets/shop/img/index.js

@@ -0,0 +1,4 @@
+import './a-fashionable-young-man-in-suit-walking-down-the-stiars.webp';
+import './fashion-magazines-on-table.webp';
+import './laughing-woman-in-yellowish-dress-on-stairs.webp';
+import './trench-coat-in-shopping-window.webp';

tests/Application/assets/shop/scss/helpers.scss

@@ -0,0 +1,20 @@
+.pl-0 {
+    padding-left: 0 !important;
+}
+
+.pr-0 {
+    padding-right: 0 !important;
+}
+
+.mb-15 {
+    margin-bottom: 15px !important;
+}
+
+.d-block {
+    display: block !important;
+}
+
+.text-15 {
+    font-size: 15px !important;
+    line-height: 1.8 !important;
+}

tests/Application/assets/shop/scss/main.scss

@@ -0,0 +1 @@
+@import "helpers";

tests/Application/templates/bundles/BitBagSyliusSuluPlugin/shop/page/featuredPages.html.twig

@@ -1,14 +1,39 @@
-<div class="ui three odd doubling cards">
+<div class="ui two stackable cards">
     {% for link in links %}
         <div class="ui fluid card" {{ sylius_test_html_attribute(link.content.title) }}>
-            <div class="ui">
-                <div class="title">
-                    <span>{{ link.content.title }}</span>
-                </div>
-                <div class="content">
-                    <div class="center">
-                       <span>{{ link.content.article|raw }}</span>
+            <div class="content ui padded grid">
+                {% set has_thumbnail = link.content.thumbnail_url is defined %}
+                {% if has_thumbnail %}
+                    <div class="six wide column pl-0">
+                        <a class="ui blurring dimmable image" href="{{ link.content.url }}">
+                            <div class="ui dimmer">
+                                <div class="content">
+                                    <div class="center">
+                                        <div class="ui inverted button">{{ 'sylius.ui.view_more'|trans }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            {% set alt = link.content.thumbnail_alt is defined ? link.content.thumbnail_alt : "" %}
+                            <img src="{{ asset(link.content.thumbnail_url, 'shop') }}"
+                                 alt="{{ alt }}" class="ui bordered image"/>
+                        </a>
                     </div>
+                {% endif %}
+                <div class="{% if has_thumbnail %} ten wide{% endif %} wide column pr-0">
+                    <a class="ui header d-block mb-15" href="{{ link.content.url }}">
+                        {% if link.content.excerpt_title != '' %}
+                            {{ link.content.excerpt_title }}
+                        {% else %}
+                            {{ link.content.title }}
+                        {% endif %}
+                    </a>
+                    <p class="text-15">
+                        {% if link.content.excerpt_description != '' %}
+                            {{ link.content.excerpt_description|raw }}
+                        {% else %}
+                            {{ link.content.article|raw }}
+                        {% endif %}
+                    </p>
                 </div>
             </div>
         </div>

tests/Application/templates/bundles/SyliusShopBundle/_styles.html.twig

@@ -1 +1,2 @@
 {{ encore_entry_link_tags('shop-entry', null, 'shop') }}
+{{ encore_entry_link_tags('test_app-entry', null, 'shop') }}

tests/Application/webpack.config.js

@@ -9,6 +9,7 @@ const uiBundleResources = path.resolve(syliusBundles, 'UiBundle/Resources/privat
 Encore
   .setOutputPath('public/build/shop/')
   .setPublicPath('/build/shop')
+  .addEntry('test_app-entry', './assets/shop/entry.js')
   .addEntry('shop-entry', '../../vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/private/entry.js')
   .disableSingleRuntimeChunk()
   .cleanupOutputBeforeBuild()

tests/Behat/ApiResponseMock/featured_pages.json

@@ -10,42 +10,46 @@
     "article": "<p>FeaturedPages</p>",
     "links": [
       {
-        "id": "6c0542ce-a3e9-449d-b684-783a2e7d38ae",
+        "id": "7c6acba2-d1b6-4985-96e2-b12db89b8414",
         "nodeType": 1,
         "type": "page",
         "template": "blog_page",
         "content": {
           "title": "Blog Page 1",
           "url": "/blog-page-1",
-          "article": "<p>Blog Page 1</p>",
-          "excerptTitle": "",
-          "excerptDescription": ""
+          "article": "Fashion in Europe <strong>encompass a minimalist approach</strong>, sustainable materials, and the use of natural light. Emphasizing functionality, elegance, and eco-friendly solutions, these trends prioritize harmonious, sleek interiors with an innovative design approach. European design trends showcase simplicity of form and a commitment to innovation.",
+          "excerpt_title": "Modern design trends in Europe",
+          "excerpt_description": "",
+          "thumbnail_url": "build/shop/images/a-fashionable-young-man-in-suit-walking-down-the-stiars.webp",
+          "thumbnail_alt": "Example thumbnail 2"
         },
         "view": {
           "title": [],
           "url": [],
           "article": [],
-          "excerptTitle": [],
-          "excerptDescription": []
+          "excerpt_title": [],
+          "excerpt_description": []
         },
-        "author": "1",
-        "authored": "2024-02-12T20:36:49+0000",
+        "author": 1,
+        "authored": "2024-02-12T20:35:45+0000",
         "changer": 1,
-        "changed": "2024-02-13T13:58:45+0000",
+        "changed": "2024-02-12T20:35:45+0000",
         "creator": 1,
-        "created": "2024-02-12T20:36:49+0000"
+        "created": "2024-02-12T20:35:45+0000"
       },
       {
-        "id": "7c6acba2-d1b6-4985-96e2-b12db89b8414",
+        "id": "7c6acba2-d1b6-4985-96e2-b12db89b8415",
         "nodeType": 1,
         "type": "page",
         "template": "blog_page",
         "content": {
           "title": "Blog Page 2",
           "url": "/blog-page-2",
-          "article": "<p>Blog Page 2</p>",
-          "excerptTitle": "",
-          "excerptDescription": ""
+          "article": "Winter is coming! So here is the problem: how to dress warm and look good at the same time?",
+          "excerpt_title": "",
+          "excerpt_description": "From layering techniques to the best fabric choices, this guide offers <strong>practical tips for creating fashionable winter looks</strong> without sacrificing comfort. Whether it's cozy sweaters, insulated boots, or fashionable outerwear, this guide covers everything you need to know to stay comfortable and chic in the winter.",
+          "thumbnail_url": "build/shop/images/fashion-magazines-on-table.webp",
+          "thumbnail_alt": "Example thumbnail 3"
         },
         "view": {
           "title": [],
@@ -62,30 +66,32 @@
         "created": "2024-02-12T20:35:45+0000"
       },
       {
-        "id": "7c6acba2-d1b6-4985-96e2-b12db89b8414",
+        "id": "6c0542ce-a3e9-449d-b684-783a2e7d38ae",
         "nodeType": 1,
         "type": "page",
         "template": "blog_page",
         "content": {
           "title": "Blog Page 3",
           "url": "/blog-page-3",
-          "article": "<p>Blog Page 3</p>",
-          "excerptTitle": "",
-          "excerptDescription": ""
+          "article": "Shoe size tables vary worldwide. Many countries use the metric system for shoe sizing, while others rely on the imperial system. It's important to consult a specific shoe size conversion chart when purchasing footwear internationally.",
+          "excerpt_title": "Shoe sizes tables of the World",
+          "excerpt_description": "Shoe size tables vary worldwide. Many countries use the metric system for shoe sizing, while others rely on the imperial system. It's important to consult a specific shoe size conversion chart when purchasing footwear internationally.",
+          "thumbnail_url": "build/shop/images/laughing-woman-in-yellowish-dress-on-stairs.webp",
+          "thumbnail_alt": "Example thumbnail 1"
         },
         "view": {
           "title": [],
           "url": [],
           "article": [],
-          "excerptTitle": [],
-          "excerptDescription": []
+          "excerpt_title": [],
+          "excerpt_description": []
         },
-        "author": 1,
-        "authored": "2024-02-12T20:35:45+0000",
+        "author": "1",
+        "authored": "2024-02-12T20:36:49+0000",
         "changer": 1,
-        "changed": "2024-02-12T20:35:45+0000",
+        "changed": "2024-02-13T13:58:45+0000",
         "creator": 1,
-        "created": "2024-02-12T20:35:45+0000"
+        "created": "2024-02-12T20:36:49+0000"
       }
     ],
     "blocks": []

tests/Behat/Context/Ui/SuluPageContext.php

@@ -44,7 +44,7 @@ public function iShouldSeeAFeaturedPage(string $pageTitle)
 
         /** @var NodeElement $page */
         foreach ($pages as $page) {
-            if ($page->find('css', 'span')?->getText() === $pageTitle) {
+            if ($page->find('css', 'div.ten.wide.wide.column.pr-0 > a')?->getText() === $pageTitle) {
                 return;
             }
         }