primer_view_components 0.0.21 → 0.0.22

data/app/components/primer/counter_component.rb

@@ -11,7 +11,7 @@ module Primer
     }.freeze
 
     #
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::CounterComponent.new(count: 25)) %>
     #
     # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)

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

@@ -1,8 +1,4 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= render summary.component do %>
-    <%= summary.content %>
-  <% end %>
-  <%= render body.component do %>
-    <%= body.content %>
-  <% end %>
+  <%= summary %>
+  <%= body %>
 <% end %>

data/app/components/primer/details_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use DetailsComponent to reveal content after clicking a button.
   class DetailsComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
     NO_OVERLAY = :none
     OVERLAY_MAPPINGS = {
@@ -12,8 +12,27 @@ module Primer
       :dark => "details-overlay details-overlay-dark"
     }.freeze
 
-    with_slot :body, class_name: "Body"
-    with_slot :summary, class_name: "Summary"
+    # Use the Summary slot as a trigger to reveal the content.
+    #
+    # @param button [Boolean] Whether to render the Summary as a button or not.
+    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+    renders_one :summary, lambda { |button = true, **system_arguments|
+      system_arguments = system_arguments
+      system_arguments[:tag] = :summary
+      system_arguments[:role] = "button"
+
+      Primer::BaseComponent.new(**system_arguments) unless button
+
+      Primer::ButtonComponent.new(**system_arguments)
+    }
+
+    # Use the Body slot as the main content to be shown when triggered by the Summary.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+    renders_one :body, lambda { |**system_arguments|
+      system_arguments[:tag] ||= :div
+      Primer::BaseComponent.new(**system_arguments)
+    }
 
     # @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
@@ -31,37 +50,5 @@ module Primer
     def render?
       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
-
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :summary
-        @system_arguments[:role] = "button"
-      end
-
-      def component
-        return Primer::BaseComponent.new(**@system_arguments) unless @button
-
-        Primer::ButtonComponent.new(**@system_arguments)
-      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
-      end
-
-      def component
-        Primer::BaseComponent.new(**@system_arguments)
-      end
-    end
   end
 end

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

@@ -1,9 +1,9 @@
 <%= render(Primer::DetailsComponent.new(**@system_arguments)) do |c| %>
-  <% c.slot(:summary, classes: @summary_classes) do %>
+  <% c.summary(classes: @summary_classes) do %>
     <%= button %>
   <% end %>
 
-  <% c.slot(:body) do %>
+  <% c.body do %>
     <%= menu %>
   <% end %>
 <% end %>

data/app/components/primer/dropdown_component.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require_relative "dropdown/menu_component"
-
 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.
@@ -20,8 +18,8 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :menu, Primer::Dropdown::MenuComponent
 
-    # @example 210|Default
-    #   <div style="margin-bottom: 150px">
+    # @example Default
+    #   <div>
     #     <%= render(Primer::DropdownComponent.new) do |c| %>
     #       <% c.button do %>
     #         Dropdown
@@ -37,8 +35,8 @@ module Primer
     #     <% end %>
     #   </div>
     #
-    # @example 210|With Direction
-    #   <div style="margin-bottom: 150px" class="d-flex flex-justify-center">
+    # @example With Direction
+    #   <div>
     #     <%= render(Primer::DropdownComponent.new) do |c| %>
     #       <% c.button do %>
     #         Dropdown

data/app/components/primer/dropdown_menu_component.rb

@@ -18,14 +18,14 @@ module Primer
       STATUSES[:deprecated]
     end
 
-    # @example 200|With a header
-    #   <div style="margin-bottom: 150px">
+    # @example With a header
+    #   <div>
     #     <%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>
-    #       <% c.slot(:summary) do %>
+    #       <% c.summary do %>
     #         Dropdown
     #       <% end %>
     #
-    #       <% c.slot(:body) do %>
+    #       <% c.body do %>
     #         <%= render(Primer::DropdownMenuComponent.new(header: "Options")) do %>
     #           <ul>
     #             <li><a class="dropdown-item" href="#url">Dropdown item</a></li>

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

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

