Skip to content

Commit

Permalink
docs[DST-95]: table improvements (#3230)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarahgm
sarahgm authored Jul 31, 2023
1 parent 5942d94 commit 564a458
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 59 deletions.
6 changes: 3 additions & 3 deletions docs/theme/components/Table.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { ThemeComponent, cva } from '@marigold/system';

export const Table: ThemeComponent<'Table'> = {
table: cva('w-full overflow-auto text-sm'),
cell: cva(' mt-4 hyphens-auto px-1 py-2 text-sm'),
header: cva('border-b px-1 py-2 text-start'),
table: cva('table w-full text-sm'),
cell: cva(' mt-4 hyphens-auto px-4 py-2 text-sm'),
header: cva('border-b px-4 py-2 text-start'),
row: cva('hover:bg-bg-hover/50 border-b'),
};
72 changes: 41 additions & 31 deletions docs/ui/AppearanceTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,37 +52,47 @@ export const AppearanceTable = ({ component }: AppearanceTableProps) => {
</Text>
</Inline>
) : (
<Table aria-labelledby="appearance table" variant="propsTable">
<Table.Header>
<Table.Column key={'property'}>Property</Table.Column>
<Table.Column key={'type'}>Type</Table.Column>
<Table.Column key={'description'}>Description</Table.Column>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<code>variant</code>
</Table.Cell>
<Table.Cell>
<code>
{appearances.variant ? appearances.variant.join(' | ') : '-'}
</code>
</Table.Cell>
<Table.Cell>The available variants of this component.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<code>size</code>
</Table.Cell>
<Table.Cell>
<code>
{appearances.size ? appearances.size.join(' | ') : '-'}
</code>
</Table.Cell>
<Table.Cell>The available sizes of this component.</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
<div className="overflow-auto">
<Table aria-labelledby="appearance table" variant="propsTable">
<Table.Header>
<Table.Column key={'property'}>Property</Table.Column>
<Table.Column key={'type'}>Type</Table.Column>
<Table.Column key={'description'}>Description</Table.Column>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<code className="before:content-none after:content-none">
variant
</code>
</Table.Cell>
<Table.Cell>
<code className="before:content-none after:content-none">
{appearances.variant
? appearances.variant.join(' | ')
: '-'}
</code>
</Table.Cell>
<Table.Cell>
The available variants of this component.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<code className="before:content-none after:content-none">
size
</code>
</Table.Cell>
<Table.Cell>
<code className="before:content-none after:content-none">
{appearances.size ? appearances.size.join(' | ') : '-'}
</code>
</Table.Cell>
<Table.Cell>The available sizes of this component.</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</div>
)}
</Card>
);
Expand Down
56 changes: 32 additions & 24 deletions docs/ui/PropsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,38 @@ export const PropsTable = ({ props }: PropsTableProps) => {
<Text>Sorry! There are currently no props available.</Text>
</Inline>
) : (
<Table aria-label="Table with component props" variant="propsTable">
<Table.Header>
<Table.Column key="property">Property</Table.Column>
<Table.Column key="type">Type</Table.Column>
<Table.Column key="default">Default</Table.Column>
<Table.Column key="description">Description</Table.Column>
</Table.Header>
<Table.Body items={props}>
{item => (
<Table.Row key={item.property}>
<Table.Cell>
<code>{item.property}</code>
</Table.Cell>
<Table.Cell>
<code>{item.type}</code>
</Table.Cell>
<Table.Cell>
<code>{item.default}</code>
</Table.Cell>
<Table.Cell>{item.description}</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
<div className="overflow-auto">
<Table aria-label="Table with component props" variant="propsTable">
<Table.Header>
<Table.Column key="property">Property</Table.Column>
<Table.Column key="type">Type</Table.Column>
<Table.Column key="default">Default</Table.Column>
<Table.Column key="description">Description</Table.Column>
</Table.Header>
<Table.Body items={props}>
{item => (
<Table.Row key={item.property}>
<Table.Cell>
<code className="before:content-none after:content-none">
{item.property}
</code>
</Table.Cell>
<Table.Cell>
<code className="before:content-none after:content-none">
{item.type}
</code>
</Table.Cell>
<Table.Cell>
<code className="before:content-none after:content-none">
{item.default ? item.default : '-'}
</code>
</Table.Cell>
<Table.Cell>{item.description}</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
</div>
)}
</Card>
);
Expand Down
5 changes: 4 additions & 1 deletion docs/ui/mdx.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,10 @@ const typography = {
<blockquote className="mt-6 border-l-2 pl-6 italic" {...props} />
),
code: (props: HTMLAttributes<HTMLElement>) => (
<code className="rounded font-mono text-sm" {...props} />
<code
className="rounded font-mono text-sm before:content-none after:content-none"
{...props}
/>
),
hr: ({ ...props }: HTMLAttributes<HTMLHRElement>) => (
<hr className="my-4 md:my-8" {...props} />
Expand Down

2 comments on commit 564a458

@vercel
Copy link

@vercel vercel bot commented on 564a458 Jul 31, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

marigold-storybook – ./

marigold-latest.vercel.app
marigold-storybook-git-main-marigold.vercel.app
marigold-storybook-marigold.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 564a458 Jul 31, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

marigold-docs – ./

marigold-docs-marigold.vercel.app
marigold-docs.vercel.app
marigold-docs-git-main-marigold.vercel.app

Please sign in to comment.