sdr_view_components 0.1.0

data/app/components/sdr_view_components/structure/footer_component.html.erb

@@ -0,0 +1,141 @@
+<footer>
+  <section id="pre-footer" class="py-4" aria-label="Library footer">
+    <div class="container">
+      <div class="row row-gap-3">
+        <div id="sul-footer-img" class="d-none d-md-flex d-lg-none d-xl-flex col-sm-12 col-lg-3 col-xl-3 d-flex align-items-start justify-content-lg-start justify-content-md-center">
+          <a href="https://library.stanford.edu" class="prefooter-logo stacked-lg">Stanford University Libraries</a>
+        </div>
+        <section class="col-md-4 col-xl-3 primary-menu" aria-label="Main links">
+          <div class="d-block d-md-none d-lg-block d-xl-none mb-3">
+            <a href="https://library.stanford.edu" class="prefooter-logo">Stanford University Libraries</a>
+          </div>
+          <ul class="list-unstyled fw-semibold">
+            <li>
+              <a href="https://library.stanford.edu/all-locations-and-hours">All locations and hours
+                <i class="bi bi-arrow-right-short"></i></a>
+            </li>
+            <li>
+              <a href="https://library.stanford.edu/">Library website
+                <i class="bi bi-arrow-right-short"></i></a>
+            </li>
+            <li>
+              <a href="https://mylibrary.stanford.edu">My Account
+                <i class="bi bi-arrow-right-short"></i></a>
+            </li>
+          </ul>
+        </section>
+        <section class="col-md-4 col-xl-3 secondary-menu" aria-labelledby="get-help-header">
+          <header id="get-help-header" class="fw-semibold fs-5 mb-2">
+                Get help
+          </header>
+          <ul class="list-unstyled">
+            <li>
+              <a href="https://library.stanford.edu/contact-us">Contact us</a>
+            </li>
+            <li>
+              <a href="https://library.stanford.edu/library-accessibility">Library accessibility</a>
+            </li>
+            <li>
+              <a href="https://library-status.stanford.edu/">System status</a>
+            </li>
+            <li>
+              <a href="https://library.stanford.edu/ask/email/connection-problems">Report a connection problem</a>
+            </li>
+          </ul>
+        </section>
+        <section class="col-md-4 col-xl-3 secondary-menu" aria-labelledby="search-header">
+          <header id="search-header" class="fw-semibold fs-5 mb-2">
+                Search
+          </header>
+          <ul class="list-unstyled">
+            <li>
+              <a href="https://searchworks.stanford.edu/">SearchWorks Catalog</a>
+                  |
+              <a href="https://searchworks.stanford.edu/articles">Articles+</a>
+            </li>
+            <li>
+              <a href="https://archives.stanford.edu/">Archival Collections at Stanford</a>
+            </li>
+            <li>
+              <a href="https://spotlight.stanford.edu/">Spotlight Exhibits</a>
+            </li>
+            <li>
+              <a href="https://earthworks.stanford.edu/">EarthWorks</a>
+            </li>
+            <li>
+              <a href="https://guides.library.stanford.edu/">Guides</a>
+            </li>
+          </ul>
+        </section>
+      </div>
+    </div>
+  </section>
+  <section id="su-footer" class="text-white bg-dark pt-4 pb-4" aria-label="Stanford University footer">
+    <div class="container d-flex flex-column flex-lg-row align-items-center align-md-normal" title="Common Stanford resources">
+      <div class="mt-1 mb-2 align-self-lg-start">
+        <a class="su-logo" href="https://www.stanford.edu">Stanford<br>
+          <span class="su-logo-university">University</span></a>
+      </div>
+      <div class="ms-lg-5">
+        <nav aria-label="Global footer menu" class="d-flex flex-row gap-4 gap-sm-0 flex-sm-column justify-content-center justify-content-lg-start align-items-start align-items-sm-center align-items-lg-start">
+          <ul class="justify-content-center justify-content-lg-start fw-semibold gap-sm-2 gap-md-3 gap-lg-4 list-unstyled d-flex flex-column flex-sm-row">
+            <li>
+              <a href="https://www.stanford.edu">
+                    Stanford Home<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://visit.stanford.edu/plan/">
+                    Maps &amp; Directions<span class="visually-hidden">(link is external)</span></a>
+            </li>
+            <li>
+              <a href="https://www.stanford.edu/search/">
+                    Search Stanford<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://emergency.stanford.edu">
+                    Emergency Info<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+          </ul>
+          <ul class="justify-content-center justify-content-lg-start gap-sm-2 gap-md-3 gap-lg-4 list-unstyled d-flex flex-column flex-sm-row">
+            <li>
+              <a href="https://www.stanford.edu/site/terms/" title="Terms of use for sites">
+                    Terms of Use<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://www.stanford.edu/site/privacy/" title="Privacy and cookie policy">
+                    Privacy<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://uit.stanford.edu/security/copyright-infringement" title="Report alleged copyright infringement">
+                    Copyright<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://adminguide.stanford.edu/chapter-1/subchapter-5/policy-1-5-4" title="Ownership and use of Stanford trademarks and images">
+                    Trademarks<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://studentservices.stanford.edu/more-resources/student-policies/non-academic/non-discrimination" title="Non-discrimination policy">
+                    Non-Discrimination<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://www.stanford.edu/site/accessibility" title="Report web accessibility issues">
+                    Accessibility<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div class="text-center text-lg-start copyright">
+          <span class="text-nowrap">© Stanford University.</span><span class="text-nowrap">&nbsp; Stanford, California 94305.</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</footer>

