openproject-primer_view_components 0.7.0 → 0.9.0

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

@@ -31,8 +31,7 @@
 /* Close button */
 .flash-close:not(.Banner-close) {
   float: right;
-  padding: var(--control-medium-paddingInline-spacious);
-  margin: calc(var(--control-medium-paddingInline-spacious) * -1);
+  margin-top: calc(var(--base-size-4) * -1);
   text-align: center;
   cursor: pointer;
 

data/app/components/primer/component.rb

@@ -52,7 +52,7 @@ module Primer
       message += " and will be removed in v#{version}." if version
       message += " Use #{new_class.name} instead." if new_class
 
-      ActiveSupport::Deprecation.warn(message)
+      ::Primer::ViewComponents.deprecation.warn(message)
     end
 
     def validate_aria_label

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

@@ -0,0 +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)}

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

@@ -0,0 +1,10 @@
+{
+  "name": "open_project/page_header",
+  "selectors": [
+    ".PageHeader",
+    ".PageHeader-title",
+    ".PageHeader-description",
+    ".PageHeader-actions",
+    ".PageHeader-actions+.PageHeader-description"
+  ]
+}

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= title %>
+  <%= description %>
+  <%= actions %>
+<% end %>

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

@@ -0,0 +1,36 @@
+/* OP PageHeader */
+
+.PageHeader {
+  display: flex;
+  padding-bottom: var(--stack-padding-condensed);
+  margin-bottom: var(--stack-gap-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
+  flex-flow: row wrap;
+  justify-content: flex-end; /* Keep actions right aligned. */
+}
+
+/* <h2> sized heading with normal font weight */
+.PageHeader-title {
+  flex: 1 1 auto;
+  order: 0;
+}
+
+/* One-liner of supporting text */
+.PageHeader-description {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+  flex: 1 100%;
+  order: 2;
+}
+
+/* Add 1 or 2 buttons to the right of the heading */
+.PageHeader-actions {
+  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
+  align-self: center;
+  justify-content: flex-end;
+  order: 1;
+
+  & + .PageHeader-description {
+    margin-top: var(--base-size-4);
+  }
+}

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

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # 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
+
+      status :open_project
+
+      # The title of the page header
+      #
+      # @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|
+        system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, HEADING_TAG_FALLBACK)
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-title")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Optional description below the title row
+      renders_one :description, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-description")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Actions
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-actions")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @system_arguments[:tag] = :header
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "PageHeader"
+          )
+      end
+
+      def render?
+        title?
+      end
+    end
+  end
+end

data/app/components/primer/primer.pcss

@@ -40,3 +40,6 @@
 @import "./beta/timeline_item.pcss";
 @import "./truncate.pcss";
 @import "./alpha/action_bar.pcss";
+
+/* OP specifics */
+@import "./open_project/page_header.pcss";

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -29,7 +29,7 @@ module Primer
       if allowed_values.include?(given_value)
         given_value
       elsif deprecated_values&.include?(given_value)
-        ActiveSupport::Deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production? || silence_deprecations?
+        ::Primer::ViewComponents.deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production? || silence_deprecations?
 
         given_value
       else

data/app/lib/primer/status/dsl.rb

@@ -21,7 +21,8 @@ module Primer
         beta: :beta,
         stable: :stable,
         deprecated: :deprecated,
-        experimental: :experimental
+        experimental: :experimental,
+        open_project: :open_project
       }.freeze
 
       class UnknownStatusError < StandardError; end

data/lib/primer/view_components/linters/details_menu_migration.rb

@@ -11,7 +11,7 @@ module ERBLint
           include Helpers::RuleHelpers
 
           MIGRATE_FROM_DETAILS_MENU = "<details-menu> has been deprecated. Please instead use Primer::Alpha::ActionMenu" \
-            "https://primer.style/design/components/action-menu/rails/alpha"
+            " https://primer.style/design/components/action-menu/rails/alpha"
           DETAILS_MENU_RUBY_PATTERN = /tag:?\s+:"details-menu"/.freeze
 
           def run(processed_source)

