sdr_view_components 0.1.0

data/app/components/sdr_view_components/elements/skip_links_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    # Skip links for accessibility
+    class SkipLinksComponent < BaseComponent; end
+  end
+end

data/app/components/sdr_view_components/elements/toast_component.html.erb

@@ -0,0 +1,40 @@
+    <style>
+      .toast:not(.show) {
+        display: block;
+      }
+    </style>
+    <div class="toast-container position-relative bottom-0 end-0 p-3">
+      <div
+        class="toast align-items-center"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div class="<%= toast_class %>">
+          <div class="d-flex">
+            <div
+              class="bi bi-exclamation-circle-fill fs-3 me-3 align-self-center d-flex justify-content-center"
+            ></div>
+            <div>
+              <div class="fw-semibold"><%= title %> </div>
+              <div><%= text %></div>
+            </div>
+            <div class="me-2 m-auto">
+              <% if close_text.present? %>
+                <button
+                  type="button"
+                  class="btn btn-text text-uppercase text-white"
+                >
+                  <%= close_text %>
+                </button>
+              <% end %>
+              <button
+                type="button"
+                class="btn btn-close btn-close-white"
+                aria-label="Close"
+              ></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>

data/app/components/sdr_view_components/elements/toast_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    # Component for rendering a toast element.
+    class ToastComponent < BaseComponent
+      def initialize(title:, text:, close_text: nil, variant: :black)
+        @title = title
+        @text = text
+        @close_text = close_text
+        @variant = variant
+        super()
+      end
+
+      attr_reader :title, :text, :close_text, :variant
+
+      def toast_class
+        merge_classes([background_color], %w[toast-body text-white])
+      end
+
+      def background_color
+        case variant
+        when :red
+          'bg-stanford-cardinal'
+        when :green
+          'bg-stanford-digital-green'
+        when :poppy
+          'bg-poppy-dark'
+        else
+          'bg-stanford-black'
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/tooltip_component.html.erb

@@ -0,0 +1,11 @@
+<%= tag.a(
+      role: 'button',
+      tabindex: 0,
+      class: 'px-2 tooltip-info',
+      aria: {
+        label: "More information for #{target_label}"
+      },
+      data:
+    ) do %>
+  <%= helpers.info_icon(fill: true) %>
+<% end %>

