primer_view_components 0.0.40 → 0.0.45

data/app/components/primer/auto_complete/auto_complete.html.erb

@@ -1,3 +1,4 @@
+<%= label %>
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <%= input %>
   <%= icon %>

data/app/components/primer/avatar_stack_component.rb

@@ -39,7 +39,7 @@ module Primer
     # @param tag [Symbol] <%= one_of(Primer::AvatarStackComponent::TAG_OPTIONS) %>
     # @param align [Symbol] <%= one_of(Primer::AvatarStackComponent::ALIGN_OPTIONS) %>
     # @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
-    # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::TooltipComponent) %>.
+    # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::Tooltip) %>.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
       @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
@@ -63,7 +63,7 @@ module Primer
 
     def body_component
       if @tooltipped
-        Primer::TooltipComponent.new(**@body_arguments)
+        Primer::Tooltip.new(**@body_arguments)
       else
         Primer::BaseComponent.new(**@body_arguments)
       end

data/app/components/primer/base_component.rb

@@ -83,7 +83,9 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `col` | Integer | Number of columns. |
+    # | `clearfix` | Boolean | Wether to assign the `clearfix` class. |
+    # | `col` | Integer | Number of columns. <%= one_of(Primer::Classify::Grid::COL_VALUES) %> |
+    # | `container` | Symbol | Size of the container. <%= one_of(Primer::Classify::Grid::CONTAINER_VALUES) %> |
     #
     # ## Layout
     #
@@ -91,7 +93,7 @@ module Primer
     # | :- | :- | :- |
     # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :inline_flex, :table, :table_cell]) %> |
     # | `height` | Symbol | <%= one_of([:fit]) %> |
-    # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %> |
+    # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Primer::Classify::Utilities.mappings(:hide)) %> |
     # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
     # | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
     #
@@ -100,7 +102,7 @@ module Primer
     # | Name | Type | Description |
     # | :- | :- | :- |
     # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
-    # | `float` | Symbol | <%= one_of([:left, :right]) %> |
+    # | `float` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:float)) %> |
     # | `left` | Boolean | If `false`, sets `left: 0`. |
     # | `position` | Symbol | <%= one_of([:relative, :absolute, :fixed]) %> |
     # | `right` | Boolean | If `false`, sets `right: 0`. |
@@ -110,28 +112,31 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `m` | Integer | Margin. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:m]) %> |
-    # | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mb]) %> |
-    # | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:ml]) %> |
-    # | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mr]) %> |
-    # | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mt]) %> |
-    # | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mx]) %> |
-    # | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:my]) %> |
-    # | `p` | Integer | Padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:p]) %> |
-    # | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pb]) %> |
-    # | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pl]) %> |
-    # | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pr]) %> |
-    # | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pt]) %> |
-    # | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:px]) %> |
-    # | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:py]) %> |
+    # | `m` | Integer | Margin. <%= one_of(Primer::Classify::Utilities.mappings(:m)) %> |
+    # | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Utilities.mappings(:mb)) %> |
+    # | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Utilities.mappings(:ml)) %> |
+    # | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Utilities.mappings(:mr)) %> |
+    # | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Utilities.mappings(:mt)) %> |
+    # | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Utilities.mappings(:mx)) %> |
+    # | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Utilities.mappings(:my)) %> |
+    # | `p` | Integer | Padding. <%= one_of(Primer::Classify::Utilities.mappings(:p)) %> |
+    # | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Utilities.mappings(:pb)) %> |
+    # | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Utilities.mappings(:pl)) %> |
+    # | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Utilities.mappings(:pr)) %> |
+    # | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Utilities.mappings(:pt)) %> |
+    # | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Utilities.mappings(:px)) %> |
+    # | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Utilities.mappings(:py)) %> |
     #
     # ## Typography
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `font_size` | String, Integer | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %> |
-    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold]) %> |
+    # | `font_family` | Symbol | Font weight. <%= one_of([:mono]) %> |
+    # | `font_size` | String, Integer, Symbol | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %> |
+    # | `font_style` | Symbol | Font weight. <%= one_of([:italic]) %> |
+    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
     # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
+    # | `text_transform` | Symbol | Text alignment. <%= one_of([:uppercase]) %> |
     # | `underline` | Boolean | Whether text should be underlined. |
     # | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
     #
@@ -143,10 +148,15 @@ module Primer
     # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
     def initialize(tag:, classes: nil, **system_arguments)
       @tag = tag
-      @result = Primer::Classify.call(**system_arguments.merge(classes: classes))
+      @system_arguments = system_arguments
 
+      raise ArgumentError, "`class` is an invalid argument. Use `classes` instead." if system_arguments.key?(:class) && !Rails.env.production?
+
+      @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))
+
+      @system_arguments[:"data-view-component"] = true
       # Filter out Primer keys so they don't get assigned as HTML attributes
-      @content_tag_args = add_test_selector(system_arguments).except(*Primer::Classify::VALID_KEYS)
+      @content_tag_args = add_test_selector(@system_arguments).except(*Primer::Classify::VALID_KEYS)
     end
 
     def call