data/lib/primer/view_components/linters/tooltipped_migration.rb

@@ -10,7 +10,7 @@ module ERBLint
           include LinterRegistry
           include Helpers::RuleHelpers
 
-          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://github.com/primer/view_components/blob/main/docs/content/guides/accessibility/tooltipped_migration.md."
+          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://primer.style/design/guides/development/rails/migration-guides/primer-css-tooltipped."
           TOOLTIPPED_RUBY_PATTERN = /classes:.*tooltipped|class:.*tooltipped/.freeze
 
           def run(processed_source)

data/lib/primer/view_components/version.rb

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

data/lib/primer/view_components.rb

@@ -7,9 +7,27 @@ require "primer/view_components/engine"
 module Primer
   # :nodoc:
   module ViewComponents
+    DEPRECATION_HORIZON = "1.0"
+
     # primer/view_components root directory.
     def self.root
       Pathname(File.expand_path(File.join("..", ".."), __dir__))
     end
+
+    # Skip coverage here because only one branch will execute depending on what
+    # Rails version you're running.
+
+    # :nocov:
+    def self.deprecation
+      @deprecation ||=
+        if Rails.application.respond_to?(:deprecators)
+          Rails.application.deprecators[:primer_view_components] ||= ActiveSupport::Deprecation.new(
+            DEPRECATION_HORIZON, "primer_view_components"
+          )
+        else
+          ActiveSupport::Deprecation.instance
+        end
+    end
+    # :nocov:
   end
 end

data/previews/primer/beta/button_preview/leading_visual.html.erb

@@ -2,9 +2,9 @@
     scheme: scheme,
     size: size,
     block: block,
-    id: id,
+    id: "button-preview",
     align_content: align_content
 )) do |component| %>
   <% component.with_leading_visual_icon(icon: :search) %>
-  Button
+  Search
 <% end %>

data/previews/primer/beta/button_preview/leading_visual_svg.html.erb

@@ -0,0 +1,12 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: "button-preview",
+    align_content: align_content
+)) do |component| %>
+  <% component.with_leading_visual_svg do %>
+    <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
+  <% end %>
+  Button
+<% end %>

data/previews/primer/beta/button_preview/trailing_counter.html.erb

@@ -7,5 +7,5 @@
 )) do |component| %>
   <% component.with_leading_visual_icon(icon: :star) %>
   <% component.with_trailing_visual_counter(count: 15) %>
-  Button
+  Star
 <% end %>

data/previews/primer/beta/button_preview/trailing_visual.html.erb

@@ -7,5 +7,5 @@
     tag: tag
 )) do |component| %>
   <% component.with_trailing_visual_counter(count: "15") %>
-  Button
+  Comment
 <% end %>

data/previews/primer/beta/button_preview.rb

@@ -264,6 +264,28 @@ module Primer
                              })
       end
 
+      # @label Leading visual SVG
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @snapshot
+      def leading_visual_svg(
+        scheme: :invisible,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               id: id,
+                               align_content: align_content
+                             })
+      end
+
       # @label Trailing action
       # @param block toggle
       # @param align_content select [center, start]

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

@@ -0,0 +1,22 @@
+<%= render(Primer::OpenProject::PageHeader.new) do |component| %>
+  <% component.with_title(tag: :h1) do %>
+    A title
+  <% end %>
+  <% component.with_description do %>
+    A description with actions
+  <% end %>
+  <% component.with_actions do %>
+    <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
+      <% component.with_show_button { "Menu" } %>
+      <% component.with_item(label: "Item", tag: :button, value: "") %>
+      <% component.with_item(
+           label: "Show dialog",
+           tag: :button,
+           content_arguments: { "data-show-dialog-id": "my-dialog" },
+           value: "",
+           scheme: :danger
+         ) %>
+    <% end %>
+  <% end %>
+<% end %>
+

