import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { PropertyDiff } from "./PropertyDiff";

<Meta title="Components/Data/Property Diff" component={PropertyDiff} />

# PropertyDiff

```jsx
import { PropertyDiff } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="PropertyDiff">
    <PropertyDiff property="Status" oldValue="Inactive" newValue="Active" />
  </Story>
</Preview>

## Props

<Props of={PropertyDiff} />

## Demos

### Without property label

<Preview>
  <Story name="Without property label">
    <PropertyDiff oldValue="Inactive" newValue="Active" />
  </Story>
</Preview>

### No old value

<Preview>
  <Story name="Null to value">
    <PropertyDiff property="Status" newValue="Active" />
  </Story>
</Preview>

### No new value

<Preview>
  <Story name="Value to null">
    <PropertyDiff property="Status" oldValue="Inactive" />
  </Story>
</Preview>