data/app/components/sdr_view_components/structure/footer_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Structure
+    # Component for rendering page footer.
+    class FooterComponent < BaseComponent
+    end
+  end
+end

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

@@ -0,0 +1,65 @@
+<%= style_override %>
+
+<header>
+  <div class="identity-bar">
+    <div class="container">
+      <a class="su-brand-bar__logo" href="https://www.stanford.edu">Stanford University</a>
+    </div>
+  </div>
+  <%= tag.nav class: navbar_classes do %>
+    <div class="container">
+      <a class="mb-0 navbar-brand navbar-logo" href="https://library.stanford.edu">Stanford University Libraries</a>
+      <button
+        class="navbar-toggler navbar-toggler-right collapsed"
+        type="button"
+        data-toggle="collapse"
+        data-bs-toggle="collapse"
+        data-target="#user-util-collapse"
+        data-bs-target="#user-util-collapse"
+        aria-controls="user-util-collapse"
+        aria-expanded="false"
+        aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="d-md-block d-none">
+        <ul class="navbar-nav">
+          <% primary_navigation_links.each do |link| %>
+            <%= link %>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  <% end %>
+  <%= tag.div class: masthead_classes do %>
+    <div class="container">
+      <div class="d-flex flex-wrap align-items-end pt-3 pb-1 pb-md-3 gap-2">
+        <div class="d-flex align-items-end gap-2 flex-grow-1">
+          <span class="rosette-logo me-1 align-self-start flex-shrink-0" aria-hidden></span>
+          <div class="me-1 flex-grow-1">
+            <%= title %>
+            <%= subtitle %>
+          </div>
+        </div>
+        <div class="<%= navbar_classes %> ms-md-auto">
+          <nav class="collapse navbar-collapse align-items-start justify-content-md-end navbar-expand-md d-md-flex flex-column flex-md-row" aria-label="browse" id="user-util-collapse">
+            <% if secondary_navigation_links.any? %>
+              <hr class="d-md-none vw-100 my-0">
+              <ul class="navbar-nav justify-content-md-end gap-0 gap-md-4 w-100 fw-semibold">
+                <% secondary_navigation_links.each do |link| %>
+                  <%= link %>
+                <% end %>
+              </ul>
+            <% end %>
+            <hr class="d-md-none vw-100 my-0">
+            <ul class="navbar-nav d-md-none gap-0 w-100">
+              <% primary_navigation_links.each do |link| %>
+                <%= link %>
+              <% end %>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</header>

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

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Structure
+    # Component for rendering page header.
+    class HeaderComponent < BaseComponent
+      renders_many :primary_navigation_links
+      renders_many :secondary_navigation_links
+
+      VARIANT_MASTHEAD_CLASS = {
+        light: 'bg-light',
+        dark: 'bg-dark sky-dark',
+        white: 'border-bottom'
+      }.freeze
+
+      VARIANT_NAVBAR_CLASS = {
+        light: 'bg-light',
+        dark: 'bg-dark sky-dark'
+      }.freeze
+
+      # param title [String] The main application title text.
+      # param subtitle [String, nil] An optional subtitle text.
+      # param variant [Symbol] One of :light, :dark, :white - determines color scheme.
+      # param background_color [String, nil] Optional RGB color value for background (i.e. '1, 104, 149').
+      #                                      Used only when variant is :dark.
+      def initialize(title:, subtitle: nil, variant: :light, background_color: nil)
+        @title = title
+        @subtitle = subtitle
+        @variant = variant
+        @background_color = background_color
+        super()
+      end
+
+      attr_reader :variant, :background_color
+
+      def masthead_classes
+        merge_classes('masthead', VARIANT_MASTHEAD_CLASS[variant])
+      end
+
+      def navbar_classes
+        merge_classes('navbar navbar-expand-md', VARIANT_NAVBAR_CLASS[variant])
+      end
+
+      def style_override
+        return render SdrViewComponents::Structure::StyleOverrideLightComponent.new unless variant == :dark
+
+        render SdrViewComponents::Structure::StyleOverrideDarkComponent.new(background_color:)
+      end
+
+      def subtitle
+        return if @subtitle.blank?
+
+        tag.span @subtitle, class: 'h4 d-block my-1'
+      end
+
+      def title
+        tag.div(class: 'h1 my-0') do
+          link_to @title, '/'
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/structure/style_override_dark_component.html.erb

@@ -0,0 +1,9 @@
+<style>
+  :root {
+    --stanford-sky-dark-rgb: <%= background_color %>;
+  }
+
+  .sky-dark {
+    --bs-dark-rgb: var(--stanford-sky-dark-rgb);
+  }
+</style>

data/app/components/sdr_view_components/structure/style_override_dark_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Structure
+    # Component for proving style overrides for dark variant header.
+    # Used to set custom background color if provided.
+    class StyleOverrideDarkComponent < BaseComponent
+      def initialize(background_color:)
+        @background_color = background_color
+        super()
+      end
+
+      attr_reader :background_color
+
+      private
+
+      def render?
+        background_color.present?
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/structure/style_override_light_component.html.erb

@@ -0,0 +1,6 @@
+<style>
+  :root {
+    --identity-bar-bg-color: var(--stanford-cardinal);
+    --identity-bar-color: white;
+  }
+</style>

data/app/components/sdr_view_components/structure/style_override_light_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Structure
+    # Component for providing style overrides for light variant header.
+    # Switches the identity bar styling to the cardinal red background and white text.
+    class StyleOverrideLightComponent < BaseComponent; end
+  end
+end

data/config/routes.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+SdrViewComponents::Engine.routes.draw do
+end

data/lib/sdr_view_components/engine.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require 'view_component'
+
+module SdrViewComponents
+  # Engine class for the SDR View Components gem
+  class Engine < ::Rails::Engine
+    isolate_namespace SdrViewComponents
+
+    initializer 'sdr_view_components.view_component' do
+      require 'view_component/engine'
+
+      # Tell VC where your previews live (inside the engine)
+      config.view_component.previews.paths << root.join('spec/components/previews')
+
+      # Optional: which layout to wrap previews in (comes from the dummy app)
+      config.view_component.default_preview_layout = 'application'
+    end
+
+    initializer 'sdr_view_components.assets' do |app|
+      app.config.assets.paths << Engine.root.join('app', 'assets', 'stylesheets').to_s
+      app.config.assets.precompile += %w[sdr_view_components.css]
+    end
+  end
+end

data/lib/sdr_view_components/version.rb

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

data/lib/sdr_view_components.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require 'sdr_view_components/version'
+require 'sdr_view_components/engine'
+require 'zeitwerk'
+
+loader = Zeitwerk::Loader.for_gem
+loader.setup # ready!
+
+# SdrViewComponents module
+module SdrViewComponents
+end

metadata

@@ -0,0 +1,141 @@
+--- !ruby/object:Gem::Specification
+name: sdr_view_components
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Aaron Collier
+bindir: bin
+cert_chain: []
+date: 2025-12-04 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '8.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '8.0'
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: zeitwerk
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Rails gem for providing SDR-specific ViewComponents.
+email:
+- aaron.collier@stanford.edu
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/stylesheets/styles.scss
+- 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
+- app/components/sdr_view_components/elements/banner_component.rb
+- app/components/sdr_view_components/elements/breadcrumb_component.html.erb
+- app/components/sdr_view_components/elements/breadcrumb_component.rb
+- app/components/sdr_view_components/elements/breadcrumb_nav_component.html.erb
+- app/components/sdr_view_components/elements/breadcrumb_nav_component.rb
+- app/components/sdr_view_components/elements/button_component.rb
+- app/components/sdr_view_components/elements/button_link_component.rb
+- app/components/sdr_view_components/elements/navigation/dropdown_menu_component.html.erb
+- app/components/sdr_view_components/elements/navigation/dropdown_menu_component.rb
+- app/components/sdr_view_components/elements/navigation/nav_item_component.rb
+- app/components/sdr_view_components/elements/skip_links_component.html.erb
+- app/components/sdr_view_components/elements/skip_links_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
+- app/components/sdr_view_components/elements/tooltip_component.rb
+- app/components/sdr_view_components/forms/basic_checkbox_component.rb
+- app/components/sdr_view_components/forms/button_component.rb
+- app/components/sdr_view_components/forms/checkbox_component.html.erb
+- 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
+- app/components/sdr_view_components/forms/help_text_component.html.erb
+- app/components/sdr_view_components/forms/help_text_component.rb
+- app/components/sdr_view_components/forms/invalid_feedback_component.rb
+- app/components/sdr_view_components/forms/invalid_feedback_support.rb
+- app/components/sdr_view_components/forms/label_component.html.erb
+- app/components/sdr_view_components/forms/label_component.rb
+- app/components/sdr_view_components/forms/submit_component.html.erb
+- app/components/sdr_view_components/forms/submit_component.rb
+- app/components/sdr_view_components/forms/toggle_component.html.erb
+- app/components/sdr_view_components/forms/toggle_component.rb
+- app/components/sdr_view_components/forms/toggle_option_component.html.erb
+- app/components/sdr_view_components/forms/toggle_option_component.rb
+- app/components/sdr_view_components/structure/footer_component.html.erb
+- app/components/sdr_view_components/structure/footer_component.rb
+- app/components/sdr_view_components/structure/header_component.html.erb
+- app/components/sdr_view_components/structure/header_component.rb
+- app/components/sdr_view_components/structure/style_override_dark_component.html.erb
+- 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
+- config/routes.rb
+- lib/sdr_view_components.rb
+- lib/sdr_view_components/engine.rb
+- lib/sdr_view_components/version.rb
+homepage: https://github.com/sul-dlss/sdr_view_components
+licenses: []
+metadata:
+  homepage_uri: https://github.com/sul-dlss/sdr_view_components
+  source_code_uri: https://github.com/sul-dlss/sdr_view_components
+  rubygems_mfa_required: 'true'
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.4'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.2
+specification_version: 4
+summary: Rails gem for providing SDR-specific ViewComponents.
+test_files: []