data/previews/primer/open_project/page_header_preview.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @component Primer::OpenProject::PageHeader
+    # @label Page Header
+    class PageHeaderPreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "Hello" }
+          header.with_description { "Last updated 5 minutes ago by XYZ." }
+        end
+      end
+
+
+      # @label Playground
+      #
+      def playground
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "Hello" }
+          header.with_description { "Last updated 5 minutes ago by XYZ." }
+        end
+      end
+
+      # @label With actions
+      def actions
+        render_with_template(locals: {})
+      end
+    end
+  end
+end

data/static/classes.json

@@ -411,6 +411,18 @@
   "Overlay-header": [
     "Primer::Alpha::Dialog"
   ],
+  "PageHeader": [
+    "Primer::OpenProject::PageHeader"
+  ],
+  "PageHeader-actions": [
+    "Primer::OpenProject::PageHeader"
+  ],
+  "PageHeader-description": [
+    "Primer::OpenProject::PageHeader"
+  ],
+  "PageHeader-title": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "Popover": [
     "Primer::Beta::Popover"
   ],

data/static/info_arch.json

@@ -10495,7 +10495,7 @@
     "slots": [
       {
         "name": "leading_visual",
-        "description": "Leading visuals appear to the left of the button text.\n\nUse:\n\n- `leading_visual_icon` for a {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
+        "description": "Leading visuals appear to the left of the button text.\n\nUse:\n\n- `leading_visual_icon` for a {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\n- `leading_visual_svg` to render a SVG.",
         "parameters": [
           {
             "name": "system_arguments",
@@ -10708,6 +10708,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/button/leading_visual_svg",
+        "name": "leading_visual_svg",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/button/trailing_action",
         "name": "trailing_action",

data/static/previews.json

@@ -2046,6 +2046,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/button/leading_visual_svg",
+        "name": "leading_visual_svg",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/button/trailing_action",
         "name": "trailing_action",
@@ -4419,6 +4432,53 @@
       }
     ]
   },
+  {
+    "name": "page_header",
+    "component": "PageHeader",
+    "status": "openproject",
+    "lookup_path": "primer/open_project/page_header",
+    "examples": [
+      {
+        "preview_path": "primer/open_project/page_header/playground",
+        "name": "playground",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "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/actions",
+        "name": "actions",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
   {
     "name": "popover",
     "component": "Popover",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.9.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-08-16 00:00:00.000000000 Z
+date: 2023-09-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -45,14 +45,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 19.6.7
+        version: 19.7.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 19.6.7
+        version: 19.7.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -746,6 +746,12 @@ files:
 - app/components/primer/layout_component.html.erb
 - app/components/primer/layout_component.rb
 - app/components/primer/navigation/tab_component.rb
+- app/components/primer/open_project/page_header.css
+- app/components/primer/open_project/page_header.css.json
+- app/components/primer/open_project/page_header.css.map
+- app/components/primer/open_project/page_header.html.erb
+- app/components/primer/open_project/page_header.pcss
+- app/components/primer/open_project/page_header.rb
 - app/components/primer/primer.d.ts
 - app/components/primer/primer.js
 - app/components/primer/primer.pcss
@@ -1062,6 +1068,7 @@ files:
 - previews/primer/beta/button_preview/all_schemes.html.erb
 - previews/primer/beta/button_preview/invisible_all_visuals.html.erb
 - previews/primer/beta/button_preview/leading_visual.html.erb
+- previews/primer/beta/button_preview/leading_visual_svg.html.erb
 - previews/primer/beta/button_preview/trailing_action.html.erb
 - previews/primer/beta/button_preview/trailing_counter.html.erb
 - previews/primer/beta/button_preview/trailing_visual.html.erb
@@ -1109,6 +1116,8 @@ files:
 - previews/primer/forms_preview/single_text_field_form.html.erb
 - previews/primer/forms_preview/submit_button_form.html.erb
 - previews/primer/forms_preview/text_field_and_checkbox_form.html.erb
+- previews/primer/open_project/page_header_preview.rb
+- previews/primer/open_project/page_header_preview/actions.html.erb
 - previews/primer/url_helpers.rb
 - static/arguments.json
 - static/assets/view-components.svg