sdr_view_components 0.1.14 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e89b11e845efdc4fa1bea907cac71a0e4165853da5233d4007e15c829709a3e
-  data.tar.gz: 486b3bf6dbf1b657cd76d93327892feec81600502c1f75e3aa9578d108478660
+  metadata.gz: cbfc52ae67fecdff708f4696aaa7092396da6dff749264858c11dbbfbe8a4382
+  data.tar.gz: 32a60c51ecd3fdb27a1ef011ad8fbaee64053f956e66d0d3d42c51fd36801f78
 SHA512:
-  metadata.gz: 9723c013dfb1a1ba6d6cc4af4c1170aec972539dbff1e6ae78065006b32233c812a66cb1b3b04b8d7a0909acd886783dc1f33d92af62ea3c290760e08be15f96
-  data.tar.gz: 4130c0034e46554ccc3e1e5fff29869a0aca37c7c718e75067fc5d1ab0763cb96ed1dd8a7cf96fd756f2641ca6e4857bdf2ff96d10093a91fbdfef0a91b614db
+  metadata.gz: 0f7f24fc7019c867299b390b5ae6dff1a93fc7b41f66a5075f473b5ebd69061d7cd4f44f92480b6e3337f26ac2683b5b48260580bbc11aa72b9007a910884c11
+  data.tar.gz: bbca5c2fc24924a8df4e40a706140b568502bf4816b3e2a43840614d201c28d849d1e2374febb56d9b4656f4ae6a0d8cd28e13750fcc5c94da0685dc78305161

data/README.md

@@ -4,8 +4,7 @@
 
 # SdrViewComponents
 
-A rails gem to provide reusable view components used throughout the SDR applications and implement
-component library assets.
+A rails gem to provide reusable view components used throughout the SDR applications and implement component library assets.
 
 # Installation
 
@@ -21,48 +20,13 @@ This set of components relies on the component library stylesheets, add:
 
 ```
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2025-09-11/styles/sul.css">
+<%= stylesheet_link_tag "sdr_view_components", "data-turbo-track": "reload" %>
 ```
 
 with the most recent date tagged release to your `application.html.erb` layout file.
 
 ## Usage
 
