import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';
import * as ContentDiffStories from './ContentDiff.stories';
<Meta of={ContentDiffStories} name='Usage' />
<Title />
## Purpose
Shows what changes in a piece of content: the current value and the new one, stacked like a text diff.
## Usage
- Use it for text and other content an agent proposes to change, such as page copy. Use the Code diff recipe for code.
- The old value (`before`) is on a red line with a minus, the new value (`after`) on a green line with a plus. Color is not the only cue: the minus and plus carry the meaning too.
- `beforeLabel` and `afterLabel` name the two values for screen readers ("Before", "After"). They are visually hidden, and required so they can be translated.
- It is a definition list, so give it a name from the screen around it (for example the field it belongs to). The Suggestion Card's `SuggestionChange` does that: it puts the field name above a Content Diff.
## Implementation
See the table below for the available props.
<hr />
<Canvas of={ContentDiffStories.Default} />
<Controls of={ContentDiffStories.Default} />
Content Diff
A component, ContentDiff: the old value on a red line with a minus, the new value on a green line with a plus, in one bordered block, like a text diff.
Net-new componentOpen in Storybook