data/app/components/sdr_view_components/elements/tooltip_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    # Component for rendering a tooltip.
+    class TooltipComponent < BaseComponent
+      def initialize(target_label:, tooltip: nil)
+        @target_label = target_label
+        @tooltip = tooltip
+        super()
+      end
+
+      private
+
+      attr_reader :tooltip, :target_label
+
+      def render?
+        tooltip.present?
+      end
+
+      def data # rubocop:disable Metrics/MethodLength
+        {
+          bs_html: true,
+          bs_toggle: 'tooltip',
+          bs_title: tooltip,
+          bs_trigger: 'focus',
+          tooltips_target: 'icon'
+        }.tap do |data|
+          if Settings.ahoy.tooltip
+            data[:controller] = 'ahoy-tooltip'
+            data[:ahoy_tooltip_label_value] = target_label
+            # Note that this is only tracking tooltip when shown by clicking, not when shown by focus.
+            data[:action] = 'click->ahoy-tooltip#track'
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for form checkbox field
+    class BasicCheckboxComponent < BaseComponent
+      def initialize(form:, field_name:, data: nil, **args)
+        @form = form
+        @field_name = field_name
+        @args = args
+        @data = data
+        super()
+      end
+
+      attr_reader :args, :data, :form, :field_name, :value
+
+      def call
+        form.check_box field_name, data:, **args
+      end
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for a button that is wrapped in a form
+    class ButtonComponent < BaseComponent
+      def initialize(link:, label: nil, variant: :primary, classes: [], method: :get, confirm: nil, # rubocop:disable Metrics/ParameterLists
+                     top: true, data: {})
+        @link = link
+        @label = label
+        @variant = variant
+        @classes = classes
+        @method = method
+        @confirm = confirm
+        @top = top
+        @data = data
+        super()
+      end
+
+      attr_reader :link
+
+      def call
+        button_to(link, method: @method,
+                        class: ComponentSupport::ButtonSupport.classes(variant: @variant, classes:),
+                        form: { data: }) do
+          @label || content
+        end
+      end
+
+      def classes
+        merge_classes(@classes)
+      end
+
+      def data
+        @data.tap do |data|
+          data[:turbo_frame] = '_top' if @top
+          data[:turbo_confirm] = @confirm if @confirm
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<%= tag.div container_args do %>
+  <%= render SdrViewComponents::Forms::BasicCheckboxComponent.new(form:, field_name:, data:, **input_args) %>
+  <%= render SdrViewComponents::Forms::LabelComponent.new(form:, field_name:, **label_args) %>
+  <%= render SdrViewComponents::Forms::HelpTextComponent.new(**help_text_args) %>
+  <%= render SdrViewComponents::Forms::InvalidFeedbackComponent.new(form:, field_name:) %>
+<% end %>

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for form checkbox field
+    class CheckboxComponent < FieldComponent
+      def initialize(**args)
+        args[:container_class] = merge_classes('form-check', args[:container_class])
+        args[:input_class] = merge_classes('form-check-input', args[:input_class])
+        args[:label_default_class] = merge_classes('form-check-label', args[:input_class])
+        super
+      end
+
+      attr_reader :value
+
+      # The component must implement a `default_component` method in order
+      # to render in the component slot of the FieldComponent.
+      def default_component
+        render SdrViewComponents::Forms::BasicCheckboxComponent.new(form:, field_name:, data:, **input_args)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<%= tag.div container_args do %>
+  <%= component %>
+  <%= render SdrViewComponents::Forms::LabelComponent.new(form:, field_name:, **label_args) %>
+  <%= render SdrViewComponents::Forms::HelpTextComponent.new(**help_text_args) %>
+  <%= render SdrViewComponents::Forms::InvalidFeedbackComponent.new(form:, field_name:) %>
+<% end %>

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

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Base component for all form fields.
+    class FieldComponent < BaseComponent
+      renders_one :component
+
+      def initialize(**args)
+        @args = args
+        super()
+      end
+
+      attr_reader :args
+
+      def input_args
+        args_for(args:, prefix: 'input_').merge({ aria: field_aria, data: })
+      end
+
+      def container_args
+        args_for(args:, prefix: 'container_')
+      end
+
+      def data
+        @data ||= args.delete(:data) || {}
+      end
+
+      def error_aria
+        InvalidFeedbackSupport.arias_for(field_name:, form:).tap do |arias|
+          arias[:describedby] = merge_actions(arias[:describedby], help_text_id) if help_text_args[:text].present?
+        end
+      end
+
+      def error_classes
+        merge_classes(args.fetch(:error_classes, []))
+      end
+
+      def field_aria
+        error_aria.tap do |arias|
+          # Set aria-required if we want to indicate required, but the field
+          # does not actually have a required attribute
+          #
+          # This is used for collection/work forms where we do server-side
+          # validation and don't want to block form submission on empty fields
+          arias[:required] = true if @mark_required
+        end
+      end
+
+      def field_name
+        @field_name ||= args.delete(:field_name)
+      end
+
+      def form
+        @form ||= args.delete(:form)
+      end
+
+      def help_text_args
+        args_for(args:, prefix: 'help_').merge({
+                                                 id: help_text_id
+                                               })
+      end
+
+      def help_text_id
+        @help_text_id ||= form.field_id(field_name, 'help')
+      end
+
+      def label_args
+        args_for(args:, prefix: 'label_')
+      end
+
+      delegate :id, to: :form, prefix: true
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div>
+    <%= tag.p id:, class: 'form-text' do %><%= text || content %><% end %>
+</div>

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# Component for rendering help text for form fields.
+module SdrViewComponents
+  module Forms
+    # Component for rendering help text for form fields.
+    class HelpTextComponent < BaseComponent
+      # this component can take plain text via 'help_text' or a block (which can contain html)
+      # it will render the help_text if provided, else it will render the block content
+      def initialize(id:, text: nil)
+        @text = text
+        @id = id
+        super()
+      end
+
+      attr_reader :text, :id
+
+      def render?
+        text.present? || content.present?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for rendering invalid feedback for a form field.
+    class InvalidFeedbackComponent < BaseComponent
+      def initialize(field_name:, form:, classes: [], data: {})
+        @field_name = field_name
+        @form = form
+        @classes = classes
+        @data = data
+        super()
+      end
+
+      attr_reader :field_name, :form, :data
+
+      def call
+        tag.div(class: classes, id:, data:) do
+          errors.join(', ')
+        end
+      end
+
+      def render?
+        field_name.present? && errors.present?
+      end
+
+      private
+
+      def id
+        InvalidFeedbackSupport.id_for(field_name:, form:)
+      end
+
+      def errors
+        @errors ||= form.object&.errors&.[](field_name)
+      end
+
+      def classes
+        # Adding is-invalid to trigger the tab error.
+        merge_classes(%w[invalid-feedback is-invalid d-block], @classes)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Methods to support invalid feedback for form fields.
+    class InvalidFeedbackSupport
+      def self.id_for(field_name:, form:)
+        form.field_id(field_name, 'error')
+      end
+
+      def self.arias_for(field_name:, form:)
+        return {} if field_name.nil? || form.object&.errors&.[](field_name).blank?
+
+        {
+          invalid: true,
+          describedby: id_for(field_name:, form:)
+        }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<%= form.label field_name, class: classes do %>
+  <%= content || text %>
+<% end %>
+<%# This is outside the label so that clicking on it doesn't toggle some inputs like checkboxes. %>
+<%= render SdrViewComponents::Elements::TooltipComponent.new(target_label: text, tooltip:) %>
+<%= tag.span { caption } if caption %>

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for rendering a form label.
+    class LabelComponent < BaseComponent
+      def initialize(form:, field_name:, text: nil, default_class: 'form-label', hidden: false, # rubocop:disable Metrics/ParameterLists
+                     classes: [], tooltip: nil, caption: nil)
+        @form = form
+        @text = text
+        @field_name = field_name
+        @hidden = hidden
+        @default_class = default_class
+        @classes = classes
+        @tooltip = tooltip
+        @caption = caption
+        super()
+      end
+
+      attr_reader :field_name, :form, :tooltip, :caption
+
+      def text
+        return field_name if @text.blank?
+
+        @text
+      end
+
+      def classes
+        merge_classes(@default_class, @classes, @hidden ? 'visually-hidden' : nil)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= tag.button type: 'submit', form: form_id, class: classes, name: 'commit', value:, **options do %>
+  <%= label || content %>
+<% end %>

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for a form submit button
+    class SubmitComponent < BaseComponent
+      def initialize(label: nil, value: nil, form_id: nil, variant: :primary, classes: [], **options) # rubocop:disable Metrics/ParameterLists
+        # Either provide label OR value and content
+        @form_id = form_id
+        @label = label
+        @variant = variant
+        @options = options
+        @classes = classes
+        @value = value || label
+        super()
+      end
+
+      attr_reader :form, :label, :options, :form_id, :value
+
+      def classes
+        ComponentSupport::ButtonSupport.classes(variant: @variant, classes: @classes)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+<%= tag.div **container_args do %>
+  <div class="d-flex"> <%# Aligns label and tooltip %>
+    <%= render SdrViewComponents::Forms::LabelComponent.new(form:, field_name:, **label_args) %>
+  </div>
+  <div class="btn-group btn-group-toggle" role="group">
+    <%= left_toggle_option %>
+    <%= right_toggle_option %>
+  </div>
+  <%= render SdrViewComponents::Forms::InvalidFeedbackComponent.new(form:, field_name:) %>
+<% end %>

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for a toggle-like radio button group field
+    class ToggleComponent < FieldComponent
+      renders_one :left_toggle_option, lambda { |**args|
+        Forms::ToggleOptionComponent.new(position: :left, **args)
+      }
+      renders_one :right_toggle_option, lambda { |**args|
+        Forms::ToggleOptionComponent.new(position: :right, **args)
+      }
+
+      def initialize(form:, field_name:, **args)
+        @form = form
+        @field_name = field_name
+        args[:label_classes] = merge_classes('d-block', args[:label_classes])
+        super
+      end
+
+      attr_reader :form, :field_name
+    end
+  end
+end

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

@@ -0,0 +1,2 @@
+<%= form.radio_button field_name, value, type: 'radio', class: 'btn-check', data: %>
+<%= form.label field_name, label, value:, class: label_classes %>

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for a toggle option
+    class ToggleOptionComponent < BaseComponent
+      def initialize(form:, field_name:, label:, value:, data: {}, position: :left) # rubocop:disable Metrics/ParameterLists
+        raise ArgumentError, 'position must be :left or :right' unless %i[left right].include?(position)
+
+        @form = form
+        @field_name = field_name
+        @label = label
+        @value = value
+        @data = data
+        @position = position
+        super()
+      end
+
+      attr_reader :form, :field_name, :label, :value, :data
+
+      def label_classes
+        merge_classes('btn', @position == :left ? 'rounded-start-pill' : 'rounded-end-pill')
+      end
+    end
+  end
+end