DeprecatedPreview

This component is used to display a condensed view of an entity. If it is clickable, we expect to see a detailed version.

Basic usage

The rightAddon prop is used to add a component on the right of the DeprecatedPreview component. To add a callback to the component, for example to open a modal or redirect to another page, you can use the onClick prop.

<DeprecatedPreview
  primaryText="Uploaded on November 4, 2020"
  rightAddon={
    <Icon
      aria-hidden="true"
      color="var(--grapes-color-content-decorative-icon)"
      name="magnifying-glass"
    />
  }
  onClick={() => {}}
/>

Icon

The iconName prop is used to add a HighlightIcon component to the left of the Preview component.

<DeprecatedPreview iconName="receipt-checked" {...otherProps} />

Secondary text

The secondaryText prop allows you to specify a secondary text to display. You can use a string or a component as the secondary text.

<DeprecatedPreview
  primaryText="€400.00"
  secondaryText="From your bank"
  {...otherProps}
/>

Overflowing secondary text

If the fit prop is set to parent and the content in the secondary text overflows, an ellipsis will appear.

<div className="w-[360px]">
  <DeprecatedPreview
    fit="parent"
    secondaryText="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    {...otherProps}
  />
</div>

Highlighted

The isHighlighted prop lets you specify whether the Preview component should be highlighted.

<DeprecatedPreview isHighlighted {...otherProps} />