Vote-783: style usagov footer section

web/themes/custom/votegov/src/sass/base/containers.scss

@@ -1,6 +1,14 @@
+@use "uswds-core" as *;
 @use "variables" as *;
 
 body {
   background-color: $bg-light;
   color: $base-dark;
 }
+
+.vote-columns--two {
+  @include at-media('tablet-lg') {
+    column-count: 2;
+    column-gap: 2rem;
+  }
+}

web/themes/custom/votegov/src/sass/mixins/mixins.scss

@@ -72,3 +72,11 @@
     color: $ac-cool-light;
   }
 }
+
+@mixin vote-solid-border-top {
+  @include u-border-top(1px);//mixin
+  @include u-border-top('solid');
+  border-color: $bg-light-medium;
+  background-color: $base-white;
+  font-family: $theme-font-type-sans;
+}

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

@@ -11,5 +11,7 @@
 @forward "usa-button-group";
 @forward "usa-select";
 @forward "usa-banner";
+@forward "usa-sign-up";
 @forward "usa-search";
 @forward "usa-nav";
+@forward "usa-contact-identifier";

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

@@ -0,0 +1,89 @@
+@use "uswds-core" as *;
+@use "variables" as *;
+
+.usa-identifier {
+    @include u-padding-top(2);
+    @include u-border-top(1px);
+    @include u-border-top('solid');
+    border-color: $bg-light-medium;
+    background-color: $base-white;
+    color: $base-dark;
+
+    @include at-media('tablet') {
+        @include u-display('flex');
+        .grid-row {
+            @include u-flex('no-wrap')
+        }
+    }
+
+    .usa-identifier__container {
+        @include u-padding-left(0);
+    }
+
+    .usa-identifier__logo{
+        height: 36px;
+        width: 172px;
+    }
+
+    .usa-identifier__identity-disclaimer{
+        @include u-margin-top(6);
+        @include u-position('relative');
+        @include u-font-weight('normal');
+
+        &:before {
+            content: '';
+            background-color: $ac-warm;
+            @include u-display('block');
+            @include u-position('absolute');
+            @include u-width(0.5);
+            @include u-height(10);
+            @include u-margin-y('auto');
+            bottom: 60px;
+            left: 38px;
+            rotate: 90deg;
+        }
+
+        p {
+            max-width: 75%;
+        }
+    }
+
+    .usa-identifier__section--usagov {
+        ul {
+            list-style-type: none;
+            @include u-padding(0);
+            @include u-margin(0);
+
+            @include at-media('tablet') {
+                columns: 2;
+            }
+            @include at-media-max('tablet') {
+                columns: 1;
+            }
+
+            p {
+                @include u-margin-top(0);
+            }
+        }
+
+        li {
+            @include u-margin-bottom(3);
+            @include u-margin-right(3);
+        }
+
+        a {
+            color: $base-primary;
+            @include u-font-weight('bold');
+            @include u-text('underline');
+            :visited {
+                color: $base-primary;
+            }
+            &:focus,
+            &:hover {
+                background-color: $base-primary-hover;
+                color: $base-white;
+                @include u-text('no-underline');
+            }
+        }
+    }
+}

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

@@ -1,22 +1,20 @@
 @use "uswds-core" as *;
 @use "variables" as *;
