openproject-primer_view_components 0.9.0 → 0.9.1

data/app/components/primer/open_project/page_header.css

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.PageHeader-title{flex:1 1 auto;order:0}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.PageHeader-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}
+.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.PageHeader-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}

data/app/components/primer/open_project/page_header.css.json

@@ -3,6 +3,7 @@
   "selectors": [
     ".PageHeader",
     ".PageHeader-title",
+    ".PageHeader-title--large",
     ".PageHeader-description",
     ".PageHeader-actions",
     ".PageHeader-actions+.PageHeader-description"

data/app/components/primer/open_project/page_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAGA,kBACE,aAAc,CACd,OACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,oBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,4CACE,oCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* <h2> sized heading with normal font weight */\n.PageHeader-title {\n  flex: 1 1 auto;\n  order: 0;\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAEA,kBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,oBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,4CACE,oCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}

data/app/components/primer/open_project/page_header.pcss

@@ -9,12 +9,17 @@
   justify-content: flex-end; /* Keep actions right aligned. */
 }
 
-/* <h2> sized heading with normal font weight */
 .PageHeader-title {
+  font-size: 24px;
+  font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
   order: 0;
 }
 
+.PageHeader-title--large {
+  font-size: var(--text-title-size-large);
+}
+
 /* One-liner of supporting text */
 .PageHeader-description {
   font-size: var(--text-body-size-medium);

data/app/components/primer/open_project/page_header.rb

@@ -5,7 +5,13 @@ module Primer
     # A ViewComponent PageHeader inspired by the primer react variant
     class PageHeader < Primer::Component
       HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
-      HEADING_TAG_FALLBACK = :h1
+      HEADING_TAG_FALLBACK = :h2
+
+      DEFAULT_HEADER_VARIANT = :medium
+      HEADER_VARIANT_OPTIONS = [
+        :large,
+        DEFAULT_HEADER_VARIANT
+      ].freeze
 
       status :open_project
 
@@ -13,9 +19,13 @@ module Primer
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :title, lambda { |tag: :h1, **system_arguments|
+      renders_one :title, lambda { |tag: HEADING_TAG_FALLBACK, variant: DEFAULT_HEADER_VARIANT, **system_arguments|
         system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, HEADING_TAG_FALLBACK)
-        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-title")
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "PageHeader-title",
+          "PageHeader-title--#{variant}"
+        )
 
         Primer::BaseComponent.new(**system_arguments)
       }

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 9
-      PATCH = 0
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/open_project/page_header_preview.rb

@@ -14,12 +14,21 @@ module Primer
         end
       end
 
-
       # @label Playground
-      #
-      def playground
+      # @param variant [Symbol] select [medium, large]
+      # @param title [String] text
+      # @param description [String] text
+      def playground(variant: :medium, title: "Hello", description: "Last updated 5 minutes ago by XYZ.")
         render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title { "Hello" }
+          header.with_title(variant: variant) { title }
+          header.with_description { description }
+        end
+      end
+
+      # @label Large
+      def large_title
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title(variant: :large) { "Hello" }
           header.with_description { "Last updated 5 minutes ago by XYZ." }
         end
       end

data/static/arguments.json

@@ -4423,6 +4423,17 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::PageHeader",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectPageHeader",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/default/",
+    "parameters": [
+
+    ]
+  },
   {
     "component": "Tooltip",
     "status": "deprecated",

data/static/audited_at.json

@@ -102,6 +102,7 @@
   "Primer::IconButton": "",
   "Primer::LayoutComponent": "",
   "Primer::Navigation::TabComponent": "",
+  "Primer::OpenProject::PageHeader": "",
   "Primer::Tooltip": "",
   "Primer::Truncate": ""
 }

data/static/classes.json

@@ -423,6 +423,9 @@
   "PageHeader-title": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-title--large": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "Popover": [
     "Primer::Beta::Popover"
   ],

data/static/constants.json

@@ -1300,6 +1300,22 @@
   },
   "Primer::Navigation::TabComponent": {
   },
+  "Primer::OpenProject::PageHeader": {
+    "DEFAULT_HEADER_VARIANT": "medium",
+    "HEADER_VARIANT_OPTIONS": [
+      "large",
+      "medium"
+    ],
+    "HEADING_TAG_FALLBACK": "h2",
+    "HEADING_TAG_OPTIONS": [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6"
+    ]
+  },
   "Primer::Tooltip": {
     "ALIGN_DEFAULT": "default",
     "ALIGN_MAPPING": {

data/static/info_arch.json

@@ -14364,6 +14364,122 @@
 
     ]
   },
+  {
+    "fully_qualified_name": "Primer::OpenProject::PageHeader",
+    "description": "A ViewComponent PageHeader inspired by the primer react variant",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::PageHeader",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectPageHeader",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/default/",
+    "parameters": [
+
+    ],
+    "slots": [
+      {
+        "name": "title",
+        "description": "The title of the page header",
+        "parameters": [
+          {
+            "name": "tag",
+            "type": "Symbol",
+            "default": "N/A",
+            "description": "One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
+          },
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
+      {
+        "name": "description",
+        "description": "Optional description below the title row",
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "actions",
+        "description": "Actions",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      }
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/page_header/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/large_title",
+        "name": "large_title",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/actions",
+        "name": "actions",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::Tooltip",
     "description": "`Tooltip` is a wrapper component that will apply a tooltip to the provided content.",

data/static/previews.json

@@ -4434,14 +4434,27 @@
   },
   {
     "name": "page_header",
-    "component": "PageHeader",
-    "status": "openproject",
+    "component": "OpenProject::PageHeader",
+    "status": "open_project",
     "lookup_path": "primer/open_project/page_header",
     "examples": [
+      {
+        "preview_path": "primer/open_project/page_header/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/page_header/playground",
         "name": "playground",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -4452,9 +4465,9 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/default",
-        "name": "default",
-        "snapshot": "true",
+        "preview_path": "primer/open_project/page_header/large_title",
+        "name": "large_title",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -4467,7 +4480,7 @@
       {
         "preview_path": "primer/open_project/page_header/actions",
         "name": "actions",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"

data/static/statuses.json

@@ -102,6 +102,7 @@
   "Primer::IconButton": "deprecated",
   "Primer::LayoutComponent": "deprecated",
   "Primer::Navigation::TabComponent": "deprecated",
+  "Primer::OpenProject::PageHeader": "open_project",
   "Primer::Tooltip": "deprecated",
   "Primer::Truncate": "deprecated"
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.9.1
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-09-07 00:00:00.000000000 Z
+date: 2023-09-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview