From 6455d15ede86baaa8dd571bd25f6f0658f73e884 Mon Sep 17 00:00:00 2001
From: Kenji Shiroma <kenjishiromajp@gmail.com>
Date: Thu, 23 Nov 2023 11:18:37 +1000
Subject: [PATCH] fixes #343 breadcrumbs example

---
 .../alert/design/user-experience/content.mdoc |  2 +-
 .../breadcrumb/accessibilityDemo.mdoc         | 62 +++++++++++++------
 .../components/breadcrumb/code.mdoc           | 60 ++++++++++++------
 3 files changed, 86 insertions(+), 38 deletions(-)

diff --git a/apps/site/src/content/design-system/components/alert/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/alert/design/user-experience/content.mdoc
index ccb4af382..a07131f24 100644
--- a/apps/site/src/content/design-system/components/alert/design/user-experience/content.mdoc
+++ b/apps/site/src/content/design-system/components/alert/design/user-experience/content.mdoc
@@ -5,7 +5,7 @@ Use alerts to draw attention to specific messages in a particular context. They
 #### Alert types
 
 **Success:** The green message colour and tick icon is used to communicate successful completion of a process or task. It is commonly used with confirmation messaging, the intention is to provide confidence that a process has been completed successfully and the user can now move on.
-
+  
 **Information:** The blue message colour and info icon is used to convey useful information. It should be used for things like instructions, feedback about information that has been provided, or high-level information about a system or process. This style provides flexibility to use a different icon. To remain accessible, do not use any of the default icons that are used for the other alert types.
 
 **Warning:** The orange message colour and warning icon is for use in scenarios where the user needs to understand something before proceeding. It is saved for necessary messaging but not for error messages. For example, ‘this process will time-out in 3 min’ - use it as a ‘Watch out’, rather than a stop.
diff --git a/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc
index c3403b71f..4cce98db2 100644
--- a/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc
@@ -1,21 +1,47 @@
 ```jsx
 // Using the Link component (as NextLink) from 'next/LinkLink'
-<Breadcrumb>
-  <NextLink href="#test" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isDisabled tag="a">
-      Disabled item
-    </Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isCurrent tag="a">
-      Last item
-    </Breadcrumb.Item>
-  </NextLink>
-</Breadcrumb>
+<div className="flex flex-col gap-5">
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Personal</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Personal</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#credit-cards" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Credit cards</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+  <Breadcrumb>
+    <NextLink href="#test" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item isDisabled tag="a">
+        Disabled item
+      </Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">
+        Last item
+      </Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+</div>
 ```
diff --git a/apps/site/src/content/design-system/components/breadcrumb/code.mdoc b/apps/site/src/content/design-system/components/breadcrumb/code.mdoc
index abc753609..6e6a7aeb1 100644
--- a/apps/site/src/content/design-system/components/breadcrumb/code.mdoc
+++ b/apps/site/src/content/design-system/components/breadcrumb/code.mdoc
@@ -1,23 +1,45 @@
-## Breadcrumb
+### Default breadcrumb
 
 ```jsx
 // Using the Link component (as NextLink) from 'next/LinkLink'
-<Breadcrumb>
-  <NextLink href="#test" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isDisabled tag="a">
-      Disabled item
-    </Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isCurrent tag="a">
-      Last item
-    </Breadcrumb.Item>
-  </NextLink>
-</Breadcrumb>
+<div>
+  <Breadcrumb>
+    <NextLink href="#test" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item isDisabled tag="a">
+        Disabled item
+      </Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#another" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">
+        Last item
+      </Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+</div>
+```
+
+### As router
+
+```jsx
+<div>
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Personal</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#credit-cards" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">
+        Credit cards
+      </Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+</div>
 ```