sdr_view_components 0.2.0 → 0.2.1

data/spec/components/previews/sdr_view_components/forms/text_field_component_preview/with_help_text_below.html.erb

@@ -0,0 +1,10 @@
+<% model = SdrViewComponents::Forms::TextFieldComponentPreview::TextFieldPreviewModel.new(title: 'Project overview') %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::TextFieldComponent.new(
+    form: form,
+    field_name: :title,
+    variant: :help_text_below,
+    help_text: 'Help text appears below the field when using the help_text_below variant.'
+  ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/text_field_component_preview/with_placeholder.html.erb

@@ -0,0 +1,9 @@
+<% model = SdrViewComponents::Forms::TextFieldComponentPreview::TextFieldPreviewModel.new(title: nil) %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::TextFieldComponent.new(
+    form: form,
+    field_name: :title,
+    input_placeholder: 'Enter a descriptive title'
+  ) %>
+<% end %>

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

@@ -0,0 +1,9 @@
+<% model = SdrViewComponents::Forms::TextFieldComponentPreview::TextFieldPreviewModel.new(title: nil) %>
+<% model.valid? %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::TextFieldComponent.new(
+    form: form,
+    field_name: :title
+  ) %>
+<% end %>

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    class TextFieldComponentPreview < ViewComponent::Preview
+      def default; end
+
+      def label_hidden; end
+
+      # @!group Help text
+      def with_help_text; end
+
+      def with_help_text_below; end
+      # @!endgroup
+
+      # @!group Input Options
+      def with_placeholder; end
+
+      def disabled; end
+
+      def required; end
+
+      def marked_required; end
+      # @!endgroup
+
+      def with_additional_container_content; end
+
+      def with_validation_error; end
+
+      class TextFieldPreviewModel
+        include ActiveModel::Model
+        include ActiveModel::Attributes
+
+        attribute :title, :string, default: nil
+
+        validates :title, presence: true
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<% model = SdrViewComponents::Forms::ToggleComponentPreview::TogglePreviewModel.new(audience: 'collections') %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::ToggleComponent.new(
+    form: form,
+    field_name: :audience
+  ) do |component| %>
+    <% component.with_left_toggle_option(form:, field_name: :audience, label: 'Collections', value: 'collections') %>
+    <% component.with_right_toggle_option(form:, field_name: :audience, label: 'Items', value: 'items') %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<% model = SdrViewComponents::Forms::ToggleComponentPreview::TogglePreviewModel.new(audience: nil) %>
+<% model.valid? %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::ToggleComponent.new(
+    form: form,
+    field_name: :audience
+  ) do |component| %>
+    <% component.with_left_toggle_option(form:, field_name: :audience, label: 'Collections', value: 'collections') %>
+    <% component.with_right_toggle_option(form:, field_name: :audience, label: 'Items', value: 'items') %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    class ToggleComponentPreview < ViewComponent::Preview
+      def default; end
+
+      def with_validation_error; end
+
+      class TogglePreviewModel
+        include ActiveModel::Model
+        include ActiveModel::Attributes
+
+        attribute :audience, :string, default: 'collections'
+
+        validates :audience, presence: true
+      end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/structure/footer_component_preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Structure
+    class FooterComponentPreview < ViewComponent::Preview
+      def default
+        render SdrViewComponents::Structure::FooterComponent.new
+      end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/structure/header_component_preview/dark_variant.html.erb

@@ -0,0 +1,15 @@
+<%= render SdrViewComponents::Structure::HeaderComponent.new(title: 'Test Header', subtitle: 'Test Subtitle', variant: :dark) do |header| %>
+  <% header.with_primary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Home', path: '#') %>
+  <% end %>
+  <% header.with_primary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Logged in: amcollie-preview-dropdown') do |dropdown| %>
+      <% dropdown.with_item do %>
+        <%= link_to 'Logout', '/Shibboleth.sso/Logout', class: 'dropdown-item' %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% header.with_secondary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Option', path: '/item1') %>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/structure/header_component_preview/dark_variant_with_background_color.html.erb

@@ -0,0 +1,15 @@
+<%= render SdrViewComponents::Structure::HeaderComponent.new(title: 'Test Header', subtitle: 'Test Subtitle', variant: :dark, background_color: '1, 104, 149') do |header| %>
+  <% header.with_primary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Home', path: '#') %>
+  <% end %>
+  <% header.with_primary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Logged in: amcollie-preview-dropdown') do |dropdown| %>
+      <% dropdown.with_item do %>
+        <%= link_to 'Logout', '/Shibboleth.sso/Logout', class: 'dropdown-item' %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% header.with_secondary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Option', path: '/item1') %>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/structure/header_component_preview/light_variant.html.erb

@@ -0,0 +1,15 @@
+<%= render SdrViewComponents::Structure::HeaderComponent.new(title: 'Test Header', subtitle: 'Test Subtitle') do |header| %>
+  <% header.with_primary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Home', path: '#') %>
+  <% end %>
+  <% header.with_primary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Logged in: amcollie-preview-dropdown') do |dropdown| %>
+      <% dropdown.with_item do %>
+        <%= link_to 'Logout', '/Shibboleth.sso/Logout', class: 'dropdown-item' %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% header.with_secondary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Option', path: '/item1') %>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/structure/header_component_preview/no_rosette.html.erb

@@ -0,0 +1,15 @@
+<%= render SdrViewComponents::Structure::HeaderComponent.new(title: 'Test Header', subtitle: 'Test Subtitle', rosette: false) do |header| %>
+  <% header.with_primary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Home', path: '#') %>
+  <% end %>
+  <% header.with_primary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Logged in: amcollie-preview-dropdown') do |dropdown| %>
+      <% dropdown.with_item do %>
+        <%= link_to 'Logout', '/Shibboleth.sso/Logout', class: 'dropdown-item' %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% header.with_secondary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Option', path: '/item1') %>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/structure/header_component_preview/white_variant.html.erb

@@ -0,0 +1,15 @@
+<%= render SdrViewComponents::Structure::HeaderComponent.new(title: 'Test Header', subtitle: 'Test Subtitle', variant: :white) do |header| %>
+  <% header.with_primary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Home', path: '#') %>
+  <% end %>
+  <% header.with_primary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Logged in: amcollie-preview-dropdown') do |dropdown| %>
+      <% dropdown.with_item do %>
+        <%= link_to 'Logout', '/Shibboleth.sso/Logout', class: 'dropdown-item' %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% header.with_secondary_navigation_link do %>
+    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Option', path: '/item1') %>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/structure/header_component_preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Structure
+    class HeaderComponentPreview < ViewComponent::Preview
+      def light_variant; end
+
+      def white_variant; end
+
+      def dark_variant; end
+      def dark_variant_with_background_color; end
+
+      def no_rosette; end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/tables/cell_component_preview/default.html.erb

@@ -0,0 +1,9 @@
+<table class="table">
+  <tbody>
+    <tr>
+      <%= render SdrViewComponents::Tables::CellComponent.new do %>
+        Status
+      <% end %>
+    </tr>
+  </tbody>
+</table>

data/spec/components/previews/sdr_view_components/tables/cell_component_preview/with_colspan.html.erb

@@ -0,0 +1,17 @@
+<table class="table">
+  <tbody>
+    <tr>
+      <%= render SdrViewComponents::Tables::CellComponent.new(colspan: 2) do %>
+        Quarterly total
+      <% end %>
+    </tr>
+    <tr>
+      <%= render SdrViewComponents::Tables::CellComponent.new do %>
+        Revenue
+      <% end %>
+      <%= render SdrViewComponents::Tables::CellComponent.new do %>
+        $125,000
+      <% end %>
+    </tr>
+  </tbody>
+</table>

data/spec/components/previews/sdr_view_components/tables/cell_component_preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    class CellComponentPreview < ViewComponent::Preview
+      def default; end
+
+      def with_colspan; end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/tables/header_component_preview/default.html.erb

@@ -0,0 +1,7 @@
+<table class="table">
+  <thead>
+    <tr>
+      <%= render SdrViewComponents::Tables::HeaderComponent.new(label: 'Repository') %>
+    </tr>
+  </thead>
+</table>

data/spec/components/previews/sdr_view_components/tables/header_component_preview/with_tooltip.html.erb

@@ -0,0 +1,19 @@
+<table class="table">
+  <thead>
+    <tr>
+      <%= render SdrViewComponents::Tables::HeaderComponent.new(
+            label: 'Access',
+            tooltip: 'Explains who can view or manage this item.'
+          ) %>
+    </tr>
+  </thead>
+</table>
+
+<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/tables/header_component_preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    class HeaderComponentPreview < ViewComponent::Preview
+      def default; end
+
+      def with_tooltip; end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/tables/list_cell_component_preview/with_item_values.html.erb

@@ -0,0 +1,7 @@
+<table class="table">
+  <tbody>
+    <tr>
+      <%= render SdrViewComponents::Tables::ListCellComponent.new(item_values: item_values) %>
+    </tr>
+  </tbody>
+</table>

data/spec/components/previews/sdr_view_components/tables/list_cell_component_preview/with_items.html.erb

@@ -0,0 +1,11 @@
+<table class="table">
+  <tbody>
+    <tr>
+      <%= render SdrViewComponents::Tables::ListCellComponent.new do |component| %>
+        <% items.each do |item| %>
+          <% component.with_item { item } %>
+        <% end %>
+      <% end %>
+    </tr>
+  </tbody>
+</table>

data/spec/components/previews/sdr_view_components/tables/list_cell_component_preview.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    class ListCellComponentPreview < ViewComponent::Preview
+      # @!group Item sources
+
+      def with_item_values
+        render_with_template(locals: {
+                               item_values: ['Published', 'Preserved', 'Available in SearchWorks']
+                             })
+      end
+
+      def with_items
+        render_with_template(locals: {
+                               items: [
+                                 'Created by Digital Production Group',
+                                 'Reviewed by Metadata Services',
+                                 'Updated last week'
+                               ]
+                             })
+      end
+
+      # @!endgroup
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/tables/raw_table_component_preview/default.html.erb

@@ -0,0 +1,26 @@
+<%= render(SdrViewComponents::Tables::RawTableComponent.new(label: 'Custom Row Content')) do |component| %>
+  <% component.with_header(label: 'Item') %>
+  <% component.with_header(label: 'Status') %>
+  <% component.with_header(label: 'Description') %>
+  <% component.with_row do %>
+    <tr>
+      <td>Item 1</td>
+      <td><strong>Complete</strong></td>
+      <td>Custom HTML rendering</td>
+    </tr>
+  <% end %>
+  <% component.with_row do %>
+    <tr>
+      <td>Item 2</td>
+      <td><em>In Progress</em></td>
+      <td><code>RawTableComponent</code> demo</td>
+    </tr>
+  <% end %>
+  <% component.with_row do %>
+    <tr>
+      <td>Item 3</td>
+      <td><u>Pending</u></td>
+      <td>Arbitrary HTML content</td>
+    </tr>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/tables/raw_table_component_preview.rb

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

data/spec/components/previews/sdr_view_components/tables/row_component_preview/label_only.html.erb

@@ -0,0 +1,5 @@
+<table class="table">
+  <tbody>
+    <%= render SdrViewComponents::Tables::RowComponent.new(label: 'Deposit status') %>
+  </tbody>
+</table>

data/spec/components/previews/sdr_view_components/tables/row_component_preview/with_cells.html.erb

@@ -0,0 +1,13 @@
+<% row = SdrViewComponents::Tables::RowComponent.new(label: 'Content files') %>
+<% row.with_cell do %>
+  image-0001.tif
+<% end %>
+<% row.with_cell do %>
+  image-0002.tif
+<% end %>
+
+<table class="table">
+  <tbody>
+    <%= render row %>
+  </tbody>
+</table>

data/spec/components/previews/sdr_view_components/tables/row_component_preview/with_first_value_and_values.html.erb

@@ -0,0 +1,8 @@
+<table class="table">
+  <tbody>
+    <%= render SdrViewComponents::Tables::RowComponent.new(
+      first_value: 'File set',
+      values: ['Preserved', 'Published']
+    ) %>
+  </tbody>
+</table>

data/spec/components/previews/sdr_view_components/tables/row_component_preview/with_label_content.html.erb

@@ -0,0 +1,11 @@
+<% row = SdrViewComponents::Tables::RowComponent.new(value: 'Submitted') %>
+<% row.with_label_content do %>
+  <strong>Deposit status</strong><br>
+  <small>Current workflow step</small>
+<% end %>
+
+<table class="table">
+  <tbody>
+    <%= render row %>
+  </tbody>
+</table>

data/spec/components/previews/sdr_view_components/tables/row_component_preview/with_tooltip.html.erb

@@ -0,0 +1,18 @@
+<table class="table">
+  <tbody>
+    <%= render SdrViewComponents::Tables::RowComponent.new(
+      label: 'Embargo',
+      value: 'Ends 2027-01-15',
+      tooltip: 'Date when the item becomes visible to the public.'
+    ) %>
+  </tbody>
+</table>
+
+<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/tables/row_component_preview/with_value.html.erb

@@ -0,0 +1,8 @@
+<table class="table">
+  <tbody>
+    <%= render SdrViewComponents::Tables::RowComponent.new(
+      label: 'Collection',
+      value: 'Manuscript Division'
+    ) %>
+  </tbody>
+</table>

data/spec/components/previews/sdr_view_components/tables/row_component_preview/with_values.html.erb

@@ -0,0 +1,8 @@
+<table class="table">
+  <tbody>
+    <%= render SdrViewComponents::Tables::RowComponent.new(
+      label: 'Access',
+      values: ['Stanford users', 'World']
+    ) %>
+  </tbody>
+</table>

data/spec/components/previews/sdr_view_components/tables/row_component_preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    class RowComponentPreview < ViewComponent::Preview
+      # @!group Values
+      def with_values; end
+      def with_value; end
+      def with_cells; end
+      def with_first_value_and_values; end
+      # @!endgroup
+
+      # @!group Labels
+      def label_only; end
+      def with_label_content; end
+      # @!endgroup
+
+      def with_tooltip; end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/tables/table_component_preview.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    class TableComponentPreview < ViewComponent::Preview
+      # @!group Variants
+
+      def h3_variant
+        render(SdrViewComponents::Tables::TableComponent.new(label: 'Sample Data')) do |component|
+          component.with_row(label: 'Item 1', values: ['Value A', 'Value B', 'Value C'])
+          component.with_row(label: 'Item 2', values: ['Value D', 'Value E', 'Value F'])
+          component.with_row(label: 'Item 3', values: ['Value G', 'Value H', 'Value I'])
+        end
+      end
+
+      def data_variant
+        render(SdrViewComponents::Tables::TableComponent.new(label: 'Data Records', variant: :data)) do |component|
+          component.with_row(label: 'Record 1', values: %w[Alpha Beta Gamma])
+          component.with_row(label: 'Record 2', values: %w[Delta Epsilon Zeta])
+          component.with_row(label: 'Record 3', values: %w[Eta Theta Iota])
+        end
+      end
+
+      # @!endgroup
+
+      # @!group Headers and Caption
+
+      def with_headers
+        render(SdrViewComponents::Tables::TableComponent.new(label: 'Headers Example')) do |component|
+          component.with_header(label: 'Column 1')
+          component.with_header(label: 'Column 2')
+          component.with_header(label: 'Column 3')
+          component.with_row(label: 'Row 1', values: ['Data 1', 'Data 2', 'Data 3'])
+          component.with_row(label: 'Row 2', values: ['Data 4', 'Data 5', 'Data 6'])
+        end
+      end
+
+      def with_caption
+        render(SdrViewComponents::Tables::TableComponent.new) do |component|
+          component.with_caption { 'Table Caption: Financial Summary' }
+          component.with_header(label: 'Month')
+          component.with_header(label: 'Revenue')
+          component.with_header(label: 'Expenses')
+          component.with_row(label: 'January', values: ['$50,000', '$35,000'])
+          component.with_row(label: 'February', values: ['$55,000', '$38,000'])
+        end
+      end
+
+      def show_label_false
+        render(SdrViewComponents::Tables::TableComponent.new(label: 'This label is hidden',
+                                                             show_label: false)) do |component|
+          component.with_row(label: 'Data Row', values: ['Value 1', 'Value 2', 'Value 3'])
+        end
+      end
+
+      # @!endgroup
+
+      def empty_message
+        render(SdrViewComponents::Tables::TableComponent.new(
+                 label: 'No Data Available',
+                 empty_message: 'No records found. Please try again later.'
+               ))
+      end
+
+      def responsive # rubocop:disable Metrics/MethodLength
+        render(SdrViewComponents::Tables::TableComponent.new(
+                 label: 'Responsive Table',
+                 responsive: true
+               )) do |component|
+          component.with_header(label: 'Row')
+          component.with_header(label: 'Column 1')
+          component.with_header(label: 'Column 2')
+          component.with_header(label: 'Column 3')
+          component.with_header(label: 'Column 4')
+          component.with_row(label: 'Row 1', values: ['Data 1', 'Data 2', 'Data 3', 'Data 4'])
+          component.with_row(label: 'Row 2', values: ['Data 5', 'Data 6', 'Data 7', 'Data 8'])
+        end
+      end
+    end
+  end
+end