primer_view_components 0.0.12 → 0.0.17

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

@@ -9,7 +9,7 @@ module Primer
     with_slot :badge, class_name: "Badge"
     with_slot :body, class_name: "Body"
 
-    attr_reader :kwargs
+    attr_reader :system_arguments
 
     # @example 75|Default
     #   <div style="padding-left: 60px">
@@ -21,14 +21,14 @@ module Primer
     #   </div>
     #
     # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
-    # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-    def initialize(condensed: false, **kwargs)
-      @kwargs = kwargs
-      @kwargs[:tag] = :div
-      @kwargs[:classes] = class_names(
+    # @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
 
@@ -37,55 +37,55 @@ module Primer
     end
 
     class Avatar < Primer::Slot
-      attr_reader :kwargs, :alt, :src, :size, :square
+      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 kwargs [Hash] <%= link_to_style_arguments_docs %>
-      def initialize(alt: nil, src: nil, size: 40, square: true, **kwargs)
+      # @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
+      attr_reader :system_arguments, :icon
 
       # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
-      # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-      def initialize(icon: nil, **kwargs)
+      # @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
+      attr_reader :system_arguments
 
-      # @param kwargs [Hash] <%= link_to_style_arguments_docs %>
-      def initialize(**kwargs)
-        @kwargs = kwargs
-        @kwargs[:tag] = :div
-        @kwargs[:classes] = class_names(
+      # @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

@@ -15,6 +15,7 @@ require "octicons_helper/helper"
 require "primer/class_name_helper"
 require "primer/classify"
 require "primer/fetch_or_fallback_helper"
+require "primer/join_style_arguments_helper"
 
 # Base configurations
 

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
@@ -29,7 +29,7 @@ module Primer
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
     BOX_SHADOW_KEY = :box_shadow
-
+    VISIBILITY_KEY = :visibility
 
     BOOLEAN_MAPPINGS = {
       underline: {
@@ -102,7 +102,8 @@ module Primer
         ALIGN_SELF_KEY,
         WIDTH_KEY,
         HEIGHT_KEY,
-        BOX_SHADOW_KEY
+        BOX_SHADOW_KEY,
+        VISIBILITY_KEY
       ]
     ).freeze
 
@@ -131,9 +132,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
@@ -233,6 +232,8 @@ module Primer
               else
                 memo[:classes] << "box-shadow-#{dasherized_val}"
               end
+            elsif key == VISIBILITY_KEY
+              memo[:classes] << "v-#{dasherized_val}"
             else
               memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{dasherized_val}"
             end

data/lib/primer/fetch_or_fallback_helper.rb

@@ -37,5 +37,13 @@ module Primer
         fallback
       end
     end
+
+    def fetch_or_fallback_boolean(given_value, fallback = false)
+      if [true, false].include?(given_value)
+        given_value
+      else
+        fallback
+      end
+    end
   end
 end

data/lib/primer/join_style_arguments_helper.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Primer
+  module JoinStyleArgumentsHelper
+    # Join two `style` arguments
+    #
+    # join_style_arguments("width: 100%", "height: 100%") =>
+    #   "width: 100%;height: 100%"
+    def join_style_arguments(*args)
+      args.compact.join(";")
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 12
+      PATCH = 17
 
       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.12
+  version: 0.0.17
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-30 00:00:00.000000000 Z
+date: 2020-12-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -237,6 +237,7 @@ files:
 - lib/primer/class_name_helper.rb
 - lib/primer/classify.rb
 - lib/primer/fetch_or_fallback_helper.rb
+- lib/primer/join_style_arguments_helper.rb
 - lib/primer/view_components.rb
 - lib/primer/view_components/engine.rb
 - lib/primer/view_components/version.rb