primer_view_components 0.3.1 → 0.5.0

data/previews/primer/alpha/tab_panels_preview.rb

@@ -23,6 +23,7 @@ module Primer
       #
       # @param number_of_panels [Integer] number
       # @param align [Symbol] select [left, right]
+      # @snapshot
       def default(number_of_panels: 3, align: :left)
         render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
           Array.new(number_of_panels || 3) do |i|

data/previews/primer/alpha/text_area_preview.rb

@@ -45,6 +45,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Alpha::TextArea.new(name: "my-text-area", label: "Tell me about yourself"))
       end
@@ -52,31 +53,37 @@ module Primer
       # @!group Options
       #
       # @label With caption
+      # @snapshot
       def with_caption
         render(Primer::Alpha::TextArea.new(caption: "With a caption", name: "my-text-area", label: "Tell me about yourself"))
       end
 
       # @label Visually hidden label
+      # @snapshot
       def visually_hide_label
         render(Primer::Alpha::TextArea.new(visually_hide_label: true, name: "my-text-area", label: "Tell me about yourself"))
       end
 
       # @label Full width
+      # @snapshot
       def full_width
         render(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))
       end
 
       # @label Disabled
+      # @snapshot
       def disabled
         render(Primer::Alpha::TextArea.new(disabled: true, name: "my-text-area", label: "Tell me about yourself"))
       end
 
       # @label Invalid
+      # @snapshot
       def invalid
         render(Primer::Alpha::TextArea.new(invalid: true, name: "my-text-area", label: "Tell me about yourself"))
       end
 
       # @label With validation message
+      # @snapshot
       def with_validation_message
         render(Primer::Alpha::TextArea.new(validation_message: "An error occurred!", name: "my-text-area", label: "Tell me about yourself"))
       end

data/previews/primer/alpha/text_field_preview.rb

@@ -72,6 +72,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Alpha::TextField.new(name: "my-text-field", label: "My text field"))
       end
@@ -79,16 +80,19 @@ module Primer
       # @!group Sizes
       #
       # @label Small
+      # @snapshot
       def size_small
         render(Primer::Alpha::TextField.new(size: :small, visually_hide_label: true, name: "my-text-field", label: "My text field"))
       end
 
       # @label Medium
+      # @snapshot
       def size_medium
         render(Primer::Alpha::TextField.new(size: :medium, visually_hide_label: true, name: "my-text-field", label: "My text field"))
       end
 
       # @label Large
+      # @snapshot
       def size_large
         render(Primer::Alpha::TextField.new(size: :large, visually_hide_label: true, name: "my-text-field", label: "My text field"))
       end
@@ -98,56 +102,67 @@ module Primer
       # @!group Options
       #
       # @label With caption
+      # @snapshot
       def with_caption
         render(Primer::Alpha::TextField.new(caption: "With a caption", name: "my-text-field", label: "My text field"))
       end
 
       # @label Visually hidden label
+      # @snapshot
       def visually_hide_label
         render(Primer::Alpha::TextField.new(visually_hide_label: true, name: "my-text-field", label: "My text field"))
       end
 
       # @label Show clear button
+      # @snapshot
       def show_clear_button
         render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field", label: "My text field"))
       end
 
       # @label Full width
+      # @snapshot
       def full_width
         render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field", label: "My text field"))
       end
 
       # @label Disabled
+      # @snapshot
       def disabled
         render(Primer::Alpha::TextField.new(disabled: true, name: "my-text-field", label: "My text field"))
       end
 
       # @label Invalid
+      # @snapshot
       def invalid
         render(Primer::Alpha::TextField.new(invalid: true, name: "my-text-field", label: "My text field"))
       end
 
       # @label With placeholder
+      # @snapshot
       def with_placeholder
         render(Primer::Alpha::TextField.new(placeholder: "with a placeholder", name: "my-text-field", label: "My text field"))
       end
 
       # @label Inset
+      # @snapshot
       def inset
         render(Primer::Alpha::TextField.new(inset: true, name: "my-text-field", label: "My text field"))
       end
 
       # @label Monospace
+      # @snapshot
       def monospace
         render(Primer::Alpha::TextField.new(monospace: true, name: "my-text-field", label: "My text field"))
       end
 
       # @label With leading visual
