diff --git a/src/patterns/01-core/mixins/_accessiblity.scss b/src/patterns/01-core/mixins/_accessiblity.scss
index 133cedac055173a85c46a8cb0c2adb34b8b88a78..b1b87ae1104d260536b0fb3ab542b92b8a1aaad1 100644
--- a/src/patterns/01-core/mixins/_accessiblity.scss
+++ b/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();
+}
diff --git a/src/patterns/03-layouts/site-footer/_site-footer.scss b/src/patterns/03-layouts/site-footer/_site-footer.scss
index 26a3842215af430e48451bfd451cbaa36a580b77..8042ec9391ab0b455c27cd35f2243dea65d8405d 100644
--- a/src/patterns/03-layouts/site-footer/_site-footer.scss
+++ b/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);
}
diff --git a/src/patterns/03-layouts/site-footer/site-footer.twig b/src/patterns/03-layouts/site-footer/site-footer.twig
index 933881a7207f8d815e1994059584ba33d3668446..4bd6fccd9a9310e6c2a4539080736f99be96555e 100644
--- a/src/patterns/03-layouts/site-footer/site-footer.twig
+++ b/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 }}
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index 2a4bacb79903126b9d18f7f500f71e3518df8b43..8f5bdd4260023fd1eb051eb0dae6dd143c32ca18 100644
--- a/src/patterns/04-components/_index.scss
+++ b/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';
diff --git a/src/patterns/04-components/menu/_menu.scss b/src/patterns/04-components/menu/_menu.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0485fef69d2b315e1f9a63688c2134467eee5101
--- /dev/null
+++ b/src/patterns/04-components/menu/_menu.scss
@@ -0,0 +1,16 @@
+// @file
+// Styles for Menu.
+
+@use '../../01-core' as *;
+
+.menu {
+ @include list-unstyled;
+
+ @media print {
+ display: none;
+ }
+}
+
+.menu__item {
+ margin-bottom: 0;
+}
diff --git a/src/patterns/04-components/menu/menu--social/_menu--social.scss b/src/patterns/04-components/menu/menu--social/_menu--social.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7615068fff0ca132aabd391e83b93b96620abdc5
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--social/_menu--social.scss
@@ -0,0 +1,50 @@
+@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;
+ }
+}
diff --git a/src/patterns/04-components/menu/menu--social/menu--social.twig b/src/patterns/04-components/menu/menu--social/menu--social.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3cfc73d92a92316353312ad9a69c716cea510512
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--social/menu--social.twig
@@ -0,0 +1,13 @@
+<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>
diff --git a/src/patterns/04-components/menu/menu--social/menu--social.yml b/src/patterns/04-components/menu/menu--social/menu--social.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2358ec1730ae2f8920d184908ae8d0c687646e67
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--social/menu--social.yml
@@ -0,0 +1,13 @@
+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: ""
diff --git a/src/patterns/04-components/menu/menu.twig b/src/patterns/04-components/menu/menu.twig
new file mode 100644
index 0000000000000000000000000000000000000000..cb9010905adc4e2faa89faa292d8f55a8640bae4
--- /dev/null
+++ b/src/patterns/04-components/menu/menu.twig
@@ -0,0 +1,74 @@
+{% 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 %}
diff --git a/src/patterns/04-components/menu/menu.yml b/src/patterns/04-components/menu/menu.yml
new file mode 100644
index 0000000000000000000000000000000000000000..b81194b1c9911d2ed60565d7edc8102f9a6887d2
--- /dev/null
+++ b/src/patterns/04-components/menu/menu.yml
@@ -0,0 +1,17 @@
+---
+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
diff --git a/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss b/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0819d71a1fbff9c2999d3a473696ffd88d043966
--- /dev/null
+++ b/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
@@ -0,0 +1,47 @@
+@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);
+ }
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/social-media/social-media--icon/social-media--icon.twig b/src/patterns/04-components/social-media/social-media--icon/social-media--icon.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d9a279406007eb909987c477f7d928a86e48bf7b
--- /dev/null
+++ b/src/patterns/04-components/social-media/social-media--icon/social-media--icon.twig
@@ -0,0 +1,4 @@
+<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>
diff --git a/src/patterns/04-components/social-media/social-media--icon/social-media--icon.yml b/src/patterns/04-components/social-media/social-media--icon/social-media--icon.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7bc50593f11d9a257861a312fd558e4b9f0eecec
--- /dev/null
+++ b/src/patterns/04-components/social-media/social-media--icon/social-media--icon.yml
@@ -0,0 +1,3 @@
+text: "facebook"
+url: "https://www.facebook.com/university.waterloo"
+social_media_placement: "global-site-footer"