Filter pattern docs (#4013)

* feat(filter): add form pills

* feat(filter): add different filter types

* feat(filter): add selected state for filter pills

* feat(filter): add clear all button

* feat(filter): add selected value label to pills

* feat(filter): add logic for room type filtering

* feat(filter): add logic for participants and date-time filtering

* feat(filter): fix popover opening on dismiss button

* feat(filter): add ts-expect-error for borderRadius

* feat(intellisense): add intellisense to recommended extensions

* feat(filter): refactor codebase

* feat(filter): fix ts issue

* feat(filter): remove test for 'all' room type

* feat(filter): add search filter example

* feat(filter): update search filter to include multiple columns

* feat(filter): refactor to remove search filter file

* feat(filter): update DefaultFilterGroup to accept filterList

* feat(filter): add ConditionalFilterGroupExample story

* feat(filter): refactor FilterPill component

* feat(filter): add Addfilter component

* feat(filter): fix dismiss button not working

* feat(filter): remove validation on non selection of filter items

* feat(filter): add ability to choose only one date

* feat(filter): refactor date/time to date-range

* feat(filter): satisfy typescript for multiselect

* feat(filter): add functionality to add filters

* feat(filter): add logic for add filter pill

* feat(filter): replace add filter pill with button

* feat(filter): add badge to add filter

* feat(filter): add FilterAction

* feat(filter): add unique name filter

* feat(filter): add room sid filter

* feat(filter): update example file

* fix(website): add missing { for sidepanel docs

* feat(filter): add host name filter

* feat(filter): add status filter

* feat(filter): add tags filter

* feat(filter): add logic for more filters

* feat(filter): improve state logic for sidepanel

* feat(filter): fix count badge issue

* feat(filter): add badge count for more filter button

* feat(filter): add department and platform filter

* feat(filter): fix padding issue on story

* feat(filter): rename filter group to filter

* feat(filter): add docs

* feat(filter): add code demos in docs

* feat(filter): format files

* feat(filter): rename FilterGroup to Filter

* feat(filter): remove clearCondition prop

* feat(filter): bring back the Filter group files

* feat(filter): website clean build

* feat(filter): add filter to sitemap-vrt

* feat(filter): add changeset

* feat(filter): remove changeset

* Apply suggestions from code review by @sara

Co-authored-by: Sarah <[email protected]>

* feat(website): add link to filter pattern doc

* feat(filter): implement changes from review

* feat(website): add redirect for filter-group to filter

* fix(filter): prevent filterbar overwriting sidebar filters

* fix(filter): improve state management

* feat(tokens): remove old filter-group tests

* fix(filter): update date format

* fix(filter): update images

* fix(filter): remove filter on click of "apply all" and "clear all"

* fix(filter): update content

* fix(filter): add comparision validation for filters

* fix(filter): remove filter-group from vrt

---------

Co-authored-by: Sarah <[email protected]>

.vscode/extensions.json

@@ -16,6 +16,7 @@
     "dsznajder.es7-react-js-snippets",
     "oouo-diogo-perdigao.docthis",
     "yzhang.markdown-all-in-one",
-    "davidanson.vscode-markdownlint"
+    "davidanson.vscode-markdownlint",
+    "TwilioPaste.vs-code-intellisense"
   ]
 }

cypress/integration/sitemap-vrt/constants.ts

@@ -294,7 +294,7 @@ export const SITEMAP = [
   "/patterns/confirmation/",
   "/patterns/delete/",
   "/patterns/data-export/",
-  "/patterns/filter-group/",
+  "/patterns/filter/",
   "/patterns/",
   "/patterns/empty-state/",
   "/patterns/error-state/",

packages/paste-website/next.config.mjs

@@ -64,6 +64,7 @@ const nextConfig = {
       },
       { source: "/articles", destination: "/blog", permanent: true },
       { source: "/patterns/navigation", destination: "/experiences/navigation", permanent: true },
+      { source: "/patterns/filter-group", destination: "/patterns/filter", permanent: true },
     ];
   },
   // https://nextjs.org/docs/pages/api-reference/next-config-js/headers

packages/paste-website/package.json

@@ -111,6 +111,7 @@
     "@twilio-paste/separator": "^8.1.1",
     "@twilio-paste/sibling-box": "^9.1.1",
     "@twilio-paste/side-modal": "^4.1.3",
+    "@twilio-paste/side-panel": "^1.0.0",
     "@twilio-paste/sidebar": "^1.1.1",
     "@twilio-paste/skeleton-loader": "^6.1.1",
     "@twilio-paste/slider": "^3.0.1",

packages/paste-website/src/__tests__/filterGroup.test.tsx

@@ -7,7 +7,7 @@ import {
   filterByRoomType,
   filterBySearchString,
   isEndDateBeforeStartDate,
-} from "../component-examples/filter-group/helpers";
+} from "../component-examples/filter/helpers";
 
 describe("filterBySearchString", () => {
   it("should filter by unique name", () => {
@@ -36,11 +36,6 @@ describe("filterByRoomType", () => {
     const result = filterByRoomType("Peer to Peer", "Group");
     expect(result).toBeFalsy();
   });
-
-  it("should always include if the filter is All", () => {
-    const result = filterByRoomType("Peer to Peer", "All");
-    expect(result).toBeTruthy();
-  });
 });
 
 describe("filterByDateRange", () => {

packages/paste-website/src/component-examples/filter/Examples.tsx

@@ -0,0 +1,18 @@
+/* DISCLAIMER: this is an example, not meant to be used in production */
+import { Anchor } from "@twilio-paste/anchor";
+import { Box } from "@twilio-paste/box";
+
+import { DefaultFilter } from "./components/DefaultFilter";
+import { TABLE_DATA } from "./constants";
+import type { FilterListType } from "./types";
+
+const filterList: FilterListType = ["roomType", "participants", "dateCompleted"];
+
+export const DefaultFilterGroupExample = (): JSX.Element => (
+  <Box marginBottom="space70" data-cy="filter-default-example">
+    <DefaultFilter data={TABLE_DATA} filterList={filterList} />
+    <Anchor showExternal href="https://codesandbox.io/s/default-filter-group-rloskb?file=/src/App.tsx">
+      <strong>View example in CodeSandbox</strong>
+    </Anchor>
+  </Box>
+);