From 84745bbe9e9dd639e6197cbd3598a09341e4db3e Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Mon, 20 Jun 2022 15:21:20 -0400
Subject: [PATCH] ISTWCMS-5634: migration of footer , using menu component,
territorial statement, contact-info
---
src/patterns/01-core/mixins/_uw-mixins.scss | 16 +--
src/patterns/03-layouts/footer/_footer.scss | 19 +--
src/patterns/03-layouts/footer/footer.twig | 16 ++-
.../03-layouts/site-footer/site-footer.twig | 3 +
src/patterns/04-components/_index.scss | 5 +-
.../contact-info/_contact-info.scss | 13 +++
.../contact-info/contact-info.twig | 24 ++++
.../menu/menu--footer/_menu--footer.scss | 109 ++++++++++++++++++
.../menu/menu--footer/menu--footer.twig | 4 +
.../menu/menu--footer/menu--footer.yml | 66 +++++++++++
.../_territorial-statement.scss | 32 +++++
.../territorial-statement.twig | 5 +
.../territorial-statement.yml | 2 +
13 files changed, 293 insertions(+), 21 deletions(-)
create mode 100644 src/patterns/04-components/contact-info/_contact-info.scss
create mode 100644 src/patterns/04-components/contact-info/contact-info.twig
create mode 100644 src/patterns/04-components/menu/menu--footer/_menu--footer.scss
create mode 100644 src/patterns/04-components/menu/menu--footer/menu--footer.twig
create mode 100644 src/patterns/04-components/menu/menu--footer/menu--footer.yml
create mode 100644 src/patterns/04-components/territorial-statement/_territorial-statement.scss
create mode 100644 src/patterns/04-components/territorial-statement/territorial-statement.twig
create mode 100644 src/patterns/04-components/territorial-statement/territorial-statement.yml
diff --git a/src/patterns/01-core/mixins/_uw-mixins.scss b/src/patterns/01-core/mixins/_uw-mixins.scss
index 3b1506b1..14f979a6 100644
--- a/src/patterns/01-core/mixins/_uw-mixins.scss
+++ b/src/patterns/01-core/mixins/_uw-mixins.scss
@@ -23,9 +23,9 @@ $test-color-12: var(--green-5);
margin-left: auto;
margin-right: auto;
max-width: $value;
- padding: 0 var(--size-1);
+ padding: 0 var(--size-2);
- @include xl{
+ @media(min-width: 75rem) {
padding-left: 0;
padding-right: 0;
}
@@ -39,7 +39,7 @@ $test-color-12: var(--green-5);
@mixin uw-full-width-padding {
max-width: 100%;
- padding: 0 var(--size-1);
+ padding: 0 var(--size-2);
width: 100%;
}
@@ -71,7 +71,7 @@ $test-color-12: var(--green-5);
max-width: inherit;
padding: inherit;
- @media(min-width: $screen-xl) {
+ @media(min-width: 75rem) {
padding-left:inherit;
padding-right:inherit;
}
@@ -324,7 +324,7 @@ $test-color-12: var(--green-5);
@include align-items(flex-start);
width: 100%;
- @media(min-width: $screen-md) {
+ @media(min-width: 48.06rem) {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
@@ -339,7 +339,7 @@ $test-color-12: var(--green-5);
}
}
- @media(min-width: $screen-lg) {
+ @media(min-width: 63.1875rem) {
width: 30%;
.uw-contained-width--wide &{
@@ -353,13 +353,13 @@ $test-color-12: var(--green-5);
align-self: flex-start;
width: 100%;
- @media(min-width: $screen-md) {
+ @media(min-width: 48.06rem) {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
}
- @media(min-width: $screen-lg) {
+ @media(min-width: 63.1875rem) {
//width: 30%;
}
}
diff --git a/src/patterns/03-layouts/footer/_footer.scss b/src/patterns/03-layouts/footer/_footer.scss
index 7524bf50..1377c404 100644
--- a/src/patterns/03-layouts/footer/_footer.scss
+++ b/src/patterns/03-layouts/footer/_footer.scss
@@ -8,7 +8,11 @@
padding: 0;
width: 100%;
&__wrapper {
- @include layout-constrain;
+ @include uw-contained-width();
+ padding: var(--size-2);
+ @media(min-width: $screen-xl) {
+ padding: var(--size-2) 0;
+ }
display: grid;
grid-template-columns: 100%;
padding-top: var(--size-1);
@@ -24,8 +28,8 @@
}
}
&__address {
- //font-family: gesso-font-family(systemmedium);
- //font-size: gesso-font-size(-1);
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-00);
-webkit-font-smoothing: antialiased;
grid-column: 1 / 3;
grid-row: 1 / 2;
@@ -34,7 +38,7 @@
padding: var(--size-1) 0 var(--size-4);
text-align: center;
@media(min-width: $screen-md) {
- //font-size: gesso-font-size(-2);
+ font-size: var(--font-size-000);
grid-column: 1 / 2;
grid-row: 1 / 2;
margin: 0;
@@ -42,7 +46,7 @@
text-align: left;
}
@media(min-width: $screen-lg) {
- //font-size: gesso-font-size(-1);
+ font-size: var(--font-size-00);
}
}
@@ -61,7 +65,6 @@
}
&__social {
- //background:$test-color-2;
grid-column: 1 / 3;
grid-row: 3 / 4;
margin: 0 auto;
@@ -88,8 +91,8 @@
}
a {
- //font-family: gesso-font-family(system);
- //font-size: gesso-font-size(-2);
+ font-family: var(--font-system);
+ font-size: var(--font-size-000);
text-decoration: none;
}
diff --git a/src/patterns/03-layouts/footer/footer.twig b/src/patterns/03-layouts/footer/footer.twig
index bba7daf3..457d9f6e 100644
--- a/src/patterns/03-layouts/footer/footer.twig
+++ b/src/patterns/03-layouts/footer/footer.twig
@@ -14,19 +14,27 @@
<div class="uw-footer__wrapper">
{% if branding_level == 'full' %}
<div class="uw-footer__address">
- address
+ {% include "@components/contact-info/contact-info.twig" %}
</div>
<div class="uw-footer__menu">
- menu
+ {% include "@components/menu/menu--footer/menu--footer.twig" with {
+ 'items': footer_menu
+ } %}
</div>
<div class="uw-footer__social">
- social
+ {% include "@components/menu/menu--social/menu--social.twig" with {
+ 'social_media': social_media,
+ social_media_placement: 'global-site-footer',
+
+ } %}
<div class="uw-footer__social-directory">
<a href="https://uwaterloo.ca/social-media/">@uwaterloo social directory</a>
</div>
</div>
<div class="uw-footer__territorial">
- territorial statement
+ {% include "@components/territorial-statement/territorial-statement.twig" with {
+ "modifier_classes": modifier_classes
+ } %}
</div>
{% endif %}
</div>
diff --git a/src/patterns/03-layouts/site-footer/site-footer.twig b/src/patterns/03-layouts/site-footer/site-footer.twig
index 4bd6fccd..66489b4c 100644
--- a/src/patterns/03-layouts/site-footer/site-footer.twig
+++ b/src/patterns/03-layouts/site-footer/site-footer.twig
@@ -22,6 +22,9 @@
</div>
<div class="uw-site-footer__content">
{{ body }}
+{# {% if is_demo_site_container %}#}
+{# {% include "@base/typography/typography.twig" %}#}
+{# {% endif %}#}
</div>
</div>
</div>
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index 8f5bdd42..c1d6f31c 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -1,10 +1,13 @@
@forward 'blockquote/blockquote';
@forward 'button/button';
@forward 'card/card';
+@forward 'contact-info/contact-info';
@forward 'image/image';
@forward 'menu/menu';
+@forward 'menu/menu--footer/menu--footer';
@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';
+@forward 'tag-list/tag-list';
+@forward 'territorial-statement/territorial-statement';
diff --git a/src/patterns/04-components/contact-info/_contact-info.scss b/src/patterns/04-components/contact-info/_contact-info.scss
new file mode 100644
index 00000000..0aeaa034
--- /dev/null
+++ b/src/patterns/04-components/contact-info/_contact-info.scss
@@ -0,0 +1,13 @@
+.uw-footer-address {
+ color: var(--uw-white);
+
+ .uw-footer-phone {
+ a {
+ color: var(--uw-gold);
+ text-decoration: none;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/src/patterns/04-components/contact-info/contact-info.twig b/src/patterns/04-components/contact-info/contact-info.twig
new file mode 100644
index 00000000..5cf32dc0
--- /dev/null
+++ b/src/patterns/04-components/contact-info/contact-info.twig
@@ -0,0 +1,24 @@
+<div class="uw-footer-address" about="//uwaterloo.ca/" typeof="v:VCard">
+ <div class="hidden">
+ <div property="v:fn">University of Waterloo</div>
+ <div rel="v:org">
+ <div property="v:organisation-name">University of Waterloo</div>
+ </div>
+ <div rel="v:geo">
+ <div property="v:latitude">43.471468</div>
+ <div property="v:longitude">-80.544205</div>
+ </div>
+ </div>
+ <div rel="v:adr">
+ <div property="v:street-address">200 University Avenue West</div>
+ <div>
+ <span property="v:locality">Waterloo</span>,
+ <span property="v:region">ON</span>,
+ <span property="v:country-name">Canada</span>
+ <span property="v:postal-code">N2L 3G1</span>
+ </div>
+ </div>
+ <div class="uw-footer-phone" rel="v:tel">
+ <a href="tel:+1-519-888-4567" property="rdf:value">+1 519 888 4567</a>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
new file mode 100644
index 00000000..8c7456ad
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
@@ -0,0 +1,109 @@
+// @file
+// Styles for the footer menu
+
+@use '../../../01-core' as *;
+
+.menu--uw-footer {
+ align-items:flex-start;
+ display:flex;
+ flex-direction:row;
+ flex-wrap:wrap;
+ justify-content: flex-start;
+ list-style-type: none;
+ padding-bottom: var(--size-2);
+ text-align: center;
+ text-transform: uppercase;
+ li {
+ border-color: var(--gray-6);
+ border-style: solid;
+ box-sizing: inherit;
+ display: inline-block;
+ flex: 1 0 50%;
+ margin: 0;
+ padding: 1rem;
+ text-align: center;
+ &:nth-child(1) {
+ border-width: var(--size-xs) 0 0 var(--size-xs);
+ }
+ &:nth-child(2) {
+ border-width: var(--size-xs) var(--size-xs) 0;
+ }
+ &:nth-child(3) {
+ border-width: var(--size-xs) 0 0 var(--size-xs);
+ }
+ &:nth-child(4) {
+ border-width: var(--size-xs) var(--size-xs) 0;
+ }
+ &:nth-child(5) {
+ border-width: var(--size-xs) 0 0 var(--size-xs);
+ }
+ &:nth-child(6) {
+ border-width: var(--size-xs) var(--size-xs) 0;
+ }
+ &:nth-child(7) {
+ border-width: var(--size-xs) 0 0 var(--size-xs);
+ }
+ &:nth-child(8) {
+ border-width: var(--size-xs) var(--size-xs) 0;
+ }
+ &:nth-child(9) {
+ border-width: var(--size-xs);
+ }
+ @media(min-width: $screen-xs) {
+ padding: 0 0 0 var(--size-1);
+ text-align:left;
+ &:nth-child(1) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(2) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(3) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(4) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(5) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(6) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(7) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(8) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+
+ &:nth-child(9) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ }
+ @media(min-width: $screen-md) {
+ flex: 1 0 33%;
+ padding: 0 0.25rem 0 var(--size-2);
+ &:nth-child(1),
+ &:nth-child(4),
+ &:nth-child(7){
+ border-width: 0 var(--size-xs);
+ }
+ }
+ a {
+ color: var(--uw-white);
+ display: block;
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-00);
+ font-weight: 300;
+ line-height: 1.50;
+ outline: none;
+ text-decoration: none;
+ &:hover,
+ &:focus {
+ color: var(--uw-gold);
+ text-decoration: underline;
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/menu/menu--footer/menu--footer.twig b/src/patterns/04-components/menu/menu--footer/menu--footer.twig
new file mode 100644
index 00000000..0d457f96
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--footer/menu--footer.twig
@@ -0,0 +1,4 @@
+{% include '@components/menu/menu.twig' with {
+ 'menu_name': 'uw-footer',
+ 'items': items
+} %}
diff --git a/src/patterns/04-components/menu/menu--footer/menu--footer.yml b/src/patterns/04-components/menu/menu--footer/menu--footer.yml
new file mode 100644
index 00000000..c5966646
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--footer/menu--footer.yml
@@ -0,0 +1,66 @@
+---
+menu_name: 'uw-footer'
+items:
+ - title: 'Contact Waterloo'
+ url: 'https://uwaterloo.ca/about/contact-us'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Maps & Directions'
+ url: 'https://uwaterloo.ca/map/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Watsafe'
+ url: 'https://uwaterloo.ca/watsafe/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Accessibility'
+ url: 'https://uwaterloo.ca/human-resources/accessibility'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Privacy'
+ url: 'https://uwaterloo.ca/privacy/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Copyright'
+ url: 'https://uwaterloo.ca/copyright'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'News'
+ url: 'https://uwaterloo.ca/news/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Careers'
+ url: 'https://uwaterloo.ca/careers/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Careers'
+ url: 'https://uwaterloo.ca/about/contact-us/contact-form'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
diff --git a/src/patterns/04-components/territorial-statement/_territorial-statement.scss b/src/patterns/04-components/territorial-statement/_territorial-statement.scss
new file mode 100644
index 00000000..6f5dee1e
--- /dev/null
+++ b/src/patterns/04-components/territorial-statement/_territorial-statement.scss
@@ -0,0 +1,32 @@
+@use '../../01-core' as *;
+
+.uw-bg--black{
+ background-color:gesso-brand(org-default,uw-black,lvl4);
+}
+.uw-bg--white{
+ background-color:gesso-brand(org-default,uw-white,lvl1);
+}
+.uw-territorial{
+ text-align:center;
+ p{
+ color: var(--uw-white);
+ font-family: var(--font-system);
+ font-size: var(--font-size-000);
+ font-weight:200;
+ letter-spacing:0.5px;
+ line-height:1.7;
+ padding: var(--size-2) 0;
+ .uw-bg--black &{
+ color: var(--uw-white);
+ }
+ .uw-bg--white &{
+ color: var(--uw-black);
+ }
+ }
+ @media(min-width: $screen-md) {
+ text-align:left;
+ p{
+ line-height:1.5;
+ }
+ }
+}
diff --git a/src/patterns/04-components/territorial-statement/territorial-statement.twig b/src/patterns/04-components/territorial-statement/territorial-statement.twig
new file mode 100644
index 00000000..56a8e671
--- /dev/null
+++ b/src/patterns/04-components/territorial-statement/territorial-statement.twig
@@ -0,0 +1,5 @@
+<div class="uw-bg--{{ modifier_classes }}">
+ <div class="uw-territorial">
+ <p>The University of Waterloo acknowledges that much of our work takes place on the traditional territory of the Neutral, Anishinaabeg and Haudenosaunee peoples. Our main campus is situated on the Haldimand Tract, the land granted to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is centralized within our <a href="https://uwaterloo.ca/indigenous" >Office of Indigenous Relations</a>.</p>
+ </div>
+</div>
diff --git a/src/patterns/04-components/territorial-statement/territorial-statement.yml b/src/patterns/04-components/territorial-statement/territorial-statement.yml
new file mode 100644
index 00000000..1690c39e
--- /dev/null
+++ b/src/patterns/04-components/territorial-statement/territorial-statement.yml
@@ -0,0 +1,2 @@
+---
+modifier_classes: 'black'
--
GitLab