primer_view_components 0.0.17 → 0.0.18

data/app/components/primer/flash_component.rb

@@ -57,6 +57,7 @@ module Primer
       @system_arguments[:mb] ||= spacious ? 4 : nil
     end
 
+    # :nodoc
     class Actions < Primer::Slot
       attr_reader :system_arguments
 

data/app/components/primer/flex_component.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
+  # :nodoc
   class FlexComponent < Primer::Component
     JUSTIFY_CONTENT_DEFAULT = nil
     JUSTIFY_CONTENT_MAPPINGS = {
@@ -8,9 +9,9 @@ module Primer
       flex_end: "flex-justify-end",
       center: "flex-justify-center",
       space_between: "flex-justify-between",
-      space_around: "flex-justify-around",
-    }
-    JUSTIFY_CONTENT_OPTIONS = [JUSTIFY_CONTENT_DEFAULT, *JUSTIFY_CONTENT_MAPPINGS.keys]
+      space_around: "flex-justify-around"
+    }.freeze
+    JUSTIFY_CONTENT_OPTIONS = [JUSTIFY_CONTENT_DEFAULT, *JUSTIFY_CONTENT_MAPPINGS.keys].freeze
 
     ALIGN_ITEMS_DEFAULT = nil
     ALIGN_ITEMS_MAPPINGS = {
@@ -18,18 +19,18 @@ module Primer
       end: "flex-items-end",
       center: "flex-items-center",
       baseline: "flex-items-baseline",
-      stretch: "flex-items-stretch",
-    }
-    ALIGN_ITEMS_OPTIONS = [ALIGN_ITEMS_DEFAULT, *ALIGN_ITEMS_MAPPINGS.keys]
+      stretch: "flex-items-stretch"
+    }.freeze
+    ALIGN_ITEMS_OPTIONS = [ALIGN_ITEMS_DEFAULT, *ALIGN_ITEMS_MAPPINGS.keys].freeze
 
     INLINE_DEFAULT = false
-    INLINE_OPTIONS = [INLINE_DEFAULT, true]
+    INLINE_OPTIONS = [INLINE_DEFAULT, true].freeze
 
     FLEX_WRAP_DEFAULT = nil
-    FLEX_WRAP_OPTIONS = [FLEX_WRAP_DEFAULT, true, false]
+    FLEX_WRAP_OPTIONS = [FLEX_WRAP_DEFAULT, true, false].freeze
 
     DEFAULT_DIRECTION = nil
-    ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse]
+    ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse].freeze
 
     def initialize(
       justify_content: JUSTIFY_CONTENT_DEFAULT,

data/app/components/primer/flex_item_component.rb

@@ -1,9 +1,10 @@
 # frozen_string_literal: true
 
 module Primer
+  # :nodoc
   class FlexItemComponent < Primer::Component
     FLEX_AUTO_DEFAULT = false
-    FLEX_AUTO_ALLOWED_VALUES = [FLEX_AUTO_DEFAULT, true]
+    FLEX_AUTO_ALLOWED_VALUES = [FLEX_AUTO_DEFAULT, true].freeze
 
     def initialize(flex_auto: FLEX_AUTO_DEFAULT, **system_arguments)
       @system_arguments = system_arguments

data/app/components/primer/heading_component.rb

@@ -1,7 +1,14 @@
 # frozen_string_literal: true
 
 module Primer
+  # Use the Heading component to wrap a component that will create a heading element
   class HeadingComponent < Primer::Component
+    # @example 70|Default
+    #   <%= render(Primer::HeadingComponent.new) { "H1 Text" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h2)) { "H2 Text" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h3)) { "H3 Text" } %>
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] ||= :h1

data/app/components/primer/label_component.rb

@@ -9,8 +9,8 @@ module Primer
       info: "Label--info",
       success: "Label--success",
       warning: "Label--warning",
-      danger: "Label--danger",
-    }
+      danger: "Label--danger"
+    }.freeze
 
     DEPRECATED_SCHEME_MAPPINGS = {
       gray: "Label--gray",
@@ -23,7 +23,7 @@ module Primer
       purple: "Label--purple",
       pink: "Label--pink",
       outline: "Label--outline",
-      green_outline: "Label--outline-green",
+      green_outline: "Label--outline-green"
     }.freeze
 
     SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
