import { Meta, StoryObj } from '@storybook/react-vite';
import { ContentDiff } from './ContentDiff';
const meta: Meta<typeof ContentDiff> = {
tags: ['new-pattern', 'ready-for-dev'],
title: 'Component Proposals/Content Diff',
component: ContentDiff,
parameters: {
docs: {
description: {
component:
'**New pattern:** not in PDS v2 today. A before and after of a piece of content, stacked like a text diff: the old value on a red line with a minus, the new value on a green line with a plus. For text that is not code (code diffs use the Code diff recipe).',
},
},
},
argTypes: {
after: { control: 'text', table: { category: 'Content' } },
afterLabel: { control: 'text', table: { category: 'Translation strings' } },
before: { control: 'text', table: { category: 'Content' } },
beforeLabel: {
control: 'text',
table: { category: 'Translation strings' },
},
className: { table: { category: 'Base attributes' } },
},
args: {
after: 'Ship faster with confidence',
afterLabel: 'After',
before: 'Deploy your site',
beforeLabel: 'Before',
},
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};
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