sdr_view_components 0.1.14 → 0.2.1

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class HeadingComponentPreview < ViewComponent::Preview
+      # @!group Heading Levels
+      def h1
+        render SdrViewComponents::Elements::HeadingComponent.new(level: :h1, text: 'Page title')
+      end
+
+      def h2
+        render SdrViewComponents::Elements::HeadingComponent.new(level: :h2, text: 'Section heading')
+      end
+
+      def h3
+        render SdrViewComponents::Elements::HeadingComponent.new(level: :h3, text: 'Subsection heading')
+      end
+
+      def h4
+        render SdrViewComponents::Elements::HeadingComponent.new(level: :h4, text: 'Supporting heading')
+      end
+
+      def h5
+        render SdrViewComponents::Elements::HeadingComponent.new(level: :h5, text: 'Minor heading')
+      end
+
+      def h6
+        render SdrViewComponents::Elements::HeadingComponent.new(level: :h6, text: 'Eyebrow heading')
+      end
+      # @!endgroup
+
+      # @!group Variant Styling
+      def h2_with_h1_styling
+        render SdrViewComponents::Elements::HeadingComponent.new(level: :h2, text: 'Rendered as h2, styled like h1',
+                                                                 variant: :h1)
+      end
+
+      def h3_with_h2_styling
+        render SdrViewComponents::Elements::HeadingComponent.new(level: :h3, text: 'Rendered as h3, styled like h2',
+                                                                 variant: :h2)
+      end
+      # @!endgroup
+
+      def with_block_content
+        render SdrViewComponents::Elements::HeadingComponent.new(level: :h2) do
+          'Heading supplied by block content'
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<p>Content above the horizontal rule.</p>
+
+<%= render SdrViewComponents::Elements::HorizontalRuleComponent.new %>
+
+<p>Content below the horizontal rule.</p>

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class HorizontalRuleComponentPreview < ViewComponent::Preview
+      def default; end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class IconButtonComponentPreview < ViewComponent::Preview
+      # @!group Icon Buttons
+      def delete
+        render SdrViewComponents::Elements::IconButtonComponent.new(icon: :delete, label: 'Delete item')
+      end
+
+      def download
+        render SdrViewComponents::Elements::IconButtonComponent.new(icon: :download, label: 'Download file')
+      end
+      # @!endgroup
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class IconButtonLinkComponentPreview < ViewComponent::Preview
+      def default
+        render SdrViewComponents::Elements::IconButtonLinkComponent.new(
+          icon: :download,
+          label: 'Download item',
+          link: '/example'
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#default-modal-preview">
+  Open default modal
+</button>
+
+<%= render SdrViewComponents::Elements::ModalComponent.new(id: 'default-modal-preview') do |modal| %>
+  <% modal.with_body do %>
+    <p class="mb-0">Use this modal to review submission details before publishing.</p>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/elements/modal_component_preview/with_header_and_footer.html.erb

@@ -0,0 +1,19 @@
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-with-header-and-footer-preview">
+  Open modal with header and footer
+</button>
+
+<%= render SdrViewComponents::Elements::ModalComponent.new(id: 'modal-with-header-and-footer-preview') do |modal| %>
+  <% modal.with_header do %>
+    <h2 class="h5 mb-0">Publish item</h2>
+  <% end %>
+
+  <% modal.with_body do %>
+    <p>This item is ready to publish to the repository.</p>
+    <p class="mb-0">Review the metadata one final time before continuing.</p>
+  <% end %>
+
+  <% modal.with_footer do %>
+    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+    <button type="button" class="btn btn-primary">Publish</button>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/elements/modal_component_preview/without_size.html.erb

@@ -0,0 +1,9 @@
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#without-size-modal-preview">
+  Open modal without size
+</button>
+
+<%= render SdrViewComponents::Elements::ModalComponent.new(id: 'without-size-modal-preview', size: nil) do |modal| %>
+  <% modal.with_body do %>
+    <p class="mb-0">This example renders the modal without an explicit size class.</p>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class ModalComponentPreview < ViewComponent::Preview
+      # @!group Sizes
+      def default; end
+
+      def without_size; end
+      # @!endgroup
+
+      def with_header_and_footer; end
+    end
+  end
+end

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

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class ProgressBarComponentPreview < ViewComponent::Preview
+      # @!group Variants
+      def default
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'Digitization progress',
+          percent: 45
+        )
+      end
+
+      def primary
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'Digitization progress',
+          percent: 45,
+          variant: :primary
+        )
+      end
+
+      def secondary
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'Digitization progress',
+          percent: 45,
+          variant: :secondary
+        )
+      end
+
+      def success
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'Digitization progress',
+          percent: 45,
+          variant: :success
+        )
+      end
+
+      def danger
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'Digitization progress',
+          percent: 45,
+          variant: :danger
+        )
+      end
+
+      def warning
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'Digitization progress',
+          percent: 45,
+          variant: :warning
+        )
+      end
+
+      def info
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'Digitization progress',
+          percent: 45,
+          variant: :info
+        )
+      end
+      # @!endgroup
+
+      # @!group Percent Complete
+      def twenty_five_percent
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'File transfer progress',
+          percent: 25
+        )
+      end
+
+      def complete
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'File transfer progress',
+          percent: 100
+        )
+      end
+      # @!endgroup
+
+      # @!group Striping
+      def striped
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'Metadata review progress',
+          percent: 60
+        )
+      end
+
+      def solid
+        render SdrViewComponents::Elements::ProgressBarComponent.new(
+          label: 'Metadata review progress',
+          percent: 60,
+          striped: false
+        )
+      end
+      # @!endgroup
+    end
+  end
+end

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

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class SpinnerComponentPreview < ViewComponent::Preview
+      # @!group Variants
+      def default
+        render SdrViewComponents::Elements::SpinnerComponent.new
+      end
+
+      def primary
+        render SdrViewComponents::Elements::SpinnerComponent.new(variant: :primary)
+      end
+
+      def secondary
+        render SdrViewComponents::Elements::SpinnerComponent.new(variant: :secondary)
+      end
+
+      def success
+        render SdrViewComponents::Elements::SpinnerComponent.new(variant: :success)
+      end
+
+      def danger
+        render SdrViewComponents::Elements::SpinnerComponent.new(variant: :danger)
+      end
+
+      def warning
+        render SdrViewComponents::Elements::SpinnerComponent.new(variant: :warning)
+      end
+
+      def info
+        render SdrViewComponents::Elements::SpinnerComponent.new(variant: :info)
+      end
+      # @!endgroup
+
+      # @!group Messages
+      def custom_message
+        render SdrViewComponents::Elements::SpinnerComponent.new(message: 'Preparing deposit package...')
+      end
+
+      def hidden_message
+        render SdrViewComponents::Elements::SpinnerComponent.new(
+          message: 'Preparing deposit package...',
+          hide_message: true
+        )
+      end
+      # @!endgroup
+
+      # @!group Message Position
+      def message_on_bottom
+        render SdrViewComponents::Elements::SpinnerComponent.new(
+          message: 'Indexing files...',
+          message_position: :bottom
+        )
+      end
+
+      def message_on_top
+        render SdrViewComponents::Elements::SpinnerComponent.new(
+          message: 'Indexing files...',
+          message_position: :top
+        )
+      end
+
+      def message_on_left
+        render SdrViewComponents::Elements::SpinnerComponent.new(
+          message: 'Indexing files...',
+          message_position: :left
+        )
+      end
+      # @!endgroup
+
+      def spinning_image
+        render SdrViewComponents::Elements::SpinnerComponent.new(
+          message: 'Uploading image derivatives...',
+          image_path: "#{SdrViewComponents.configuration.component_library_url}/styles/Rosette.svg",
+          height: 64,
+          width: 64,
+          speed: 1.5
+        )
+      end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/default_variant.html.erb

