Update docs

lookbook/docs/patterns/10-quick-filters.md.erb

@@ -1,16 +1,17 @@
-Quick filters are lightweight controls that let users toggle a single filter without opening the full filter panel. Each click can navigate to a new URL with updated `filters` and `sortBy` params,
+Quick filters are lightweight controls that let users toggle a single filter without opening the full filter panel. Each click or selection navigates to a new URL with updated `filters` and `sortBy` params,
 preserving any other active filters.
 
-There are currently two variants:
+There are currently three variants:
 * SegmentedControlComponent
 * BooleanComponent
+* SelectPanelComponent
 
 ## SegmentedControlComponent
 
 A general purpose segmented control that accepts any number of items via `with_item` slots.
 Each item has a label and a filter value (`nil` means "no filter" and is useful for an "All" option).
 
-<%= embed OpPrimer::QuickFilterPreview, :segmented, panels: %i[source] %>
+<%= embed OpPrimer::QuickFilterPreview, :segmented_control, panels: %i[source] %>
 
 Note: Clicking on buttons in the above preview will break it and redirect to the meetings index page.
 
@@ -19,7 +20,7 @@ Note: Clicking on buttons in the above preview will break it and redirect to the
 When the query already has a matching filter value, the corresponding item is rendered as selected.
 You can also pass `orders` to define the sort order per value.
 
-<%= embed OpPrimer::QuickFilterPreview, :segmented_with_active_filter, panels: %i[source] %>
+<%= embed OpPrimer::QuickFilterPreview, :segmented_control_with_active_filter, panels: %i[source] %>
 
 Note: Clicking on buttons in the above preview will break it and redirect to the meetings index page.
 
@@ -33,7 +34,11 @@ Labels are provided via `true_label` and `false_label`.
 
 Note: Clicking on buttons in the above preview will break it and redirect to the meetings index page.
 
-## Parameters
+## SelectPanelComponent
 
-* `BooleanComponent` requires `true_label` and `false_label`.
-* `SegmentedControlComponent` accepts items via a block using `with_item(label:, value:)`.
+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.
+
+<%= 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.

lookbook/previews/op_primer/quick_filter_preview.rb

@@ -47,6 +47,12 @@ module OpPrimer
       render_with_template(locals: { query: })
     end
 
+    def select_panel_with_active_filter
+      query = meeting_query
+      query.where("project_id", "=", [Project.visible.first&.id.to_s].compact)
+      render_with_template(locals: { query: })
+    end
+
     private
 
     def meeting_query

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

@@ -0,0 +1,12 @@
+<%= render(
+      OpPrimer::QuickFilter::SelectPanelComponent.new(
+        name: "Project",
+        query: query,
+        filter_key: :project_id,
+        path_args: [:meetings]
+      )
+    ) do |component|
+      Project.visible.each do |project|
+        component.with_item(label: project.name, value: project.id)
+      end
+    end %>