openproject-primer_view_components 0.36.1 → 0.37.0

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

@@ -9,8 +9,8 @@ module Primer
       # Use to render a block inside the grid
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_many :rows, lambda { |**system_arguments|
-        Primer::OpenProject::BorderGrid::Cell.new(**system_arguments)
+      renders_many :rows, lambda { |**system_arguments, &block|
+        Primer::OpenProject::BorderGrid::Cell.new(**system_arguments, &block)
       }
 
       # @param spacious [Boolean] Whether to add margin to the bottom of the component.

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

@@ -5,8 +5,6 @@
   <% end %>
 
   <% if caption %>
-    <%= render(Primer::Beta::Text.new(tag: :div, display: :flex, direction: :column)) do %>
-      <%= caption %>
-    <% end %>
+    <%= caption %>
   <% end %>
 <% end %>

data/app/components/primer/open_project/side_panel/section.css

@@ -0,0 +1 @@
+.SidePanel-sectionHeader{align-items:center;display:flex;height:32px;margin-bottom:8px}.SidePanel-sectionCounter{margin-left:8px}.SidePanel-sectionAction{display:flex;flex:1;justify-content:right}.SidePanel-sectionContent,.SidePanel-sectionDescription{line-height:1;margin-bottom:16px}

data/app/components/primer/open_project/side_panel/section.css.json

@@ -0,0 +1,10 @@
+{
+  "name": "open_project/side_panel/section",
+  "selectors": [
+    ".SidePanel-sectionHeader",
+    ".SidePanel-sectionCounter",
+    ".SidePanel-sectionAction",
+    ".SidePanel-sectionContent",
+    ".SidePanel-sectionDescription"
+  ]
+}

data/app/components/primer/open_project/side_panel/section.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["section.pcss"],"names":[],"mappings":"AAEA,yBAEE,kBAAmB,CADnB,YAAa,CAEb,WAAY,CACZ,iBACF,CAEA,0BACE,eACF,CAEA,yBAGE,YAAa,CADb,MAAO,CADP,qBAGF,CAEA,wDAGE,aAAc,CADd,kBAEF","file":"section.css","sourcesContent":["/* CSS for OpenProject::SidePanel::Section  */\n\n.SidePanel-sectionHeader {\n  display: flex;\n  align-items: center;\n  height: 32px;\n  margin-bottom: 8px;\n}\n\n.SidePanel-sectionCounter {\n  margin-left: 8px;\n}\n\n.SidePanel-sectionAction {\n  justify-content: right;\n  flex: 1;\n  display: flex;\n}\n\n.SidePanel-sectionContent,\n.SidePanel-sectionDescription {\n  margin-bottom: 16px;\n  line-height: 1;\n}\n"]}

data/app/components/primer/open_project/side_panel/section.html.erb

@@ -0,0 +1,29 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <div class="SidePanel-sectionHeader">
+    <%= title %>
+    <% if counter %>
+      <div class="SidePanel-sectionCounter">
+        <%= counter %>
+      </div>
+    <% end %>
+    <% if action %>
+      <div class="SidePanel-sectionAction">
+        <%= action %>
+      </div>
+    <% end %>
+  </div>
+
+  <% if description? %>
+    <div class="SidePanel-sectionDescription">
+      <%= description %>
+    </div>
+  <% end %>
+
+  <div class="SidePanel-sectionContent">
+    <%= content %>
+  </div>
+
+  <% if footer? %>
+    <%= footer %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/side_panel/section.pcss

@@ -0,0 +1,24 @@
+/* CSS for OpenProject::SidePanel::Section  */
+
+.SidePanel-sectionHeader {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  margin-bottom: 8px;
+}
+
+.SidePanel-sectionCounter {
+  margin-left: 8px;
+}
+
+.SidePanel-sectionAction {
+  justify-content: right;
+  flex: 1;
+  display: flex;
+}
+
+.SidePanel-sectionContent,
+.SidePanel-sectionDescription {
+  margin-bottom: 16px;
+  line-height: 1;
+}

