VOTE-2880/2881: Configure and style call out box (#1047)

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

@@ -15,7 +15,7 @@ $ac-cool-light: #0AAAE2; // cyan-30v
 $bg-light: #F0F0F0; // gray-cool-2
 $bg-secondary-light: #F7F9FA;
 $bg-light-medium: #D3D3D3; // gray-cool-20 is this just for the horizontal rule?
-$bg-light-cool: #E2EDF2; // blue-warm-10
+$bg-light-cool: #E7F6F8; // blue-warm-10
 $bg-hero-default: #A9CFD2;
 
 //High Contrast Colors.

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

@@ -25,4 +25,5 @@
 @forward "a11y-toolbar";
 @forward "double-deck-card";
 @forward "to-top";
-@forward "info-card"
+@forward "info-card";
+@forward "call-out-box";

web/themes/custom/votegov/src/sass/components/call-out-box.scss

@@ -0,0 +1,26 @@
+@use "uswds-core" as *;
+@use "variables" as *;
+@use "mixins" as *;
+
+.vote-call-out-box {
+  @include u-padding(4);
+  @include u-margin-bottom(6);
+  background-color: $bg-light-cool;
+
+  @include at-media('tablet') {
+    @include u-radius('lg');
+  }
+
+  @include at-media-max('tablet') {
+    @include u-padding-x(3);
+    @include u-margin-x(-3);
+  }
+}
+
+.vote-call-out-box--offset {
+  @include u-margin-top(-4);
+
+  @include at-media('tablet') {
+    margin-top: -6rem;
+  }
+}

web/themes/custom/votegov/templates/component/call-out-box.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Default theme implementation to Call out box component.
+ *
+ * Template variables:
+ * - heading: string
+ * - text: string
+ * - link_url: string
+ * - link_text: string or uri
+ *
+ * Usage example:
+ * {% include '@votegov/component/call-out-box.html.twig' with {
+ *   'heading': var_heading,
+ *   'text': var_text,
+ *   'link_url': var_uri,
+ *   'link_text': var_link_text
+ * } %}
+ *
+#}
+
+{% if link_url %}
+  {% set link_markup %}
+    <a href={{ link_url }}>{{ link_text }}</a>
+  {% endset %}
+{% endif %}
+
+<div class="vote-call-out-box vote-call-out-box--offset">
+  <h2>{{ heading }}</h2>
+  {{ text | t({'@link': {'#markup': link_markup } | render }) }}
+</div>

web/themes/custom/votegov/templates/node/node--state-territory.html.twig

@@ -8,17 +8,6 @@
 {# Caching the data in content object #}
 {% set savedCache = content | render %}
 
-{% set classes = [
-  'node--' ~ node.bundle|clean_class,
-  node.isPromoted() ? 'node--promoted',
-  node.isSticky() ? 'node--sticky',
-  not node.isPublished() ? 'node--unpublished',
-  view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
-  'vote-main-content-row',
-  'vote-block-margin-y--narrow',
-  'usa-in-page-nav-container'
-] %}
-
 {% set state_name = label | field_value | render %}
 {% set accepts_nvrf = node.field_accepts_nvrf.value == 1 %}
 
@@ -51,7 +40,7 @@
 
 {# State content with fallbacks. #}
 {# Get default state display content from the block type. #}
-{% set state_display_content = drupal_entity('block_content', 22) | children %}
+{% set state_display_content = drupal_entity('block_content', 23) | children %}
 {% set registration_not_needed = state_display_content.field_registration_not_needed.0 | default([]) | merge(content.field_registration_not_needed.0 | default([])) %}
 {% set online_registration = state_display_content.field_online_registration.0 | default([]) | merge(content.field_online_registration.0 | default([])) %}
 {% set military_overseas_registration = state_display_content.field_military_and_overseas_regi.0 | default([]) | merge(content.field_military_and_overseas_regi.0 | default([])) %}
@@ -70,6 +59,17 @@
 {% set has_online = "online" in registration_types %}
 {% set not_needed = "not-needed" in registration_types %}
 
+{% set classes = [
+  'node--' ~ node.bundle|clean_class,
+  node.isPromoted() ? 'node--promoted',
+  node.isSticky() ? 'node--sticky',
+  not node.isPublished() ? 'node--unpublished',
+  view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+  'vote-main-content-row',
+  'vote-block-margin-y--narrow',
+  'usa-in-page-nav-container'
+] %}
+
 <div{{ attributes.addClass(classes) }}>
   {# Hold these title_* placeholders for potential integration #}
   {{ title_prefix }}
@@ -80,22 +80,26 @@
   {% endif %}
 
   {% block aside %}
-  <aside
-    class="usa-in-page-nav"
-    data-main-content-selector=".usa-in-page-nav-container"
-    data-title-text="{{ 'Jump to registration options' | t }}"
-    data-title-heading-level="h2"
-    data-scroll-offset="-600"
-    data-root-margin="48px 0px -90% 0px"
-    data-threshold="1"
-  ></aside>
-{% endblock %}
+    <aside
+      class="usa-in-page-nav"
+      data-main-content-selector=".usa-in-page-nav-container"
+      data-title-text="{{ 'Jump to registration options' | t }}"
+      data-title-heading-level="h2"
+      data-scroll-offset="-600"
+      data-root-margin="48px 0px -90% 0px"
+      data-threshold="1"
+    ></aside>
+  {% endblock %}
 
   <div class="vote-page-content vote-page-content--alt">
-  {% block content %}
+   {% block content %}
     {% if check_registration is not empty %}
-      {{ check_registration }}
-      {{ confirm_registration_link }}
+      {% include '@votegov/component/call-out-box.html.twig' with {
+        'heading': check_registration.heading,
+        'text': check_registration.text | render | trim,
+        'link_text': check_registration.link_text | render | trim | t({'@state_name': title_english}),
+        'link_url': confirm_registration_link
+      } %}
     {% endif %}
 
      {# Election Date #}
@@ -121,7 +125,7 @@
   } %}
 {% endif %}
 
-    {% if has_mail and mail_registration is not empty %}
+     {% if has_mail and mail_registration is not empty %}
       {% set mail_body %}
         <p><strong>{{ 'Mail-in registration deadline:' | t }}</strong> {{ bymail_deadline }}</p>
         {{ mail_registration.text }}