[Docs] Filter Bar component

website/docs/components/filter-bar/index.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class Index extends Component {
+  @tracked filters = {};
+}

website/docs/components/filter-bar/index.md

@@ -0,0 +1,37 @@
+---
+title: Filter Bar
+description: A composition of HDS components to support filtering a data set.
+caption: A composition of HDS components to support filtering a data set.
+links:
+  figma: >-
+    https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67385-76599&t=w8xQlWxzH7bwXLe2-1
+  github: >-
+    https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/filter-bar
+related:
+  - components/table/advanced-table
+  - patterns/filter-patterns
+previewImage: assets/illustrations/components/filter-bar.jpg
+navigation:
+  keywords:
+    - filtering
+status:
+  added: 5.2.0
+---
+
+<section data-tab="Guidelines">
+  @include "partials/guidelines/guidelines.md"
+</section>
+
+<section data-tab="Code">
+  @include "partials/code/how-to-use.md"
+  @include "partials/code/component-api.md"
+</section>
+
+<section data-tab="Specifications">
+  @include "partials/specifications/anatomy.md"
+  @include "partials/specifications/states.md"
+</section>
+
+<section data-tab="Accessibility">
+  @include "partials/accessibility/accessibility.md"
+</section>

website/docs/components/filter-bar/partials/accessibility/accessibility.md

@@ -0,0 +1,11 @@
+## Conformance Rating
+
+## Applicable WCAG Success Criteria
+
+This section is for reference only. This component intends to conform to the following WCAG Success Criteria:
+
+<Doc::WcagList @criteriaList={{array "1.3.1" }} />
+
+---
+
+<Doc::A11ySupport />

website/docs/components/filter-bar/partials/code/component-api.md

@@ -0,0 +1,11 @@
+## Component API
+
+### FilterBar
+
+<Doc::ComponentApi as |C|>
+  <C.Property @name="...attributes">
+    This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
+  </C.Property>
+</Doc::ComponentApi>
+
+### Contextual components

website/docs/components/filter-bar/partials/code/how-to-use.md

@@ -0,0 +1,28 @@
+## How to use this component
+
+```handlebars
+<Hds::FilterBar @filters={{this.filters}} as |F|>
+  <F.Dropdown as |D|>
+    <D.FilterGroup
+      @key="name"
+      @text="Name"
+      @type="multi-select"
+      as |F|
+    >
+      <F.Checkbox @value="project-1" @label="Project 1" />
+      <F.Checkbox @value="project-2" @label="Project 2" />
+      <F.Checkbox @value="project-3" @label="Project 3" />
+    </D.FilterGroup>
+    <D.FilterGroup
+      @key="version"
+      @text="Version"
+      @type="single-select"
+      as |F|
+    >
+      <F.Checkbox @value="1.0" @label="1.0" />
+      <F.Checkbox @value="2.0" @label="2.0" />
+      <F.Checkbox @value="3.0" @label="3.0" />
+    </D.FilterGroup>
+  </F.Dropdown>
+</Hds::FilterBar>
+```

website/docs/components/filter-bar/partials/guidelines/guidelines.md

