openproject-primer_view_components 0.6.3

data/previews/primer/alpha/action_menu_preview.rb

@@ -0,0 +1,328 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label ActionMenu
+    class ActionMenuPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param select_variant [Symbol] select [single, multiple, none]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param size [Symbol] select [auto, small, medium, large, xlarge]
+      def playground(
+        select_variant: Primer::Alpha::ActionMenu::DEFAULT_SELECT_VARIANT, anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN, anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        size: Primer::Alpha::Overlay::DEFAULT_SIZE
+      )
+        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side, size: size)) do |menu|
+          menu.with_show_button { "Menu" }
+          menu.with_item(label: "Copy link")
+          menu.with_item(label: "Quote reply")
+          menu.with_item(label: "Reference in new issue")
+          menu.with_divider
+          menu.with_item(label: "Edit")
+          menu.with_item(label: "Delete", scheme: :danger)
+        end
+      end
+
+      # @label Content labels
+      #
+      def content_labels; end
+
+      # @label Default
+      #
+      # @snapshot interactive
+      def default
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Menu"
+          end
+
+          menu.with_item(label: "Copy link")
+          menu.with_item(label: "Quote reply")
+          menu.with_item(label: "Reference in new issue")
+          menu.with_divider
+          menu.with_item(label: "Edit") do |item|
+            item.with_description.with_content("Change settings")
+          end
+          menu.with_item(label: "Delete", scheme: :danger) do |item|
+            item.with_description.with_content("Sayonara")
+          end
+        end
+      end
+
+      # @label Wide
+      #
+      # @snapshot interactive
+      def wide
+        render(Primer::Alpha::ActionMenu.new(select_variant: :single, size: :medium)) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "A wider menu"
+          end
+
+          menu.with_item(label: "Default", active: true, value: "default") do |item|
+            item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
+            item.with_description { "This is an example for wide ActionMenus" }
+          end
+
+          menu.with_item(label: "Extended", active: false, value: "extended") do |item|
+            item.with_description { "It allows for extended descriptions with extra afforance for additional visuals" }
+          end
+        end
+      end
+
+      # @label With icon button
+      #
+      def with_icon_button
+        render(Primer::Alpha::ActionMenu.new) do |menu|
+          menu.with_show_button(icon: :star, "aria-label": "Menu")
+          menu.with_item(label: "Does something")
+        end
+      end
+
+      # @label Single select
+      #
+      def single_select
+        render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
+          menu.with_show_button { "Menu" }
+          menu.with_item(label: "Fast forward")
+          menu.with_item(label: "Recursive")
+          menu.with_item(label: "Ours")
+          menu.with_item(label: "Resolve")
+        end
+      end
+
+      # @label Multiple select
+      #
+      def multiple_select
+        render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
+          menu.with_show_button { "Menu" }
+
+          menu.with_avatar_item(
+            src: "https://avatars.githubusercontent.com/u/18661030?v=4",
+            username: "langermank",
+            full_name: "Katie Langerman",
+            full_name_scheme: :inline,
+            avatar_arguments: { shape: :square }
+          )
+
+          menu.with_avatar_item(
+            src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4",
+            username: "jonrohan",
+            full_name: "Jon Rohan",
+            full_name_scheme: :inline,
+            avatar_arguments: { shape: :square }
+          )
+
+          menu.with_avatar_item(
+            src: "https://avatars.githubusercontent.com/u/1446503?v=4",
+            username: "broccolinisoup",
+            full_name: "Armağan Ersöz",
+            full_name_scheme: :inline,
+            avatar_arguments: { shape: :square }
+          )
+        end
+      end
+
+      # @label Links
+      #
+      def links
+        render(Primer::Alpha::ActionMenu.new) do |menu|
+          menu.with_show_button { "Menu" }
+          menu.with_item(label: "Settings", href: "/")
+          menu.with_item(label: "Your repositories", href: "/")
+          menu.with_item(label: "Disabled", href: "/", disabled: true)
+        end
+      end
+
+      # @label Single item selected
+      #
+      # @snapshot interactive
+      def single_selected_item
+        render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
+          menu.with_show_button { "Menu" }
+          menu.with_item(label: "Copy link")
+          menu.with_item(label: "Quote reply", active: true)
+          menu.with_item(label: "Reference in new issue")
+        end
+      end
+
+      # @label Single Select with Internal Label
+      #
+      # @snapshot interactive
+      def single_select_with_internal_label
+        render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Menu")) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Menu"
+          end
+          menu.with_item(label: "Copy link") do |item|
+            item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
+          end
+          menu.with_item(label: "Quote reply", active: true)
+          menu.with_item(label: "Reference in new issue")
+        end
+      end
+
+      # @label Multiple items selected
+      #
+      # @snapshot interactive
+      def multiple_selected_items
+        render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
+          menu.with_show_button { "Menu" }
+
+          menu.with_avatar_item(
+            src: "https://avatars.githubusercontent.com/u/18661030?v=4",
+            username: "langermank",
+            full_name: "Katie Langerman",
+            full_name_scheme: :inline,
+            active: true
+          )
+
+          menu.with_avatar_item(
+            src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4",
+            username: "jonrohan",
+            full_name: "Jon Rohan",
+            full_name_scheme: :inline
+          )
+
+          menu.with_avatar_item(
+            src: "https://avatars.githubusercontent.com/u/1446503?v=4",
+            username: "broccolinisoup",
+            full_name: "Armağan Ersöz",
+            full_name_scheme: :inline,
+            active: true
+          )
+        end
+      end
+
+      # @label With deferred content
+      #
+      def with_deferred_content
+        render(Primer::Alpha::ActionMenu.new(menu_id: "deferred", src: UrlHelpers.action_menu_deferred_path)) do |menu|
+          menu.with_show_button { "Menu with deferred content" }
+        end
+      end
+
+      # @label With deferred preloaded content
+      #
+      def with_deferred_preloaded_content
+        render(Primer::Alpha::ActionMenu.new(menu_id: "deferred-preload", preload: true, src: UrlHelpers.action_menu_deferred_preload_path)) do |menu|
+          menu.with_show_button { "Menu with deferred and preloaded content" }
+        end
+      end
+
+      # @label With actions
+      #
+      def with_actions; end
+
+      # @label Single select form
+      #
+      def single_select_form(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
+      # @label Multiple select form
+      #
+      def multiple_select_form(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
+      # @label With disabled items
+      #
+      def with_disabled_items
+        render(Primer::Alpha::ActionMenu.new) do |component|
+          component.with_show_button { "Trigger" }
+          component.with_item(label: "Does something", tag: :button, disabled: true)
+          component.with_item(label: "Site", tag: :a, href: "/", disabled: true)
+        end
+      end
+
+      # @label Opens a dialog
+      #
+      def opens_dialog(menu_id: "menu-1")
+        render_with_template(locals: {
+                               menu_id: menu_id
+                             })
+      end
+
+      # @label Align end
+      #
+      def align_end(menu_id: "menu-1")
+        render_with_template(locals: {
+                               menu_id: menu_id
+                             })
+      end
+
+      # @label [Item] Block description
+      #
+      def block_description
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Menu"
+          end
+          menu.with_item(label: "Item label") do |item|
+            item.with_description.with_content("Block description")
+          end
+        end
+      end
+
+      # @label [Item] Submitting Forms
+      #
+      def submitting_forms
+        render_with_template(locals: {})
+      end
+
+      # @label [Item] Inline description
+      #
+      def inline_description
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Menu"
+          end
+          menu.with_item(label: "Item label", description_scheme: :inline) do |item|
+            item.with_description.with_content("Inline description")
+          end
+        end
+      end
+
+      # @label [Item] Leading visual
+      #
+      def leading_visual
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Menu"
+          end
+          menu.with_item(label: "Item label", description_scheme: :inline) do |item|
+            item.with_leading_visual_icon(icon: :gear)
+            item.with_description.with_content("Inline description")
+          end
+        end
+      end
+
+      # @label [Item] Leading visual single select
+      #
+      def leading_visual_single_select
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1", select_variant: :single)) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Menu"
+          end
+          menu.with_item(label: "Item label", description_scheme: :inline) do |item|
+            item.with_leading_visual_icon(icon: :gear)
+            item.with_description.with_content("Inline description")
+          end
+        end
+      end
+
+      # @label Two menus
+      #
+      def two_menus; end
+    end
+  end
+end

data/previews/primer/alpha/auto_complete_preview.rb

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+require_relative "../url_helpers"
+
+module Primer
+  module Alpha
+    # @label AutoComplete
+    class AutoCompletePreview < ViewComponent::Preview
+      # @label Playground
+      # @param label_text text
+      # @param is_label_visible toggle
+      # @param is_label_inline toggle
+      # @param with_icon toggle
+      # @param is_clearable toggle
+      def playground(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
+        # rubocop:disable Primer/ComponentNameMigration
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: label_text,
+            input_id: "input-id",
+            list_id: "test-id",
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: is_label_visible,
+            is_label_inline: is_label_inline,
+            with_icon: with_icon,
+            is_clearable: is_clearable
+          )
+        )
+        # rubocop:enable Primer/ComponentNameMigration
+      end
+
+      # @label Default Options
+      # @param label_text text
+      # @param is_label_visible toggle
+      # @param is_label_inline toggle
+      # @param with_icon toggle
+      # @param is_clearable toggle
+      # @snapshot
+      def default(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
+        # rubocop:disable Primer/ComponentNameMigration
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: label_text,
+            input_id: "input-id",
+            list_id: "test-id",
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: is_label_visible,
+            is_label_inline: is_label_inline,
+            with_icon: with_icon,
+            is_clearable: is_clearable
+          )
+        )
+        # rubocop:enable Primer/ComponentNameMigration
+      end
+
+      # @!group More examples
+
+      # @label AutoComplete with non-visible label
+      def with_non_visible_label
+        # rubocop:disable Primer/ComponentNameMigration
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-1",
+            list_id: "test-id-1",
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: false
+          )
+        )
+        # rubocop:enable Primer/ComponentNameMigration
+      end
+
+      # @label AutoComplete with inline label
+      def with_inline_label
+        # rubocop:disable Primer/ComponentNameMigration
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-2",
+            list_id: "test-id-2",
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_inline: true
+          )
+        )
+        # rubocop:enable Primer/ComponentNameMigration
+      end
+
+      # @label AutoComplete with search icon
+      def with_icon
+        # rubocop:disable Primer/ComponentNameMigration
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-3",
+            list_id: "test-id-3",
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
+            with_icon: true
+          )
+        )
+        # rubocop:enable Primer/ComponentNameMigration
+      end
+
+      # @label AutoComplete with clear button
+      def with_clear_button
+        # rubocop:disable Primer/ComponentNameMigration
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-4",
+            list_id: "test-id-4",
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
+            is_clearable: true
+          )
+        )
+        # rubocop:enable Primer/ComponentNameMigration
+      end
+
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/banner_preview/with_action_button.html.erb

