Merge pull request #585 from sul-dlss/518-component-library

update header, footer, remove css, point to component library

app/assets/stylesheets/application.sass.scss

@@ -1,11 +1,8 @@
 // Entry point for your Sass build
 
-@import 'palette';
-
 // Custom bootstrap variables must be set or imported *before* bootstrap.
 @import 'variables';
 @import 'bootstrap/scss/bootstrap';
-@import 'library_hours_mixins';
 @import 'library_hours';
 @import 'global_alert';
 
@@ -35,7 +32,6 @@
 
 .editable-error-block {
   // position: absolute;
-  background-color: $color-cardinal-red;
   color: #fff;
   z-index: 1000;
 }
@@ -45,3 +41,7 @@
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+
+header {
+  --bs-dark-rgb: 130, 0, 0;
+}

app/assets/stylesheets/base.scss

@@ -30,15 +30,6 @@ label {
   font-weight: normal;
 }
 
-button:focus,
-embed:focus,
-input:focus,
-object:focus,
-select:focus,
-textarea:focus {
-  @include focus-outline;
-}
-
 .location-and-access {
   padding-right: 1ch;
 }

app/assets/stylesheets/layout.scss

@@ -1,48 +1,9 @@
-#outer-container,
-#topnav-container,
-#top-nav-bar {
-  border: 0;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.header-logo > a {
-  border-bottom: 0;
-}
-
 #main-container {
   #main-flashes {
     min-height: 0;
   }
 }
 
-#sul-logo {
-  border-bottom: 0;
-  float: left;
-}
-
-@media (min-width: 768px) {
-  #topnav,
-  #main-container {
-    width: 750px;
-  }
-}
-
-@media (min-width: 980px) {
-  #topnav,
-  #main-container {
-    width: 970px;
-  }
-}
-
-@media (min-width: 1200px) {
-  #topnav,
-  #main-container {
-    width: 1170px;
-  }
-}
-
 @media only screen and (max-width: 768px) {
   #main-container {
     padding: 0 15px;

app/assets/stylesheets/library_hours.scss

@@ -2,12 +2,7 @@
 @import "base";
 @import "layout";
 
-@import "top-navbar";
-@import "sul-footer";
-
 .date-range {
-  background-color: $color-beige-10;
-
   @include media-breakpoint-up(sm) {
     .date-input {
       padding-right: ($spacer * 0.75);

app/assets/stylesheets/variables.scss

@@ -1,15 +1,9 @@
-$sul-footer-bg-color: $color-beige-10;
-
 $gray-base: #000;
-$gray-dark: lighten($gray-base, 20%);
-$link-color: $gray-dark;
 $nav-color: #fbfbf9;
 
-$brand-primary: $color-cardinal-red;
 $pagination-active-bg: #696969;
 $pagination-active-border: #696969;
 
-$primary: $color-cardinal-red;
 /* $theme-colors: (
   "primary": $color-cardinal-red,
   "secondary": #6c757d,
@@ -21,46 +15,26 @@ $primary: $color-cardinal-red;
 $font-size-base: 0.94rem;
 $line-height-base: 1.5;
 
-$btn-default-color: $color-gray;
-$btn-default-bg: $color-beige-10;
-$btn-default-border: $color-beige-30;
-
-$link-color: #a26624;
-$link-hover-color: #a26624;
 $link-hover-decoration: none;
-$sul-link-color-border: #a26624;
 
 $font-size-h1: floor(($font-size-base * 2.986));
 $font-size-h2: floor(($font-size-base * 2.074));
 $font-size-h3: floor(($font-size-base * 1.728));
 $font-size-h4: floor(($font-size-base * 1.2));
 $headings-font-weight: 100;
 
-$body-bg: $color-beige-05;
 $font-family-sans-serif: "Source Sans Pro", "Arial Unicode MS", Helvetica,
   sans-serif;
 $txt-color: $gray-base;
 
 $gray-41-percent: #696969;
-$sul-focus-outline: #eaab00;
-
-$navbar-default-link-color: $color-cardinal-red;
 
 //@at-root: $brand-primary;
-$navbar-inverse-border: $color-dark-red;
-$navbar-inverse-link-color: $link-color;
-$navbar-inverse-link-hover-color: $link-color;
 
 $global-alert-color: rgb(204, 0, 0);
 
 // Note: include functions before variables to have access to mixins
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 
-$top-nav-bar-height: 35px;
-$brandbar-collapsed-height: 50px;
-$brandbar-height: 100px;
-$brandbar-padding-vertical: (($brandbar-height - $line-height-base) * 0.5);
-$sul-shadow-color: rgba(0, 0, 0, 0.2);
-
 $input-height-base: $input-height;

app/views/layouts/application.html.erb

@@ -14,6 +14,7 @@
     <%= csrf_meta_tags %>
     <%= content_for(:head) %>
     <%= stylesheet_link_tag "application" %>
+    <%= stylesheet_link_tag "https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2024-09-04/styles/sul.css" %>
     <%= javascript_importmap_tags %>
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-B544ZKTH0M"></script>
@@ -29,19 +30,13 @@
   </head>
 
   <body>
-    <div id="su-wrap"> <!-- #su-wrap start -->
-      <div id="su-content"> <!-- #su-content start -->
-        <div id="outer-container" class="container-fluid">
-          <%= render 'shared/top_navbar' %>
-          <section id="main-container" role="main" class="container pt-2 pb-3">
-            <%= breadcrumbs style: :bootstrap5 %>
-            <%= render 'shared/global_alert' %>
-            <%= render 'shared/flashes' %>
-            <%= yield %>
-          </section>
-        </div>
-      </div>
-    </div>
+    <%= render 'shared/top_navbar' %>
+    <main id="main-container" class="container pt-2 pb-3">
+      <%= breadcrumbs style: :bootstrap5 %>
+      <%= render 'shared/global_alert' %>
+      <%= render 'shared/flashes' %>
+      <%= yield %>
+    </main>
     <%= render 'shared/sul_footer' %>
   </body>
 </html>

app/views/libraries/_range.html.erb

@@ -26,7 +26,7 @@
 
         <div class="col-xs-12 d-flex" id="jump-term-group">
           <h3 class="visually-hidden">Jump to quarters &amp; holidays</h3>
-          <button id="jump-term" type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+          <button id="jump-term" type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             Quarters &amp; holidays <span class="caret"></span>
           </button>
           <ul class="dropdown-menu dropdown-menu-right" role="menu">