openproject-primer_view_components 0.6.3

data/previews/primer/alpha/text_field_preview.rb

@@ -0,0 +1,194 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label TextField
+    class TextFieldPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param name text
+      # @param id text
+      # @param label text
+      # @param caption text
+      # @param required toggle
+      # @param visually_hide_label toggle
+      # @param size [Symbol] select [small, medium, large]
+      # @param show_clear_button toggle
+      # @param clear_button_id text
+      # @param full_width toggle
+      # @param disabled toggle
+      # @param invalid toggle
+      # @param validation_message text
+      # @param placeholder text
+      # @param inset toggle
+      # @param monospace toggle
+      # @param leading_visual_icon octicon
+      def playground(
+        name: "my-text-field",
+        id: "my-text-field",
+        label: "My text field",
+        caption: "My text field",
+        required: false,
+        visually_hide_label: false,
+        size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
+        show_clear_button: false,
+        clear_button_id: "my-text-field-clear-button",
+        full_width: false,
+        disabled: false,
+        invalid: false,
+        validation_message: nil,
+        placeholder: nil,
+        inset: false,
+        monospace: false,
+        leading_visual_icon: nil
+      )
+        system_arguments = {
+          name: name,
+          id: id,
+          label: label,
+          caption: caption,
+          required: required,
+          visually_hide_label: visually_hide_label,
+          size: size,
+          show_clear_button: show_clear_button,
+          clear_button_id: clear_button_id,
+          full_width: full_width,
+          disabled: disabled,
+          invalid: invalid,
+          validation_message: validation_message,
+          placeholder: placeholder,
+          inset: inset,
+          monospace: monospace
+        }
+
+        if leading_visual_icon
+          system_arguments[:leading_visual] = {
+            icon: leading_visual_icon,
+            size: :small
+          }
+        end
+
+        render(Primer::Alpha::TextField.new(**system_arguments))
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::Alpha::TextField.new(name: "my-text-field", label: "My text field"))
+      end
+
+      # @!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
+      #
+      # @!endgroup
+
+      # @!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
+      #
+      # @!endgroup
+
+      # @!group Auto check
+      #
+      # @label Auto check request ok
+      def with_auto_check_ok
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_ok_path, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label Auto check request error
+      def with_auto_check_error
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_error_path, name: "my-text-field", label: "My text field"))
+      end
+      #
+      # @!endgroup
+
+      # @label With data target attribute
+      def with_data_target
+        render(Primer::Alpha::TextField.new(name: "my-text-field", label: "My text field", data: { target: "custom-component.inputElement" }))
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+require_relative "../url_helpers"
+
+module Primer
+  module Alpha
+    # @label Toggle Switch
+    class ToggleSwitchPreview < ViewComponent::Preview
+      include ActionView::Helpers::FormTagHelper
+
+      def playground
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
+      end
+
+      # @snapshot
+      def default
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
+      end
+
+      # @snapshot
+      def checked
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, checked: true))
+      end
+
+      # @snapshot
+      def disabled
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, enabled: false))
+      end
+
+      # @snapshot
+      def checked_disabled
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, checked: true, enabled: false))
+      end
+
+      # @snapshot
+      def small
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, size: :small))
+      end
+
+      # @snapshot
+      def with_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(Primer::Alpha::ToggleSwitch.new(src: "/foo"))
+      end
+
+      def with_no_src
+        render(Primer::Alpha::ToggleSwitch.new)
+      end
+
+      def with_csrf_token
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "let_me_in"))
+      end
+
+      def with_bad_csrf_token
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
+      end
+    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/with_multiple_on_a_page.html.erb

@@ -0,0 +1,14 @@
+<div>
+  <%= render(Primer::Beta::Button.new(id: "button-1")) do |component| %>
+    <% component.with_tooltip(text: tooltip_text, direction: direction) %>
+    Button 1
+  <% end %>
+  <%= render(Primer::Beta::Button.new(id: "button-2")) do |component| %>
+    <% component.with_tooltip(text: tooltip_text, direction: direction) %>
+    Button 2
+  <% end %>
+  <%= render(Primer::Beta::Button.new(id: "button-3")) do |component| %>
+    <% component.with_tooltip(text: tooltip_text, direction: direction) %>
+    Button 3
+  <% end %>
+</div>

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

@@ -0,0 +1,7 @@
+<div>
+  <p>There should be no horizontal overflow and scrollbar caused by tooltip (assuming there is at least 1px of padding to the right of where the associated control is placed).</p>
+  <div style="float: right;">
+    <button id="some-button">Button with tooltip positioned to right of the page</button>
+    <%= render(Primer::Alpha::Tooltip.new(for_id: "some-button", type: type, text: tooltip_text, direction: direction)) %>
+  </div>
+</div>

