twilio-labs · kodiakhq · Aug 20, 2024 · Jul 26, 2024 · Jul 29, 2024 · Jul 30, 2024
diff --git a/.vscode/extensions.json b/.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"
   ]
 }
diff --git a/cypress/integration/filter-group-examples/index.spec.ts b/cypress/integration/filter-group-examples/index.spec.ts
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/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/",

diff --git a/packages/paste-icons/build.icon-list.js b/packages/paste-icons/build.icon-list.js
diff --git a/packages/paste-icons/json/icons.json b/packages/paste-icons/json/icons.json
diff --git a/packages/paste-website/next.config.mjs b/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

diff --git a/packages/paste-website/package.json b/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",

diff --git a/packages/paste-website/src/__tests__/filterGroup.test.tsx b/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", () => {

diff --git a/packages/paste-website/src/assets/images/patterns/filter-dynamic.png b/packages/paste-website/src/assets/images/patterns/filter-dynamic.png
diff --git a/packages/paste-website/src/assets/images/patterns/filter-fetching.png b/packages/paste-website/src/assets/images/patterns/filter-fetching.png
diff --git a/packages/paste-website/src/assets/images/patterns/filter-filter_bar.png b/packages/paste-website/src/assets/images/patterns/filter-filter_bar.png
diff --git a/packages/paste-website/src/assets/images/patterns/filter-main.png b/packages/paste-website/src/assets/images/patterns/filter-main.png
diff --git a/packages/paste-website/src/assets/images/patterns/filter-responsive.png b/packages/paste-website/src/assets/images/patterns/filter-responsive.png
diff --git a/packages/paste-website/src/assets/images/patterns/filter-responsive_2.png b/packages/paste-website/src/assets/images/patterns/filter-responsive_2.png
diff --git a/packages/paste-website/src/assets/images/patterns/filter-usage.png b/packages/paste-website/src/assets/images/patterns/filter-usage.png
diff --git a/packages/paste-website/src/component-examples/filter/Examples.tsx b/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>
+);