openproject-primer_view_components 0.43.0 → 0.44.0

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

@@ -0,0 +1,15 @@
+<%= render @dialog do |dialog| %>
+  <% dialog.with_body do %>
+    <%= feedback_message %>
+    <% if additional_content.present? %>
+      <%= additional_content %>
+    <% end %>
+  <% end %>
+  <% dialog.with_footer do %>
+    <% if footer.present? %>
+      <%= footer %>
+    <% else %>
+      <%= render(Primer::Beta::Button.new("data-close-dialog-id": @system_arguments[:id])) { I18n.t("button_close") } %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A pre-configured dialog which includes the FeedbackMessage
+    class FeedbackDialog < Primer::Component
+      status :open_project
+
+      # A feedback message with some defaults that are necessary for rendering nicely
+      #
+      # @param heading [String] the heading for the success message
+      # @param description [String] the description for the success message
+      # @param icon_arguments [Hash] the system_arguments for the icon
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :feedback_message, lambda { |icon_arguments: {}, **system_arguments|
+        system_arguments[:border] = false
+        Primer::OpenProject::FeedbackMessage.new(icon_arguments: icon_arguments, **system_arguments)
+      }
+
+      # Optional additional_content like a form input or toast.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :additional_content, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "FeedbackDialog-additionalContent"
+        )
+
+        system_arguments[:display] ||= :flex
+        system_arguments[:align_items] ||= :center
+        system_arguments[:justify_content] ||= :center
+        system_arguments[:mb] ||= 3
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      renders_one :footer
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "FeedbackDialog"
+        )
+        @system_arguments[:id] ||= self.class.generate_id
+
+        @dialog = Primer::Alpha::Dialog.new(title: @system_arguments[:title], subtitle: nil, visually_hide_title: true, **@system_arguments)
+      end
+
+      delegate :header?, :header, :with_header, :with_header_content,
+               :show_button?, :show_button, :with_show_button, :with_show_button_content,
+               to: :@dialog
+
+      private
+
+      def before_render
+        content
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= render(@blankslate) %>

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

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A view component for messages, inspired by the Primer Blankslate,
+    # which serves a different use-case (messages for when data is missing).
+    # We decided to wrap the Blankslate, because we don't want to have to adapt
+    # lots of different usages if Primer decides to change the Blankslate
+    # in a way that does not go well with our "misuse".
+    class FeedbackMessage < Primer::Component
+      status :open_project
+
+      # @param icon_arguments [Hash] special arguments for the icon
+      # @param loading [Boolean] Show a loading spinner instead of an icon
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(icon_arguments: {}, loading: false, **system_arguments)
+        @system_arguments = system_arguments
+        @icon_arguments = icon_arguments
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "FeedbackMessage"
+        )
+
+        @icon_arguments[:icon] ||= :"check-circle"
+        @icon_arguments[:color] ||= :success
+
+        @loading = loading
+
+        @blankslate = Primer::Beta::Blankslate.new(**@system_arguments)
+      end
+
+      delegate :description?, :description, :with_description, :with_description_content,
+               :heading?, :heading, :with_heading, :with_heading_content,
+               to: :@blankslate
+
+      private
+
+      def before_render
+        if @loading
+          @blankslate.with_visual_image(src: asset_path("loading_indicator.svg"), alt: I18n.t(:label_loading))
+        else
+          @blankslate.with_visual_icon(size: :medium, **@icon_arguments)
+        end
+
+        content
+      end
+
+      def render?
+        heading.present?
+      end
+    end
+  end
+end

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

@@ -1 +1 @@
-.SubHeader{align-items:center;display:grid;flex-wrap:wrap;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:16px}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}
+.SubHeader{align-items:center;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:16px}.SubHeader--expandedSearch{grid-template-areas:"left left left" "bottom bottom bottom"}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}

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

@@ -2,6 +2,7 @@
   "name": "open_project/sub_header",
   "selectors": [
     ".SubHeader",
+    ".SubHeader--expandedSearch",
     ".SubHeader-rightPane",
     ".SubHeader-middlePane",
     ".SubHeader-bottomPane",

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

@@ -1 +1 @@
-{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CAOb,cAAe,CANf,8DAA+D,CAC/D,mCAAoC,CAEpC,kBAIJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAGb,QAAS,CAJT,cAAe,CAGf,UAEJ,CAEA,2BACI,YAAa,CAEb,OAAQ,CADR,UAEJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    margin-bottom: 16px;\n\n    /* When the filter input is expanded in mobile, we switch to a flex layout */\n    flex-wrap: wrap;\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    width: 100%;\n    gap: 8px;\n}\n"]}
+{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,kBACJ,CAEA,2BACI,2DACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAGb,QAAS,CAJT,cAAe,CAGf,UAEJ,CAEA,2BACI,YAAa,CAEb,OAAQ,CADR,UAEJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.SubHeader--expandedSearch {\n    grid-template-areas: \"left left left\" \"bottom bottom bottom\";\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    width: 100%;\n    gap: 8px;\n}\n"]}

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

@@ -6,9 +6,10 @@
     grid-template-columns: auto 1fr auto;
     align-items: center;
     margin-bottom: 16px;
+}
 
