primer_view_components 0.0.116 → 0.0.117

data/previews/primer/alpha/action_list_preview.rb

@@ -19,15 +19,15 @@ module Primer
                  scheme: scheme,
                  show_dividers: show_dividers,
                  aria: { label: "Action List" }
-               )) do |c|
-          c.with_heading(title: "Action List")
-          c.with_item(label: "Item one", href: "/") do |item|
+               )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Item one", href: "/") do |item|
             item.with_leading_visual_icon(icon: :gear)
           end
-          c.with_item(label: "Item two", href: "/") do |item|
+          component.with_item(label: "Item two", href: "/") do |item|
             item.with_leading_visual_icon(icon: :star)
           end
-          c.with_item(label: "Item three", href: "/") do |item|
+          component.with_item(label: "Item three", href: "/") do |item|
             item.with_leading_visual_icon(icon: :heart)
           end
         end
@@ -48,15 +48,15 @@ module Primer
                  scheme: scheme,
                  show_dividers: show_dividers,
                  aria: { label: "Action List" }
-               )) do |c|
-          c.with_heading(title: "Action List")
-          c.with_item(label: "Item one", href: "/") do |item|
+               )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Item one", href: "/") do |item|
             item.with_leading_visual_icon(icon: :gear)
           end
-          c.with_item(label: "Item two", href: "/") do |item|
+          component.with_item(label: "Item two", href: "/") do |item|
             item.with_leading_visual_icon(icon: :star)
           end
-          c.with_item(label: "Item three", href: "/") do |item|
+          component.with_item(label: "Item three", href: "/") do |item|
             item.with_leading_visual_icon(icon: :heart)
           end
         end
@@ -77,14 +77,14 @@ module Primer
                  scheme: scheme,
                  show_dividers: show_dividers,
                  aria: { label: "Action List" }
-               )) do |c|
-          c.with_heading(title: "Action List")
-          c.with_item(label: "Leading SVG visual", href: "/") do |item|
+               )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Leading SVG visual", href: "/") do |item|
             item.with_leading_visual_svg do
               '<path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>'.html_safe
             end
           end
-          c.with_item(label: "Custom content", href: "/") do |item|
+          component.with_item(label: "Custom content", href: "/") do |item|
             item.with_leading_visual_content do
               '<span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span>'.html_safe
             end
@@ -217,8 +217,8 @@ module Primer
       def item_default
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/")
+               )) do |component|
+          component.with_item(label: "Default item", href: "/")
         end
       end
 
@@ -226,8 +226,8 @@ module Primer
       def item_size_large
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/", size: :large)
+               )) do |component|
+          component.with_item(label: "Default item", href: "/", size: :large)
         end
       end
 
@@ -235,8 +235,8 @@ module Primer
       def item_size_xlarge
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/", size: :xlarge)
+               )) do |component|
+          component.with_item(label: "Default item", href: "/", size: :xlarge)
         end
       end
 
@@ -244,8 +244,8 @@ module Primer
       def item_leading_visual
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Item with leading visual", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Item with leading visual", href: "/") do |item|
             item.with_leading_visual_icon(icon: :star)
           end
         end
@@ -255,8 +255,8 @@ module Primer
       def item_trailing_visual
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Item with trailing visual", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Item with trailing visual", href: "/") do |item|
             item.with_trailing_visual_icon(icon: :star)
           end
         end
@@ -266,8 +266,8 @@ module Primer
       def item_leading_trailing_visual
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Item with trailing visual", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Item with trailing visual", href: "/") do |item|
             item.with_leading_visual_icon(icon: :heart)
             item.with_trailing_visual_icon(icon: :star)
           end
@@ -278,8 +278,8 @@ module Primer
       def item_with_description
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Default item", href: "/") do |item|
             item.with_description.with_content("This is a description")
           end
         end
@@ -289,8 +289,8 @@ module Primer
       def item_with_description_inline
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/", description_scheme: :inline) do |item|
+               )) do |component|
+          component.with_item(label: "Default item", href: "/", description_scheme: :inline) do |item|
             item.with_description.with_content("This is a description")
           end
         end
@@ -300,8 +300,8 @@ module Primer
       def item_trailing_action
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Default item", href: "/") do |item|
             item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Button tooltip", size: :medium)
           end
         end
@@ -311,8 +311,8 @@ module Primer
       def item_trailing_action_hover
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Default item", href: "/") do |item|
             item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Button tooltip", size: :medium)
           end
         end
@@ -322,8 +322,8 @@ module Primer
       def item_danger
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Danger item", href: "/", scheme: :danger)
+               )) do |component|
+          component.with_item(label: "Danger item", href: "/", scheme: :danger)
         end
       end
 
@@ -331,8 +331,8 @@ module Primer
       def item_disabled
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Disabled item", href: "/", disabled: true)
+               )) do |component|
+          component.with_item(label: "Disabled item", href: "/", disabled: true)
         end
       end
 
