primer_view_components 0.0.109 → 0.0.111

data/previews/primer/alpha/segmented_control_preview.rb

@@ -23,53 +23,139 @@ module Primer
         end
       end
 
-      # @param full_width [Boolean] toggle
-      # @param size select [small, medium, large]
-      def default(full_width: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, size: size)) do |c|
+      # @label Default
+      def default
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c|
           c.with_item(label: "Preview", selected: true)
           c.with_item(label: "Raw")
           c.with_item(label: "Blame")
         end
       end
 
-      # @param hide_labels [Boolean] toggle
-      # @param size select [small, medium, large]
-      def full_width(hide_labels: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, hide_labels: hide_labels, size: size)) do |c|
-          c.with_item(label: "Preview", icon: (hide_labels ? :zap : nil), selected: true)
-          c.with_item(label: "Raw", icon: (hide_labels ? :zap : nil))
-          c.with_item(label: "Blame", icon: (hide_labels ? :zap : nil))
+      # @!group Full width
+      # @label Size small
+      def full_width_small(hide_labels: false, size: :small)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :small)) do |c|
+          c.with_item(label: "Preview", selected: true)
+          c.with_item(label: "Raw")
+          c.with_item(label: "Blame")
         end
       end
 
-      # @param full_width [Boolean] toggle
-      # @param size select [small, medium, large]
-      def icons_and_text(full_width: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, size: size)) do |c|
+      # @label Size medium
+      def full_width_medium(hide_labels: false, size: :medium)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :medium)) do |c|
+          c.with_item(label: "Preview", selected: true)
+          c.with_item(label: "Raw")
+          c.with_item(label: "Blame")
+        end
+      end
+
+      # @label Size large
+      def full_width_large(hide_labels: false, size: :large)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :large)) do |c|
+          c.with_item(label: "Preview", selected: true)
+          c.with_item(label: "Raw")
+          c.with_item(label: "Blame")
+        end
+      end
+      # @!endgroup
+
+      # @!group Icons and text
+      # @label Size small
+      def icons_and_text_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |c|
           c.with_item(label: "Preview", icon: :eye, selected: true)
           c.with_item(label: "Raw", icon: :"file-code")
           c.with_item(label: "Blame", icon: :people)
         end
       end
 
-      # @param full_width [Boolean] toggle
-      # @param size select [small, medium, large]
-      def icons_only(full_width: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, hide_labels: true, size: size)) do |c|
+      # @label Size medium
+      def icons_and_text_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size large
+      def icons_and_text_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+      # @!endgroup
+
+      # @!group Icons only
+      # @label Size small
+      def icon_only_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size medium
+      def icon_only_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size large
+      def icon_only_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size small
+      def icon_only_full_width_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size medium
+      def icon_only_full_width_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :medium)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size large
+      def icon_only_full_width_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |c|
           c.with_item(label: "Preview", icon: :eye, selected: true)
           c.with_item(label: "Raw", icon: :"file-code")
           c.with_item(label: "Blame", icon: :people)
         end
       end
+      # @!endgroup
 
-      def with_links_as_tags
+      # NOTE: this preview uses a group to force it's display below the other groups
+      # @!group With link as tag
+      def with_link_as_tag
         render(Primer::Alpha::SegmentedControl.new) do |c|
           c.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
           c.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
           c.with_item(tag: :a, href: "#", label: "Blame", icon: :people)
         end
       end
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/avatar_preview.rb

@@ -13,14 +13,70 @@ module Primer
         render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
       end
 
-      # @label Default options
+      # @label Default
+      def default
+        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label As link
       #
-      # @param size [Integer] select [16, 20, 24, 32, 40, 48, 80]
-      # @param shape [Symbol] select [circle, square]
       # @param href [String] text
