primer_view_components 0.0.17 → 0.0.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 70daa13e7909487e01c01f4759a88740922070c985ac9604df738614d48c57a1
-  data.tar.gz: 257383c54d408d94c8aac723804a1db9b75dee88527f60ce101f70514259567c
+  metadata.gz: 3e5a191f5ef0c2e50f095bce5d68943ebdc38a28d0edd66334152e876045d9cd
+  data.tar.gz: 8a103a45a9fed84736298a7b75c45b5f2bff3e78817fd4b02100853dbdf9003e
 SHA512:
-  metadata.gz: 65bef1719944f20523e8670d382474fa15a49cd03eab6a39578ad3901933668c3d2bcfdff9da7e46ba9fdac8587447b92984a6e4c67028732f9ba2f18dc9cf52
-  data.tar.gz: b578660620dc448087463fd24361c652a8fd9ead88cd6693a658af94f497eb68361e3236cb43386da66f58666c72051d5728bb67b4be6c832ee815c54f59e4c8
+  metadata.gz: 467aa20851a1b48cb605984b87a76f0297e5eddd32cee077a8f3cc7a06639829bf6f4dbf79fa81c4aa18f3b6b9cf697867cc8b347a9547d408a7c2aefddd3886
+  data.tar.gz: 9ad2bd67f630a6e734d6b08da43cad5b94482d0ff93085e65f8e8a4ffcf36e150bc7e5ec3beaa542b54a7f9949ff6411da8c6a3db0df460c4e430b0471a03fda

data/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ## main
 
+## 0.0.18
+
+* Add `border_radius` system argument.
+
+    *Ash Guillaume*
+
+* Add `animation` system argument.
+
+    *Manuel Puyol*
+
+* Add `Truncate`, `ButtonGroup` and `ButtonMarketing` components.
+
+    *Manuel Puyol*
+
+* Add `Tooltip` component.
+
+    *Simon Taranto*
+
 ## 0.0.17
 
 * Ensure all components support inline styles.

data/app/components/primer/base_component.rb

@@ -62,7 +62,7 @@ module Primer
     # @param bottom [Boolean] If `false`, sets `bottom: 0`.
     # @param left [Boolean] If `false`, sets `left: 0`.
     #
-    # @param display [Symbol] <%= one_of([:block, :none, :inline, :inline_block, :table, :table_cell]) %>
+    # @param display [Symbol] <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %>
     #
     # @param v [Symbol] Visibility. <%= one_of([:hidden, :visible]) %>
     #
@@ -86,6 +86,7 @@ module Primer
     # @param border_bottom [Integer] Set to `0` to remove the bottom border.
     # @param border_left [Integer] Set to `0` to remove the left border.
     # @param border_right [Integer] Set to `0` to remove the right border.
+    # @param border_radius [Integer] <%= one_of([0, 1, 2, 3]) %>
     #
     # @param font_size [String, Integer] <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %>
     # @param text_align [Symbol] Text alignment. <%= one_of([:left, :right, :center]) %>
@@ -102,6 +103,8 @@ module Primer
     #
     # @param word_break [Symbol] Whether to break words on line breaks. Can only be `:break_all`.
     #
+    # @param animation [Symbol] <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %>
+    #
     # @param tag [Symbol] HTML tag name to be passed to `tag.send`.
     # @param classes [String] CSS class name value to be concatenated with generated Primer CSS classes.
     def initialize(tag:, classes: nil, **system_arguments)
@@ -113,7 +116,7 @@ module Primer
     end
 
     def call
-      content_tag(@tag, content, **@content_tag_args.merge(@result))
+      content_tag(@tag, content, { **@content_tag_args.merge(@result) })
     end
 
     private

data/app/components/primer/blankslate_component.rb

@@ -94,7 +94,7 @@ module Primer
       link_text: "",
       link_url: "",
 
-      #variations
+      # variations
       narrow: false,
       large: false,
       spacious: false,
@@ -108,7 +108,7 @@ module Primer
         "blankslate",
         "blankslate-narrow": narrow,
         "blankslate-large": large,
-        "blankslate-spacious": spacious,
+        "blankslate-spacious": spacious
       )
 
       @title_tag = title_tag
@@ -125,6 +125,7 @@ module Primer
       @link_url = link_url
     end
 
+    # :nodoc
     class Spinner < Primer::Slot
       # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

data/app/components/primer/border_box_component.rb

@@ -34,6 +34,7 @@ module Primer
       rows.any? || header.present? || body.present? || footer.present?
     end
 
+    # :nodoc
     class Header < Primer::Slot
       attr_reader :system_arguments
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -47,6 +48,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Body < Primer::Slot
       attr_reader :system_arguments
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -60,6 +62,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Footer < Primer::Slot
       attr_reader :system_arguments
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -73,6 +76,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Row < Primer::Slot
       attr_reader :system_arguments
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

data/app/components/primer/box_component.rb

@@ -3,6 +3,12 @@
 module Primer
   # A basic wrapper component for most layout related needs.
   class BoxComponent < Primer::Component
