Update header and footer to new 2024 Illinois brand standards

config/install/block.block.illinois_framework_theme_main_menu.yml

@@ -16,9 +16,9 @@ plugin: 'system_menu_block:main'
 settings:
   id: 'system_menu_block:main'
   label: 'Main navigation'
-  provider: system
   label_display: '0'
+  provider: system
   level: 1
-  depth: 0
+  depth: 2
   expand_all_items: true
 visibility: {  }

illinois_framework_theme.info.yml

@@ -19,6 +19,9 @@ libraries-override:
 libraries:
   - illinois_framework_theme/global-styling
   - illinois_framework_theme/web-components
+  - illinois_framework_theme/brand-styles
+  - illinois_framework_theme/il-header
+  - illinois_framework_theme/il-footer
 
 # Regions
 regions:

illinois_framework_theme.libraries.yml

@@ -22,13 +22,20 @@ web-components:
   header: true
   css:
     theme:
-      https://cdn.toolkit.illinois.edu/2.16/toolkit.css:
+      https://contrib.webtheme.illinois.edu/toolkit-lite-v2/toolkit.css:
         type: external
         minified: true
   js:
-    https://cdn.toolkit.illinois.edu/2.16/toolkit.js:
+    https://contrib.webtheme.illinois.edu/toolkit-lite-v2/toolkit.js:
       type: external
       minified: true
+brand-styles:
+  header: true
+  css:
+    theme:
+      https://cdn.brand.illinois.edu/illinois.css:
+        type: external
+        minified: true
 ils-contentslider:
   header: true
   css:
@@ -40,6 +47,34 @@ ils-contentslider:
     https://contrib.webtheme.illinois.edu/ils-contentslider/contentslider.min.js:
       type: external
       minified: true
+il-header:
+  header: true
+  css:
+    theme:
+      https://cdn.brand.illinois.edu/components/il-header.css:
+        type: external
+        minified: true
+  js:
+    https://cdn.brand.illinois.edu/components/il-header.mjs:
+      type: external
+      minified: true
+      attributes:
+        type: module
+        blocking: render
+il-footer:
+  header: true
+  css:
+    theme:
+      https://cdn.brand.illinois.edu/components/il-footer.css:
+        type: external
+        minified: true
+  js:
+    https://cdn.brand.illinois.edu/components/il-footer.mjs:
+      type: external
+      minified: true
+      attributes:
+        type: module
+        blocking: render
 content-adjust:
   js:
     js/content.js: {}

scss/illinois-framework/_region.footer.scss

@@ -1,10 +1,43 @@
 il-footer {
 
-  &[slot="parent"] {
+  .footer-menus {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 0;
+    @include media-breakpoint-up(lg) {
+      grid-template-columns: repeat(2,1fr);
+      grid-gap: 60px;
+    }
+    nav {
+      @include media-breakpoint-up(lg) {
+        margin-bottom: 1rem;
+      }
+    }
 
-    p {
-      font-size: initial;
-      line-height: initial;
+    h2 {
+      font: 600 1.25rem/1.5 var(--il-font-sans);
+      margin-bottom: .75rem;
+      font-weight: 700;
+      border-bottom: 1px solid var(--il-blue);
+      padding-bottom: .75rem;
+    }
+    .col-md {
+      @include media-breakpoint-up(lg) {
+        padding-left: 0;
+      }
     }
+    .navbar-nav {
+      .nav-item {
+        .nav-link {
+          font: 400 18px/30px var(--il-font-sans);;
+          padding: .2rem 0;
+        }
+      }
+    }
+  }
+}
+il-footer *[slot=actions] a {
+  @include media-breakpoint-down(lg) {
+    margin: 0 .5rem .5rem 0 !important;
   }
 }

scss/illinois-framework/_region.header.scss

@@ -1,4 +1,16 @@
-.region-header {
+il-header {
   position: relative;
-  z-index: 101;
+  z-index: 101 !important;
+}
+il-header a[slot="site-name"], il-header a[slot="primary-unit"] {
+  text-decoration: none;
+  color: var(--il-blue);
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    color: var(--il-altgeld);
+  }
+}
+il-header-nav-section-with-link > a[slot="link"] {
+  white-space: wrap !important;
 }

scss/web-components/_web-components.footer.scss

@@ -4,12 +4,23 @@
   }
 }
 .il-footer-navigation {
+  padding-top: 0 !important;
   h2, h3, h4 {
-    color: white;
+    color: var(--il-blue);
+    border-bottom: none !important;
+  }
+  a {
+    color: var(--il-blue);
+    &:visited {
+      color: var(--il-blue);
+    }
   }
 }
 .il-footer-contact {
   p {
     color: white;
   }
 }
+.site.section {
+  gap: 0 !important;
+}

templates/layout/page--404.html.twig

@@ -45,7 +45,9 @@
 */
 #}
 <div class="layout-container">
-  {{ page.header }}
+  <il-header>
+    {{ page.header }}
+  </il-header>
   {{ page.breadcrumb }}
   {{ page.highlighted }}
   {{ page.help }}
@@ -82,6 +84,8 @@
     {{ page.content }}
     </div>
   {% endif %}
-  {{ page.footer }}
+  <il-footer>
+    {{ page.footer }}
+  </il-footer>
 </div>{# /.layout-container #}
 

templates/layout/page--content-page.html.twig

@@ -63,7 +63,9 @@
 {% endif %}
 
 <div class="layout-container">
-  {{ page.header }}
+  <il-header>
+    {{ page.header }}
+  </il-header>
   {{ page.breadcrumb }}
   {{ page.highlighted }}
   {{ page.help }}
@@ -111,5 +113,7 @@
   {{ page.content }}
   {% endif %}
 
-  {{ page.footer }}
+  <il-footer>
+    {{ page.footer }}
+  </il-footer>
 </div>{# /.layout-container #}

templates/layout/page--news.html.twig

@@ -45,7 +45,9 @@
 */
 #}
 <div class="layout-container">
-  {{ page.header }}
+  <il-header>
+    {{ page.header }}
+  </il-header>
   {{ page.breadcrumb }}
   {{ page.highlighted }}
   {{ page.help }}
@@ -62,6 +64,8 @@
     </div>
     {{ attach_library('illinois_framework_theme/content-adjust') }}
   </div>
-  {{ page.footer }}
-</div>{# /.layout-container #}
+    <il-footer>
+      {{ page.footer }}
+    </il-footer>
+  </div>{# /.layout-container #}
 

templates/layout/page--search.html.twig

@@ -46,7 +46,9 @@
 */
 #}
 <div class="layout-container">
-  {{ page.header }}
+  <il-header>
+    {{ page.header }}
+  </il-header>
   {{ page.breadcrumb }}
   {{ page.highlighted }}
   {{ page.help }}
@@ -58,5 +60,7 @@
     </div>
   </div>
   </main>
-  {{ page.footer }}
+  <il-footer>
+    {{ page.footer }}
+  </il-footer>
 </div>{# /.layout-container #}

templates/layout/page--spotlight.html.twig

@@ -64,7 +64,9 @@
 
 
 <div class="layout-container">
-  {{ page.header }}
+  <il-header>
+    {{ page.header }}
+  </il-header>
   {{ page.breadcrumb }}
   {{ page.highlighted }}
   {{ page.help }}
@@ -84,6 +86,8 @@
   </div>
   </main>
 
-  {{ page.footer }}
+  <il-footer>
+    {{ page.footer }}
+  </il-footer>
 </div>{# /.layout-container #}
 

templates/layout/page.html.twig

@@ -45,7 +45,9 @@
 */
 #}
 <div class="layout-container">
-  {{ page.header }}
+  <il-header>
+    {{ page.header }}
+  </il-header>
   {{ page.breadcrumb }}
   {{ page.highlighted }}
   {{ page.help }}
@@ -64,6 +66,7 @@
     </div>
   </div>
   </main>
-
-  {{ page.footer }}
+  <il-footer>
+    {{ page.footer }}
+  </il-footer>
 </div>{# /.layout-container #}

templates/navigation/menu--main--nav-main.html.twig

@@ -24,34 +24,42 @@
   We call a macro which calls itself to render the full tree.
   @see http://twig.sensiolabs.org/doc/tags/macro.html
 #}
-{{ menus.menu_links(items, attributes, 0) }}
-{% macro menu_links(items, attributes, menu_level) %}
+{% import _self as menus %}
+{#
+We call a macro which calls itself to render the full tree.
+@see http://twig.sensiolabs.org/doc/tags/macro.html
+#}
+{{ menus.build_menu(items, attributes, 0) }}
+
+{% macro build_menu(items, attributes, menu_level) %}
   {% import _self as menus %}
   {% if items %}
-    {% for item in items %}
-      {% set item_length = items|length %}
-      {% if menu_level == 0 and item.below %}
-        <il-nav-section {% if item_length >= 5 and loop.index > (item_length - 2) %}right="true"{% endif %}>
-          {# Check if there's <nolink> in the top-level menu link and remove the href if there is no link #}
-          {% if item.url.toString is not empty -%}
-            <a href={{ item.url }} slot="label">{{ item.title }}</a>
-          {% else %}
-            <a role="button" slot="label" tabindex="0">{{ item.title }}</a>
-          {% endif -%}
-          <ul class="il-subnav">
-            {% for item in item.below %}
-              <li>
-                <a href="{{ item.url }}">{{ item.title }}</a>
-              </li>
-            {% endfor %}
-          </ul>
-        </il-nav-section>
-      {% else %}
-        <il-nav-link>
-          <a href="{{ item.url }}" target="_self">{{ item.title }}</a>
-        </il-nav-link>
-      {% endif %}
-     {% endfor %}
+    <ul>
+      {% for item in items %}
+        {{ menus.add_link(item, attributes, menu_level) }}
+      {% endfor %}
+    </ul>
   {% endif %}
 {% endmacro %}
 
+{% macro add_link(item, attributes, menu_level) %}
+  {% import _self as menus %}
+  <li>
+    {% if item.below and item.url.toString is not empty %}
+      <il-header-nav-section-with-link>
+        <a slot="link" href="{{ item.url }}">{{ item.title }}</a>
+        {{ menus.build_menu(item.below, attributes, menu_level + 1) }}
+      </il-header-nav-section-with-link>
+    {% elseif item.below %}
+      <il-header-nav-section>
+        <span slot="label">{{ item.title }}</span>
+        {{ menus.build_menu(item.below, attributes, menu_level + 1) }}
+      </il-header-nav-section>
+    {% elseif item.url.toString is not empty -%}
+      <a href="{{ item.url }}">{{ item.title }}</a>
+    {% else %}
+      <span slot="label">{{ item.title }}</span>
+    {% endif -%}
+  </li>
+{% endmacro %}
+