@1024pix/pix-ui 55.18.2 → 55.19.0

package/addon/components/pix-filter-banner.gjs

@@ -0,0 +1,85 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+import PixButton from './pix-button';
+import PixIcon from './pix-icon';
+
+export default class PixFilterBanner extends Component {
+  get displayTitle() {
+    return Boolean(this.args.title);
+  }
+
+  get displayDetails() {
+    return Boolean(this.args.details);
+  }
+
+  get displayClearFilters() {
+    return Boolean(this.args.clearFiltersLabel);
+  }
+
+  get displayLoadFilters() {
+    return Boolean(this.args.loadFiltersLabel);
+  }
+
+  get displayActionMenu() {
+    return this.displayClearFilters || this.displayDetails || this.displayLoadFilters;
+  }
+
+  @action
+  onSubmit(event) {
+    if (this.args.onLoadFilters) {
+      event.preventDefault();
+      this.args.onLoadFilters(event);
+    }
+  }
+
+  <template>
+    <form {{on "submit" this.onSubmit}} class="pix-filter-banner" ...attributes>
+      {{#if this.displayTitle}}
+        <p class="pix-filter-banner__title">
+          <PixIcon
+            @name="filter"
+            @plainIcon={{true}}
+            class="pix-filter-banner__icon-title"
+            aria-hidden="true"
+          />
+          {{@title}}
+        </p>
+      {{/if}}
+
+      <div class="pix-filter-banner__container">
+        <div class="pix-filter-banner__filter">
+          {{yield}}
+        </div>
+
+        {{#if this.displayActionMenu}}
+          <div class="pix-filter-banner__action">
+            {{#if this.displayDetails}}
+              <p>{{@details}}</p>
+            {{/if}}
+
+            {{#if this.displayLoadFilters}}
+              <PixButton @variant="primary" @type="submit" @size="small">
+                {{@loadFiltersLabel}}
+              </PixButton>
+            {{/if}}
+
+            {{#if this.displayClearFilters}}
+              <PixButton
+                class="pix-filter-banner__button"
+                @iconBefore="delete"
+                @variant="tertiary"
+                @size="small"
+                @triggerAction={{@onClearFilters}}
+                @isDisabled={{@isClearFilterButtonDisabled}}
+              >
+                {{@clearFiltersLabel}}
+              </PixButton>
+            {{/if}}
+          </div>
+        {{/if}}
+      </div>
+    </form>
+  </template>
+}

package/addon/styles/_pix-filter-banner.scss

@@ -34,17 +34,13 @@
   &__action {
     display: flex;
     flex-direction: column;
-    align-items: flex-end;
-  }
-
-  &__details {
-    padding: 0;
+    gap: var(--pix-spacing-1x);
+    align-items: center;
     font-weight: var(--pix-font-medium);
   }
 
   &__button {
     padding: 0;
-    font-size: 0.875rem;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "55.18.2",
+  "version": "55.19.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"

package/addon/components/pix-filter-banner.hbs

@@ -1,42 +0,0 @@
-<div class="pix-filter-banner" ...attributes>
-  {{#if this.displayTitle}}
-    <p class="pix-filter-banner__title">
-      <PixIcon
-        @name="filter"
-        @plainIcon={{true}}
-        class="pix-filter-banner__icon-title"
-        aria-hidden="true"
-      />
-      {{@title}}
-    </p>
-  {{/if}}
-
-  <div class="pix-filter-banner__container">
-    <div class="pix-filter-banner__filter">
-      {{yield}}
-    </div>
-
-    {{#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
-              @iconBefore="delete"
-              class="pix-filter-banner__button"
-              @variant="tertiary"
-              @size="small"
-              @triggerAction={{@onClearFilters}}
-              @isDisabled={{@isClearFilterButtonDisabled}}
-            >
-              {{@clearFiltersLabel}}
-            </PixButton>
-          </div>
-        {{/if}}
-      </div>
-    {{/if}}
-  </div>
-</div>

package/addon/components/pix-filter-banner.js

@@ -1,19 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class PixFilterBanner extends Component {
-  get displayTitle() {
-    return Boolean(this.args.title);
-  }
-
-  get displayDetails() {
-    return Boolean(this.args.details);
-  }
-
-  get displayClearFilters() {
-    return Boolean(this.args.clearFiltersLabel);
-  }
-
-  get displayActionMenu() {
-    return this.displayClearFilters || this.displayDetails;
-  }
-}