[CI-4303] Update Code Examples - Breadcrumbs (#148)

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

Author: evanyan13

src/stories/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -3,6 +3,7 @@ import { Meta } from '@storybook/react';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 import CioPlp from '../../../components/CioPlp';
 import { DEMO_API_KEY } from '../../../constants';
+import '../../../styles.css';
 
 const meta = {
   title: 'Components/Breadcrumbs',

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

@@ -2,7 +2,7 @@ import { Meta, Canvas, Story, Controls, Markdown } from '@storybook/blocks';
 import meta, {
   Primary,
   FourOrLessParentBreadcrumbs,
-  MoreThanFourParentBreadcrumbs
+  MoreThanFourParentBreadcrumbs,
 } from './Breadcrumbs.stories';
 
 <Meta of={meta} />
@@ -25,32 +25,35 @@ A navigation component to render a visual trail of the current user position in
 
 ## Basic example
 
+- This component is only available on **Browse Pages**.
+- To view the examples and see this component in action, append your URL with `/group_id/1035`, as this corresponds to a Browse Page.
+
 ```jsx
-import { Breadcrumbs, CioPlp } from '@constructor-io/constructorio-ui-plp'
-
-function myApp() {
-  const groups = [
-    ...
-    {
-      group_id: 'coffee',
-      display_name: 'Coffee',
-      count: 2,
-      data: {},
-      children: [],
-      parents: [
-        {
-          display_name: 'All',
-          group_id: 'all',
-        },
-      ],
-    }
-  ];
+import { Breadcrumbs, CioPlp, CioPlpGrid, utils } from '@constructor-io/constructorio-ui-plp';
+import '@constructor-io/constructorio-ui-plp/styles.css';
+
+const DEMO_API_KEY = 'key_M57QS8SMPdLdLx4x';
 
+/**
+ * Append your URL with /group_id/1035 to see the component in action
+ */
+export default function MyComponent() {
   return (
-    <CioPlp apiKey={YOUR_API_KEY}>
-      <Breadcrumbs groups={groups} filterValue="coffee" />
+    <CioPlp apiKey={DEMO_API_KEY}>
+      <CioPlpGrid>
+        {(props) => {
+          if (utils.isPlpBrowseDataResults(props.data) && props.browseFilterValue) {
+            return (
+              <Breadcrumbs
+                groups={props.data.response.groups}
+                filterValue={props.browseFilterValue}
+              />
+            );
+          }
+        }}
+      </CioPlpGrid>
     </CioPlp>
-  )
+  );
 }
 ```
 
@@ -61,43 +64,6 @@ When there's four or less parent breadcrumbs relative to the current group, the
 <Canvas sourceState='none'>
   <Story of={FourOrLessParentBreadcrumbs} />
 </Canvas>
-```jsx
-import { Breadcrumbs, CioPlp} from '@constructor-io/constructorio-ui-plp'
-
-function myApp() {
-  const groups = [
-    ...
-    {
-      group_id: 'coffee-accessories',
-      display_name: 'Coffee Accessories',
-      count: 2,
-      data: {},
-      children: [],
-      parents: [
-        {
-          display_name: 'All',
-          group_id: 'all',
-        },
-        {
-          display_name: 'Coffee',
-          group_id: 'coffee',
-        },
-        {
-          display_name: 'Coffee Tools',
-          group_id: 'coffee-tools',
-        },
-      ],
-    },
-  ]
-
-  return (
-    <CioPlp apiKey={YOUR_API_KEY}>
-      <Breadcrumbs groups={groups} filterValue="coffee-accessories" />
-    </CioPlp>
-  )
-}
-
-```
 
 ## More than four parent Breadcrumbs
 
@@ -108,56 +74,3 @@ When more than four parent breadcrumbs are present relative to the current group
     <Story of={MoreThanFourParentBreadcrumbs} />
   </div>
 </Canvas>
-```jsx
-import { Breadcrumbs, CioPlp} from '@constructor-io/constructorio-ui-plp'
-
-function myApp() {
-  const groups = [
-    ...
-    {
-      group_id: 'coffee-manual-grinders-espresso-ceramic',
-      display_name: 'Manual Coffee Grinders for Espresso with Ceramic Conical Burrs',
-      count: 2,
-      data: {},
-      children: [],
-      parents: [
-        {
-          display_name: 'All',
-          group_id: 'all',
-        },
-        {
-          display_name: 'Coffee',
-          group_id: 'coffee',
-        },
-        {
-          display_name: 'Coffee Tools',
-          group_id: 'coffee-tools',
-        },
-        {
-          display_name: 'Coffee Grinders',
-          group_id: 'coffee-grinders',
-        },
-        {
-          display_name: 'Manual Coffee Grinders',
-          group_id: 'manual-coffee-grinders',
-        },
-        {
-          display_name: 'Manual Espresso Grinders',
-          group_id: 'manual-espresso-grinders',
-        },
-        {
-          display_name: 'Manual Espresso Grinders with Conical Burrs',
-          group_id: 'manual-espresso-grinders-conical',
-        },
-      ],
-    },
-  ]
-
-  return (
-    <CioPlp apiKey={YOUR_API_KEY}>
-      <Breadcrumbs groups={groups} filterValue="coffee-manual-grinders-espresso-ceramic" />
-    </CioPlp>
-  )
-}
-
-```