8.5.9

- D8CORE-3161: moving pager css to theme (#242)
- D8CORE-4643: moving to a single filter by menu (#237)
- D8CORE-4714: adding the title description to the secondary menu links (#241)
- Updated font awesome library to 5.15.4
- D8CORE-4359 Adding an underline to the action-link (#238)

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Stanford Basic Theme
 
+
+8.x-5.9
+--------------------------------------------------------------------------------
+_Release Date: 2021-09-03
+
+- D8CORE-3161: moving pager css to theme (#242)
+- D8CORE-4643: moving to a single filter by menu (#237)
+- D8CORE-4714: adding the title description to the secondary menu links (#241)
+- Updated font awesome library to 5.15.4
+- D8CORE-4359 Adding an underline to the action-link (#238)
+
 8.x-5.8
 --------------------------------------------------------------------------------
 _Release Date: 2021-07-19_

src/js/stanford_basic.behavior.js

@@ -22,8 +22,7 @@ export default {
       // Validate there is a skip link for the secondary navigation. If not,
       // remove the skip link. If the mobile hamburger is visible, remove the link.
       var $sn = $('#secondary-navigation', context).length;
-      var $pn = $('.menu--stanford-publication-topics', context).length;
-      if (!$sn && !$pn) {
+      if (!$sn) {
         $('.su-skipnav--secondary', context).remove();
       }
 
@@ -78,6 +77,19 @@ export default {
         }
       }
 
+      /**
+       * Open and close on the filter menu: News, People, Publications, Events
+       */
+      $('.topics__collapsable-menu', context).click(function () {
+        $(this).toggleClass('show');
+        if ($(this).siblings('.menu').css('display') != 'none') {
+          $(this).attr('aria-expanded', 'true');
+        }
+        else {
+          $(this).attr('aria-expanded', 'false');
+        }
+      });
+
     })(jQuery);
   },
 

src/scss/components/all/_link--pager.scss

@@ -0,0 +1,17 @@
+@charset 'UTF-8';
+
+// Load more button used on filtered pages and 
+// paragraph lists.
+
+.js-pager__items {
+    text-align: center;
+
+    .pager__item {
+      display: inline-block;
+
+      .button {
+        @include button-primary;
+      }
+    }
+}
+

src/scss/components/all/index.scss

@@ -1,3 +1,4 @@
 @charset 'UTF-8';
 
-@import 'vertical-spacing';
+@import 'link--pager';
+@import 'vertical-spacing';

src/scss/components/filter-menu/_filter-menu.scss

@@ -0,0 +1,156 @@
+@charset "UTF-8";
+
+//
+// Filter menu
+//
+
+// Changing the layout for the filtered pages.
+@include grid-media-max('lg') {
+  .left-region {
+    &.flex-lg-3-of-12 {
+      flex: auto;
+      max-width: 100%;
+    }
+  }
+}
+
+.filter-menu {
+  @include modular-spacing('padding', 3);
+
+  border: 1px solid $su-color-cool-grey-25;
+
+  .topics__collapsable-menu {
+    @include type-e;
+    @include padding(0);
+
+    background-color: transparent;
+    color: $su-color-bright-blue;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: $su-font-semi-bold;
+    text-align: left;
+    text-decoration: none;
+    width: 100%;
+
+    @include grid-media('xl') {
+      @include modular-spacing('margin-bottom', 2);
+    }
+
+    &.show {
+      @include modular-spacing('margin-bottom', 2);
+
+      @include grid-media('xl') {
+        margin-bottom: 0;
+
+        & + .menu {
+          & > li {
+            &.menu-item {
+              &:last-of-type {
+                padding-bottom: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+
+    .su-link--jump {
+      float: right;
+    }
+
+    @include grid-media-max('lg') {
+      &::before {
+        @include small-paragraph;
+        @include padding(null 15px null null);
+
+        color: $su-color-bright-blue;
+        content: "\f1de"; // Placeholder Icon until SU ones in place.
+        font-family: 'Font Awesome 5 Free';
+        font-weight: $su-font-semi-bold; // Need this for the new version of FA. Will go away later.
+      }
+    }
+  }
+
+  .menu {
+    @include margin(0);
+    @include padding(0);
+
+    .menu-item {
+      @include modular-spacing('padding-bottom', 2);
+      @include modular-spacing('padding-left', 0);
+      @include small-paragraph;
+
+      a {
+        color: $su-color-black;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    & > li {
+      &.menu-item {
+        &:last-of-type {
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    .menu-item--active-trail {
+      &::before {
+        @include small-paragraph;
+
+        color: $su-color-bright-blue;
+        content: "\f00c"; ///* Need to switch to the SU icons.
+        font-family: 'Font Awesome 5 Free';
+        font-weight: $su-font-semi-bold; // Need this for the new version of FA. Will go away later.
+        left: 35px;
+        position: absolute;
+      }
+
+      .is-active {
+        color: $su-color-bright-blue;
+      }
+    }
+  }
+
+  // Filter open/close for xs-lg
+  @include grid-media-max('lg') {
+    .menu {
+      display: none;
+    }
+
+    .topics__collapsable-menu {
+      &.show {
+        & + .menu {
+          display: block;
+        }
+      }
+    }
+  }
+
+
+  // Filter open/close for xl
+  @include grid-media('xl') {
+    .menu {
+      display: block;
+    }
+
+    .topics__collapsable-menu {
+      &.show {
+        + .menu {
+          display: none;
+        }
+      }
+    }
+  }
+
+}

src/scss/components/filter-menu/index.scss

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+///
+/// ROLL UP
+///
+
+@import 'filter-menu';

src/scss/components/index.scss

@@ -29,6 +29,8 @@
 @import
 'all/index', // All comes first so others can override.
 'alert/index',
+'filter-menu/index',
+'link/index.scss',
 'lockup/index',
 'masthead/index',
 'multi-menu/index',

src/scss/components/link/_link--action.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+.su-link--action {
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: underline;
+  }
+
+}

src/scss/components/link/index.scss

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+///
+/// ROLL UP
+///
+
+@import 'link--action'

stanford_basic.info.yml

@@ -2,7 +2,7 @@ name: 'Stanford Basic'
 type: theme
 description: 'Stanford Basic Branding Theme.'
 package: Stanford
-version: 8.x-5.8
+version: 8.x-5.9
 core_version_requirement: ^9
 'base theme': stable9
 regions:

stanford_basic.libraries.yml

@@ -130,11 +130,11 @@ user_login:
       dist/css/user_login.css: {  }
 
 fontawesome:
-  version: 5.7.1
-  remote: https://use.fontawesome.com/releases/v5.7.1/css/all.css
+  version: 5.15.4
+  remote: https://use.fontawesome.com/releases/v5.15.4/css/all.css
   license:
     name: FontAwesome
     url: http://fontawesome.io/license/
   css:
     base:
-      //use.fontawesome.com/releases/v5.7.1/css/all.css: {}
+      //use.fontawesome.com/releases/v5.15.4/css/all.css: {}

stanford_basic.theme

@@ -334,3 +334,18 @@ function stanford_basic_preprocess_menu_local_task(&$variables) {
     $variables['attributes']['class'][] = 'page-content-label';
   }
 }
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter().
+ */
+function stanford_basic_theme_suggestions_block_alter(array &$suggestions, array $variables) {
+  if ($variables['elements']['#base_plugin_id'] == 'system_menu_block') {
+    $taxonomy_menu = \Drupal::entityTypeManager()
+      ->getStorage('taxonomy_menu')
+      ->loadByProperties(['menu' => $variables['elements']['#derivative_plugin_id']]);
+    if (!empty($taxonomy_menu)) {
+      $suggestions[] = 'block__system_menu_block__filter_by';
+    }
+  }
+}
+

templates/block/block--system-menu-block--filter-by.html.twig

@@ -0,0 +1,68 @@
+{#
+/**
+ * @file
+ * Theme override for a menu block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See http://juicystudio.com/article/screen-readers-display-none.php and
+ * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ */
+#}
+{%
+  set classes = [
+  'block',
+  'block-menu',
+  'navigation',
+  'menu--' ~ derivative_plugin_id|clean_class,
+  'filter-menu',
+]
+%}
+{% set menu_class = 'topics__collapsable-menu' %}
+{% set heading_id = (configuration.id ~ '-menu')|clean_id %}
+{% set attributes = attributes.setAttribute('id', heading_id) %}
+{% set button_label = ('button-label')|clean_id %}
+{% set attributes = attributes.setAttribute('aria-labelledby', button_label) %}
+{% set attributes = attributes.addClass(classes) %}
+
+<a href="#main-content" class="visually-hidden focusable su-skipnav su-skipnav--content">{{ 'Skip to main content'|t }}</a>
+<nav{{ attributes }}>
+  <div id="secondary-navigation" tabindex="-1" class="visually-hidden focusable">{{ 'Secondary Navigation'|t }}</div>
+  {# Label. If not displayed, we still provide it for screen readers. #}
+  {% if not configuration.label_display %}
+    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+  {% endif %}
+  {{ title_prefix }}
+  <button{{ title_attributes.setAttribute('class', menu_class).setAttribute('id', button_label) }}>
+    {{ configuration.label }}
+    <span class="su-link su-link--jump"></span>
+  </button>
+  {{ title_suffix }}
+
+  {# Menu. #}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</nav>

templates/block/block--system-menu-block.html.twig

@@ -40,15 +40,7 @@
   ]
 %}
 {% set heading_id = (configuration.id ~ '-menu')|clean_id %}
-{# For Publications adding the skip links to the side menu but not other cases. #}
-{% set url = url('<current>') %}
-{% if 'publications' in url|render|render %}
-  <a href="#main-content" class="visually-hidden focusable su-skipnav su-skipnav--content">{{ 'Skip to main content'|t }}</a>
-{% endif %}
 <div {{ attributes.addClass(classes) }}>
-  {% if 'publications' in url|render|render %}
-    <div id="secondary-navigation" tabindex="-1" class="visually-hidden focusable">{{ 'Secondary Navigation'|t }}</div>
-  {% endif %}
   {# Label. If not displayed, we still provide it for screen readers. #}
   {% if not configuration.label_display %}
     {% set title_attributes = title_attributes.addClass('visually-hidden') %}