docs(ui,docs): Add documentation for Medusa UI 2.0.0 (#5227)
* add docs for medusa ui 2.0.0 * fix: copy as child example * fix: dropdown menu example * add accordion examples * fix lint issues * fix apos in progress tabs demo * resolve comments * add icon * bump z-index on modals to prevent clashing with navbar * add sidebar item and card * undo modal z index changes * add links to updated and new components * update version * rm inline code formatting on links --------- Co-authored-by: Shahed Nasser <shahednasser@gmail.com>
This commit is contained in:
Kasper Fabricius Kristensen
committed by
GitHub
GitHub
parent
f5a698ad6f
commit
4e3f3b54cb
@@ -62,10 +62,10 @@ This component is based on the `div` element and supports all props of this elem
|
||||
|
||||
<ComponentExample name="badge-large" />
|
||||
|
||||
### Rounded
|
||||
### Rounded Full
|
||||
|
||||
<ComponentExample name="badge-rounded" />
|
||||
<ComponentExample name="badge-rounded-full" />
|
||||
|
||||
### Icon
|
||||
### Rounded Base
|
||||
|
||||
<ComponentExample name="badge-icon" />
|
||||
<ComponentExample name="badge-rounded-base" />
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Button"
|
||||
description: "Displays a button component"
|
||||
description: "Displays a button"
|
||||
component: true
|
||||
---
|
||||
|
||||
@@ -54,10 +54,6 @@ This component is based on the `button` element and supports all props of this e
|
||||
|
||||
<ComponentExample name="button-with-icon" />
|
||||
|
||||
### Icon Only
|
||||
|
||||
<ComponentExample name="button-icon-only" />
|
||||
|
||||
### Loading
|
||||
|
||||
<ComponentExample name="button-loading" />
|
||||
|
||||
@@ -54,8 +54,6 @@ This component is based on the `div` element and supports all props of this elem
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="code-block-body" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
63
www/apps/ui/src/content/docs/components/command-bar.mdx
Normal file
63
www/apps/ui/src/content/docs/components/command-bar.mdx
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: "Command Bar"
|
||||
description: "Display a command bar with a list of commands"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="command-bar-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { CommandBar } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<CommandBar open={open}>
|
||||
<CommandBar.Bar>
|
||||
<CommandBar.Value>{count} selected</CommandBar.Value>
|
||||
<CommandBar.Seperator />
|
||||
<CommandBar.Command
|
||||
action={onDelete}
|
||||
label="Delete"
|
||||
shortcut="d"
|
||||
/>
|
||||
<CommandBar.Seperator />
|
||||
<CommandBar.Command
|
||||
action={onEdit}
|
||||
label="Edit"
|
||||
shortcut="e"
|
||||
/>
|
||||
</CommandBar.Bar>
|
||||
</CommandBar>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
### CommandBar
|
||||
|
||||
The root component of the command bar. This component manages the state of the command bar.
|
||||
|
||||
<ComponentProps component="command-bar" />
|
||||
|
||||
### CommandBar.Bar
|
||||
|
||||
The bar component of the command bar. This component is used to display the commands.
|
||||
|
||||
### CommandBar.Value
|
||||
|
||||
The value component of the command bar. This component is used to display a value, such as the number of selected items which the commands will act on.
|
||||
|
||||
### CommandBar.Seperator
|
||||
|
||||
The seperator component of the command bar. This component is used to display a seperator between commands.
|
||||
|
||||
### CommandBar.Command
|
||||
|
||||
The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.
|
||||
|
||||
<ComponentProps component="command-bar-command" />
|
||||
39
www/apps/ui/src/content/docs/components/currency-input.mdx
Normal file
39
www/apps/ui/src/content/docs/components/currency-input.mdx
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: "Currency Input"
|
||||
description: "Input component for currency values"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="currency-input-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { CurrencyInput } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<CurrencyInput symbol="$" code="usd" />
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `input` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="currency-input" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Base
|
||||
|
||||
<ComponentExample name="currency-input-base" />
|
||||
|
||||
### Small
|
||||
|
||||
<ComponentExample name="currency-input-small" />
|
||||
66
www/apps/ui/src/content/docs/components/icon-badge.mdx
Normal file
66
www/apps/ui/src/content/docs/components/icon-badge.mdx
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
title: "Icon Badge"
|
||||
description: "Displays an icon badge"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="icon-badge-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<IconBadge>
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `span` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="icon-badge" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Grey
|
||||
|
||||
<ComponentExample name="icon-badge-grey" />
|
||||
|
||||
### Red
|
||||
|
||||
<ComponentExample name="icon-badge-red" />
|
||||
|
||||
### Green
|
||||
|
||||
<ComponentExample name="icon-badge-green" />
|
||||
|
||||
### Blue
|
||||
|
||||
<ComponentExample name="icon-badge-blue" />
|
||||
|
||||
### Orange
|
||||
|
||||
<ComponentExample name="icon-badge-orange" />
|
||||
|
||||
### Purple
|
||||
|
||||
<ComponentExample name="icon-badge-purple" />
|
||||
|
||||
### Base
|
||||
|
||||
<ComponentExample name="icon-badge-base" />
|
||||
|
||||
### Large
|
||||
|
||||
<ComponentExample name="icon-badge-large" />
|
||||
62
www/apps/ui/src/content/docs/components/icon-button.mdx
Normal file
62
www/apps/ui/src/content/docs/components/icon-button.mdx
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: "Icon Button"
|
||||
description: "Displays an icon button"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="icon-button-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
import { Plus } from "@medusajs/icons"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<IconBadge>
|
||||
<Plus />
|
||||
</IconBadge>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `button` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="icon-button" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Primary
|
||||
|
||||
<ComponentExample name="icon-button-primary" />
|
||||
|
||||
### Transparent
|
||||
|
||||
<ComponentExample name="icon-button-transparent" />
|
||||
|
||||
### Base
|
||||
|
||||
<ComponentExample name="icon-button-base" />
|
||||
|
||||
### Large
|
||||
|
||||
<ComponentExample name="icon-button-large" />
|
||||
|
||||
### X-Large
|
||||
|
||||
<ComponentExample name="icon-button-xlarge" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentExample name="icon-button-disabled" />
|
||||
|
||||
### Loading
|
||||
|
||||
<ComponentExample name="icon-button-loading" />
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: "Progress Accordion"
|
||||
description: "A set of expandable content panels, specifically designed for implementing multi-step tasks"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="progress-accordion-demo"/>
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { ProgressAccordion } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<ProgressAccordion type="single">
|
||||
<ProgressAccordion.Item value="general">
|
||||
<ProgressAccordion.Header>
|
||||
General
|
||||
</ProgressAccordion.Header>
|
||||
<ProgressAccordion.Content>
|
||||
{/* Content */}
|
||||
</ProgressAccordion.Content>
|
||||
</ProgressAccordion.Item>
|
||||
<ProgressAccordion.Item value="shipping">
|
||||
<ProgressAccordion.Header>
|
||||
Shipping
|
||||
</ProgressAccordion.Header>
|
||||
<ProgressAccordion.Content>
|
||||
{/* Content */}
|
||||
</ProgressAccordion.Content>
|
||||
</ProgressAccordion.Item>
|
||||
</ProgressAccordion>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Accordion](https://radix-ui.com/primitives/docs/components/accordion) primitves.
|
||||
|
||||
### ProgressAccordion.Header
|
||||
|
||||
---
|
||||
|
||||
<ComponentProps component="progress-accordion-header" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Single
|
||||
|
||||
<ComponentExample name="progress-accordion-single" />
|
||||
|
||||
### Multiple
|
||||
|
||||
<ComponentExample name="progress-accordion-multiple" />
|
||||
50
www/apps/ui/src/content/docs/components/progress-tabs.mdx
Normal file
50
www/apps/ui/src/content/docs/components/progress-tabs.mdx
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: "Progress Tabs"
|
||||
description: "A set of layered content panels, known as tabs, specifically designed for implementing multi-step tasks"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="progress-tabs-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { ProgressTabs } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<ProgressTabs defaultValue="general">
|
||||
<ProgressTabs.List>
|
||||
<ProgressTabs.Trigger value="general">
|
||||
General
|
||||
</ProgressTabs.Trigger>
|
||||
<ProgressTabs.Trigger value="shipping">
|
||||
Shipping
|
||||
</ProgressTabs.Trigger>
|
||||
<ProgressTabs.Trigger value="payment">
|
||||
Payment
|
||||
</ProgressTabs.Trigger>
|
||||
</ProgressTabs.List>
|
||||
<ProgressTabs.Content value="general">
|
||||
{/* Content */}
|
||||
</ProgressTabs.Content>
|
||||
<ProgressTabs.Content value="shipping">
|
||||
{/* Content */}
|
||||
</ProgressTabs.Content>
|
||||
<ProgressTabs.Content value="payment">
|
||||
{/* Content */}
|
||||
</ProgressTabs.Content>
|
||||
</ProgressTabs>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves.
|
||||
|
||||
### ProgressAccordion.Header
|
||||
|
||||
<ComponentProps component="progress-tabs-trigger" />
|
||||
55
www/apps/ui/src/content/docs/components/status-badge.mdx
Normal file
55
www/apps/ui/src/content/docs/components/status-badge.mdx
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
title: "Status Badge"
|
||||
description: "Displays a status badge"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="status-badge-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { StatusBadge } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<StatusBadge color="green">Active</StatusBadge>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `span` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="status-badge" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Grey
|
||||
|
||||
<ComponentExample name="status-badge-grey" />
|
||||
|
||||
### Red
|
||||
|
||||
<ComponentExample name="status-badge-red" />
|
||||
|
||||
### Green
|
||||
|
||||
<ComponentExample name="status-badge-green" />
|
||||
|
||||
### Blue
|
||||
|
||||
<ComponentExample name="status-badge-blue" />
|
||||
|
||||
### Orange
|
||||
|
||||
<ComponentExample name="status-badge-orange" />
|
||||
|
||||
### Purple
|
||||
|
||||
<ComponentExample name="status-badge-purple" />
|
||||
34
www/apps/ui/src/content/docs/components/tabs.mdx
Normal file
34
www/apps/ui/src/content/docs/components/tabs.mdx
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: "Tabs"
|
||||
description: "A set of layered content panels, known as tabs, that display content one panel at a time"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="tabs-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Tabs } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Tabs>
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="1">Tab 1</Tabs.Trigger>
|
||||
<Tabs.Trigger value="2">Tab 2</Tabs.Trigger>
|
||||
<Tabs.Trigger value="3">Tab 3</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="1">Panel 1</Tabs.Content>
|
||||
<Tabs.Content value="2">Panel 2</Tabs.Content>
|
||||
<Tabs.Content value="3">Panel 3</Tabs.Content>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves
|
||||
Reference in New Issue
Block a user