primer_view_components 0.26.1 → 0.28.0

data/previews/primer/alpha/select_panel_preview/eventually_local_fetch.html.erb

@@ -0,0 +1,16 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path,
+  select_variant: :multiple,
+  fetch_strategy: :eventually_local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_initial_failure.html.erb

@@ -0,0 +1,12 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(fail: "true"),
+  fetch_strategy: :eventually_local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_no_results.html.erb

@@ -0,0 +1,16 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(show_results: "false"),
+  select_variant: :multiple,
+  fetch_strategy: :eventually_local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/footer_buttons.html.erb

@@ -0,0 +1,23 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  dynamic_label: true,
+  dynamic_label_prefix: "Item",
+  dynamic_aria_label_prefix: "Selected item",
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+  <% panel.with_item(label: "Item 1") %>
+  <% panel.with_item(label: "Item 2") %>
+  <% panel.with_item(label: "Item 3") %>
+  <% panel.with_item(label: "Item 4") %>
+  <% panel.with_footer(show_divider: true) do %>
+    <%= render(Primer::Beta::Button.new(scheme: :default)) { "Cancel" } %>
+    <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Save" } %>
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/local_fetch.html.erb

@@ -0,0 +1,19 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Panel" } %>
+  <% panel.with_item(label: "Item 1") %>
+  <% panel.with_item(label: "Item 2") %>
+  <% panel.with_item(label: "Item 3") %>
+  <% panel.with_item(label: "Item 4") %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/local_fetch_no_results.html.erb

@@ -0,0 +1,15 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Panel" } %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/multiselect.html.erb

@@ -0,0 +1,17 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+  <% panel.with_item(label: "Item 1", item_id: :item1) %>
+  <% panel.with_item(label: "Item 2", item_id: :item2) %>
+  <% panel.with_item(label: "Item 3", item_id: :item3) %>
+  <% panel.with_item(label: "Item 4", item_id: :item4) %>
+  <% panel.with_item(label: "Disabled", disabled: true, item_id: :disabled) %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/multiselect_form.html.erb

@@ -0,0 +1,31 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= form_with(url: generic_form_submission_path(format: route_format)) do |builder| %>
+  <%= render(Primer::Alpha::SelectPanel.new(
+    data: { interaction_subject: subject_id },
+    select_variant: :multiple,
+    fetch_strategy: :local,
+    open_on_load: open_on_load,
+    form_arguments: {
+      name: :item,
+      builder: builder
+    }
+  )) do |panel| %>
+    <% panel.with_show_button { "Panel" } %>
+    <% panel.with_item(label: "Item 1", content_arguments: { data: { value: "item1" } }, active: true) %>
+    <% panel.with_item(label: "Item 2", content_arguments: { data: { value: "item2" } }) %>
+    <% panel.with_item(label: "Item 3", content_arguments: { data: { value: "item3" } }) %>
+    <% panel.with_item(label: "Item 4", content_arguments: { data: { value: "item4" } }) %>
+    <% panel.with_footer(show_divider: true) do %>
+        I'm a footer!
+    <% end %>
+  <% end %>
+
+  <hr>
+
+  <%= render(Primer::Beta::Button.new(type: :submit, scheme: :primary)) do %>
+    Submit
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

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

@@ -0,0 +1,19 @@
+<% subject_id = SecureRandom.hex %>
+<% title = system_arguments.delete(:title) %>
+<% simulate_no_results = system_arguments.delete(:simulate_no_results) %>
+<% simulate_failure = system_arguments.delete(:simulate_failure) %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(show_results: !simulate_no_results, fail: simulate_failure),
+  select_variant: :single,
+  fetch_strategy: :remote,
+  **system_arguments
+)) do |panel| %>
+  <% panel.with_show_button { title } %>
+  <% if subtitle %>
+    <% panel.with_subtitle { subtitle } %>
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/remote_fetch.html.erb

@@ -0,0 +1,16 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path,
+  select_variant: :multiple,
+  fetch_strategy: :remote,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb

@@ -0,0 +1,13 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  # passing a uuid here causes the request to succeed the first time and fail all subsequent times
+  src: select_panel_items_path(fail: "true", uuid: SecureRandom.uuid),
+  fetch_strategy: :remote,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/remote_fetch_initial_failure.html.erb

@@ -0,0 +1,12 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(fail: "true"),
+  fetch_strategy: :remote,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/remote_fetch_no_results.html.erb

@@ -0,0 +1,16 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(show_results: "false"),
+  select_variant: :multiple,
+  fetch_strategy: :remote,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/single_select.html.erb

