Integrate footer styling

web/themes/custom/votegov/src/sass/components/_index.scss

@@ -9,4 +9,6 @@
 @forward "field";
 @forward "basics-block";
 @forward "heading";
+@forward "footer-primary";
+@forward "footer-secondary";
 

web/themes/custom/votegov/src/sass/components/footer-primary.scss

@@ -0,0 +1,44 @@
+@use "uswds-core" as *;
+@use "variables" as *;
+
+.identifier-links-container {
+  @include grid-col(12);
+
+  @include at-media-max('tablet') {
+    @include u-padding-y(4);
+  }
+}
+
+.identifier-links {
+  @include at-media('tablet') {
+    column-count: 4;
+  }
+
+  @include at-media-max('tablet') {
+    column-count: 2;
+  }
+
+  li {
+    @include at-media-max('tablet') {
+      @include u-padding-top(2);//check
+    }
+
+    @include at-media('tablet') {
+      @include u-padding-top('205');
+    }
+
+    a {
+      color: $base-primary;
+      word-break: break-word;
+      @include u-text('underline');
+      font-size: 16px;
+
+      &:focus,
+      &:hover {
+        background-color: $base-primary-hover;
+        color: $base-white;
+        @include u-text('no-underline');
+      }
+    }
+  }
+}

web/themes/custom/votegov/src/sass/components/footer-secondary.scss

@@ -0,0 +1,78 @@
+@use "uswds-core" as *;
+@use "variables" as *;
+
+.gsa-container {
+    @include u-display('flex');
+    @include u-flex('align-center');
+}
+
+.gsa-container__img {
+    @include u-padding-right(2);
+    @include grid-col(auto);
+}
+
+.gsa-container__text {
+    font-size: 14px;
+    @include at-media('tablet') {
+        @include grid-col(10);
+    }
+    @include at-media-max('tablet') {
+        @include grid-col(9);
+    }
+}
+
+.eac-logo-container {
+    @include u-display('flex');
+    @include u-position('relative');
+
+    @include at-media('tablet') {
+        @include u-padding-left(6);
+        &:before {
+            content: '';
+            background-color: $bg-light-medium;
+            @include u-display('block');
+            @include u-position('absolute');
+            @include u-width('2px');
+            @include u-height(6);
+            @include u-margin-y('auto');
+            @include u-left(0);
+            @include u-top(0);
+            @include u-bottom(0);
+
+        }
+    }
+
+    @include at-media-max('tablet') {
+        @include u-flex('justify-center');
+        @include u-margin-bottom(2);
+        @include u-margin-top(4);
+
+        &:before {
+            content: '';
+            background-color: $bg-light-medium;
+            @include u-display('block');
+            @include u-position('absolute');
+            @include u-width('2px');
+            @include u-height(10);
+            @include u-margin-y('auto');
+            bottom: 32px;
+            rotate: 90deg;
+        }
+    }
+}
+
+.vote-social-link {
+    @include u-display('flex');
+    @include u-flex('align-center');
+    @include u-radius-top('pill');
+    @include u-radius-bottom('pill');
+    @include u-width(4);
+    @include u-height(4);
+    @include u-margin(0.5);
+    background-color: $bg-light-cool;
+}
+
+.vote-social-link__icon {
+    @include u-width(4);
+    @include u-height(4);
+}

web/themes/custom/votegov/src/sass/uswds-overrides/_index.scss

@@ -6,6 +6,7 @@
 @forward "usa-label";
 @forward "usa-language-selector";
 @forward "usa-header";
+@forward "usa-footer";
 @forward "usa-button";
 @forward "usa-button-group";
 @forward "usa-select";

web/themes/custom/votegov/src/sass/uswds-overrides/usa-footer.scss

@@ -0,0 +1,55 @@
+@use "uswds-core" as *;
+@use "variables" as *;
+
+.usa-footer__primary-section {
+  .grid-container {
+    @include at-media('tablet') {
+      @include u-display('flex');
+      @include u-padding(4);
+    }
+  }
+  font-family: $theme-font-type-sans;
+}
+
+.usa-footer__secondary-section {
+  @include u-border-top(1px);
+  @include u-border-top('solid');
+  border-color: $bg-light-medium;
+  background-color: #f0f0f0;
+  font-family: $theme-font-type-sans;
+
+  @include at-media('tablet') {
+    @include u-padding-y(6);
+  }
+
+  @include at-media-max('tablet') {
+    @include u-padding-bottom(0);
+  }
+}
+
+.usa-footer__logo {
+  color: $base-dark;
+  @include at-media('tablet') {
+    @include u-display('flex');
+    @include grid-col(6);
+  }
+}
+
+.usa-footer__social-links {
+  @include u-display('flex');
+  @include u-flex('align-center');
+  font-size: 18px;
+  font-weight: 500;
+
+  @include at-media('tablet') {
+    @include grid-col(3);
+  }
+  @include at-media-max('tablet') {
+    @include u-flex('justify-center');
+    @include u-padding-bottom(0);
+    @include u-border-y(1px);
+    border-color: $bg-light-medium ;
+    @include u-padding-y('105');
+    @include u-margin-x(-2);
+  }
+}

