From 8e3df0e37fc2dbb8f918e93e1197f20051e889fa 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   | 54 +++++++++++++-----------
 addon/styles/_pix-filter-banner.scss     | 44 +++++++++----------
 app/stories/pix-filter-banner.stories.js |  4 +-
 3 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/addon/components/pix-filter-banner.hbs b/addon/components/pix-filter-banner.hbs
index d34f6c1af..7d399fb59 100644
--- a/addon/components/pix-filter-banner.hbs
+++ b/addon/components/pix-filter-banner.hbs
@@ -1,32 +1,36 @@
 <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
+              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..f9ce605bb 100644
--- a/addon/styles/_pix-filter-banner.scss
+++ b/addon/styles/_pix-filter-banner.scss
@@ -1,31 +1,32 @@
 @use "pix-design-tokens/breakpoints";
-@use "pix-design-tokens/shadows";
 
 .pix-filter-banner {
-  @extend %pix-shadow-sm;
-
-  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);
+    display: flex;
+    gap: var(--pix-spacing-1x);
+    align-items: center;
+    margin-bottom: var(--pix-spacing-1x);
+    color: var(--pix-neutral-800);
     font-size: 0.875rem;
+    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;
@@ -51,23 +52,20 @@
 
 @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 {
+    &__action {
       flex-direction: row;
       border: none;
     }
diff --git a/app/stories/pix-filter-banner.stories.js b/app/stories/pix-filter-banner.stories.js
index 5beed1053..46a00a236 100644
--- a/app/stories/pix-filter-banner.stories.js
+++ b/app/stories/pix-filter-banner.stories.js
@@ -26,7 +26,7 @@ export default {
     },
     isClearFilterButtonDisabled: {
       name: 'isClearFilterButtonDisabled',
-      description: 'Désactiver le button de la suppresion des filtres',
+      description: 'Désactiver le button de la suppression des filtres',
       type: { name: 'boolean', required: true },
       control: { type: 'boolean' },
       table: {
@@ -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: [