sdr_view_components 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 20f53928d5e6a766683fd1b7a819ab74c6e84f4de231645236f46be3b44c322b
+  data.tar.gz: 4d49980807bbe8b136182652220ddffa9d43eb001704a5f3deb81bd70c432069
+SHA512:
+  metadata.gz: 836ba100594784e315565657e624e65cfceb433bb1af721628d2edaad0787cbab55c765b3e275b9f206eeec1adf79a2e89f74b619024abcd5486147c654a875c
+  data.tar.gz: 72c4838ad811a8ef3f5a7d4f16c33884b7699c31e11d0bc7d3c05ee4c6b5e6ecfb365f36ebaccb1c6f725853cf19948b41fcb173606d57dee348fb00e0f5d7ee

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Aaron Collier
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,75 @@
+[![CircleCI](https://dl.circleci.com/status-badge/img/gh/sul-dlss/sdr_view_components/tree/main.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/sul-dlss/sdr_view_components/tree/main)
+[![codecov](https://codecov.io/github/sul-dlss/sdr_view_components/graph/badge.svg?token=VGFL92KY3E)](https://codecov.io/github/sul-dlss/sdr_view_components)
+
+# SdrViewComponents
+
+A rails gem to provide reusable view components used throughout the SDR applications and implement
+component library assets.
+
+# NOTE: Under Development
+
+Until initial development is complete and this gem is published, it can only be used locally. Install by cloning the repository to your local system and then including it in your gemfile as:
+
+```
+gem 'sdr_view_components', path: '../sdr_view_components'
+```
+
+Or via github path
+
+## Requirements
+
+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">
+```
+
+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_link 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 `rgb_color_str` 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 %>
+```
+
+### General usage:
+
+```
+<% render SdrViewComponent::....>
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require 'bundler/setup'
+
+APP_RAKEFILE = File.expand_path('spec/dummy/Rakefile', __dir__)
+load 'rails/tasks/engine.rake'
+
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
+require 'rubocop/rake_task'
+
+RuboCop::RakeTask.new
+RSpec::Core::RakeTask.new(:spec)
+
+task default: %i[rubocop spec]

data/app/assets/stylesheets/styles.scss

@@ -0,0 +1,118 @@
+/*
+ * 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/base_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+# Base component.
+class BaseComponent < ViewComponent::Base
+  # Merge classes together.
+  #
+  # @param args [Array<String>, String] The classes to merge (array, classes, space separated classes).
+  # @return [String] The merged classes.
+  def merge_classes(*)
+    ComponentSupport::CssClasses.merge(*)
+  end
+
+  # Merge data-actions together.
+  #
+  # @param args [Array<String>, String] The actions to merge (array, classes, space separated classes).
+  # @return [String] The merged classes.
+  def merge_actions(*)
+    ComponentSupport::CssClasses.merge(*)
+  end
+
+  # Extract args with a given prefix.
+  #
+  # @param args [Hash] The args to extract from.
+  # @param prefix [String] The prefix to look for.
+  # @return [Hash] The extracted args with the prefix removed.
+  def args_for(args:, prefix:)
+    args.each_with_object({}) do |(key, value), h|
+      h[key.to_s.delete_prefix(prefix).to_sym] = value if key.to_s.start_with?(prefix)
+    end
+  end
+end

data/app/components/component_support/button_support.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ComponentSupport
+  # General support for buttons.
+  class ButtonSupport
+    def self.classes(variant: nil, size: nil, classes: [], bordered: true)
+      ComponentSupport::CssClasses.merge('btn',
+                                         variant ? "btn-#{variant}" : nil,
+                                         size ? "btn-#{size}" : nil,
+                                         bordered ? nil : %w[border border-0],
+                                         classes)
+    end
+  end
+end

data/app/components/component_support/css_classes.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module ComponentSupport
+  # Helper methods for CSS classes.
+  class CssClasses
+    # Merge classes together.
+    #
+    # @param args [Array<String>, String] The classes to merge (array, classes, space separated classes).
+    # @return [String] The merged classes.
+    def self.merge(*args)
+      args.map do |arg|
+        Array(arg&.split)
+      end.flatten.compact.uniq.join(' ').presence
+    end
+  end
+end

data/app/components/component_support/file_hierarchy.rb

@@ -0,0 +1,22 @@
+# 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/elements/alert_component.html.erb

@@ -0,0 +1,14 @@
+<%= tag.div role:, class: classes, data:, id: do %>
+  <% if icon? %>
+    <%= tag.div class: icon_classes, role: 'img', 'aria-label': "#{variant} alert icon" %>
+  <% end %>
+  <div class="text-body">
+    <% if title.present? %>
+        <div class="fw-semibold"><%= title %></div>
+    <% end %>
+    <%= content %>
+  </div>
+  <% if dismissible? %>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    # Component for rendering an alert.
+    class AlertComponent < BaseComponent
+      # NOTE: This component has been altered from the H3 version.
+
+      ICONS = {
+        danger: 'bi bi-exclamation-triangle-fill',
+        success: 'bi bi-check-circle-fill',
+        note: 'bi bi-exclamation-circle-fill',
+        info: 'bi bi-info-circle-fill',
+        warning: 'bi bi-exclamation-triangle-fill'
+      }.freeze
+
+      # Variants are :danger, :success, :note, :info, :warning, :input
+      # input is not part of the component library
+      def initialize(title: nil, variant: :info, dismissible: false, data: {}, classes: [], id: nil, # rubocop:disable Metrics/ParameterLists
+                     role: 'alert')
+        raise ArgumentError, 'Invalid variant' unless %i[danger success note info warning
+                                                         input].include?(variant.to_sym)
+
+        @title = title
+        @variant = variant.to_sym
+        @dismissible = dismissible
+        @data = data
+        @classes = classes
+        @id = id
+        @role = role
+        super()
+      end
+
+      attr_reader :title, :variant, :data, :id, :role
+
+      def classes
+        merge_classes(%w[alert d-flex shadow-sm align-items-center], variant_class, dismissible_class, @classes)
+      end
+
+      def variant_class
+        "alert-#{variant}"
+      end
+
+      def dismissible_class
+        'alert-dismissible' if dismissible?
+      end
+
+      def dismissible?
+        @dismissible
+      end
+
+      def icon?
+        ICONS.key?(variant)
+      end
+
+      def icon_classes
+        merge_classes('fs-3 me-3 align-self-center d-flex justify-content-center', ICONS[variant])
+      end
+
+      def render?
+        title.present? || content.present?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<%= tag.div role:, class: classes, 'aria-label': aria_label do %>
+  <%= tag.div class: icon_classes, role: 'img', 'aria-label': "#{variant} banner icon" %>
+  <div class="text-body">
+    <div class="d-flex">
+      <div class="p-3 flex-grow-1">
+        <%= header %>
+        <% if title %>
+          <div class="banner-header d-flex align-items-center justify-content-between mt-3 fw-bold">
+            <%= title %>
+          </div>
+        <% end %>
+        <% if body %>
+          <div class="banner-body">
+            <%= body %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    # Banner component for displaying messages, welcomes, etc.
+    class BannerComponent < BaseComponent
+      renders_one :header
+      renders_one :body
+
+      ICONS = {
+        note: 'bi bi-exclamation-circle-fill',
+        success: 'bi bi-check-circle-fill',
+        warning: 'bi bi-exclamation-triangle-fill',
+        info: 'bi bi-info-circle-fill',
+        danger: 'bi bi-exclamation-triangle-fill'
+      }.freeze
+
+      def initialize(title: nil, variant: :note, classes: [], role: 'banner', aria_label: nil)
+        @title = title
+        @variant = variant.to_sym
+        @classes = classes
+        @role = role
+        @aria_label = aria_label
+        raise ArgumentError, "Unknown variant: #{variant}" unless ICONS.key?(variant)
+
+        super()
+      end
+
+      attr_reader :title, :variant, :role, :aria_label
+
+      def icon_classes
+        merge_classes('fs-3 me-3 align-self-center d-flex justify-content-center', ICONS[variant])
+      end
+
+      def classes
+        merge_classes('alert banner d-flex shadow-sm align-items-center p-3 mb-3 border-start', "alert-#{variant}",
+                      @classes)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= tag.li class: classes do %>
+  <% if link.present? %>
+    <%= link_to truncated_text, link, title: text %>
+  <% else %>
+    <%= truncated_text %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    # Displays an item in the top breadcrumb navigation
+    class BreadcrumbComponent < BaseComponent
+      def initialize(text:, link: nil, active: false, truncate_length: 150)
+        @text = text
+        @link = link
+        @active = active
+        @truncate_length = truncate_length
+        super()
+      end
+
+      attr_reader :text, :link
+
+      def truncated_text
+        truncate(text, length: @truncate_length)
+      end
+
+      def classes
+        return 'breadcrumb-item active' if link.nil? || @active
+
+        'breadcrumb-item'
+      end
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+<% content_for(:title, page_title_from_breadcrumbs) # set the page's html title from the breadcrumb nav %>
+<div class="breadcrumbs mb-5">
+  <nav id="breadcrumbs" aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <% breadcrumbs.each do |breadcrumb| %>
+        <%= breadcrumb %>
+      <% end %>
+    </ol>
+  </nav>
+</div>

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    # Displays the top breadcrumb navigation
+    class BreadcrumbNavComponent < BaseComponent
+      renders_many :breadcrumbs, types: {
+        default: {
+          renders: BreadcrumbComponent, as: :breadcrumb
+        },
+        title: {
+          renders: ->(**args) { BreadcrumbComponent.new(truncate_length: 75, **args) }, as: :title_breadcrumb
+        },
+        collection: {
+          renders: ->(**args) { BreadcrumbComponent.new(truncate_length: 50, **args) }, as: :collection_breadcrumb
+        }
+      }
+
+      def page_title_from_breadcrumbs
+        breadcrumbs.filter_map(&:truncated_text).unshift('SDR').join(' | ')
+      end
+    end
+  end
+end

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    # Generic button component
+    class ButtonComponent < BaseComponent
+      def initialize(label: nil, classes: [], variant: nil, size: nil, bordered: true, **options) # rubocop:disable Metrics/ParameterLists
+        @label = label
+        @classes = classes
+        @variant = variant
+        @size = size
+        @options = options
+        @bordered = bordered
+        super()
+      end
+
+      attr_reader :options, :label
+
+      def call
+        tag.button(
+          class: ComponentSupport::ButtonSupport.classes(variant: @variant, size: @size, classes: @classes,
+                                                         bordered: @bordered),
+          type: 'button',
+          **options
+        ) do
+          label || content
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    # Component for a button that is a link
+    class ButtonLinkComponent < BaseComponent
+      def initialize(link:, label: nil, variant: :primary, classes: [], bordered: true, size: nil, **options) # rubocop:disable Metrics/ParameterLists
+        @link = link
+        @label = label
+        @variant = variant
+        @options = options
+        @classes = classes
+        @bordered = bordered
+        @size = size
+        super()
+      end
+
+      attr_reader :link, :label
+
+      def call
+        link_to(link, class: ComponentSupport::ButtonSupport.classes(classes: @classes, variant: @variant,
+                                                                     bordered: @bordered, size: @size),
+                      **@options) do
+          label || content
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/navigation/dropdown_menu_component.html.erb

@@ -0,0 +1,13 @@
+<li class="nav-item dropdown">
+  <button
+    class="nav-link logout-dropdown dropdown-toggle"
+    data-bs-toggle="dropdown"
+    aria-expanded="false">
+    <%= text %>
+  </button>
+  <ul class="dropdown-menu">
+    <%= items.map do |item| %>
+      <li><%= item %></li>
+    <% end %>
+  </ul>
+</li>

data/app/components/sdr_view_components/elements/navigation/dropdown_menu_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Navigation
+      # Component for rendering a dropdown menu in the navigation bar.
+      class DropdownMenuComponent < BaseComponent
+        renders_many :items
+
+        def initialize(text:)
+          @text = text
+          super()
+        end
+
+        attr_reader :text
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/navigation/nav_item_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Navigation
+      # Component for navigation item link.
+      class NavItemComponent < BaseComponent
+        def initialize(text:, path:, data: {})
+          @text = text
+          @path = path
+          @data = data
+          super()
+        end
+
+        attr_reader :text, :path, :data
+
+        def call
+          tag.li class: 'nav-item' do
+            link_to text, path, class: 'nav-link', data:
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<nav id="skip-link" class="visually-hidden-focusable" aria-label="Skip links">
+  <div class="container-xl">
+    <a class="d-inline-flex m-1 py-2 px-3" href="#main-container">Skip to main content</a>
+  </div>
+</nav>