EpicHeader

A row that heads a group of work with a dot in its epic's colour and its label.

Overview

Heading a group of tasks that share an epic, in a list grouped by groupByEpic.

Epic groups

Do

Open work

3
HC-42

Record a voice note

Transcribe the note

No epic

Tidy the settings page

import { Body, Card, EpicHeader, groupByEpic } from "@hackcove/ui";

<Card title="Open work" count={3}>
  {groupByEpic(
    [
      { task: "Record a voice note", epic: "HC-42", colour: "#cba6f7" },
      { task: "Tidy the settings page", epic: null, colour: "#9399b2" },
      { task: "Transcribe the note", epic: "HC-42", colour: "#cba6f7" },
    ],
    (item) => item.epic,
  ).map(([epic, items]) => (
    <div key={epic ?? "none"}>
      <EpicHeader color={items[0]?.colour ?? "#9399b2"} label={epic ?? "No epic"} />
      {items.map((item) => (
        <Body as="p" key={item.task}>
          {item.task}
        </Body>
      ))}
    </div>
  ))}
</Card>
groupByEpic orders the groups, real epics first by ref and "No epic" last; an EpicHeader heads each one.
Don't
Settings

Choose how the site looks and what it tells you about.

import { Body, EpicHeader, Stack } from "@hackcove/ui";

<Stack>
  <EpicHeader color="#cba6f7" label="Settings" />
  <Body as="p">Choose how the site looks and what it tells you about.</Body>
</Stack>
EpicHeader is a row of epic data with a dot in the epic's own colour, not a heading: a section is titled with SectionHeading or a Card title.

Usage

  • Group the items with groupByEpic(items, (item) => item.epic) and put one EpicHeader over each group.
  • color is the epic's own colour, a CSS colour from your data; label is the epic's name. The no-epic group has a null key: give it a label such as "No epic".
  • EpicHeader is a row of data, not a heading. Title a section with SectionHeading or a Card title.

Accessibility

  • The dot is decoration with no text alternative; the label carries the meaning, so the colour is never the only signal.
  • The row is a <div>, not a heading element, so it does not appear in a screen reader's heading outline.
  • aria-* and data-* props go on the root element.

API

EpicHeader

A coloured epic header row: a dot in the epic's colour + its label.

color required
Type
string
label required
Type
string

Functions

  • groupByEpic Groups items by their epic ref, real epics first in ref order and the items with no epic (null) last; returns [epic, items][] to map over.