+    # @example 20|Default
+    #   <%= render(Primer::BoxComponent.new) { "Your content here" } %>
+    #
+    # @example 54|Color and padding
+    #   <%= render(Primer::BoxComponent.new(bg: :gray, p: 3)) { "Hello world" } %>
+    #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
       @system_arguments = system_arguments
@@ -12,5 +18,9 @@ module Primer
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
+
+    def self.status
+      Primer::Component::STATUSES[:stable]
+    end
   end
 end

data/app/components/primer/breadcrumb_component.rb

@@ -33,7 +33,8 @@ module Primer
       # @param selected [Boolean] Whether or not the item is selected and not rendered as a link.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(href: nil, selected: false, **system_arguments)
-        @href, @system_arguments = href, system_arguments
+        @href = href
+        @system_arguments = system_arguments
 
         @href = nil if selected
         @system_arguments[:tag] = :li

data/app/components/primer/button_component.rb

@@ -16,7 +16,7 @@ module Primer
     VARIANT_MAPPINGS = {
       :small => "btn-sm",
       DEFAULT_VARIANT => "",
-      :large => "btn-large",
+      :large => "btn-large"
     }.freeze
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
 

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

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

data/app/components/primer/button_group_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use ButtonGroupComponent to render a series of buttons.
+  class ButtonGroupComponent < Primer::Component
+    include ViewComponent::SlotableV2
+
+    renders_many :buttons, ->(**kwargs) { Primer::ButtonComponent.new(group_item: true, **kwargs) }
+
+    # @example 50|Default
+    #   <%= render(Primer::ButtonGroupComponent.new) do |component|
+    #     component.button { "Default" }
+    #     component.button(button_type: :primary) { "Primary" }
+    #     component.button(button_type: :danger) { "Danger" }
+    #     component.button(button_type: :outline) { "Outline" }
+    #     component.button(classes: "my-class") { "Custom class" }
+    #   end %>
+    #
+    # @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(
+        "BtnGroup",
+        system_arguments[:classes]
+      )
+    end
+
+    def render?
+      buttons.any?
+    end
+  end
+end

data/app/components/primer/button_marketing_component.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
+  class ButtonMarketingComponent < Primer::Component
+    DEFAULT_BUTTON_TYPE = :default
+    BUTTON_TYPE_MAPPINGS = {
+      DEFAULT_BUTTON_TYPE => "",
+      :primary => "btn-primary-mktg",
+      :outline => "btn-outline-mktg",
+      :transparent => "btn-transparent"
+    }.freeze
+    BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
+
+    DEFAULT_VARIANT = :default
+    VARIANT_MAPPINGS = {
+      DEFAULT_VARIANT => "",
+      :large => "btn-large-mktg"
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+    DEFAULT_TAG = :button
+    TAG_OPTIONS = [DEFAULT_TAG, :a].freeze
+
+    DEFAULT_TYPE = :button
+    TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
+
+    # @example 125|Button types
+    #   <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
+    #   <%= render(Primer::ButtonMarketingComponent.new(button_type: :primary, mr: 2)) { "Primary" } %>
+    #   <%= render(Primer::ButtonMarketingComponent.new(button_type: :outline)) { "Outline" } %>
+    #   <div class="bg-gray-dark">
+    #     <%= render(Primer::ButtonMarketingComponent.new(button_type: :transparent)) { "Transparent" } %>
+    #   </div>
+    #
+    # @example 75|Sizes
+    #   <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
+    #   <%= render(Primer::ButtonMarketingComponent.new(variant: :large)) { "Large" } %>
+    #
+    # @param button_type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::BUTTON_TYPE_OPTIONS) %>
+    # @param variant [Symbol] <%= one_of(Primer::ButtonMarketingComponent::VARIANT_OPTIONS) %>
+    # @param tag [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TYPE_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      button_type: DEFAULT_BUTTON_TYPE,
+      variant: DEFAULT_VARIANT,
+      tag: DEFAULT_TAG,
+      type: DEFAULT_TYPE,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+
+      if @system_arguments[:tag] == :a
+        @system_arguments[:role] = :button
+      else
+        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
+      end
+
+      @system_arguments[:classes] = class_names(
+        "btn-mktg",
+        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
+        system_arguments[:classes]
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/primer/component.rb

@@ -7,5 +7,18 @@ module Primer
     include FetchOrFallbackHelper
     include OcticonsHelper
     include JoinStyleArgumentsHelper
+
+    # sourced from https://primer.style/doctocat/usage/front-matter#status
+    STATUSES = {
+      deprecated: :deprecated,
+      review: :review,
+      experimental: :experimental,
+      new: :new,
+      stable: :stable
+    }.freeze
+
+    def self.status
+      STATUSES[:experimental]
+    end
   end
 end

data/app/components/primer/counter_component.rb

@@ -7,7 +7,7 @@ module Primer
     SCHEME_MAPPINGS = {
       DEFAULT_SCHEME => "Counter",
       :gray => "Counter Counter--gray",
-      :light_gray => "Counter Counter--gray-light",
+      :light_gray => "Counter Counter--gray-light"
     }.freeze
 
     #
@@ -30,7 +30,12 @@ module Primer
       round: false,
       **system_arguments
     )
-      @count, @limit, @hide_if_zero, @text, @round, @system_arguments = count, limit, hide_if_zero, text, round, system_arguments
+      @count = count
+      @limit = limit
+      @hide_if_zero = hide_if_zero
+      @text = text
+      @round = round
+      @system_arguments = system_arguments
 
       @has_limit = !@limit.nil?
       @system_arguments[:title] = title
@@ -39,9 +44,7 @@ module Primer
         @system_arguments[:classes],
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)]
       )