-    /* When the filter input is expanded in mobile, we switch to a flex layout */
-    flex-wrap: wrap;
+.SubHeader--expandedSearch {
+    grid-template-areas: "left left left" "bottom bottom bottom";
 }
 
 .SubHeader-rightPane {

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

@@ -13,7 +13,7 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
         for (const item of this.shownItemsOnExpandedFilter) {
             item.classList.remove('d-none');
         }
-        this.classList.add('d-flex');
+        this.classList.add('SubHeader--expandedSearch');
         this.filterInput.focus();
     }
     collapseFilterInput() {
@@ -23,7 +23,7 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
         for (const item of this.shownItemsOnExpandedFilter) {
             item.classList.add('d-none');
         }
-        this.classList.remove('d-flex');
+        this.classList.remove('SubHeader--expandedSearch');
     }
 };
 __decorate([

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

@@ -15,7 +15,7 @@ class SubHeaderElement extends HTMLElement {
       item.classList.remove('d-none')
     }
 
-    this.classList.add('d-flex')
+    this.classList.add('SubHeader--expandedSearch')
 
     this.filterInput.focus()
   }
@@ -29,7 +29,7 @@ class SubHeaderElement extends HTMLElement {
       item.classList.add('d-none')
     }
 
-    this.classList.remove('d-flex')
+    this.classList.remove('SubHeader--expandedSearch')
   }
 }
 

data/lib/primer/view_components/version.rb

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

data/previews/primer/open_project/feedback_dialog_preview/additional_content.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::OpenProject::FeedbackDialog.new) do |dialog| %>
+  <% dialog.with_show_button { "Click me" } %>
+  <% dialog.with_feedback_message do |message| %>
+    <% message.with_heading(tag: :h2).with_content("Action successful") %>
+  <% end %>
+  <% dialog.with_additional_content do %>
+    <% render(Primer::Beta::Text.new) { "You can render whatever component you want here." } %>
+  <%  end %>
+<% end %>

data/previews/primer/open_project/feedback_dialog_preview/custom_footer.html.erb

@@ -0,0 +1,10 @@
+<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog")) do |dialog| %>
+  <% dialog.with_show_button { "Click me" } %>
+  <% dialog.with_feedback_message do |message| %>
+    <% message.with_heading(tag: :h2).with_content("Action successful") %>
+  <% end %>
+  <% dialog.with_footer do %>
+    <%= render(Primer::Beta::Button.new("data-close-dialog-id": "my-dialog")) { "Cancel" } %>
+    <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Accept" } %>
+  <%  end %>
+<% end %>

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

@@ -0,0 +1,18 @@
+<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog")) do |dialog| %>
+  <% dialog.with_show_button { "Click me" } %>
+  <% dialog.with_feedback_message(icon_arguments: { icon: icon, color: icon_color }, loading: loading_state) do |message| %>
+    <% message.with_heading(tag: :h2).with_content("Awesome!") %>
+    <% message.with_description { "Great! Everything worked well." } if show_description %>
+  <% end %>
+  <%  if show_additional_content %>
+    <% dialog.with_additional_content(display: :inline) do %>
+      <%= render(Primer::Alpha::Banner.new) { "Some additional content below" } %>
+      <% end %>
+  <% end %>
+  <%  if custom_footer %>
+    <% dialog.with_footer do %>
+      <%= render(Primer::Beta::Button.new("data-close-dialog-id": "my-dialog")) { "Cancel" } %>
+      <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Accept" } %>
+      <% end %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/feedback_dialog_preview.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    # @label FeedbackDialog
+    class FeedbackDialogPreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot interactive
+      def default
+        render(Primer::OpenProject::FeedbackDialog.new(title: "Success dialog")) do |dialog|
+          dialog.with_show_button { "Click me" }
+          dialog.with_feedback_message do |message|
+            message.with_heading(tag: :h2) { "Success" }
+            message.with_description { "Great! Everything worked well." }
+          end
+        end
+      end
+
+      # @label Playground
+      # @param icon [Symbol] octicon
+      # @param icon_color [Symbol] select [default, muted, subtle, accent, success, attention, severe, danger, open, closed, done, sponsors, on_emphasis, inherit]
+      # @param loading_state [Boolean] toggle
+      # @param show_description toggle
+      # @param show_additional_content toggle
+      # @param custom_footer toggle
+      def playground(icon: :"check-circle", icon_color: :success, loading_state: false, show_description: true, show_additional_content: false, custom_footer: false)
+        render_with_template(locals: { icon: icon,
+                                       icon_color: icon_color,
+                                       loading_state: loading_state,
+                                       show_description: show_description,
+                                       show_additional_content: show_additional_content,
+                                       custom_footer: custom_footer })
+      end
+
+      # @label With additional content
+      def additional_content
+        render_with_template(locals: {})
+      end
+
+      # @label With custom icon
+      def custom_icon
+        render(Primer::OpenProject::FeedbackDialog.new(title: "Error message")) do |dialog|
+          dialog.with_show_button { "Click me" }
+          dialog.with_feedback_message(icon_arguments: { icon: :"x-circle", color: :danger }) do |message|
+            message.with_heading(tag: :h2) { "Ups, something went wrong" }
+            message.with_description { "Please try again or contact your administrator if the issue persists." }
+          end
+        end
+      end
+
+      # @label With custom footer
+      def custom_footer
+        render_with_template(locals: {})
+      end
+
+      # @label With loading spinner
+      def loading_spinner
+        render(Primer::OpenProject::FeedbackDialog.new(title: "Waiting...")) do |dialog|
+          dialog.with_show_button { "Click me" }
+          dialog.with_feedback_message(loading: true) do |message|
+            message.with_heading(tag: :h2) { "Please wait, your request is being processed." }
+          end
+        end
+      end
+    end
+  end
+end

