primer_view_components 0.0.11 → 0.0.16

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

@@ -1,4 +1,4 @@
-<%= render(Primer::FlexComponent.new(**@kwargs)) do %>
+<%= render(Primer::FlexComponent.new(**@system_arguments)) do %>
   <% if @side == :left %>
     <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @sidebar_col] : @sidebar_col), mb: (@responsive ? [4, nil, 0] : nil)) do %>
       <%= sidebar %>

data/app/components/primer/layout_component.rb

@@ -27,16 +27,16 @@ module Primer
     # @param responsive [Boolean] Whether to collapse layout to a single column at smaller widths.
     # @param side [Symbol] Which side to display the sidebar on. <%= one_of(Primer::LayoutComponent::ALLOWED_SIDES) %>
     # @param sidebar_col [Integer] Sidebar column width.
-    # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-    def initialize(responsive: false, side: DEFAULT_SIDE, sidebar_col: DEFAULT_SIDEBAR_COL, **kwargs)
-      @kwargs = kwargs
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(responsive: false, side: DEFAULT_SIDE, sidebar_col: DEFAULT_SIDEBAR_COL, **system_arguments)
+      @system_arguments = system_arguments
       @side = fetch_or_fallback(ALLOWED_SIDES, side, DEFAULT_SIDE)
       @responsive = responsive
