sdr_view_components 0.2.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b973a9d37ca8cbaf8923757222f1e73ae754a72ca99731008c68d22c7be41f28
-  data.tar.gz: 6014055eb861360362ee8527f5f7d2afba60665428720df0e095982af8aa9c46
+  metadata.gz: 3a3b49086535a4be91b25b4f4a5b68f51c72fd2478f5fc72d54c2b77afe5f7cf
+  data.tar.gz: dff1e70705204abaf6202df28826379dd8993d584445506e39f905250fed4795
 SHA512:
-  metadata.gz: ec8945789ecbc351308b32e6f7df8600e8b43d9bfe92ef9bd4013279b69a20a0eeebf5f4ea6cf6fb36946690a5564020e57e268826a145c1a0911d9cd1aad796
-  data.tar.gz: d5fe578fc6d4c376408b315536cf97d538dd19c466785e73472266d402663d95150f2ae5e7fe9095989e1c39bac616c88582067282863d893a3eebbfa35e2c1a
+  metadata.gz: a34d248d460b3af61fdb39db821d45620e5444defed6de2505f260cce700b3c6babb9000d10063b98e59a52a171b2df7ca0162bbac8476648efa28b2ee008993
+  data.tar.gz: ed9d2ef885985c68e38f640ce30a67382be3cb9f258ac3d03946d896fdcaa651f09acd7059482b3a7f006163730748375a712f498e89832bd87dbe838a293292

data/Rakefile

@@ -6,10 +6,36 @@ APP_RAKEFILE = File.expand_path('spec/dummy/Rakefile', __dir__)
 load 'rails/tasks/engine.rake'
 
 require 'bundler/gem_tasks'
-require 'rspec/core/rake_task'
-require 'rubocop/rake_task'
 
-RuboCop::RakeTask.new
-RSpec::Core::RakeTask.new(:spec)
+begin
+  require 'rubocop/rake_task'
+  RuboCop::RakeTask.new
 
-task default: %i[rubocop spec]
+  desc 'Run erblint against ERB files'
+  task erblint: :environment do
+    puts 'Running ERB linter...'
+    sh('bin/erb_lint --lint-all --format compact')
+  end
+
+  desc 'Run linter against style files'
+  task stylelint: :environment do
+    puts 'Running style linter...'
+    sh('yarn run stylelint')
+  end
+
+  desc 'Run herb against ERB files'
+  task herb: :environment do
+    puts 'Running ERB linter...'
+    sh('bin/herb analyze app --no-timing')
+  end
+
+  desc 'Run all configured linters'
+  task lint: %i[rubocop erblint herb]
+
+  # clear the default task injected by rspec
+  task(:default).clear
+
+  task default: %i[lint spec] # rubocop:disable Rake/DuplicateTask
+rescue LoadError
+  # should only be here when gem group development and test aren't installed
+end

data/app/assets/sdr_view_components.css

@@ -67,7 +67,7 @@
 }
 
 .nav-underline .nav-link:not(.active) {
-  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+  color: rgb(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
 }
 
 .nav-underline .nav-link.active {
@@ -108,3 +108,33 @@ table.table-data th {
   width: fit-content;
   white-space: nowrap;
 }
+
+/* Radio buttons */
+
+/* Inputs / labels are rendered in the opposite order than BS styles expect. */
+.form-check-label:has(+ .form-check-input:disabled), .form-check-label:has(+ .form-check-input[disabled]) {
+	cursor: default;
+	opacity: .5;
+}
+
+/* Toasts */
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+    max-height: 200px;
+    visibility: visible;
+  }
+  79%  { opacity: 1; }
+  80%  { max-height: 200px; }
+
+  100% {
+    opacity: 0;
+    max-height: 0;
+    visibility: hidden;
+  }
+}
+
+.toast-disappear {
+  animation: fade-out 5s ease-in forwards;
+}
+

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

@@ -1,14 +1,8 @@
-<div
-  class="toast align-items-center show"
-  role="alert"
-  aria-live="assertive"
-  aria-atomic="true"
->
+<%= tag.div class: classes, role: 'alert', aria: { live: 'assertive', atomic: 'true' } do %>
   <%= tag.div class: toast_body_classes do %>
     <div class="d-flex">
       <div
-        class="bi bi-exclamation-circle-fill fs-3 me-3 align-self-center d-flex justify-content-center"
-      ></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>
         <% if text.present? %>
@@ -19,8 +13,7 @@
         <% if close_text.present? %>
           <button
             type="button"
-            class="btn btn-text text-uppercase text-white"
-          >
+            class="btn btn-text text-uppercase text-white">
             <%= close_text %>
           </button>
         <% end %>
@@ -28,9 +21,8 @@
           type="button"
           class="btn btn-close btn-close-white"
           aria-label="Close"