@@ -340,8 +340,8 @@ module Primer
       def item_wrap_label
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "This is a very long string of text that will wrap if it runs out of horizontal space", href: "/")
+               )) do |component|
+          component.with_item(label: "This is a very long string of text that will wrap if it runs out of horizontal space", href: "/")
         end
       end
 
@@ -349,8 +349,8 @@ module Primer
       def item_truncate_label
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "This is a very long string of text that will truncate if it runs out of horizontal space", href: "/", truncate_label: true)
+               )) do |component|
+          component.with_item(label: "This is a very long string of text that will truncate if it runs out of horizontal space", href: "/", truncate_label: true)
         end
       end
 
@@ -358,8 +358,8 @@ module Primer
       def item_active
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Active item", href: "/", active: true)
+               )) do |component|
+          component.with_item(label: "Active item", href: "/", active: true)
         end
       end
     end

data/previews/primer/alpha/dropdown_preview.rb

@@ -9,15 +9,15 @@ module Primer
       # @param with_caret [Boolean] toggle
       # @param overlay [Symbol] select [none, default, dark]
       def playground(overlay: :default, with_caret: false)
-        render(Primer::Alpha::Dropdown.new(overlay: overlay, with_caret: with_caret)) do |c|
-          c.with_button { "Dropdown" }
-
-          c.with_menu(header: "Header") do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item(divider: true)
-            m.with_item { "Item 3" }
-            m.with_item { "Item 4" }
+        render(Primer::Alpha::Dropdown.new(overlay: overlay, with_caret: with_caret)) do |component|
+          component.with_button { "Dropdown" }
+
+          component.with_menu(header: "Header") do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item(divider: true)
+            menu.with_item { "Item 3" }
+            menu.with_item { "Item 4" }
           end
         end
       end
@@ -25,12 +25,12 @@ module Primer
       # @label Default
       #
       def default
-        render(Primer::Alpha::Dropdown.new) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
@@ -41,12 +41,12 @@ module Primer
       # @param direction [Symbol] select [se, sw, w, e, ne, s]
       # @param scheme [Symbol] select [default, dark]
       def menu(as: :default, direction: :se, scheme: :default)
-        render(Primer::Alpha::Dropdown::Menu.new(as: as, direction: direction, scheme: scheme, header: "Header")) do |m|
-          m.with_item { "Item 1" }
-          m.with_item { "Item 2" }
-          m.with_item(divider: true)
-          m.with_item { "Item 3" }
-          m.with_item { "Item 4" }
+        render(Primer::Alpha::Dropdown::Menu.new(as: as, direction: direction, scheme: scheme, header: "Header")) do |menu|
+          menu.with_item { "Item 1" }
+          menu.with_item { "Item 2" }
+          menu.with_item(divider: true)
+          menu.with_item { "Item 3" }
+          menu.with_item { "Item 4" }
         end
       end
 
@@ -54,72 +54,72 @@ module Primer
       #
       # @label Direction e
       def direction_e
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :e) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :e) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Direction ne
       def direction_ne
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :ne) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :ne) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Direction s
       def direction_s
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :s) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :s) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Direction se
       def direction_se
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :se) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :se) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Direction sw
       def direction_sw
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :sw) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :sw) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Direction w
       def direction_w
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :w) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :w) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
@@ -130,76 +130,76 @@ module Primer
       #
       # @label With caret
       def options_with_caret
-        render(Primer::Alpha::Dropdown.new(with_caret: true)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(with_caret: true)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label With header
       def options_with_header
-        render(Primer::Alpha::Dropdown.new) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(header: "Header") do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(header: "Header") do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label With dividers
       def options_with_dividers
-        render(Primer::Alpha::Dropdown.new) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item(divider: true)
-            m.with_item { "Item 3" }
-            m.with_item { "Item 4" }
-            m.with_item(divider: true)
-            m.with_item { "Item 5" }
+        render(Primer::Alpha::Dropdown.new) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item(divider: true)
+            menu.with_item { "Item 3" }
+            menu.with_item { "Item 4" }
+            menu.with_item(divider: true)
+            menu.with_item { "Item 5" }
           end
         end
       end
 
       # @label As list
       def options_as_list
-        render(Primer::Alpha::Dropdown.new) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(as: :list) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(as: :list) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Overlay none
       def options_overlay_none
-        render(Primer::Alpha::Dropdown.new(overlay: :none)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(overlay: :none)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Overlay dark
       def options_overlay_dark
-        render(Primer::Alpha::Dropdown.new(overlay: :dark)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(overlay: :dark)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end

data/previews/primer/alpha/hellip_button_preview.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label HellipButton
+    class HellipButtonPreview < ViewComponent::Preview
+      # @label Default Options
+      #
+      # @param aria_label [String]
+      # @param inline [Boolean]
+      def default(inline: false, aria_label: "No effect")
+        render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label))
+      end
+
+      # @label Playground
+      #
+      # @param aria_label [String]
+      # @param inline [Boolean]
+      def playground(inline: false, aria_label: "No effect")
+        render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label))
+      end
+    end
+  end
+end