+      # @snapshot
       def with_leading_visual
         render(Primer::Alpha::TextField.new(leading_visual: { icon: :search }, name: "my-text-field", label: "My text field"))
       end
 
       # @label With validation message
+      # @snapshot
       def with_validation_message
         render(Primer::Alpha::TextField.new(validation_message: "An error occurred!", name: "my-text-field", label: "My text field"))
       end

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -9,47 +9,54 @@ module Primer
       include ActionView::Helpers::FormTagHelper
 
       def playground
-        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
       end
 
+      # @snapshot
       def default
-        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
       end
 
+      # @snapshot
       def checked
-        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, checked: true))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, checked: true))
       end
 
+      # @snapshot
       def disabled
-        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, enabled: false))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, enabled: false))
       end
 
+      # @snapshot
       def checked_disabled
-        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, checked: true, enabled: false))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, checked: true, enabled: false))
       end
 
+      # @snapshot
       def small
-        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, size: :small))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, size: :small))
       end
 
+      # @snapshot
       def with_status_label_position_end
-        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, status_label_position: :end))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, status_label_position: :end))
       end
 
+      # @snapshot
       def with_a_bad_src
-        render(ToggleSwitch.new(src: "/foo"))
+        render(Primer::Alpha::ToggleSwitch.new(src: "/foo"))
       end
 
       def with_no_src
-        render(ToggleSwitch.new)
+        render(Primer::Alpha::ToggleSwitch.new)
       end
 
       def with_csrf_token
-        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "let_me_in"))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "let_me_in"))
       end
 
       def with_bad_csrf_token
-        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
       end
     end
   end

data/previews/primer/alpha/tooltip_preview/tooltip_inside_primer_overlay.html.erb