@@ -0,0 +1,12 @@
+<%= render SdrViewComponents::Elements::Tabs::TabListComponent.new do |tab_list| %>
+  <% tab_list.with_tab(label: 'Details', id: 'details-tab', pane_id: 'details-pane', active: true) %>
+  <% tab_list.with_tab(label: 'History', id: 'history-tab', pane_id: 'history-pane') %>
+
+  <% tab_list.with_pane(id: 'details-pane', tab_id: 'details-tab', active: true) do %>
+    <p>Details pane content.</p>
+  <% end %>
+
+  <% tab_list.with_pane(id: 'history-pane', tab_id: 'history-tab') do %>
+    <p>History pane content.</p>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/underline_variant.html.erb

@@ -0,0 +1,12 @@
+<%= render SdrViewComponents::Elements::Tabs::TabListComponent.new(variant: :underline) do |tab_list| %>
+  <% tab_list.with_tab(label: 'Details', id: 'details-tab', pane_id: 'details-pane', active: true) %>
+  <% tab_list.with_tab(label: 'History', id: 'history-tab', pane_id: 'history-pane') %>
+
+  <% tab_list.with_pane(id: 'details-pane', tab_id: 'details-tab', active: true) do %>
+    <p>Details pane content.</p>
+  <% end %>
+
+  <% tab_list.with_pane(id: 'history-pane', tab_id: 'history-tab') do %>
+    <p>History pane content.</p>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/with_header.html.erb

