openproject-primer_view_components 0.6.3

data/previews/primer/beta/border_box_preview.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label BorderBox
+    class BorderBoxPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param padding [Symbol] select [default, condensed, spacious]
+      # @param scheme [Symbol] select [default, neutral, info, warning]
+      def playground(padding: :default, scheme: :default)
+        render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
+          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
+      # @snapshot
+      def default
+        render(Primer::Beta::BorderBox.new) do |component|
+          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 |header|
+            header.with_title(tag: :h2) do
+              "Header with title"
+            end
+          end
+          component.with_body { "Body" }
+          component.with_footer { "Footer" }
+        end
+      end
+
+      # @label Row colors
+      # @snapshot
+      def row_colors
+        render(Primer::Beta::BorderBox.new) do |component|
+          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
+
+      # @!group Padding
+      #
+      # @label Default
+      def padding_default
+        render(Primer::Beta::BorderBox.new) do |component|
+          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
+      # @snapshot
+      def padding_condensed
+        render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component|
+          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
+      # @snapshot
+      def padding_spacious
+        render(Primer::Beta::BorderBox.new(padding: :spacious)) do |component|
+          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
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/breadcrumbs_preview.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Breadcrumbs
+    class BreadcrumbsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_links [Integer] number
+      def playground(number_of_links: 2)
+        render(Primer::Beta::Breadcrumbs.new) do |component|
+          Array.new(number_of_links || 3) do |i|
+            component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
+          end
+        end
+      end
+
+      # @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|
+            component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
+          end
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/button_group_preview/action_menus.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Beta::ButtonGroup.new) do |component| %>
+  <% component.with_button() { "Main menu" } %>
+  <% component.with_button(icon: "triangle-down", "aria-label": "secondary menu", data: { "menu-id": "my-id" }) %>
+<% end %>
+
+<%= render(Primer::Alpha::ActionMenu.new(anchor_align: :end, menu_id: "my-id")) do |component| %>
+  <% component.with_item(label: "Item", tag: :button, value: "") %>
+<% end %>

data/previews/primer/beta/button_group_preview.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label ButtonGroup
+    class ButtonGroupPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param size [Symbol] select [small, medium, large]
+      # @param scheme [Symbol] select [default, primary, secondary, danger, invisible]
+      def playground(size: :medium, scheme: :default)
+        render(Primer::Beta::ButtonGroup.new(size: size, scheme: scheme)) do |component|
+          component.with_button { "Button 1" }
+          component.with_button { "Button 2" }
+          component.with_button { "Button 3" }
+        end
+      end
+
+      # @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" }
+          component.with_button { "Button 2" }
+          component.with_button { "Button 3" }
+        end
+      end
+
+      # @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" }
+          component.with_button(icon: "triangle-down", "aria-label": "menu")
+        end
+      end
+
+      # @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")
+          component.with_button(icon: :rows, "aria-label": "button 2")
+          component.with_button(icon: "sort-desc", "aria-label": "button 3")
+        end
+      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|
+            component.with_tooltip(text: "Button Tooltip")
+            "Button 1"
+          end
+          component.with_button(id: "button-2", tag: :a) do |component|
+            component.with_tooltip(text: "Button Tooltip")
+            "Button 2"
+          end
+          component.with_button(id: "button-3", tag: :summary) do |component|
+            component.with_tooltip(text: "Button Tooltip")
+            "Button 3"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+<div style="display: flex; gap: 1rem;">
+  <%= 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 %>
+</div>

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

@@ -0,0 +1,54 @@
+<div style="display: flex; gap: 1rem;">
+  <%= render(Primer::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do %>
+    Button
+  <% end %>
+  <%= render(Primer::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do |component| %>
+    <% component.with_leading_visual_icon(icon: :search) %>
+    Button
+  <% end %>
+  <%= render(Primer::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do |component| %>
+    <% component.with_trailing_action_icon(icon: "triangle-down") %>
+    Button
+  <% end %>
+  <%= render(Primer::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do |component| %>
+    <% component.with_trailing_visual_counter(count: "15") %>
+    Button
+  <% end %>
+  <%= render(Primer::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) 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 |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 |component| %>
+    <% component.with_tooltip(text: "Tooltip text") %>
+    Button with tooltip
+  <% end %>
+</div>

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

@@ -0,0 +1,10 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |component| %>
+  <% component.with_leading_visual_icon(icon: :search) %>
+  Button
+<% end %>

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

@@ -0,0 +1,10 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: :default,
+    size: :medium,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |component| %>
+  <% component.with_trailing_action_icon(icon: "triangle-down") %>
+  Button
+<% end %>

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

@@ -0,0 +1,11 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: scheme,
+    size: :medium,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |component| %>
+  <% component.with_leading_visual_icon(icon: :star) %>
+  <% component.with_trailing_visual_counter(count: 15) %>
+  Button
+<% end %>

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

@@ -0,0 +1,11 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: id,
+    align_content: align_content,
+    tag: tag
+)) do |component| %>
+  <% component.with_trailing_visual_counter(count: "15") %>
+  Button
+<% end %>

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

@@ -0,0 +1,10 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |component| %>
+  <% component.with_tooltip(text: "Tooltip text") %>
+  Button
+<% end %>

data/previews/primer/beta/button_preview.rb

@@ -0,0 +1,324 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Button
+    class ButtonPreview < ViewComponent::Preview
+      # Upgrade guide to Primer::Beta::Button
+      #
+      # | old param | new param | options |
+      # | -- | -- | -- |
+      # | variant | size | :small, :medium (default), :large |
+      # | :outline | :default or :invisible | option for :scheme |
+      # | dropdown | trailing action icon slot | see trailing action preview for markup |
+      #
+
+      # @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 Invisible all visuals
+      # @snapshot
+      def invisible_all_visuals
+        render_with_template(locals: {})
+      end
+
+      # @label Link
+      # @param block toggle
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      # @snapshot
+      def link(
+        id: "button-preview",
+        block: false,
+        tag: :button,
+        disabled: false
+      )
+        render(Primer::Beta::Button.new(
+                 scheme: :link,
+                 size: :medium,
+                 block: block,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label All schemes
+      # @snapshot
+      # @param disabled toggle
+      def all_schemes(
+        disabled: false
+      )
+        render_with_template(locals: {
+                               disabled: disabled,
+                             })
+      end
+
+      # @label Full width
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      # @snapshot
+      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, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @snapshot
+      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, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @param tag select [a, summary, button]
+      # @snapshot
+      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, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @snapshot
+      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]
+      # @snapshot
+      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 Trailing Counter
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @param scheme select [default, primary, danger, invisible]
+      # @snapshot
+      def trailing_counter(
+        block: false,
+        id: "button-preview",
+        align_content: :center,
+        scheme: :primary
+      )
+        render_with_template(locals: {
+                               block: block,
+                               id: id,
+                               align_content: align_content,
+                               scheme: scheme
+                             })
+      end
+
+      # @label With tooltip
+      # @param scheme select [default, primary, danger, 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/clipboard_copy_preview/element.html.erb

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