sdr_view_components 0.6.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e251b4177b159e8978b41116e020d3d58d5f95071c6dbccd9b212d3751c9a118
-  data.tar.gz: be45e43ececfc02ed410b67844418c80371a28a1b89596a56630f3d81ce2df22
+  metadata.gz: 2a7f0502701fd4d8fa40f595c582e8d3639edd747efabae9a9453386b23c3bff
+  data.tar.gz: 17b95f5d8d01a6af4af3dbb8a0d15b9a843a03e44ab8428793de0fae84dcaf79
 SHA512:
-  metadata.gz: 638147ae953c62036f9553375bbac77530a7b6dfdc4dcd9243954b4bf702250a70a5953fb9b4444f2d1c5c249f45a797816a0def51f323c57d6fad91a57d566c
-  data.tar.gz: c7a3458363dfe0bc1000fb4b24ce6415fece60c20f3d06722c5f626204eff3582badefe1a9ab0696000aa949777484dbd3c6a50938762c1e600a8782d08907c8
+  metadata.gz: 6411da75700daee1d917a8bd7bdc47cdebe312af9d63b535a974d5114fee4697024532d7b31fa95150b5f4fa438897df0e97a7500dddfef7907e05a5b0fc1aa8
+  data.tar.gz: 4a062e6024b31b4c83439615ecfd6533f293b8798d36327c3dca1280a56ac9e041b205a2e92f6509ba4d5deb78ff460cfc4593ded78feddd4f46395267459ee3

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:
@@ -185,6 +189,37 @@ See the Lookbook preview for `SdrViewComponents::TabForm::TabListComponent` for
 <% render SdrViewComponent::....>
 ```
 
+### Navigation components
+
+SdrViewComponents provides components for building navigation bar items and dropdown menus:
+
+- `SdrViewComponents::Elements::Navigation::NavItemComponent` -- a single navigation link (or plain text, if no `path:` is given).
+- `SdrViewComponents::Elements::Navigation::DropdownMenuComponent` -- a Bootstrap dropdown menu. Items are added via `with_item`, and can be any renderable object -- typically one of the components below.
+- `SdrViewComponents::Elements::Navigation::DropdownLinkComponent` -- a link within a dropdown menu (renders with the `dropdown-item` class via `link_to`). Accepts `label:`, `link:`, `classes:`, `disabled:` (adds the `disabled` class), and any additional options passed on to `link_to`.
+- `SdrViewComponents::Elements::Navigation::DropdownHeaderComponent` -- a non-interactive section label within a dropdown menu.
+- `SdrViewComponents::Elements::Navigation::DropdownDividerComponent` -- a horizontal divider between groups of items within a dropdown menu.
+
+```erb
+<ul class="navbar-nav">
+  <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Home', path: '/') %>
+
+  <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Options') do |dropdown| %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownHeaderComponent.new(text: 'Section 1') %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Action', link: '#') %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownDividerComponent.new %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Another action', link: '#') %>
+    <% end %>
+  <% end %>
+</ul>
+```
+
 ## Component library version
 The [component-library](https://github.com/sul-dlss/component-library/) version is set in `lib/sdr_view_components/configuration.rb`.
 

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/elements/navigation/dropdown_divider_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Navigation
+      # Component for rendering a divider within a dropdown menu.
+      class DropdownDividerComponent < BaseComponent
+        def initialize(classes: [])
+          @classes = classes
+          super()
+        end
+
+        def call
+          tag.hr class: classes
+        end
+
+        def classes
+          merge_classes('dropdown-divider', @classes)
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/navigation/dropdown_header_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Navigation
+      # Component for rendering a header within a dropdown menu.
+      class DropdownHeaderComponent < BaseComponent
+        def initialize(text:, classes: [])
+          @text = text
+          @classes = classes
+          super()
+        end
+
+        attr_reader :text
+
+        def call
+          tag.span text, class: classes, role: 'heading'
+        end
+
+        def classes
+          merge_classes('dropdown-header', @classes)
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/navigation/dropdown_link_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Navigation
+      # Component for rendering a link within a dropdown menu.
+      class DropdownLinkComponent < BaseComponent
+        def initialize(label:, link:, classes: [], disabled: false, **options)
+          @label = label
+          @link = link
+          @classes = classes
+          @disabled = disabled
+          @options = options
+          super()
+        end
+
+        attr_reader :label, :link, :disabled
+
+        def call
+          link_to label, link, class: classes, **@options
+        end
+
+        def classes
+          merge_classes('dropdown-item', disabled ? 'disabled' : nil, @classes)
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/navigation/nav_item_component.rb

@@ -5,10 +5,11 @@ module SdrViewComponents
     module Navigation
       # Component for navigation item link.
       class NavItemComponent < BaseComponent
-        def initialize(text:, path: nil, data: {})
+        def initialize(text:, path: nil, data: {}, classes: [])
           @text = text
           @path = path
           @data = data
+          @classes = classes
           super()
         end
 
@@ -17,12 +18,16 @@ module SdrViewComponents
         def call
           tag.li class: 'nav-item' do
             if path.present?
-              link_to text, path, class: 'nav-link', data:
+              link_to text, path, class: classes, data:
             else
-              tag.span text, class: 'nav-link'
+              tag.span text, class: classes
             end
           end
         end
+
+        def classes
+          merge_classes('nav-link', @classes)
+        end
       end
     end
   end

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.8.0'
 end

data/spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview/default.html.erb

@@ -0,0 +1,10 @@
+<ul class="navbar-nav">
+  <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Options') do |dropdown| %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Action', link: '#') %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Another action', link: '#') %>
+    <% end %>
+  <% end %>
+</ul>

data/spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview/with_header_and_divider.html.erb

@@ -0,0 +1,16 @@
+<ul class="navbar-nav">
+  <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Options') do |dropdown| %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownHeaderComponent.new(text: 'Section 1') %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Action', link: '#') %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownDividerComponent.new %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Another action', link: '#') %>
+    <% end %>
+  <% end %>
+</ul>

data/spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Navigation
+      class DropdownMenuComponentPreview < ViewComponent::Preview
+        def default; end
+
+        def with_header_and_divider; end
+      end
+    end
+  end
+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.8.0
 platform: ruby
 authors:
 - Aaron Collier
@@ -88,6 +88,9 @@ files:
 - app/components/sdr_view_components/elements/modal_component.rb
 - app/components/sdr_view_components/elements/nav_link_component.html.erb
 - app/components/sdr_view_components/elements/nav_link_component.rb
+- app/components/sdr_view_components/elements/navigation/dropdown_divider_component.rb
+- app/components/sdr_view_components/elements/navigation/dropdown_header_component.rb
+- app/components/sdr_view_components/elements/navigation/dropdown_link_component.rb
 - app/components/sdr_view_components/elements/navigation/dropdown_menu_component.html.erb
 - app/components/sdr_view_components/elements/navigation/dropdown_menu_component.rb
 - app/components/sdr_view_components/elements/navigation/nav_item_component.rb
@@ -117,7 +120,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
@@ -197,6 +204,9 @@ files:
 - spec/components/previews/sdr_view_components/elements/modal_component_preview/default.html.erb
 - spec/components/previews/sdr_view_components/elements/modal_component_preview/with_header_and_footer.html.erb
 - spec/components/previews/sdr_view_components/elements/modal_component_preview/without_size.html.erb
+- spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview.rb
+- spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview/default.html.erb
+- spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview/with_header_and_divider.html.erb
 - spec/components/previews/sdr_view_components/elements/progress_bar_component_preview.rb
 - spec/components/previews/sdr_view_components/elements/spinner_component_preview.rb
 - spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview.rb
@@ -242,6 +252,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