ISTWCMS-3506: adding footer

source/_patterns/01-global/_global.scss

+.element-hidden {
+  display: none;
+}
+
+.uw-html {
+  background-color: #000;
+}
+
+body {
+  background-color: #fff;
+  color: #000;
+  font-family: georgia, "droid serif", "Times New Roman", Times, serif;
+  font-size: 1rem;
+}
+
+.off-screen {
+  display: block;
+  height: 0;
+  overflow: hidden;
+  text-indent: -9999px;
+}

source/_patterns/03-layouts/footer/footer.twig

@@ -11,7 +11,7 @@
             {% endblock %}
         </div>
         <div class="uw-footer__social">
-            SOCIAL MEDIA
+            {% include "@components/menu/menu--social/menu--social.twig" %}
             <div class="uw-footer__social-directory">
                 <a href="https://uwaterloo.ca/social-media/">@uwaterloo social directory</a>
             </div>

source/_patterns/03-layouts/footer/footer.yml

@@ -63,4 +63,17 @@ items:
       options:
         attributes:
           class: ''
-    in_active_trail: false
\ No newline at end of file
+    in_active_trail: false
+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: "global-site-footer"
\ No newline at end of file

source/_patterns/04-components/menu/menu--social/_menu--social.scss

+.social-media-list {
+  align-items: start;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  list-style-type: none;
+  margin: 0 auto;
+  padding-bottom: 0.5rem;
+
+  li {
+    flex: 1;
+  }
+}
+
+.uw-social-media {
+  @include medium {
+    text-align: right;
+  }
+
+  .global-footer-social-media {
+    background-color: $uw-black;
+  }
+
+  .local-site-footer-social-media {
+    background-color: $uw-local-site-footer-background-color;
+  }
+}
+
+.social-media-i {
+  background-color: $uw-white;
+  border-radius: 3px;
+  font-size: 2rem;
+  font-style: normal;
+  padding: 0.2rem;
+
+  &.global-site-footer:hover {
+    background-color: $uw-black;
+    color: $uw-gold;
+  }
+
+  &.local-site-footer:hover {
+    background-color: $uw-local-site-footer-background-color;
+    color: $uw-white;
+  }
+}
+
+.social-media-link {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &.global-site-footer {
+    color: $uw-black;
+  }
+
+  &.local-site-footer {
+    color: $uw-local-site-footer-background-color;
+  }
+}
+
+.social-media-list-item {
+  list-style-type: none;
+  margin: 0;
+  padding-top: 0.4rem;
+}

source/_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>

source/_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: "global-site-footer"
\ No newline at end of file

source/_patterns/04-components/social-media/social-media--icon/_social-media--icon.scss

+.fdsu-facebook::before {
+  content: "\e909";
+}
+
+.fdsu-twitter::before {
+  content: "\e90f";
+}
+
+.fdsu-youtube::before {
+  content: "\e912";
+}
+
+.fdsu-instagram::before {
+  content: "\e90c";
+}
+
+.fdsu-linkedin::before {
+  content: "\e90d";
+}
+
+.fdsu-snapchat::before {
+  content: "\e917";
+}
+
+.ifdsu {
+  font-family: fdsu-rwd;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  line-height: 1;
+  speak: none;
+  text-transform: none;
+}
\ No newline at end of file

source/_patterns/04-components/social-media/social-media--icon/social-media--icon.twig

+<a href="{{ url }}" class="social-media-link {{ social_media_placement }}">
+  <i class="ifdsu fdsu-{{ text|lower }} social-media-i {{ social_media_placement }}"></i>
+  <span class="off-screen">{{ text }}</span>
+</a>
\ No newline at end of file

source/_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"
\ No newline at end of file