feat: render fields + lint

package.json

@@ -8,8 +8,8 @@
   },
   "scripts": {
     "build": "npx prettier --write scss && sass --style compressed --source-map scss/styles.scss:css/styles.css",
-    "lint:scss": "npx stylelint scss/**/*.scss",
-    "lint-fix:scss": "npx stylelint --fix scss/**/*.scss",
+    "lint:scss": "npx stylelint 'scss/**/*.scss'",
+    "lint-fix:scss": "npx stylelint --fix 'scss/**/*.scss'",
     "prettier": "npx prettier --write scss",
     "prettier-check": "npx prettier --check scss",
     "watch": "sass --watch --style compressed --source-map scss/styles.scss:css/styles.css",

scss/_layout.scss

@@ -0,0 +1 @@
+// For later

scss/_mixins.scss

@@ -3,6 +3,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

scss/components/_alert.scss

@@ -38,14 +38,11 @@ $e: ".alert";
       gap: 0.5rem;
     }
 
-    &__action {
-      flex-shrink: 0;
-    }
-
     &__link {
       background-color: transparent;
       color: var(--#{$ua-prefix}base-text-color);
       text-decoration: none;
+      white-space: normal;
 
       &:hover {
         &.btn-info {

scss/components/form/_form.scss

@@ -12,18 +12,18 @@
   }
 
   label {
+    margin-block-end: 0.25rem;
     font-size: 0.875rem;
     font-weight: 500;
     line-height: 1.4;
-    margin-block-end: 0.25rem;
   }
 
   select {
-    appearance: none;
+    padding-inline-end: 2rem;
     background-image: url("../img/unfold_more.svg");
-    background-position: right 0.5rem center;
     background-repeat: no-repeat;
+    background-position: right 0.5rem center;
     background-size: 1.125rem 1.125rem;
-    padding-inline-end: 2rem;
+    appearance: none;
   }
 }

scss/components/form/_index.scss

@@ -1,2 +1,4 @@
 @use "form";
 @use "radio";
+@use "render-field";
+@use "switch";

scss/components/form/_radio.scss

@@ -9,10 +9,10 @@ $e: ".radio";
     --#{$ua-prefix}radio-checked-border-color: var(--#{$ua-prefix}primary);
     --#{$ua-prefix}radio-disabled-border-color: var(--#{$ua-prefix}disabled-color);
     position: relative;
-    margin: 0;
-    padding: 0;
     width: 1.25rem;
     height: 1.25rem;
+    padding: 0;
+    margin: 0;
     background: transparent;
     background-clip: content-box;
     border: 0.125rem solid var(--#{$ua-prefix}radio-border-color);

scss/components/form/_render-field.scss

@@ -0,0 +1,44 @@
+@use "../../variables" as *;
+
+$e: ".render-field";
+
+#{$ua-id} {
+  #{$e} {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: flex-start;
+    padding-block-end: 1rem;
+    margin-block-end: 1rem;
+    border-block-end: 0.0625rem solid var(--#{$ua-prefix}border-color);
+    container-type: inline-size;
+    container-name: render-field;
+
+    &__title {
+      margin-block-end: 0;
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1.4;
+    }
+
+    &__desc {
+      margin-block-end: 0;
+      font-size: 0.875rem;
+      line-height: 1.4;
+    }
+
+    &__infos {
+      display: flex;
+      flex-basis: 0;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: 0.25rem;
+    }
+
+    @container render-field (max-width: 400px) {
+      #{$e}__infos {
+        flex-basis: 100%;
+      }
+    }
+  }
+}

scss/components/form/_switch.scss

@@ -0,0 +1,77 @@
+@use "../../variables" as *;
+
+$e: ".prestashop-switch";
+
+#{$ua-id} {
+  #{$e} {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    margin: 0;
+    background-color: transparent;
+    box-shadow: none;
+
+    // Custom switch ugly harmonization
+    input {
+      inset: 0;
+      z-index: 1;
+      margin: 0;
+      cursor: pointer;
+
+      &:checked {
+        z-index: 0;
+      }
+
+      &:first-of-type:checked ~ label:first-of-type {
+        display: block;
+      }
+
+      &:last-of-type:checked ~ label:last-of-type {
+        display: block;
+      }
+
+      &:first-of-type:checked ~ .slide-button::after {
+        transform: translateX(0.875rem);
+      }
+    }
+
+    label {
+      position: static;
+      inset: auto;
+      display: none;
+      height: auto;
+      padding: 0;
+      margin: 0;
+      font-weight: 500;
+      color: var(--#{$ua-prefix}base-text-color);
+      pointer-events: none;
+      transform: none;
+    }
+
+    .slide-button {
+      position: relative;
+      inset: auto;
+      z-index: 0;
+      display: block;
+      flex-shrink: 0;
+      width: 2.25rem;
+      height: 1.375rem;
+      padding: 0.5rem 1rem;
+      border: none;
+      border-radius: 999px;
+      transform: none;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0.125rem;
+        left: 0.125rem;
+        width: 1.125rem;
+        height: 1.125rem;
+        background: var(--#{$ua-prefix}white);
+        border-radius: 999px;
+        transform: none;
+      }
+    }
+  }
+}

