@wix/design-system
Version:
@wix/design-system
252 lines (224 loc) • 6.27 kB
Markdown
- description: Add content to a timeline by using `items` prop. Each item has props to control these containers:<br/>
 - `customPrefix` - overrides the default circle with a specified icon to mark important milestones.<br/>
 - `label` - describes the event.<br/>
 - `labelAction` - enables an action that provides more info or leads to an event.<br/>
 - `suffix` - displays event’s date or other additional info.<br/>
<br/>
Note that all of these containers are nodes (i.e., can store any component as a child item). Their positions are fixed.
- example:
```jsx
() => {
const items = [
{
label: (
<StorybookComponents.Placeholder>Label</StorybookComponents.Placeholder>
),
labelAction: (
<StorybookComponents.Placeholder>
Label action
</StorybookComponents.Placeholder>
),
suffix: (
<StorybookComponents.Placeholder>
Suffix
</StorybookComponents.Placeholder>
),
customPrefix: (
<StorybookComponents.Placeholder>
Custom Prefix
</StorybookComponents.Placeholder>
),
},
];
return <Timeline items={items} />;
};
```
- description: Control vertical distance between the items with a `gap` prop.<br/>
<br/>
Default value is 30 px.
- example:
```jsx
() => {
const items = [
{
label: 'Item 1',
},
{
label: 'Item 2',
},
];
return (
<StorybookComponents.Stack>
<Timeline items={items} />
<Timeline items={items} gap="60px" />
</StorybookComponents.Stack>
);
};
```
- description: Set the content for an item’s label with a `label` prop.<br/>
<br/>
Label describes the event of the Timeline item. It wraps into multiple lines where necessary.<br/>
<br/>
Note that the label container accepts any component as a child item.
- example:
```jsx
() => {
const items = [
{
label: 'Label',
},
{
label:
'Label that is very long and does not fit into a single line, so it wraps into multiple lines, since the Timeline component has to fit into its parent container',
},
];
return <Timeline items={items} />;
};
```
- description: Add an action button for a Timeline’s item using a `labelAction` prop.<br/>
<br/>
Use it as a link to actions or further information about the Timeline item.
- example:
```jsx
() => {
const items = [
{
label: 'Label',
labelAction: <TextButton size="small">Label action</TextButton>,
},
{
labelAction: (
<TextButton size="small">Label action without a Label</TextButton>
),
},
];
return <Timeline items={items} />;
};
```
- description: Set a custom icon for a Timeline item with a `customPrefix` prop. Use it to highlight important milestones or errors.<br/>
<br/>
Control it for each item individually.<br/>
<br/>
When not defined, prefix is a default filled-in circle.
- example:
```jsx
() => {
const items = [
{
label: 'Without custom Prefix',
},
{
label: 'With custom Prefix',
customPrefix: <Icons.StatusCompleteSmall />,
},
];
return <Timeline items={items} />;
};
```
- description: Add more information to the Timeline item with a `suffix` prop.<br/>
<br/>
Use it to show the date of an event (but it can also render any component as a child item).
- example:
```jsx
() => {
const items = [
{
label: 'Item 1',
suffix: 'Suffix as a text',
},
{
label: 'Item 2',
suffix: <Badge skin="neutral">Suffix as a component</Badge>,
},
];
return <Timeline items={items} />;
};
```
- description: Illustrate the history of a product order with a Timeline, stored inside a `<Card/>`.<br/>
<br/>
In this case, users can fill in recent events into the Timeline themselves, change events’ status, and view more related information.
- example:
```jsx
() => {
const initialItems = [
{
label: (
<Box gap="2">
<Text size="small">Invoice created</Text>
<BadgeSelect
type="outlined"
size="small"
options={[
{ id: '0', skin: 'neutral', text: 'waiting for payment' },
{ id: '1', skin: 'success', text: 'paid in full' },
{ id: '2', skin: 'warning', text: 'paid in part' },
{ id: '3', skin: 'danger', text: 'payment is due' },
]}
/>
</Box>
),
labelAction: <TextButton size="small">View Invoice</TextButton>,
suffix: 'Aug 12, 2021',
},
{
label: 'Digital product links sent to John',
suffix: 'Aug 9, 2021',
},
{
label: 'Order marked as Fulfilled',
suffix: 'Aug 9, 2021',
},
{
label: 'Order marked as Paid',
suffix: 'Aug 9, 2021',
},
{
label: 'John placed an order',
labelAction: <TextButton size="small">View Order Summary</TextButton>,
suffix: 'Aug 8, 2021',
},
];
const [items, setItems] = React.useState(initialItems);
const addNode = value => {
setItems([{ label: value, suffix: 'Today' }, ...items]);
};
return (
<Card>
<Card.Header title="Order Activity" />
<Card.Divider />
<Card.Content>
<Timeline
items={[
{
label: (
<FormField label="Add a note (your customers will not see this)">
<ListItemEditable
onApprove={value => addNode(value)}
onCancel={() => {}}
placeholder="Activity Note"
cancelButtonTooltipContent="Cancel"
approveButtonTooltipContent="Approve"
size="small"
margins="none"
/>
</FormField>
),
suffix: 'Today',
},
...items,
]}
/>
</Card.Content>
</Card>
);
};
```