web/themes/custom/votegov/templates/component/footer--secondary-section.html.twig

@@ -1,24 +1,30 @@
+{% set GSAlink = link('General Services Administration' | t, 'https://www.gsa.gov/') %}
+
 <div class="usa-footer__secondary-section">
   <div class="grid-container">
-    <div class="grid-row grid-gap">
-      <div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
-        <div class="mobile-lg:grid-col-auto">
-          {# Footer Secondary menu. #}
-          {{ 'Menu Placeholder' }}
-        </div>
-      </div>
-      <div class="usa-footer__contact-links mobile-lg:grid-col-6">
-        {# Social links menu. #}
-        <div class="usa-footer__social-links grid-row grid-gap-1">
-          <div class="grid-col-auto">
-            <a class="usa-social-link" href="javascript:void(0);"
-            ><img
-                class="usa-social-link__icon"
-                src="{{ uswds_img_path }}/usa-icons/twitter.svg"
-                alt="Twitter"
-              /></a>
+    <div class="grid-row">
+      <div class="usa-footer__logo">
+        {# GSA logo #}
+        <div class="gsa-container">
+          <div class="gsa-container__img">
+            <img src="{{ theme_path }}/img/gsa-logo.svg" alt="{{'GSA logo'|t}}" width="48" height="48">
+          </div>
+          <div class="gsa-container__text" aria-label="{{ 'Agency description' | t }}">
+            {{ 'Vote.gov is an official website of the @link.' | t({'@link': GSAlink | render}) }}
           </div>
         </div>
+        {# EAC logo #}
+        <div class="eac-logo-container">
+          <a href="{{ language == 'es' ? 'https://www.eac.gov/translations/spanish' : 'https://www.eac.gov/' }}" target="_blank">
+            <img class="eac-logo" width="146" height="48" src="{{ theme_path }}/img/eac-logo.webp" alt="{{ 'U.S. Election Assistance Commission logo which indicates a partnership with Vote.gov' | t }}" />
+          </a>
+        </div>
+      </div>
+      <div class="usa-footer__social-links">
+        <span>{{ 'Follow vote.gov on ' | t }}</span>
+        <a class="vote-social-link" href="https://twitter.com/votegov">
+          <img class="vote-social-link__icon" src="{{ theme_path }}/img/x-logo.svg" alt="X"/>
+        </a>
       </div>
     </div>
   </div>

web/themes/custom/votegov/templates/layout/page.html.twig

@@ -109,18 +109,14 @@
   {% endif %}
 {% endblock %}
 
-<footer class="usa-footer usa-footer--big">
+<footer class="usa-footer">
   {# Email sign-up component. #}
   {{ drupal_entity('block_content', 4) }}
 
   {% include '@votegov/component/contact-identifier.html.twig' %}
+  {% include '@votegov/component/footer--secondary-section.html.twig' %}
 
-  <div class="usa-footer__primary-section" data-test="footer">
-    <div class="grid-container">
-      {# Footer menu. #}
-      {{ drupal_entity('block', 'votegov_footernavigation') }}
-    </div>
-  </div>
+  {# Footer menu. #}
+  {{ drupal_entity('block', 'votegov_footernavigation') }}
 
-  {% include '@votegov/component/footer--secondary-section.html.twig' %}
 </footer>

web/themes/custom/votegov/templates/navigation/menu--footer.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Vote.gov USWDS theme implementation for the footer menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *
+ * @ingroup themeable
+ */
+#}
+{% import _self as menus %}
+
+<div class="usa-footer__primary-section" data-test="footer">
+    <div class="grid-container">
+      {{ menus.menu_links(items, attributes, 0) }}
+    </div>
+</div>
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% import _self as menus %}
+
+  {% if items %}
+    <div class="identifier-links-container">
+      <ul class="usa-list usa-list--unstyled identifier-links">
+    {% for item in items %}
+        <li>{{ link(item.title, item.url) }}</li>
+    {% endfor %}
+      </ul>
+    </div>
+  {% endif %}
+
+{% endmacro %}