data/previews/primer/alpha/tooltip_preview.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Tooltip
+    class TooltipPreview < ViewComponent::Preview
+      # @param direction select [s, n, e, w, ne, nw, se, sw]
+      # @param tooltip_text text
+      def playground(direction: :s, tooltip_text: "You can press a button")
+        render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
+          component.with_tooltip(text: tooltip_text, direction: direction)
+          "Button"
+        end
+      end
+
+      # @param direction select [s, n, e, w, ne, nw, se, sw]
+      # @param tooltip_text text
+      def default(direction: :s, tooltip_text: "You can press a button")
+        render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
+          component.with_tooltip(text: tooltip_text, direction: direction)
+          "Button"
+        end
+      end
+
+      # @param direction select [s, n, e, w, ne, nw, se, sw]
+      # @param tooltip_text text
+      def description_tooltip_on_button_with_existing_describedby(direction: :s, tooltip_text: "You can press a button")
+        render(Primer::Beta::Button.new(id: "button-with-existing-description", "aria-describedby": "existing-description-id")) do |component|
+          component.with_tooltip(text: tooltip_text, direction: direction)
+          "Button"
+        end
+      end
+
+      # @param direction select [s, n, e, w, ne, nw, se, sw]
+      # @param tooltip_text text
+      def with_right_most_position(type: :description, direction: :s, tooltip_text: "A tooltip with very very very very long description that is not very concise...")
+        render_with_template(
+          locals: {
+            type: type,
+            direction: direction,
+            tooltip_text: tooltip_text
+          }
+        )
+      end
+
+      # @param direction select [s, n, e, w, ne, nw, se, sw]
+      # @param tooltip_text text
+      def with_multiple_on_a_page(direction: :s, tooltip_text: "You can press a button")
+        render_with_template(
+          locals: {
+            direction: direction,
+            tooltip_text: tooltip_text
+          }
+        )
+      end
+
+      # @!group Tooltip enabled elements
+      # @label Tooltip with Primer::Beta::Button
+      def tooltip_with_button(direction: :s, tooltip_text: "You can press a button")
+        render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
+          component.with_tooltip(text: tooltip_text, direction: direction)
+          "Button"
+        end
+      end
+
+      # @label Tooltip with Primer::Beta::Link
+      def tooltip_with_link(direction: :s, tooltip_text: "You can press a button")
+        render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip")) do |component|
+          component.with_tooltip(text: tooltip_text, direction: direction)
+          "Button"
+        end
+      end
+
+      # @label Tooltip with Primer::IconButton
+      def tooltip_with_icon_button(direction: :s, tooltip_text: "You can press a button")
+        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/default.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::UnderlineNav.new(label: label, tag: tag, align: align)) do |component| %>
+  <% Array.new(number_of_panels || 3) do |i| %>
+    <% component.with_tab(href: "#", selected: i.zero?) { "Item #{i + 1}" } %>
+  <% end %>
+  <% component.with_actions do %>
+    <%= render(Primer::ButtonComponent.new) { "Button" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/underline_nav_preview/playground.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::UnderlineNav.new(label: label, tag: tag, align: align)) do |component| %>
+  <% Array.new(number_of_panels || 3) do |i| %>
+    <% component.with_tab(href: "#", selected: i.zero?) { "Item #{i + 1}" } %>
+  <% end %>
+  <% component.with_actions do %>
+    <%= render(Primer::ButtonComponent.new) { "Button" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/underline_nav_preview.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label UnderlineNav
+    class UnderlineNavPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param label [String] text
+      # @param tag [Symbol] select [div, nav]
+      # @param align [Symbol] select [left, right]
+      # @param number_of_panels [Integer] number
+      def playground(label: "Default with nav element", tag: :nav, align: :left, number_of_panels: 3)
+        render_with_template(locals: {
+                               label: label,
+                               tag: tag,
+                               align: align,
+                               number_of_panels: number_of_panels
+                             })
+      end
+
+      # @label Default options
+      # @snapshot
+      #
+      # @param label [String] text
+      # @param tag [Symbol] select [div, nav]
+      # @param align [Symbol] select [left, right]
+      # @param number_of_panels [Integer] number
+      def default(label: "Default with nav element", tag: :nav, align: :left, number_of_panels: 3)
+        render_with_template(locals: {
+                               label: label,
+                               tag: tag,
+                               align: align,
+                               number_of_panels: number_of_panels
+                             })
+      end
+
+      # @label With icons and counters
+      # @snapshot
+      #
+      # @param label [String] text
+      # @param tag [Symbol] select [div, nav]
+      # @param align [Symbol] select [left, right]
+      # @param number_of_panels [Integer] number
+      def with_icons_and_counters(label: "With icons and counters", number_of_panels: 3, align: :left, tag: :nav)
+        render(Primer::Alpha::UnderlineNav.new(label: label, tag: tag, align: align)) do |component|
+          Array.new(number_of_panels || 3) do |i|
+            component.with_tab(href: "#", selected: i.zero?) do |tab|
+              tab.with_icon(icon: :star)
+              tab.with_text { "Item #{i + 1}" }
+              tab.with_counter(count: (i + 1) * 5)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/previews/primer/alpha/underline_panels_preview.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label UnderlinePanels
+    class UnderlinePanelsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_panels [Integer] number
+      # @param align [Symbol] select [left, right]
+      def playground(number_of_panels: 3, align: :left)
+        render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
+          Array.new(number_of_panels || 3) do |i|
+            component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
+              tab.with_panel { "Panel #{i + 1}" }
+              tab.with_text { "Tab #{i + 1}" }
+            end
+          end
+        end
+      end
+
+      # @label Default options
+      #
+      # @param number_of_panels [Integer] number
+      # @param align [Symbol] select [left, right]
+      def default(number_of_panels: 3, align: :left)
+        render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
+          Array.new(number_of_panels || 3) do |i|
+            component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
+              tab.with_panel { "Panel #{i + 1}" }
+              tab.with_text { "Tab #{i + 1}" }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/auto_complete_item_preview/default.html.erb

@@ -0,0 +1,9 @@
+<%= render(
+        Primer::Beta::AutoComplete::Item.new(
+            selected: selected,
+            disabled: disabled,
+            value: ''
+    )) do |component| %>
+        <% component.with_leading_visual_icon(icon: :search) %>
+        Label text
+<% end %>

data/previews/primer/beta/auto_complete_item_preview/playground.html.erb

@@ -0,0 +1,9 @@
+<%= render(
+        Primer::Beta::AutoComplete::Item.new(
+            selected: selected,
+            disabled: disabled,
+            value: ''
+    )) do |component| %>
+        <% component.with_leading_visual_icon(icon: :search) %>
+        Label text
+<% end %>

data/previews/primer/beta/auto_complete_item_preview/with_description.html.erb

@@ -0,0 +1,11 @@
+<%= render(
+        Primer::Beta::AutoComplete::Item.new(
+            description_variant: description_variant,
+            selected: selected,
+            disabled: disabled,
+            value: ''
+    )) do |component| %>
+        <% component.with_leading_visual_icon(icon: :search) %>
+        <% component.with_description { "Description" } %>
+        Label text
+<% end %>

data/previews/primer/beta/auto_complete_item_preview.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @component Primer::Beta::AutoComplete::Item
+    # @label AutoCompleteItem
+    class AutoCompleteItemPreview < ViewComponent::Preview
+      # @label Playground
+      # @param selected toggle
+      # @param disabled toggle
+      # @param value text
+      def playground(value: "", selected: false, disabled: false)
+        render_with_template(
+          locals: {
+            selected: selected,
+            disabled: disabled,
+            value: value
+          }
+        )
+      end
+
+      # @label Default
+      # @param selected toggle
+      # @param disabled toggle
+      # @param value text
+      # @snapshot
+      def default(value: "", selected: false, disabled: false)
+        render_with_template(
+          locals: {
+            selected: selected,
+            disabled: disabled,
+            value: value
+          }
+        )
+      end
+
+      # @label WithDescription
+      # @param description_variant select [block, inline]
+      # @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
+
+        render_with_template(
+          locals: {
+            description_variant: description_variant,
+            selected: selected,
+            disabled: disabled,
+            value: value
+          }
+        )
+      end
+    end
+  end
+end

data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb

@@ -0,0 +1,20 @@
+<div class="d-flex flex-items-start flex-column flex-sm-row flex-sm-items-end" style="gap: .5rem">
+    <%= render(
+        Primer::Beta::AutoComplete.new(
+            label_text: label_text,
+            input_id: input_id,
+            list_id: list_id,
+            src: autocomplete_index_path,
+            show_clear_button: show_clear_button,
+            visually_hide_label: visually_hide_label,
+            placeholder: placeholder,
+            size: size,
+            full_width: full_width,
+            disabled: disabled,
+            invalid: invalid,
+            input_name: input_name
+    )) do |component| %>
+        <% component.with_leading_visual_icon(icon: :search) %>
+    <% end %>
+    <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
+</div>