Term

How we use it at OpenProject

Example

Example URL

Primer ViewComponent

A subset of components that is provided and maintained by the Primer Design System.

Some components exist only as ViewComponents, other only as React components. (cf., Component status)

We use these components unchanged from our primer_view_components fork.

Primer::Beta::Button

https://primer.style/design/components/button

Primer React Component

Additional components designed and documented in Primer, but (currently) not available for use in OpenProject

We will have to rebuild these or evaluate complexity and costs of integrating primer react components

Primer::Alpha::SelectPanel

https://primer.style/react/storybook/?path=/story/components-selectpanel-features--single-select-story

OP-Primer ViewComponent

A reusable component using maintained by OpenProject that extends Primer.

It is developed and tested in the primer_view_components fork to get all benefits of the primer test suite (accessibility, performance, visual differences).

It is documented in our Lookbook.

OpPrimer::PageHeader

Figma

Reusable OP ViewComponent

A custom OpenProject ViewComponent that is reusable, either due to temporary being reused or due to functionality binding us to it.

It might be related or unrelated to Primer.

It is documented in our Lookbook

Users::AvatarComponent

Primer::OpenProject::Forms::Dsl::Autocompleter (rendering CKEditor)

Custom component

This is a custom OpenProject ViewComponent that is only used by us. (Example: MeetingAgendaItem)

It is developed, tested, and documented in our core.

Meetings::AgendaItem

Figma

OP Primer Figma Component

All components we use in Figma that also include the Primer View Components that are not provided by Github.

https://github.com/

Primer Figma Component

All components provided by GitHub.

https://www.figma.com/file/coUIXv6elOhhol3Fcks7vx/Primer-Web-(Community)?type=design&node-id=136-1805&mode=design