FilterTag

FilterTag is an interactive component used to activate a filter on a large dataset.

Use when you want to filter data on a few parameters
- Consider Checkbox if you have an extensive list of parameters you want to filter on
FilterTag implements an a tag
- All native props will be forwarded to the element
Expects an href to a URL that returns filtered results
- This event can be intercepted with an onClick, but the anchor should still load a page with the current filtered data even if JS is disabled

This example will toggle the active state based on the URL filter parameter; only one filter can be applied in this basic example.

React props
Name	Type	Description
active	`boolean`	If `true`, the filter will marked as active
children	`ReactNode`	The content of the Tag
href	`string`	URL to a filtered dataset; often includes URL parameters

FilterTag is a straight-forward component that does not require special consideration for accessibility

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

render(
  <>
    <FilterTag active href="/?lasagna=true">
      Meatloaf
    </FilterTag>
    <FilterTag href="/?lasagna=true&meatloaf=true">Lasagna</FilterTag>
  </>,
);

const meatloafFilter = getByText('Meatloaf');
expect(meatloafFilter.href).toEqual('/?lasagna=true');
expect(meatloafFilter).toHaveTextContent('Remove:');

const lasagnaFilter = getByText('Lasagna');
expect(lasagnaFilter.href).toEqual('/?lasagna=true&meatloaf=true');
expect(lasagnaFilter).toHaveTextContent('Add:');