Live Components: PseSelector + CategoryFilters (#64)

* pseselector WIP

* productCard wip

* ProductCard

* Live PseSelector Component

* fix: add class to simulate :checked

* fitlers: structure WIP

* filter into form

* live: form in pseSelector

* filter: from validation onchange

* feat: form group filters

* fix form add cart

* poc: tb in flexy

* tb: add blocks in template

* fix: bad condition

* pse: submitform

* cat: styling page

* fix bad merged file

* fix: item within href in breadcrumb

* wip selector

* test pse selector with only symfony form (#65)

Co-authored-by: Lucanis <damien.foulhoux@gmail.com>

* fix design product page

* remove react pse selector

---------

Co-authored-by: Robin Morel <rmorel@openstudio.fr>
Co-authored-by: Alexandre <anoziere@openstudio.fr>
Co-authored-by: Lucanis <damien.foulhoux@gmail.com>

assets/app.js

@@ -12,12 +12,11 @@ import './bootstrap.js';
 
 import HeaderScript from '@components/Layout/Header/Header.js';
 import MobileDrawer from './js/mobileDrawer';
-import filterSelectFunction from '@components/Molecules/Filters/FilterSelect/FilterSelect';
+import filterSelect from '@components/Molecules/Filters/FilterSelect/FilterSelect';
 import { quantityButton } from '@components/Molecules/Button/button';
 import { FieldInputFunction } from '@components/Molecules/Fields/FieldInput/FieldInput';
 import { ModalFunction } from '@components/Molecules/Modal/Modal';
 import { slider } from '@js/slider';
-import ProductGallery from '@components/Layout/ProductGallery/ProductGallery';
 import PasswordControlsFunction from '@components/Molecules/PasswordControls/PasswordControls';
 import headerButtonProfileFunction from '@components/Molecules/HeaderButton/HeaderButtonProfile';
 
@@ -28,10 +27,9 @@ function main() {
 
   HeaderScript();
   MobileDrawer();
-  filterSelectFunction();
+  filterSelect();
   quantityButton();
   slider();
-  ProductGallery();
   PasswordControlsFunction();
   StepsFunction();
   FieldInputFunction();

assets/controllers/filters_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+class FiltersController extends Controller {
+  async initialize() {
+    this.component = await getComponent(this.element);
+  }
+
+  filterChange() {
+    this.component.action('save');
+  }
+
+  sortChange(e) {
+    this.component.action('save', { order: e.target.value });
+  }
+  resetForm() {
+    this.component.action('save', { reset: true });
+  }
+}
+
+export default FiltersController;

assets/css/form.css

@@ -0,0 +1,47 @@
+.FilterChoice {
+  &-label {
+    @apply flex sm:text-black sm:font-semibold paragraph-4 sm:mb-2;
+  }
+
+  &-list {
+    @apply flex-wrap gap-2 divide-y divide-grey-lighter sm:divide-y-0 sm:flex;
+  }
+
+  &--drawer {
+    .FilterChoice-label {
+      @media screen and (max-width: theme('screens.sm')) {
+        position: relative;
+        cursor: pointer;
+        outline: none;
+        border: 1px solid var(--grey-lighter);
+        padding: 16px 14px;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 0;
+        &:before {
+          content: attr(data-select-label);
+          font-size: rem-convert(14px);
+        }
+        &:after {
+          content: '';
+          display: block;
+          background: url('/assets/icons/chevron-small-down.svg') no-repeat
+            center;
+          height: rem-convert(20px);
+          width: rem-convert(20px);
+        }
+      }
+    }
+
+    &.FilterChoice--rounded {
+      .FilterChoice-label {
+        @media screen and (max-width: theme('screens.md')) {
+          border-radius: 50px;
+          justify-content: center;
+          color: var(--dark);
+          border-color: currentColor;
+        }
+      }
+    }
+  }
+}

assets/css/mobileDrawer.css

@@ -1,4 +1,6 @@
 .MobileDrawer {
+  @apply transition-transform translate-y-full;
+
   position: fixed;
   left: 0;
   right: 0;
@@ -9,10 +11,10 @@
   padding-top: rem-convert(50px);
   padding-bottom: rem-convert(42px);
   border-radius: rem-convert(20px) rem-convert(20px) 0px 0px;
-  @apply transition-transform translate-y-full;
   z-index: 20;
+
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     top: rem-convert(16px);
     left: calc(50% - 21px);
@@ -41,10 +43,6 @@
     @apply translate-y-0;
   }
 
-  @screen md {
-    display: none;
-  }
-
   &-overlay {
     position: fixed;
     top: 0;
@@ -55,4 +53,70 @@
     mix-blend-mode: multiply;
     z-index: 10;
   }
+
+  &--reset-sm {
+    @screen sm {
+      all: revert;
+
+      &:before {
+        content: none;
+      }
+      .MobileDrawer-header {
+        display: none;
+      }
+      & + .MobileDrawer-overlay {
+        display: none;
+      }
+    }
+  }
+  &--reset-md {
+    @screen md {
+      all: revert;
+
+      &:before {
+        content: none;
+      }
+      .MobileDrawer-header {
+        display: none;
+      }
+      & + .MobileDrawer-overlay {
+        display: none;
+      }
+    }
+  }
+
+  &--reset-lg {
+    @screen lg {
+      all: revert;
+
+      &:before {
+        content: none;
+      }
+
+      .MobileDrawer-header {
+        display: none;
+      }
+      & + .MobileDrawer-overlay {
+        display: none;
+      }
+    }
+  }
+
+  &--reset-xl {
+    @screen xl {
+      all: revert;
+
+      &:before {
+        content: none;
+      }
+
+      .MobileDrawer-header {
+        display: none;
+      }
+
+      & + .MobileDrawer-overlay {
+        display: none;
+      }
+    }
+  }
 }

assets/css/pages/category.css

@@ -0,0 +1,73 @@
+.Category {
+  &-grid {
+    display: grid;
+    padding: 24px;
+
+    @screen md {
+      padding: 24px 48px;
+    }
+    @screen lg {
+      padding: 44px 0;
+      grid-template-columns: 240px 1fr;
+      gap: 48px;
+      margin: auto;
+      max-width: calc(theme('screens.lg') - 80px);
+    }
+
+    @screen xl {
+      gap: 66px;
+      max-width: calc(theme('screens.xl') - 84px);
+    }
+
+    @screen 2xl {
+      grid-template-columns: 310px 1fr;
+      max-width: calc(theme('screens.2xl') - 100px);
+    }
+  }
+}
+
+.CategoryFilter {
+  display: block;
+  color: var(--black);
+
+  @screen lg {
+    padding: 0;
+    margin-top: 48px;
+    transform: none;
+    position: relative;
+  }
+
+  &:before {
+    @apply lg:hidden;
+  }
+  &-erase {
+    @screen lg {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+    &::empty {
+      display: none;
+    }
+  }
+
+  .FilterPill {
+    background-color: white;
+  }
+
+  .Accordion--filter {
+    @apply lg:bg-white;
+
+    .Accordion-summary,
+    .Accordion-content {
+      @apply lg:px-0;
+    }
+  }
+
+  .Fieldset {
+    &-group {
+      @apply flex flex-col gap-1 lg:divide-y lg:gap-0;
+    }
+  }
+}

assets/css/pages/product.css

@@ -1,10 +1,10 @@
 .Product {
-   &-imageContainer {
-     width: 594px;
-     img {
-       width: 100%;
-     }
-   }
+  &-imageContainer {
+    width: 594px;
+    img {
+      width: 100%;
+    }
+  }
 
   &Gallery-item {
     border: 1px solid transparent;
@@ -13,3 +13,91 @@
     }
   }
 }
+
+.ProductPage {
+  color: var(--black);
+  &-grid {
+    display: grid;
+
+    @screen lg {
+      grid-template-rows: auto auto;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 46px 54px;
+      margin-bottom: 90px;
+    }
+    @screen xl {
+      gap: 16px 20px;
+    }
+  }
+
+  &-gallery {
+    order: 1;
+    position: relative;
+    right: 50%;
+    left: 50%;
+    order: 1;
+    width: 100vw;
+    margin-right: -50vw;
+    margin-left: -50vw;
+
+    @screen sm {
+      position: static;
+      width: auto;
+      margin: 0;
+    }
+    @screen lg {
+      grid-column: 1 / 7;
+    }
+    @screen xl {
+      grid-column: 1 / 8;
+    }
+  }
+
+  &-infos {
+    order: 2;
+    margin-top: 30px;
+
+    @screen lg {
+      grid-row: 1 / 3;
+      grid-column: 7 / 13;
+      margin: 0;
+    }
+
+    @screen xl {
+      grid-column: 9 / 13;
+    }
+  }
+
+  &-description {
+    order: 3;
+    @screen lg {
+      grid-column: 1 / 7;
+    }
+    @screen xl {
+      grid-column: 2 / 8;
+    }
+  }
+}
+
+.PseSelector {
+  display: grid;
+  gap: 30px;
+
+  legend {
+    @sreen lg {
+      display: none;
+    }
+  }
+
+  .Fieldset {
+    &-group {
+      @apply grid sm:gap-4;
+
+      li:last-child {
+        .FilterChoice-label {
+          border-top: none;
+        }
+      }
+    }
+  }
+}