primer_view_components 0.0.116 → 0.0.117

data/previews/primer/beta/border_box_preview.rb

@@ -10,47 +10,47 @@ module Primer
       # @param scheme [Symbol] select [default, neutral, info, warning]
       def playground(padding: :default, scheme: :default)
         render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
-          component.header { "Header" }
-          component.body { "Body" }
-          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row one" }
-          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row two" }
-          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row three" }
-          component.footer { "Footer" }
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row(scheme: scheme) { "#{scheme.to_s.capitalize} row one" }
+          component.with_row(scheme: scheme) { "#{scheme.to_s.capitalize} row two" }
+          component.with_row(scheme: scheme) { "#{scheme.to_s.capitalize} row three" }
+          component.with_footer { "Footer" }
         end
       end
 
       # @label Default
       def default
         render(Primer::Beta::BorderBox.new) do |component|
-          component.header { "Header" }
-          component.body { "Body" }
-          component.row { "Row one" }
-          component.row { "Row two" }
-          component.row { "Row three" }
-          component.footer { "Footer" }
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
         end
       end
 
       # @label Header with title
       def header_with_title
         render(Primer::Beta::BorderBox.new) do |component|
-          component.with_header do |h|
-            h.title(tag: :h2) do
+          component.with_header do |header|
+            header.with_title(tag: :h2) do
               "Header with title"
             end
           end
-          component.body { "Body" }
-          component.footer { "Footer" }
+          component.with_body { "Body" }
+          component.with_footer { "Footer" }
         end
       end
 
       # @label Row colors
       def row_colors
         render(Primer::Beta::BorderBox.new) do |component|
-          component.row(scheme: :default) { "Default" }
-          component.row(scheme: :neutral) { "Neutral" }
-          component.row(scheme: :info) { "Info" }
-          component.row(scheme: :warning) { "Warning" }
+          component.with_row(scheme: :default) { "Default" }
+          component.with_row(scheme: :neutral) { "Neutral" }
+          component.with_row(scheme: :info) { "Info" }
+          component.with_row(scheme: :warning) { "Warning" }
         end
       end
 
@@ -59,36 +59,36 @@ module Primer
       # @label Default
       def padding_default
         render(Primer::Beta::BorderBox.new) do |component|
-          component.header { "Header" }
-          component.body { "Body" }
-          component.row { "Row one" }
-          component.row { "Row two" }
-          component.row { "Row three" }
-          component.footer { "Footer" }
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
         end
       end
 
       # @label Condensed
       def padding_condensed
         render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component|
-          component.header { "Header" }
-          component.body { "Body" }
-          component.row { "Row one" }
-          component.row { "Row two" }
-          component.row { "Row three" }
-          component.footer { "Footer" }
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
         end
       end
 
       # @label Spacious
       def padding_spacious
         render(Primer::Beta::BorderBox.new(padding: :spacious)) do |component|
-          component.header { "Header" }
-          component.body { "Body" }
-          component.row { "Row one" }
-          component.row { "Row two" }
-          component.row { "Row three" }
-          component.footer { "Footer" }
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
         end
       end
       #

data/previews/primer/beta/breadcrumbs_preview.rb

@@ -10,7 +10,7 @@ module Primer
       def playground(number_of_links: 2)
         render(Primer::Beta::Breadcrumbs.new) do |component|
           Array.new(number_of_links || 3) do |i|
-            component.item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
+            component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
           end
         end
       end
@@ -21,7 +21,7 @@ module Primer
       def default(number_of_links: 2)
         render(Primer::Beta::Breadcrumbs.new) do |component|
           Array.new(number_of_links || 3) do |i|
-            component.item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
+            component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
           end
         end
       end

data/previews/primer/beta/button_group_preview.rb

@@ -8,11 +8,11 @@ module Primer
       #
       # @param size [Symbol] select [medium, small]
       def playground(size: :medium)
-        render(Primer::Beta::ButtonGroup.new(size: size)) do |c|
-          c.button { "Button" }
-          c.button(scheme: :primary) { "Primary" }
-          c.button(scheme: :danger) { "Danger" }
-          c.button(scheme: :outline) { "Outline" }
+        render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
+          component.with_button { "Button" }
+          component.with_button(scheme: :primary) { "Primary" }
+          component.with_button(scheme: :danger) { "Danger" }
+          component.with_button(scheme: :outline) { "Outline" }
         end
       end
 
@@ -20,11 +20,11 @@ module Primer
       #
       # @param size [Symbol] select [medium, small]
       def default(size: :medium)
-        render(Primer::Beta::ButtonGroup.new(size: size)) do |c|
-          c.button { "Button" }
-          c.button(scheme: :primary) { "Primary" }
-          c.button(scheme: :danger) { "Danger" }
-          c.button(scheme: :outline) { "Outline" }
+        render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
+          component.with_button { "Button" }
+          component.with_button(scheme: :primary) { "Primary" }
+          component.with_button(scheme: :danger) { "Danger" }
+          component.with_button(scheme: :outline) { "Outline" }
         end
       end
     end

