Filter Color

thelia · May 31, 2024 · a411405 · a411405
1 parent 6b286b7
commit a411405
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 25 deletions.
diff --git a/assets/css/mobileDrawer.css b/assets/css/mobileDrawer.css
@@ -35,6 +35,11 @@
     @apply translate-y-0;
   }
 
+  /* Navigation au clavier */
+  &:has(label:focus) {
+    @apply translate-y-0;
+  }
+
   @screen md {
     display: none;
   }

diff --git a/assets/js/mobileDrawer.js b/assets/js/mobileDrawer.js
@@ -4,7 +4,11 @@ export default function MobileDrawer() {
 
   toggleDrawers.forEach(function (drawer) {
     drawer.addEventListener('click', () => {
+      if (!drawer.dataset?.drawerToggle) return;
+      console.log({ data: drawer.dataset?.drawerToggle });
       const currentDrawer = document.querySelector(drawer.dataset.drawerToggle);
+      console.log({ currentDrawer });
+
       if (!currentDrawer) return;
       currentDrawer.classList.toggle('MobileDrawer-show');
     });

diff --git a/components/Molecules/Filters/FilterSelect/FilterSelect.stories.js b/components/Molecules/Filters/FilterSelect/FilterSelect.stories.js
@@ -1,5 +1,6 @@
 import FilterSelect from './FilterSelect.twig';
 import filterSelectFunction from './FilterSelect.js';
+import MobileDrawer from '../../../../assets/js/mobileDrawer';
 
 export default {
   title: 'Design System/Molecules/Filters/FilterSelect'
@@ -8,22 +9,42 @@ export default {
 export const Base = {
   render: (args) => FilterSelect(args),
   play: () => {
-    filterSelectFunction()
+    filterSelectFunction();
+    MobileDrawer();
   },
   args: {
-    id: "filterSelect",
+    id: 'filterSelect',
     placeholder: 'Taille',
-    options: [{ value: 1, label: "S - 34/36" }, { value: 2, label: "M - 38/40" }, { value: 3, label: "L - 42/44" }],
+    options: [
+      { value: 1, label: 'S - 34/36' },
+      { value: 2, label: 'M - 38/40' },
+      { value: 3, label: 'L - 42/44' }
+    ]
   }
 };
 
 export const Color = {
   render: (args) => FilterSelect(args),
   play: () => {
-    filterSelectFunction()
+    filterSelectFunction();
   },
   args: {
-    id: "colorFilterSelect",
-    options: [{ value: 1, label: "<span class='colorRounded' data-bg-color='#6969B3'></span>State Blue" }, { value: 2, label: "<span class='colorRounded' data-bg-color='#FFB698'></span>Vermillon" }, { value: 3, label: "<span class='colorRounded' data-bg-color='#767676'></span>Grey" }],
+    id: 'colorFilterSelect',
+    options: [
+      {
+        value: 1,
+        label:
+          "<span class='colorRounded' data-bg-color='#6969B3'></span>State Blue"
+      },
+      {
+        value: 2,
+        label:
+          "<span class='colorRounded' data-bg-color='#FFB698'></span>Vermillon"
+      },
+      {
+        value: 3,
+        label: "<span class='colorRounded' data-bg-color='#767676'></span>Grey"
+      }
+    ]
   }
 };
diff --git a/components/Molecules/Filters/FilterSelect/FilterSelect.twig b/components/Molecules/Filters/FilterSelect/FilterSelect.twig
@@ -1,4 +1,4 @@
-<div class="FilterSelect">
+<div class="FilterSelect" data-drawer-toggle='#FilterSelectDrawer'>
   <div class="FilterSelect-current" tabindex="1">
       {% if placeholder %}
       <div class="Dropdown-value">
@@ -22,3 +22,19 @@
     {% endfor %}
   </ul>
 </div>
+
+
+<div class='MobileDrawer FilterSelect-mobileDrawer' id='FilterSelectDrawer'>
+  <div class='MobileDrawer-header'>
+    <button class='MobileDrawer-close' type='button' data-drawer-close>{{ source("/icons/close.svg") }}</button>
+  </div>
+  <div>
+    <ul class="FilterSelect-mobileList">
+      {% for option in options %}
+        <li class="FilterSelect-ListItem">
+          <label tabindex="1" class="FilterSelect-option" for="{{ option.value }}" aria-hidden="true">{{ option.label }}</label>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>
diff --git a/components/Molecules/Filters/FilterSelect/filterSelect.css b/components/Molecules/Filters/FilterSelect/filterSelect.css
@@ -8,16 +8,18 @@
     outline: none;
     border: 1px solid var(--grey-lighter);
 
-    &:focus-visible+ .FilterSelect-list {
-      opacity: 1;
-      animation-name: none;
+    @screen md {
+      &:focus+ .FilterSelect-list {
+        opacity: 1;
+        animation-name: none;
+      }
     }
 
-    &:focus-visible+ .FilterSelect-list .FilterSelect-option {
+    &:focus+ .FilterSelect-list .FilterSelect-option {
       cursor: pointer;
     }
 
-    &:focus-visible.FilterSelect-icon {
+    &:focus.FilterSelect-icon {
       transform: translateY(-50%) rotate(180deg);
     }
   }
@@ -67,10 +69,12 @@
     animation-fill-mode: forwards;
     animation-timing-function: step-start;
 
-    /* Navigation au clavier */
-    &:has(.FilterSelect-option:focus) {
-      opacity: 1;
-      animation-name: none;
+    @screen md {
+      /* Navigation au clavier */
+      &:has(.FilterSelect-option:focus) {
+        opacity: 1;
+        animation-name: none;
+      }
     }
   }
 
@@ -85,21 +89,24 @@
     outline: none;
 
     &:hover,
-    &:focus-visible{
+    &:focus{
       background-color: var(--grey-lightest);
     }
   }
 
-  .colorRounded {
-    --default-bg-color: #ffffff;
+  &,  &-mobileDrawer {
+    .colorRounded {
+      --default-bg-color: #ffffff;
 
-    width: rem-convert(21px);
-    height: rem-convert(21px);
-    display: block;
-    border-radius: 50%;
-    background-color: var(--default-bg-color);
-    margin-right: rem-convert(8px);
+      width: rem-convert(21px);
+      height: rem-convert(21px);
+      display: block;
+      border-radius: 50%;
+      background-color: var(--default-bg-color);
+      margin-right: rem-convert(8px);
+    }
   }
+
 }
 
 @keyframes HideList {

diff --git a/components/Organisms/Modules/Filters/FilterColor.twig b/components/Organisms/Modules/Filters/FilterColor.twig
@@ -0,0 +1 @@
+{% include '../../../Molecules/Filters/FilterSelect/FilterSelect.twig' with {id: 'colorFilterSelect', options: options} %}
diff --git a/components/Organisms/Modules/Filters/Filters.stories.js b/components/Organisms/Modules/Filters/Filters.stories.js
@@ -0,0 +1,35 @@
+import FilterColorComponent from './FilterColor.twig';
+import filterSelectFunction from '../../../Molecules/Filters/FilterSelect/FilterSelect';
+import MobileDrawer from '../../../../assets/js/mobileDrawer';
+
+export default {
+  title: 'Design System/Organisms/Modules/Filters'
+};
+
+export const FilterColor = {
+  render: (args) =>
+    `<div class='max-w-[340px]'>${FilterColorComponent(args)}</div>`,
+  play: () => {
+    filterSelectFunction();
+    MobileDrawer();
+  },
+  args: {
+    options: [
+      {
+        value: 1,
+        label:
+          "<span class='colorRounded' data-bg-color='#6969B3'></span>State Blue"
+      },
+      {
+        value: 2,
+        label:
+          "<span class='colorRounded' data-bg-color='#FFB698'></span>Vermillon"
+      },
+      {
+        value: 3,
+        label: "<span class='colorRounded' data-bg-color='#767676'></span>Grey"
+      }
+    ]
+  },
+  argTypes: {}
+};
diff --git a/components/Organisms/Modules/Filters/filters.css b/components/Organisms/Modules/Filters/filters.css
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{% include '../../../Molecules/Filters/FilterSelect/FilterSelect.twig' with {id: 'colorFilterSelect', options: options} %}