Chore: Add FilterBar showcase page

Author: dchyun

showcase/app/components/page-components/filter-bar/index.gts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pageTitle } from 'ember-page-title';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+
+import SubSectionBasic from 'showcase/components/page-components/filter-bar/sub-sections/basic';
+
+const FilterBarIndex: TemplateOnlyComponent = <template>
+  {{pageTitle "FilterBar Component"}}
+
+  <ShwTextH1>Filter Bar</ShwTextH1>
+
+  <section data-test-percy>
+    <SubSectionBasic />
+  </section>
+</template>;
+
+export default FilterBarIndex;

showcase/app/components/page-components/filter-bar/sub-sections/basic.gts

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import ShwDivider from 'showcase/components/shw/divider';
+import ShwPlaceholder from 'showcase/components/shw/placeholder';
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+
+import { HdsFilterBar } from '@hashicorp/design-system-components/components';
+
+export default class SubSectionBasic extends Component {
+  private _filters = {};
+
+  <template>
+    <ShwTextH2>Basic usage</ShwTextH2>
+
+    <HdsFilterBar @filters={{this._filters}} @hasSearch={{true}} as |F|>
+      <F.ActionsGeneric>
+        <ShwPlaceholder @text="generic content" @height="24" />
+      </F.ActionsGeneric>
+      <F.ActionsDropdown as |D|>
+        <D.ToggleButton @text="Actions" @color="secondary" @size="small" />
+        <D.Checkbox>Action 1</D.Checkbox>
+        <D.Checkbox>Action 2</D.Checkbox>
+        <D.Checkbox>Action 3</D.Checkbox>
+      </F.ActionsDropdown>
+      <F.Dropdown as |D|>
+        <D.FilterGroup
+          @key="multi-select"
+          @text="Multi-select"
+          @type="multi-select"
+          @searchEnabled={{true}}
+          as |F|
+        >
+          <F.Checkbox @value="1">Option 1</F.Checkbox>
+          <F.Checkbox @value="2">Option 2</F.Checkbox>
+          <F.Checkbox @value="3">Option 3</F.Checkbox>
+        </D.FilterGroup>
+        <D.FilterGroup
+          @key="single-select"
+          @text="Single-select"
+          @type="single-select"
+          @searchEnabled={{true}}
+          as |F|
+        >
+          <F.Radio @value="1">Option 1</F.Radio>
+          <F.Radio @value="2">Option 2</F.Radio>
+          <F.Radio @value="3">Option 3</F.Radio>
+        </D.FilterGroup>
+        <D.FilterGroup @key="numerical" @text="Numerical" @type="numerical" />
+        <D.FilterGroup @key="date" @text="Date" @type="date" />
+        <D.FilterGroup @key="datetime" @text="Datetime" @type="datetime" />
+        <D.FilterGroup @key="time" @text="Time" @type="time" />
+      </F.Dropdown>
+    </HdsFilterBar>
+
+    <ShwDivider />
+  </template>
+}

showcase/app/router.ts

@@ -50,6 +50,7 @@ Router.map(function () {
     this.route('code-block');
     this.route('code-editor');
     this.route('dropdown');
+    this.route('filter-bar');
     this.route('flyout');
     this.route('form', function (): void {
       this.route('frameless', function (): void {

showcase/app/routes/page-components/filter-bar.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Route from '@ember/routing/route';
+
+import type { ModelFrom } from 'showcase/utils/model-from-route';
+
+export type PageComponentsFilterBarModel =
+  ModelFrom<PageComponentsFilterBarRoute>;
+
+export default class PageComponentsFilterBarRoute extends Route {}

showcase/app/templates/index.gts

@@ -137,6 +137,11 @@ const Index: TemplateOnlyComponent = <template>
             Dropdown
           </LinkTo>
         </li>
+        <li>
+          <LinkTo @route="page-components.filter-bar">
+            FilterBar
+          </LinkTo>
+        </li>
         <li>
           <LinkTo @route="page-components.flyout">
             Flyout

showcase/app/templates/page-components/filter-bar.gts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import FilterBarIndex from 'showcase/components/page-components/filter-bar/index';
+
+const PageComponentsFilterBar: TemplateOnlyComponent = <template>
+  <FilterBarIndex />
+</template>;
+
+export default PageComponentsFilterBar;