feat: rework render bool

tblivet · Sep 23, 2024 · 56d88d1 · 56d88d1
1 parent 22ef1fc
commit 56d88d1
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 113 deletions.
diff --git a/_dev/src/scss/_variables.scss b/_dev/src/scss/_variables.scss
@@ -47,6 +47,7 @@ $cdk-prefix: "cdk-";
     --#{$cdk-prefix}font-family-material-icons,
     "Material Icons"
   );
+  --#{$ua-prefix}default-transition-duration: var(--#{$cdk-prefix}default-transition-duration, 0.15s);
 }
 
 /* 1.7.8.0 */

diff --git a/_dev/src/scss/components/form/_switch.scss b/_dev/src/scss/components/form/_switch.scss
@@ -1,76 +1,92 @@
 @use "../../variables" as *;
 
-$e: ".prestashop-switch";
+$e: ".ua-switch";
 
 #{$ua-id} {
   #{$e} {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    margin: 0;
-    background-color: transparent;
-    box-shadow: none;
+    --#{$ua-prefix}switch-background-color: var(--#{$ua-prefix}primary-700);
+    --#{$ua-prefix}switch-checked-background-color: var(--#{$ua-prefix}green-500);
+    --#{$ua-prefix}switch-outline-color: var(--#{$ua-prefix}blue-500);
+    position: relative;
 
-    // Custom switch ugly harmonization
-    input {
-      inset: 0;
-      z-index: 1;
+    &__label {
+      display: flex;
+      flex-direction: row-reverse;
+      gap: 1rem;
+      align-items: center;
       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);
+      &:active {
+        #{$e}__slider {
+          outline: 2px solid var(--#{$ua-prefix}switch-outline-color);
+        }
       }
     }
-
-    label {
-      position: static;
-      inset: auto;
+
+    &__yes {
       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 {
+    &__no {
+      display: flex;
+    }
+
+    &__slider {
       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;
+      height: 1.25rem;
+      background-color: var(--#{$ua-prefix}switch-background-color);
+      border-radius: 0.625rem;
+      cursor: pointer;
+      transition: background-color var(--#{$ua-prefix}default-transition-duration);
 
-      &::after {
+      &::before {
         content: "";
         position: absolute;
-        top: 0.125rem;
+        bottom: 0.125rem;
         left: 0.125rem;
-        width: 1.125rem;
-        height: 1.125rem;
-        background: var(--#{$ua-prefix}white);
-        border-radius: 999px;
-        transform: none;
+        width: 1rem;
+        height: 1rem;
+        background-color: var(--#{$ua-prefix}white);
+        border-radius: 50%;
+        transition: transform var(--#{$ua-prefix}default-transition-duration);
+      }
+    }
+
+    &__input {
+      position: absolute;
+      width: 0;
+      height: 0;
+
+      &:checked {
+        + #{$e}__label {
+          #{$e}__slider {
+            background-color: var(--#{$ua-prefix}switch-checked-background-color);
+
+            &::before {
+              transform: translateX(1rem);
+            }
+          }
+
+          #{$e}__yes {
+            display: flex;
+          }
+
+          #{$e}__no {
+            display: none;
+          }
+        }
+      }
+
+      &:active,
+      &:focus,
+      &:focus-visible {
+        + #{$e}__label {
+          #{$e}__slider {
+            outline: 2px solid var(--#{$ua-prefix}switch-outline-color);
+          }
+        }
       }
     }
   }

diff --git a/storybook/stories/components/RenderBool.stories.js b/storybook/stories/components/RenderBool.stories.js
@@ -31,7 +31,16 @@ export default {
   argTypes: {
     type: {
       control: 'select',
-      options: ['disabled', 'bool', 'radio', 'select', 'textarea', 'container', 'container_end', 'text'],
+      options: [
+        "disabled",
+        "bool",
+        "radio",
+        "select",
+        "textarea",
+        "container",
+        "container_end",
+        "text",
+      ],
       defaultValue: 'bool',
     },
   },
@@ -40,15 +49,12 @@ export default {
       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",
+    BoolName: "PS_AUTOUP_CUSTOM_MOD_DESACT",
+    BoolId: "PS_AUTOUP_CUSTOM_MOD_DESACT",
     val: true,
   },
 };

diff --git a/views/templates/components/render-bool.html.twig b/views/templates/components/render-bool.html.twig
@@ -1,31 +1,25 @@
 {% extends "@ModuleAutoUpgrade/components/render-field.html.twig" %}
 
 {% block action_content %}
-  <span class="render-field__switch switch prestashop-switch">
-    <input
-      type="radio"
-      name="{{ key }}"
-      id="{{ key }}_on"
-      {{ val ? 'checked="checked"' }}
-      {{ field.js.on|raw|default("") }}
-      value="1"
-    />
-    <label for="{{ key }}_on" class="radioCheck">
-      <i class="color_success"></i>
-      {{ 'Yes'|trans }}
-    </label>
-    <input
-      type="radio"
-      name="{{ key }}"
-      id="{{ key }}_off"
-      {{ not val ? 'checked="checked"' }}
-      {{ field.js.off|raw|default("") }}
-      value="0"
-    />
-    <label for="{{ key }}_off" class="radioCheck">
-      <i class="color_danger"></i>
-      {{ 'No'|trans }}
-    </label>
-    <a class="slide-button btn"></a>
-  </span>
+  <div class="render-field__switch">
+    <span class="ua-switch">
+      <input
+        class="ua-switch__input"
+        type="checkbox"
+        name="{{ BoolName }}"
+        id="{{ BoolId }}"
+        {{ val ? 'checked' : '' }}
+      />
+
+      <label for="{{ BoolId }}" class="ua-switch__label">
+        <span class="ua-switch__slider"></span>
+        <span class="ua-switch__yes">
+          {{ 'Yes'|trans }}
+        </span>
+        <span class="ua-switch__no">
+          {{ 'No'|trans }}
+        </span>
+      </label>
+    </span>
+  </div>
 {% endblock %}
diff --git a/views/templates/components/render-select.html.twig b/views/templates/components/render-select.html.twig
@@ -1,13 +1,13 @@
 {% extends "@ModuleAutoUpgrade/components/render-field.html.twig" %}
 
 {% block action_content %}
-  <span class="render-field__select">
+  <div class="render-field__select">
     <select name="{{ key }}">
       {% for cValue, cKey in field.choices %}
         <option value="{{ cValue|default(0) }}" {{ cValue == val ? 'selected' : '' }}>
           {{ cKey }}
         </option>
       {% endfor %}
     </select>
-  </span>
+  </div>
 {% endblock %}
diff --git a/views/templates/steps/backup.html.twig b/views/templates/steps/backup.html.twig
@@ -20,15 +20,12 @@
           id: "backup_files_db",
           title: "Back up files and database",
           desc: "",
-          js: {
-            on: 'onclick="enableFeature()"',
-            off: 'onclick="disableFeature()"',
-          },
           type: 'bool',
           required: true,
           disabled: true,
         },
-        key: "PS_AUTOUP_BACKUP_FILES_DB",
+        BoolName: "PS_AUTOUP_BACKUP_FILES_DB",
+        BoolId: "PS_AUTOUP_BACKUP_FILES_DB",
         val: true,
       } %}
 
@@ -37,15 +34,12 @@
           id: "backup_files_db",
           title: "Include images",
           desc: "",
-          js: {
-            on: 'onclick="enableFeature()"',
-            off: 'onclick="disableFeature()"',
-          },
           type: 'bool',
           required: true,
           disabled: true,
         },
