primer_view_components 0.0.97 → 0.0.98

data/previews/primer/beta/button_preview.rb

@@ -0,0 +1,256 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Button
+    class ButtonPreview < ViewComponent::Preview
+      # @label Playground
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium, large]
+      # @param block toggle
+      # @param disabled toggle
+      # @param align_content select [center, start]
+      # @param tag select [a, summary, button]
+      def playground(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center,
+        tag: :button,
+        disabled: false
+      )
+        render(Primer::Beta::Button.new(
+                 scheme: scheme,
+                 size: size,
+                 block: block,
+                 id: id,
+                 align_content: align_content,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Default
+      # @param block toggle
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def default(
+        block: false,
+        id: "button-preview",
+        tag: :button,
+        disabled: false
+      )
+        render(Primer::Beta::Button.new(
+                 scheme: :default,
+                 size: :medium,
+                 block: block,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Primary
+      # @param block toggle
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def primary(
+        id: "button-preview",
+        block: false,
+        tag: :button,
+        disabled: false
+      )
+        render(Primer::Beta::Button.new(
+                 scheme: :primary,
+                 size: :medium,
+                 block: block,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Danger
+      # @param block toggle
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def danger(
+        id: "button-preview",
+        block: false,
+        tag: :button,
+        disabled: false
+      )
+        render(Primer::Beta::Button.new(
+                 scheme: :danger,
+                 size: :medium,
+                 block: block,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Invisible
+      # @param block toggle
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def invisible(
+        id: "button-preview",
+        block: false,
+        tag: :button,
+        disabled: false
+      )
+        render(Primer::Beta::Button.new(
+                 scheme: :invisible,
+                 size: :medium,
+                 block: block,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label All schemes
+      def all_schemes
+        render_with_template(locals: {})
+      end
+
+      # @label Full width
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def full_width(
+        id: "button-preview",
+        tag: :button,
+        disabled: false
+      )
+        render(Primer::Beta::Button.new(
+                 scheme: :default,
+                 size: :medium,
+                 block: true,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Link as button
+      # @param scheme select [default, primary, danger, outline, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      def link_as_button(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center,
+        tag: :a
+      )
+        render(Primer::Beta::Button.new(
+                 scheme: scheme,
+                 size: size,
+                 block: block,
+                 id: id,
+                 align_content: align_content,
+                 tag: tag
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Trailing visual
+      # @param scheme select [default, primary, danger, outline, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @param tag select [a, summary, button]
+      def trailing_visual(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center,
+        tag: :a
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               id: id,
+                               align_content: align_content,
+                               tag: tag
+                             })
+      end
+
+      # @label Leading visual
+      # @param scheme select [default, primary, danger, outline, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      def leading_visual(
+        scheme: :invisible,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               id: id,
+                               align_content: align_content
+                             })
+      end
+
+      # @label Trailing action
+      # @param block toggle
+      # @param align_content select [center, start]
+      def trailing_action(
+        block: false,
+        id: "button-preview",
+        align_content: :center
+      )
+        render_with_template(locals: {
+                               block: block,
+                               id: id,
+                               align_content: align_content
+                             })
+      end
+
+      # @label With tooltip
+      # @param scheme select [default, primary, danger, outline, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      def with_tooltip(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               id: id,
+                               align_content: align_content
+                             })
+      end
+    end
+  end
+end

data/previews/primer/beta/close_button_preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label CloseButton
+    class CloseButtonPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param type [Symbol] select [button, submit]
+      def default(type: :button)
+        render(Primer::Beta::CloseButton.new(type: type))
+      end
+    end
+  end
+end

data/previews/primer/beta/counter_preview.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Counter
+    class CounterPreview < ViewComponent::Preview
+      # @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))
+      end
+
+      # @label With Text
+      def with_text
+        render(Primer::Beta::Counter.new(text: "∞"))
+      end
+    end
+  end
+end

data/previews/primer/beta/details_preview.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Details
+    class DetailsPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @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
+            "Summary"
+          end
+          c.with_body do
+            "Body"
+          end
+        end
+      end
+
+      # @label Custom button
+      #
+      # @param overlay [Symbol] select [none, default, dark]
+      # @param reset [Boolean] toggle
+      def custom_button(reset: false, overlay: :default)
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |c|
+          c.summary(size: :small, scheme: :primary) { "Click me" }
+          c.body { "Body" }
+        end
+      end
+
+      # @label Without button
+      #
+      # @param overlay [Symbol] select [none, default, dark]
+      # @param reset [Boolean] toggle
+      def without_button(reset: false, overlay: :default)
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |c|
+          c.summary(button: false) { "Click me" }
+          c.body { "Body" }
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/flash_preview.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Flash
+    class FlashPreview < ViewComponent::Preview
+      # @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 }
+      end
+    end
+  end
+end

data/previews/primer/beta/heading_preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Heading
+    class HeadingPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param tag [Symbol] select [h1, h2, h3, h4, h5, h6]
+      # @param content [String] text
+      def default(tag: :h2, content: "Heading")
+        render(Primer::Beta::Heading.new(tag: tag)) { content }
+      end
+    end
+  end
+end

data/previews/primer/beta/icon_button_preview.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label IconButton
+    class IconButtonPreview < ViewComponent::Preview
+      # @label Playground
+      # @param scheme select [default, danger, invisible]
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      # @param icon [Symbol] octicon
+      def playground(
+        scheme: :default,
+        size: :medium,
+        id: "button-preview",
+        tag: :button,
+        disabled: false,
+        icon: :plus,
+        aria_label: "Button"
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: scheme,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled,
+                 icon: icon,
+                 "aria-label": aria_label
+               ))
+      end
+
+      # @label Default
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def default(
+        size: :medium,
+        id: "button-preview",
+        tag: :button,
+        disabled: false,
+        icon: :star,
+        aria_label: "Button"
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: :default,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled,
+                 icon: icon,
+                 "aria-label": aria_label
+               ))
+      end
+
+      # @label Invisible
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def invisible(
+        size: :medium,
+        id: "button-preview",
+        tag: :button,
+        disabled: false,
+        icon: :x,
+        aria_label: "Button"
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: :invisible,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled,
+                 icon: icon,
+                 "aria-label": aria_label
+               ))
+      end
+
+      # @label Danger
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def danger(
+        size: :medium,
+        id: "button-preview",
+        tag: :button,
+        disabled: false,
+        icon: :trash,
+        aria_label: "Button"
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: :danger,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled,
+                 icon: icon,
+                 "aria-label": aria_label
+               ))
+      end
+    end
+  end
+end

data/previews/primer/beta/text_preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Text
+    class TextPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param tag [Symbol] select [div, p, span]
+      # @param content [String] text
+      def default(tag: :span, content: "Text")
+        render(Primer::Beta::Text.new(tag: tag)) { content }
+      end
+    end
+  end
+end

data/previews/primer/beta/truncate_preview.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Truncate
+    class TruncatePreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param text [String] text
+      def default(text: "branch-name-that-is-really-long")
+        render(Primer::Beta::Truncate.new) { text }
+      end
+
+      # @label Multiple items
+      def multiple_items
+        render(Primer::Beta::Truncate.new) do |component|
+          component.with_item do
+            "really-long-repository-owner-name"
+          end
+          component.with_item(font_weight: :bold) do
+            "really-long-repository-name"
+          end
+        end
+      end
+
+      # @label Advanced multiple items
+      def advanced_multiple_items
+        render(Primer::Beta::Truncate.new(tag: :ol)) do |component|
+          component.with_item(tag: :li) { "primer" }
+          component.with_item(tag: :li, priority: true) { "/ css" }
+          component.with_item(tag: :li) { "/ Issues" }
+          component.with_item(tag: :li) { "/ #123" }
+          component.with_item(tag: :li, priority: true) { "Visual bug on primer.style found in lists" }
+        end
+      end
+
+      # @label Max widths
+      def max_widths
+        render(Primer::Beta::Truncate.new) do |component|
+          component.with_item(max_width: 300) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
+          component.with_item(max_width: 200) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
+          component.with_item(max_width: 100) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
+        end
+      end
+    end
+  end
+end

data/previews/primer/clipboard_copy_preview/element.html.erb

@@ -0,0 +1,2 @@
+<%= render(Primer::ClipboardCopy.new(for: "blob-path", "aria-label": aria_label)) %>
+<div id="blob-path">src/index.js</div>

data/previews/primer/clipboard_copy_preview.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Primer
+  # @label ClipboardCopy
+  class ClipboardCopyPreview < ViewComponent::Preview
+    # @label Default Options
+    #
+    # @param aria_label [String]
+    # @param value [String]
+    def default(value: "Text to copy", aria_label: "Copy text to the system clipboard")
+      render(Primer::ClipboardCopy.new(value: value, "aria-label": aria_label))
+    end
+
+    # @label With text instead of icons
+    #
+    # @param aria_label [String]
+    # @param value [String]
+    def text(value: "Text to copy", aria_label: "Copy text to the system clipboard")
+      render(Primer::ClipboardCopy.new(value: value, "aria-label": aria_label)) { "Click to copy!" }
+    end
+
+    # @label Copying from an element
+    #
+    # @param aria_label [String]
+    def element(aria_label: "Copy text to the system clipboard")
+      render_with_template(locals: { aria_label: aria_label })
+    end
+  end
+end

data/previews/primer/dropdown_preview.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Primer
+  # @label Dropdown
+  class DropdownPreview < ViewComponent::Preview
+    # @label Default Options
+    #
+    # @param with_caret [Boolean] toggle
+    # @param overlay [Symbol] select [none, default, dark]
+    def default(overlay: :default, with_caret: false)
+      render(Primer::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" }
+        end
+      end
+    end
+
+    # @label Menu Options
+    #
+    # @param as [Symbol] select [list, default]
+    # @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::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" }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(AfterContentForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(ArrayCheckBoxGroupForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(CaptionTemplateForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(CheckBoxGroupForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,4 @@
+<p>Each of these fields comes from its own form definition.</p>
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(ComposedForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(HorizontalForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(InvalidForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(MultiInputForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(MultiTextFieldForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(RadioButtonGroupForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(RadioButtonWithNestedForm.new(f)) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(SelectListForm.new(f)) %>
+<% end %>