Merge pull request #22 from opf/op/page-header-component

Add OpenProject status for custom components and generate PageHeader

Author: HDinger

.changeset/gorgeous-guests-attend.md

@@ -0,0 +1,8 @@
+---
+"@openproject/primer-view-components": minor
+---
+
+- Add OpenProject status for custom components
+- Add PageHeader component
+
+<!-- Changed components: Primer::OpenProject::PageHeader -->

.github/workflows/test.yml

@@ -15,7 +15,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  FERRUM_PROCESS_TIMEOUT: 30
+  FERRUM_PROCESS_TIMEOUT: 45
 
 jobs:
   accessibility:

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/page_header/actions/default.png

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= title %>
+  <%= description %>
+  <%= actions %>
+<% end %>

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/page_header/actions/focused.png

@@ -0,0 +1,36 @@
+/* OP PageHeader */
+
+.PageHeader {
+  display: flex;
+  padding-bottom: var(--stack-padding-condensed);
+  margin-bottom: var(--stack-gap-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
+  flex-flow: row wrap;
+  justify-content: flex-end; /* Keep actions right aligned. */
+}
+
+/* <h2> sized heading with normal font weight */
+.PageHeader-title {
+  flex: 1 1 auto;
+  order: 0;
+}
+
+/* One-liner of supporting text */
+.PageHeader-description {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+  flex: 1 100%;
+  order: 2;
+}
+
+/* Add 1 or 2 buttons to the right of the heading */
+.PageHeader-actions {
+  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
+  align-self: center;
+  justify-content: flex-end;
+  order: 1;
+
+  & + .PageHeader-description {
+    margin-top: var(--base-size-4);
+  }
+}