From 8531a6832a99e29fdffc39fab18b1598af427195 Mon Sep 17 00:00:00 2001
From: mcampourcy <mireille.campourcy@pix.fr>
Date: Tue, 14 Jan 2025 14:59:46 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20feat(pix-ui):=20Change=20p?=
 =?UTF-8?q?ixFilter=20appearance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addon/components/pix-filter-banner.hbs   | 55 +++++++++++---------
 addon/styles/_pix-filter-banner.scss     | 65 +++++++++++-------------
 app/stories/pix-filter-banner.stories.js | 12 ++---
 3 files changed, 65 insertions(+), 67 deletions(-)

diff --git a/addon/components/pix-filter-banner.hbs b/addon/components/pix-filter-banner.hbs
index d34f6c1af..152698c02 100644
--- a/addon/components/pix-filter-banner.hbs
+++ b/addon/components/pix-filter-banner.hbs
@@ -1,32 +1,37 @@
 <div class="pix-filter-banner" ...attributes>
   {{#if this.displayTitle}}
-    <div class="pix-filter-banner__container-title">
-      <p class="pix-filter-banner__title">{{@title}}</p>
-    </div>
+    <p class="pix-filter-banner__title">
+      <PixIcon @name="filter" @plainIcon={{true}} />
+      {{@title}}
+    </p>
   {{/if}}
 
-  <div class="pix-filter-banner__container-filter">
-    {{yield}}
-  </div>
+  <div class="pix-filter-banner__container">
+    <div class="pix-filter-banner__filter">
+      {{yield}}
+    </div>
 
-  {{#if this.displayActionMenu}}
-    <div class="pix-filter-banner__container-action">
-      {{#if this.displayDetails}}
-        <p class="pix-filter-banner__details">{{@details}}</p>
-      {{/if}}
+    {{#if this.displayActionMenu}}
+      <div class="pix-filter-banner__action">
+        {{#if this.displayDetails}}
+          <p class="pix-filter-banner__details">{{@details}}</p>
+        {{/if}}
 
-      {{#if this.displayClearFilters}}
-        <div class="pix-filter-banner__button-container">
-          <PixButton
-            class="pix-filter-banner__button"
-            @size="small"
-            @triggerAction={{@onClearFilters}}
-            @isDisabled={{@isClearFilterButtonDisabled}}
-          >
-            {{@clearFiltersLabel}}
-          </PixButton>
-        </div>
-      {{/if}}
-    </div>
-  {{/if}}
+        {{#if this.displayClearFilters}}
+          <div class="pix-filter-banner__button-container">
+            <PixButton
+              @iconBefore="delete"
+              class="pix-filter-banner__button"
+              @variant="tertiary"
+              @size="small"
+              @triggerAction={{@onClearFilters}}
+              @isDisabled={{@isClearFilterButtonDisabled}}
+            >
+              {{@clearFiltersLabel}}
+            </PixButton>
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
 </div>
\ No newline at end of file
diff --git a/addon/styles/_pix-filter-banner.scss b/addon/styles/_pix-filter-banner.scss
index 9ec615c3d..a4226319d 100644
--- a/addon/styles/_pix-filter-banner.scss
+++ b/addon/styles/_pix-filter-banner.scss
@@ -1,43 +1,44 @@
 @use "pix-design-tokens/breakpoints";
-@use "pix-design-tokens/shadows";
 
 .pix-filter-banner {
-  @extend %pix-shadow-sm;
+  font-size: 0.875rem;
 
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--pix-spacing-2x);
-  width: 100%;
-  min-height: 64px;
-  padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
-  background-color: var(--pix-neutral-0);
+  &__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--pix-spacing-2x);
+    width: 100%;
+    min-height: 64px;
+  }
 
   &__title {
-    margin: 0;
-    color: var(--pix-neutral-500);
-    font-size: 0.875rem;
+    display: flex;
+    gap: var(--pix-spacing-1x);
+    align-items: center;
+    margin-bottom: var(--pix-spacing-1x);
+    color: var(--pix-neutral-800);
+    line-height: 20px;
   }
 
-  &__container-filter {
+  &__filter {
     display: flex;
     flex-direction: column;
     gap: var(--pix-spacing-4x);
   }
 
-  &__container-action {
+  &__action {
     display: flex;
     flex-direction: column;
     align-items: center;
-    border-top: 1px solid var(--pix-neutral-20);
   }
 
   &__details {
-    margin: 0;
-    padding: var(--pix-spacing-2x) 0 var(--pix-spacing-2x) 0;
-    color: var(--pix-neutral-500);
-    font-weight: var(--pix-font-medium);
-    font-size: 0.875rem;
+    //margin: 0;
+    //padding: var(--pix-spacing-2x) 0 var(--pix-spacing-2x) 0;
+    //color: var(--pix-neutral-500);
+    //font-weight: var(--pix-font-medium);
+    //font-size: 0.875rem;
   }
 
   &__button {
@@ -51,31 +52,23 @@
 
 @include breakpoints.device-is('tablet') {
   .pix-filter-banner {
-    flex-direction: row;
-    gap: var(--pix-spacing-6x);
-    align-items: center;
-
-    &__container-title {
-      display: flex;
+    &__container {
+      flex-direction: row;
+      gap: var(--pix-spacing-6x);
       align-items: center;
     }
 
-    &__container-filter {
+    &__filter {
       flex-direction: row;
       flex-grow: 2;
       flex-wrap: wrap;
       align-items: center;
     }
 
-    &__container-action {
-      flex-direction: row;
-      border: none;
-    }
-
     &__details {
-      padding: 0 var(--pix-spacing-4x) 0 0;
-      text-align: center;
-      border: none;
+      //padding: 0 var(--pix-spacing-4x) 0 0;
+      //text-align: center;
+      //border: none;
     }
 
     &__button-container {
diff --git a/app/stories/pix-filter-banner.stories.js b/app/stories/pix-filter-banner.stories.js
index 5beed1053..8494c2fba 100644
--- a/app/stories/pix-filter-banner.stories.js
+++ b/app/stories/pix-filter-banner.stories.js
@@ -21,12 +21,12 @@ export default {
     },
     onClearFilters: {
       name: 'onClearFilters',
-      description: 'fonction à appeler pour déclencher l’action de suppression des filtres',
+      description: 'Fonction à appeler pour déclencher l’action de suppression des filtres',
       type: { required: false },
     },
     isClearFilterButtonDisabled: {
       name: 'isClearFilterButtonDisabled',
-      description: 'Désactiver le button de la suppresion des filtres',
+      description: 'Désactiver le bouton de suppression des filtres',
       type: { name: 'boolean', required: true },
       control: { type: 'boolean' },
       table: {
@@ -50,7 +50,7 @@ export const filterBanner = (args) => {
     @options={{this.options}}
     @onChange={{this.onChange}}
     @screenReaderOnly={{true}}
-    @placeholder='placeholer'
+    @placeholder='placehodler'
   >
     <:label>mon label</:label>
   </PixSelect>
@@ -58,7 +58,7 @@ export const filterBanner = (args) => {
     @options={{this.options}}
     @onChange={{this.onChange}}
     @screenReaderOnly={{true}}
-    @placeholder='placeholer'
+    @placeholder='placehodler'
   >
     <:label>mon label</:label>
   </PixSelect>
@@ -66,7 +66,7 @@ export const filterBanner = (args) => {
     @options={{this.options}}
     @onChange={{this.onChange}}
     @screenReaderOnly={{true}}
-    @placeholder='placeholer'
+    @placeholder='placehodler'
   >
     <:label>mon label</:label>
   </PixSelect>
@@ -75,7 +75,7 @@ export const filterBanner = (args) => {
   };
 };
 filterBanner.args = {
-  title: 'Filtres',
+  title: 'Filtrer par :',
   details: 'Des détails sur le filtre',
   clearFiltersLabel: 'Effacer les filtres',
   options: [