@@ -31,7 +31,7 @@ module Primer
 
     VARIANT_MAPPINGS = {
       large: "Label--large",
-      inline: "Label--inline",
+      inline: "Label--inline"
     }.freeze
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys << nil
 

data/app/components/primer/octicon_component.rb

@@ -10,7 +10,7 @@ module Primer
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => 16,
       :medium => 32,
-      :large => 64,
+      :large => 64
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -27,7 +27,8 @@ module Primer
     # @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
+      @icon = icon
+      @system_arguments = system_arguments
 
       @system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]
       @system_arguments[:height] ||= SIZE_MAPPINGS[size]
@@ -39,7 +40,7 @@ module Primer
     end
 
     def call
-      octicon(@icon, **@system_arguments)
+      octicon(@icon, { **@system_arguments })
     end
   end
 end

data/app/components/primer/popover_component.rb

@@ -57,6 +57,7 @@ module Primer
       body.present?
     end
 
+    # :nodoc
     class Heading < Primer::Slot
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(**system_arguments)
@@ -70,6 +71,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Body < Slot
       CARET_DEFAULT = :top
       CARET_MAPPINGS = {

data/app/components/primer/progress_bar_component.rb

@@ -12,7 +12,7 @@ module Primer
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",
       :small => "Progress--small",
-      :large => "Progress--large",
+      :large => "Progress--large"
     }.freeze
 
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
@@ -48,13 +48,13 @@ module Primer
         SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
       @system_arguments[:tag] = :span
-
     end
 
     def render?
       items.any?
     end
 
+    # :nodoc
     class Item < Primer::Slot
       attr_reader :system_arguments
 

data/app/components/primer/spinner_component.rb

@@ -3,12 +3,11 @@
 module Primer
   # Use Primer::SpinnerComponent to let users know that content is being loaded.
   class SpinnerComponent < Primer::Component
-
     DEFAULT_SIZE = :medium
     SIZE_MAPPINGS = {
       :small => 16,
       DEFAULT_SIZE => 32,
-      :large => 64,
+      :large => 64
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
     # Setting `box-sizing: content-box` allows consumers to add padding

data/app/components/primer/state_component.rb

@@ -8,19 +8,19 @@ module Primer
       COLOR_DEFAULT => "",
       :green => "State--green",
       :red => "State--red",
-      :purple => "State--purple",
+      :purple => "State--purple"
     }.freeze
     COLOR_OPTIONS = COLOR_MAPPINGS.keys
 
     SIZE_DEFAULT = :default
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",
-      :small => "State--small",
+      :small => "State--small"
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     TAG_DEFAULT = :span
-    TAG_OPTIONS = [TAG_DEFAULT, :div, :a]
+    TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
 
     # @example 40|Default
     #   <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>

data/app/components/primer/subhead_component.rb

@@ -67,6 +67,7 @@ module Primer
       heading.present?
     end
 
+    # :nodoc
     class Heading < ViewComponent::Slot
       include ClassNameHelper
 
@@ -85,6 +86,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Actions < ViewComponent::Slot
       include ClassNameHelper
 
@@ -98,6 +100,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Description < ViewComponent::Slot
       include ClassNameHelper
 

data/app/components/primer/timeline_item_component.rb

@@ -36,6 +36,7 @@ module Primer
       avatar.present? || badge.present? || body.present?
     end
 
+    # :nodoc
     class Avatar < Primer::Slot
       attr_reader :system_arguments, :alt, :src, :size, :square
 
@@ -59,6 +60,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Badge < Primer::Slot
       attr_reader :system_arguments, :icon
 
@@ -76,6 +78,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Body < Primer::Slot
       attr_reader :system_arguments
 

