Usage

import {
  SummaryList,
  SummaryListAction,
  SummaryListBody,
  SummaryListHeader,
  SummaryListTerm,
  SummaryListDetail,
  SummaryListRow,
} from "@govtechmy/myds-react/summary-list";

export default () => (
  <SummaryList>
    <SummaryListHeader />
    <SummaryListBody>
      <SummaryListRow>
        <SummaryListTerm />
        <SummaryListDetail />
        <SummaryListAction />
      </SummaryListRow>
    </SummaryListBody>
  </SummaryList>
);

Main Wrapper: SummaryList

The SummaryList is the primary container for presenting a summary of items in a structured and visually consistent format. It serves as the parent component, wrapping all subcomponents.

1. SummaryListHeader
2. SummaryListBody

1. SummaryListHeader

The SummaryListHeader is used to display the title of the summary list.

Example:

2. SummaryListBody

The SummaryListBody is a wrapper for the tabular data within the SummaryList. Main wrapper for multiple or single SummaryListRow.

Example:

2.1 SummaryListRow

The SummaryListRow defines individual rows within the table.

Example:

2.1.1 SummaryListTerm

The SummaryListTerm is used to represent the term or label in the row.

Example:

2.1.2 SummaryListDetail

The SummaryListDetail displays the detailed information corresponding to the term.

Example:

2.1.3 SummaryListAction

The SummaryListAction is for adding actions (e.g., buttons or links) associated with a row.

Example:

2.1.4 SummaryListAddition

The SummaryListAddition provides extra information or actions in the row.

Example:

Props

SummaryList

SummaryListHeader

SummaryListBody

SummaryListRow

SummaryListTerm

SummaryListDetail

SummaryListAction

SummaryListAddition