primer_view_components 0.0.31 → 0.0.36

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

@@ -2,7 +2,7 @@
   <% if spinner.present? %>
     <%= spinner %>
   <% elsif @icon.present? %>
-    <%= primer_octicon icon: @icon, size: @icon_size, classes: "blankslate-icon" %>
+    <%= primer_octicon @icon, size: @icon_size, classes: "blankslate-icon" %>
   <% elsif @image_src.present? && @image_alt.present? %>
     <%= image_tag "#{@image_src}", class: "mb-3", size: "56x56", alt: "#{@image_alt}" %>
   <% end %>

data/app/components/primer/blankslate_component.rb

@@ -5,8 +5,6 @@ module Primer
   class BlankslateComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     # Optional Spinner.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::SpinnerComponent) %>.

data/app/components/primer/border_box_component.rb

@@ -5,8 +5,6 @@ module Primer
   class BorderBoxComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     DEFAULT_PADDING = :default
     PADDING_MAPPINGS = {
       DEFAULT_PADDING => "",

data/app/components/primer/breadcrumb_component.rb

@@ -3,7 +3,6 @@
 module Primer
   # Use breadcrumbs to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item, which is a plain string indicating the current page.
   class BreadcrumbComponent < Primer::Component
-    include ViewComponent::SlotableV2
     status :beta
 
     # _Note: if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link._

data/app/components/primer/button_component.rb

@@ -3,14 +3,19 @@
 module Primer
   # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
   class ButtonComponent < Primer::Component
-    DEFAULT_BUTTON_TYPE = :default
-    BUTTON_TYPE_MAPPINGS = {
-      DEFAULT_BUTTON_TYPE => "",
+    status :beta
+
+    DEFAULT_SCHEME = :default
+    LINK_SCHEME = :link
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
       :primary => "btn-primary",
       :danger => "btn-danger",
-      :outline => "btn-outline"
+      :outline => "btn-outline",
+      :invisible => "btn-invisible",
+      LINK_SCHEME => "btn-link"
     }.freeze
-    BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
     DEFAULT_VARIANT = :medium
     VARIANT_MAPPINGS = {
@@ -26,44 +31,54 @@ module Primer
     DEFAULT_TYPE = :button
     TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
 
-    # @example Button types
+    # @example Schemes
     #   <%= render(Primer::ButtonComponent.new) { "Default" } %>
-    #   <%= render(Primer::ButtonComponent.new(button_type: :primary)) { "Primary" } %>
-    #   <%= render(Primer::ButtonComponent.new(button_type: :danger)) { "Danger" } %>
-    #   <%= render(Primer::ButtonComponent.new(button_type: :outline)) { "Outline" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :invisible)) { "Invisible" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :link)) { "Link" } %>
     #
     # @example Variants
     #   <%= render(Primer::ButtonComponent.new(variant: :small)) { "Small" } %>
     #   <%= render(Primer::ButtonComponent.new(variant: :medium)) { "Medium" } %>
     #   <%= render(Primer::ButtonComponent.new(variant: :large)) { "Large" } %>
     #
-    # @param button_type [Symbol] <%= one_of(Primer::ButtonComponent::BUTTON_TYPE_OPTIONS) %>
+    # @example Block
+    #   <%= render(Primer::ButtonComponent.new(block: :true)) { "Block" } %>
+    #   <%= render(Primer::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>
+    #
+    # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
     # @param tag [Symbol] <%= one_of(Primer::ButtonComponent::TAG_OPTIONS) %>
     # @param type [Symbol] <%= one_of(Primer::ButtonComponent::TYPE_OPTIONS) %>
     # @param group_item [Boolean] Whether button is part of a ButtonGroup.
+    # @param block [Boolean] Whether button is full-width with `display: block`.
     def initialize(
-      button_type: DEFAULT_BUTTON_TYPE,
+      scheme: DEFAULT_SCHEME,
       variant: DEFAULT_VARIANT,
       tag: DEFAULT_TAG,
       type: DEFAULT_TYPE,
       group_item: false,
+      block: false,
       **system_arguments
     )
+      @scheme = scheme
       @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
+      if @system_arguments[:tag] == :button
         @system_arguments[:type] = type
+      else
+        @system_arguments[:role] = :button
       end
 
       @system_arguments[:classes] = class_names(
-        "btn",
         system_arguments[:classes],
-        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
         VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
+        "btn" => !link?,
+        "btn-block" => block,
         "BtnGroup-item" => group_item
       )
     end
@@ -71,5 +86,11 @@ module Primer
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
+
+    private
+
+    def link?
+      @scheme == LINK_SCHEME
+    end
   end
 end

data/app/components/primer/button_group_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use ButtonGroupComponent to render a series of buttons.
   class ButtonGroupComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # Required list of buttons to be rendered.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.
@@ -13,9 +11,9 @@ module Primer
     # @example 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(scheme: :primary) { "Primary" }
+    #     component.button(scheme: :danger) { "Danger" }
+    #     component.button(scheme: :outline) { "Outline" }
     #     component.button(classes: "my-class") { "Custom class" }
     #   end %>
     #

data/app/components/primer/button_marketing_component.rb

@@ -3,14 +3,14 @@
 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 => "",
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
       :primary => "btn-primary-mktg",
       :outline => "btn-outline-mktg",
       :transparent => "btn-transparent"
     }.freeze
-    BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
     DEFAULT_VARIANT = :default
     VARIANT_MAPPINGS = {
@@ -25,25 +25,25 @@ module Primer
     DEFAULT_TYPE = :button
     TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
 
-    # @example Button types
+    # @example Schemes
     #   <%= 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" } %>
+    #   <%= render(Primer::ButtonMarketingComponent.new(scheme: :primary, mr: 2)) { "Primary" } %>
+    #   <%= render(Primer::ButtonMarketingComponent.new(scheme: :outline)) { "Outline" } %>
+    #   <div class="color-bg-canvas-inverse">
+    #     <%= render(Primer::ButtonMarketingComponent.new(scheme: :transparent)) { "Transparent" } %>
     #   </div>
     #
     # @example 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 scheme [Symbol] <%= one_of(Primer::ButtonMarketingComponent::SCHEME_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,
+      scheme: DEFAULT_SCHEME,
       variant: DEFAULT_VARIANT,
       tag: DEFAULT_TAG,
       type: DEFAULT_TYPE,
@@ -60,7 +60,7 @@ module Primer
 
       @system_arguments[:classes] = class_names(
         "btn-mktg",
-        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
         VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
         system_arguments[:classes]
       )

data/app/components/primer/close_button.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use CloseButton to render an `×` without default button styles.
+  class CloseButton < Primer::Component
+    DEFAULT_TYPE = :button
+    TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
+
+    # @example Default
+    #   <%= render(Primer::CloseButton.new) %>
+    #
+    # @param type [Symbol] <%= one_of(Primer::CloseButton::TYPE_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(type: DEFAULT_TYPE, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :button
+      @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
+      @system_arguments[:classes] = class_names(
+        "close-button",
+        system_arguments[:classes]
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) do
+        render(Primer::OcticonComponent.new("x"))
+      end
+    end
+  end
+end

data/app/components/primer/component.rb

@@ -1,13 +1,16 @@
 # frozen_string_literal: true
 
 require "octicons_helper/helper"
+require "view_component/version"
 
 module Primer
   # @private
   class Component < ViewComponent::Base
+    include ViewComponent::SlotableV2 unless ViewComponent::VERSION::STRING.to_f >= 2.28
     include ClassNameHelper
     include FetchOrFallbackHelper
     include OcticonsHelper
+    include TestSelectorHelper
     include JoinStyleArgumentsHelper
     include ViewHelper
     include Status::Dsl

data/app/components/primer/details_component.rb

@@ -3,7 +3,6 @@
 module Primer
   # Use DetailsComponent to reveal content after clicking a button.
   class DetailsComponent < Primer::Component
-    include ViewComponent::SlotableV2
     status :beta
 
     NO_OVERLAY = :none

data/app/components/primer/dropdown/menu_component.rb

@@ -5,8 +5,6 @@ module Primer
     # This component is part of `Primer::DropdownComponent` and should not be
     # used as a standalone component.
     class MenuComponent < Primer::Component
-      include ViewComponent::SlotableV2
-
       SCHEME_DEFAULT = :default
       SCHEME_MAPPINGS = {
         SCHEME_DEFAULT => "",

data/app/components/primer/dropdown_component.rb

@@ -4,8 +4,6 @@ module Primer
   # Dropdowns 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 DropdownComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # Required trigger for the dropdown. Only accepts a content.
     # Its classes can be customized by the `summary_classes` param in the parent component
     renders_one :button
@@ -13,7 +11,7 @@ module Primer
     # Required context menu for the dropdown
     #
     # @param direction [Symbol] <%= one_of(Primer::Dropdown::MenuComponent::DIRECTION_OPTIONS) %>
-    # @param scheme [Symbol] Pass :dark for dark mode theming
+    # @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 %>
     renders_one :menu, Primer::Dropdown::MenuComponent

data/app/components/primer/dropdown_menu_component.rb

@@ -36,7 +36,7 @@ module Primer
     #   </div>
     #
     # @param direction [Symbol] <%= one_of(Primer::DropdownMenuComponent::DIRECTION_OPTIONS) %>
-    # @param scheme [Symbol] Pass :dark for dark mode theming
+    # @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)

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

@@ -1,9 +1,9 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= primer_octicon icon: @icon if @icon %>
+  <%= primer_octicon @icon if @icon %>
   <%= content %>
   <% if @dismissible %>
     <button class="flash-close js-flash-close" type="button" aria-label="Close">
-      <%= primer_octicon icon: "x" %>
+      <%= primer_octicon "x" %>
     </button>
   <% end %>
 

data/app/components/primer/flash_component.rb

@@ -5,8 +5,6 @@ module Primer
   class FlashComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     # Optional action content showed on the right side of the component.
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -17,18 +15,18 @@ module Primer
       Primer::BaseComponent.new(**system_arguments)
     }
 
-    DEFAULT_VARIANT = :default
-    VARIANT_MAPPINGS = {
-      DEFAULT_VARIANT => "",
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
       :warning => "flash-warn",
       :danger => "flash-error",
       :success => "flash-success"
     }.freeze
-    # @example Variants
+    # @example Schemes
     #   <%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
-    #   <%= render(Primer::FlashComponent.new(variant: :warning)) { "This is a warning flash message!" } %>
-    #   <%= render(Primer::FlashComponent.new(variant: :danger)) { "This is a danger flash message!" } %>
-    #   <%= render(Primer::FlashComponent.new(variant: :success)) { "This is a success flash message!" } %>
+    #   <%= render(Primer::FlashComponent.new(scheme: :warning)) { "This is a warning flash message!" } %>
+    #   <%= render(Primer::FlashComponent.new(scheme: :danger)) { "This is a danger flash message!" } %>
+    #   <%= render(Primer::FlashComponent.new(scheme: :success)) { "This is a success flash message!" } %>
     #
     # @example Full width
     #   <%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
@@ -51,9 +49,9 @@ module Primer
     # @param spacious [Boolean] Whether to add margin to the bottom of the component.
     # @param dismissible [Boolean] Whether the component can be dismissed with an X button.
     # @param icon [String] Name of Octicon icon to use.
-    # @param variant [Symbol] <%= one_of(Primer::FlashComponent::VARIANT_MAPPINGS.keys) %>
+    # @param scheme [Symbol] <%= one_of(Primer::FlashComponent::SCHEME_MAPPINGS.keys) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(full: false, spacious: false, dismissible: false, icon: nil, variant: DEFAULT_VARIANT, **system_arguments)
+    def initialize(full: false, spacious: false, dismissible: false, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
       @icon = icon
       @dismissible = dismissible
       @system_arguments = system_arguments
@@ -61,7 +59,7 @@ module Primer
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "flash",
-        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
         "flash-full": full
       )
       @system_arguments[:mb] ||= spacious ? 4 : nil

data/app/components/primer/foo_bar.d.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/components/primer/foo_bar.js

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/components/primer/hidden_text_expander.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use HiddenTextExpander to indicate and toggle hidden text.
+  class HiddenTextExpander < Primer::Component
+    # @example Default
+    #   <%= render(Primer::HiddenTextExpander.new) %>
+    #
+    # @example Inline
+    #   <%= render(Primer::HiddenTextExpander.new(inline: true)) %>
+    #
+    # @example Styling the button
+    #   <%= render(Primer::HiddenTextExpander.new(button_arguments: { p: 1, classes: "my-custom-class" })) %>
+    #
+    # @param inline [Boolean] Whether or not the expander is inline.
+    # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(inline: false, button_arguments: {}, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :span
+      @system_arguments[:classes] = class_names(
+        "hidden-text-expander",
+        @system_arguments[:classes],
+        "inline" => inline
+      )
+
+      @button_arguments = button_arguments
+      @button_arguments[:tag] = :button
+      @button_arguments[:type] = :button
+      @button_arguments[:"aria-expanded"] = false
+      @button_arguments[:classes] = class_names(
+        "ellipsis-expander",
+        button_arguments[:classes]
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) do
+        render(Primer::BaseComponent.new(**@button_arguments)) { "&hellip;" }
+      end
+    end
+  end
+end

data/app/components/primer/layout_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use Layout to build a main/sidebar layout.
   class LayoutComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # The main content
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>