facet-filter-sort


> Note: this is a "labs" component. While functional, these tasks are prerequisites to promotion to BrightspaceUI "official" status:
>
> - [ ] Design organization buy-in
> - [ ] design.d2l entry
> - [ ] Architectural sign-off
> - [x] Continuous integration
> - [x] Cross-browser testing
> - [x] Unit tests (if applicable)
> - [ ] Accessibility tests
> - [ ] Visual diff tests
> - [ ] Localization with Serge (if applicable)
> - [x] Demo page
> - [ ] README documentation

Collection of old filter and sort components. Use the d2l-filter in BrightspaceUI/core. A sort dropdown component will be coming to core eventually.

Installation

``shell
npm install @brightspace-ui-labs/facet-filter-sort
`

Components

- d2l-labs-sort-by-dropdown

$3

#### Usage

To Do

Deprecated Components

- d2l-labs-filter-dropdown
- d2l-labs-applied-filters

$3

DEPRECATED: Use d2l-filter in BrightspaceUI/core.

#### Usage

Import the three filter components:

`html

`

Then, add the d2l-labs-filter-dropdown as the top level filter component. For each filter category, add a d2l-labs-filter-dropdown-category component, which is a custom d2l-tab-panel that includes a d2l-menu. Then, for each filter option in that category, you should use the d2l-labs-filter-dropdown-option component (which is a custom d2l-menu-item component). For example:

`html
















`

The default lang terms can be overridden by setting the appropriate attributes.

`html






`

#### Attributes

d2l-labs-filter-dropdown:

- max-width (optional): Sets the max-width of the filter dropdown.
- min-width (optional): Sets the min-width of the filter dropdown.
- total-selected-option-count: The total number of selected filter options across all categories. When options are selected and de-selected, the consumer is responsible for updating this number after updating its own data store.
- header-text (optional): Sets the text for the filter content header.
- opener-text (optional): Sets the text for the opener when there are no selections.
- opener-text-single (optional): Sets the text for the opener when there is a single selection.
- opener-text-multiple (optional): Sets the text for the opener when there are multiple selections.
- disable-opener-text-variation (optional): Disables displaying different text for different number of selections, instead always displaying the term for no selections.

Note that for the header and opener text overrides, if the terms are to reflect the number of selections (e.g. Sending To 3 Selections), the consumer is responsible for updating those terms when the number of selections change.

d2l-labs-filter-dropdown-category:

- category-text: Name of the filter category, will be shown on the tab.
- disable-search (optional): Hides the search bar inside a filter tab.
- key: Unique id to represent a filter category, sent back in category events.
- search-value (optional): Sets the value in the search input, useful if setting up the filter in a default state.
- selected-option-count: The number of selected filter options for that filter category. When options are selected and de-selected, the consumer is responsible for updating this number after updating its own data store.

d2l-labs-filter-dropdown-option:

- text: Text of the filter option.
- value: Value returned in the change event.
- selected (optional): If added, this item will be selected by default.

#### Events

d2l-labs-filter-dropdown:

- d2l-labs-filter-dropdown-close: Fired when the filter dropdown is closed.
- d2l-labs-filter-dropdown-cleared: Fired when the clear button or the clear filters button is pressed to clear all filters.

d2l-labs-filter-dropdown-category:

- d2l-labs-filter-dropdown-category-selected: Fired when a filter tab is selected.
- d2l-labs-filter-dropdown-category-searched: Fired when a filter category is searched.
- d2l-labs-filter-dropdown-option-change: Fired when a filter option is selected.

$3

A tag-list allowing the user to see (and remove) the currently applied filters. Works with the d2l-labs-filter-dropdown above.

NOTE: This component uses the slotchange event and so will not work if you require IE support

#### Attributes

- for: The id of the d2l-labs-filter-dropdown you want to track.
- label-text (optional): The text displayed in this component's label. Defaults to "Applied Filters:".

#### Usage

Set the for param to be the id of the d2l-labs-filter-dropdown that you want to track.
This also works if the d2l-labs-filter-dropdown is a child in the shadow-dom of the element referenced by the id.

`html

...
`

Developing

After cloning the repo, run npm install to install dependencies.

$3

To start a @web/dev-server that hosts the demo page and tests:

`shell
npm start
`

$3

`shell


eslint, lit-analyzer, polymer lint and style linting

npm run lint

eslint only

npm run lint:eslint
`

$3

`shell


lint & run headless unit tests

npm test

unit tests only

npm run test:headless

debug or run a subset of local unit tests

npm run test:headless:watch
`

$3

This repo is configured to use semantic-release. Commits prefixed with fix: and feat: will trigger patch and minor releases when merged to main`.

To learn how to create major releases and release from maintenance branches, refer to the semantic-release GitHub Action documentation.