Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: aside new docs #3152

Merged
merged 1 commit into from
Jul 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions docs/content/components/aside/aside.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
---
title: Aside
group: Layout
caption: Component to seperate content from the main content.
---

The `<Aside>` is a responsive layout component. It should be used if you want to layout side content next to the main content. The side has a fixed width and the other one(the main content) can have a dynamic width.

If the screen becomes too small for the `<Aside>`, the content will automatically wrap.

It is important to note that the `<Aside>` must have exactly two children, where none is a `<Fragment>`.

## Usage

### Import

To import the component you just have to use this code below.

```tsx
import { Aside } from '@marigold/components';
```

### Props

<PropsTable
props={[
{
property: 'space',
type: 'ResponsiveStyleValue<string>',
description: 'The space between the content and the aside.',
default: 'none',
},
{
property: 'side',
type: '"left" | "right"',
description: 'The side of the aside content.',
default: 'left',
},
{
property: 'sideWidth',
type: 'ResponsiveStyleValue<string>',
description: 'The side width of the aside content.',
default: 'none',
},
{
property: 'wrap',
type: 'Non-zero Percentage',
description: 'At which percent the content should wrap.',
default: '50%',
},
{
property: 'stretch',
type: 'boolean',
description: 'Stretches the aside.',
default: 'true',
},
]}
/>

## Examples

### Space between elements

The example shows how the `space` prop is to use. It defines the gap between the contents.

<ComponentDemo file="./space.demo.tsx" />

### Aside on the right

A simple example on how to set the `side` prop.

<ComponentDemo file="./rightside.demo.tsx" />
8 changes: 8 additions & 0 deletions docs/content/components/aside/rightside.demo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Aside } from '@marigold/components';

export default () => (
<Aside space={4} side="right">
<div className="h-48 w-14 border border-slate-300 bg-slate-300" />
<div className="border border-slate-300 bg-slate-300" />
</Aside>
);
8 changes: 8 additions & 0 deletions docs/content/components/aside/space.demo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Aside } from '@marigold/components';

export default () => (
<Aside space={5}>
<div className="h-28 w-14 border border-slate-300 bg-slate-300" />
<div className="border border-slate-300 bg-slate-300" />
</Aside>
);
10 changes: 10 additions & 0 deletions docs/registry/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,16 @@ export const registry = {
),
file: 'content/components/accordion/basic-accordion.demo.tsx',
},
rightside: {
name: 'rightside',
demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
file: 'content/components/aside/rightside.demo.tsx',
},
space: {
name: 'space',
demo: dynamic(() => import('@/content/components/aside/space.demo')),
file: 'content/components/aside/space.demo.tsx',
},
'button-variant': {
name: 'button-variant',
demo: dynamic(
Expand Down