@@ -0,0 +1,16 @@
+<%= render SdrViewComponents::Elements::Tabs::TabListComponent.new do |tab_list| %>
+  <% tab_list.with_tab(label: 'Details', id: 'details-tab', pane_id: 'details-pane', active: true) %>
+  <% tab_list.with_tab(label: 'History', id: 'history-tab', pane_id: 'history-pane') %>
+
+  <% tab_list.with_header do %>
+    <p class="mt-3 mb-2 fst-italic">Choose one of the tabs.</p>
+  <% end %>
+
+  <% tab_list.with_pane(id: 'details-pane', tab_id: 'details-tab', active: true) do %>
+    <p>Details pane content.</p>
+  <% end %>
+
+  <% tab_list.with_pane(id: 'history-pane', tab_id: 'history-tab') do %>
+    <p>History pane content.</p>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Tabs
+      class TabListComponentPreview < ViewComponent::Preview
+        # @!group Variants
+        def default_variant; end
+        def underline_variant; end
+        # @!endgroup
+
+        def with_header; end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class ToastComponentPreview < ViewComponent::Preview
+      # @!group Variants
+      def default
+        render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Black Toast text')
+      end
+
+      def red
+        render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Red Toast text', variant: :red)
+      end
+
+      def green
+        render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Green Toast text', variant: :green)
+      end
+
+      def poppy
+        render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Poppy Toast text', variant: :poppy)
+      end
+      # @!endgroup
+
+      def with_close_text
+        render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Black Toast text', close_text: 'Undo')
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= render SdrViewComponents::Elements::TooltipComponent.new(
+  target_label: 'Collection title',
+  tooltip: 'Use the public collection title shown to repository users.'
+) %>
+
+<script>
+  window.addEventListener('load', () => {
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    ;[...tooltipTriggerList].forEach((tooltipTriggerEl) => {
+      window.bootstrap.Tooltip.getOrCreateInstance(tooltipTriggerEl)
+    })
+  })
+</script>

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class TooltipComponentPreview < ViewComponent::Preview
+      def default; end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= form_with(url: '/example', scope: :preferences) do |form| %>
+  <%= render SdrViewComponents::Forms::BasicCheckboxComponent.new(
+    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

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

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

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

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    module Basic
+      class BasicCheckboxComponentPreview < ViewComponent::Preview
+        def default; end
+
+        # @!group Checkbox State
+        def checked; end
+
+        def disabled; end
+        # @!endgroup
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,7 @@
+<%= form_with(url: '/upload', scope: :document) do |form| %>
+  <%= render SdrViewComponents::Forms::BasicFileComponent.new(
+    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

@@ -0,0 +1,7 @@
+<%= form_with(url: '/upload', scope: :document) do |form| %>
+  <%= render SdrViewComponents::Forms::BasicFileComponent.new(
+    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

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

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    module Basic
+      class BasicFileComponentPreview < ViewComponent::Preview
+        def default; end
+
+        # @!group File Input Options
+        def with_accept
+          # Demonstrates accept attribute to filter file types (e.g., images only)
+        end
+
+        def with_multiple
+          # Demonstrates multiple attribute for uploading multiple files
+        end
+
+        def with_required
+          # Demonstrates required attribute
+        end
+        # @!endgroup
+      end
+    end
+  end
+end

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

@@ -0,0 +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
+  ) %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= form_with(url: '/example', scope: :preferences) do |form| %>
+  <%= render SdrViewComponents::Forms::BasicRadioButtonComponent.new(
+    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

@@ -0,0 +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
+  ) %>
+<% end %>

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    module Basic
+      class BasicRadioButtonComponentPreview < ViewComponent::Preview
+        def default; end
+
+        # @!group Radio button state
+        def checked; end
+
+        def disabled; end
+        # @!endgroup
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +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'
+  ) %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= form_with(url: '/example', scope: :feedback) do |form| %>
+  <%= render SdrViewComponents::Forms::BasicTextAreaComponent.new(
+    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

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