ISTWCMS-5635: local site footer - introduction of menu component, social icon...

ISTWCMS-5635: local site footer - introduction of menu component, social icon list and test of typography in site footer

src/patterns/01-core/mixins/_accessiblity.scss

@@ -50,3 +50,8 @@
     display: none;
   }
 }
+
+// Set the Uw use of off-screen class.
+.off-screen {
+  @include visually-hidden();
+}

src/patterns/03-layouts/site-footer/_site-footer.scss

@@ -93,6 +93,12 @@
       color: var(--uw-white-1);
     }
     table {
+      th{
+        color: var(--uw-black);
+      }
+      td{
+        color: var(--uw-black);
+      }
       caption{
         color: var(--uw-white-1);
       }

src/patterns/03-layouts/site-footer/site-footer.twig

@@ -16,7 +16,9 @@
     </div>
     {%  endif %}
     <div class="uw-site-footer__social-media">
-     social icons
+      {% include "@components/menu/menu--social/menu--social.twig" with {
+        social_media_placement: 'local-site-footer',
+      } %}
     </div>
     <div class="uw-site-footer__content">
       {{ body }}

src/patterns/04-components/_index.scss

@@ -2,6 +2,9 @@
 @forward 'button/button';
 @forward 'card/card';
 @forward 'image/image';
+@forward 'menu/menu';
+@forward 'menu/menu--social/menu--social';
+@forward 'social-media/social-media--icon/social-media--icon';
 @forward 'svg/svg';
 @forward 'tag-list/tag-list';
 @forward 'tag/tag';

src/patterns/04-components/menu/_menu.scss

+// @file
+// Styles for Menu.
+
+@use '../../01-core' as *;
+
+.menu {
+  @include list-unstyled;
+
+  @media print {
+    display: none;
+  }
+}
+
+.menu__item {
+  margin-bottom: 0;
+}

src/patterns/04-components/menu/menu--social/_menu--social.scss

+@use '../../../01-core' as *;
+
+.social-media-list {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--size-1);
+  justify-content: center;
+  list-style-type: none;
+  margin: 0 auto;
+  padding:0;
+  text-align:center;
+  width:100%;
+  @media(min-width: $screen-xs) {
+    margin: 0;
+    max-width: inherit;
+  }
+  @media(min-width: $screen-md) {
+    justify-content: flex-end;
+  }
+  li {
+    margin: 0;
+    padding:0;
+  }
+}
+.social-media-i {
+  &::before{
+    display:block;
+    height:100%;
+    width:100%;
+  }
+}
+.social-media-link {
+  background-color: var(--uw-white);
+  border-radius: 3px;
+  display:block;
+  height: 2.125rem;
+  padding: 0.225rem;
+  position: relative;
+  width: 2.125rem;
+  @media(min-width: $screen-lg) {
+    height: var(--size-5);
+    padding: 0.24rem;
+    width: var(--size-5);
+  }
+  &:hover,
+  &:focus{
+    background-color:transparent;
+    text-decoration: none;
+  }
+}

src/patterns/04-components/menu/menu--social/menu--social.twig

+<div class="uw-social-media">
+  <ul class="social-media-list {{ social_media_menu_class }}">
+    {% for item in social_media.menu_tree %}
+      <li class="social-media-list-item">
+        {% include "@components/social-media/social-media--icon/social-media--icon.twig" with {
+          "text": item.text,
+          "url": item.url,
+          "social_media_placement": social_media_placement
+        }%}
+      </li>
+    {% endfor %}
+  </ul>
+</div>

src/patterns/04-components/menu/menu--social/menu--social.yml

+social_media:
+  menu_tree:
+    - text: "Facebook"
+      url: "https://www.facebook.com/university.waterloo"
+    - text: "Twitter"
+      url: "https://twitter.com/uWaterloo"
+    - text: "YouTube"
+      url: "https://www.youtube.com/user/uwaterloo"
+    - text: "Instagram"
+      url: "https://www.instagram.com/uofwaterloo/"
+    - text: "LinkedIn"
+      url: "https://www.linkedin.com/edu/school?id=10875"
+social_media_placement: ""

src/patterns/04-components/menu/menu.twig

+{% import _self as menus %}
+
+{{ menus.menu_links(items, attributes, 0, menu_name) }}
+
+{% macro menu_links(items, attributes, menu_level, menu_name) %}
+  {% import _self as menus %}
+  {% if items %}
+    {% if menu_level == 0 %}
+
+      {% set menu_classes = [
+        'menu',
+        'menu--' ~ menu_name|clean_class,
+        attributes ? attributes.class
+      ]|join(' ')|trim %}
+
+      <ul class="{{ menu_classes }}" {{ attributes ? attributes|without('class') }}>
+    {% else %}
+      <ul class="menu menu__subnav">
+    {% endif %}
+
+    {% for item in items %}
+
+      {% set item_classes = [
+        'menu__item',
+        item.attributes ? item.attributes.class
+      ] %}
+
+      {% set link_classes = [
+        'menu__link',
+      ] %}
+
+      {% if item.below %}
+        {% set item_classes = item_classes|merge(['has-subnav']) %}
+        {% set link_classes = link_classes|merge(['has-subnav']) %}
+      {% endif %}
+
+      {% if item.in_active_trail %}
+        {% set item_classes = item_classes|merge(['is-active-trail']) %}
+        {% set link_classes = link_classes|merge(['is-active-trail']) %}
+      {% endif %}
+
+      {% if item.is_collapsed %}
+        {% set item_classes = item_classes|merge(['is-collapsed']) %}
+        {% set link_classes = link_classes|merge(['is-collapsed']) %}
+      {% endif %}
+
+      {% if item.is_expanded %}
+        {% set item_classes = item_classes|merge(['is-expanded']) %}
+        {% set link_classes = link_classes|merge(['is-expanded']) %}
+      {% endif %}
+
+      {% if item['original_link'].options.attributes.class %}
+        {% set original_link_class = item['original_link'].options.attributes.class %}
+        {% if original_link_class is not iterable %}
+          {% set original_link_class = [original_link_class] %}
+        {% endif %}
+        {% set link_classes = link_classes|merge(original_link_class) %}
+      {% endif %}
+
+      {% set item_classes = item_classes|join(' ')|trim %}
+      {% set link_classes = link_classes|join(' ')|trim %}
+
+      <li class="{{ item_classes }}" {{ item.attributes ? item.attributes|without('class') }}>
+        <a class="{{ link_classes }}" href="{{ item.url }}">{{ item.title }}</a>
+
+        {% if item.below %}
+          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

src/patterns/04-components/menu/menu.yml

+---
+menu_name: ''
+items:
+  - title: 'Link 1'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Link 2'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false

src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss

+@use '../../../01-core' as *;
+
+$social-accounts: 'facebook', 'twitter', 'youtube', 'instagram', 'linkedin', 'snapchat';
+
+.uw-footer{
+  .ifdsu{
+    height: 100%;
+    width: 100%;
+    &::before{
+       content:'';
+    }
+  }
+}
+.uw-footer__wrapper {
+  a{
+    @each $social in $social-accounts {
+      .fdsu-#{$social}::before {
+        @include svg-background-color(var(--uw-black),$social);
+      }
+    }
+    &:hover,
+    &:focus{
+      @each $social in $social-accounts {
+        .fdsu-#{$social}::before {
+          @include svg-background-color(var(--uw-gold),$social);
+        }
+      }
+    }
+  }
+}
+.uw-site-footer {
+  a {
+    @each $social in $social-accounts {
+      .fdsu-#{$social}::before {
+        @include svg-background-color(var(--uw-black-3),$social);
+      }
+    }
+    &:hover,
+    &:focus{
+      @each $social in $social-accounts {
+        .fdsu-#{$social}::before {
+          @include svg-background-color(var(--uw-white),$social);
+        }
+      }
+    }
+  }
+}

src/patterns/04-components/social-media/social-media--icon/social-media--icon.twig

+<a href="{{ url }}" class="social-media-link {{ social_media_placement }}" title="{{ text|lower }}">
+  <i class="ifdsu fdsu-{{ text|lower }} social-media-i {{ social_media_placement }}"></i>
+  <span class="off-screen">{{ text }}</span>
+</a>

src/patterns/04-components/social-media/social-media--icon/social-media--icon.yml

+text: "facebook"
+url: "https://www.facebook.com/university.waterloo"
+social_media_placement: "global-site-footer"