data/app/components/primer/open_project/side_panel/section.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class SidePanel
+      # SidePanel::Section is an internal component that deals with individual sections of a sidepanel.
+      class Section < Primer::Component
+        status :open_project
+
+        TITLE_TAG_FALLBACK = :h4
+        TITLE_TAG_OPTIONS = [:h1, :h2, :h3, TITLE_TAG_FALLBACK, :h5, :h6].freeze
+
+        renders_one :title, lambda { |tag: TITLE_TAG_FALLBACK, **system_arguments, &block|
+          system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK)
+          Primer::BaseComponent.new(**system_arguments, &block)
+        }
+
+        renders_one :counter, Primer::Beta::Counter
+
+        renders_one :action, types: {
+          icon: lambda { |**system_arguments, &block|
+            system_arguments[:scheme] ||= :invisible
+            Primer::Beta::IconButton.new(**system_arguments, &block)
+          }
+        }
+
+        renders_one :description, lambda { |**system_arguments, &block|
+          system_arguments[:color] = :subtle
+          Primer::Beta::Text.new(**system_arguments, &block)
+        }
+
+        renders_one :footer, types: {
+          button: lambda { |**system_arguments, &block|
+            defaults = {
+              scheme: :link,
+              color: :default,
+              font_weight: :bold,
+              underline: false
+            }
+            system_arguments.reverse_merge!(defaults)
+
+            system_arguments[:classes] = class_names(
+              "SidePanel-sectionFooter",
+              system_arguments[:classes]
+            )
+
+            Primer::Beta::Button.new(**system_arguments, &block)
+          }
+        }
+
+        DEFAULT_TAG = :section
+        TAG_OPTIONS = [DEFAULT_TAG, :div, :span].freeze
+
+        def initialize(tag: DEFAULT_TAG, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+        end
+
+        def render?
+          title? && content?
+        end
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # Add a general description of component here
+    # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+    # @accessibility Add any accessibility considerations
+    class SidePanel < Primer::Component
+      status :open_project
+
+      # @param grid_row_arguments [Hash] Arguments to pass to +Primer::OpenProject::BorderGrid::Cell+ %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # A side panel consists of one or multiple sections
+      renders_many :sections, lambda { |component = nil, grid_row_arguments: {}, **system_arguments, &block|
+        if component.nil?
+          @border_grid.with_row(**grid_row_arguments) do
+            render(Primer::OpenProject::SidePanel::Section.new(**system_arguments)) do |section|
+              evaluate_block(section, &block)
+            end
+          end
+        elsif component.render?
+          @border_grid.with_row(**grid_row_arguments) do
+            render(component)
+          end
+        end
+      }
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:classes] = class_names(
+          "SidePanel",
+          @system_arguments[:classes]
+        )
+
+        @border_grid = Primer::OpenProject::BorderGrid.new(**@system_arguments)
+      end
+
+      def render?
+        sections.present?
+      end
+
+      def before_render
+        content
+      end
+    end
+  end
+end

data/app/components/primer/primer.pcss

@@ -45,3 +45,4 @@
 @import "./open_project/border_grid.pcss";
 @import "./open_project/input_group.pcss";
 @import "./open_project/sub_header.pcss";
+@import "./open_project/side_panel/section.pcss";

data/lib/primer/view_components/version.rb

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

data/previews/primer/open_project/side_panel_preview/default.html.erb

@@ -0,0 +1,40 @@
+<%=
+  render(Primer::Alpha::Layout.new) do |component|
+    component.with_main do
+      "Main content"
+    end
+    component.with_sidebar(row_placement: :start, col_placement: :end) do
+      render(Primer::OpenProject::SidePanel.new) do |panel|
+        panel.with_section do |section|
+          section.with_title { "Attributes" }
+          section.with_counter(count: 5)
+          section.with_description do
+            "Attached files are available to all meeting participants. You can also drag and drop these into agenda item notes."
+          end
+
+          section.with_action_icon(icon: :pencil, 'aria-label': 'Edit')
+          section.with_footer_button(tag: :a, href: '#') do |button|
+            button.with_leading_visual_icon(icon: :pencil)
+            "Additional action"
+          end
+
+          "Section content"
+        end
+
+        panel.with_section do |section|
+          section.with_title { "Without counter" }
+          section.with_action_icon(icon: :gear, 'aria-label': 'Manage')
+
+          "Some more content here"
+        end
+
+        panel.with_section do |section|
+          section.with_title { "Without action" }
+
+          "Even more content here"
+        end
+      end
+
+    end
+  end
+%>

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

@@ -0,0 +1,25 @@
+<%=
+  render(Primer::Alpha::Layout.new) do |component|
+    component.with_main do
+      "Main content"
+    end
+
+    component.with_sidebar(row_placement: :start, col_placement: :end) do
+      render(Primer::OpenProject::SidePanel.new) do |panel|
+        panel.with_section do |section|
+          section.with_title { "Attributes" }
+          section.with_counter(count: counter)
+          section.with_description { description } if show_description
+
+          section.with_action_icon(icon: :pencil, 'aria-label': 'Edit') if show_action
+          section.with_footer_button(tag: :a, href: '#') do |button|
+            button.with_leading_visual_icon(icon: :pencil)
+            "Additional action"
+          end if show_footer_action
+
+          "Section content"
+        end
+      end
+    end
+  end
+%>

data/previews/primer/open_project/side_panel_preview/with_component.html.erb

@@ -0,0 +1,36 @@
+<%=
+  clazz = Class.new(ViewComponent::Base) do
+    def self.name
+      "CustomComponent"
+    end
+
+    def call
+      render(Primer::OpenProject::SidePanel::Section.new) do |section|
+        section.with_title { "My custom component" }
+        section.with_counter(count: 5)
+        section.with_description do
+          "Some text here"
+        end
+
+        section.with_action_icon(icon: :pencil, 'aria-label': 'Edit')
+        section.with_footer_button(tag: :a, href: '#') do |button|
+          button.with_leading_visual_icon(icon: :pencil)
+          "Additional action"
+        end
+
+        "Section content"
+      end
+    end
+  end
+
+  render(Primer::Alpha::Layout.new) do |component|
+    component.with_main do
+      "Main content"
+    end
+    component.with_sidebar(row_placement: :start, col_placement: :end) do
+      render(Primer::OpenProject::SidePanel.new) do |panel|
+        panel.with_section(clazz.new)
+      end
+    end
+  end
+%>

