Theming the local site footer and fixing social media menus

components/_patterns/00-base/global/01-colors/_color-vars.scss

@@ -15,3 +15,4 @@ $uw-main-menu-hover: #dfdfdf;
 $uw-main-menu-border: #eee;
 $uw-main-menu-active: #eee;
 $uw-main-menu-active-border: #4e4e4e;
+$uw-local-site-footer-background-color: #757575;

components/_patterns/00-base/global/01-colors/colors.yml

@@ -33,6 +33,8 @@ items:
     value: '#eee'
   - name: $uw-main-menu-active-border
     value: '#4e4e4e'
+  - name: $uw-local-site-footer-background-color
+    value: '#757575'
 meta:
   description: >-
     To add to these items, use Sass variables that start with <code>$</code> in

components/_patterns/01-atoms/09-menu/social-media/_social-media.scss

@@ -11,7 +11,7 @@ i.fdsu-youtube::before {
 }
 
 i.fdsu-instagram::before {
-  content: "\e90f";
+  content: "\e90c";
 }
 
 i.fdsu-linkedin::before {
@@ -26,31 +26,40 @@ i.social-media-i {
   font-size: 2rem;
   padding: 0.2rem;
   border-radius: 3px;
-  color: #000;
   font-style: normal;
   background-color: $uw-white;
 }
 
 i.social-media-i:hover {
-  color: $uw-gold;
-  background-color: $uw-black;
+  .global-footer-social-media &{
+    background-color: $uw-black;
+    color: $uw-gold;
+  }
+
+  .local-site-footer-social-media &{
+    background-color: $uw-local-site-footer-background-color;
+    color: $uw-white;
+  }
 }
 
 a.social-media-link {
-  color: black;
   text-decoration: none;
-  background-color: $uw-black;
+
+  .global-footer-social-media &{
+    color: $uw-black;
+  }
+
+  .local-site-footer-social-media &{
+    color: $uw-local-site-footer-background-color;
+  }
 }
 
 a.social-media-link:hover {
-  color: $uw-gold;
   text-decoration: none;
-  background-color: $uw-black;
 }
 
 li.social-media-list-item {
   list-style-type: none;
-  background-color: $uw-black;
   margin: 0;
   padding-top: 0.4rem;
 }

components/_patterns/01-atoms/09-menu/social-media/social-media.twig

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

components/_patterns/01-atoms/09-menu/social-media/social-media.yml

 text: "facebook"
-url: "https://www.facebook.com/university.waterloo"
\ No newline at end of file
+url: "https://www.facebook.com/university.waterloo"

components/_patterns/02-molecules/_block.twig

@@ -26,7 +26,6 @@
  */
 #}
 
-
 <div {{ bem('block') }}>
   {{ title_prefix }}
   {% if label %}

components/_patterns/02-molecules/menus/social-media-menu/_social-media-menu.scss

@@ -9,11 +9,16 @@ ul.social-media-list {
   align-items: start;
   justify-content: flex-start;
   flex-wrap: wrap;
-  width: 100%;
-  max-width: 95%;
   padding-bottom: 0.5rem;
 }
 
 .uw-footer-social-media {
-  background-color: black;
+  text-align: right;
+  .global-footer-social-media {
+    background-color: $uw-black;
+  }
+
+  .local-site-footer-social-media {
+    background-color: $uw-local-site-footer-background-color;
+  }
 }

components/_patterns/02-molecules/menus/social-media-menu/social-media-menu.twig

 <div class="uw-footer-social-media">
-  <ul class="social-media-list">
+  <ul class="social-media-list {{ social_media_menu_class }}">
     {% for item in social_media.menu_tree %}
       {% include "@atoms/09-menu/social-media/social-media.twig" with {
         "text": item.text,

components/_patterns/03-organisms/local-site-footer/_local-site-footer.scss

+.uw-local-site-footer {
+  width: 100%;
+  background-color: $uw-local-site-footer-background-color;
+  color: $uw-white;
+  padding-top: 1rem;
+}
+
+.uw_local-site-footer-wrapper {
+  display: grid;
+  max-width: 63.125rem;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 0;
+  grid-template-columns: 70% 30%;
+  grid-template-rows: auto auto;
+
+  &--logo {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+
+  &--social-media {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+
+  &--content {
+    grid: 1 / 3;
+    grid-row: 2 / 3;
+  }
+}
+

components/_patterns/03-organisms/local-site-footer/local-site-footer.twig

+<div id="local-site-footer" class="uw-local-site-footer">
+  <div class="uw_local-site-footer-wrapper">
+    <div class="uw-local-site-footer--logo">
+      <a href="{{ logo_link }}">
+        <img src="{{ logo_url }}" alt="{{ logo_alt_text }}" />
+      </a>
+    </div>
+    <div class="uw-local-site-footer--social-media">
+      {% include "@molecules/menus/social-media-menu/social-media-menu.twig" with {
+        "social_media": social_media,
+        "social_media_menu_class": social_media_menu_class
+      } %}
+    </div>
+    <div class="uw-local-site-footer--content">
+      {{ body | raw }}
+    </div>
+  </div>
+</div>
\ No newline at end of file

components/_patterns/03-organisms/local-site-footer/local-site-footer.yml

+body: "This is a test"
+site_name: "Faculty of Environment"
+logo_link: "https://www.wlu.ca/"
+logo_url: "https://d8/fdsu1/sites/d8.fdsu1/modules/uw_ct_site_footer/logos/UWaterloo_Applied_Health_Sciences.png"
+logo_alt_text: "Applied Health Sciences logo"
+facebook: "https://www.facebook.com/University.Waterloo"
+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"
+    - text: "Snapchat"
+      url: "https://www.snapchat.com/add/uofwaterloo"
+social_media_menu_class: "local-site-footer-social-media"

components/_patterns/03-organisms/site/site-footer/_site-footer.scss

@@ -55,7 +55,9 @@ footer {
 
   grid-column: 3 / 4;
   grid-row: 1 / 2;
-  text-align: right;
+  .uw-footer-social-directory {
+    text-align: right;
+  }
 }
 
 .uw-footer-social-directory a {

components/_patterns/03-organisms/site/site-footer/site-footer.twig

@@ -11,7 +11,8 @@
     </div>
     <div id="uw-footer-grid-3" class="footer-3">
       {% include "@molecules/menus/social-media-menu/social-media-menu.twig" with {
-        "social_media": social_media
+        "social_media": social_media,
+        "social_media_menu_class": social_media_menu_class
       } %}
       <div class="uw-footer-social-directory">
         <a href="https://uwaterloo.ca/social-media/">@uwaterloo social directory</a>

components/_patterns/03-organisms/site/site-footer/site-footer.yml

@@ -32,4 +32,5 @@ social_media:
     - text: "LinkedIn"
       url: "https://www.linkedin.com/edu/school?id=10875"
     - text: "Snapchat"
-      url: "https://www.snapchat.com/add/uofwaterloo"
\ No newline at end of file
+      url: "https://www.snapchat.com/add/uofwaterloo"
+social_media_menu_class: "global-footer-social-media"
\ No newline at end of file

templates/block/block--uw-ct-site-footer.html.twig

+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{% include "@organisms/local-site-footer/local-site-footer.twig" with {
+  "body": content.body,
+  "logo_link": content.logo_link,
+  "logo_url": content.logo_url,
+  "site_name": content.site_name,
+  "logo_alt_text": content.logo_alt_text,
+  "social_media": content.social_media,
+  "social_media_menu_class": "local-site-footer-social-media"
+} %}

templates/layout/region--footer.html.twig

@@ -18,5 +18,6 @@
 {% include "@organisms/site/site-footer/site-footer.twig" with {
   "items": items,
   "menu_class": "global-footer-menu",
-  "social_media": social_media
+  "social_media": social_media,
+  "social_media_menu_class": "global-footer-social-media"
 } %}