feat: layout

tblivet · Aug 20, 2024 · 524b7e1 · 524b7e1
1 parent 9e52dc3
commit 524b7e1
Show file tree

Hide file tree

Showing 14 changed files with 180 additions and 6 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/scss/_layout.scss b/scss/_layout.scss
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
@@ -5,10 +5,17 @@ $e: ".btn";
 #{$ua-id} {
   #{$e} {
     display: inline-flex;
+    gap: 0.5rem;
     align-items: center;
+    font-weight: 500;
 
     .material-icons {
+      font-size: 1.25rem;
       line-height: 1;
     }
+
+    &-lg {
+      font-size: 1rem;
+    }
   }
 }
diff --git a/scss/layouts/_index.scss b/scss/layouts/_index.scss
@@ -0,0 +1,2 @@
+@use "layout";
+@use "welcome";
diff --git a/scss/layouts/_layout.scss b/scss/layouts/_layout.scss
@@ -0,0 +1,17 @@
+@use "../variables" as *;
+
+$e: "#ua";
+
+#{$e} {
+  &__main {
+    display: grid;
+    gap: 2rem;
+  }
+
+  &__container {
+    display: grid;
+    gap: 2rem;
+    padding: 4rem;
+    background-color: var(--#{$ua-prefix}white);
+  }
+}
diff --git a/scss/layouts/_welcome.scss b/scss/layouts/_welcome.scss
@@ -0,0 +1,9 @@
+@use "../variables" as *;
+
+$e: ".welcome-page";
+
+#{$ua-id} {
+  #{$e} {
+
+  }
+}
diff --git a/scss/styles.scss b/scss/styles.scss
@@ -1,5 +1,5 @@
 @use "components";
-@use "layout";
+@use "layouts";
 
 .upgradestep {
   padding-right: 5px;

diff --git a/storybook/stories/layouts/Page.stories.js b/storybook/stories/layouts/Page.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 PageLayout from "../../../views/templates/layouts/page.html.twig";
+import Stepper from "../components/Stepper.stories";
+
+export default {
+  title: "Layouts/Pages/Base", // Title for the Storybook category
+  component: PageLayout, // Default component
+  args: {
+    ...Stepper.args, // Default args spread from Stepper if needed
+  },
+};
+
+// Default story for PageLayout
+export const Default = {};
diff --git a/storybook/stories/layouts/Welcome.stories.js b/storybook/stories/layouts/Welcome.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 WelcomeLayout from "../../../views/templates/layouts/welcome.html.twig";
+import RadioCard from "../components/RadioCard.stories";
+
+export default {
+  title: "Layouts/Pages/Welcome", // Title for the Storybook category
+  component: WelcomeLayout, // Default component
+  args: {
+    ...RadioCard.args,
+  },
+};
+
+// Default story for PageLayout
+export const Default = {};
diff --git a/views/templates/components/render-bool.html.twig b/views/templates/components/render-bool.html.twig
@@ -1,4 +1,3 @@
-{# bool_field.html.twig #}
 {% extends '@ModuleAutoUpgrade/components/render-field.html.twig' %}
 
 {% block action_content %}

diff --git a/views/templates/components/render-select.html.twig b/views/templates/components/render-select.html.twig
@@ -1,4 +1,3 @@
-{# bool_field.html.twig #}
 {% extends '@ModuleAutoUpgrade/components/render-field.html.twig' %}
 
 {% block action_content %}

diff --git a/views/templates/layouts/page.html.twig b/views/templates/layouts/page.html.twig
@@ -0,0 +1,33 @@
+{% block update_assistant %}
+  <div id="ua__main">
+    {% block 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 %}">
+        {% block container_inner %}
+          <div class="page__title">
+            {% block title %}
+              {# Default title or leave empty for child templates to provide #}
+            {% endblock %}
+          </div>
+
+          <div class="page__content">
+            {% block content %}
+              {# Default content or leave empty for child templates to provide #}
+            {% endblock %}
+          </div>
+
+          <div class="page__buttons">
+            {% block buttons %}
+              {# Default buttons or leave empty for child templates to provide #}
+            {% endblock %}
+          </div>
+        {% endblock %}
+      </div>
+    {% endblock %}
+  </div>
+{% endblock %}
diff --git a/views/templates/layouts/welcome.html.twig b/views/templates/layouts/welcome.html.twig
@@ -0,0 +1,33 @@
+{% extends '@ModuleAutoUpgrade/layouts/page.html.twig' %}
+
+{% block stepper %}{% endblock %}
+
+{% block page_class %}welcome-page{% endblock %}
+
+{% block title %}
+  <h1>Welcome to PrestaShop Update Assistant</h1>
+{% endblock %}
+
+{% block content %}
+  {% include '@ModuleAutoUpgrade/components/radio-card.html.twig' with {
+    checked: true,
+    title: "Update your store",
+    message: "Update your store to benefit from the latest improvements, bug fixes and security patches.",
+    badgeLabel: "",
+    releaseNote: "",
+  } %}
+  {% include '@ModuleAutoUpgrade/components/radio-card.html.twig' with {
+    checked: true,
+    title: "Restore from a backup",
+    message: "Use this feature if the update failed or if your store or a  module is no longer working properly.",
+    disabled: true,
+    badgeLabel: "",
+    releaseNote: "",
+  } %}
+{% endblock %}
+
+{% block buttons %}
+  <button class="btn btn-lg btn-primary" type="button">
+    Get Started
+  </button>
+{% endblock %}