data/previews/primer/open_project/feedback_message_preview.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label FeedbackMessage
+    class FeedbackMessagePreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot
+      def default
+        render Primer::OpenProject::FeedbackMessage.new do |component|
+          component.with_heading(tag: :h2) { "Success" }
+          component.with_description { "You successfully created your first FeedbackMessage component" }
+        end
+      end
+
+
+      # @label Playground
+      #
+      # @param icon [Symbol] octicon
+      # @param icon_color [Symbol] select [default, muted, subtle, accent, success, attention, severe, danger, open, closed, done, sponsors, on_emphasis, inherit]
+      # @param loading_state [Boolean] toggle
+      # @param title [String]
+      # @param description [String]
+      # @param narrow [Boolean] toggle
+      # @param spacious [Boolean] toggle
+      # @param border [Boolean] toggle
+      def playground(icon: "check-circle", icon_color: :success, loading_state: false, title: "Yeah!", description: "Some description below...", narrow: false, spacious: false, border: false)
+        render Primer::OpenProject::FeedbackMessage.new(icon_arguments: { icon: icon, color: icon_color}, loading: loading_state, narrow: narrow, spacious: spacious, border: border) do |component|
+          component.with_heading(tag: :h2).with_content(title)
+          component.with_description { description }
+        end
+      end
+
+      # @label With custom icon
+      def with_custom_icon
+        render Primer::OpenProject::FeedbackMessage.new(icon_arguments: { icon: :"op-enterprise-addons", classes: "upsale-colored" }) do |component|
+          component.with_heading(tag: :h2) { "You are a hero" }
+          component.with_description { "Thanks for supporting an open source project!" }
+        end
+      end
+
+      # @label With custom color
+      def with_custom_color
+        render Primer::OpenProject::FeedbackMessage.new(icon_arguments: { icon: :"x-circle", color: :danger }) do |component|
+          component.with_heading(tag: :h2) { "Ups, something went wrong" }
+          component.with_description { "Please try again or contact your administrator." }
+        end
+      end
+
+      # @label With loading spinner
+      def loading_spinner
+        render(Primer::OpenProject::FeedbackMessage.new(loading: true)) do |component|
+          component.with_heading(tag: :h2) { "Please wait, your request is being processed." }
+        end
+      end
+    end
+  end
+end

data/static/arguments.json

@@ -5039,6 +5039,50 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::FeedbackDialog",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectFeedbackDialog",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/feedback_dialog.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/feedback_dialog/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::FeedbackMessage",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectFeedbackMessage",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/feedback_message.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/feedback_message/default/",
+    "parameters": [
+      {
+        "name": "icon_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "special arguments for the icon"
+      },
+      {
+        "name": "loading",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Show a loading spinner instead of an icon"
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::FlexLayout",
     "status": "open_project",

data/static/audited_at.json

@@ -118,6 +118,8 @@
   "Primer::OpenProject::BorderGrid": "",
   "Primer::OpenProject::BorderGrid::Cell": "",
   "Primer::OpenProject::DragHandle": "",
+  "Primer::OpenProject::FeedbackDialog": "",
+  "Primer::OpenProject::FeedbackMessage": "",
   "Primer::OpenProject::FlexLayout": "",
   "Primer::OpenProject::GridLayout": "",
   "Primer::OpenProject::GridLayout::Area": "",

data/static/classes.json

@@ -582,6 +582,9 @@
   "SubHeader": [
     "Primer::OpenProject::SubHeader"
   ],
+  "SubHeader--expandedSearch": [
+    "Primer::OpenProject::SubHeader"
+  ],
   "SubHeader-bottomPane": [
     "Primer::OpenProject::SubHeader"
   ],

data/static/constants.json

@@ -1422,6 +1422,10 @@
       "medium"
     ]
   },
+  "Primer::OpenProject::FeedbackDialog": {
+  },
+  "Primer::OpenProject::FeedbackMessage": {
+  },
   "Primer::OpenProject::FlexLayout": {
   },
   "Primer::OpenProject::GridLayout": {