import StatusCard from '@invisionag/iris-react-status-card';
import { StatusCardGroup } from '@invisionag/iris-react-status-card';General Props
icon
Can receive either a string or a react component. When passed a string, it will render the matching iris icon in the header. When passed a component, it will directly render the component instead.
Usage
<StatusCard icon="check circle" />
<StatusCard icon={() => <div>Custom Component</div>} />
footer
Can receive JSX and will render a footer section into the card. Can be used for content that is supposed to be aligned to the bottom of the card
Usage
<StatusCard footer={StatusCardProps => <div>My Footer</div>} />
Statuses
Organizes some content in a card layout, with the card being able to communicate different statuses.
success:
The condition is achieved, this card is supposed to confirm a correct status.
Usage:
<StatusCard success heading="It worked!" />
error:
The cards condition is not achieved. The card is interactable.
Usage:
<StatusCard hasError heading="This did not work!" />
active:
This cards condition is undetermined. User action is expected here. If combined with success or hasError, the status takes priority when computing styling.
Usage:
<StatusCard active heading="Click me!" />
disabled:
Its not possible to interact with this card. Whether status is success or error does not matter.
Usage:
<StatusCard disabled heading="I am disabled!" />
largeIcon
Doubles the size of the Icon. Should be used with large StatusCards.
Usage:
<StatusCard heading="I have a large icon!" largeIcon />
Content
StatusCards are comprised of heading, icon and children. heading expects any string, icon has to be a valid iris-react-icon value, and children may be any react node(s).
Group
The component also export StatusCardGroup, which is a flex-based wrapper for Cards. It also takes care of gutter-spacing for the cards it includes.
Usage:
<StatusCardGroup>
<StatusCard heading="I'm a card!" />
<StatusCard heading="I'm a card too!" />
</StatusCardGroup>