Skip to content

Section component

The section component means to abstract a common pattern of our projects into a reusable react component.
In the dashboards of Editoria and microPublication, as well as in Editoria's bookbuilder, we have a list of items, with a header and potentially also some actions next to the header.

The specs are as follows:

  • The component needs to start with a header. The header will have a title. It will also optionally take a react component (could be anything, but it would commonly include links or buttons to take some action) to its right.
  • Below the header we'll have a list. This component should be agnostic as to what items this list will accept.

Some notes:

  • For the list, we'll use the List component from @pubsweet/ui
  • The component should use variables from the theme
  • The task should consist of a single file under the src/ui folder, Section.js, as well as a file for development / documentation under the src/stories folder (Section.stories.js)
  • This component should be agnostic as to what the header's second component (rightComponent) and the list's items are. ie. it should accept these components through react's props.