-      def default(size: 24, shape: :circle, href: nil)
-        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
+      def as_link(href: "#")
+        render(Primer::Beta::Avatar.new(href: href, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @!group Sizes
+      #
+      # @label 16px
+      def size_16
+        render(Primer::Beta::Avatar.new(size: 16, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 20px
+      def size_20
+        render(Primer::Beta::Avatar.new(size: 20, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 24px
+      def size_24
+        render(Primer::Beta::Avatar.new(size: 24, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 32px
+      def size_32
+        render(Primer::Beta::Avatar.new(size: 32, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
+
+      # @label 40px
+      def size_40
+        render(Primer::Beta::Avatar.new(size: 40, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 48px
+      def size_48
+        render(Primer::Beta::Avatar.new(size: 48, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 80px
+      def size_80
+        render(Primer::Beta::Avatar.new(size: 80, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+      #
+      # @!endgroup
+
+      # @!group Shape
+      #
+      # @label Circle
+      def shape_circle
+        render(Primer::Beta::Avatar.new(shape: :circle, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label Square
+      def shape_square
+        render(Primer::Beta::Avatar.new(shape: :square, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/avatar_stack_preview.rb

@@ -19,23 +19,64 @@ module Primer
         end
       end
 
-      # @label Default options
+      # @label Default
+      def default
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @!group Multiple avatars
       #
-      # @param number_of_avatars [Integer] number
-      # @param tag select [["div", div], ["span", span]]
-      # @param align select [["Left", left], ["Right", right]]
-      # @param tooltipped toggle
-      # @param tooltip_label text
-      def default(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!")
-        render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |c|
-          Array.new(number_of_avatars || 1) do
-            c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          end
+      # @label 1 avatar
+      def avatar_1
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
-      # @!group More Examples
+      # @label 2 avatars
+      def avatar_2
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
 
+      # @label 3 avatars
+      def avatar_3
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @label 4 avatars
+      def avatar_4
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @label 5 avatars
+      def avatar_5
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group More options
+      #
       # @label Align right
       def align_right
         render(Primer::Beta::AvatarStack.new(align: :right)) do |c|
@@ -53,6 +94,7 @@ module Primer
           c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
+      #
       # @!endgroup
     end
   end

data/previews/primer/beta/blankslate_preview.rb

@@ -17,16 +17,40 @@ module Primer
       end
 
       # @label Default options
+      def default
+        render Primer::Beta::Blankslate.new do |c|
+          c.heading(tag: :h2).with_content("Title")
+          c.description { "Description" }
+        end
+      end
+
+      # @!group Options
       #
-      # @param narrow [Boolean] toggle
-      # @param spacious [Boolean] toggle
-      # @param border [Boolean] toggle
-      def default(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
+      # @label Narrow
+      def option_narrow
+        render Primer::Beta::Blankslate.new(narrow: true) do |c|
+          c.heading(tag: :h2).with_content("Title")
+          c.description { "Description" }
+        end
+      end
+
+      # @label Spacious
+      def option_spacious
+        render Primer::Beta::Blankslate.new(spacious: true) do |c|
+          c.heading(tag: :h2).with_content("Title")
+          c.description { "Description" }
+        end
+      end
+
+      # @label Border
+      def option_border
+        render Primer::Beta::Blankslate.new(border: true) do |c|
           c.heading(tag: :h2).with_content("Title")
           c.description { "Description" }
         end
       end
+      #
+      # @!endgroup
 
       # @param narrow [Boolean] toggle
       # @param spacious [Boolean] toggle

data/previews/primer/beta/counter_preview.rb

@@ -16,20 +16,67 @@ module Primer
       end
 
       # @label Default Options
-      #
-      # @param count number
-      # @param limit number
-      # @param hide_if_zero toggle
-      # @param round toggle
-      # @param scheme [Symbol] select [[Default, default], [Primary, primary], [Secondary, secondary]]]
-      def default(count: 1_000, limit: nil, round: false, hide_if_zero: false, scheme: :default)
-        render(Primer::Beta::Counter.new(count: count, round: round, limit: limit, hide_if_zero: hide_if_zero, scheme: scheme))
+      def default
+        render(Primer::Beta::Counter.new(count: 1_000))
       end
 
       # @label With Text
       def with_text
         render(Primer::Beta::Counter.new(text: "∞"))
       end
+
+      # @!group Color Schemes
+      #
+      # @label Default
+      def color_scheme_default
+        render(Primer::Beta::Counter.new(count: 1_000))
+      end
+
+      # @label Primary
+      def color_scheme_primary
+        render(Primer::Beta::Counter.new(count: 1_000, scheme: :primary))
+      end
+
+      # @label Secondary
+      def color_scheme_secondary
+        render(Primer::Beta::Counter.new(count: 1_000, scheme: :secondary))
+      end
+      #
+      # @!endgroup
+
+      # @!group Rounded Number
+      #
+      # @label Default (No Rounding)
+      def rounding_default
+        render(Primer::Beta::Counter.new(count: 1_234))
+      end
+
+      # @label Rounded Above 1,000
+      def rounding_above_1000
+        render(Primer::Beta::Counter.new(count: 1_234, round: true))
+      end
+
+      # @label Rounded Below 1,000
+      def rounding_below_1000
+        render(Primer::Beta::Counter.new(count: 999, round: true))
+      end
+
+      # @label Rounded Large Numbers w/ Default Limit
+      def rounding_large_number
+        render(Primer::Beta::Counter.new(count: 4_567_890, round: true))
+      end
+
+      # @label Rounded Large Numbers, Less Than Custom Limit
+      def rounding_large_number_less_than_custom_limit
+        render(Primer::Beta::Counter.new(count: 4_567_890, limit: 1_000_000_000, round: true))
+      end
+
+      # @label Rounded Large Numbers, Greater Than Custom Limit
+      def rounding_large_number_greater_than_custom_limit
+        render(Primer::Beta::Counter.new(count: 4_567_890, limit: 1_000_000, round: true))
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/flash_preview.rb

@@ -18,15 +18,52 @@ module Primer
 
       # @label Default
       #
-      # @param full toggle
-      # @param spacious toggle
-      # @param dismissible toggle
-      # @param icon [Symbol] select [alert, check, info, people]
-      # @param scheme [Symbol] select [default, warning, danger, success]
-      # @param content text
-      def default(full: false, spacious: false, dismissible: false, icon: :people, scheme: Primer::Beta::Flash::DEFAULT_SCHEME, content: "This is a flash message!")
-        render(Primer::Beta::Flash.new(full: full, spacious: spacious, dismissible: dismissible, icon: icon, scheme: scheme)) { content }
+      def default
+        render(Primer::Beta::Flash.new) { "This is a flash message!" }
+      end
+
+      # @!group Color Schemes
+      #
+      # @label Default
+      def color_scheme_default
+        render(Primer::Beta::Flash.new) { "This is a flash message!" }
+      end
+
+      # @label Warning
+      def color_scheme_warning
+        render(Primer::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" }
       end
+
+      # @label Danger
+      def color_scheme_danger
+        render(Primer::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" }
+      end
+
+      # @label Success
+      def color_scheme_success
+        render(Primer::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" }
+      end
+      #
+      # @!endgroup
+
+      # @!group More options
+      #
+      # @label Full width
+      def options_full
+        render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" }
+      end
+
+      # @label Dismissible
+      def options_dismissible
+        render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" }
+      end
+
+      # @label With icon
+      def options_with_icon
+        render(Primer::Beta::Flash.new(icon: :info)) { "This is a flash message with an icon!" }
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/label_preview.rb

@@ -4,23 +4,101 @@ module Primer
   module Beta
     # @label Label
     class LabelPreview < ViewComponent::Preview
-      # @label Default Options
+      # @label Playground
       #
       # @param size [Symbol] select [medium, large]
       # @param tag [Symbol] select [span, summary, a, div]
       # @param inline [Boolean] toggle
-      def default(size: :medium, tag: :span, inline: false)
+      def playground(size: :medium, tag: :span, inline: false)
         render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
       end
 
-      # @label Playground
+      # @label Default Options
+      def default
+        render(Primer::Beta::Label.new) { "Label" }
+      end
+
+      # @!group Color Schemes
       #
-      # @param size [Symbol] select [medium, large]
-      # @param tag [Symbol] select [span, summary, a, div]
-      # @param inline [Boolean] toggle
-      def playground(size: :medium, tag: :span, inline: false)
-        render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
+      # @label Default
+      def color_scheme_default
+        render(Primer::Beta::Label.new) { "Default" }
+      end
+
+      # @label Primary
+      def color_scheme_primary
+        render(Primer::Beta::Label.new(scheme: :primary)) { "Primary" }
+      end
+
+      # @label Secondary
+      def color_scheme_secondary
+        render(Primer::Beta::Label.new(scheme: :secondary)) { "Secondary" }
+      end
+
+      # @label Accent
+      def color_scheme_accent
+        render(Primer::Beta::Label.new(scheme: :accent)) { "Accent" }
+      end
+
+      # @label Success
+      def color_scheme_success
+        render(Primer::Beta::Label.new(scheme: :success)) { "Success" }
+      end
+
+      # @label Attention
+      def color_scheme_attention
+        render(Primer::Beta::Label.new(scheme: :attention)) { "Attention" }
       end
+
+      # @label Danger
+      def color_scheme_danger
+        render(Primer::Beta::Label.new(scheme: :danger)) { "Danger" }
+      end
+
+      # @label Severe
+      def color_scheme_severe
+        render(Primer::Beta::Label.new(scheme: :severe)) { "Severe" }
+      end
+
+      # @label Done
+      def color_scheme_done
+        render(Primer::Beta::Label.new(scheme: :done)) { "Done" }
+      end
+
+      # @label Sponsors
+      def color_scheme_sponsors
+        render(Primer::Beta::Label.new(scheme: :sponsors)) { "Sponsors" }
+      end
+      #
+      # @!endgroup
+
+      # @!group Sizes
+      #
+      # @label Default
+      def size_default
+        render(Primer::Beta::Label.new) { "Default" }
+      end
+
+      # @label Large
+      def size_large
+        render(Primer::Beta::Label.new(size: :large)) { "Large" }
+      end
+      #
+      # @!endgroup
+
+      # @!group Inline
+      #
+      # @label Default
+      def inline_default
+        render(Primer::Beta::Label.new) { "Default" }
+      end
+
+      # @label Inline
+      def inline_inline
+        render(Primer::Beta::Label.new(inline: true)) { "Inline" }
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/progress_bar_preview.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label ProgressBar
+    class ProgressBarPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param size [Symbol] select [default, small, large]
+      def playground(size: :default)
+        render(Primer::Beta::ProgressBar.new(size: size)) do |component|
+          component.with_item(percentage: 10)
+          component.with_item(bg: :accent_emphasis, percentage: 20)
+          component.with_item(bg: :danger_emphasis, percentage: 30)
+        end
+      end
+
+      # @label Default
+      #
+      # @param size [Symbol] select [default, small, large]
+      def default(size: :default)
+        render(Primer::Beta::ProgressBar.new(size: size)) do |component|
+          component.with_item(percentage: 10)
+          component.with_item(bg: :accent_emphasis, percentage: 20)
+          component.with_item(bg: :danger_emphasis, percentage: 30)
+        end
+      end
+
+      # @!group Sizes
+      #
+      # @label Size small
+      def size_small
+        render(Primer::Beta::ProgressBar.new(size: :small)) do |component|
+          component.with_item(percentage: 10)
+          component.with_item(bg: :accent_emphasis, percentage: 20)
+          component.with_item(bg: :danger_emphasis, percentage: 30)
+        end
+      end
+
+      # @label Size default
+      def size_default
+        render(Primer::Beta::ProgressBar.new(size: :default)) do |component|
+          component.with_item(percentage: 10)
+          component.with_item(bg: :accent_emphasis, percentage: 20)
+          component.with_item(bg: :danger_emphasis, percentage: 30)
+        end
+      end
+
+      # @label Size large
+      def size_large
+        render(Primer::Beta::ProgressBar.new(size: :large)) do |component|
+          component.with_item(percentage: 10)
+          component.with_item(bg: :accent_emphasis, percentage: 20)
+          component.with_item(bg: :danger_emphasis, percentage: 30)
+        end
+      end
+      # @!endgroup
+    end
+  end
+end