From 7186deecd2580e655cc9e19a2ffaaefde4b441ad Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Mon, 20 Jun 2022 13:47:26 -0400
Subject: [PATCH] ISTWCMS-5635: local site footer - introduction of menu
component, social icon list and test of typography in site footer
---
.../01-core/mixins/_accessiblity.scss | 5 ++
.../03-layouts/site-footer/_site-footer.scss | 6 ++
.../03-layouts/site-footer/site-footer.twig | 4 +-
src/patterns/04-components/_index.scss | 3 +
src/patterns/04-components/menu/_menu.scss | 16 ++++
.../menu/menu--social/_menu--social.scss | 50 +++++++++++++
.../menu/menu--social/menu--social.twig | 13 ++++
.../menu/menu--social/menu--social.yml | 13 ++++
src/patterns/04-components/menu/menu.twig | 74 +++++++++++++++++++
src/patterns/04-components/menu/menu.yml | 17 +++++
.../_social-media--icon.scss | 47 ++++++++++++
.../social-media--icon.twig | 4 +
.../social-media--icon/social-media--icon.yml | 3 +
13 files changed, 254 insertions(+), 1 deletion(-)
create mode 100644 src/patterns/04-components/menu/_menu.scss
create mode 100644 src/patterns/04-components/menu/menu--social/_menu--social.scss
create mode 100644 src/patterns/04-components/menu/menu--social/menu--social.twig
create mode 100644 src/patterns/04-components/menu/menu--social/menu--social.yml
create mode 100644 src/patterns/04-components/menu/menu.twig
create mode 100644 src/patterns/04-components/menu/menu.yml
create mode 100644 src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
create mode 100644 src/patterns/04-components/social-media/social-media--icon/social-media--icon.twig
create mode 100644 src/patterns/04-components/social-media/social-media--icon/social-media--icon.yml
diff --git a/src/patterns/01-core/mixins/_accessiblity.scss b/src/patterns/01-core/mixins/_accessiblity.scss
index 133cedac..b1b87ae1 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 26a38422..8042ec93 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 933881a7..4bd6fccd 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 2a4bacb7..8f5bdd42 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 00000000..0485fef6
--- /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 00000000..7615068f
--- /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 00000000..3cfc73d9
--- /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 00000000..2358ec17
--- /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 00000000..cb901090
--- /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 00000000..b81194b1
--- /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 00000000..0819d71a
--- /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 00000000..d9a27940
--- /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 00000000..7bc50593
--- /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"
--
GitLab