-      if count == 0 && hide_if_zero
-        @system_arguments[:hidden] = true
-      end
+      @system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate
     end
 
     def call
@@ -60,7 +63,7 @@ module Primer
       else
         count = @count.to_i
         str = number_with_delimiter(@has_limit ? [count, @limit].min : count)
-        str += "+" if (@has_limit && count > @limit)
+        str += "+" if @has_limit && count > @limit
         str
       end
     end
@@ -76,14 +79,14 @@ module Primer
         if @round
           count = @has_limit ? [@count.to_i, @limit].min : @count.to_i
           precision = count.between?(100_000, 999_999) ? 0 : 1
-          units = {thousand: "k", million: "m", billion: "b"}
+          units = { thousand: "k", million: "m", billion: "b" }
           str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u")
         else
           @count = @count.to_i
           str = number_with_delimiter(@has_limit ? [@count, @limit].min : @count)
         end
 
-        str += "+" if (@has_limit && @count.to_i > @limit)
+        str += "+" if @has_limit && @count.to_i > @limit
         str
       end
     end

data/app/components/primer/details_component.rb

@@ -1,11 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  #
-  # overlay - options are `none`, `default` and `dark`. Dictates the type of overlay to render with.
-  # button - options are `default` and `reset`. default will make the target a default primer ``.btn`
-  #          reset will remove all styles from the <summary> element.
-  #
+  # Use DetailsComponent to reveal content after clicking a button.
   class DetailsComponent < Primer::Component
     include ViewComponent::Slotable
 
@@ -13,12 +9,15 @@ module Primer
     OVERLAY_MAPPINGS = {
       NO_OVERLAY => "",
       :default => "details-overlay",
-      :dark => "details-overlay details-overlay-dark",
+      :dark => "details-overlay details-overlay-dark"
     }.freeze
 
     with_slot :body, class_name: "Body"
     with_slot :summary, class_name: "Summary"
 
+    # @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 %>
     def initialize(overlay: NO_OVERLAY, reset: false, **system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = :details
@@ -33,7 +32,10 @@ module Primer
       summary.present? && body.present?
     end
 
+    # Use the Summary slot as a trigger to reveal the content.
     class Summary < Primer::Slot
+      # @param button [Boolean] Whether to render the Summary as a button or not.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(button: true, **system_arguments)
         @button = button
 
@@ -49,7 +51,9 @@ module Primer
       end
     end
 
+    # Use the Body slot as the main content to be shown when triggered by the Summary.
     class Body < Primer::Slot
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(**system_arguments)
         @system_arguments = system_arguments
         @system_arguments[:tag] ||= :div

data/app/components/primer/dropdown_menu_component.rb

@@ -1,18 +1,46 @@
 # frozen_string_literal: true
 
 module Primer
+  # DropdownMenus are lightweight context menus for housing navigation and actions.
+  # They're great for instances where you don't need the full power (and code)
+  # of the select menu.
   class DropdownMenuComponent < Primer::Component
     SCHEME_DEFAULT = :default
     SCHEME_MAPPINGS = {
       SCHEME_DEFAULT => "",
-      :dark => "dropdown-menu-dark",
+      :dark => "dropdown-menu-dark"
     }.freeze
 
     DIRECTION_DEFAULT = :se
-    DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s]
+    DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
 
+    # @example 200|With a header
+    #   <div style="margin-bottom: 150px">
+    #     <%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>
+    #       <% c.slot(:summary) do %>
+    #         Dropdown
+    #       <% end %>
+    #
+    #       <% c.slot(:body) do %>
+    #         <%= render(Primer::DropdownMenuComponent.new(header: "Options")) do %>
+    #           <ul>
+    #             <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    #             <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    #             <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+    #           </ul>
+    #         <% end %>
+    #       <% end %>
+    #     <% end %>
+    #   </div>
+    #
+    # @param direction [Symbol] <%= one_of(Primer::DropdownMenuComponent::DIRECTION_OPTIONS) %>
+    # @param scheme [Symbol] Pass :dark for dark mode theming
+    # @param header [String] Optional string to display as the header
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
-      @header, @direction, @system_arguments = header, direction, system_arguments
+      @header = header
+      @direction = direction
+      @system_arguments = system_arguments
 
       @system_arguments[:tag] = "details-menu"
       @system_arguments[:role] = "menu"