data/app/components/primer/beta/text.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `Text` is a wrapper component that will apply typography styles to the text inside.
+    class Text < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :span
+
+      # @example Default
+      #   <%= render(Primer::Beta::Text.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
+      #   <%= render(Primer::Beta::Text.new(tag: :p, color: :text_danger)) { "Danger Text" } %>
+      #
+      # @param tag [Symbol]
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag: DEFAULT_TAG, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = tag
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/primer/blankslate_component.html.erb

@@ -1,3 +1,4 @@
+<%# erblint:counter ButtonComponentMigrationCounter 1 %>
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% if spinner.present? %>
     <%= spinner %>

data/app/components/primer/blankslate_component.rb

@@ -23,61 +23,79 @@ module Primer
     #     description: "Description",
     #   ) %>
     #
-    # @example Icon|Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: "octoface",
-    #     title: "Title",
-    #     description: "Description",
-    #   ) %>
+    # @example Icon
+    #   @description
+    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :globe,
+    #       title: "Title",
+    #       description: "Description",
+    #     ) %>
     #
-    # @example Loading|Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #     description: "Description",
-    #   ) do |component| %>
-    #     <% component.spinner(size: :large) %>
-    #   <% end %>
+    # @example Loading
+    #   @description
+    #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #       description: "Description",
+    #     ) do |component| %>
+    #       <% component.spinner(size: :large) %>
+    #     <% end %>
     #
-    # @example Custom content|Pass custom content as a block in place of `description`.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #   ) do %>
-    #     <em>Your custom content here</em>
-    #   <% end %>
+    # @example Custom content
+    #   @description
+    #     Pass custom content as a block in place of `description`.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #     ) do %>
+    #       <em>Your custom content here</em>
+    #     <% end %>
     #
-    # @example Action button|Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: "book",
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    # @example Action button
+    #   @description
+    #     Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
     #
-    #     button_text: "Create the first page",
-    #     button_url: "https://github.com/monalisa/mona/wiki/_new",
-    #   ) %>
+    #       button_text: "Create the first page",
+    #       button_url: "https://github.com/monalisa/mona/wiki/_new",
+    #     ) %>
     #
-    # @example Link|Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: "book",
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #     link_text: "Learn more about wikis",
-    #     link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
-    #   ) %>
+    # @example Link
+    #   @description
+    #     Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       link_text: "Learn more about wikis",
+    #       link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
+    #     ) %>
     #
-    # @example Variations|There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: "book",
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #     narrow: true,
-    #     large: true,
-    #     spacious: true,
-    #   ) %>
+    # @example Variations
+    #   @description
+    #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       narrow: true,
+    #       large: true,
+    #       spacious: true,
+    #     ) %>
     #
     # @param title [String] Text that appears in a larger bold font.
     # @param title_tag [Symbol] HTML tag to use for title.
-    # @param icon [String] Octicon icon to use at top of component.
-    # @param icon_size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
+    # @param icon [Symbol] Octicon icon to use at top of component.
+    # @param icon_size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS, sort: false) %>
     # @param image_src [String] Image to display.
     # @param image_alt [String] Alt text for image.
     # @param description [String] Text that appears below the title. Typically a whole sentence.
@@ -89,6 +107,7 @@ module Primer
     # @param narrow [Boolean] Adds a maximum width.
     # @param large [Boolean] Increases the font size.
     # @param spacious [Boolean] Adds extra padding.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
       title: "",
       title_tag: :h3,

data/app/components/primer/button_component.rb

@@ -78,11 +78,12 @@ module Primer
     #
     # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
-    # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
+    # @param tag [Symbol] (Primer::BaseButton::DEFAULT_TAG) <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] (Primer::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
     # @param group_item [Boolean] Whether button is part of a ButtonGroup.
     # @param block [Boolean] Whether button is full-width with `display: block`.
     # @param caret [Boolean] Whether or not to render a caret.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
       scheme: DEFAULT_SCHEME,
       variant: DEFAULT_VARIANT,

data/app/components/primer/button_group.rb

@@ -22,7 +22,7 @@ module Primer
     #     <% component.button(scheme: :primary) { "Primary" } %>
     #     <% component.button(scheme: :danger) { "Danger" } %>
     #     <% component.button(scheme: :outline) { "Outline" } %>
-    #     <% component.button(classes: "my-class") { "Custom class" } %>
+    #     <% component.button(classes: "custom-class") { "Custom class" } %>
     #   <% end %>
     #
     # @example Variants

data/app/components/primer/clipboard_copy.rb

@@ -2,25 +2,43 @@
 
 module Primer
   # Use `ClipboardCopy` to copy element text content or input values to the clipboard.
+  #
+  # @accessibility
+  #   Always set an accessible label to help the user interact with the component.
   class ClipboardCopy < Primer::Component
     status :alpha
 
     # @example Default
-    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", label: "Copy text to the system clipboard")) %>
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
     #
     # @example With text instead of icons
-    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", label: "Copy text to the system clipboard")) do %>
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) do %>
     #     Click to copy!
     #   <% end %>
     #