-        key: "PS_AUTOUP_BACKUP_WITH_IMAGES",
+        BoolName: "PS_AUTOUP_BACKUP_WITH_IMAGES",
+        BoolId: "PS_AUTOUP_BACKUP_WITH_IMAGES",
         val: false,
       } %}
     </div>

diff --git a/views/templates/steps/update-options.html.twig b/views/templates/steps/update-options.html.twig
@@ -14,15 +14,12 @@
         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",
+      BoolName: "PS_AUTOUP_CUSTOM_MOD_DESACT",
+      BoolId: "PS_AUTOUP_CUSTOM_MOD_DESACT",
       val: true
     } %}
 
@@ -31,15 +28,12 @@
         id: "regen_email",
         title: "Regenerate email templates",
         desc: "If you've customized email templates, your changes will be lost if you activate this option.",
-        js: {
-          on: 'onclick="enableFeature()"',
-          off: 'onclick="disableFeature()"'
-        },
         type: 'bool',
         required: true,
         disabled: true
       },
-      key: "PS_AUTOUP_REGEN_EMAIL",
+      BoolName: "PS_AUTOUP_REGEN_EMAIL",
+      BoolId: "PS_AUTOUP_REGEN_EMAIL",
       val: true
     } %}
 
@@ -69,15 +63,12 @@
         desc: "Overriding is a way to replace business behaviors (class files and controller files) to target only " ~
           "one method or as many as you need. This option disables all classes & controllers overrides, allowing " ~
           "you to avoid conflicts during and after updates.",
-        js: {
-          on: 'onclick="enableFeature()"',
-          off: 'onclick="disableFeature()"'
-        },
         type: 'bool',
         required: true,
         disabled: true
       },
-      key: "PS_AUTOUP_DISABLE_OVERRIDE",
+      BoolName: "PS_AUTOUP_DISABLE_OVERRIDE",
+      BoolId: "PS_AUTOUP_DISABLE_OVERRIDE",
       val: false
     } %}
   </div>