-          data-bs-dismiss="toast"
-        ></button>
+          data-bs-dismiss="toast"></button>
       </div>
     </div>
   <% end %>
-</div>
+<% end %>

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

@@ -4,15 +4,20 @@ module SdrViewComponents
   module Elements
     # Component for rendering a toast element.
     class ToastComponent < BaseComponent
-      def initialize(title:, text: nil, close_text: nil, variant: :black)
+      def initialize(title:, text: nil, close_text: nil, variant: :black, disappearing: false)
         @title = title
         @text = text
         @close_text = close_text
         @variant = variant
+        @disappearing = disappearing
         super()
       end
 
-      attr_reader :title, :text, :close_text, :variant
+      attr_reader :title, :text, :close_text, :variant, :disappearing
+
+      def classes
+        merge_classes('toast align-items-center show', ('toast-disappear' if disappearing))
+      end
 
       def toast_body_classes
         merge_classes([background_color], %w[toast-body text-white])

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for form select field
+    class BasicSelectFieldComponent < BasicComponent
+      def initialize(form:, field_name:, options:, prompt: false, classes: [], **args) # rubocop:disable Metrics/ParameterLists
+        @options = options
+        @prompt = prompt
+        super(form:, field_name:, classes:, **args)
+      end
+
+      attr_reader :options, :prompt
+
+      def call
+        form.select field_name, options, { prompt: }, { class: classes, **args }
+      end
+
+      def classes
+        merge_classes('form-select', @classes)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for form select fields
+    class SelectFieldComponent < FieldComponent
+      def initialize(options:, prompt: false, **)
+        @options = options
+        @prompt = prompt
+        super(**)
+      end
+
+      attr_reader :options, :prompt
+
+      def input_component
+        SdrViewComponents::Forms::BasicSelectFieldComponent.new(form:, field_name:, options:, prompt:, **input_args)
+      end
+    end
+  end
+end

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

@@ -1,4 +1,4 @@
-<%= tag.div **container_args do %>
+<%= tag.div(**container_args) do %>
   <div class="d-flex"> <%# Aligns label and tooltip %>
     <%= render SdrViewComponents::Forms::LabelComponent.new(form:, field_name:, **label_args) %>
   </div>

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

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

data/app/components/sdr_view_components/tables/row_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.tr **row_options do %>
+<%= tag.tr(**row_options) do %>
   <% if label.present? || label_content.present? %>
     <th class="col-3" scope="row">
       <%= label || label_content %>

data/app/views/layouts/lookbook.html.erb

@@ -27,8 +27,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"
->
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
     <%= tag.link rel: 'icon', href: "#{SdrViewComponents.configuration.component_library_url}/styles/icon.png", type: 'image/png' %>
     <%= tag.link rel: 'icon', href: "#{SdrViewComponents.configuration.component_library_url}/styles/icon.svg", type: 'image/svg+xml' %>
     <%= tag.link rel: 'apple-touch-icon', href: "#{SdrViewComponents.configuration.component_library_url}/styles/icon.png" %>

data/lib/sdr_view_components/version.rb

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

data/spec/components/previews/sdr_view_components/elements/toast_component_preview/disappearing.html.erb

@@ -0,0 +1,5 @@
+<%= render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Non-Disappearing Toast text') %>
+
+<%= render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Disappearing Toast text. Wait 5 secs.', disappearing: true, variant: :green) %>
+
+<%= render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Non-Disappearing Toast text') %>

data/spec/components/previews/sdr_view_components/elements/toast_component_preview.rb

@@ -21,6 +21,8 @@ module SdrViewComponents
       end
       # @!endgroup
 
+      def disappearing; end
+
       def with_close_text
         render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Black Toast text', close_text: 'Undo')
       end

data/spec/components/previews/sdr_view_components/elements/tooltip_component_preview/default.html.erb

