openproject-primer_view_components 0.33.2 → 0.34.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f7bdcb326cadec091def40e2f0b6754806a5bc294786350ada58edfcf13bf0a3
-  data.tar.gz: 1be6868946518c85f884343dc2c25913c4ebb232b261c417ba7690fe7d488bef
+  metadata.gz: e62a6eaac97e4ba2f5888dcfcd25da23ec74671931265ca171e803ebd88a2010
+  data.tar.gz: de34a286c13348d3c36db855c4ec280f5fa7e99ed3ac712c2ed583a9e92a9f3a
 SHA512:
-  metadata.gz: 33170e4ddbfdf49d9c682778d2bc0d35183c2496772b6114615aa0a8d0b387e71faca70ff4a88e455498acb3e07b496068504fdd1b51d06ace5ac6c7398c42bf
-  data.tar.gz: 7d706e71b1077a8aafb00636d3e24b523970e614285f4f2e47ae0d6572e88f97eea55c508e314b93ada5492542a8b462d5853cf96ee66446b9ad558d30eb93e9
+  metadata.gz: a72a263f1b73f434c20c5be7d18b23d2af4f2eb9297ecadd2fa4da8430a9cff8fd196742bfc3ab500b874b76f439e63f825bfb18c6aa1f8c1d857c095817d77f
+  data.tar.gz: 147d78e64ada459d540f42720c72da9d2b8651519d7f2ee3cb2daf8465b98dd245487b59f944bc0cdd0c24e1ad290e98ae9c73bfaf5cc8e3bd2c5921ad84e2d4

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 0.34.0
+
+### Minor Changes
+
+- [#128](https://github.com/opf/primer_view_components/pull/128) [`7b7955d`](https://github.com/opf/primer_view_components/commit/7b7955d41b0f4b0dcdc6bb4176fce383c5beae6a) Thanks [@oliverguenther](https://github.com/oliverguenther)! - Allow segmented control action in page header
+
 ## 0.33.2
 
 ### Patch Changes

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

@@ -3,6 +3,9 @@
     <div class="PageHeader-contextBar">
       <%= @parent_link %>
       <%= breadcrumbs %>
+      <% if @mobile_segmented_control %>
+        <%= render(@mobile_segmented_control, &@mobile_segmented_control_block) %>
+      <% end %>
       <% if render_mobile_menu? %>
         <%= render(@mobile_action_menu) do |menu| %>
           <% menu.with_show_button(icon: :"kebab-horizontal", size: :small, "aria-label": @mobile_menu_label) %>

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

@@ -141,6 +141,21 @@ module Primer
             component.new(**system_arguments)
           },
         },
+        segmented_control: {
+          renders: lambda { |**system_arguments, &block|
+            deny_tag_argument(**system_arguments)
+
+            system_arguments = set_action_arguments(system_arguments, scheme: DEFAULT_ACTION_SCHEME)
+            mobile_args = system_arguments.delete(:mobile_system_arguments) || {}
+            @mobile_segmented_control = Primer::Alpha::SegmentedControl.new(**system_arguments,
+                                                                            **mobile_args,
+                                                                            mr: 2,
+                                                                            display: %i[flex none])
+            @mobile_segmented_control_block = block
+
+            Primer::Alpha::SegmentedControl.new(**system_arguments)
+          },
+        },
       }
 
       # Optional leading action prepend the title
@@ -252,7 +267,7 @@ module Primer
 
       def set_action_arguments(system_arguments, scheme: nil)
         system_arguments[:ml] ||= 2
-        system_arguments[:display] = [:none, :flex]
+        system_arguments[:display] = %i[none flex]
         system_arguments[:size] = :medium
         system_arguments[:scheme] = scheme unless scheme.nil?
         system_arguments[:classes] = class_names(

data/lib/primer/view_components/version.rb

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

data/previews/primer/open_project/page_header_preview.rb

@@ -40,7 +40,7 @@ module Primer
                                        with_leading_action: with_leading_action,
                                        with_actions: with_actions,
                                        breadcrumb_items: breadcrumb_items,
-                                       with_tab_nav: with_tab_nav})
+                                       with_tab_nav: with_tab_nav })
       end
 
       # @label Large title
@@ -71,8 +71,8 @@ module Primer
           component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
 
           component.with_action_button(mobile_icon: "star", mobile_label: "Star") do |button|
-             button.with_leading_visual_icon(icon: "star")
-             "Star"
+            button.with_leading_visual_icon(icon: "star")
+            "Star"
           end
           component.with_action_menu(menu_arguments: { anchor_align: :end },
                                      button_arguments: { button_block: callback }) do |menu|
@@ -123,7 +123,6 @@ module Primer
         end
       end
 
-
       # @label With a single action
       # The single action will not be transformed into a menu on mobile, but remains in a smaller variant
       def single_action
@@ -180,13 +179,62 @@ module Primer
           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|
+              nav.with_tab(selected: i.zero?, href: "#") do |tab|
                 tab.with_text { "Tab #{i + 1}" }
               end
             end
           end
         end
       end
+
+      # @label With a SegmentedControl
+      def segmented_control
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Here's a segmented control" }
+          component.with_breadcrumbs(["Baz"])
+
+          component.with_action_segmented_control("aria-label": "Segmented control") do |control|
+            control.with_item(label: "Preview", icon: :eye, selected: true)
+            control.with_item(label: "Raw", icon: :"file-code")
+          end
+
+          component.with_action_button(mobile_icon: "star", mobile_label: "Star") do |button|
+            button.with_leading_visual_icon(icon: "star")
+            "Star"
+          end
+
+          callback = lambda do |button|
+            button.with_leading_visual_icon(icon: :gear)
+            "Settings"
+          end
+
+          component.with_action_menu(menu_arguments: { anchor_align: :end },
+                                     button_arguments: { button_block: callback }) do |menu|
+            menu.with_item(label: "Subitem 1") do |item|
+              item.with_leading_visual_icon(icon: :paste)
+            end
+            menu.with_item(label: "Subitem 2") do |item|
+              item.with_leading_visual_icon(icon: :log)
+            end
+          end
+        end
+      end
+
+      # @label With mobile icons-only SegmentedControl
+      def segmented_control_mobile_icons
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Here's a segmented control" }
+          component.with_breadcrumbs(["Baz"])
+
+          component.with_action_segmented_control(
+            "aria-label": "Segmented control",
+            mobile_system_arguments: { hide_labels: true }
+          ) do |control|
+            control.with_item(label: "Preview", icon: :eye, selected: true)
+            control.with_item(label: "Raw", icon: :"file-code")
+          end
+        end
+      end
     end
   end
 end

data/static/info_arch.json

@@ -16891,6 +16891,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control",
+        "name": "segmented_control",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
+        "name": "segmented_control_mobile_icons",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

data/static/previews.json

@@ -5429,6 +5429,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control",
+        "name": "segmented_control",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
+        "name": "segmented_control_mobile_icons",
+        "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.33.2
+  version: 0.34.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-06-07 00:00:00.000000000 Z
+date: 2024-06-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview