[react] feat: Added docs for components/Breadcrumbs

packages/react/components/Breadcrumbs/index.mjs

@@ -1,12 +1,16 @@
 import React from 'react'
 
-/*
+/**
- * The actual Breadcrumbs component
+ * A component to render breadcrumbs
  *
- * @param {object} props - All the React props
+ * This is a pure render component, you need to pass in the data.
- * @param {array} props.crumbs - The crumbs, an array with objects with href, label keys
+ *
- * @param {function} Link - An optional custom component to use to render the Link
+ * @component
- * @param {text} title - The title of the current page
+ * @param {object} props - All component props
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @param {array} [props.crumbs = []] - The crumbs, an array with objects with href & label properties
+ * @param {text} title - The title of the current (final) page the breadcrumbs lead to
+ * @returns {JSX.Element}
  */
 export const Breadcrumbs = ({ crumbs = [], title, Link = false }) => {
   if (Link === false) Link = RegularLink
@@ -18,13 +22,16 @@ export const Breadcrumbs = ({ crumbs = [], title, Link = false }) => {
         style={{ paddingLeft: 0 }}
       >
         <li className="tw:inline">
-          <Link href="/">Home</Link>
+          <Link href="/"><b>Home</b></Link>
         </li>
         <Spacer />
         {crumbs.map((crumb, i) => (
-          <li key={i} className="tw:inline">
+          <React.Fragment key={i}>
-            <Link href={crumb.href}>{crumb.label}</Link>
+            <li key={i} className="tw:inline">
-          </li>
+              <Link href={crumb.href}>{crumb.label}</Link>
+            </li>
+            <li key={i} className="tw:inline"><Spacer /></li>
+          </React.Fragment>
         ))}
         <li className="tw:inline">{title}</li>
       </ul>

packages/react/mkdocs.sh

@@ -3,4 +3,5 @@ mkdir -p ./docs/components
 
 jsdoc -c jsdoc.json components/Account/* > ../../sites/dev/prebuild/jsdoc/react/components/account.json
 jsdoc -c jsdoc.json components/Admin/* > ../../sites/dev/prebuild/jsdoc/react/components/admin.json
+jsdoc -c jsdoc.json components/Breadcrumbs/* > ../../sites/dev/prebuild/jsdoc/react/components/breadcrumbs.json
 jsdoc -c jsdoc.json components/Button/* > ../../sites/dev/prebuild/jsdoc/react/components/button.json

sites/dev/docs/reference/packages/react/components/breadcrumbs/_examples.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Breadcrumbs } from '@freesewing/react/components/Breadcrumbs'
+
+export const BreadcrumbsExample = () => (
+  <Breadcrumbs
+    title="Breadcrumbs"
+    crumbs={[
+      { href: '/reference/', label: 'Reference' },
+      { href: '/reference/packages/', label: 'Packages' },
+      { href: '/reference/packages/@freesewing/react/', label: '@freesewing/react' },
+      { href: '/reference/packages/@freesewing/react/components/', label: 'React Components' },
+    ]}
+  />
+)
+

sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx

@@ -2,6 +2,23 @@
 title: Breadcrumbs
 ---
 
-:::note
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-This page is yet to be created
+import { ComponentDocs } from '@site/src/components/component-docs.js'
-:::
+import { MiniNote } from '@freesewing/react/components/Mini'
+import { jsdocBreadcrumbs } from '@site/prebuild/jsdoc/components.breadcrumbs.mjs'
+import { BreadcrumbsExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+The **Breadcrumbs** component family provides the following components:
+
+- [Breadcrumbs ](#breadcrumbs)
+
+## Breadcrumbs
+
+<MiniNote>This component is different from the Docusaurus breadcrumbs</MiniNote>
+<br />
+<ComponentDocs docs={jsdocBreadcrumbs} example={BreadcrumbsExample} />
+
+</DocusaurusDoc>
+