sdr_view_components 0.2.0 → 0.3.0

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    class SelectFieldComponentPreview < ViewComponent::Preview
+      def default; end
+
+      def with_prompt; end
+
+      # @!group Help text
+      def with_help_text; end
+
+      def with_help_text_below; end
+      # @!endgroup
+
+      def with_additional_container_content; end
+
+      def with_validation_error; end
+
+      class SelectFieldPreviewModel
+        include ActiveModel::Model
+        include ActiveModel::Attributes
+
+        attribute :resource_type, :string, default: nil
+
+        validates :resource_type, presence: true
+      end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/forms/submit_component_preview/danger.html.erb

@@ -0,0 +1,6 @@
+<%= form_with(url: '/items/123', method: :delete) do %>
+  <%= render SdrViewComponents::Forms::SubmitComponent.new(
+        label: 'Delete draft',
+        variant: :danger
+      ) %>
+<% end %>

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

@@ -0,0 +1,5 @@
+<%= form_with(url: '/items/123', method: :patch) do %>
+  <%= render SdrViewComponents::Forms::SubmitComponent.new(
+        label: 'Save changes'
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/submit_component_preview/info.html.erb

@@ -0,0 +1,6 @@
+<%= form_with(url: '/review', method: :post) do %>
+  <%= render SdrViewComponents::Forms::SubmitComponent.new(
+        label: 'Request information',
+        variant: :info
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/submit_component_preview/primary.html.erb

@@ -0,0 +1,6 @@
+<%= form_with(url: '/items/123', method: :patch) do %>
+  <%= render SdrViewComponents::Forms::SubmitComponent.new(
+        label: 'Save changes',
+        variant: :primary
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/submit_component_preview/secondary.html.erb

@@ -0,0 +1,6 @@
+<%= form_with(url: '/items/123', method: :patch) do %>
+  <%= render SdrViewComponents::Forms::SubmitComponent.new(
+        label: 'Save draft',
+        variant: :secondary
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/submit_component_preview/success.html.erb

@@ -0,0 +1,6 @@
+<%= form_with(url: '/deposit', method: :post) do %>
+  <%= render SdrViewComponents::Forms::SubmitComponent.new(
+        label: 'Deposit item',
+        variant: :success
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/submit_component_preview/warning.html.erb

@@ -0,0 +1,6 @@
+<%= form_with(url: '/review', method: :post) do %>
+  <%= render SdrViewComponents::Forms::SubmitComponent.new(
+        label: 'Submit for review',
+        variant: :warning
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/submit_component_preview/with_block_content_and_value.html.erb

@@ -0,0 +1,7 @@
+<%= form_with(url: '/deposit', method: :post) do %>
+  <%= render SdrViewComponents::Forms::SubmitComponent.new(
+        value: 'deposit-item'
+      ) do %>
+    Deposit item
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/submit_component_preview/with_form_id.html.erb

@@ -0,0 +1,8 @@
+<%= form_with(url: '/items/123/publish', method: :post, html: { id: 'publish-item-form' }) do |form| %>
+  <%= form.hidden_field :item_id, value: '123' %>
+<% end %>
+
+<%= render SdrViewComponents::Forms::SubmitComponent.new(
+      label: 'Publish item',
+      form_id: 'publish-item-form'
+    ) %>

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    class SubmitComponentPreview < ViewComponent::Preview
+      # @!group Button Variants
+      def primary; end
+
+      def secondary; end
+
+      def success; end
+
+      def danger; end
+
+      def warning; end
+
+      def info; end
+      # @!endgroup
+
+      # @!group Content Options
+      def with_block_content_and_value; end
+      # @!endgroup
+
+      def with_form_id; end
+
+      def default; end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<% model = SdrViewComponents::Forms::TextAreaComponentPreview::TextAreaPreviewModel.new(description: nil) %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::TextAreaComponent.new(
+        form: form,
+        field_name: :description
+      ) %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<% model = SdrViewComponents::Forms::TextAreaComponentPreview::TextAreaPreviewModel.new(description: nil) %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::TextAreaComponent.new(
+        form: form,
+        field_name: :description
+      ) do |component| %>
+    <% component.with_additional_container_content do %>
+      <p>Character limit: 500.</p>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,9 @@
+<% model = SdrViewComponents::Forms::TextAreaComponentPreview::TextAreaPreviewModel.new(description: nil) %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::TextAreaComponent.new(
+        form: form,
+        field_name: :description,
+        help_text: 'Describe the item in one or two sentences.'
+      ) %>
+<% end %>

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

@@ -0,0 +1,10 @@
+<% model = SdrViewComponents::Forms::TextAreaComponentPreview::TextAreaPreviewModel.new(description: nil) %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::TextAreaComponent.new(
+        form: form,
+        field_name: :description,
+        variant: :help_text_below,
+        help_text: 'This help text appears after the textarea.'
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/text_area_component_preview/with_hidden_label.html.erb

@@ -0,0 +1,9 @@
+<% model = SdrViewComponents::Forms::TextAreaComponentPreview::TextAreaPreviewModel.new(description: nil) %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::TextAreaComponent.new(
+        form: form,
+        field_name: :description,
+        label_hidden: true
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/text_area_component_preview/with_mark_required.html.erb

@@ -0,0 +1,9 @@
+<% model = SdrViewComponents::Forms::TextAreaComponentPreview::TextAreaPreviewModel.new(description: nil) %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::TextAreaComponent.new(
+        form: form,
+        field_name: :description,
+        mark_required: true
+      ) %>
+<% end %>

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

@@ -0,0 +1,8 @@
+<% model = SdrViewComponents::Forms::TextAreaComponentPreview::TextAreaPreviewModel.new(description: nil) %>
+
+<%= form_with(model: model, url: '/example') do |form| %>
+  <%= render SdrViewComponents::Forms::TextAreaComponent.new(
+        form: form,
+        field_name: :description
+      ) %>
+<% end %>

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    class TextAreaComponentPreview < ViewComponent::Preview
+      def default; end
+
+      # @!group Help text
+      def with_help_text; end
+
+      def with_help_text_below; end
+      # @!endgroup
+
+      def with_hidden_label; end
+
+      def with_mark_required; end
+
+      def with_additional_container_content; end
+
+      def with_validation_error; end
+
+      class TextAreaPreviewModel
+        include ActiveModel::Model
+        include ActiveModel::Attributes
+
+        attribute :description, :string, default: nil
+
+        validates :description, presence: true
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,9 @@
+<% 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,
+        input_disabled: true
+      ) %>
+<% end %>

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

@@ -0,0 +1,9 @@
+<% 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,
+        label_hidden: true
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/text_field_component_preview/marked_required.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,
+        mark_required: true
+      ) %>
+<% end %>

data/spec/components/previews/sdr_view_components/forms/text_field_component_preview/required.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_required: true
+      ) %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<% 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
+      ) do |component| %>
+    <% component.with_additional_container_content do %>
+      <span class="text-info">Suggested: keep titles under 80 characters.</span>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,9 @@
+<% 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,
+        help_text: 'Use a concise title that will make sense to end users.'
+      ) %>
+<% end %>

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,8 @@
+<% 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
+      ) %>
+<% 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,11 @@
+<% model = SdrViewComponents::Forms::ToggleComponentPreview::TogglePreviewModel.new(audience: nil) %>
+
+<%= 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