@@ -0,0 +1,20 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+  <% panel.with_item(label: "Item 1", item_id: :item1) %>
+  <% panel.with_item(label: "Item 2", item_id: :item2) %>
+  <% panel.with_item(label: "Item 3", item_id: :item3) %>
+  <% panel.with_item(label: "Item 4", item_id: :item4) %>
+  <% panel.with_item(label: "Disabled", disabled: true, item_id: :disabled) %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/single_select_form.html.erb

@@ -0,0 +1,33 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= form_with(url: generic_form_submission_path(format: route_format)) do |builder| %>
+  <%= render(Primer::Alpha::SelectPanel.new(
+    data: { interaction_subject: subject_id },
+    select_variant: :single,
+    fetch_strategy: :local,
+    open_on_load: open_on_load,
+    dynamic_label: true,
+    dynamic_label_prefix: "Item",
+    form_arguments: {
+      name: :item,
+      builder: builder
+    }
+  )) do |panel| %>
+    <% panel.with_show_button { "Panel" } %>
+    <% panel.with_item(label: "Item 1", content_arguments: { data: { value: "item1" } }, active: true) %>
+    <% panel.with_item(label: "Item 2", content_arguments: { data: { value: "item2" } }) %>
+    <% panel.with_item(label: "Item 3", content_arguments: { data: { value: "item3" } }) %>
+    <% panel.with_item(label: "Item 4", content_arguments: { data: { value: "item4" } }) %>
+    <% panel.with_footer(show_divider: true) do %>
+        I'm a footer!
+    <% end %>
+  <% end %>
+
+  <hr>
+
+  <%= render(Primer::Beta::Button.new(type: :submit, scheme: :primary)) do %>
+    Submit
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/with_avatar_items.html.erb

@@ -0,0 +1,19 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  id: "with_avatar_items",
+  title: "Select users",
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose users" } %>
+
+  <% panel.with_avatar_item(
+    username: "hulk_smash",
+    src: "https://avatars.githubusercontent.com/u/103004183?v=4",
+  ) %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/with_dynamic_label.html.erb

@@ -0,0 +1,23 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  id: "with_avatar_items",
+  title: "Select users",
+  select_variant: :single,
+  fetch_strategy: :local,
+  dynamic_label: true,
+  dynamic_label_prefix: "Item",
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+
+  <% panel.with_item(label: "Item 1") %>
+  <% panel.with_item(label: "Item 2") %>
+  <% panel.with_item(label: "Item 3") %>
+  <% panel.with_item(label: "Item 4") %>
+  <% panel.with_item(label: "Item 5") %>
+  <% panel.with_item(label: "Item 6") %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/with_dynamic_label_and_aria_prefix.html.erb

@@ -0,0 +1,24 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  id: "with_avatar_items",
+  title: "Select users",
+  select_variant: :single,
+  fetch_strategy: :local,
+  dynamic_label: true,
+  dynamic_label_prefix: "Item",
+  dynamic_aria_label_prefix: "Your item",
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+
+  <% panel.with_item(label: "Item 1") %>
+  <% panel.with_item(label: "Item 2") %>
+  <% panel.with_item(label: "Item 3") %>
+  <% panel.with_item(label: "Item 4") %>
+  <% panel.with_item(label: "Item 5") %>
+  <% panel.with_item(label: "Item 6") %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/with_leading_icons.html.erb

@@ -0,0 +1,31 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  fetch_strategy: :local,
+  dynamic_label: true,
+  dynamic_label_prefix: "Item",
+  dynamic_aria_label_prefix: "Selected item",
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+
+  <% panel.with_item(label: "Leading SVG visual") do |item| %>
+    <% item.with_leading_visual_svg do %>
+      <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
+    <% end %>
+  <% end %>
+
+  <% panel.with_item(label: "Custom content") do |item| %>
+    <% item.with_leading_visual_content do %>
+      <span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span>
+    <% end %>
+  <% end %>
+
+  <% panel.with_item(label: "Visual icons") do |item| %>
+    <% item.with_leading_visual_icon(icon: :star) %>
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/with_subtitle.html.erb

@@ -0,0 +1,25 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  fetch_strategy: :local,
+  dynamic_label: true,
+  dynamic_label_prefix: "Item",
+  dynamic_aria_label_prefix: "Selected item",
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+  <% panel.with_subtitle do %>
+    Choose the item you want to select
+  <% end %>
+  <% panel.with_item(label: "Item 1") %>
+  <% panel.with_item(label: "Item 2") %>
+  <% panel.with_item(label: "Item 3") %>
+  <% panel.with_item(label: "Item 4") %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/with_trailing_icons.html.erb

@@ -0,0 +1,19 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  fetch_strategy: :local,
+  dynamic_label: true,
+  dynamic_label_prefix: "Item",
+  dynamic_aria_label_prefix: "Selected item",
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+
+  <% panel.with_item(label: "Visual icons") do |item| %>
+    <% item.with_trailing_visual_icon(icon: :star) %>
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>