fix(react): fix Breadcrumb separator using incorrect type; update to …

…v2 documentation (#983)
dequelabs · Mar 23, 2023 · 336beca · 336beca
1 parent ce7d629
commit 336beca
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 90 deletions.
diff --git a/docs/components/ComponentProps.tsx b/docs/components/ComponentProps.tsx
@@ -29,11 +29,11 @@ interface Props {
         type?: string | string[];
       }
     | boolean;
-  ref?: string;
+  refType?: string;
   props: ComponentProps[];
 }
 
-function TableProps({ children, ref, props }: Props) {
+function TableProps({ children, refType, props }: Props) {
   return (
     <Table className="Component__Props">
       <TableHead>
@@ -82,10 +82,10 @@ function TableProps({ children, ref, props }: Props) {
             </TableRow>
           )
         )}
-        {ref && (
+        {refType && (
           <TableRow>
-            <TableCell>Ref</TableCell>
-            <TableCell>{ref}</TableCell>
+            <TableCell>ref</TableCell>
+            <TableCell>React.RefObject&lt;{refType}&gt;</TableCell>
             <TableCell></TableCell>
             <TableCell>
               A ref pointed to the element rendered by this component.
@@ -100,7 +100,7 @@ function TableProps({ children, ref, props }: Props) {
 function DescriptionListProps({
   children,
   props,
-  ref,
+  refType,
   collapsed
 }: Props & { collapsed?: boolean }) {
   return (
@@ -166,7 +166,7 @@ function DescriptionListProps({
           </li>
         )
       )}
-      {ref && (
+      {refType && (
         <li>
           <DescriptionList collapsed={collapsed}>
             <DescriptionListItem>
@@ -175,7 +175,7 @@ function DescriptionListProps({
             </DescriptionListItem>
             <DescriptionListItem>
               <DescriptionTerm>Type</DescriptionTerm>
-              <DescriptionDetails>{ref}</DescriptionDetails>
+              <DescriptionDetails>{refType}</DescriptionDetails>
             </DescriptionListItem>
             <DescriptionListItem>
               <DescriptionTerm>Description</DescriptionTerm>
@@ -190,7 +190,11 @@ function DescriptionListProps({
   );
 }
 
-export default function ComponentProps({ children, props }: Props) {
+export default function ComponentProps({
+  children,
+  refType,
+  props = []
+}: Props) {
   const [narrow, setNarrow] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
 
@@ -223,9 +227,10 @@ export default function ComponentProps({ children, props }: Props) {
     <DescriptionListProps
       children={children}
       props={props}
+      refType={refType}
       collapsed={collapsed}
     />
   ) : (
-    <TableProps children={children} props={props} />
+    <TableProps children={children} refType={refType} props={props} />
   );
 }
diff --git a/docs/pages/components/Breadcrumb.mdx b/docs/pages/components/Breadcrumb.mdx
@@ -0,0 +1,69 @@
+---
+title: Breadcrumb
+description: The Breadcrumb component displays a list of links within a hierarchy and allows navigation back through them.
+source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/Breadcrumb/Breadcrumb.tsx
+---
+
+import { Icon, Breadcrumb, BreadcrumbLink, BreadcrumbItem } from '@deque/cauldron-react'
+
+```js
+import {
+  Breadcrumb,
+  BreadcrumbLink,
+  BreadcrumbItem
+} from '@deque/cauldron-react'
+```
+
+## Examples
+
+### Basic
+
+```jsx example
+<Breadcrumb aria-label="Breadcrumb">
+  <BreadcrumbLink href="/one">One</BreadcrumbLink>
+  <BreadcrumbLink href="/two">Two</BreadcrumbLink>
+  <BreadcrumbLink href="/three">Three</BreadcrumbLink>
+  <BreadcrumbItem>Four</BreadcrumbItem>
+</Breadcrumb>
+```
+
+### Custom Separators
+
+```jsx example
+<Breadcrumb aria-label="Breadcrumb" separator={<Icon type="chevron-double-right" />}>
+  <BreadcrumbLink href="#">One</BreadcrumbLink>
+  <BreadcrumbLink href="#">Two</BreadcrumbLink>
+  <BreadcrumbLink href="#">Three</BreadcrumbLink>
+  <BreadcrumbItem>Four</BreadcrumbItem>
+</Breadcrumb>
+```
+
+## Props
+
+### Breadcrumb
+
+<ComponentProps
+  children={true}
+  refType="HTMLElement"
+  props={[
+    {
+      name: 'separator',
+      type: 'React.ReactNode',
+      defaultValue: "'/'"
+    }
+  ]}
+/>
+
+### BreadcrumbLink
+
+<ComponentProps
+  children={true}
+  refType="HTMLLinkElement"
+/>
+
+### BreadcrumbItem
+
+<ComponentProps
+  children={true}
+  refType="HTMLSpanElement"
+/>
diff --git a/docs/patterns/components/Breadcrumb/index.js b/docs/patterns/components/Breadcrumb/index.js
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { Cauldron } from '../../types';
 
 type BreadcrumbProps = {
-  separator?: string;
+  separator?: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement> &
   Cauldron.LabelProps;