data/previews/primer/beta/button_preview/all_schemes.html.erb

@@ -2,25 +2,25 @@
   <%= render(Primer::Beta::Button.new(
       scheme: :secondary,
       size: :medium,
-  )) do |c| %>
+  )) do %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :primary,
       size: :medium,
-  )) do |c| %>
+  )) do %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :invisible,
       size: :medium,
-  )) do |c| %>
+  )) do %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :danger,
       size: :medium,
-  )) do |c| %>
+  )) do %>
     Button
   <% end %>
 </div>

data/previews/primer/beta/button_preview/invisible_all_visuals.html.erb

@@ -2,53 +2,53 @@
   <%= render(Primer::Beta::Button.new(
       scheme: :invisible,
       size: :medium,
-  )) do |c| %>
+  )) do %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :invisible,
       size: :medium,
-  )) do |c| %>
-    <% c.leading_visual_icon(icon: :search) %>
+  )) do |component| %>
+    <% component.with_leading_visual_icon(icon: :search) %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :invisible,
       size: :medium,
-  )) do |c| %>
-    <% c.trailing_action_icon(icon: "triangle-down") %>
+  )) do |component| %>
+    <% component.with_trailing_action_icon(icon: "triangle-down") %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :invisible,
       size: :medium,
-  )) do |c| %>
-    <% c.trailing_visual_counter(count: "15") %>
+  )) do |component| %>
+    <% component.with_trailing_visual_counter(count: "15") %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :invisible,
       size: :medium,
-  )) do |c| %>
-    <% c.leading_visual_icon(icon: :eye) %>
-    <% c.trailing_visual_counter(count: "15") %>
+  )) do |component| %>
+    <% component.with_leading_visual_icon(icon: :eye) %>
+    <% component.with_trailing_visual_counter(count: "15") %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :invisible,
       size: :medium,
-  )) do |c| %>
-    <% c.leading_visual_icon(icon: :eye) %>
-    <% c.trailing_visual_counter(count: "15") %>
-    <% c.trailing_action_icon(icon: "triangle-down") %>
+  )) do |component| %>
+    <% component.with_leading_visual_icon(icon: :eye) %>
+    <% component.with_trailing_visual_counter(count: "15") %>
+    <% component.with_trailing_action_icon(icon: "triangle-down") %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :invisible,
       size: :medium,
       id: "my-id"
-  )) do |c| %>
-    <% c.with_tooltip(text: "Tooltip text") %>
+  )) do |component| %>
+    <% component.with_tooltip(text: "Tooltip text") %>
     Button with tooltip
   <% end %>
 </div>

data/previews/primer/beta/button_preview/leading_visual.html.erb

@@ -4,7 +4,7 @@
     block: block,
     id: id,
     align_content: align_content
-)) do |c| %>
-  <% c.leading_visual_icon(icon: :search) %>
+)) do |component| %>
+  <% component.with_leading_visual_icon(icon: :search) %>
   Button
 <% end %>

data/previews/primer/beta/button_preview/trailing_action.html.erb

@@ -4,7 +4,7 @@
     block: block,
     id: id,
     align_content: align_content
-)) do |c| %>
-  <% c.trailing_action_icon(icon: "triangle-down") %>
+)) do |component| %>
+  <% component.with_trailing_action_icon(icon: "triangle-down") %>
   Button
 <% end %>

data/previews/primer/beta/button_preview/trailing_visual.html.erb

@@ -5,7 +5,7 @@
     id: id,
     align_content: align_content,
     tag: tag
-)) do |c| %>
-  <% c.trailing_visual_counter(count: "15") %>
+)) do |component| %>
+  <% component.with_trailing_visual_counter(count: "15") %>
   Button
 <% end %>

data/previews/primer/beta/button_preview/with_tooltip.html.erb

@@ -4,7 +4,7 @@
     block: block,
     id: id,
     align_content: align_content
-)) do |c| %>
-  <% c.with_tooltip(text: "Tooltip text") %>
+)) do |component| %>
+  <% component.with_tooltip(text: "Tooltip text") %>
   Button
 <% end %>

data/previews/primer/beta/details_preview.rb

@@ -9,11 +9,11 @@ module Primer
       # @param overlay [Symbol] select [none, default, dark]
       # @param reset [Boolean] toggle
       def playground(reset: false, overlay: :default)
-        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |c|
-          c.with_summary do
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |component|
+          component.with_summary do
             "Summary"
           end
-          c.with_body do
+          component.with_body do
             "Body"
           end
         end
@@ -24,11 +24,11 @@ module Primer
       # @param overlay [Symbol] select [none, default, dark]
       # @param reset [Boolean] toggle
       def default(reset: false, overlay: :default)
-        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |c|
-          c.with_summary do
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |component|
+          component.with_summary do
             "Summary"
           end
-          c.with_body do
+          component.with_body do
             "Body"
           end
         end

