From 830e64d396ce472fc1a542be4ebc92f2da81a569 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 | 39 +++++++---------- app/stories/pix-filter-banner.stories.js | 4 +- 3 files changed, 47 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..4e3ad2f3e 100644 --- a/addon/styles/_pix-filter-banner.scss +++ b/addon/styles/_pix-filter-banner.scss @@ -1,31 +1,27 @@ @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); - font-size: 0.875rem; + color: var(--pix-neutral-800); } - &__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 +47,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: [