data/app/components/primer/flash_component.rb

@@ -22,22 +22,22 @@ module Primer
       :danger => "flash-error",
       :success => "flash-success"
     }.freeze
-    # @example auto|Variants
+    # @example Variants
     #   <%= 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!" } %>
     #
-    # @example auto|Full width
+    # @example Full width
     #   <%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
     #
-    # @example auto|Dismissible
+    # @example Dismissible
     #   <%= render(Primer::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>
     #
-    # @example auto|Icon
+    # @example Icon
     #   <%= render(Primer::FlashComponent.new(icon: "people")) { "This is a flash message with an icon!" } %>
     #
-    # @example auto|With actions
+    # @example With actions
     #   <%= render(Primer::FlashComponent.new) do |component| %>
     #     This is a flash message with actions!
     #     <% component.action do %>

data/app/components/primer/flex_component.rb

@@ -35,28 +35,28 @@ module Primer
     DEFAULT_DIRECTION = nil
     ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse].freeze
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::FlexComponent.new(bg: :gray)) do %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
-    # @example auto|Justify center
+    # @example Justify center
     #   <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :gray)) do %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
-    # @example auto|Align end
+    # @example Align end
     #   <%= render(Primer::FlexComponent.new(align_items: :end, bg: :gray)) do %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
-    # @example auto|Direction column
+    # @example Direction column
     #   <%= render(Primer::FlexComponent.new(direction: :column, bg: :gray)) do %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
     #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>

data/app/components/primer/flex_item_component.rb

@@ -7,7 +7,7 @@ module Primer
     FLEX_AUTO_DEFAULT = false
     FLEX_AUTO_ALLOWED_VALUES = [FLEX_AUTO_DEFAULT, true].freeze
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::FlexComponent.new) do %>
     #     <%= render(Primer::FlexItemComponent.new) do %>
     #       Item 1

data/app/components/primer/heading_component.rb

@@ -3,7 +3,9 @@
 module Primer
   # Use the Heading component to wrap a component that will create a heading element
   class HeadingComponent < Primer::Component
-    # @example auto|Default
+    view_helper :heading
+
+    # @example Default
     #   <%= render(Primer::HeadingComponent.new) { "H1 Text" } %>
     #   <%= render(Primer::HeadingComponent.new(tag: :h2)) { "H2 Text" } %>
     #   <%= render(Primer::HeadingComponent.new(tag: :h3)) { "H3 Text" } %>

data/app/components/primer/label_component.rb

@@ -35,7 +35,7 @@ module Primer
     }.freeze
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys << nil
 
-    # @example auto|Schemes
+    # @example Schemes
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "default" } %>
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :gray)) { "gray" } %>
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :dark_gray)) { "dark_gray" } %>
@@ -43,7 +43,7 @@ module Primer
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :green)) { "green" } %>
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :purple)) { "purple" } %>
     #
-    # @example auto|Variants
+    # @example Variants
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label", variant: :large)) { "Large" } %>
     #

data/app/components/primer/layout_component.rb

@@ -12,13 +12,13 @@ module Primer
     DEFAULT_SIDEBAR_COL = 3
     ALLOWED_SIDEBAR_COLS = (1..(MAX_COL - 1)).to_a.freeze
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::LayoutComponent.new) do |component| %>
     #     <% component.with(:sidebar) { "Sidebar" } %>
     #     <% component.with(:main) { "Main" } %>
     #   <% end %>
     #
-    # @example auto|Left sidebar
+    # @example Left sidebar
     #   <%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
     #     <% component.with(:sidebar) { "Sidebar" } %>
     #     <% component.with(:main) { "Main" } %>

data/app/components/primer/link_component.rb

@@ -3,10 +3,10 @@
 module Primer
   # Use links for moving from one page to another. The Link component styles anchor tags with default blue styling and hover text-decoration.
   class LinkComponent < Primer::Component
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com")) { "Link" } %>
     #
-    # @example auto|Muted
+    # @example Muted
     #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com", muted: true)) { "Link" } %>
     #
     # @param href [String] URL to be used for the Link

