From 96e03899cc9e00004affafa1a756ccf167c55721 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 26 Feb 2021 15:52:57 -0600
Subject: [PATCH] fix(breadcrumb): demo matches usage guidelines

---
 src/pages/components/breadcrumb/code.mdx  | 27 ++++++++++++++++++-----
 src/pages/components/breadcrumb/usage.mdx | 27 ++++++++++++++++++-----
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/pages/components/breadcrumb/code.mdx b/src/pages/components/breadcrumb/code.mdx
index 873ff4b9180..0974b48b384 100755
--- a/src/pages/components/breadcrumb/code.mdx
+++ b/src/pages/components/breadcrumb/code.mdx
@@ -52,16 +52,31 @@ usage documentation, see the Storybooks for each framework below.
 
 <ComponentDemo
   components={[
+    { id: 'breadcrumb', label: 'Breadcrumb' },
     {
-      id: 'breadcrumb',
-      label: 'Breadcrumb',
+      id: 'currentPage',
+      label: 'Current page breadcrumb',
     },
   ]}>
+  <ComponentVariant
+    id="currentPage"
+    links={{
+      React:
+        'http://react.carbondesignsystem.com/?path=/story/breadcrumb--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--basic',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+    }}>{`
+<Breadcrumb noTrailingSlash>
+  <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
+  <BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
+  <BreadcrumbItem isCurrentPage href="/">Breadcrumb 3</BreadcrumbItem>
+</Breadcrumb>
+`}</ComponentVariant>
   <ComponentVariant
     id="breadcrumb"
-    knobs={{
-      Breadcrumb: ['noTrailingSlash'],
-    }}
     links={{
       React:
         'http://react.carbondesignsystem.com/?path=/story/breadcrumb--default',
@@ -74,7 +89,7 @@ usage documentation, see the Storybooks for each framework below.
 <Breadcrumb>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
   <BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
-  <BreadcrumbItem isCurrentPage href="/">Breadcrumb 3</BreadcrumbItem>
+  <BreadcrumbItem href="/">Breadcrumb 3</BreadcrumbItem>
 </Breadcrumb>
 `}</ComponentVariant>
 </ComponentDemo>
diff --git a/src/pages/components/breadcrumb/usage.mdx b/src/pages/components/breadcrumb/usage.mdx
index 9de8e6723a8..f7c60aeff4e 100755
--- a/src/pages/components/breadcrumb/usage.mdx
+++ b/src/pages/components/breadcrumb/usage.mdx
@@ -63,16 +63,31 @@ type used should be consistent across a product.
 
 <ComponentDemo
   components={[
+    { id: 'breadcrumb', label: 'Breadcrumb' },
     {
-      id: 'breadcrumb',
-      label: 'Breadcrumb',
+      id: 'currentPage',
+      label: 'Current page breadcrumb',
     },
   ]}>
+  <ComponentVariant
+    id="currentPage"
+    links={{
+      React:
+        'http://react.carbondesignsystem.com/?path=/story/breadcrumb--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--basic',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+    }}>{`
+<Breadcrumb noTrailingSlash>
+  <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
+  <BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
+  <BreadcrumbItem isCurrentPage href="/">Breadcrumb 3</BreadcrumbItem>
+</Breadcrumb>
+`}</ComponentVariant>
   <ComponentVariant
     id="breadcrumb"
-    knobs={{
-      Breadcrumb: ['noTrailingSlash'],
-    }}
     links={{
       React:
         'http://react.carbondesignsystem.com/?path=/story/breadcrumb--default',
@@ -85,7 +100,7 @@ type used should be consistent across a product.
 <Breadcrumb>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
   <BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
-  <BreadcrumbItem isCurrentPage href="/">Breadcrumb 3</BreadcrumbItem>
+  <BreadcrumbItem href="/">Breadcrumb 3</BreadcrumbItem>
 </Breadcrumb>
 `}</ComponentVariant>
 </ComponentDemo>