Skip to content
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
31 changes: 31 additions & 0 deletions src/divider/divider.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { Canvas, Controls, Meta, Subtitle, Title } from '@storybook/addon-docs/blocks'

import * as DividerStories from './divider.stories'

<Meta of={DividerStories} />

<Title />

<Subtitle>Horizontal rule that separates content.</Subtitle>

## Basic usage

`Divider` renders an `<hr>` with the given `weight`, and defaults to `tertiary`.

<Canvas of={DividerStories.Default} />

### API

<Controls of={DividerStories.Default} />

## Weights

The weight sets the line color. Ordered by contrast against the background: `secondary` is the
faintest, then `primary`, then `tertiary`.

<Canvas of={DividerStories.Weights} />

## Dividers between stacked items

`Stack` draws the same dividers between its children through its own `dividers` prop. Prefer that
over placing a `Divider` between each item.
47 changes: 47 additions & 0 deletions src/divider/divider.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import * as React from 'react'

import { Stack } from '../stack'
import { Text } from '../text'

import { Divider } from './divider'

import type { Meta, StoryObj } from '@storybook/react-vite'

const weights = ['primary', 'secondary', 'tertiary'] as const
Comment thread
frankieyan marked this conversation as resolved.

const meta = {
title: '📐 Layout/Divider',
component: Divider,
parameters: {
badges: ['accessible'],
figma: {
path: 'Web › Components / Todoist › Dividers › Divider',
url: 'https://www.figma.com/design/LYlWNzvhMDh907l07mPPQk/Product-Library---Web?node-id=1751-25739',
},
},
} satisfies Meta<typeof Divider>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
args: {
weight: 'tertiary',
},
}

export const Weights: Story = {
render: () => (
<Stack space="xlarge">
{weights.map((weight) => (
<Stack key={weight} space="small">
<Text variant="caption-1" tone="secondary">
{weight}
</Text>
<Divider weight={weight} />
</Stack>
))}
</Stack>
),
}
Loading