@@ -1,7 +1,7 @@
 <%= render SdrViewComponents::Elements::TooltipComponent.new(
-  target_label: 'Collection title',
-  tooltip: 'Use the public collection title shown to repository users.'
-) %>
+      target_label: 'Collection title',
+      tooltip: 'Use the public collection title shown to repository users.'
+    ) %>
 
 <script>
   window.addEventListener('load', () => {

data/spec/components/previews/sdr_view_components/forms/basic/basic_checkbox_component_preview/checked.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/example', scope: :preferences) do |form| %>
   <%= render SdrViewComponents::Forms::BasicCheckboxComponent.new(
-    form: form,
-    field_name: :receive_updates,
-    checked: true
-  ) %>
+        form: form,
+        field_name: :receive_updates,
+        checked: true
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_checkbox_component_preview/default.html.erb

@@ -1,6 +1,6 @@
 <%= form_with(url: '/example', scope: :preferences) do |form| %>
   <%= render SdrViewComponents::Forms::BasicCheckboxComponent.new(
-    form: form,
-    field_name: :receive_updates
-  ) %>
+        form: form,
+        field_name: :receive_updates
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_checkbox_component_preview/disabled.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/example', scope: :preferences) do |form| %>
   <%= render SdrViewComponents::Forms::BasicCheckboxComponent.new(
-    form: form,
-    field_name: :receive_updates,
-    disabled: true
-  ) %>
+        form: form,
+        field_name: :receive_updates,
+        disabled: true
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_file_component_preview/default.html.erb

@@ -1,6 +1,6 @@
 <%= form_with(url: '/upload', scope: :document) do |form| %>
   <%= render SdrViewComponents::Forms::BasicFileComponent.new(
-    form: form,
-    field_name: :file
-  ) %>
+        form: form,
+        field_name: :file
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_file_component_preview/with_accept.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/upload', scope: :document) do |form| %>
   <%= render SdrViewComponents::Forms::BasicFileComponent.new(
-    form: form,
-    field_name: :file,
-    accept: 'image/*'
-  ) %>
+        form: form,
+        field_name: :file,
+        accept: 'image/*'
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_file_component_preview/with_multiple.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/upload', scope: :document) do |form| %>
   <%= render SdrViewComponents::Forms::BasicFileComponent.new(
-    form: form,
-    field_name: :files,
-    multiple: true
-  ) %>
+        form: form,
+        field_name: :files,
+        multiple: true
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_file_component_preview/with_required.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/upload', scope: :document) do |form| %>
   <%= render SdrViewComponents::Forms::BasicFileComponent.new(
-    form: form,
-    field_name: :file,
-    required: true
-  ) %>
+        form: form,
+        field_name: :file,
+        required: true
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_radio_button_component_preview/checked.html.erb

@@ -1,8 +1,8 @@
 <%= form_with(url: '/example', scope: :preferences) do |form| %>
   <%= render SdrViewComponents::Forms::BasicRadioButtonComponent.new(
-    form: form,
-    field_name: :delivery_method,
-    value: 'email',
-    checked: true
-  ) %>
+        form: form,
+        field_name: :delivery_method,
+        value: 'email',
+        checked: true
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_radio_button_component_preview/default.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/example', scope: :preferences) do |form| %>
   <%= render SdrViewComponents::Forms::BasicRadioButtonComponent.new(
-    form: form,
-    field_name: :delivery_method,
-    value: 'email'
-  ) %>
+        form: form,
+        field_name: :delivery_method,
+        value: 'email'
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_radio_button_component_preview/disabled.html.erb

@@ -1,8 +1,8 @@
 <%= form_with(url: '/example', scope: :preferences) do |form| %>
   <%= render SdrViewComponents::Forms::BasicRadioButtonComponent.new(
-    form: form,
-    field_name: :delivery_method,
-    value: 'email',
-    disabled: true
-  ) %>
+        form: form,
+        field_name: :delivery_method,
+        value: 'email',
+        disabled: true
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_select_field_component_preview/default.html.erb

@@ -0,0 +1,11 @@
+<%= form_with(url: '/example', scope: :resource) do |form| %>
+  <%= render SdrViewComponents::Forms::BasicSelectFieldComponent.new(
+        form: form,
+        field_name: :type,
+        options: [
+          %w[Book book],
+          %w[Image image],
+          %w[Map map]
+        ]
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_select_field_component_preview/with_prompt.html.erb

@@ -0,0 +1,12 @@
+<%= form_with(url: '/example', scope: :resource) do |form| %>
+  <%= render SdrViewComponents::Forms::BasicSelectFieldComponent.new(
+        form: form,
+        field_name: :type,
+        options: [
+          %w[Book book],
+          %w[Image image],
+          %w[Map map]
+        ],
+        prompt: 'Choose a resource type'
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_select_field_component_preview.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    module Basic
+      class BasicSelectFieldComponentPreview < ViewComponent::Preview
+        def default; end
+
+        def with_prompt; end
+      end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/forms/basic/basic_text_area_component_preview/default.html.erb

@@ -1,6 +1,6 @@
 <%= form_with(url: '/example', scope: :feedback) do |form| %>
   <%= render SdrViewComponents::Forms::BasicTextAreaComponent.new(
-    form: form,
-    field_name: :comments
-  ) %>
+        form: form,
+        field_name: :comments
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_text_area_component_preview/with_placeholder.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/example', scope: :feedback) do |form| %>
   <%= render SdrViewComponents::Forms::BasicTextAreaComponent.new(
-    form: form,
-    field_name: :comments,
-    placeholder: 'Add a note about this item'
-  ) %>
+        form: form,
+        field_name: :comments,
+        placeholder: 'Add a note about this item'
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_text_area_component_preview/with_required.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/example', scope: :feedback) do |form| %>
   <%= render SdrViewComponents::Forms::BasicTextAreaComponent.new(
-    form: form,
-    field_name: :comments,
-    required: true
-  ) %>
+        form: form,
+        field_name: :comments,
+        required: true
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_text_area_component_preview/with_rows.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/example', scope: :feedback) do |form| %>
   <%= render SdrViewComponents::Forms::BasicTextAreaComponent.new(
-    form: form,
-    field_name: :comments,
-    rows: 5
-  ) %>
+        form: form,
+        field_name: :comments,
+        rows: 5
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_text_field_component_preview/default.html.erb

@@ -1,6 +1,6 @@
 <%= form_with(url: '/example', scope: :item) do |form| %>
   <%= render SdrViewComponents::Forms::BasicTextFieldComponent.new(
-    form: form,
-    field_name: :title
-  ) %>
+        form: form,
+        field_name: :title
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_text_field_component_preview/disabled.html.erb

@@ -1,8 +1,8 @@
 <%= form_with(url: '/example', scope: :item) do |form| %>
   <%= render SdrViewComponents::Forms::BasicTextFieldComponent.new(
-    form: form,
-    field_name: :title,
-    disabled: true,
-    placeholder: 'This field is unavailable'
-  ) %>
+        form: form,
+        field_name: :title,
+        disabled: true,
+        placeholder: 'This field is unavailable'
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_text_field_component_preview/required.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/example', scope: :item) do |form| %>
   <%= render SdrViewComponents::Forms::BasicTextFieldComponent.new(
-    form: form,
-    field_name: :title,
-    required: true
-  ) %>
+        form: form,
+        field_name: :title,
+        required: true
+      ) %>
 <% end %>

data/spec/components/previews/sdr_view_components/forms/basic/basic_text_field_component_preview/with_placeholder.html.erb

@@ -1,7 +1,7 @@
 <%= form_with(url: '/example', scope: :item) do |form| %>
   <%= render SdrViewComponents::Forms::BasicTextFieldComponent.new(
-    form: form,
-    field_name: :title,
-    placeholder: 'Enter a descriptive title'
-  ) %>
+        form: form,
+        field_name: :title,
+        placeholder: 'Enter a descriptive title'
+      ) %>
 <% end %>

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

@@ -2,8 +2,8 @@
 
 <%= form_with(model: model, url: '/example') do |form| %>
   <%= render SdrViewComponents::Forms::CheckboxComponent.new(
-    form: form,
-    field_name: :test_boolean_field,
-    input_checked: true
-  ) %>
+        form: form,
+        field_name: :test_boolean_field,
+        input_checked: true
+      ) %>
 <% end %>

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

@@ -2,7 +2,7 @@
 
 <%= form_with(model: model, url: '/example') do |form| %>
   <%= render SdrViewComponents::Forms::CheckboxComponent.new(
-    form: form,
-    field_name: :test_boolean_field
-  ) %>
+        form: form,
+        field_name: :test_boolean_field
+      ) %>
 <% end %>

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

