primer_view_components 0.0.8 → 0.0.13

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

@@ -1,26 +1,7 @@
 # frozen_string_literal: true
 
-# This component consists of a .Subhead container, which has a light gray bottom border.
-
-# Use a heading element whenever possible as they can be
-# used as navigation for assistive technologies, and avoid skipping levels.
-
-# ## Basic example
-
-# The `Primer::SubheadComponent` can take the following arguments:
-
-# 1. `heading` (string). The heading to be rendered.
-# 2. `actions` (content). Slot to render any actions to the right of heading.
-# 3. `description` (string). Slot to render description under the heading.
-
-# ```erb
-# <%= Primer::SubheadComponent.new(heading: "Hello world")) do |component| %>
-#   <% component.slot(:actions) do %>
-#     My Actions
-#   <% end %>
-# <% end %>
-# ```
 module Primer
+  # Use the Subhead component for page headings.
   class SubheadComponent < Primer::Component
     include ViewComponent::Slotable
 
@@ -28,18 +9,58 @@ module Primer
     with_slot :actions, class_name: "Actions"
     with_slot :description, class_name: "Description"
 
-    def initialize(spacious: false, hide_border: false, **kwargs)
-      @kwargs = kwargs
-
-      @kwargs[:tag] = :div
-      @kwargs[:classes] =
+    # @example 95|Default
+    #   <%= render(Primer::SubheadComponent.new) do |component| %>
+    #     <% component.slot(:heading) do %>
+    #       My Heading
+    #     <% end %>
+    #     <% component.slot(:description) do %>
+    #       My Description
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example 95|Without border
+    #   <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
+    #     <% component.slot(:heading) do %>
+    #       My Heading
+    #     <% end %>
+    #     <% component.slot(:description) do %>
+    #       My Description
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example 95|With actions
+    #   <%= render(Primer::SubheadComponent.new) do |component| %>
+    #     <% component.slot(:heading) do %>
+    #       My Heading
+    #     <% end %>
+    #     <% component.slot(:description) do %>
+    #       My Description
+    #     <% end %>
+    #     <% component.slot(:actions) do %>
+    #       <%= render(
+    #         Primer::ButtonComponent.new(
+    #           tag: :a, href: "http://www.google.com", button_type: :danger
+    #         )
+    #       ) { "Action" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param spacious [Boolean] Whether to add spacing to the Subhead.
+    # @param hide_border [Boolean] Whether to hide the border under the heading.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(spacious: false, hide_border: false, **system_arguments)
+      @system_arguments = system_arguments
+
+      @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?
@@ -49,13 +70,15 @@ module Primer
     class Heading < ViewComponent::Slot
       include ClassNameHelper
 
-      attr_reader :kwargs
+      attr_reader :system_arguments
 
-      def initialize(danger: false, **kwargs)
-        @kwargs = kwargs
-        @kwargs[:tag] ||= :div
-        @kwargs[:classes] = class_names(
-          @kwargs[:classes],
+      # @param danger [Boolean] Whether to style the heading as dangerous.
+      # @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
         )
@@ -65,24 +88,26 @@ module Primer
     class Actions < ViewComponent::Slot
       include ClassNameHelper
 
-      attr_reader :kwargs
+      attr_reader :system_arguments
 
-      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
 
-      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

@@ -1,14 +1,20 @@
 # frozen_string_literal: true
 
 module Primer
+  # The Text component is a wrapper component that will apply typography styles to the text inside.
   class TextComponent < Primer::Component
-    def initialize(**kwargs)
-      @kwargs = kwargs
-      @kwargs[:tag] ||= :span
+    # @example 70|Default
+    #   <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
+    #   <%= render(Primer::TextComponent.new(tag: :p, color: :red_5)) { "Red Text" } %>
+    #
+    # @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

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

@@ -1,16 +1,16 @@
-<%= render Primer::BaseComponent.new(**kwargs) do %>
+<%= render Primer::BaseComponent.new(**system_arguments) do %>
   <% if avatar %>
-    <%= render Primer::AvatarComponent.new(alt: avatar.alt, src: avatar.src, size: avatar.size, square: avatar.square, **avatar.kwargs) %>
+    <%= render Primer::AvatarComponent.new(alt: avatar.alt, src: avatar.src, size: avatar.size, square: avatar.square, **avatar.system_arguments) %>
   <% end %>
 
   <% if badge %>
-    <%= render Primer::BaseComponent.new(**badge.kwargs) do %>
+    <%= render Primer::BaseComponent.new(**badge.system_arguments) do %>
       <%= octicon badge.icon %>
     <% end %>
   <% end %>
 
   <% if body %>
-    <%= render Primer::BaseComponent.new(**body.kwargs) do %>
+    <%= render Primer::BaseComponent.new(**body.system_arguments) do %>
       <%= body.content %>
     <% end %>
   <% end %>

data/app/components/primer/timeline_item_component.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
+  # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
   class TimelineItemComponent < Primer::Component
     include ViewComponent::Slotable
 
@@ -8,14 +9,26 @@ module Primer
     with_slot :badge, class_name: "Badge"
     with_slot :body, class_name: "Body"
 