scss/styles.scss

@@ -2,87 +2,109 @@
 @use "layout";
 
 .upgradestep {
-  margin-right: 5px;
-  padding-left: 10px;
   padding-right: 5px;
+  padding-left: 10px;
+  margin-right: 5px;
 }
+
 .processing {
-  border: 2px outset gray;
   margin-top: 1px;
   overflow: auto;
+  border: 2px outset gray;
 }
+
 #infoStep {
   height: 100px;
 }
+
 #infoError {
   height: 100px;
 }
+
 #quickInfo {
   height: 200px;
 }
+
 #errorDuringUpgrade {
   color: #cc0000;
 }
+
 #checkPrestaShopFilesVersion,
 #checkPrestaShopModifiedFiles {
   margin-bottom: 20px;
 }
+
 .changedFileList {
-  margin-left: 20px;
   padding-left: 5px;
+  margin-left: 20px;
 }
+
 .changedNotice li {
   color: gray;
 }
+
 .changedImportant li {
+  font-weight: 700;
   color: red;
-  font-weight: bold;
 }
+
 .upgradeDbError {
   background-color: #feefb3;
 }
+
 .upgradeDbOk {
   background-color: #dff2bf;
 }
+
 .small_label {
-  font-weight: normal;
-  width: 300px;
   float: none;
-  text-align: left;
+  width: 300px;
   padding: 0;
+  font-weight: 400;
+  text-align: left;
 }
+
 .ocu-feature-list {
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style: none;
 }
+
 .ocu-feature-list li {
-  background: url(../img/admin/enabled.gif) no-repeat;
   padding-left: 20px;
   margin: 0;
+  background: url("../img/admin/enabled.gif") no-repeat;
 }
+
 .label-small {
   width: 130px;
 }
+
 .margin-form-small {
   padding: 0 0 1em 130px;
 }
+
 .nextStep {
-  font-weight: bold;
+  font-weight: 700;
 }
+
 #diffList,
 #changedList {
   margin-top: 20px;
 }
+
 #autoupgradePhpWarningMainIcon {
   font-size: 3em;
 }
+
 #autoupgradePhpWarn .icon-stack-text {
   color: white;
 }
+
 .panel-heading {
   text-transform: uppercase;
 }
+
 .required {
   color: #cc0000;
 }

storybook/stories/components/RenderBool.stories.js

@@ -0,0 +1,56 @@
+/**
+ * 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 RenderBool from "../../../views/templates/components/render-bool.html.twig";
+
+export default {
+  title: "Components/Render Fields/RenderBool",
+  component: RenderBool,
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['disabled', 'bool', 'radio', 'select', 'textarea', 'container', 'container_end', 'text'],
+      defaultValue: 'bool',
+    },
+  },
+  args: {
+    field: {
+      id: "deactivate_modules",
+      title: "Deactivate non-native modules",
+      desc: "All the modules installed after creating your store are considered non-native modules. They might be incompatible with the new version of PrestaShop. We recommend deactivating them during the update.",
+      js: {
+        on: 'onclick="enableFeature()"',
+        off: 'onclick="disableFeature()"',
+      },
+      type: 'bool',
+      required: true,
+      disabled: true,
+    },
+    key: "PS_AUTOUP_CUSTOM_MOD_DESACT",
+    val: true,
+  },
+};
+
+export const Default = {};