docs(docs): primitives props documentation (#1554)

vtex · Apr 15, 2024 · 269b916 · 269b916
2 parents efcc3b7 + ecf5c61
commit 269b916
Show file tree

Hide file tree

Showing 46 changed files with 223 additions and 299 deletions.
diff --git a/packages/docs/pages/components/_meta.json b/packages/docs/pages/components/_meta.json
@@ -32,22 +32,18 @@
   "textarea": "Textarea",
   "toast-stack": "ToastStack",
   "tooltip": "Tooltip",
+
   "Primitives": { "type": "separator", "title": "Primitives" },
   "accessible-icon": "AccessibleIcon",
   "clickable": "Clickable",
-  "combobox-input": "ComboboxInput",
-  "combobox-item": "ComboboxItem",
-  "combobox-list": "ComboboxList",
-  "combobox-popover": "ComboboxPopover",
-  "composable": "Composable",
+  "combobox": "Combobox",
   "compose": "Compose",
   "locale-provider": "LocaleProvider",
   "visually-hidden": "VisuallyHidden",
 
   "Layout": { "type": "separator", "title": "Layout" },
   "bleed": "Bleed",
   "center": "Center",
-  "container": "Container",
   "content": "Content",
   "flex": "Flex",
   "grid": "Grid",

diff --git a/packages/docs/pages/components/center.mdx b/packages/docs/pages/components/center.mdx
@@ -1,5 +1,9 @@
 # Center
 
-Center is a layout component that centers its child within itself.
+<ComponentDescription name="center" />
 
-![Center example](public/assets/overview-center.webp)
+<Preview name="center" />
+
+## Optional props
+
+<PropsDocs name="center" />
diff --git a/packages/docs/pages/components/center/_meta.json b/packages/docs/pages/components/center/_meta.json
diff --git a/packages/docs/pages/components/center/api-reference.mdx b/packages/docs/pages/components/center/api-reference.mdx
diff --git a/packages/docs/pages/components/checkbox.mdx b/packages/docs/pages/components/checkbox.mdx
@@ -1,10 +1,17 @@
 # Checkbox
 
-A single Checkbox represents binary choices, such as accepting terms and conditions or activating and deactivating notifications.
+<ComponentDescription name="checkbox" />
 
-![Checkbox example](public/assets/overview-checkbox.webp)
+## Required props
+
+<PropsDocs name="checkbox" required />
+
+## Optional props
+
+<PropsDocs name="checkbox" />
+
+## Related components
 
-### Related components
 <RelatedComponentList>
   <RelatedComponent
     title="RadioGroup"

diff --git a/packages/docs/pages/components/clickable.mdx b/packages/docs/pages/components/clickable.mdx
@@ -1,5 +1,13 @@
 # Clickable
 
-Represents clickable surfaces.
+<ComponentDescription name="clickable" />
 
-![Clickable example](public/assets/overview-clickable.webp)
+```jsx
+<Clickable>
+  Text <button>Click Me</button>
+</Clickable>
+```
+
+## Optional props
+
+<PropsDocs name="clickable" />
diff --git a/packages/docs/pages/components/clickable/_meta.json b/packages/docs/pages/components/clickable/_meta.json
@@ -1 +1 @@
-{ "api-reference": "API Reference", "clickable-bubble": "ClickableBubble" }
+{ "clickable-bubble": "ClickableBubble" }
diff --git a/packages/docs/pages/components/clickable/api-reference.mdx b/packages/docs/pages/components/clickable/api-reference.mdx
diff --git a/packages/docs/pages/components/clickable/clickable-bubble.mdx b/packages/docs/pages/components/clickable/clickable-bubble.mdx
@@ -1,5 +1,15 @@
 # ClickableBubble
 
-Bubbles events to Clickable.
+<ComponentDescription name="clickable-bubble" />
 
-![No-visual component](public/assets/no-visual-component.webp)
+```jsx
+<Clickable>
+  <ClickableBubble>
+    <p>Clicking the text will bubble the Click event to Clickable</p>
+  </ClickableBubble>
+</Clickable>
+```
+
+## Required props
+
+<PropsDocs name="clickable-bubble" required />
diff --git a/packages/docs/pages/components/clickable/clickable-bubble/_meta.json b/packages/docs/pages/components/clickable/clickable-bubble/_meta.json
diff --git a/packages/docs/pages/components/clickable/clickable-bubble/api-reference.mdx b/packages/docs/pages/components/clickable/clickable-bubble/api-reference.mdx
diff --git a/packages/docs/pages/components/combobox-input.mdx b/packages/docs/pages/components/combobox-input.mdx
diff --git a/packages/docs/pages/components/combobox-input/_meta.json b/packages/docs/pages/components/combobox-input/_meta.json
diff --git a/packages/docs/pages/components/combobox-input/api-reference.mdx b/packages/docs/pages/components/combobox-input/api-reference.mdx
diff --git a/packages/docs/pages/components/combobox-item.mdx b/packages/docs/pages/components/combobox-item.mdx
diff --git a/packages/docs/pages/components/combobox-item/_meta.json b/packages/docs/pages/components/combobox-item/_meta.json
diff --git a/packages/docs/pages/components/combobox-item/api-reference.mdx b/packages/docs/pages/components/combobox-item/api-reference.mdx
diff --git a/packages/docs/pages/components/combobox-list.mdx b/packages/docs/pages/components/combobox-list.mdx
diff --git a/packages/docs/pages/components/combobox-list/_meta.json b/packages/docs/pages/components/combobox-list/_meta.json
diff --git a/packages/docs/pages/components/combobox-list/api-reference.mdx b/packages/docs/pages/components/combobox-list/api-reference.mdx
diff --git a/packages/docs/pages/components/combobox-popover.mdx b/packages/docs/pages/components/combobox-popover.mdx
diff --git a/packages/docs/pages/components/combobox-popover/_meta.json b/packages/docs/pages/components/combobox-popover/_meta.json
diff --git a/packages/docs/pages/components/combobox-popover/api-reference.mdx b/packages/docs/pages/components/combobox-popover/api-reference.mdx
diff --git a/packages/docs/pages/components/combobox/_meta.json b/packages/docs/pages/components/combobox/_meta.json
@@ -0,0 +1,6 @@
+{
+  "combobox-input": "ComboboxInput",
+  "combobox-item": "ComboboxItem",
+  "combobox-list": "ComboboxList",
+  "combobox-popover": "ComboboxPopover"
+}
diff --git a/packages/docs/pages/components/combobox/combobox-input.mdx b/packages/docs/pages/components/combobox/combobox-input.mdx
@@ -0,0 +1,7 @@
+# ComboboxInput
+
+<ComponentDescription name="combobox-input" />
+
+## Optional props
+
+<PropsDocs name="combobox-input" />
diff --git a/packages/docs/pages/components/combobox/combobox-item.mdx b/packages/docs/pages/components/combobox/combobox-item.mdx
@@ -0,0 +1,7 @@
+# ComboboxItem
+
+<ComponentDescription name="combobox-item" />
+
+## Optional props
+
+<PropsDocs name="combobox-item" />
diff --git a/packages/docs/pages/components/combobox/combobox-list.mdx b/packages/docs/pages/components/combobox/combobox-list.mdx
@@ -0,0 +1,7 @@
+# ComboboxList
+
+<ComponentDescription name="combobox-list" />
+
+## Optional props
+
+<PropsDocs name="combobox-list" />
diff --git a/packages/docs/pages/components/combobox/combobox-popover.mdx b/packages/docs/pages/components/combobox/combobox-popover.mdx
@@ -0,0 +1,7 @@
+# ComboboxPopover
+
+<ComponentDescription name="combobox-popover" />
+
+## Optional props
+
+<PropsDocs name="combobox-popover" />
diff --git a/packages/docs/pages/components/composable.mdx b/packages/docs/pages/components/composable.mdx
diff --git a/packages/docs/pages/components/composable/_meta.json b/packages/docs/pages/components/composable/_meta.json
diff --git a/packages/docs/pages/components/composable/api-reference.mdx b/packages/docs/pages/components/composable/api-reference.mdx
diff --git a/packages/docs/pages/components/compose.mdx b/packages/docs/pages/components/compose.mdx
@@ -1,6 +1,14 @@
 # Compose
 
-Composes immediate child with its props and child own props.
-Used to implement Shoreline composition.
+<ComponentDescription name="compose" />
 
-![Compose example](public/assets/overview-compose.webp)
+```jsx
+function Button({ asChild, ...props }) {
+  const Composition = asChild ? Compose : "button";
+  return <Composition {...props} />;
+}
+```
+
+## Optional props
+
+<PropsDocs name="compose" />
diff --git a/packages/docs/pages/components/compose/_meta.json b/packages/docs/pages/components/compose/_meta.json