+@use "mixins" as *;
 
 .usa-footer__primary-section {
+  @include vote-solid-border-top;
+
   .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 vote-solid-border-top;
 
   @include at-media('tablet') {
     @include u-padding-y(6);

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

@@ -0,0 +1,39 @@
+@use "uswds-core" as *;
+@use "variables" as *;
+
+.usa-sign-up {
+    .usa-form {
+        @include at-media('tablet') {
+            display: flex;
+        }
+    }
+    .usa-sign-up__heading {
+        font-size: 16px;
+    }
+
+    .usa-label {
+        font-size: 16px;
+        font-weight: 400;
+    }
+
+    .usa-input {
+        height: 100%;
+        border-radius: 4px;
+        border: 1px $bg-light-medium solid;
+
+        @include at-media('tablet') {
+            width:70%;
+        }
+    }
+
+    .usa-button {
+        @include u-padding-y('105');
+        height: 38px;
+
+        @include at-media('tablet') {
+            @include u-margin-top(1);
+            @include u-margin-right(0);
+            @include u-margin-left(2);
+        }
+    }
+}

web/themes/custom/votegov/templates/block/block-content--basic.html.twig

@@ -0,0 +1,30 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block content.
+ *
+ * @see template_preprocess_block_content_template()
+ *
+ * @ingroup themeable
+ */
+#}
+{% set field_classes = content.field_classes | field_value | render %}
+
+{%
+  set classes = [
+  'block-content',
+  'block-content--type-' ~ bundle|clean_class,
+  'block-content--view-mode-' ~ view_mode|clean_class,
+  field_classes
+]
+%}
+
+<div{{ attributes.addClass(classes) }}>
+  {% block content %}
+    {% if content.field_heading | render %}
+      <h2>{{ content.field_heading | field_value }}</h2>
+    {% endif %}
+    {{ content.body | field_value }}
+  {% endblock %}
+
+</div>

web/themes/custom/votegov/templates/block/block-content--email-signup.html.twig

@@ -1,20 +1,16 @@
 {% block content %}
 <section class="usa-sign-up" title="{{'Email sign-up'|t}}" aria-label="{{'Email sign-up'|t}}">
-  <div class="grid-container">
-    <form class="usa-form" action="{{ content.field_link | field_value }}" method="get">
-      <h2 class="usa-sign-up__heading">
-        {{ content.field_heading | field_value | render | replace({'%USAGov%': 'USAGov'}) | raw}}
-      </h2>
-
-      <label class="usa-label" for="email" id="emailsub">
-        {{ content.field_email_field_label | field_value }}
-      </label>
-
-      <input id="email" name="email" type="email" class="usa-input max-width-input" data-test="email-signup" />
-      <button class="usa-button max-width-input" id="user-submit" type="submit">
-        {{ content.field_signup_button_label | field_value }}
-      </button>
-    </form>
-  </div>
+   <h2 class="usa-sign-up__heading">
+      {{ content.field_heading | field_value | render | replace({'%USAGov%': 'USAGov'}) | raw}}
+  </h2>
+  <label class="usa-label" for="email" id="emailsub">
+    {{ content.field_email_field_label | field_value }}
+  </label>
+  <form class="usa-form" action="{{ content.field_link | field_value }}" method="get">
+    <input id="email" name="email" type="email" class="usa-input max-width-input" data-test="email-signup"/>
+    <button class="usa-button max-width-input" id="user-submit" type="submit">
+      {{ content.field_signup_button_label | field_value }}
+    </button>
+  </form>
 </section>
 {% endblock %}

web/themes/custom/votegov/templates/component/contact-identifier.html.twig

@@ -1,85 +1,49 @@
 <div class="usa-identifier">
-  <section
-    class="usa-identifier__section usa-identifier__section--masthead"
-    aria-label="Agency identifier,"
-  >
-    <div class="usa-identifier__container">
-      <div class="usa-identifier__logos">
-        <a href="" class="usa-identifier__logo"
-        ><img
-            class="usa-identifier__logo-img"
-            src="{{ uswds_img_path }}/circle-gray-20.svg"
-            alt="USA.gov logo"
-            role="img"
-          /></a>
-      </div>
+  <div class="grid-container">
+    <div class="grid-row">
+      {#Column 1 divider - USA Logo#}
       <section
-        class="usa-identifier__identity"
-        aria-label="Agency description,"
+        class="usa-identifier__section usa-identifier__section--masthead"
+        aria-label={{"Agency identifier," | t }}
       >
-        <p class="usa-identifier__identity-domain">USA.gov</p>
-        <p class="usa-identifier__identity-disclaimer">
-          <span aria-hidden="true">An </span>official website of the
-          <a href="">&lt;Parent agency&gt;</a>
-        </p>
-      </section>
-    </div>
-  </section>
-  <nav
-    class="usa-identifier__section usa-identifier__section--required-links"
-    aria-label="Important links,"
-  >
-    <div class="usa-identifier__container">
-      <ul class="usa-identifier__required-links-list">
-        <li class="usa-identifier__required-links-item">
-          <a
-            href="javascript:void(0)"
-            class="usa-identifier__required-link usa-link"
-          >About &lt;Parent shortname&gt;</a
-          >
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="" class="usa-identifier__required-link usa-link"
-          >Accessibility statement</a
-          >
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="" class="usa-identifier__required-link usa-link"
-          >FOIA requests</a
+        <div class="usa-identifier__container">
+          <section
+            class="usa-identifier__identity usa-identifier__section"
+            aria-label={{"Agency description," | t }}
           >
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="" class="usa-identifier__required-link usa-link"
-          >No FEAR Act data</a
-          >
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="" class="usa-identifier__required-link usa-link"
-          >Office of the Inspector General</a
-          >
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="" class="usa-identifier__required-link usa-link"
-          >Performance reports</a
-          >
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="" class="usa-identifier__required-link usa-link"
-          >Privacy policy</a
+            <a href="https://www.usa.gov/" class="usa-identifier__logo">
+            <img
+                class="usa-identifier__logo-img"
+                src="{{ theme_path }}/img/USA_GOV_Logo.svg"
+                alt={{"USA.gov logo" | t }}
+                role="img"
+              /></a>
+            <div class="usa-identifier__identity-disclaimer">
+              <p>{{"Visit our partner site to find more information about voting in the United States." | t }}</p>
+            </div>
+          </section>
+        </div>
+      </section>
+
+      {#Column 2 Divider - USA Links and Email block #}
+      <div>
+        <section
+          class="usa-identifier__section usa-identifier__section--usagov"
+          aria-label={{"U.S. government information and services," | t }}
+        >
+          <nav
+            aria-label={{"Important links," | t }}
           >
-        </li>
-      </ul>
-    </div>
-  </nav>
-  <section
-    class="usa-identifier__section usa-identifier__section--usagov"
-    aria-label="U.S. government information and services,"
-  >
-    <div class="usa-identifier__container">
-      <div class="usa-identifier__usagov-description">
-        Looking for U.S. government information and services?
+            <div class="usa-identifier__container">
+              {# USA.gov election info links#}
+              {{ drupal_entity('block_content', '18') }}
+            </div>
+          </nav>
+        </section>
+        <hr>
+         {# Email sign-up component. #}
+        {{ drupal_entity('block_content', 4) }}
       </div>
-      <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
     </div>
-  </section>
+  </div>
 </div>

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

@@ -110,9 +110,6 @@
 {% endblock %}
 
 <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' %}