@@ -2,8 +2,8 @@
 
 <%= form_with(model: model, url: '/example') do |form| %>
   <%= render SdrViewComponents::Forms::CheckboxComponent.new(
-    form: form,
-    field_name: :test_boolean_field,
-    input_disabled: true
-  ) %>
+        form: form,
+        field_name: :test_boolean_field,
+        input_disabled: true
+      ) %>
 <% end %>

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

@@ -2,9 +2,9 @@
 
 <%= form_with(model: model, url: '/example') do |form| %>
   <%= render SdrViewComponents::Forms::CheckboxComponent.new(
-    form: form,
-    field_name: :test_boolean_field
-  ) do |component| %>
+        form: form,
+        field_name: :test_boolean_field
+      ) do |component| %>
     <% component.with_additional_container_content do %>
       <span class="text-info">Extra info: This is additional container content.</span>
     <% end %>

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

@@ -2,9 +2,9 @@
 
 <%= form_with(model: model, url: '/example') do |form| %>
   <%= render SdrViewComponents::Forms::CheckboxComponent.new(
-    form: form,
-    field_name: :test_boolean_field,
-    help_text: 'This help text appears below the checkbox.',
-    variant: :help_text_below
-  ) %>
+        form: form,
+        field_name: :test_boolean_field,
+        help_text: 'This help text appears below the checkbox.',
+        variant: :help_text_below
+      ) %>
 <% end %>

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

@@ -2,8 +2,8 @@
 
 <%= form_with(model: model, url: '/example') do |form| %>
   <%= render SdrViewComponents::Forms::CheckboxComponent.new(
-    form: form,
-    field_name: :test_boolean_field,
-    label_text: 'I agree to the terms and conditions'
-  ) %>
+        form: form,
+        field_name: :test_boolean_field,
+        label_text: 'I agree to the terms and conditions'
+      ) %>
 <% end %>