sdr_view_components 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e251b4177b159e8978b41116e020d3d58d5f95071c6dbccd9b212d3751c9a118
-  data.tar.gz: be45e43ececfc02ed410b67844418c80371a28a1b89596a56630f3d81ce2df22
+  metadata.gz: 20d06b21754a66cf773ed738934dca7b897e95de724e6ca8fc70942f56a8bf1c
+  data.tar.gz: 605b5ae6c58e73324e9bdbbac7d53ff6e0ddf9d53b845c75393255d411ef701d
 SHA512:
-  metadata.gz: 638147ae953c62036f9553375bbac77530a7b6dfdc4dcd9243954b4bf702250a70a5953fb9b4444f2d1c5c249f45a797816a0def51f323c57d6fad91a57d566c
-  data.tar.gz: c7a3458363dfe0bc1000fb4b24ce6415fece60c20f3d06722c5f626204eff3582badefe1a9ab0696000aa949777484dbd3c6a50938762c1e600a8782d08907c8
+  metadata.gz: b99a2ffdfb693b1780e6b44b93a51d0ba6ab62e9958336056ccacd59fd5e4b5d063961bcfe55d688d0b5c907ea0fc323872808cdd52743c1dfe44b7ceb676a39
+  data.tar.gz: 17849d2bfd15fd3e540ed8a6e0307825c00efbf53143836c2547d10f5a812ac490b71b5ae0cb0007aced34068b68debfe9970449633d8005969018497869ba29

data/README.md

@@ -125,6 +125,10 @@ Each of the supported components above uses the provided "basic" components:
 
 At a minimum, each of these components must be provided wih the `form:` and `field_name:` parameters. Additionally, you can provide additional parameters that will be passed to the standard ActionView::Helpers::Tag.
 
+#### Fieldset component
+
+`SdrViewComponents::Forms::FieldsetComponent` renders a `<fieldset>` for grouping related fields (e.g. a set of checkboxes) that don't belong to a single bound form field. It supports a `label:` (or a `legend` slot for custom markup), `tooltip:`, `mark_required:`, `help_text:`, and a `help_link` slot. Any other keyword arguments (`id:`, `data:`, `aria:`, etc.) are passed through to the `<fieldset>` tag.
+
 ### Tab form components
 
 SdrViewComponents provides components for rendering a tabbed form, where a form's fields are split across tabs rather than shown all at once:

data/app/assets/sdr_view_components.css

@@ -56,6 +56,14 @@
   border-color: var(--stanford-60-black);
 }
 
