openproject-primer_view_components 0.47.1 → 0.48.1

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

@@ -11,7 +11,7 @@ module Primer
         HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
         HEADING_TAG_FALLBACK = :h1
 
-        renders_one :editable_form, lambda { |model: nil, update_path:, cancel_path:, input_name: :title, method: :put, label: I18n.t(:label_title), placeholder: I18n.t(:label_title), **system_arguments|
+        renders_one :editable_form, lambda { |model: false, update_path:, cancel_path:, input_name: :title, method: :put, label: I18n.t(:label_title), placeholder: I18n.t(:label_title), **system_arguments|
           primer_form_with(
             model: model,
             method: method,

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--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.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--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.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--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.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-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.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}

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

@@ -8,6 +8,8 @@
     ".PageHeader-title",
     ".PageHeader-title--large",
     ".PageHeader-description",
+    ".PageHeader-tabNavBar",
+    ".PageHeader-tabNavBar .PageHeader-tabNav",
     ".PageHeader--withTabNav .PageHeader-description",
     ".PageHeader-actions",
     ".PageHeader-breadcrumbs",

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,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAUA,4CAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCACF,CAEA,kBAGE,aAAc,CAFd,uCAAwC,CACxC,0CAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,gDACE,iCACF,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--withTabNav {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-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(--base-size-8);\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--withTabNav .PageHeader-description {\n  margin-bottom: var(--base-size-16);\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,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAUA,4CAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCACF,CAEA,kBAGE,aAAc,CAFd,uCAAwC,CACxC,0CAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,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--withTabNav {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-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(--base-size-8);\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-tabNavBar {\n  overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n  min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n  margin-bottom: var(--base-size-16);\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"]}

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

@@ -30,5 +30,9 @@
   </div>
 
   <%= description %>
-  <%= tab_nav %>
+  <% if tab_nav %>
+    <div class="PageHeader-tabNavBar">
+      <%= tab_nav %>
+    </div>
+  <% end %>
 <% end %>

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

@@ -47,6 +47,14 @@
   flex: 1 100%;
 }
 
+.PageHeader-tabNavBar {
+  overflow: auto;
+}
+
+.PageHeader-tabNavBar .PageHeader-tabNav {
+  min-width: max-content;
+}
+
 .PageHeader--withTabNav .PageHeader-description {
   margin-bottom: var(--base-size-16);
 }

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

@@ -190,10 +190,9 @@ module Primer
         if items.length > 1
           link_arguments = {}
           parent_item = items[items.length - 2]
-          parsed_parent_item = anchor_tag_string?(parent_item) ? anchor_string_to_object(parent_item) : parent_item
 
           link_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, DEFAULT_BACK_BUTTON_ICON)
-          link_arguments[:href] = parsed_parent_item[:href]
+          link_arguments[:href] = parent_item[:href]
           link_arguments[:target] = "_top"
 
           link_arguments[:classes] = class_names(link_arguments[:classes], "PageHeader-parentLink")
@@ -203,14 +202,12 @@ module Primer
             render(Primer::Beta::Octicon.new(icon: "arrow-left",
                                              "aria-label": I18n.t("button_back"),
                                              mr: 2)
-            ) + content_tag(:span, parsed_parent_item[:text])
+            ) + content_tag(:span, parent_item[:text])
           end
         end
 
         render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
           items.each do |item|
-            item = anchor_string_to_object(item) if anchor_tag_string?(item)
-
             if item.is_a?(String)
               breadcrumbs.with_item(href: "#", font_weight: selected_item_font_weight) { item }
             else
@@ -331,21 +328,6 @@ module Primer
           @mobile_action_block = block
         end
       end
-
-      # transform anchor tag strings to {href, text} objects
-      # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
-      def anchor_string_to_object(html_string)
-        # Parse the HTML
-        doc = Nokogiri::HTML.fragment(html_string)
-        # Extract href and text
-        anchor = doc.at("a")
-        { href: anchor["href"], text: anchor.text }
-      end
-
-      # Check if the item is an anchor tag string e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
-      def anchor_tag_string?(item)
-        item.is_a?(String) && item.start_with?("\u003c")
-      end
     end
   end
 end

data/app/components/primer/open_project/zen_mode_button.d.ts

@@ -1,6 +1,7 @@
 declare class ZenModeButtonElement extends HTMLElement {
     button: HTMLElement;
     inZenMode: boolean;
+    dispatchZenModeStatus(): void;
     private deactivateZenMode;
     private activateZenMode;
     performAction(): void;

data/app/components/primer/open_project/zen_mode_button.js

@@ -10,6 +10,16 @@ let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
         super(...arguments);
         this.inZenMode = false;
     }
+    dispatchZenModeStatus() {
+        // Create a new custom event
+        const event = new CustomEvent('zenModeToggled', {
+            detail: {
+                active: this.inZenMode,
+            },
+        });
+        // Dispatch the custom event
+        window.dispatchEvent(event);
+    }
     deactivateZenMode() {
         this.inZenMode = false;
         this.button.setAttribute('aria-pressed', 'false');
@@ -31,6 +41,7 @@ let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
         else {
             this.activateZenMode();
         }
+        this.dispatchZenModeStatus();
     }
 };
 __decorate([

data/app/components/primer/open_project/zen_mode_button.ts

@@ -5,6 +5,17 @@ class ZenModeButtonElement extends HTMLElement {
   @target button: HTMLElement
   inZenMode = false
 
+  dispatchZenModeStatus() {
+    // Create a new custom event
+    const event = new CustomEvent('zenModeToggled', {
+      detail: {
+        active: this.inZenMode,
+      },
+    })
+    // Dispatch the custom event
+    window.dispatchEvent(event)
+  }
+
   private deactivateZenMode() {
     this.inZenMode = false
     this.button.setAttribute('aria-pressed', 'false')
@@ -27,6 +38,7 @@ class ZenModeButtonElement extends HTMLElement {
     } else {
       this.activateZenMode()
     }
+    this.dispatchZenModeStatus()
   }
 }
 

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 47
+      MINOR = 48
       PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/open_project/page_header_preview.rb

@@ -182,7 +182,7 @@ module Primer
       def non_bold_breadcrumbs
         breadcrumb_items = [
           { href: "/foo", text: "Foo" },
-          "\u003ca href=\"/foo/bar\"\u003eBar\u003c/a\u003e",
+          { href: "/foo/bar", text: "Bar" },
           "Test: <b>Baz</b>".html_safe
         ]
         render(Primer::OpenProject::PageHeader.new) do |header|

data/static/classes.json

@@ -483,6 +483,9 @@
   "PageHeader-parentLink": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-tabNavBar": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-title": [
     "Primer::OpenProject::PageHeader"
   ],

data/static/info_arch.json

@@ -18076,26 +18076,7 @@
       }
     ],
     "methods": [
-      {
-        "name": "anchor_string_to_object",
-        "description": "transform anchor tag strings to {href, text} objects\ne.g \"\\u003ca href=\\\"/admin\\\"\\u003eAdministration\\u003c/a\\u003e\"",
-        "parameters": [
-
-        ],
-        "return_types": [
 
-        ]
-      },
-      {
-        "name": "anchor_tag_string?",
-        "description": "Check if the item is an anchor tag string e.g \"\\u003ca href=\\\"/admin\\\"\\u003eAdministration\\u003c/a\\u003e\"",
-        "parameters": [
-
-        ],
-        "return_types": [
-          "Boolean"
-        ]
-      }
     ],
     "previews": [
       {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.47.1
+  version: 0.48.1
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-09-30 00:00:00.000000000 Z
+date: 2024-10-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview