Merge pull request #114 from 18F/sw-footer-updates

Updating the default footer to closer match the USWDS

Author: Scott Weber

_data/footer.yml

@@ -1,5 +1,9 @@
 # This is the configuration for the site footer.
 
+# this defines the type of footer
+# header types can be only be medium at the moment
+type: medium
+
 # Used to show the "Return to top" link; can also be
 # configured as an object with 'text' and 'href' properties.
 top:
@@ -25,15 +29,28 @@ logos:
     alt: 18F
     external: true
 
+# This controls the contact section of the footer
 contact:
-  links:
-    - text: USA
+  heading: Agency contact center
+  social_links:
+    - text: Facebook
+      href: https://facebook.com
+      external: true
+      type: facebook
+    - text: Twitter
+      href: https://twitter.com
+      external: true
+      type: twitter
+    - text: YouTube
+      href: https://youtube.com
+      external: true
+      type: youtube
+    - text: RSS Feed
       href: https://usa.gov/
       external: true
-
-  heading: Contact us
-
-  address: |
-    [GitHub](https://github.com/uswds/uswds)
-
-    [uswds@gsa.gov](mailto:uswds@gsa.gov)
+      type: rss
+  contact_links:
+    - text: (800) CALL-GOVT
+      href: tel:1-800-555-5555
+    - text: info@agency.gov
+      href: mailto:info@agency.gov

_includes/components/footer.html _includes/components/footer--medium.html_includes/components/footer.html renamed to _includes/components/footer--medium.html

@@ -41,11 +41,11 @@
         {% if footer.logos %}
           {% for logo in footer.logos -%}
             {% if logo.url %}
-        <a href="{{ logo.url }}">
+              <a href="{{ logo.url }}">
             {% endif %}
-          <img class="usa-footer-logo-img" src="{% if logo.external %}{{ logo.src }}{% else %}{{ logo.src | relative_url }}{% endif %}" alt="{{ logo.alt }}"{% if logo.width %}width="{{ logo.width }}"{% endif %}{% if logo.height %}height="{{ logo.height }}"{% endif %}>
+            <img class="usa-footer-logo-img" src="{% if logo.external %}{{ logo.src }}{% else %}{{ logo.src | relative_url }}{% endif %}" alt="{{ logo.alt }}"{% if logo.width %}width="{{ logo.width }}"{% endif %}{% if logo.height %}height="{{ logo.height }}"{% endif %}>
             {% if logo.url %}
-        </a>
+              </a>
             {% endif %}
           {% endfor %}
         {% endif %}
@@ -57,20 +57,30 @@ <h3 class="usa-footer-logo-heading">{{ footer.heading }}</h3>
 
       {% if footer.contact %}
       <div class="usa-footer-contact-links usa-width-one-half">
-        {% assign contact_links = site.data.navigation[footer.contact.links] | default: footer.contact.links %}
-        {% for _link in contact_links %}
-        <a class="usa-link-{{ _link.type | default: 'generic' }}" href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
-          <span>{{ _link.text }}</span>
-        </a>
-        {% endfor %}
-
-        {% if footer.contact.address %}
-        <address>
-          {% if footer.contact.heading %}
+        {% assign social_links = site.data.footer.contact.social_links %}
+        {% if footer.contact.contact_links %}
+          {% for _link in social_links %}
+            <a class="usa-link-{{ _link.type | default: 'generic' }}" href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+              <span>{{ _link.text }}</span>
+            </a>
+          {% endfor %}
+        {% endif %}
+        {% if footer.contact.heading %}
           <h3 class="usa-footer-contact-heading">{{ footer.contact.heading }}</h3>
           {% endif %}
-          {{ footer.contact.address | markdownify }}
-        </address>
+          {% if footer.contact.contact_links %}
+            <address>
+              {% assign contact_links = site.data.footer.contact.contact_links %}
+              {% for _link in contact_links %}
+                <div class="usa-footer-primary-content usa-footer-contact_info">
+                  <p>
+                    <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+                      {{ _link.text }}
+                    </a>
+                  </p>
+                </div>
+              {% endfor %}
+            </address>
         {% endif %}
       {% endif %}
       </div>

_includes/footer.html

@@ -1,2 +1,3 @@
 {% assign footer = site.data.footer %}
-{% include components/footer.html %}
+
+{% include components/footer--medium.html %}