openproject-primer_view_components 0.33.1 → 0.34.0

data/app/components/primer/beta/breadcrumbs.css

@@ -1 +1 @@
-.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}
+.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}

data/app/components/primer/beta/breadcrumbs.css.map

@@ -1 +1 @@
-{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,2DAA6D,CAD7D,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,2CACF,CAEA,6BACE,aACF,CAKA,+FACE,YACF,CAGF,4BACE,4BAA6B,CAC7B,wBAA0B,CAC1B,sCAAgC,CAAhC,8BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  margin-left: -0.35em;\n  white-space: nowrap;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    margin: 0 0.5em;\n    content: '';\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  cursor: default !important;\n  text-decoration: none !important;\n}\n"]}
+{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAErB,eAAgB,CADhB,kBAeF,CAZE,uBAKE,2DAA6D,CAD7D,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,2CACF,CAEA,6BACE,aACF,CAKA,+FACE,YACF,CAGF,4BACE,4BAA6B,CAC7B,wBAA0B,CAC1B,sCAAgC,CAAhC,8BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  margin-left: -0.35em;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    margin: 0 0.5em;\n    content: '';\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  cursor: default !important;\n  text-decoration: none !important;\n}\n"]}

data/app/components/primer/beta/breadcrumbs.pcss

@@ -1,7 +1,6 @@
 .breadcrumb-item {
   display: inline-block;
   margin-left: -0.35em;
-  white-space: nowrap;
   list-style: none;
 
   &::after {

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 = 1
+      MINOR = 34
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/banner_preview.rb

@@ -55,7 +55,7 @@ module Primer
       # @label Dismissable
       # @snapshot
       def dismissible
-        render(Primer::Alpha::Banner.new(dismiss_scheme: :hide, reappear: true)) { "This is a dismissable banner." }
+        render(Primer::Alpha::Banner.new(dismiss_scheme: :hide)) { "This is a dismissable banner." }
       end
 
       # @!group Full Width

data/previews/primer/beta/breadcrumbs_preview/with_beta_truncate.html.erb

@@ -0,0 +1,15 @@
+<% texts = [
+          "Breadcrumb Item 1",
+          "Breadcrumb Item 2 with a really long, long, long name",
+          "Breadcrumb Item 3 with an extremely long, long, long name"
+        ] %>
+
+<%= render(Primer::Beta::Breadcrumbs.new) do |breadcrumbs| %>
+  <% texts.each_with_index do |text, i| %>
+    <% breadcrumbs.with_item(href: "##{i}") do %>
+      <%= render(Primer::Beta::Truncate.new) do |truncate| %>
+        <% truncate.with_item(max_width: 135) { text } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/breadcrumbs_preview/with_deprecated_truncate.html.erb

@@ -0,0 +1,14 @@
+<%# erblint:counter DeprecatedComponentsCounter 1 %>
+<% texts = [
+          "Breadcrumb Item 1",
+          "Breadcrumb Item 2 with a really long, long, long name",
+          "Breadcrumb Item 3 with an extremely long, long, long name"
+        ] %>
+
+<%= render(Primer::Beta::Breadcrumbs.new) do |breadcrumbs| %>
+  <% texts.each_with_index do |text, i| %>
+    <% breadcrumbs.with_item(href: "##{i}") do %>
+      <%= render(Primer::Truncate.new(inline: true, max_width: 135)) { text } %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/breadcrumbs_preview.rb

@@ -26,6 +26,18 @@ module Primer
           end
         end
       end
+
+      # @label WithBetaTruncate
+      # @snapshot
+      def with_beta_truncate
+        render_with_template
+      end
+
+      # @label WithDeprecatedTruncate
+      # @snapshot
+      def with_deprecated_truncate
+        render_with_template
+      end
     end
   end
 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

@@ -10921,6 +10921,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/breadcrumbs/with_beta_truncate",
+        "name": "with_beta_truncate",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/breadcrumbs/with_deprecated_truncate",
+        "name": "with_deprecated_truncate",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -16865,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

@@ -2058,6 +2058,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/breadcrumbs/with_beta_truncate",
+        "name": "with_beta_truncate",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/breadcrumbs/with_deprecated_truncate",
+        "name": "with_deprecated_truncate",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -5403,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.1
+  version: 0.34.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-06-05 00:00:00.000000000 Z
+date: 2024-06-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -867,6 +867,8 @@ files:
 - previews/primer/beta/blankslate_preview/inside_flex_container.html.erb
 - previews/primer/beta/border_box_preview.rb
 - previews/primer/beta/breadcrumbs_preview.rb
+- previews/primer/beta/breadcrumbs_preview/with_beta_truncate.html.erb
+- previews/primer/beta/breadcrumbs_preview/with_deprecated_truncate.html.erb
 - previews/primer/beta/button_group_preview.rb
 - previews/primer/beta/button_group_preview/with_menu_button.html.erb
 - previews/primer/beta/button_preview.rb