[IMPROVEMENTS - PART 1] Global quality improvement

.github/workflows/lint.yml

@@ -1,8 +1,8 @@
 name: Lint
 on: [ push, pull_request ]
 jobs:
-  stylelint:
-    name: SCSS Lint
+  stylelint_prettier:
+    name: Stylelint & Prettier
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -11,9 +11,26 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 20
+
+      # Install project dependencies
+      - name: Install dependencies
+        run: npm ci
 
-      - name: Lint scss
-        run: npm ci && npm run scss-lint
+      # Run Prettier check command
+      - name: Run Prettier check
+        run: |
+          npm run prettier || {
+            echo "::error::Prettier check failed. Run 'npm run prettier:fix' to format your code."
+            exit 1
+          }
+
+      # Run Stylelint check command
+      - name: Run Stylelint check
+        run: |
+          npm run stylelint || {
+            echo "::error::Stylelint check failed. Run 'npm run stylelint:fix' to autofix issues."
+            exit 1
+          }
   eslint:
     name: ESLint
     runs-on: ubuntu-latest

.prettierrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  overrides: [
+    {
+      files: "*.scss",
+      options: {
+        printWidth: 100,
+        tabWidth: 2,
+        useTabs: false,
+        singleQuote: false,
+        bracketSpacing: true,
+        parser: "scss",
+      },
+    },
+  ],
+};

.stylelintrc

@@ -4,16 +4,20 @@
   ],
   "customSyntax": "postcss-scss",
   "rules": {
+    "declaration-colon-newline-after": null,
+    "function-disallowed-list": null,
+    "property-disallowed-list": null,
+    "selector-class-pattern": null,
     "selector-id-pattern": null,
-    "selector-max-id": null,
     "selector-max-class": null,
-    "selector-max-type": null,
+    "selector-max-combinators": null,
     "selector-max-compound-selectors": null,
+    "selector-max-id": null,
+    "selector-max-type": null,
     "selector-no-qualifying-type": null,
-    "selector-max-combinators": null,
-    "selector-class-pattern": null,
-    "function-disallowed-list": null,
+    "value-list-comma-newline-after": null,
+    "value-list-comma-space-after": null,
     "scss/dollar-variable-default": null,
-    "property-disallowed-list": null
+    "scss/operator-no-newline-after": null
   }
 }

modules/ps_contactinfo/nav.tpl

@@ -2,8 +2,9 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
-<div id="_desktop_contact_link">
-  <div id="contact-link" class="contact-link">
+
+<div id="_desktop_ps_contactinfo">
+  <div class="ps-contactinfo">
     {if $contact_infos.phone}
       {* [1][/1] is for a HTML tag. *}
       {l

modules/ps_contactinfo/ps_contactinfo-rich.tpl

@@ -2,38 +2,38 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
-<div class="contact__details">
-  <p class="h2 contact__title">{l s='Store information' d='Shop.Theme.Global'}</p>
-  <div class="contact__item">
-    <i class="material-icons" aria-hidden="true">&#xE55F;</i>
-    <div class="contact__info">{$contact_infos.address.formatted nofilter}</div>
+ <div class="ps-contactinfo">
+  <p class="h2 ps-contactinfo__title">{l s='Store information' d='Shop.Theme.Global'}</p>
+  <div class="ps-contactinfo__item">
+    <i class="material-icons" aria-hidden="true">&#xF00F;</i>
+    <div class="ps-contactinfo__info">{$contact_infos.address.formatted nofilter}</div>
   </div>
   {if $contact_infos.phone}
     <hr/>
-    <div class="contact__item">
+    <div class="ps-contactinfo__item">
       <i class="material-icons" aria-hidden="true">&#xE0CD;</i>
-      <div class="contact__info"><a href="tel:{$contact_infos.phone}">{$contact_infos.phone}</a></div>
+      <div class="ps-contactinfo__info"><a href="tel:{$contact_infos.phone|escape:'htmlall':'UTF-8'}">{$contact_infos.phone|escape:'htmlall':'UTF-8'}</a></div>
     </div>
   {/if}
   {if $contact_infos.fax}
     <hr/>
-    <div class="contact__item">
-      <i class="material-icons" aria-hidden="true">&#xE0DF;</i>
-      <div class="contact__info">{$contact_infos.fax}</div>
+    <div class="ps-contactinfo__item">
+      <i class="material-icons" aria-hidden="true">&#xE8AD;</i>
+      <div class="ps-contactinfo__info">{$contact_infos.fax|escape:'htmlall':'UTF-8'}</div>
     </div>
   {/if}
   {if $contact_infos.email && $display_email}
     <hr/>
-    <div class="contact__item">
+    <div class="ps-contactinfo__item">
       <i class="material-icons" aria-hidden="true">&#xE158;</i>
-      <div class="contact__info contact__info--email">{mailto address=$contact_infos.email encode="javascript"}</div>
+      <div class="ps-contactinfo__info ps-contactinfo__info--email">{mailto address=$contact_infos.email encode="javascript"}</div>
     </div>
   {/if}
   {if !empty($contact_infos.details)}
     <hr/>
-    <div class="contact__item">
+    <div class="ps-contactinfo__item">
       <i class="material-icons" aria-hidden="true">&#xE88E;</i>
-      <div class="contact__info">{$contact_infos.details|nl2br nofilter}</div>
+      <div class="ps-contactinfo__info">{$contact_infos.details|nl2br nofilter}</div>
     </div>
   {/if}
 </div>

modules/ps_contactinfo/ps_contactinfo.tpl

@@ -3,37 +3,36 @@
  * file that was distributed with this source code.
  *}
 
-<div class="footer__block block-contact col-md-6 col-lg-3">
-
+ <div class="ps-contactinfo footer__block block-contact col-md-6 col-lg-3">
   <p class="footer__block__title d-none d-md-flex">{l s='Store information' d='Shop.Theme.Global'}</p>
 
   <div role="button" class="footer__block__toggle d-md-none collapsed" data-bs-target="#contact-infos" data-bs-toggle="collapse" aria-expanded="false">
     <span class="footer__block__title">{l s='Store information' d='Shop.Theme.Global'}</span>
-    <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
+    <i class="material-icons" aria-hidden="true">keyboard_arrow_down</i>
   </div>
 
   <div id="contact-infos" class="footer__block__content footer__block__content-contact collapse">
 
-    <div class="contact__infos">
+    <div class="ps-contactinfo__infos">
       {$contact_infos.address.formatted nofilter}
     </div>
 
     {if $contact_infos.phone}
-      <div class="contact__phone">
+      <div class="ps-contactinfo__phone">
         <i class="material-icons" aria-hidden="true">phone</i>
-        <a href="tel:{$contact_infos.phone}">{$contact_infos.phone}</a>
+        <a href="tel:{$contact_infos.phone|escape:'htmlall':'UTF-8'}">{$contact_infos.phone|escape:'htmlall':'UTF-8'}</a>
       </div>
     {/if}
 
     {if $contact_infos.fax}
-      <div class="contact__fax">
-        <i class="material-icons" aria-hidden="true">fax</i>
-        <a href="fax:{$contact_infos.fax}">{$contact_infos.fax}</a>
+      <div class="ps-contactinfo__fax">
+        <i class="material-icons" aria-hidden="true">&#xE8AD;</i>
+        <a href="fax:{$contact_infos.fax|escape:'htmlall':'UTF-8'}">{$contact_infos.fax|escape:'htmlall':'UTF-8'}</a>
       </div>
     {/if}
 
     {if $contact_infos.email && $display_email}
-      <div class="contact__email">
+      <div class="ps-contactinfo__email">
         <i class="material-icons" aria-hidden="true">mail</i>
         {mailto address=$contact_infos.email encode="javascript"}
       </div>

modules/ps_currencyselector/ps_currencyselector.tpl

@@ -3,9 +3,9 @@
  * file that was distributed with this source code.
  *}
 
-<div id="_desktop_currency_selector">
-  <div class="currency-selector__wrapper">
-    <select id="currency-selector" class="form-select js-currency-selector" aria-label="{l s='Currency' d='Shop.Theme.Global'}">
+<div id="_desktop_ps_currencyselector">
+  <div class="ps-currencyselector">
+    <select class="form-select js-currency-selector" aria-label="{l s='Currency' d='Shop.Theme.Global'}">
       {foreach from=$currencies item=currency}
         <option value="{$currency.url}"{if $currency.current} selected="selected"{/if}>{$currency.iso_code}{if $currency.sign !== $currency.iso_code} {$currency.sign}{/if}</option>
       {/foreach}

modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl

@@ -12,7 +12,7 @@
 
   <div role="button" class="footer__block__toggle d-md-none collapsed" data-bs-target="#footer_account_list" data-bs-toggle="collapse" aria-expanded="false">
     <span class="footer__block__title">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
-    <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
+    <i class="material-icons" aria-hidden="true">keyboard_arrow_down</i>
   </div>
   <ul class="footer__block__content footer__block__content-list collapse" id="footer_account_list">
     {if $customer.is_logged}

modules/ps_customersignin/ps_customersignin.tpl

@@ -3,8 +3,8 @@
  * file that was distributed with this source code.
  *}
 
-<div id="_desktop_user_info">
-  <div class="user-info d-flex align-items-center">
+<div id="_desktop_ps_customersignin">
+  <div class="ps-customersignin">
     {if $customer.is_logged}
       <div class="dropdown header-block">
         <a
@@ -16,7 +16,8 @@
           aria-haspopup="true"
           aria-expanded="false"
           aria-label="{l s='View my account (%s)' d='Shop.Theme.Customeraccount' sprintf=[$customerName]}">
-          <i class="material-icons header-block__icon" aria-hidden="true">&#xE7FD;</i>
+          <i class="material-icons header-block__icon" aria-hidden="true">account_circle</i>
+          <span class="header-block__title d-none d-md-block d-lg-none">{$customer.firstname|truncate:2:".":true}{$customer.lastname|truncate:2:".":true}</span>
           <span class="header-block__title d-lg-inline d-none">{$customerName|truncate:22:"..":true}</span>
         </a>
 
@@ -80,7 +81,7 @@
           class="header-block__action-btn"
           rel="nofollow"
           role="button">
-          <i class="material-icons header-block__icon" aria-hidden="true">&#xE7FD;</i>
+          <i class="material-icons header-block__icon" aria-hidden="true">account_circle</i>
           <span class="d-none d-md-inline header-block__title">{l s='Sign in' d='Shop.Theme.Actions'}</span>
         </a>
       </div>

modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl

@@ -14,7 +14,7 @@
 
       <div class="{$componentName}__content__right col-md-7">
         <form action="{$urls.current_url}#blockEmailSubscription_{$hookName}" method="post">
-          <div class="{$componentName}__content__inputs inline-items">
+          <div class="{$componentName}__content__inputs">
             <input
               name="email"
               type="email"

modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl

@@ -27,7 +27,7 @@
     {block name='facets_clearall_button'}
       {if $activeFilters|count}
         <div class="clear-all-wrapper w-100 order-2 order-md-1">
-          <button data-search-url="{$clear_all_link}" class="btn border rounded-pill text-gray py-1 my-2 js-search-filters-clear-all">
+          <button data-search-url="{$clear_all_link}" class="btn border rounded-pill py-1 my-2 js-search-filters-clear-all">
             {l s='Clear all' d='Shop.Theme.Actions'}
           </button>
         </div>

modules/ps_languageselector/ps_languageselector.tpl

@@ -2,11 +2,12 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
-<div id="_desktop_language_selector">
-  <div class="language-selector__wrapper">
-    <select id="language-selector" aria-label="{l s='Language' d='Shop.Theme.Global'}" class="form-select js-language-selector">
+
+<div id="_desktop_ps_languageselector">
+  <div class="ps-languageselector">
+    <select class="form-select js-language-selector" aria-label="{l s='Language' d='Shop.Theme.Global'}">
       {foreach from=$languages item=language}
-        <option value="{url entity='language' id=$language.id_lang}"{if $language.id_lang == $current_language.id_lang} selected="selected"{/if} data-iso-code="{$language.iso_code}">{$language.name_simple}</option>
+        <option value="{url entity='language' id=$language.id_lang}"{if $language.id_lang == $current_language.id_lang} selected="selected"{/if} data-iso-code="{$language.iso_code}">{$language.iso_code|upper}</option>
       {/foreach}
     </select>
   </div>

modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl

@@ -9,7 +9,7 @@
 
   <div role="button" class="footer__block__toggle d-md-none collapsed" data-target="#footer_eu_about_us_list" data-bs-toggle="collapse">
     <span class="footer__block__title">{l s='Information' d='Modules.Legalcompliance.Shop'}</span>
-    <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
+    <i class="material-icons" aria-hidden="true">keyboard_arrow_down</i>
   </div>
   <ul class="footer__block__content footer__block__content-list collapse" id="footer_eu_about_us_list">
     {foreach from=$cms_links item=cms_link}

modules/ps_linklist/views/templates/hook/linkblock.tpl

@@ -9,7 +9,7 @@
 
     <div role="button" class="footer__block__toggle d-md-none collapsed" aria-expanded="false" data-bs-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
       <span class="footer__block__title">{$linkBlock.title}</span>
-      <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
+      <i class="material-icons" aria-hidden="true">keyboard_arrow_down</i>
     </div>
 
     <ul id="footer_sub_menu_{$linkBlock.id}" class="footer__block__content footer__block__content-list collapse">