@@ -0,0 +1,20 @@
+<%= render(Primer::Alpha::Overlay.new(
+         title: "Menu",
+         role: :dialog,
+)) do |d| %>
+  <% d.with_show_button do |b| %>
+    Open Overlay
+    <% b.with_tooltip(text: "Opens an overlay") %>
+  <% end %>
+  <% d.with_header do  %>
+    An overlay
+  <% end %>
+  <% d.with_body do  %>
+
+    <%= render(Primer::Beta::Button.new(id: "overlay-button")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip in an Overlay") %>
+      A button
+    <% end %>
+
+  <% end %>
+<% end %>

data/previews/primer/alpha/tooltip_preview.rb

@@ -88,6 +88,13 @@ module Primer
         render(Primer::Beta::IconButton.new(icon: :search, "aria-label": tooltip_text, tooltip_direction: direction))
       end
       # @!endgroup
+
+      # @label Tooltip inside Primer::Alpha::Overlay
+      def tooltip_inside_primer_overlay(direction: :s, tooltip_text: "You can press a button")
+        render_with_template(
+          locals: {}
+        )
+      end
     end
   end
 end

data/previews/primer/alpha/underline_nav_preview.rb

@@ -20,6 +20,7 @@ module Primer
       end
 
       # @label Default options
+      # @snapshot
       #
       # @param label [String] text
       # @param tag [Symbol] select [div, nav]
@@ -35,6 +36,7 @@ module Primer
       end
 
       # @label With icons and counters
+      # @snapshot
       #
       # @param label [String] text
       # @param tag [Symbol] select [div, nav]

data/previews/primer/beta/auto_complete_item_preview.rb

@@ -23,6 +23,7 @@ module Primer
       # @param selected toggle
       # @param disabled toggle
       # @param value text
+      # @snapshot
       def default(value: "", selected: false, disabled: false)
         render_with_template(
           locals: {
@@ -38,6 +39,7 @@ module Primer
       # @param selected toggle
       # @param disabled toggle
       # @param value text
+      # @snapshot
       def with_description(description_variant: "block", value: "", selected: false, disabled: false)
         description_variant = description_variant.to_sym
 

data/previews/primer/beta/auto_complete_preview.rb

@@ -79,6 +79,7 @@ module Primer
       end
 
       # @label Leading visual
+      # @snapshot
       # @param label_text text
       # @param show_clear_button toggle
       # @param visually_hide_label toggle
@@ -98,6 +99,7 @@ module Primer
       end
 
       # @label Trailing action
+      # @snapshot
       # @param label_text text
       # @param show_clear_button toggle
       # @param visually_hide_label toggle
@@ -115,6 +117,7 @@ module Primer
       end
 
       # @label Full width
+      # @snapshot
       # @param label_text text
       # @param show_clear_button toggle
       # @param visually_hide_label toggle
@@ -134,6 +137,7 @@ module Primer
       end
 
       # @label Visually hide label
+      # @snapshot
       # @param label_text text
       # @param show_clear_button toggle
       # @param visually_hide_label toggle
@@ -166,6 +170,7 @@ module Primer
       # @param input_id text
       # @param list_id text
       # @param input_name text
+      # @snapshot
       def small(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :small, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id-1", list_id: "list-id-1", input_name: "input-id-1")
         render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
           component.with_leading_visual_icon(icon: :search)
@@ -184,6 +189,7 @@ module Primer
       # @param input_id text
       # @param list_id text
       # @param input_name text
+      # @snapshot
       def medium(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id-2", list_id: "list-id-2", input_name: "input-id-2")
         render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
           component.with_leading_visual_icon(icon: :search)
@@ -202,6 +208,7 @@ module Primer
       # @param input_id text
       # @param list_id text
       # @param input_name text
+      # @snapshot
       def large(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :large, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id-3", list_id: "list-id-3", input_name: "input-id-3")
         render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
           component.with_leading_visual_icon(icon: :search)

data/previews/primer/beta/avatar_preview.rb

@@ -14,6 +14,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
@@ -28,36 +29,43 @@ module Primer
       # @!group Sizes
       #
       # @label 16px
+      # @snapshot
       def size_16
         render(Primer::Beta::Avatar.new(size: 16, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
 
       # @label 20px
+      # @snapshot
       def size_20
         render(Primer::Beta::Avatar.new(size: 20, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
 
       # @label 24px
+      # @snapshot
       def size_24
         render(Primer::Beta::Avatar.new(size: 24, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
 
       # @label 32px
+      # @snapshot
       def size_32
         render(Primer::Beta::Avatar.new(size: 32, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
 
       # @label 40px
+      # @snapshot
       def size_40
         render(Primer::Beta::Avatar.new(size: 40, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
 
       # @label 48px
+      # @snapshot
       def size_48
         render(Primer::Beta::Avatar.new(size: 48, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
 
       # @label 80px
+      # @snapshot
       def size_80
         render(Primer::Beta::Avatar.new(size: 80, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
@@ -67,11 +75,13 @@ module Primer
       # @!group Shape
       #
       # @label Circle
+      # @snapshot
       def shape_circle
         render(Primer::Beta::Avatar.new(shape: :circle, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
 
       # @label Square
+      # @snapshot
       def shape_square
         render(Primer::Beta::Avatar.new(shape: :square, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end

data/previews/primer/beta/avatar_stack_preview.rb

@@ -20,6 +20,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Beta::AvatarStack.new) do |component|
           component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
@@ -36,6 +37,7 @@ module Primer
       end
 
       # @label 2 avatars
+      # @snapshot
       def avatar_2
         render(Primer::Beta::AvatarStack.new) do |component|
           component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
@@ -44,6 +46,7 @@ module Primer
       end
 
       # @label 3 avatars
+      # @snapshot
       def avatar_3
         render(Primer::Beta::AvatarStack.new) do |component|
           component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")

data/previews/primer/beta/blankslate_preview.rb

@@ -17,6 +17,7 @@ module Primer
       end
 
       # @label Default options
+      # @snapshot
       def default
         render Primer::Beta::Blankslate.new do |component|
           component.with_heading(tag: :h2).with_content("Title")
@@ -43,6 +44,7 @@ module Primer
       end
 
       # @label Border
+      # @snapshot
       def option_border
         render Primer::Beta::Blankslate.new(border: true) do |component|
           component.with_heading(tag: :h2).with_content("Title")
@@ -55,6 +57,7 @@ module Primer
       # @param narrow [Boolean] toggle
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
+      # @snapshot
       def with_icon(narrow: false, spacious: false, border: false)
         render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
           component.with_visual_icon(icon: :shield)
@@ -65,6 +68,7 @@ module Primer
       # @param narrow [Boolean] toggle
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
+      # @snapshot
       def with_image(narrow: false, spacious: false, border: false)
         render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
           component.with_heading(tag: :h2).with_content("Millions of teams trust GitHub to keep their work safe")
@@ -75,6 +79,7 @@ module Primer
       # @param narrow [Boolean] toggle
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
+      # @snapshot
       def loading(narrow: false, spacious: false, border: false)
         render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
           component.with_heading(tag: :h2).with_content("Mirroring your repository")
@@ -86,6 +91,7 @@ module Primer
       # @param narrow [Boolean] toggle
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
+      # @snapshot
       def description(narrow: false, spacious: false, border: false)
         render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
           component.with_heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
@@ -96,6 +102,7 @@ module Primer
       # @param narrow [Boolean] toggle
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
+      # @snapshot
       def primary_action(narrow: false, spacious: false, border: false)
         render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
           component.with_heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
@@ -106,6 +113,7 @@ module Primer
       # @param narrow [Boolean] toggle
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
+      # @snapshot
       def secondary_action(narrow: false, spacious: false, border: false)
         render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
           component.with_heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
@@ -116,6 +124,7 @@ module Primer
       # @param narrow [Boolean] toggle
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
+      # @snapshot
       def full(narrow: false, spacious: false, border: false)
         render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
           component.with_visual_icon(icon: :shield)

data/previews/primer/beta/border_box_preview.rb

@@ -20,6 +20,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Beta::BorderBox.new) do |component|
           component.with_header { "Header" }
@@ -45,6 +46,7 @@ module Primer
       end
 
       # @label Row colors
+      # @snapshot
       def row_colors
         render(Primer::Beta::BorderBox.new) do |component|
           component.with_row(scheme: :default) { "Default" }
@@ -69,6 +71,7 @@ module Primer
       end
 
       # @label Condensed
+      # @snapshot
       def padding_condensed
         render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component|
           component.with_header { "Header" }
@@ -81,6 +84,7 @@ module Primer
       end
 
       # @label Spacious
+      # @snapshot
       def padding_spacious
         render(Primer::Beta::BorderBox.new(padding: :spacious)) do |component|
           component.with_header { "Header" }

data/previews/primer/beta/breadcrumbs_preview.rb

@@ -18,6 +18,7 @@ module Primer
       # @label Default options
       #
       # @param number_of_links [Integer] number
+      # @snapshot
       def default(number_of_links: 2)
         render(Primer::Beta::Breadcrumbs.new) do |component|
           Array.new(number_of_links || 3) do |i|

data/previews/primer/beta/button_group_preview.rb

@@ -19,6 +19,7 @@ module Primer
       # @label Default options
       #
       # @param size [Symbol] select [medium, small]
+      # @snapshot
       def default(size: :medium)
         render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
           component.with_button { "Button 1" }
@@ -30,6 +31,7 @@ module Primer
       # @label Split button
       #
       # @param size [Symbol] select [medium, small]
+      # @snapshot
       def split_button(size: :medium)
         render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
           component.with_button { "Button 1" }
@@ -40,6 +42,7 @@ module Primer
       # @label Icon buttons
       #
       # @param size [Symbol] select [medium, small]
+      # @snapshot
       def icon_buttons(size: :medium)
         render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
           component.with_button(icon: :note, "aria-label": "button 1")
@@ -49,6 +52,7 @@ module Primer
       end
 
       # @label Button group with all tags
+      # @snapshot
       def all_tags
         render(Primer::Beta::ButtonGroup.new) do |component|
           component.with_button(id: "button-1", tag: :button) do |component|

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

@@ -2,24 +2,28 @@
   <%= render(Primer::Beta::Button.new(
       scheme: :secondary,
       size: :medium,
+      disabled: disabled
   )) do %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :primary,
       size: :medium,
+      disabled: disabled
   )) do %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :invisible,
       size: :medium,
+      disabled: disabled
   )) do %>
     Button
   <% end %>
   <%= render(Primer::Beta::Button.new(
       scheme: :danger,
       size: :medium,
+      disabled: disabled
   )) do %>
     Button
   <% end %>