Merge pull request #23705 from opf/docs/update-quickfilter-lookbook-docs

[OP-19489] Update docs after adding multiple variants

lookbook/docs/components/quick-filters.md.erb

@@ -36,9 +36,24 @@ Note: Clicking on buttons in the above preview will break it and redirect to the
 
 ## SelectPanelComponent
 
-A multiselect select panel based quick filter. Select panel items are provided via `with_item` slots.
-Navigation happens when items are checked and the "Apply" button is clicked.
+A select panel based quick filter. Items are provided via `with_item` slots or loaded asynchronously via `src`.
+By default, in multiselect mode, navigation happens when items are checked and the "Apply" button is clicked.
+When the query has a matching active filter, the corresponding items are checked, the show button gets a counter,
+and a "Clear" button is rendered in the panel footer.
 
 <%= embed OpPrimer::QuickFilterPreview, :select_panel_with_active_filter, panels: %i[source] %>
 
 Note: Clicking on buttons in the above preview will break it and redirect to the meetings index page.
+
+### Single select
+
+With `select_variant: :single`, each item navigates immediately on click and there are no footer buttons.
+
+<%= embed OpPrimer::QuickFilterPreview, :select_panel_single_select, panels: %i[source] %>
+
+Note: Clicking on buttons in the above preview will break it and redirect to the meetings index page.
+
+### Async loading
+
+Pass `src` to lazily load the panel items from an endpoint instead of providing them inline.
+The filter must implement `#value_objects`, and `src` cannot be combined with inline items or `select_variant: :single`.

lookbook/previews/op_primer/quick_filter_preview.rb

@@ -30,6 +30,7 @@
 
 module OpPrimer
   # @logical_path OpenProject/Primer
+  # @display min_height 400px
   class QuickFilterPreview < Lookbook::Preview
     def segmented_control
       render_with_template(locals: { query: meeting_query })
@@ -53,6 +54,12 @@ module OpPrimer
       render_with_template(locals: { query: })
     end
 
+    def select_panel_single_select
+      query = meeting_query
+      query.where("time", "=", ["past"])
+      render_with_template(locals: { query: })
+    end
+
     private
 
     def meeting_query

lookbook/previews/op_primer/quick_filter_preview/select_panel_single_select.html.erb

@@ -0,0 +1,12 @@
+<%= render(
+      OpPrimer::QuickFilter::SelectPanelComponent.new(
+        name: "Time",
+        query: query,
+        filter_key: :time,
+        path_args: [:meetings],
+        select_variant: :single
+      )
+    ) do |component|
+      component.with_item(label: "Upcoming", value: "future")
+      component.with_item(label: "Past", value: "past")
+    end %>