feat: add new components docs

WTTJ · Jul 9, 2024 · 72d8ff2 · 72d8ff2
1 parent 9074255
commit 72d8ff2
Show file tree

Hide file tree

Showing 32 changed files with 2,176 additions and 80 deletions.
diff --git a/packages/AspectRatio/docs/examples/overview.tsx b/packages/AspectRatio/docs/examples/overview.tsx
@@ -1,10 +1,14 @@
 import * as React from 'react'
 import { AspectRatio } from '@welcome-ui/aspect-ratio'
+import { Box } from '@welcome-ui/box'
 
 const Example = () => {
   return (
     <AspectRatio maxWidth={200}>
-      <img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" />
+      <Box
+        as="img"
+        src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80"
+      />
     </AspectRatio>
   )
 }

diff --git a/packages/Badge/docs/properties.json b/packages/Badge/docs/properties.json
@@ -0,0 +1,5 @@
+{
+  "Badge": {
+    "props": {}
+  }
+}
diff --git a/packages/Box/docs/properties.json b/packages/Box/docs/properties.json
@@ -0,0 +1,5 @@
+{
+  "Box": {
+    "props": {}
+  }
+}
diff --git a/packages/Breadcrumb/docs/properties.json b/packages/Breadcrumb/docs/properties.json
@@ -0,0 +1,214 @@
+{
+  "Breadcrumb": {
+    "props": {
+      "gradientBackground": {
+        "defaultValue": {
+          "value": "light-900"
+        },
+        "description": "color from theme, add for scroll gradient on mobile",
+        "name": "gradientBackground",
+        "parent": {
+          "fileName": "Breadcrumb/src/index.tsx",
+          "name": "BreadcrumbOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Breadcrumb/src/index.tsx",
+            "name": "BreadcrumbOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "lastChildNotClickable": {
+        "defaultValue": {
+          "value": true
+        },
+        "description": "set clickable or not the last child",
+        "name": "lastChildNotClickable",
+        "parent": {
+          "fileName": "Breadcrumb/src/index.tsx",
+          "name": "BreadcrumbOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Breadcrumb/src/index.tsx",
+            "name": "BreadcrumbOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "boolean",
+          "value": [
+            {
+              "value": "false"
+            },
+            {
+              "value": "true"
+            }
+          ]
+        }
+      },
+      "separator": {
+        "defaultValue": {
+          "value": "<RightIcon size=\"xs\" />"
+        },
+        "description": "",
+        "name": "separator",
+        "parent": {
+          "fileName": "Breadcrumb/src/index.tsx",
+          "name": "BreadcrumbOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Breadcrumb/src/index.tsx",
+            "name": "BreadcrumbOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "ReactNode",
+          "value": [
+            {
+              "value": "string"
+            },
+            {
+              "value": "number"
+            },
+            {
+              "value": "false"
+            },
+            {
+              "value": "true"
+            },
+            {
+              "value": "ReactElement<any, string | JSXElementConstructor<any>>",
+              "description": "",
+              "fullComment": "",
+              "tags": {}
+            },
+            {
+              "value": "ReactFragment",
+              "description": "",
+              "fullComment": "",
+              "tags": {}
+            },
+            {
+              "value": "ReactPortal",
+              "description": "",
+              "fullComment": "",
+              "tags": {}
+            }
+          ]
+        }
+      }
+    }
+  },
+  "Breadcrumb.Item": {
+    "props": {
+      "isActive": {
+        "defaultValue": null,
+        "description": "",
+        "name": "isActive",
+        "parent": {
+          "fileName": "Breadcrumb/src/Item.tsx",
+          "name": "ItemOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Breadcrumb/src/Item.tsx",
+            "name": "ItemOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "boolean",
+          "value": [
+            {
+              "value": "false"
+            },
+            {
+              "value": "true"
+            }
+          ]
+        }
+      },
+      "separator": {
+        "defaultValue": null,
+        "description": "",
+        "name": "separator",
+        "parent": {
+          "fileName": "Breadcrumb/src/Item.tsx",
+          "name": "ItemOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Breadcrumb/src/Item.tsx",
+            "name": "ItemOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "ReactNode",
+          "value": [
+            {
+              "value": "string"
+            },
+            {
+              "value": "number"
+            },
+            {
+              "value": "false"
+            },
+            {
+              "value": "true"
+            },
+            {
+              "value": "ReactElement<any, string | JSXElementConstructor<any>>",
+              "description": "",
+              "fullComment": "",
+              "tags": {}
+            },
+            {
+              "value": "ReactFragment",
+              "description": "",
+              "fullComment": "",
+              "tags": {}
+            },
+            {
+              "value": "ReactPortal",
+              "description": "",
+              "fullComment": "",
+              "tags": {}
+            }
+          ]
+        }
+      },
+      "to": {
+        "defaultValue": null,
+        "description": "",
+        "name": "to",
+        "parent": {
+          "fileName": "Breadcrumb/src/Item.tsx",
+          "name": "ItemOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Breadcrumb/src/Item.tsx",
+            "name": "ItemOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/ButtonGroup/docs/examples/overload.tsx b/packages/ButtonGroup/docs/examples/overload.tsx
@@ -0,0 +1,16 @@
+import { Button } from '@welcome-ui/button'
+import { ButtonGroup } from '@welcome-ui/button-group'
+import * as React from 'react'
+
+const Example = () => {
+  return (
+    <ButtonGroup size="sm" variant="tertiary">
+      <Button>First</Button>
+      <Button variant="secondary">Second</Button>
+      <Button variant="tertiary">Third</Button>
+      <Button variant="ghost">Last</Button>
+    </ButtonGroup>
+  )
+}
+
+export default Example
diff --git a/packages/ButtonGroup/docs/examples/overview.tsx b/packages/ButtonGroup/docs/examples/overview.tsx
@@ -0,0 +1,16 @@
+import { Button } from '@welcome-ui/button'
+import { ButtonGroup } from '@welcome-ui/button-group'
+import * as React from 'react'
+
+const Example = () => {
+  return (
+    <ButtonGroup>
+      <Button>First</Button>
+      <Button>Second</Button>
+      <Button>Third</Button>
+      <Button>Last</Button>
+    </ButtonGroup>
+  )
+}
+
+export default Example
diff --git a/packages/ButtonGroup/docs/index.mdx b/packages/ButtonGroup/docs/index.mdx
@@ -0,0 +1,13 @@
+---
+category: forms
+description: The Button Group component arranges multiple buttons in a horizontal or vertical stack, allowing users to group related actions together. It provides a cohesive and organized way to present multiple buttons, ensuring consistent spacing and alignment.
+packageName: button-group
+title: ButtonGroup
+usage: import { ButtonGroup } from @welcome-ui/button-group
+---
+
+### Overload
+
+`ButtonGroup` overloads the child components properties.
+
+<div data-playground="overload.tsx" data-component="ButtonGroup"></div>