[CI-4303] Update Code Examples - Filters

src/stories/components/Filters/Code Examples.mdx

@@ -1,69 +1,85 @@
 import { Meta, Canvas, Markdown } from '@storybook/blocks';
 import * as FiltersStories from './Filters.stories';
-import UseFilterReturn from '../../hooks/UseFilter/UseFilterReturn.md?raw'
+import UseFilterReturn from '../../hooks/UseFilter/UseFilterReturn.md?raw';
 /* This "?raw" import raw text form the md file */
 
 <Meta of={FiltersStories} />
 
 # `Filters`
-The Filters component is a dynamic component that 
+
+The Filters component is a dynamic component that
 is responsible for displaying the filters available to the users.
 
 **Dynamic Options Rendering:**
+
 - Automatically updates and displays selected filters based on user requests
 
 <Canvas of={FiltersStories.Primary} />
 
 ## Basic example
-```jsx
-import React from 'react';
-import { CioPlp, Filters } from '@constructor-io/constructorio-ui-plp';
 
-const apiKey = 'MY_API_KEY';
+To view the examples and see this component in action
 
-function MyComponent() {
+- **Search** - append your URL with `?q=shirt`
+- **Browse** - append your URL with `/group_id/1035`
 
+```jsx
+import { CioPlp, CioPlpGrid, Filters } from '@constructor-io/constructorio-ui-plp';
+import '@constructor-io/constructorio-ui-plp/styles.css';
+
+const DEMO_API_KEY = 'key_M57QS8SMPdLdLx4x';
+
+export default function MyComponent() {
   return (
-    <CioPlp apiKey={MY_API_KEY}>
-      <Filters />
+    <CioPlp apiKey={DEMO_API_KEY}>
+      <CioPlpGrid>
+        {(props) => {
+          return <Filters facets={props.filters.facets} />;
+        }}
+      </CioPlpGrid>
     </CioPlp>
   );
 }
 ```
 
 ## Render Props pattern
+
 To override the default rendering of the Filters component, you may pass a Render Props function to the component.
 
 ```jsx
-import { CioPlp, Filters } from '@constructor-io/constructorio-ui-plp'
+import { CioPlp, CioPlpGrid, Filters } from '@constructor-io/constructorio-ui-plp';
+import '@constructor-io/constructorio-ui-plp/styles.css';
 
-const apiKey = 'MY_API_KEY';
+const DEMO_API_KEY = 'key_M57QS8SMPdLdLx4x';
 
 function MyCustomFilters(props) {
-  const {facets, setFilter} = props
-
-  return (
-    <>
-      {/* CUSTOM_MARKUP_HERE */}
-    </>
-  );
+  const { facets, setFilter } = props;
+  return <pre>{JSON.stringify(facets, null, 2)}</pre>;
 }
 
-function myApp() {
-  ...
-
+export default function MyComponent() {
   return (
-    <CioPlp apiKey={MY_API_KEY}>
-      <Filters />
-        <MyCustomFilters />
-      </Filters>
+    <CioPlp apiKey={DEMO_API_KEY}>
+      <CioPlpGrid>
+        {(props) => {
+          return (
+            <Filters facets={props.filters.facets}>
+              {(filterProps) => {
+                return <MyCustomFilters {...filterProps} />;
+              }}
+            </Filters>
+          );
+        }}
+      </CioPlpGrid>
     </CioPlp>
-  )
+  );
 }
 ```
 
 ### Arguments passed to children via Render Props
->Accessible to children of the Filters component via render props.
+
+> Accessible to children of the Filters component via render props.
 
 `UseFilterReturn`
+
 <Markdown>{UseFilterReturn}</Markdown>