openproject-primer_view_components 0.30.1 → 0.31.0

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

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader-contextBar{margin-bottom:var(--base-size-8)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-titleBar{margin-bottom:var(--space-xsmall)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium);font-weight:var(--base-text-weight-normal)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}
+.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader--noBorder{border-bottom:none;padding-bottom:0}.PageHeader-contextBar{margin-bottom:var(--base-size-8)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-titleBar{margin-bottom:var(--space-xsmall)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium);font-weight:var(--base-text-weight-normal)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}.PageHeader-tabNav{margin-bottom:0;margin-top:var(--stack-gap-normal)}

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

@@ -2,6 +2,7 @@
   "name": "open_project/page_header",
   "selectors": [
     ".PageHeader",
+    ".PageHeader--noBorder",
     ".PageHeader-contextBar",
     ".PageHeader-titleBar",
     ".PageHeader-title",
@@ -10,6 +11,7 @@
     ".PageHeader-actions",
     ".PageHeader-breadcrumbs",
     ".PageHeader-leadingAction",
-    ".PageHeader-parentLink"
+    ".PageHeader-parentLink",
+    ".PageHeader-tabNav"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,qCAAsC,CADtC,6CAIF,CAEA,uBAKE,gCACF,CAEA,4CAJE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAWF,CANA,qBAKE,iCACF,CAEA,kBAGE,aAAc,CAFd,uCAAwC,CACxC,0CAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,cAEF,CAEA,uBACE,aACF","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: column;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--space-xsmall);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\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}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\n  margin-top: 2px; /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,qCAAsC,CADtC,6CAIF,CAEA,sBACE,kBAAmB,CACnB,gBACF,CAEA,uBAKE,gCACF,CAEA,4CAJE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAWF,CANA,qBAKE,iCACF,CAEA,kBAGE,aAAc,CAFd,uCAAwC,CACxC,0CAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,cAEF,CAEA,uBACE,aACF,CAEA,mBAEE,eAAgB,CADhB,kCAEF","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: column;\n}\n\n.PageHeader--noBorder {\n  border-bottom: none;\n  padding-bottom: 0;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--space-xsmall);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\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}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\n  margin-top: 2px; /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n\n.PageHeader-tabNav {\n  margin-top: var(--stack-gap-normal);\n  margin-bottom: 0;\n}\n"]}

data/app/components/primer/open_project/page_header.html.erb

@@ -27,4 +27,5 @@
   </div>
 
   <%= description %>
+  <%= tab_nav %>
 <% end %>

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

@@ -8,6 +8,11 @@
   flex-flow: column;
 }
 
+.PageHeader--noBorder {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
 .PageHeader-contextBar {
   display: flex;
   flex-flow: row;
@@ -60,3 +65,8 @@
 .PageHeader-parentLink {
   flex: 1 1 auto;
 }
+
+.PageHeader-tabNav {
+  margin-top: var(--stack-gap-normal);
+  margin-bottom: 0;
+}

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

@@ -205,6 +205,19 @@ module Primer
         end
       }
 
+      # Optional tabs nav at the bottom of the page header
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :tab_nav, lambda { |**system_arguments, &block|
+        @system_arguments[:classes] = class_names(@system_arguments[:classes], "PageHeader--noBorder")
+
+        system_arguments = deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-tabNav")
+
+        Primer::Alpha::TabNav.new(**system_arguments, &block)
+      }
+
       # @param mobile_menu_label [String] The tooltip label of the mobile menu
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(mobile_menu_label: I18n.t("label_more"), **system_arguments)

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 30
-      PATCH = 1
+      MINOR = 31
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/open_project/page_header_preview/playground.html.erb

@@ -14,4 +14,11 @@
       <% end %>
     <% end %>
   <% end %>
+  <% if with_tab_nav %>
+    <% header.with_tab_nav(label: "label") do |nav|%>
+      <% nav.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      <% nav.with_tab(href: "#") { "Tab 2" } %>
+      <% nav.with_tab(href: "#") { "Tab 3" } %>
+    <% end %>
+  <% end %>
 <% end %>

data/previews/primer/open_project/page_header_preview.rb

@@ -23,12 +23,14 @@ module Primer
       # @param description [String] text
       # @param with_leading_action [Symbol] octicon
       # @param with_actions [Boolean]
+      # @param with_tab_nav [Boolean]
       def playground(
         variant: :medium,
         title: "Hello",
         description: "Last updated 5 minutes ago by XYZ.",
         with_leading_action: :"none",
-        with_actions: true
+        with_actions: true,
+        with_tab_nav: false
       )
         breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
 
@@ -37,7 +39,8 @@ module Primer
                                        description: description,
                                        with_leading_action: with_leading_action,
                                        with_actions: with_actions,
-                                       breadcrumb_items: breadcrumb_items })
+                                       breadcrumb_items: breadcrumb_items,
+                                       with_tab_nav: with_tab_nav})
       end
 
       # @label Large title
@@ -167,6 +170,23 @@ module Primer
           header.with_breadcrumbs(breadcrumb_items, selected_item_font_weight: :normal)
         end
       end
+
+      # @label With tab nav
+      #
+      def tab_nav
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "Hello" }
+          header.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
+          header.with_description { "Last updated 5 minutes ago by XYZ." }
+          header.with_tab_nav(label: "label") do |nav|
+            Array.new(3) do |i|
+              nav.with_tab(selected: i.zero? , href: "#") do |tab|
+                tab.with_text { "Tab #{i + 1}" }
+              end
+            end
+          end
+        end
+      end
     end
   end
 end

data/static/classes.json

@@ -429,6 +429,9 @@
   "PageHeader": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader--noBorder": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],
@@ -447,6 +450,9 @@
   "PageHeader-parentLink": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-tabNav": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-title": [
     "Primer::OpenProject::PageHeader"
   ],

data/static/info_arch.json

@@ -16692,6 +16692,18 @@
             "description": "{{link_to_system_arguments_docs}}"
           }
         ]
+      },
+      {
+        "name": "tab_nav",
+        "description": "Optional tabs nav at the bottom of the page header",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
       }
     ],
     "methods": [
@@ -16840,6 +16852,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/tab_nav",
+        "name": "tab_nav",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

data/static/previews.json

@@ -5390,6 +5390,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/tab_nav",
+        "name": "tab_nav",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.30.1
+  version: 0.31.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-15 00:00:00.000000000 Z
+date: 2024-05-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview