sdr_view_components 0.1.14 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e89b11e845efdc4fa1bea907cac71a0e4165853da5233d4007e15c829709a3e
-  data.tar.gz: 486b3bf6dbf1b657cd76d93327892feec81600502c1f75e3aa9578d108478660
+  metadata.gz: b973a9d37ca8cbaf8923757222f1e73ae754a72ca99731008c68d22c7be41f28
+  data.tar.gz: 6014055eb861360362ee8527f5f7d2afba60665428720df0e095982af8aa9c46
 SHA512:
-  metadata.gz: 9723c013dfb1a1ba6d6cc4af4c1170aec972539dbff1e6ae78065006b32233c812a66cb1b3b04b8d7a0909acd886783dc1f33d92af62ea3c290760e08be15f96
-  data.tar.gz: 4130c0034e46554ccc3e1e5fff29869a0aca37c7c718e75067fc5d1ab0763cb96ed1dd8a7cf96fd756f2641ca6e4857bdf2ff96d10093a91fbdfef0a91b614db
+  metadata.gz: ec8945789ecbc351308b32e6f7df8600e8b43d9bfe92ef9bd4013279b69a20a0eeebf5f4ea6cf6fb36946690a5564020e57e268826a145c1a0911d9cd1aad796
+  data.tar.gz: d5fe578fc6d4c376408b315536cf97d538dd19c466785e73472266d402663d95150f2ae5e7fe9095989e1c39bac616c88582067282863d893a3eebbfa35e2c1a

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 %>