data/app/components/primer/markdown_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use MarkdownComponent to wrap markdown content
   class MarkdownComponent < Primer::Component
-    # @example 5320|Default
+    # @example Default
     #   <%= render(Primer::MarkdownComponent.new) do %>
     #     <p>Text can be <b>bold</b>, <i>italic</i>, or <s>strikethrough</s>. <a href="https://github.com">Links </a> should be blue with no underlines (unless hovered over).</p>
     #
@@ -95,17 +95,17 @@ module Primer
     #     <p>And an unordered task list:</p>
     #
     #     <ul>
-    #       <li><input type="checkbox" checked> Create a sample markdown document</li>
-    #       <li><input type="checkbox"> Add task lists to it</li>
-    #       <li><input type="checkbox"> Take a vacation</li>
+    #       <li><input type="checkbox" checked /> Create a sample markdown document</li>
+    #       <li><input type="checkbox"/> Add task lists to it</li>
+    #       <li><input type="checkbox"/> Take a vacation</li>
     #     </ul>
     #
     #     <p>And a "mixed" task list:</p>
     #
     #     <ul>
-    #       <li><input type="checkbox"> Steal underpants</li>
+    #       <li><input type="checkbox"/> Steal underpants</li>
     #       <li>?</li>
-    #       <li><input type="checkbox"> Profit!</li>
+    #       <li><input type="checkbox"/> Profit!</li>
     #     </ul>
     #
     #     And a nested list:
@@ -266,11 +266,11 @@ module Primer
     #
     #     <p>Small images should be shown at their actual size.</p>
     #
-    #     <p><img src="http://placekitten.com/g/300/200/"></p>
+    #     <p><img src="http://placekitten.com/g/300/200/"/></p>
     #
     #     <p>Large images should always scale down and fit in the content container.</p>
     #
-    #     <p><img src="http://placekitten.com/g/1200/800/"></p>
+    #     <p><img src="http://placekitten.com/g/1200/800/"/></p>
     #
     #     <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
     #   <% end %>

data/app/components/primer/menu_component.rb

@@ -35,7 +35,7 @@ module Primer
       Primer::BaseComponent.new(**system_arguments)
     }
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::MenuComponent.new) do |c| %>
     #     <% c.heading do %>
     #       Heading

data/app/components/primer/octicon_component.rb

@@ -3,6 +3,8 @@
 module Primer
   # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_system_arguments_docs %>.
   class OcticonComponent < Primer::Component
+    view_helper :octicon
+
     include Primer::ClassNameHelper
     include OcticonsHelper
 
@@ -14,13 +16,13 @@ module Primer
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::OcticonComponent.new(icon: "check")) %>
     #
-    # @example auto|Medium
+    # @example Medium
     #   <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
     #
-    # @example auto|Large
+    # @example Large
     #   <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
     #
     # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.

data/app/components/primer/popover_component.rb

@@ -10,7 +10,7 @@ module Primer
     with_slot :heading, class_name: "Heading"
     with_slot :body, class_name: "Body"
 
-    # @example auto|Default
+    # @example Default
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -20,7 +20,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example auto|Large
+    # @example Large
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -30,7 +30,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example auto|Caret position
+    # @example Caret position
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed

data/app/components/primer/primer.js

@@ -0,0 +1 @@
+import './tab_container_component';

data/app/components/primer/primer.ts

@@ -0,0 +1 @@
+import './tab_container_component'

data/app/components/primer/progress_bar_component.rb

@@ -16,22 +16,22 @@ module Primer
     }.freeze
 
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.slot(:item, percentage: 25) %>
     #   <% end %>
     #
-    # @example auto|Small
+    # @example Small
     #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
     #     <% component.slot(:item, bg: :blue_4, percentage: 50) %>
     #   <% end %>
     #
-    # @example auto|Large
+    # @example Large
     #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
     #     <% component.slot(:item, bg: :red_4, percentage: 75) %>
     #   <% end %>
     #
-    # @example auto|Multiple items
+    # @example Multiple items
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.slot(:item, percentage: 10) %>
     #     <% component.slot(:item, bg: :blue_4, percentage: 20) %>