import { Story, Canvas, Props, Meta } from "@storybook/blocks";
import { ComponentStatus, COMPONENT_STATUS } from "../../storybook-components";
import { PropertyDiff } from "./PropertyDiff";

<Meta
  title="Deprecated/Components/Move to app/Property Diff"
  component={PropertyDiff}
/>

# PropertyDiff

<ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />

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

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

## Props

<Props of={PropertyDiff} />

## Demos

### Without property label

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

### No old value

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

### No new value

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