@@ -0,0 +1,99 @@
+The Filter Bar is used to display and apply filters to a data set. It is most often used in conjunction with the [Advanced Table](/components/table/advanced-table), but is flexible enough to support different renderings of data sets such as in a list or grid of cards.
+
+The Filter Bar comes paired with a complex dropdown menu that supports 
+
+## Usage
+
+### When to use
+
+- When displaying relevant filters and filters that have been applied to a data set.
+- For common filter methods like multi-selection, single selection, numbers, dates, and times.
+
+### When not to use
+
+- for complex query builder features.
+
+## Overlap with the Filter pattern guidance <!--Consider a different headline -->
+
+The Filter Bar component is a successor to the [Filter pattern](/patterns/filter-patterns) documentation and supports the vast majority of filtering experiences within HashiCorp applications. New experiences should use the Filter Bar by default instead of the adhering to the pattern guidance, while already delivered features should consider migrating to the Filter Bar component.
+
+!!! Callout
+
+While the Filter Bar underwent rigorous research and testing, this component is relatively complex compared other Components in the the HDS library. If specific functionality or filtering methods don't meet your needs, please [contact the Design Systems Team](/about/support) so we can provide support.
+!!!
+
+## Type
+
+While we recommend that the Filter Bar be paired with the [Advanced Table](/components/table/advanced-table) in most circumstances, the component is agnostic and can be paired with different ways of rendering a data set. To support this visually, the component features two types; `attached` and `standalone`.
+
+<!-- JT: Consider including additional context for where to use each on in this section, or make it more concise -->
+
+### Attached
+
+Use the `attached` variant with the [Advanced Table](/components/table/advanced-table) and standard [Table](/components/table/table).
+
+![Example of an attached Filter Bar paired with a data set rendered in an Advanced Table](/assets/components/filter-bar/filter-bar-type-attached.png)
+
+### Standalone
+
+Use the `standalone` variant when a data set is rendered in formats other than a table, e.g., a list or array of cards.
+
+![Example of a standalone Filter Bar paired with a data set rendered in cards](/assets/components/filter-bar/filter-bar-type-standalone.png)
+
+## Expand & collapse
+
+- The Filter Bar supports expanding and collapsing the applied filters section
+- This can simplify the visual noise around the data set, especially when many filters are applied
+- When no filters are applied, the Filter Bar is collapsed by default. Otherwise, if the Filter Bar is expanded, the applied filters will display an empty state.
+- The Filter Bar expands automatically when one or more filters are applied
+
+## Search
+
+## Bulk actions
+
+The Filter Bar supports bulk actions corresponding with our recommendations for [multi-select](/patterns/table-multi-select) within a table, and can be used to perform bulk actions such as edit, delete, and different types of selection across the data set.
+
+![Example of bulk actions]()
+
+## Generic content
+
+If custom functionality is needed for manipulating the view or contents of the data set, a generic block is grouped with the bulk actions in the Filter Bar. We aren't prescriptive about what can be passed to this generic block, but it should generally be limited to additional actions (as [Buttons](/components/button)) and [Dropdowns](/components/dropdown) with multiple grouped actions.
+
+![Example of generic content]()
+
+## Applied filters
+
+Applied filters are represented within a [Tag](/components/tag) displaying the filter parameter (the category or column the filter corresponds to) and the filter value (corresponding with the specific cell content).
+
+![](/assets/components/filter-bar/filter-bar-tag-example.png)
+
+<!-- Include information about how/if this can be customized -->
+
+### Tag truncation
+
+<!-- Consider whether it's useful to include something like this -->
+
+## Filter dropdown
+
+### Methods
+
+#### Multi-selection
+
+#### Single-selection
+
+#### Numbers
+
+#### Dates & times
+
+#### Method options
+
+#### Filter ranges
+
+#### Search across filter values
+
+## Applying Filters
+
+## Clearing filters
+
+## Empty state
+

website/docs/components/filter-bar/partials/specifications/anatomy.md

@@ -0,0 +1,10 @@
+## Anatomy
+
+### Filter Bar
+
+![Filter Bar anatomy](/assets/components/filter/filter-bar-anatomy.png)
+
+| Element          | Usage                  |
+|------------------|------------------------|
+| object 1         | Required               |
+| object 2         | Optional               |

website/docs/components/filter-bar/partials/specifications/states.md

@@ -0,0 +1 @@
+## States

website/tests/acceptance/components/filter-bar-test.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'website/tests/helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+module('Acceptance | components/filter-bar', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /components/filter-bar', async function (assert) {
+    await visit('/components/filter-bar');
+
+    assert.strictEqual(currentURL(), '/components/filter-bar');
+  });
+
+  test('components/card page passes automated a11y checks', async function (assert) {
+    await visit('/components/filter-bar');
+    await a11yAudit();
+    assert.ok(true, 'a11y automation audit passed');
+  });
+});