data/app/components/primer/tooltip_component.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Primer
+  # The Tooltip component is a wrapper component that will apply a tooltip to the provided content.
+  class TooltipComponent < Primer::Component
+    DIRECTION_DEFAULT = :n
+    ALIGN_DEFAULT = :default
+    MULTILINE_DEFAULT = false
+    DELAY_DEFAULT = false
+
+    ALIGN_MAPPING = {
+      ALIGN_DEFAULT => "",
+      :left_1 => "tooltipped-align-left-1",
+      :right_1 => "tooltipped-align-right-1",
+      :left_2 => "tooltipped-align-left-2",
+      :right_2 => "tooltipped-align-right-2"
+    }.freeze
+
+    DIRECTION_OPTIONS = [DIRECTION_DEFAULT] + %i[
+      nw
+      ne
+      w
+      e
+      sw
+      s
+      se
+    ]
+
+    # @example 100|Default
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder")) { "Default Bold Text" } %>
+    #   </div>
+    #
+    # @example 100|Wrapping another component
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder")) do %>
+    #       <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
+    #     <% end %>
+    #   </div>
+    #
+    # @example 100|With a direction
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
+    #   </div>
+    #
+    # @example 100|With an alignment
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
+    #   </div>
+    #
+    # @example 100|Without a delay
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
+    #   </div>
+    #
+    # @param label [String] the text to appear in the tooltip
+    # @param direction [String] Direction of the tooltip. <%= one_of(Primer::TooltipComponent::DIRECTION_OPTIONS) %>
+    # @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::TooltipComponent::ALIGN_MAPPING.keys) %>
+    # @param multiline [Boolean] Use this when you have long content
+    # @param no_delay [Boolean] By default the tooltips have a slight delay before appearing. Set true to override this
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      label:,
+      direction: DIRECTION_DEFAULT,
+      align: ALIGN_DEFAULT,
+      multiline: MULTILINE_DEFAULT,
+      no_delay: DELAY_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :span
+      @system_arguments[:aria] = { label: label }
+
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "tooltipped",
+        "tooltipped-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+        ALIGN_MAPPING[fetch_or_fallback(ALIGN_MAPPING.keys, align, ALIGN_DEFAULT)],
+        "tooltipped-no-delay" => fetch_or_fallback_boolean(no_delay, DELAY_DEFAULT),
+        "tooltipped-multiline" => fetch_or_fallback_boolean(multiline, MULTILINE_DEFAULT)
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/primer/truncate_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use TruncateComponent to shorten overflowing text with an ellipsis.
+  class TruncateComponent < Primer::Component
+    # @example 25|Default
+    #   <div class="col-2">
+    #     <%= render(Primer::TruncateComponent.new(tag: :p)) { "branch-name-that-is-really-long" } %>
+    #   </div>
+    #
+    # @example 25|Inline
+    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example 25|Expandable
+    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example 25|Custom size
+    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
+    #
+    # @param inline [Boolean] Whether the element is inline (or inline-block).
+    # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.
+    # @param max_width [Integer] Sets the max-width of the text.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(inline: false, expandable: false, max_width: nil, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "css-truncate",
+        "css-truncate-overflow" => !inline,
+        "css-truncate-target" => inline,
+        "expandable" => inline && expandable
+      )
+      @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "max-width: #{max_width}px;") unless max_width.nil?
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/primer/underline_nav_component.rb

@@ -1,12 +1,37 @@
 # frozen_string_literal: true
 
 module Primer
+  # Use the UnderlineNav component to style navigation with a minimal
+  # underlined selected state, typically used for navigation placed at the top
+  # of the page.
   class UnderlineNavComponent < Primer::Component
     ALIGN_DEFAULT = :left
-    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right]
+    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
 
     with_content_areas :body, :actions
 
+    # @example 70|Default
+    #   <%= render(Primer::UnderlineNavComponent.new) do |component| %>
+    #     <% component.with(:body) do %>
+    #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
+    #     <% end %>
+    #     <% component.with(:actions) do %>
+    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example 70|Align right
+    #   <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
+    #     <% component.with(:body) do %>
+    #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
+    #     <% end %>
+    #     <% component.with(:actions) do %>
+    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::ALIGN_DEFAULT %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(align: ALIGN_DEFAULT, **system_arguments)
       @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
 

data/app/components/primer/view_components.rb

@@ -31,6 +31,8 @@ require_relative "border_box_component"
 require_relative "box_component"
 require_relative "breadcrumb_component"
 require_relative "button_component"
+require_relative "button_group_component"
+require_relative "button_marketing_component"
 require_relative "counter_component"
 require_relative "details_component"
 require_relative "dropdown_menu_component"
@@ -49,4 +51,6 @@ require_relative "state_component"
 require_relative "subhead_component"
 require_relative "text_component"
 require_relative "timeline_item_component"
+require_relative "tooltip_component"
+require_relative "truncate_component"
 require_relative "underline_nav_component"