Feat: Expand / collapse button

Author: dchyun

packages/components/src/components/hds/filter-bar/filters-dropdown.hbs

@@ -11,7 +11,12 @@
   {{this._syncFilters @filters}}
   as |D|
 >
-  <D.ToggleButton @icon="filter" @text="Filter" @color="secondary" @size="small" />
+  <D.ToggleButton
+    @icon="filter"
+    @text={{hds-t "hds.components.filter-bar.filters-dropdown.toggle-button" default="Add filter"}}
+    @color="secondary"
+    @size="small"
+  />
   <D.Generic>
     <Hds::FilterBar::Tabs @ariaLabel="Filter bar tabs" as |T|>
       {{yield

packages/components/src/components/hds/filter-bar/index.hbs

@@ -20,9 +20,23 @@
     {{/if}}
     <div class="hds-filter-bar__actions__right">
       {{yield (hash ActionsDropdown=(component "hds/dropdown"))}}
+      {{#if this.hasActiveFilters}}
+        <Hds::Button
+          @text={{if
+            this._isExpanded
+            (hds-t "hds.components.filter-bar.expand-collapse-button.collapse" default="Collapse filters")
+            (hds-t "hds.components.filter-bar.expand-collapse-button.expand" default="Expand filters")
+          }}
+          @color="secondary"
+          @size="small"
+          @icon={{if this._isExpanded "unfold-close" "unfold-open"}}
+          @isIconOnly={{true}}
+          {{on "click" this.toggleExpand}}
+        />
+      {{/if}}
     </div>
   </div>
-  {{#if this.hasActiveFilters}}
+  {{#if (and this.hasActiveFilters this._isExpanded)}}
     <div class="hds-filter-bar__filters">
       {{#each-in @filters as |key filter|}}
         {{#if filter.data}}

packages/components/src/components/hds/filter-bar/index.ts

@@ -5,6 +5,7 @@
 
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 import type { ComponentLike, WithBoundArgs } from '@glint/template';
 
@@ -42,6 +43,8 @@ export interface HdsFilterBarSignature {
 }
 
 export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
+  @tracked _isExpanded: boolean = true;
+
   @action
   onFilter(filters: HdsFilterBarFilters): void {
     const { onFilter } = this.args;
@@ -66,6 +69,11 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
     }
   }
 
+  @action
+  toggleExpand(): void {
+    this._isExpanded = !this._isExpanded;
+  }
+
   get hasActiveFilters(): boolean {
     return Object.keys(this.args.filters).length > 0;
   }

packages/components/translations/hds/components/filter-bar/filters-dropdown/en-us.yaml

@@ -1,3 +1,7 @@
 apply: Apply filters
 clear: Clear all filters
+expand-collapse-button:
+  expand: Expand filters
+  collapse: Collapse filters
 selected-filters: Filters selected
+toggle-button: Add filter