-    # @param label [String] String that will be read to screenreaders when the component is focused
-    # @param value [String] Text to copy into the users clipboard when they click the component
+    # @example Copying from an element
+    #   <%= render(Primer::ClipboardCopy.new(for: "blob-path", "aria-label": "Copy text to the system clipboard")) %>
+    #   <div id="blob-path">src/index.js</div>
+    #
+    # @param aria-label [String] String that will be read to screenreaders when the component is focused
+    # @param value [String] Text to copy into the users clipboard when they click the component.
+    # @param for [String] Element id from where to get the copied value.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, value:, **system_arguments)
+    def initialize(value: nil, **system_arguments)
       @system_arguments = system_arguments
+      @value = value
+
+      validate!
+
       @system_arguments[:tag] = "clipboard-copy"
-      @system_arguments[:value] = value
-      @system_arguments[:"aria-label"] = label
+      @system_arguments[:value] = value if value.present?
+    end
+
+    private
+
+    def validate!
+      validate_aria_label
+      raise ArgumentError, "Must provide either `value` or `for`" if @value.nil? && @system_arguments[:for].nil?
     end
   end
 end

data/app/components/primer/clipboard_copy_component.js

@@ -1,4 +1,5 @@
 import '@github/clipboard-copy-element';
+const CLIPBOARD_COPY_TIMER_DURATION = 2000;
 function toggleSVG(svg) {
     if (svg.style.display === '' || svg.style.display === 'block') {
         svg.style.display = 'none';
@@ -15,9 +16,19 @@ function toggleCopyButton(button) {
     toggleSVG(clippyIcon);
     toggleSVG(checkIcon);
 }
+const clipboardCopyElementTimers = new WeakMap();
 document.addEventListener('clipboard-copy', function ({ target }) {
     if (!(target instanceof HTMLElement))
         return;
-    toggleCopyButton(target);
-    setTimeout(toggleCopyButton, 2000, target);
+    if (!target.hasAttribute('data-view-component'))
+        return;
+    const currentTimeout = clipboardCopyElementTimers.get(target);
+    if (currentTimeout) {
+        clearTimeout(currentTimeout);
+        clipboardCopyElementTimers.delete(target);
+    }
+    else {
+        toggleCopyButton(target);
+    }
+    clipboardCopyElementTimers.set(target, setTimeout(toggleCopyButton, CLIPBOARD_COPY_TIMER_DURATION, target));
 });

data/app/components/primer/clipboard_copy_component.ts

@@ -1,5 +1,7 @@
 import '@github/clipboard-copy-element'
 
+const CLIPBOARD_COPY_TIMER_DURATION = 2000
+
 function toggleSVG(svg: SVGElement) {
   if (svg.style.display === '' || svg.style.display === 'block') {
     svg.style.display = 'none'
@@ -18,9 +20,20 @@ function toggleCopyButton(button: HTMLElement) {
   toggleSVG(checkIcon)
 }
 
+const clipboardCopyElementTimers = new WeakMap<HTMLElement, number>()
+
 document.addEventListener('clipboard-copy', function ({target}) {
   if (!(target instanceof HTMLElement)) return
-  toggleCopyButton(target)
+  if (!target.hasAttribute('data-view-component')) return
+
+  const currentTimeout = clipboardCopyElementTimers.get(target)
+
+  if (currentTimeout) {
+    clearTimeout(currentTimeout)
+    clipboardCopyElementTimers.delete(target)
+  } else {
+    toggleCopyButton(target)
+  }
 
-  setTimeout(toggleCopyButton, 2000, target)
+  clipboardCopyElementTimers.set(target, setTimeout(toggleCopyButton, CLIPBOARD_COPY_TIMER_DURATION, target))
 })

data/app/components/primer/component.rb

@@ -5,7 +5,7 @@ require "view_component/version"
 module Primer
   # @private
   class Component < ViewComponent::Base
-    include ViewComponent::SlotableV2 unless ViewComponent::VERSION::STRING.to_f >= 2.28
+    include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
     include ClassNameHelper
     include FetchOrFallbackHelper
     include TestSelectorHelper

data/app/components/primer/details_component.rb

@@ -14,7 +14,7 @@ module Primer
 
     # Use the Summary slot as a trigger to reveal the content.
     #
-    # @param button [Boolean] Whether to render the Summary as a button or not.
+    # @param button [Boolean] (true) Whether to render the Summary as a button or not.
     # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
     renders_one :summary, lambda { |button: true, **system_arguments|
       system_arguments[:tag] = :summary
@@ -33,6 +33,17 @@ module Primer
       Primer::BaseComponent.new(**system_arguments)
     }
 
+    # @example Default
+    #
+    #   <%= render Primer::DetailsComponent.new do |c| %>
+    #     component.summary do
+    #       "Summary"
+    #     end
+    #     component.body do
+    #       "Body"
+    #     end
+    #   <% end %>
+    #
     # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
     # @param reset [Boolean] Defatuls to false. If set to true, it will remove the default caret and remove style from the summary element
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>