Kanban

KanbanBoard is a horizontal row of KanbanColumn elements. Each column is one stage: a heading with a count, then its cards. Drag and drop is not included.

import { KanbanBoard, KanbanColumn } from '@beyul/sulmu-ui'

Source · Figma

Examples

Introduction

Requirement

Implementation

import {
  Avatar,
  IconButton,
  KanbanBoard,
  KanbanColumn,
  MoreIcon,
  RecordCard,
} from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <KanbanBoard>
      <KanbanColumn
        title="Introduction"
        count={2}
        actions={<IconButton aria-label="Stage actions" size="sm" icon={<MoreIcon />} />}
      >
        <RecordCard
          title="Epic Voyage"
          tone="red"
          avatar={<Avatar size="sm" name="Epic Voyage" />}
        />
        <RecordCard
          title="VistaWay Journeys"
          tone="red"
          avatar={<Avatar size="sm" name="VistaWay Journeys" />}
        />
      </KanbanColumn>
      <KanbanColumn title="Requirement" count={1}>
        <RecordCard
          title="Nomad Nova"
          tone="orange"
          avatar={<Avatar size="sm" name="Nomad Nova" />}
        />
      </KanbanColumn>
      <KanbanColumn title="Implementation" count={1}>
        <RecordCard
          title="Aurora Travel Group"
          tone="blue"
          avatar={<Avatar size="sm" name="Aurora Travel Group" />}
        />
      </KanbanColumn>
    </KanbanBoard>
  )
}

Props

KanbanColumn

Prop	Type	Default	Description
`title`*	`ReactNode`	-	Stage name.
`count`	`number`	-	Number of cards in the stage.
`actions`	`ReactNode`	-	Usually a Menu on an IconButton ("...") for stage actions.
`children`	`ReactNode`	-	The cards.

KanbanBoard has no props of its own; it accepts every div attribute.

Usage notes

The board scrolls sideways when the columns do not fit.
Each column is a <section> with an h3 title.
Cards are usually Record Cards.
actions usually holds a Menu on an Icon Button for the stage actions.