-      @kwargs[:classes] = class_names(
+      @system_arguments[:classes] = class_names(
         "gutter-condensed gutter-lg",
-        @kwargs[:classes]
+        @system_arguments[:classes]
       )
-      @kwargs[:direction] = responsive ? [:column, nil, :row] : nil
+      @system_arguments[:direction] = responsive ? [:column, nil, :row] : nil
 
       @sidebar_col = fetch_or_fallback(ALLOWED_SIDEBAR_COLS, sidebar_col, DEFAULT_SIDEBAR_COL)
       @main_col = MAX_COL - @sidebar_col

data/app/components/primer/link_component.rb

@@ -11,19 +11,19 @@ module Primer
     #
     # @param href [String] URL to be used for the Link
     # @param muted [Boolean] Uses light gray for Link color, and blue on hover
-    # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-    def initialize(href:, muted: false, **kwargs)
-      @kwargs = kwargs
-      @kwargs[:tag] = :a
-      @kwargs[:href] = href
-      @kwargs[:classes] = class_names(
-        @kwargs[:classes],
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(href:, muted: false, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :a
+      @system_arguments[:href] = href
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
         "muted-link" => fetch_or_fallback([true, false], muted, false)
       )
     end
 
     def call
-      render(Primer::BaseComponent.new(**@kwargs)) { content }
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
   end
 end

data/app/components/primer/octicon_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_style_arguments_docs %>.
+  # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_system_arguments_docs %>.
   class OcticonComponent < Primer::Component
     include Primer::ClassNameHelper
     include OcticonsHelper
@@ -24,22 +24,22 @@ module Primer
     #   <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
     #
     # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
-    # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_OPTIONS) %>
-    # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-    def initialize(icon:, size: SIZE_DEFAULT, **kwargs)
-      @icon, @kwargs = icon, kwargs
+    # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(icon:, size: SIZE_DEFAULT, **system_arguments)
+      @icon, @system_arguments = icon, system_arguments
 
-      @kwargs[:class] = Primer::Classify.call(**@kwargs)[:class]
-      @kwargs[:height] ||= SIZE_MAPPINGS[size]
+      @system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]
+      @system_arguments[:height] ||= SIZE_MAPPINGS[size]
 
       # Filter out classify options to prevent them from becoming invalid html attributes.
       # Note height and width are both classify options and valid html attributes.
-      octicon_helper_options = @kwargs.slice(:height, :width)
-      @kwargs = @kwargs.except(*Primer::Classify::VALID_KEYS, :classes).merge(octicon_helper_options)
+      octicon_helper_options = @system_arguments.slice(:height, :width)
+      @system_arguments = @system_arguments.except(*Primer::Classify::VALID_KEYS, :classes).merge(octicon_helper_options)
     end
 
     def call
-      octicon(@icon, **@kwargs)
+      octicon(@icon, **@system_arguments)
     end
   end
 end

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

@@ -1,4 +1,4 @@
-<%= render Primer::BaseComponent.new(**@kwargs) do %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <%= render body.component do %>
     <% if heading %>
       <%= render heading.component do %>

data/app/components/primer/popover_component.rb

@@ -40,17 +40,17 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-    def initialize(**kwargs)
-      @kwargs = kwargs
-      @kwargs[:tag] ||= :div
-      @kwargs[:classes] = class_names(
-        kwargs[:classes],
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :div
+      @system_arguments[:classes] = class_names(
+        system_arguments[:classes],
         "Popover"
       )
-      @kwargs[:position] ||= :relative
-      @kwargs[:right] = false unless kwargs.key?(:right)
-      @kwargs[:left] = false unless kwargs.key?(:left)
+      @system_arguments[:position] ||= :relative
+      @system_arguments[:right] = false unless system_arguments.key?(:right)
+      @system_arguments[:left] = false unless system_arguments.key?(:left)
     end
 
     def render?
@@ -58,15 +58,15 @@ module Primer
     end
 
     class Heading < ViewComponent::Slot
-      # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-      def initialize(**kwargs)
-        @kwargs = kwargs
-        @kwargs[:mb] ||= 2
-        @kwargs[:tag] ||= :h4
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:mb] ||= 2
+        @system_arguments[:tag] ||= :h4
       end
 
       def component
-        Primer::HeadingComponent.new(**@kwargs)
+        Primer::HeadingComponent.new(**@system_arguments)
       end
     end
 
@@ -89,24 +89,24 @@ module Primer
 
       # @param caret [Symbol] <%= one_of(Primer::PopoverComponent::Body::CARET_MAPPINGS.keys) %>
       # @param large [Boolean] Whether to use the large version of the component.
-      # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-      def initialize(caret: CARET_DEFAULT, large: false, **kwargs)
-        @kwargs = kwargs
-        @kwargs[:classes] = class_names(
-          kwargs[:classes],
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(caret: CARET_DEFAULT, large: false, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
           "Popover-message Box",
           CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
           "Popover-message--large" => large
         )
-        @kwargs[:p] ||= 4
-        @kwargs[:mt] ||= 2
-        @kwargs[:mx] ||= :auto
-        @kwargs[:text_align] ||= :left
-        @kwargs[:box_shadow] ||= :large
+        @system_arguments[:p] ||= 4
+        @system_arguments[:mt] ||= 2
+        @system_arguments[:mx] ||= :auto
+        @system_arguments[:text_align] ||= :left
+        @system_arguments[:box_shadow] ||= :large
       end
 
       def component
-        Primer::BoxComponent.new(**@kwargs)
+        Primer::BoxComponent.new(**@system_arguments)
       end
     end
   end

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

@@ -1,5 +1,5 @@
-<%= render Primer::BaseComponent.new(**@kwargs) do %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% items.each do |item| %>
-    <%= render Primer::BaseComponent.new(**item.kwargs) %>
+    <%= render Primer::BaseComponent.new(**item.system_arguments) %>
   <% end %>
 <% end %>

data/app/components/primer/progress_bar_component.rb

@@ -39,15 +39,15 @@ module Primer
     #   <% end %>
     #
     # @param size [Symbol] <%= one_of(Primer::ProgressBarComponent::SIZE_OPTIONS) %> Increases height.
-    # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-    def initialize(size: SIZE_DEFAULT, **kwargs)
-      @kwargs = kwargs
-      @kwargs[:classes] = class_names(
-        @kwargs[:classes],
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(size: SIZE_DEFAULT, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
         "Progress",
         SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
-      @kwargs[:tag] = :span
+      @system_arguments[:tag] = :span
 
     end
 
@@ -57,19 +57,19 @@ module Primer
 
     class Item < ViewComponent::Slot
       include ClassNameHelper
-      attr_reader :kwargs
+      attr_reader :system_arguments
 
       # @param percentage [Integer] Percentage completion of item.
       # @param bg [Symbol] Color of item.
-      # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-      def initialize(percentage: 0, bg: :green, **kwargs)
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(percentage: 0, bg: :green, **system_arguments)
         @percentage = percentage
-        @kwargs = kwargs
+        @system_arguments = system_arguments
 
-        @kwargs[:tag] = :span
-        @kwargs[:bg] = bg
-        @kwargs[:style] = "width: #{@percentage}%;"
-        @kwargs[:classes] = class_names("Progress-item", @kwargs[:classes])
+        @system_arguments[:tag] = :span
+        @system_arguments[:bg] = bg
+        @system_arguments[:style] = "width: #{@percentage}%;"
+        @system_arguments[:classes] = class_names("Progress-item", @system_arguments[:classes])
       end
     end
   end

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

@@ -1,4 +1,4 @@
-<%= render Primer::BaseComponent.new(**@kwargs) do %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
   <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke">
     <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1s" repeatCount="indefinite" />

data/app/components/primer/spinner_component.rb

@@ -11,6 +11,9 @@ module Primer
       :large => 64,
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
+    # Setting `box-sizing: content-box` allows consumers to add padding
+    # to the spinner without shrinking the icon
+    DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
 
     #
     # @example 48|Default
@@ -22,17 +25,15 @@ module Primer
     # @example 80|Large
     #   <%= render(Primer::SpinnerComponent.new(size: :large)) %>
     #
-    # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_OPTIONS) %>
-    def initialize(size: DEFAULT_SIZE, **kwargs)
-      @kwargs = kwargs
-      @kwargs[:tag] = :svg
-      @kwargs[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
-      @kwargs[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
-      @kwargs[:viewBox] = "0 0 16 16"
-      @kwargs[:fill] = :none
-      # Setting `box-sizing: content-box` allows consumers to add padding
-      # to the spinner without shrinking the icon
-      @kwargs[:style] = "box-sizing: content-box; color: var(--color-icon-primary);"
+    # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
+    def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :svg
+      @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+      @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+      @system_arguments[:viewBox] = "0 0 16 16"
+      @system_arguments[:fill] = :none
+      @system_arguments[:style] = DEFAULT_STYLE unless style.nil?
     end
   end
 end

data/app/components/primer/state_component.rb

@@ -39,19 +39,19 @@ module Primer
     # @param color [Symbol] Background color. <%= one_of(Primer::StateComponent::COLOR_OPTIONS) %>
     # @param tag [Symbol] HTML tag for element. <%= one_of(Primer::StateComponent::TAG_OPTIONS) %>
     # @param size [Symbol] <%= one_of(Primer::StateComponent::SIZE_OPTIONS) %>
-    # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
       title:,
       color: COLOR_DEFAULT,
       tag: TAG_DEFAULT,
       size: SIZE_DEFAULT,
-      **kwargs
+      **system_arguments
     )
-      @kwargs = kwargs
-      @kwargs[:title] = title
-      @kwargs[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
-      @kwargs[:classes] = class_names(
-        @kwargs[:classes],
+      @system_arguments = system_arguments
+      @system_arguments[:title] = title
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
         "State",
         COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
         SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
@@ -59,7 +59,7 @@ module Primer
     end
 
     def call
-      render(Primer::BaseComponent.new(**@kwargs)) { content }
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
   end
 end

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

@@ -1,16 +1,16 @@
-<%= render Primer::BaseComponent.new(**@kwargs) do %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% if heading.present? %>
-    <%= render Primer::BaseComponent.new(**heading.kwargs) do %>
+    <%= render Primer::BaseComponent.new(**heading.system_arguments) do %>
       <%= heading.content %>
     <% end %>
   <% end %>
   <% if actions.present? %>
-    <%= render Primer::BaseComponent.new(**actions.kwargs) do %>
+    <%= render Primer::BaseComponent.new(**actions.system_arguments) do %>
       <%= actions.content %>
     <% end %>
   <% end %>
   <% if description.present? %>
-    <%= render Primer::BaseComponent.new(**description.kwargs) do %>
+    <%= render Primer::BaseComponent.new(**description.system_arguments) do %>
       <%= description.content %>
     <% end %>
   <% end %>

data/app/components/primer/subhead_component.rb

@@ -48,19 +48,19 @@ module Primer
     #
     # @param spacious [Boolean] Whether to add spacing to the Subhead.
     # @param hide_border [Boolean] Whether to hide the border under the heading.
-    # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-    def initialize(spacious: false, hide_border: false, **kwargs)
-      @kwargs = kwargs
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(spacious: false, hide_border: false, **system_arguments)
+      @system_arguments = system_arguments
 
-      @kwargs[:tag] = :div
-      @kwargs[:classes] =
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] =
         class_names(
-          @kwargs[:classes],
+          @system_arguments[:classes],
           "Subhead hx_Subhead--responsive",
           "Subhead--spacious": spacious,
           "border-bottom-0": hide_border
         )
-      @kwargs[:mb] ||= hide_border ? 0 : nil
+      @system_arguments[:mb] ||= hide_border ? 0 : nil
     end
 
     def render?
@@ -70,15 +70,15 @@ module Primer
     class Heading < ViewComponent::Slot
       include ClassNameHelper
 
-      attr_reader :kwargs
+      attr_reader :system_arguments
 
       # @param danger [Boolean] Whether to style the heading as dangerous.
-      # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-      def initialize(danger: false, **kwargs)
-        @kwargs = kwargs
-        @kwargs[:tag] ||= :div
-        @kwargs[:classes] = class_names(
-          @kwargs[:classes],
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(danger: false, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] ||= :div
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
           "Subhead-heading",
           "Subhead-heading--danger": danger
         )
@@ -88,26 +88,26 @@ module Primer
     class Actions < ViewComponent::Slot
       include ClassNameHelper
 
-      attr_reader :kwargs
+      attr_reader :system_arguments
 
-      # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-      def initialize(**kwargs)
-        @kwargs = kwargs
-        @kwargs[:tag] = :div
-        @kwargs[:classes] = class_names(@kwargs[:classes], "Subhead-actions")
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(@system_arguments[:classes], "Subhead-actions")
       end
     end
 
     class Description < ViewComponent::Slot
       include ClassNameHelper
 
-      attr_reader :kwargs
+      attr_reader :system_arguments
 
-      # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-      def initialize(**kwargs)
-        @kwargs = kwargs
-        @kwargs[:tag] = :div
-        @kwargs[:classes] = class_names(@kwargs[:classes], "Subhead-description")
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(@system_arguments[:classes], "Subhead-description")
       end
     end
   end

data/app/components/primer/text_component.rb

@@ -7,14 +7,14 @@ module Primer
     #   <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
     #   <%= render(Primer::TextComponent.new(tag: :p, color: :red_5)) { "Red Text" } %>
     #
-    # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-    def initialize(**kwargs)
-      @kwargs = kwargs
-      @kwargs[:tag] ||= :span
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :span
     end
 
     def call
-      render(Primer::BaseComponent.new(**@kwargs)) { content }
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
   end
 end