data/previews/primer/open_project/side_panel_preview.rb

@@ -0,0 +1,38 @@
+# 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 SidePanel
+    class SidePanelPreview < ViewComponent::Preview
+      # @label Playground
+      # @param description text
+      # @param show_description toggle
+      # @param show_action toggle
+      # @param show_footer_action toggle
+      # @param counter number
+      def playground(description: "Some information", counter: 12, show_description: true, show_action: true, show_footer_action: true)
+        render_with_template(
+          locals: {
+            description: description,
+            counter: counter,
+            show_description: show_description,
+            show_action: show_action,
+            show_footer_action: show_footer_action
+          }
+        )
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+      end
+
+      # @label With custom component
+      def with_component
+      end
+    end
+  end
+end

data/static/arguments.json

@@ -5053,6 +5053,33 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::SidePanel",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectSidePanel",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/side_panel.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/side_panel/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::SidePanel::Section",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectSidePanelSection",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/side_panel/section.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/side_panel/section/default/",
+    "parameters": [
+
+    ]
+  },
   {
     "component": "OpenProject::SubHeader",
     "status": "open_project",

data/static/audited_at.json

@@ -123,6 +123,8 @@
   "Primer::OpenProject::PageHeader": "",
   "Primer::OpenProject::PageHeader::Dialog": "",
   "Primer::OpenProject::PageHeader::Menu": "",
+  "Primer::OpenProject::SidePanel": "",
+  "Primer::OpenProject::SidePanel::Section": "",
   "Primer::OpenProject::SubHeader": "",
   "Primer::OpenProject::ZenModeButton": "",
   "Primer::Tooltip": "",

data/static/classes.json

@@ -534,6 +534,21 @@
   "SegmentedControl-item": [
     "Primer::Alpha::SegmentedControl"
   ],
+  "SidePanel-sectionAction": [
+    "Primer::OpenProject::SidePanel::Section"
+  ],
+  "SidePanel-sectionContent": [
+    "Primer::OpenProject::SidePanel::Section"
+  ],
+  "SidePanel-sectionCounter": [
+    "Primer::OpenProject::SidePanel::Section"
+  ],
+  "SidePanel-sectionDescription": [
+    "Primer::OpenProject::SidePanel::Section"
+  ],
+  "SidePanel-sectionHeader": [
+    "Primer::OpenProject::SidePanel::Section"
+  ],
   "State": [
     "Primer::Beta::State"
   ],

data/static/constants.json

@@ -1480,6 +1480,26 @@
   },
   "Primer::OpenProject::PageHeader::Menu": {
   },
+  "Primer::OpenProject::SidePanel": {
+    "Section": "Primer::OpenProject::SidePanel::Section"
+  },
+  "Primer::OpenProject::SidePanel::Section": {
+    "DEFAULT_TAG": "section",
+    "TAG_OPTIONS": [
+      "section",
+      "div",
+      "span"
+    ],
+    "TITLE_TAG_FALLBACK": "h4",
+    "TITLE_TAG_OPTIONS": [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6"
+    ]
+  },
   "Primer::OpenProject::SubHeader": {
     "HIDDEN_FILTER_TARGET_SELECTOR": "sub-header.hiddenItemsOnExpandedFilter",
     "SHOWN_FILTER_TARGET_SELECTOR": "sub-header.shownItemsOnExpandedFilter"

data/static/info_arch.json

@@ -17138,6 +17138,158 @@
 
     ]
   },
+  {
+    "fully_qualified_name": "Primer::OpenProject::SidePanel",
+    "description": "Add a general description of component here\nAdd additional usage considerations or best practices that may aid the user to use the component correctly.",
+    "accessibility_docs": "Add any accessibility considerations",
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::SidePanel",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectSidePanel",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/side_panel.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/side_panel/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+      {
+        "name": "sections",
+        "description": "A side panel consists of one or multiple sections",
+        "parameters": [
+          {
+            "name": "grid_row_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "Arguments to pass to +Primer::OpenProject::BorderGrid::Cell+ %>"
+          },
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      }
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/side_panel/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/side_panel/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/side_panel/with_component",
+        "name": "with_component",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
+  {
+    "fully_qualified_name": "Primer::OpenProject::SidePanel::Section",
+    "description": "SidePanel::Section is an internal component that deals with individual sections of a sidepanel.",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::SidePanel::Section",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectSidePanelSection",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/side_panel/section.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/side_panel/section/default/",
+    "parameters": [
+
+    ],
+    "slots": [
+      {
+        "name": "title",
+        "description": null,
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "counter",
+        "description": null,
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "action",
+        "description": null,
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "description",
+        "description": null,
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "footer",
+        "description": null,
+        "parameters": [
+
+        ]
+      }
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::OpenProject::SubHeader",
     "description": "The SubHeader contains specific actions to modify the page content below, e.g a filter button or a create button\nIt should not be used stand alone, but in combination with a PageHeader, either as a direct sibling or as part of a tab content",