data/previews/primer/beta/state_preview.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label State
+    class StatePreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param title [String]
+      # @param tag [Symbol] select [span, div]
+      # @param size [Symbol] select [default, small]
+      # @param scheme [Symbol] select [default, open, closed, merged]
+      def playground(title: "State", scheme: :default, size: :default, tag: :span)
+        render(Primer::Beta::State.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
+      end
+
+      # @label Default
+      #
+      # @param title [String]
+      # @param tag [Symbol] select [span, div]
+      # @param size [Symbol] select [default, small]
+      # @param scheme [Symbol] select [default, open, closed, merged]
+      def default(title: "State", scheme: :default, size: :default, tag: :span)
+        render(Primer::Beta::State.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
+      end
+
+      # @!group States
+      #
+      # @label Default
+      def states_default
+        render(Primer::Beta::State.new(title: "Default")) { "Default state" }
+      end
+
+      # @label Open
+      def states_open
+        render(Primer::Beta::State.new(title: "Open", scheme: :open)) { "Open state" }
+      end
+
+      # @label Closed
+      def states_closed
+        render(Primer::Beta::State.new(title: "Closed", scheme: :closed)) { "Closed state" }
+      end
+
+      # @label Merged
+      def states_merged
+        render(Primer::Beta::State.new(title: "Merged", scheme: :merged)) { "Merged state" }
+      end
+      #
+      # @!endgroup
+
+      # @!group Sizes
+      #
+      # @label Default
+      def sizes_default
+        render(Primer::Beta::State.new(title: "Default")) { "Default size" }
+      end
+
+      # @label Small
+      def sizes_small
+        render(Primer::Beta::State.new(title: "Default", size: :small)) { "Small size" }
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/subhead_preview/actions.html.erb

@@ -0,0 +1,14 @@
+<%= render(Primer::Beta::Subhead.new) do |component| %>
+  <% component.with_heading do %>
+    A Heading
+  <% end %>
+  <% component.with_description do %>
+    A description with actions
+  <% end %>
+  <% component.with_actions do %>
+    <% render(Primer::Beta::Button.new(scheme: :primary)) do %>
+      An action
+    <% end %>
+  <% end %>
+<% end %>
+

data/previews/primer/beta/subhead_preview.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Subhead
+    class SubheadPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param spacious [Boolean]
+      # @param hide_border [Boolean]
+      # @param heading_danger [Boolean]
+      # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
+      def playground(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
+        render(Primer::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
+          component.with_heading(tag: heading_tag, danger: heading_danger) do
+            "My Heading"
+          end
+          component.with_description do
+            "My Description"
+          end
+        end
+      end
+
+      # @label Default Options
+      #
+      # @param spacious [Boolean]
+      # @param hide_border [Boolean]
+      # @param heading_danger [Boolean]
+      # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
+      def default(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
+        render(Primer::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
+          component.with_heading(tag: heading_tag, danger: heading_danger) do
+            "My Heading"
+          end
+          component.with_description do
+            "My Description"
+          end
+        end
+      end
+
+      # @label Danger
+      def danger
+        render(Primer::Beta::Subhead.new) do |component|
+          component.with_heading(danger: true) do
+            "Danger Heading"
+          end
+          component.with_description do
+            "A description of the 'danger'"
+          end
+        end
+      end
+
+      # @label Actions
+      def actions
+        render_with_template(locals: {})
+      end
+
+      # @!group Spacing
+      #
+      # @label Default
+      def spacing_default
+        render(Primer::Beta::Subhead.new(spacious: false)) do |component|
+          component.with_heading do
+            "Default Spacing"
+          end
+          component.with_description do
+            "Default spacing above the component"
+          end
+        end
+      end
+
+      # @label Spacious
+      def spacing_spacious
+        render(Primer::Beta::Subhead.new(spacious: true)) do |component|
+          component.with_heading do
+            "Spacious"
+          end
+          component.with_description do
+            "With extra space above the component"
+          end
+        end
+      end
+
+      # @label Spacious w/ Danger Heading
+      def spacing_dangerous
+        render(Primer::Beta::Subhead.new(spacious: true)) do |component|
+          component.with_heading(danger: true) do
+            "Danger Heading"
+          end
+          component.with_description do
+            "With extra space above the component, and a 'danger' heading"
+          end
+        end
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/timeline_item_preview.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label TimelineItem
+    class TimelineItemPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param condensed [Boolean]
+      def playground(condensed: false)
+        render(Primer::Beta::TimelineItem.new(condensed: condensed)) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
+          component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
+          component.with_body { "Success!" }
+        end
+      end
+
+      # @label Default
+      #
+      # @param condensed [Boolean]
+      def default(condensed: false)
+        render(Primer::Beta::TimelineItem.new(condensed: condensed)) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
+          component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
+          component.with_body { "Success!" }
+        end
+      end
+    end
+  end
+end

data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb

@@ -0,0 +1 @@
+<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", src: toggle_switch_index_path)) %>

data/previews/primer/forms/forms_preview.rb

@@ -39,6 +39,8 @@ module Primer
       def name_with_question_mark_form; end
 
       def immediate_validation_form; end
+
+      def example_toggle_switch_form; end
     end
   end
 end