-    attr_reader :kwargs
-    def initialize(condensed: false, **kwargs)
-      @kwargs = kwargs
-      @kwargs[:tag] = :div
-      @kwargs[:classes] = class_names(
+    attr_reader :system_arguments
+
+    # @example 75|Default
+    #   <div style="padding-left: 60px">
+    #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
+    #       <% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
+    #       <% component.slot(:badge, bg: :green, color: :white, icon: :check) %>
+    #       <% component.slot(:body) { "Success!" } %>
+    #     <% end %>
+    #   </div>
+    #
+    # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(condensed: false, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = class_names(
         "TimelineItem",
         condensed ? "TimelineItem--condensed" : "",
-        kwargs[:classes]
+        system_arguments[:classes]
       )
     end
 
@@ -24,44 +37,55 @@ module Primer
     end
 
     class Avatar < Primer::Slot
-      attr_reader :kwargs, :alt, :src, :size, :square
-      def initialize(alt: nil, src: nil, size: 40, square: true, **kwargs)
+      attr_reader :system_arguments, :alt, :src, :size, :square
+
+      # @param alt [String] Alt text for avatar image.
+      # @param src [String] Src attribute for avatar image.
+      # @param size [Integer] Image size.
+      # @param square [Boolean] Whether to round the edges of the image.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(alt: nil, src: nil, size: 40, square: true, **system_arguments)
         @alt = alt
         @src = src
         @size = size
         @square = square
 
-        @kwargs = kwargs
-        @kwargs[:tag] = :div
-        @kwargs[:classes] = class_names(
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
           "TimelineItem-avatar",
-          kwargs[:classes]
+          system_arguments[:classes]
         )
       end
     end
 
     class Badge < Primer::Slot
-      attr_reader :kwargs, :icon
-      def initialize(icon: nil, **kwargs)
+      attr_reader :system_arguments, :icon
+
+      # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(icon: nil, **system_arguments)
         @icon = icon
 
-        @kwargs = kwargs
-        @kwargs[:tag] = :div
-        @kwargs[:classes] = class_names(
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
           "TimelineItem-badge",
-          kwargs[:classes]
+          system_arguments[:classes]
         )
       end
     end
 
     class Body < Primer::Slot
-      attr_reader :kwargs
-      def initialize(**kwargs)
-        @kwargs = kwargs
-        @kwargs[:tag] = :div
-        @kwargs[:classes] = class_names(
+      attr_reader :system_arguments
+
+      # @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(
           "TimelineItem-body",
-          kwargs[:classes]
+          system_arguments[:classes]
         )
       end
     end

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

@@ -1,4 +1,4 @@
-<%= render Primer::BaseComponent.new(**@kwargs) do %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% if actions && @align == :right %>
     <%= actions %>
   <% end %>

data/app/components/primer/underline_nav_component.rb

@@ -7,13 +7,13 @@ module Primer
 
     with_content_areas :body, :actions
 
-    def initialize(align: ALIGN_DEFAULT, **kwargs)
+    def initialize(align: ALIGN_DEFAULT, **system_arguments)
       @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
 
-      @kwargs = kwargs
-      @kwargs[:tag] = :nav
-      @kwargs[:classes] = class_names(
-        @kwargs[:classes],
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :nav
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
         "UnderlineNav",
         "UnderlineNav--right" => @align == :right
       )

data/app/components/primer/view_components.rb

@@ -43,6 +43,7 @@ require_relative "link_component"
 require_relative "octicon_component"
 require_relative "popover_component"
 require_relative "progress_bar_component"
+require_relative "spinner_component"
 require_relative "state_component"
 require_relative "subhead_component"
 require_relative "text_component"

data/lib/primer/classify.rb

@@ -9,7 +9,7 @@ module Primer
     ALIGN_ITEMS_KEY = :align_items
     DISPLAY_KEY = :display
     RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
-    BREAKPOINTS = ["", "-sm", "-md", "-lg"]
+    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"]
 
     # Keys where we can simply translate { key: value } into ".key-value"
     CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text, :box_shadow].freeze
@@ -131,9 +131,7 @@ module Primer
 
           if invalid_class_names.any?
             raise ArgumentError.new(
-              "Primer CSS class #{'name'.pluralize(invalid_class_names.length)} \
-              #{invalid_class_names.to_sentence} #{'is'.pluralize(invalid_class_names.length)} \
-              not allowed, use style arguments instead (https://github.com/primer/view_components#built-in-styling-arguments). This warning will not be raised in production.",
+              "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production.",
             )
           end
         end

data/lib/primer/view_components/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.8
+  version: 0.0.13
 platform: ruby
 authors:
 - GitHub Open Source
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-14 00:00:00.000000000 Z
+date: 2020-11-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -70,6 +70,20 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: 12.0.0
+- !ruby/object:Gem::Dependency
+  name: listen
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
 - !ruby/object:Gem::Dependency
   name: minitest
   requirement: !ruby/object:Gem::Requirement
@@ -168,7 +182,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.9.25
-description:
+description: 
 email:
 - opensource+primer_view_components@github.com
 executables: []
@@ -209,6 +223,8 @@ files:
 - app/components/primer/progress_bar_component.html.erb
 - app/components/primer/progress_bar_component.rb
 - app/components/primer/slot.rb
+- app/components/primer/spinner_component.html.erb
+- app/components/primer/spinner_component.rb
 - app/components/primer/state_component.rb
 - app/components/primer/subhead_component.html.erb
 - app/components/primer/subhead_component.rb
@@ -229,7 +245,7 @@ licenses:
 - MIT
 metadata:
   allowed_push_host: https://rubygems.org
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -245,7 +261,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.1.2
-signing_key:
+signing_key: 
 specification_version: 4
 summary: ViewComponents for the Primer Design System
 test_files: []