feat: layout test + update BO package

scss/layouts/_layout.scss

@@ -3,7 +3,7 @@
 $e: "#ua";
 
 #{$e} {
-  &__main {
+  &_main {
     display: flex;
     flex-direction: column;
     gap: 2rem;
@@ -12,26 +12,20 @@ $e: "#ua";
     container-name: ua-main;
   }
 
-  &__container {
+  &_container {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     padding: 4rem;
     background-color: var(--#{$ua-prefix}white);
   }
 
-  &__buttons {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  &__privacy {
+  &_privacy {
     text-align: center;
   }
 
   @container ua-main (max-width: 700px) {
-    &__container {
+    &_container {
       padding: 2rem;
     }
   }

storybook/package.json

@@ -6,7 +6,7 @@
         "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
         "@storybook/blocks": "^8.0.0",
         "@storybook/cli": "^8.0.0",
-        "prestashop-bo-themes": "PrestaShop/Prestashop-BO-themes-package",
+        "prestashop-bo-themes": "PrestaShop/Prestashop-BO-themes-package#main",
         "typescript": "^5.4.2",
         "webpack": "^5.90.3"
     },

storybook/stories/layouts/Layout.stories.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to [email protected] so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <[email protected]>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+import BaseLayout from "../../../views/templates/layouts/layout.html.twig";
+import Welcome from "./Welcome.stories";
+
+export default {
+  component: BaseLayout,
+  title: "Layouts/Pages/Layout test",
+  args: {
+    ...Welcome.args,
+    page: "welcome",
+  },
+};
+
+export const Default = {};

views/templates/layouts/layout.html.twig

@@ -0,0 +1,5 @@
+<div id="ua_app">
+  {% if page == "welcome" %}
+    {% include '@ModuleAutoUpgrade/layouts/welcome.html.twig' %}
+  {% endif %}
+</div>

views/templates/layouts/page.html.twig

@@ -1,13 +1,13 @@
 {% block update_assistant %}
-  <div id="ua__main">
+  <div id="ua_main">
     {% block stepper %}
-      <div id="ua__stepper">
+      <div id="ua_stepper">
         {% include '@ModuleAutoUpgrade/components/stepper.html.twig' %}
       </div>
     {% endblock %}
 
     {% block container %}
-      <div id="ua__container" class="{% block page_class %}default-page{% endblock %}">
+      <div id="ua_container" class="{% block page_class %}default-page{% endblock %}">
         {% block container_inner %}
           <div class="page__title">
             {% block title %}
@@ -44,7 +44,7 @@
     {% endblock %}
 
     {% block privacy %}
-      <div id="ua__privacy">
+      <div id="ua_privacy">
         {% include '@ModuleAutoUpgrade/components/privacy.html.twig' %}
       </div>
     {% endblock %}