VOTE-2357 initialize a custom nvrf page route (#934)

web/modules/custom/vote_nvrf/README.md

@@ -1,4 +1,28 @@
+# Vote NVRF custom module
+This module has 3 functions:
+1. Contains a custom field type for **NVRF field** data per state
+2. Contains a custom route and controller for the **NVRF page**
+3. Initiates a custom library for loading the **NVRF app** from a separate repository
+
+## NVRF field
+The custom field is combination of an entity reference field and a boolean checkbox. It comes with a set of custom field formatter types.
+
+## NVRF page
+The nvrf app lives on a custom route page:
+* **path:** `/register/<STATE_NAME>/form`
+* **path for es:** `/registrar/<STATE_NAME>/form`
+
+## NVRF app
+### Data
+The app pulls data from the internal endpoints generated from Drupal
+
 ### Helpful commands
+Run these commands in the module root directory.
+
+`npm install` to install all the dependencies
+
+`npm run build` to transfer nvrf files from node_modules into the dist directory and root theme data directory
+
+`npm install github:usagov/vote-gov-nvrf-app#<TAG_VERSION_NUMBER>` to update to the latest release.
 
-run `npm install`
-run `npm run build` to pull files from node_modules into module dist directory and root theme data directory
+**example:** `npm install github:usagov/vote-gov-nvrf-app#v0.15.0`

web/modules/custom/vote_nvrf/dist/assets/nvrf.css

@@ -39,7 +39,7 @@
 }
 
 .nvrf-app-container .usa-step-indicator__header {
-    @media (min-width: 640px) {
+    @media (min-width: 641px) {
         position: absolute;
         text-indent: -9000px;
         overflow: hidden;
@@ -48,13 +48,30 @@
 
 .nvrf-app-container .usa-step-indicator__segment {
     cursor: default;
+    padding-bottom: .5rem;
 }
 
 .nvrf-app-container .usa-step-indicator__segment--complete {
     cursor: pointer;
+    background-color: transparent;
+    color: transparent;
+    transition: color .5s, background-color .5s;
     &:hover,
     &:focus {
         text-decoration: underline;
+        color: #005ea2;
+        background-color: #e7eff3;
+        transition: text-decoration .5s, color .5s, background-color .5s;
+        .usa-step-indicator__segment-label {
+            color: #005ea2;
+            transition: color .5s;
+        }
+    }
+}
+
+.nvrf-app-container .usa-step-indicator__segments {
+    @media (max-width: 640px) {
+        display: none;
     }
 }
 

web/modules/custom/vote_nvrf/package.json

@@ -10,6 +10,6 @@
     "copy-data": "rm -rf ../../../data && cp -r ./node_modules/vote-gov-nvrf-app/dist/data ../../../data"
   },
   "dependencies": {
-    "vote-gov-nvrf-app": "github:usagov/vote-gov-nvrf-app#v0.14.0"
+    "vote-gov-nvrf-app": "github:usagov/vote-gov-nvrf-app#v0.15.0"
   }
 }

web/modules/custom/vote_nvrf/src/Controller/NvrfPageController.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace Drupal\vote_nvrf\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+
+/**
+ * An NVRF page controller.
+ */
+class NvrfPageController extends ControllerBase {
+
+  /**
+   * Returns a renderable array for the nvrf app.
+   */
+  public function content(string $state_name) {
+    $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
+    $enabled_languages = ['en'];
+
+    // Return a 404 response if language is disabled.
+    if (!in_array($language, $enabled_languages)) {
+      throw new NotFoundHttpException();
+    }
+
+    // Transform the state name string for comparison.
+    $title = str_replace('-', ' ', $state_name);
+    // Query the nodes to find a match.
+    $node_storage = \Drupal::entityTypeManager()->getStorage('node');
+    $node = $node_storage->loadByProperties([
+      'type' => 'state_territory',
+      'status' => 1,
+      'field_accepts_nvrf' => TRUE,
+      'title' => $title,
+    ]);
+
+    if (empty($node)) {
+      // Return a 404 response if no matches are found.
+      throw new NotFoundHttpException();
+    }
+    else {
+      // Get the state abbreviation.
+      $node = reset($node);
+      $abbrev = $node->get('field_state_abbreviation')->value;
+
+      // Render the app in a custom page if a match was found.
+      $build = [
+        '#type' => 'inline_template',
+        '#template' => '<div id="root" data-stateId="{{ abbrev }}" class="nvrf-app-container vote-block-margin-y"></div>',
+        '#context' => [
+          'abbrev' => $abbrev,
+        ],
+        '#attached' => [
+          'library' => [
+            'vote_nvrf/nvrf_assets',
+          ],
+        ],
+      ];
+    }
+
+    return $build;
+  }
+
+}

web/modules/custom/vote_nvrf/vote_nvrf.module

@@ -0,0 +1,18 @@
+<?php
+
+/**
+ * @file
+ * Preprocess function for page.
+ */
+
+/**
+ * Implements hook_theme_suggestion_HOOK_alter().
+ */
+function vote_nvrf_theme_suggestions_page_alter(array &$suggestions, array $variables) {
+  $current_route_name = \Drupal::routeMatch()->getRouteName();
+
+  // Custom route.
+  if ($current_route_name == 'vote_nvrf.nvrf_page') {
+    $suggestions[] = "page__node__" . str_replace('.', '_', $current_route_name);
+  }
+}

web/modules/custom/vote_nvrf/vote_nvrf.routing.yml

@@ -0,0 +1,7 @@
+vote_nvrf.nvrf_page:
+  path: '/register/{state_name}/form'
+  defaults:
+    _controller: '\Drupal\vote_nvrf\Controller\NvrfPageController::content'
+  requirements:
+    _permission: 'access content'
+    state_name: '[a-z-]+'

web/themes/custom/votegov/php-includes/block.inc

@@ -9,5 +9,7 @@
  * Implements hook_preprocess_block().
  */
 function votegov_preprocess_block(&$variables) {
-  $variables['content']['#attributes']['block'] = $variables['attributes']['id'];
+  if (isset($variables['attributes']['id'])) {
+    $variables['content']['#attributes']['block'] = $variables['attributes']['id'];
+  }
 }

web/themes/custom/votegov/templates/component/theme-switcher.html.twig

@@ -0,0 +1,19 @@
+{{ attach_library('votegov/theme_switcher') }}
+<div class="vote-theme-options" data-test="themeSwitcher">
+  <button
+    class="vote-theme-options__button vote-theme-options__button--scale"
+    data-ui-switch-id="scale"
+    data-values="default,large,x-large"
+    type="button"
+    title="Switch font size preset"
+    data-test="themeText"
+  ><span class="usa-sr-only">Switch font size preset</span></button>
+  <button
+    class="vote-theme-options__button vote-theme-options__button--theme"
+    data-ui-switch-id="theme"
+    data-values="default,contrast"
+    type="button"
+    title="Switch display preset"
+    data-test="themeContrast"
+  ><span class="usa-sr-only">Switch display preset</span></button>
+</div>

web/themes/custom/votegov/templates/layout/page--node--vote_nvrf_nvrf_page.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+* @file
+* Theme override to display a single page: NVRF app page.
+*/
+#}
+{# Load utility libraries when logged in. #}
+{% if logged_in %}
+  {{ attach_library('bixaluswds/logged-in') }}
+{% endif %}
+
+{% include '@votegov/component/theme-switcher.html.twig' %}
+
+{# load navajo font #}
+{% if language == 'nv' %}
+  {{ attach_library('votegov/navajo-font') }}
+{% endif %}
+
+{# Government banner component #}
+  {{ drupal_entity('block_content', '1') }}
+
+{# Sitewide alert component #}
+  {{ drupal_view('sitewide_alert', 'block_1') }}
+
+<header class="usa-header usa-header--extended usa-header--minimal">
+  <div class="usa-navbar">
+
+    {# Site branding component #}
+    {{ drupal_entity('block', 'votegov_sitebranding') }}
+  </div>
+</header>
+
+{{ page.admin }}
+
+{% block main %}
+  <main role="main" id="main" class="grid-container">
+    {{ page.content }}
+  </main>
+{% endblock %}
+
+<footer class="usa-footer">
+  {% include '@votegov/component/eacgov-partner.html.twig' %}
+  {% include '@votegov/component/usa-identifier.html.twig' %}
+</footer>

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

@@ -42,25 +42,7 @@
   {{ attach_library('bixaluswds/logged-in') }}
 {% endif %}
 
-{{ attach_library('votegov/theme_switcher') }}
-<div class="vote-theme-options" data-test="themeSwitcher">
-  <button
-    class="vote-theme-options__button vote-theme-options__button--scale"
-    data-ui-switch-id="scale"
-    data-values="default,large,x-large"
-    type="button"
-    title="Switch font size preset"
-    data-test="themeText"
-  ><span class="usa-sr-only">Switch font size preset</span></button>
-  <button
-    class="vote-theme-options__button vote-theme-options__button--theme"
-    data-ui-switch-id="theme"
-    data-values="default,contrast"
-    type="button"
-    title="Switch display preset"
-    data-test="themeContrast"
-  ><span class="usa-sr-only">Switch display preset</span></button>
-</div>
+{% include '@votegov/component/theme-switcher.html.twig' %}
 
 {# load navajo font #}
 {% if language == 'nv' %}