-### Add the SUL Header to your application
-
-Supported header variations are `:dark`, `:light`, and `:white` (default is `:light`)
-
-```
-<%= 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 %>
-    <%# ... all primary nav links %>
-  <% end %>
-  <% header.with_secondary_navigation_link do %>
-    <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Option', path: '/item1') %>
-    <%# ... all secondary nav links>
-  <% end %>
-<% end %>
-```
-
-The `:dark` variation supports providing an rgb value via the `background_color` param in order to override the default dark background, for example:
-
-```
-<%= render SdrViewComponents::Structure::HeaderComponent.new(title: 'Test Header', subtitle: 'Test Subtitle', variant: :dark, rgb_color_str: '1, 104, 149') do |header| %>
-
-...
-
-<% end %>
-```
-
-By default, the SUL Rosette is included in the header, this can be disabled by setting `rosette: false` in the parameter list when instantiating the header.
-
 ### Form components
 
 SdrViewComponents provides a wrapper for several [ActionView::Helper::Tags](https://api.rubyonrails.org/v8.1.1/classes/ActionView/Helpers/Tags.html).
@@ -113,3 +77,56 @@ At a minimum, each of these components must be provided wih the `form:` and `fie
 ```
 <% render SdrViewComponent::....>
 ```
+
+## Component library version
+The [component-library](https://github.com/sul-dlss/component-library/) version is set in `lib/sdr_view_components/configuration.rb`.
+
+```
+def initialize
+  # Default URL for the component library assets
+  @component_library_url = 'https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2026-01-27'
+end
+```
+
+## Lookbook
+
+[Lookbook](https://lookbook.build/) provides a component browser for the components.
+
+### Creating previews
+For a component to appear in Lookbook, it must have a preview. See `spec/components/previews/sdr_view_components`
+
+Previews can easily be created with the `viewComponentPreview` prompt. For example: `/viewComponentPreview SpinnerComponent`.
+
+### Running locally
+
+`bin/rails s`
+
+Lookbook will then be available at: http://localhost:3000/lookbook
+
+### Adding to another app
+
+When performing development in an app that is using SdrViewComponents, it may be helpful to be running Lookbook in that app (instead of having to run a separate local instance of it).
+
+To run Lookbook in that app:
+1. Add Lookbook to `Gemfile.rb`:
+```
+group :development do
+  gem 'lookbook'
+end
+```
+2. Add routes to `routes.rb`:
+```
+if Rails.env.development?
+  mount SdrViewComponents::Engine => '/sdr_view_components'
+  mount Lookbook::Engine, at: '/lookbook'
+end
+```
+3. Add `config/initializers/sdr_view_components.rb`:
+```
+SdrViewComponents.configure do |config|
+  config.component_library_url = Settings.component_library.url
+end
+```
+It is recommended to change the component library URL to a configuration in the app instead of hardcoding in layouts.
+
+When your app is running locally, Lookbook will be available at: http://localhost:3000/lookbook

data/app/assets/sdr_view_components.css

@@ -0,0 +1,110 @@
+/* Header */
+.masthead {
+  color: white;
+}
+
+.masthead h1,
+.masthead .h1 {
+  font-size: 2.25rem;
+}
+
+/* Toggle */
+.btn-group-toggle label.btn {
+  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgb(var(--bs-btn-focus-shadow-rgb), .5);
+}
+
+.btn-group-toggle input:checked + label {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+  color: #fff;
+}
+
+.btn-group-toggle input:not(:checked) + label {
+  background-color: transparent;
+  border-color: var(--bs-primary);
+  color: var(--bs-primary);
+}
+
+.btn-group-toggle .btn-check:checked + .btn {
+  background-color: var(--stanford-digital-blue);
+  border-color: var(--stanford-digital-blue);
+  color: #fff;
+}
+
+.btn-group-toggle :not(.btn-check:checked) + .btn {
+  color: var(--stanford-digital-blue);
+  border-color: var(--stanford-digital-blue);
+}
+
+.btn-group-toggle input:checked + label::before {
+  display: inline-block;
+  margin-right: 3px;
+  font-family: bootstrap-icons;
+  vertical-align: -15%;
+  content: "\F633";
+}
+
+/* Banner */
+.banner.alert a.btn-primary {
+  color: white;
+}
+
+/* Forms */
+.form-control,
+.form-select,
+.form-check-input {
+  border-color: var(--stanford-60-black);
+}
+
+/* Tabs */
+.nav-underline {
+  border-bottom: 1px solid black;
+  margin-bottom: 10px;
+}
+
+.nav-underline .nav-link {
+  width: 10.5rem;
+}
+
+.nav-underline .nav-link:not(.active) {
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+}
+
+.nav-underline .nav-link.active {
+  border-bottom: 3px solid #B1040E;
+  color: #B1040E;
+  font-weight: bold;
+}
+
+/* Tables */
+table.table-h3 caption {
+  padding: .25rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--stanford-black);
+  caption-side: top;
+  border-bottom: 1px solid var(--stanford-black);
+}
+
+table.table-h3 th {
+  font-size: 1.0rem;
+  font-weight: 600;
+  color: var(--stanford-black);
+}
+
+table.table-h3 tr {
+  border-color: var(--stanford-30-black);
+}
+
+/* Item lists */
+table.table-h3 .list-unstyled {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+table.table-data th {
+  width: fit-content;
+  white-space: nowrap;
+}

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

@@ -20,7 +20,9 @@ module SdrViewComponents
 
       # Renders the component without the need for a .erb partial.
       def call
-        content_tag(@level, class: classes) do
+        return unless tag.respond_to?(@level)
+
+        tag.public_send(@level, class: classes) do
           @text || content
         end
       end

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

@@ -12,6 +12,10 @@ module SdrViewComponents
         super()
       end
 
+      def before_render
+        raise SdrViewComponents::Error::UnknownComponentIcon, "Unknown icon type: #{@icon}" unless button_icon?
+      end
+
       attr_reader :label, :options
 
       def classes
@@ -21,6 +25,12 @@ module SdrViewComponents
       def button_icon
         helpers.public_send(:"#{@icon}_icon")
       end
+
+      private
+
+      def button_icon?
+        helpers.respond_to?(:"#{@icon}_icon")
+      end
     end
   end
 end

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

@@ -1,8 +1,8 @@
 <%= tag.div class: classes do %>
   <% if image_path %>
-    <%= tag.img src: image_path, alt: 'Spinner', class: spinner_classes, role: 'status', style: spinner_style, **options %>
+    <%= tag.img src: image_path, alt: 'Spinner', class: spinner_classes, role: 'status', style: spinner_style, **spinner_options %>
   <% else %>
-    <%= tag.div class: spinner_classes, role: 'status', style: spinner_style, **options %>
+    <%= tag.div class: spinner_classes, role: 'status', style: spinner_style, **spinner_options %>
   <% end %>
   <%= tag.div class: message_classes do %><%= message %><% end %>
 <% end %>

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

@@ -6,7 +6,7 @@ module SdrViewComponents
     class SpinnerComponent < BaseComponent
       def initialize(message: 'Loading...', message_classes: [], message_position: :right, hide_message: false, # rubocop:disable Metrics/ParameterLists, Metrics/MethodLength
                      image_path: nil, variant: nil, classes: [],
-                     height: nil, width: nil, speed: 0.75, **options)
+                     height: nil, width: nil, speed: 0.75, spinner_classes: ['mx-2'], **spinner_options)
         @message = message
         @variant = variant
         @hide_message = hide_message
@@ -16,15 +16,16 @@ module SdrViewComponents
         @width = width
         @message_classes = message_classes
         @speed = speed # In seconds, so a larger number is slower. The default (0.75) is the same as Bootstrap's default.
-        @options = options
+        @spinner_classes = spinner_classes
+        @spinner_options = spinner_options
         @message_position = message_position # :bottom or :right
         super()
       end
 
-      attr_reader :message, :image_path, :options
+      attr_reader :message, :image_path, :spinner_options
 
       def spinner_classes
-        merge_classes('spinner-border', variant_class, border_class, 'mx-2')
+        merge_classes('spinner-border', variant_class, border_class, @spinner_classes)
       end
 
       def message_classes

data/app/components/sdr_view_components/elements/tabs/pane_component.html.erb

@@ -0,0 +1,3 @@
+<%= tag.div class: classes, id:, role: 'tabpanel', 'aria-labelledby': tab_id, tabindex: '0' do %>
+  <%= content %>
+<% end %>

data/app/components/sdr_view_components/elements/tabs/pane_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Tabs
+      # Component for rendering a tab pane in a tabbed interface.
+      class PaneComponent < BaseComponent
+        def initialize(id:, tab_id:, active: false)
+          @id = id
+          @tab_id = tab_id
+          @active = active
+          super()
+        end
+
+        attr_reader :id, :tab_id
+
+        def active?
+          @active
+        end
+
+        def classes
+          merge_classes(%w[tab-pane fade], active? ? %w[show active] : nil)
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/tabs/tab_component.html.erb

@@ -0,0 +1,3 @@
+<li class="nav-item" role="presentation">
+  <%= tag.button class: button_classes, id:, data: { bs_toggle: 'tab', bs_target: "##{pane_id}" }, type: 'button', role: 'tab', 'aria-controls': 'details-pane', 'aria-selected': active? do %><%= label %><% end %>
+</li>

data/app/components/sdr_view_components/elements/tabs/tab_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Tabs
+      # Component for rendering a tab in a tabbed interface.
+      class TabComponent < BaseComponent
+        def initialize(label:, id:, pane_id:, active: false, variant: :underline)
+          @label = label
+          @id = id
+          @pane_id = pane_id
+          @active = active
+          @variant = variant
+
+          raise ArgumentError, "Invalid variant: #{variant}" unless %i[underline default].include?(variant)
+
+          super()
+        end
+
+        attr_reader :label, :id, :pane_id, :variant
+
+        def active?
+          @active
+        end
+
+        def classes
+          merge_classes('nav', variant_classes)
+        end
+
+        def button_classes
+          merge_classes('nav-link', active? ? 'active' : nil)
+        end
+
+        private
+
+        def variant_classes
+          'nav-underline' if variant == :underline
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/tabs/tab_list_component.html.erb

@@ -0,0 +1,9 @@
+<%= tag.ul class: classes, role: 'tablist' do %>
+  <% tabs.each do |tab| %><%= tab %><% end %>
+<% end %>
+
+<%= header %>
+
+<div class="tab-content">
+  <% panes.each do |pane| %><%= pane %><% end %>
+</div>

data/app/components/sdr_view_components/elements/tabs/tab_list_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Tabs
+      # Component for rendering a list of tabs in a tabbed interface.
+      class TabListComponent < BaseComponent
+        renders_one :header # optional
+        renders_many :tabs, Elements::Tabs::TabComponent
+        renders_many :panes, Elements::Tabs::PaneComponent
+
+        def initialize(classes: [], variant: :default)
+          @classes = classes
+          @variant = variant
+
+          raise ArgumentError, "Invalid variant: #{variant}" unless %i[underline default].include?(variant)
+
+          super()
+        end
+
+        def classes
+          merge_classes('nav', @classes, variant_classes)
+        end
+
+        private
+
+        def variant_classes
+          'nav-underline' if @variant == :underline
+        end
+      end
+    end
+  end
+end

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

@@ -21,7 +21,7 @@ module SdrViewComponents
       def background_color
         case variant
         when :red
-          'bg-stanford-cardinal'
+          'bg-stanford-digital-red'
         when :green
           'bg-stanford-digital-green'
         when :poppy

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

@@ -0,0 +1,32 @@
+<% @table_content = capture do %>
+  <%= tag.table class: classes, 'aria-label': label, **@table_options do %>
+    <% if show_label? %>
+      <caption><%= label || caption %></caption>
+    <% end %>
+    <% if headers? %>
+      <%= tag.thead class: head_classes do %>
+        <tr>
+          <% headers.each do |header| %>
+            <%= header %>
+          <% end %>
+        </tr>
+      <% end %>
+    <% end %>
+    <%= tag.tbody class: body_classes do %>
+      <% rows.each do |row| %>
+        <%= row %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if empty_message && !rows? %>
+    <p class="fst-italic"><%= empty_message %></p>
+  <% end %>
+<% end %>
+
+<% if responsive? %>
+  <%= tag.div class: 'table-responsive' do %>
+    <%= @table_content %>
+  <% end %>
+<% else %>
+  <%= @table_content %>
+<% end %>

data/app/components/sdr_view_components/tables/base_table_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    # Base component for rendering a table.
+    class BaseTableComponent < BaseComponent
+      renders_many :headers, SdrViewComponents::Tables::HeaderComponent
+      renders_one :caption
+      # Subclasses should provide rows, e.g., renders_many :rows
+
+      def initialize(label: nil, classes: [], head_classes: [], body_classes: [], show_label: true, # rubocop:disable Metrics/ParameterLists, Metrics/MethodLength
+                     empty_message: nil, responsive: false, variant: :h3, **table_options)
+        @classes = classes
+        @body_classes = body_classes
+        @label = label
+        @show_label = show_label
+        @empty_message = empty_message
+        @head_classes = head_classes
+        @responsive = responsive
+        @table_options = table_options
+        @variant = variant
+        raise ArgumentError, 'Unknown variant' unless %i[h3 data].include?(@variant)
+
+        raise ArgumentError, 'Subclasses must provide rows' unless respond_to?(:rows)
+
+        super()
+      end
+
+      attr_reader :label, :empty_message, :table_options, :variant
+
+      def before_render
+        raise ArgumentError, 'Must provide label or caption' unless label.present? || caption?
+      end
+
+      def classes
+        merge_classes(%w[table caption-top], variant_classes, @classes)
+      end
+
+      def head_classes
+        merge_classes(@head_classes)
+      end
+
+      def body_classes
+        merge_classes(@body_classes)
+      end
+
+      def show_label?
+        @show_label
+      end
+
+      def render?
+        rows? || empty_message.present?
+      end
+
+      def responsive?
+        @responsive
+      end
+
+      def variant_classes
+        case variant
+        when :h3
+          'table-h3'
+        when :data
+          'table-data table-striped table-hover table-bordered'
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= tag.td(colspan:, class: classes, **cell_options) do %>
+  <%= content %>
+<% end %>

data/app/components/sdr_view_components/tables/cell_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    # Component for rendering a table cell.
+    class CellComponent < BaseComponent
+      def initialize(colspan: nil, classes: [], **cell_options)
+        @colspan = colspan
+        @classes = classes
+        @cell_options = cell_options
+        super()
+      end
+
+      attr_reader :colspan, :cell_options
+
+      def classes
+        merge_classes(@classes)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+<%= tag.th scope: 'col', class: classes, **header_options do %>
+  <%= label %>
+  <%= render SdrViewComponents::Elements::TooltipComponent.new(target_label: label, tooltip:) %>
+<% end %>

data/app/components/sdr_view_components/tables/header_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    # Component for rendering a table header.
+    class HeaderComponent < BaseComponent
+      def initialize(label:, classes: [], tooltip: nil, **header_options)
+        @label = label
+        @classes = classes
+        @tooltip = tooltip
+        @header_options = header_options
+        super()
+      end
+
+      attr_reader :label, :tooltip, :header_options
+
+      def classes
+        merge_classes(@classes)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<ul class="list-unstyled mb-0">
+  <% list_items.each do |item| %>
+    <li><%= item %></li>
+  <% end %>
+</ul>

data/app/components/sdr_view_components/tables/list_cell_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    # Component for rendering a list in a table cell.
+    class ListCellComponent < BaseComponent
+      renders_many :items
+
+      def initialize(item_values: [])
+        # Provide items or item_values
+        @item_values = item_values
+        super()
+      end
+
+      attr_reader :item_values
+
+      def list_items
+        items? ? items : item_values
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/tables/raw_table_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    # Component for rendering a table in which rows must be provided.
+    class RawTableComponent < BaseTableComponent
+      renders_many :rows
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+<%= tag.tr **row_options do %>
+  <% if label.present? || label_content.present? %>
+    <th class="col-3" scope="row">
+      <%= label || label_content %>
+      <%= render SdrViewComponents::Elements::TooltipComponent.new(target_label: label, tooltip:) %>
+    </th>
+  <% end %>
+
+  <% if first_value.present? %>
+    <td class="col-3" scope="row"><%= first_value %></td>
+  <% end %>
+
+  <% values.each do |value| %>
+    <td><%= value %></td>
+  <% end %>
+
+  <% cells.each do |cell| %>
+    <%= cell %>
+  <% end %>
+
+  <% if empty_cell? %>
+    <td></td>
+  <% end %>
+<% end %>

data/app/components/sdr_view_components/tables/row_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    # Component for rendering a table row.
+    class RowComponent < BaseComponent
+      renders_many :cells, SdrViewComponents::Tables::CellComponent
+      renders_one :label_content
+
+      def initialize(label: nil, first_value: nil, values: [], value: nil, tooltip: nil, **row_options) # rubocop:disable Metrics/ParameterLists
+        # Provide either label or first_value but not both; these are rendered in the first column
+        # label renders with <th> (bold), first_value is a normal <td>
+        @label = label
+        @first_value = first_value
+        # Provide either value, values or cells (e.g. for content files).
+        @values = Array(value).presence || values
+        @tooltip = tooltip
+        @row_options = row_options
+
+        raise ArgumentError if label.present? && first_value.present?
+
+        super()
+      end
+
+      attr_reader :label, :values, :tooltip, :first_value, :row_options
+
+      def empty_cell?
+        label.present? && values.empty? && !cells?
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/tables/table_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Tables
+    # Component for rendering a table.
+    class TableComponent < BaseTableComponent
+      renders_many :rows, SdrViewComponents::Tables::RowComponent
+    end
+  end
+end

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

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title><%= content_for(:title) || 'Lookbook' %></title>
+
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <meta name="application-name" content="Lookbook">
+
+    <meta name="mobile-web-app-capable" content="yes">
+
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
+    <%# = tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
+
+    <link rel="icon" href="/icon.png" type="image/png">
+
+    <link rel="icon" href="/icon.svg" type="image/svg+xml">
+
+    <link rel="apple-touch-icon" href="/icon.png">
+
+    <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"
+>
+    <%= 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" %>
+
+    <%= stylesheet_link_tag 'sdr_view_components', 'data-turbo-track': 'reload' %>
+    <%= tag.link rel: 'stylesheet', href: "#{SdrViewComponents.configuration.component_library_url}/styles/sul.css" %>
+  </head>
+
+  <body>
+    <div class="container-fluid py-4">
+      <%= yield %>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+  </body>
+</html>

data/lib/sdr_view_components/configuration.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# SDR View Components module
+module SdrViewComponents
+  # Configuration class for the SDR View Components gem
+  class Configuration
+    attr_accessor :component_library_url
+
+    def initialize
+      # Default URL for the component library assets
+      @component_library_url = 'https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2026-01-27'
+    end
+  end
+
+  def self.configuration
+    @configuration ||= Configuration.new
+  end
+
+  def self.configure
+    yield configuration
+  end
+end

data/lib/sdr_view_components/engine.rb

@@ -7,19 +7,25 @@ module SdrViewComponents
   class Engine < ::Rails::Engine
     isolate_namespace SdrViewComponents
 
-    initializer 'sdr_view_components.view_component' do
-      require 'view_component/engine'
+    initializer 'sdr_view_components.preview_autoload', before: :set_autoload_paths do |app|
+      preview_path = root.join('spec/components/previews').to_s
+      app.config.autoload_paths |= [preview_path]
+    end
+
+    initializer 'sdr_view_components.preview_paths' do |app|
+      preview_path = root.join('spec/components/previews').to_s
 
-      # Tell VC where your previews live (inside the engine)
-      config.view_component.previews.paths << root.join('spec/components/previews')
+      app.config.view_component.previews.paths |= [preview_path] if app.config.view_component.respond_to?(:previews)
 
-      # Optional: which layout to wrap previews in (comes from the dummy app)
-      config.view_component.default_preview_layout = 'application'
+      # Lookbook direct config
+      if app.config.respond_to?(:lookbook) && app.config.lookbook.respond_to?(:preview_paths)
+        app.config.lookbook.preview_paths |= [preview_path]
+      end
     end
 
     initializer 'sdr_view_components.assets' do |app|
+      app.config.assets.paths << Engine.root.join('app', 'assets').to_s
       app.config.assets.paths << Engine.root.join('app', 'assets', 'stylesheets').to_s
-      app.config.assets.precompile += %w[sdr_view_components.css]
     end
 
     initializer 'sdr_view_components.helpers' do
@@ -27,5 +33,9 @@ module SdrViewComponents
         include SdrViewComponents::Helpers
       end
     end
+
+    initializer 'sdr_view_components.configure_lookbook' do
+      config.view_component.previews.default_layout = 'lookbook'
+    end
   end
 end

data/lib/sdr_view_components/error.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Error
+    class UnknownComponentIcon < StandardError; end
+  end
+end

data/lib/sdr_view_components/version.rb

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

data/lib/sdr_view_components.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 require 'sdr_view_components/version'
+require 'sdr_view_components/configuration'
 require 'sdr_view_components/engine'
+require 'sdr_view_components/error'
 require 'zeitwerk'
 
 loader = Zeitwerk::Loader.for_gem

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: sdr_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.14
+  version: 0.2.0
 platform: ruby
 authors:
 - Aaron Collier
 bindir: bin
 cert_chain: []
-date: 2026-02-27 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -61,11 +61,10 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/stylesheets/styles.scss
+- app/assets/sdr_view_components.css
 - app/components/base_component.rb
 - app/components/component_support/button_support.rb
 - app/components/component_support/css_classes.rb
-- app/components/component_support/file_hierarchy.rb
 - app/components/sdr_view_components/elements/alert_component.html.erb
 - app/components/sdr_view_components/elements/alert_component.rb
 - app/components/sdr_view_components/elements/banner_component.html.erb
@@ -98,6 +97,12 @@ files:
 - app/components/sdr_view_components/elements/skip_links_component.rb
 - app/components/sdr_view_components/elements/spinner_component.html.erb
 - app/components/sdr_view_components/elements/spinner_component.rb
+- app/components/sdr_view_components/elements/tabs/pane_component.html.erb
+- app/components/sdr_view_components/elements/tabs/pane_component.rb
+- app/components/sdr_view_components/elements/tabs/tab_component.html.erb
+- app/components/sdr_view_components/elements/tabs/tab_component.rb
+- app/components/sdr_view_components/elements/tabs/tab_list_component.html.erb
+- app/components/sdr_view_components/elements/tabs/tab_list_component.rb
 - app/components/sdr_view_components/elements/toast_component.html.erb
 - app/components/sdr_view_components/elements/toast_component.rb
 - app/components/sdr_view_components/elements/tooltip_component.html.erb
@@ -108,7 +113,6 @@ files:
 - app/components/sdr_view_components/forms/basic_radio_button_component.rb
 - app/components/sdr_view_components/forms/basic_text_area_component.rb
 - app/components/sdr_view_components/forms/basic_text_field_component.rb
-- app/components/sdr_view_components/forms/button_component.rb
 - app/components/sdr_view_components/forms/checkbox_component.rb
 - app/components/sdr_view_components/forms/field_component.html.erb
 - app/components/sdr_view_components/forms/field_component.rb
@@ -140,9 +144,24 @@ files:
 - app/components/sdr_view_components/structure/style_override_dark_component.rb
 - app/components/sdr_view_components/structure/style_override_light_component.html.erb
 - app/components/sdr_view_components/structure/style_override_light_component.rb
+- app/components/sdr_view_components/tables/base_table_component.html.erb
+- app/components/sdr_view_components/tables/base_table_component.rb
+- app/components/sdr_view_components/tables/cell_component.html.erb
+- app/components/sdr_view_components/tables/cell_component.rb
+- app/components/sdr_view_components/tables/header_component.html.erb
+- app/components/sdr_view_components/tables/header_component.rb
+- app/components/sdr_view_components/tables/list_cell_component.html.erb
+- app/components/sdr_view_components/tables/list_cell_component.rb
+- app/components/sdr_view_components/tables/raw_table_component.rb
+- app/components/sdr_view_components/tables/row_component.html.erb
+- app/components/sdr_view_components/tables/row_component.rb
+- app/components/sdr_view_components/tables/table_component.rb
+- app/views/layouts/lookbook.html.erb
 - config/routes.rb
 - lib/sdr_view_components.rb
+- lib/sdr_view_components/configuration.rb
 - lib/sdr_view_components/engine.rb
+- lib/sdr_view_components/error.rb
 - lib/sdr_view_components/helpers.rb
 - lib/sdr_view_components/helpers/icon_helper.rb
 - lib/sdr_view_components/version.rb
@@ -166,7 +185,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.2
+rubygems_version: 4.0.6
 specification_version: 4
 summary: Rails gem for providing SDR-specific ViewComponents.
 test_files: []

data/app/assets/stylesheets/styles.scss

@@ -1,118 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
-
-// Header
-.cardinal {
-  --bs-dark-rgb: var(--stanford-cardinal-rgb);
-}
-
-.container.without-progress-bar {
-  max-width: 960px;
-}
-
-.masthead {
-  color: white;
-
-  h1 {
-    font-size: 2.25rem;
-  }
-}
-
-// Submission form
-.header-help {
-  padding-left: 42px;
-}
-
-.header-help p:last-of-type {
-  margin-bottom: 0;
-}
-
-.character-circle {
-  @extend .d-inline-flex;
-  @extend .align-items-center;
-  @extend .justify-content-center;
-  @extend .rounded-circle;
-  @extend .text-white;
-
-  width: 28px;
-  height: 28px;
-  font-size: 1rem;
-}
-
-.character-circle.character-circle-disabled {
-  background-color: var(--stanford-60-black);
-}
-
-.character-circle.character-circle-success {
-  @extend .bg-success;
-}
-
-.character-circle.character-circle-blank {
-  @extend .border;
-  @extend .border-1;
-}
-
-.character-circle.character-circle-check {
-  font-family: bootstrap-icons !important;
-}
-
-.badge.badge-in-progress {
-  background-color: var(--stanford-60-black);
-}
-
-.badge.badge-completed {
-  @extend .text-bg-success;
-}
-
-.btn-group-toggle {
-  // Provides visible indication when selected.
-  label.btn {
-    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgb(var(--bs-btn-focus-shadow-rgb), .5);
-  }
-
-  input:checked + label  {
-    @extend .btn-primary;
-  }
-
-  input:not(:checked) + label  {
-    @extend .btn-outline-primary;
-  }
-
-  .btn-check:checked + .btn {
-    background-color: var(--stanford-digital-blue);
-    border-color: var(--stanford-digital-blue);
-  }
-
-  :not(.btn-check:checked) + .btn {
-    color: var(--stanford-digital-blue);
-    border-color: var(--stanford-digital-blue);
-  }
-}
-
-.card-step {
-  --bs-card-cap-padding-y: 1rem;
-}
-
-.banner.alert {
-  a.btn-primary {
-    color: white;
-  }
-}
-
-// Increase contrast for input borders
-.form-control, .form-select, .form-check-input {
-  border-color: var(--stanford-60-black);
-}

data/app/components/component_support/file_hierarchy.rb

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-module ComponentSupport
-  # Support methods for working with file hierarchies.
-  class FileHierarchy
-    # Determine the difference between the last path parts and the current path parts.
-    # @param [Array<String>] last_path_parts the last path parts (e.g., ['dir1', 'dir2'])
-    # @param [Array<String>] path_parts the current path parts
-    # @return [Array<String>] path parts from the current path parts that differ
-    def self.path_parts_diff(last_path_parts:, path_parts:)
-      return [] if last_path_parts == path_parts
-
-      matching_index = 0
-      loop do
-        break if path_parts[matching_index] != last_path_parts[matching_index]
-
-        matching_index += 1
-      end
-      path_parts.slice(matching_index..)
-    end
-  end
-end

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

@@ -1,42 +0,0 @@
-# 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