@@ -0,0 +1,4 @@
+<%= render(Primer::Alpha::Banner.new(full: full, dismiss_scheme: dismiss_scheme, icon: icon, scheme: scheme)) do |component| %>
+  <% component.with_action_button(size: :medium) { "Take action" } %>
+  <%= content %>
+<% end %>

data/previews/primer/alpha/banner_preview/with_action_content.html.erb

@@ -0,0 +1,6 @@
+<%= render(Primer::Alpha::Banner.new(full: full, dismiss_scheme: dismiss_scheme, icon: icon, scheme: scheme)) do |component| %>
+  <% component.with_action_content do %>
+    <%= render(Primer::Beta::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
+  <% end %>
+  <%= content %>
+<% end %>

data/previews/primer/alpha/banner_preview.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Banner
+    class BannerPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param full toggle
+      # @param full_when_narrow toggle
+      # @param dismiss_scheme [Symbol] select [none, remove, hide]
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @param description text
+      def playground(full: false, full_when_narrow: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner!", description: nil)
+        icon = nil if icon == :none
+        render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismiss_scheme: dismiss_scheme, icon: icon == :none ? nil : icon, scheme: scheme, description: description)) { content }
+      end
+
+      # @label Default
+      def default
+        render(Primer::Alpha::Banner.new) { "This is a banner." }
+      end
+
+      # @!group Schemes
+      #
+      # @label Default scheme
+      # @snapshot
+      def scheme_default
+        render(Primer::Alpha::Banner.new) { "This is a default banner." }
+      end
+
+      # @label Danger
+      # @snapshot
+      def scheme_danger
+        render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" }
+      end
+
+      # @label Success
+      # @snapshot
+      def scheme_success
+        render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" }
+      end
+
+      # @label Warning
+      # @snapshot
+      def scheme_warning
+        render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" }
+      end
+      #
+      # @!endgroup
+
+      # @label Dismissable
+      # @snapshot
+      def dismissible
+        render(Primer::Alpha::Banner.new(dismiss_scheme: :hide, reappear: true)) { "This is a dismissable banner." }
+      end
+
+      # @!group Full Width
+      # @snapshot
+      #
+      # @label Full width
+      def full_width
+        render(Primer::Alpha::Banner.new(full: true)) { "This is a full width banner." }
+      end
+
+      # @label Full width in Narrow Viewport
+      def full_width_in_narrow_viewport
+        render(Primer::Alpha::Banner.new(full: true, full_when_narrow: true)) { "This is a full width banner in a narrow viewport." }
+      end
+      #
+      # @!endgroup
+
+      # @label With action button
+      #
+      # @param full toggle
+      # @param dismiss_scheme [Symbol] select [none, remove, hide]
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @snapshot
+      def with_action_button(full: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner with an action!")
+        icon = nil if icon == :none
+        render_with_template(locals: { full: full, dismiss_scheme: dismiss_scheme, icon: icon == :none ? nil : icon, scheme: scheme, content: content })
+      end
+
+      # @label With action content
+      #
+      # @param full toggle
+      # @param dismiss_scheme [Symbol] select [none, remove, hide]
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @snapshot
+      def with_action_content(full: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "Did you know? Comments can be edited.")
+        icon = nil if icon == :none
+        render_with_template(locals: { full: full, dismiss_scheme: dismiss_scheme, icon: icon == :none ? nil : icon, scheme: scheme, content: content })
+      end
+    end
+  end
+end

data/previews/primer/alpha/button_marketing_preview.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label ButtonMarketing
+    class ButtonMarketingPreview < ViewComponent::Preview
+      # @label Playground
+      # @param scheme [Symbol] select [default, primary, outline, transparent]
+      # @param variant [Symbol] select [default, large]
+      # @param tag [Symbol] select [button, a]
+      # @param type [Symbol] select [button, submit]
+      # @param disabled [Boolean]
+      def playground(tag: :button, type: :button, scheme: :default, variant: :default, disabled: false)
+        render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant, disabled: disabled)) { "Default" }
+      end
+
+      # @label Default options
+      # @param scheme [Symbol] select [default, primary, outline, transparent]
+      # @param variant [Symbol] select [default, large]
+      # @param tag [Symbol] select [button, a]
+      # @param type [Symbol] select [button, submit]
+      def default(tag: :button, type: :button, scheme: :default, variant: :default)
+        render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
+      end
+
+      # @!group Size Variants
+      # @snapshot
+      #
+      # @label Default
+      def sizes_default
+        render(Primer::Alpha::ButtonMarketing.new) { "Default" }
+      end
+
+      # @label Large
+      def sizes_large
+        render(Primer::Alpha::ButtonMarketing.new(variant: :large)) { "Large" }
+      end
+      # @!endgroup
+
+      # @!group Schemes
+      # @snapshot
+      #
+      # @label Default
+      def scheme_default
+        render(Primer::Alpha::ButtonMarketing.new) { "Default" }
+      end
+
+      # @label Primary
+      def scheme_primary
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :primary)) { "Primary" }
+      end
+
+      # @label Outline
+      def scheme_outline
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :outline)) { "Outline" }
+      end
+
+      # @label Transparent
+      def scheme_transparent
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :transparent)) { "Transparent" }
+      end
+      # @!endgroup
+    end
+  end
+end