[CI-4303] Update Code Examples - Groups (#152)

* Update code examples for Groups

* Add instruction

---------

Co-authored-by: Evan Yan <evan.yan@constructor.io>

Author: evanyan13

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

@@ -20,16 +20,26 @@ A separate filter component that allows you to filter down by groups.
 
 ## Basic example
 
+To view the examples and see this component in action
+
+- **Search** - append your URL with `?q=shirt`
+
 ```jsx
-import React from 'react';
-import { CioPlp, Groups } from '@constructor-io/constructorio-ui-plp';
+import { CioPlp, CioPlpGrid, Groups, utils } 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 MyComponent() {
+export default function MyComponent() {
   return (
-    <CioPlp apiKey={MY_API_KEY}>
-      <Groups />
+    <CioPlp apiKey={DEMO_API_KEY}>
+      <CioPlpGrid>
+        {(props) => {
+          if (utils.isPlpSearchDataResults(props.data)) {
+            return <Groups groups={props.data.response.groups} />;
+          }
+        }}
+      </CioPlpGrid>
     </CioPlp>
   );
 }
@@ -40,30 +50,42 @@ function MyComponent() {
 To override the default rendering of the Groups component, you may pass a Render Props function to the component.
 
 ```jsx
-import { CioPlp, Filters } from '@constructor-io/constructorio-ui-plp'
-
-const apiKey = 'MY_API_KEY';
-
-function MyCustomGroupFilter(props) {
-  const {groups, initialNumOptions} = props
-
-  return (
-    <>
-      {/* CUSTOM_MARKUP_HERE */}
-    </>
-  );
+import { CioPlp, CioPlpGrid, Groups, utils } from '@constructor-io/constructorio-ui-plp';
+import '@constructor-io/constructorio-ui-plp/styles.css';
+
+const DEMO_API_KEY = 'key_M57QS8SMPdLdLx4x';
+
+function MyCustomGroups(props) {
+  const {
+    groupOptions,
+    currentGroupId,
+    breadcrumbs,
+    currentPage,
+    initialNumOptions,
+    isShowAll,
+    optionsToRender,
+  } = props;
+  return <pre>{JSON.stringify(groupOptions, null, 2)}</pre>;
 }
 
-function myApp() {
-  ...
-
+export default function MyComponent() {
   return (
-    <CioPlp apiKey={MY_API_KEY}>
-      <Groups>
-        <MyCustomGroupFilter />
-      </Groups>
+    <CioPlp apiKey={DEMO_API_KEY}>
+      <CioPlpGrid>
+        {(props) => {
+          if (utils.isPlpSearchDataResults(props.data)) {
+            return (
+              <Groups groups={props.data.response.groups}>
+                {(groupProps) => {
+                  return <MyCustomGroups {...groupProps} />;
+                }}
+              </Groups>
+            );
+          }
+        }}
+      </CioPlpGrid>
     </CioPlp>
-  )
+  );
 }
 ```