← All proposals

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

proposals/ContentDiff/ContentDiff.stories.tsx40 lines · View on GitHub
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 = {};