TodoList

A list of things waiting on the reader, each a TodoListItem. Items decide for themselves whether to render, so the empty line shows through CSS once none did.

import { TodoList } from "@evolve-storefront/ui/todo-list";

Preview

DefaultOpen in Storybook ↗

Usage

Two things to do, the overdue one marked urgent.

<TodoList empty={t("nothing-to-do")}>
  <TodoListItem
    title={t("approvals", { count: 2 })}
    action={<Link href="/account/approvals">{t("review")}</Link>}
  />
  <TodoListItem
    title={t("overdue", { count: 1 })}
    detail={t("overdue-since", { date })}
    action={<Link href="/account/invoices">{t("pay")}</Link>}
    isUrgent
  />
</TodoList>;

Props

Prop	Type	Description
children?	ReactNode	TodoListItems. An item with nothing to report renders nothing.
empty?	ReactNode	Shown when no item rendered, such as "Nothing needs your attention".

Any other props go to the root element, like on a plain HTML element.

Change the layout

Pass children to TodoList to arrange its parts yourself. Every part is exported from @evolve-storefront/ui/todo-list.

TodoListItemOne thing waiting on the reader: what it is, a detail, and the way to deal with it.

Prop	Type	Description
title	ReactNode
detail?	ReactNode	A second line, such as a deadline or an amount.
action?	ReactNode	The way to deal with it, usually a link.
isUrgent?	boolean	Past a deadline or otherwise pressing; styled through data-urgent.
isDone?	boolean	Already dealt with, as a step of a checklist; styled through data-done, with a success mark before the title. The mark is decorative, so say it in detail.

Any other props go to the root element, like on a plain HTML element.

Examples

Nothing To DoEvery item had nothing to report, so the empty line shows instead of an empty box.

// Each item returns null when it has nothing to report.
<TodoList empty={t("nothing-to-do")}>
  <PendingApprovalsTodo renderLink={renderLink} />
</TodoList>;

Open in Storybook ↗

ChecklistSteps of a checklist: a done one keeps its place, marked, and needs no action.

<TodoList>
  <TodoListItem title={t("invite")} detail={t("done")} isDone />
  <TodoListItem
    title={t("addresses")}
    action={<Link href="/account/addresses">{t("add")}</Link>}
  />
</TodoList>;

Open in Storybook ↗