Skip to content

README.md

Latest commit

 

History

History
62 lines (43 loc) · 1.79 KB

README.md

File metadata and controls

62 lines (43 loc) · 1.79 KB
Raw

DiffStat

A compact component that displays diff statistics showing the number of added and deleted lines.

Features

  • Visual Indicators: Displays added and deleted line counts side by side
  • Sign Prefixes: Automatically adds + for added lines and - for deleted lines (only when count > 0)
  • Color Coding: Green for additions, red for deletions
  • Code Font: Uses monospace font suitable for code contexts

Usage

import {DiffStat} from '@/components/atoms/DiffStat';

// Basic usage
<DiffStat added={10} deleted={5} />

// Only additions
<DiffStat added={15} deleted={0} />

// Only deletions
<DiffStat added={0} deleted={8} />

// No changes
<DiffStat added={0} deleted={0} />

Props

Prop Type Required Default Description
added number ✓ - Number of added lines
deleted number ✓ - Number of deleted lines
className string - - Additional CSS class
style CSSProperties - - Inline styles
qa string - - QA/test identifier

Styling

The component uses CSS variables for theming:

Colors

--g-color-text-positive-heavy  /* Added lines color (green) */
--g-color-text-danger          /* Deleted lines color (red) */

Typography

--g-text-code-font-family      /* Monospace font family */
--g-text-code-inline-1         /* Font size */
--g-text-code-font-weight      /* Font weight */
--g-text-code-inline-1-line-height  /* Line height */

Layout

The component uses flexbox with a 4px gap between added and deleted counts.