File size: 1,618 Bytes
9697ede | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | // @ts-nocheck
import * as mod from "./diff-changes"
import { create } from "../storybook/scaffold"
import { changes } from "../storybook/fixtures"
const docs = `### Overview
Summarize additions/deletions as text or compact bars.
Pair with \`Diff\`/\`DiffSSR\` to contextualize a change set.
### API
- Required: \`changes\` as { additions, deletions } or an array of those objects.
- Optional: \`variant\` ("default" | "bars").
### Variants and states
- Default text summary or bar visualization.
- Handles zero-change state (renders nothing in default variant).
### Behavior
- Aggregates arrays into total additions/deletions.
### Accessibility
- Ensure surrounding context conveys meaning of the counts/bars.
### Theming/tokens
- Uses \`data-component="diff-changes"\` and diff color tokens.
`
const story = create({
title: "UI/DiffChanges",
mod,
args: {
changes,
variant: "default",
},
})
export default {
title: "UI/DiffChanges",
id: "components-diff-changes",
component: story.meta.component,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
argTypes: {
variant: {
control: "select",
options: ["default", "bars"],
},
},
}
export const Default = story.Basic
export const Bars = {
args: {
variant: "bars",
},
}
export const MultipleFiles = {
args: {
changes: [
{ additions: 4, deletions: 1 },
{ additions: 8, deletions: 3 },
{ additions: 2, deletions: 0 },
],
},
}
export const Zero = {
args: {
changes: { additions: 0, deletions: 0 },
},
}
|