+.form-label {
+  margin-bottom: 0;
+}
+
+fieldset.form-fieldset legend {
+  font-size: unset;
+}
+
 /* Tabs */
 .nav-underline {
   border-bottom: 1px solid black;

data/app/components/sdr_view_components/forms/fieldset_component.html.erb

@@ -0,0 +1,17 @@
+<%= tag.fieldset class: classes, **options do %>
+  <% if legend? || label %>
+    <%= tag.legend class: legend_classes do %>
+      <% if legend? %>
+        <%= legend %>
+      <% else %>
+        <%= tag.label class: label_classes do %><%= label %><% end %>
+      <% end %>
+      <%= render SdrViewComponents::Elements::TooltipComponent.new(target_label: label, tooltip:) %>
+      <%= help_link if help_link? %>
+      <% if help_text.present? %>
+        <p class="mb-2"><%= help_text %></p>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= content %>
+<% end %>

data/app/components/sdr_view_components/forms/fieldset_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for rendering a form fieldset.
+    class FieldsetComponent < BaseComponent
+      renders_one :legend # Provide legend or label
+      renders_one :help_link # Optional
+
+      def initialize(label: nil, hidden_label: false, classes: [], label_classes: [], legend_classes: [], # rubocop:disable Metrics/ParameterLists
+                     tooltip: nil, mark_required: false, help_text: nil, **options)
+        @label = label
+        @hidden_label = hidden_label
+        @classes = classes
+        @label_classes = label_classes
+        @legend_classes = legend_classes
+        @tooltip = tooltip
+        @options = options
+        @mark_required = mark_required
+        @help_text = help_text
+        super()
+      end
+
+      attr_reader :options, :tooltip, :mark_required, :help_text
+
+      def label_classes
+        merge_classes(@label_classes, @hidden_label ? 'visually-hidden' : 'form-label fw-bold')
+      end
+
+      def label
+        mark_label_required(label: @label, mark_required:) if @label.present?
+      end
+
+      def classes
+        merge_classes('form-fieldset', @classes)
+      end
+
+      def legend_classes
+        merge_classes(@legend_classes)
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/forms/has_one_component.html.erb

@@ -0,0 +1,7 @@
+<%= render SdrViewComponents::Forms::FieldsetComponent.new(**fieldset_args) do %>
+  <%= tag.div class: 'mb-3' do %>
+    <%= form.fields_for field_name do |nested_form| %>
+      <%= render form_component.new(form: nested_form, **form_component_args) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/sdr_view_components/forms/has_one_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Encapsulates a has_one (non-repeatable) form.
+    class HasOneComponent < BaseComponent
+      def initialize(form:, field_name:, form_component:, **args)
+        @form = form
+        @field_name = field_name
+        @form_component = form_component
+        @args = args
+        super()
+      end
+
+      attr_reader :form, :field_name, :form_component, :args
+
+      # Returns a hash of arguments for the fieldset component.
+      # Includes argument prefixed with 'fieldset_'.
+      def fieldset_args
+        args_for(args:, prefix: 'fieldset_')
+      end
+
+      # Returns a hash of arguments for the form component.
+      # Includes argument prefixed with 'form_'.
+      def form_component_args
+        args_for(args:, prefix: 'form_')
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/tab_form/tabbed_form_builder.rb

@@ -14,7 +14,7 @@ module SdrViewComponents
     # created via `fields_for`, by falling back to the parent builder's `id`. Rails' `fields_for`
     # doesn't otherwise propagate the `html: { id: }` option to nested builders.
     class TabbedFormBuilder < ActionView::Helpers::FormBuilder
-      FIELD_METHODS = %i[text_field email_field textarea text_area hidden_field file_field radio_button checkbox
+      FIELD_METHODS = %i[text_field email_field textarea text_area hidden_field file_field radio_button check_box
                          date_field].freeze
 
       FIELD_METHODS.each do |field_method|

data/lib/sdr_view_components/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SdrViewComponents
-  VERSION = '0.6.0'
+  VERSION = '0.7.0'
 end

data/spec/components/previews/sdr_view_components/forms/checkbox_component_preview/with_validation_error.html.erb

@@ -1,4 +1,5 @@
 <% model = SdrViewComponents::Forms::CheckboxComponentPreview::CheckboxPreviewModel.new(test_boolean_field: false) %>
+<% model.valid? %>
 
 <%= form_with(model: model, url: '/example') do |form| %>
   <%= render SdrViewComponents::Forms::CheckboxComponent.new(

data/spec/components/previews/sdr_view_components/forms/fieldset_component_preview/default.html.erb

@@ -0,0 +1,10 @@
+<%= render SdrViewComponents::Forms::FieldsetComponent.new(label: 'Contributors') do %>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" id="contributor1" name="contributor1">
+    <label class="form-check-label" for="contributor1">Jane Stanford</label>
+  </div>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" id="contributor2" name="contributor2">
+    <label class="form-check-label" for="contributor2">Leland Stanford</label>
+  </div>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/fieldset_component_preview/hidden_label.html.erb

@@ -0,0 +1,6 @@
+<%= render SdrViewComponents::Forms::FieldsetComponent.new(label: 'Contributors', hidden_label: true) do %>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" id="contributor1" name="contributor1">
+    <label class="form-check-label" for="contributor1">Jane Stanford</label>
+  </div>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/fieldset_component_preview/mark_required.html.erb

@@ -0,0 +1,6 @@
+<%= render SdrViewComponents::Forms::FieldsetComponent.new(label: 'Contributors', mark_required: true) do %>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" id="contributor1" name="contributor1">
+    <label class="form-check-label" for="contributor1">Jane Stanford</label>
+  </div>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/fieldset_component_preview/with_help_link.html.erb

@@ -0,0 +1,9 @@
+<%= render SdrViewComponents::Forms::FieldsetComponent.new(label: 'Contributors') do |component| %>
+  <% component.with_help_link do %>
+    <a href="#" class="ms-2">What is a contributor?</a>
+  <% end %>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" id="contributor1" name="contributor1">
+    <label class="form-check-label" for="contributor1">Jane Stanford</label>
+  </div>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/fieldset_component_preview/with_help_text.html.erb

@@ -0,0 +1,9 @@
+<%= render SdrViewComponents::Forms::FieldsetComponent.new(
+      label: 'Contributors',
+      help_text: 'Add every contributor who created this resource.'
+    ) do %>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" id="contributor1" name="contributor1">
+    <label class="form-check-label" for="contributor1">Jane Stanford</label>
+  </div>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/fieldset_component_preview/with_legend_slot.html.erb

@@ -0,0 +1,9 @@
+<%= render SdrViewComponents::Forms::FieldsetComponent.new do |component| %>
+  <% component.with_legend do %>
+    <span class="form-label fw-bold">Contributors <em>(custom legend markup)</em></span>
+  <% end %>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" id="contributor1" name="contributor1">
+    <label class="form-check-label" for="contributor1">Jane Stanford</label>
+  </div>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/fieldset_component_preview/with_tooltip.html.erb

@@ -0,0 +1,9 @@
+<%= render SdrViewComponents::Forms::FieldsetComponent.new(
+      label: 'Contributors',
+      tooltip: 'Select every contributor who created this resource.'
+    ) do %>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" id="contributor1" name="contributor1">
+    <label class="form-check-label" for="contributor1">Jane Stanford</label>
+  </div>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/fieldset_component_preview.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    class FieldsetComponentPreview < ViewComponent::Preview
+      def default; end
+
+      # @!group Label options
+      def hidden_label; end
+
+      def mark_required; end
+
+      def with_tooltip; end
+
+      def with_legend_slot; end
+      # @!endgroup
+
+      # @!group Help
+      def with_help_text; end
+
+      def with_help_link; end
+      # @!endgroup
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/forms/radio_button_component_preview/with_validation_error.html.erb

@@ -1,4 +1,5 @@
 <% model = SdrViewComponents::Forms::RadioButtonComponentPreview::RadioButtonPreviewModel.new(delivery_method: nil) %>
+<% model.valid? %>
 
 <%= form_with(model: model, url: '/example') do |form| %>
   <%= render SdrViewComponents::Forms::RadioButtonComponent.new(

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sdr_view_components
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.0
 platform: ruby
 authors:
 - Aaron Collier
@@ -117,7 +117,11 @@ files:
 - app/components/sdr_view_components/forms/checkbox_component.rb
 - app/components/sdr_view_components/forms/field_component.html.erb
 - app/components/sdr_view_components/forms/field_component.rb
+- app/components/sdr_view_components/forms/fieldset_component.html.erb
+- app/components/sdr_view_components/forms/fieldset_component.rb
 - app/components/sdr_view_components/forms/file_component.rb
+- app/components/sdr_view_components/forms/has_one_component.html.erb
+- app/components/sdr_view_components/forms/has_one_component.rb
 - app/components/sdr_view_components/forms/help_text_component.html.erb
 - app/components/sdr_view_components/forms/help_text_component.rb
 - app/components/sdr_view_components/forms/invalid_feedback_component.rb
@@ -242,6 +246,14 @@ files:
 - spec/components/previews/sdr_view_components/forms/checkbox_component_preview/with_help_text.html.erb
 - spec/components/previews/sdr_view_components/forms/checkbox_component_preview/with_label.html.erb
 - spec/components/previews/sdr_view_components/forms/checkbox_component_preview/with_validation_error.html.erb
+- spec/components/previews/sdr_view_components/forms/fieldset_component_preview.rb
+- spec/components/previews/sdr_view_components/forms/fieldset_component_preview/default.html.erb
+- spec/components/previews/sdr_view_components/forms/fieldset_component_preview/hidden_label.html.erb
+- spec/components/previews/sdr_view_components/forms/fieldset_component_preview/mark_required.html.erb
+- spec/components/previews/sdr_view_components/forms/fieldset_component_preview/with_help_link.html.erb
+- spec/components/previews/sdr_view_components/forms/fieldset_component_preview/with_help_text.html.erb
+- spec/components/previews/sdr_view_components/forms/fieldset_component_preview/with_legend_slot.html.erb
+- spec/components/previews/sdr_view_components/forms/fieldset_component_preview/with_tooltip.html.erb
 - spec/components/previews/sdr_view_components/forms/file_component_preview.rb
 - spec/components/previews/sdr_view_components/forms/file_component_preview/default.html.erb
 - spec/components/previews/sdr_view_components/forms/file_component_preview/with_additional_container_content.html.erb