Feature/date styling and validation

.github/workflows/test.yml

@@ -1,4 +1,7 @@
-name: Test LocalGov Drupal
+##
+# Managed by https://github.com/localgovdrupal/github_workflow_manager
+---
+name: Test localgovdrupal/localgov_forms drupal-module
 
 on:
   push:
@@ -8,33 +11,43 @@ on:
     branches:
       - '1.x'
 
+env:
+  LOCALGOV_DRUPAL_PROJECT: localgovdrupal/localgov_forms
+  LOCALGOV_DRUPAL_PROJECT_PATH: web/modules/contrib/localgov_forms
+
 jobs:
+
   build:
     name: Install LocalGov Drupal
     runs-on: ubuntu-latest
 
     strategy:
       fail-fast: false
       matrix:
-        include:
-          - localgov-version: "2.x"
-            drupal-version: "~9.1"
-            php-version: "7.4"
+        localgov-version:
+          - '2.x'
+        drupal-version:
+          - '~9.3'
+        php-version:
+          - '7.4'
+          - '8.1'
 
     steps:
+
       - name: Save git branch and git repo names to env if this is not a pull request
         if: github.event_name != 'pull_request'
         run: |
           echo "GIT_BASE=${GITHUB_REF#refs/heads/}" >> $GITHUB_ENV
           echo "GIT_BRANCH=${GITHUB_REF#refs/heads/}" >> $GITHUB_ENV
-          echo "GIT_REPO=${GITHUB_REPOSITORY}" >> $GITHUB_ENV
+          echo "HEAD_USER=localgovdrupal" >> $GITHUB_ENV
 
       - name: Save git branch and git repo names to env if this is a pull request
         if: github.event_name == 'pull_request'
         run: |
           echo "GIT_BASE=${GITHUB_BASE_REF}" >> $GITHUB_ENV
           echo "GIT_BRANCH=${GITHUB_HEAD_REF}" >> $GITHUB_ENV
-          echo "GIT_REPO=${{ github.event.pull_request.head.repo.full_name }}" >> $GITHUB_ENV
+          export HEAD="${{ github.event.pull_request.head.label }}"
+          echo "HEAD_USER=${HEAD%%:*}" >> $GITHUB_ENV
 
       - name: Set composer branch reference for version branches
         if: endsWith(github.ref, '.x')
@@ -74,11 +87,18 @@ jobs:
           composer --working-dir=./html require --no-install drupal/core-recommended:${{ matrix.drupal-version }} drupal/core-composer-scaffold:${{ matrix.drupal-version }} drupal/core-project-message:${{ matrix.drupal-version }} drupal/core-dev:${{ matrix.drupal-version }}
           composer --working-dir=./html install
 
-      - name: Obtain the test target from the repo that triggered this workflow
+      - name: Obtain the test target using Composer
+        if: env.HEAD_USER == 'localgovdrupal'
         run: |
-          composer --working-dir=html config repositories.1 vcs git@github.com:${GIT_REPO}.git
+          composer --working-dir=html config repositories.1 vcs git@github.com:${LOCALGOV_DRUPAL_PROJECT}.git
           composer global config github-oauth.github.com ${{ github.token }}
-          composer --working-dir=./html require --with-all-dependencies localgovdrupal/${{ github.event.repository.name }}:"${COMPOSER_REF} as ${LATEST_RELEASE}"
+          composer --working-dir=./html require --with-all-dependencies ${LOCALGOV_DRUPAL_PROJECT}:"${COMPOSER_REF} as ${LATEST_RELEASE}"
+
+      - name: Obtain the test target using Git
+        if: env.HEAD_USER != 'localgovdrupal'
+        uses: actions/checkout@v2
+        with:
+          path: ${{ env.LOCALGOV_DRUPAL_PROJECT_PATH }}
 
   phpcs:
     name: Coding standards checks
@@ -88,12 +108,16 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        include:
-          - localgov-version: "2.x"
-            drupal-version: "~9.1"
-            php-version: "7.4"
+        localgov-version:
+          - '2.x'
+        drupal-version:
+          - '~9.3'
+        php-version:
+          - '7.4'
+          - '8.1'
 
     steps:
+
       - name: Cached workspace
         uses: actions/cache@v2
         with:
@@ -105,12 +129,12 @@ jobs:
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:
-          php-version: '7.4'
+          php-version: ${{ matrix.php-version }}
 
       - name: Run coding standards checks
         run: |
           cd html
-          ./bin/phpcs -p ./web/modules/contrib/localgov_forms
+          ./bin/phpcs -p ${LOCALGOV_DRUPAL_PROJECT_PATH}
 
   phpstan:
     name: Deprecated code checks
@@ -120,12 +144,16 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        include:
-          - localgov-version: "2.x"
-            drupal-version: "~9.1"
-            php-version: "7.4"
+        localgov-version:
+          - '2.x'
+        drupal-version:
+          - '~9.3'
+        php-version:
+          - '7.4'
+          - '8.1'
 
     steps:
+
       - name: Cached workspace
         uses: actions/cache@v2
         with:
@@ -137,13 +165,12 @@ jobs:
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:
-          php-version: '7.4'
+          php-version: ${{ matrix.php-version }}
 
       - name: Run deprecated code checks
         run: |
           cd html
-          ./bin/phpstan analyse -c ./phpstan.neon ./web/modules/contrib/localgov_forms
-
+          ./bin/phpstan analyse -c ./phpstan.neon ${LOCALGOV_DRUPAL_PROJECT_PATH}
   phpunit:
     name: PHPUnit tests
     needs: build
@@ -152,12 +179,16 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        include:
-          - localgov-version: "2.x"
-            drupal-version: "~9.1"
-            php-version: "7.4"
+        localgov-version:
+          - '2.x'
+        drupal-version:
+          - '~9.3'
+        php-version:
+          - '7.4'
+          - '8.1'
 
     steps:
+
       - name: Clone Drupal container
         uses: actions/checkout@v2
         with:
@@ -178,5 +209,6 @@ jobs:
       - name: Run PHPUnit tests
         run: |
           mkdir -p ./html/web/sites/simpletest && chmod 777 ./html/web/sites/simpletest
+          sed -i "s#http://localgov.lndo.site#http://drupal#" ./html/phpunit.xml.dist
           docker exec -t drupal bash -c 'chown docker:docker -R /var/www/html'
-          docker exec -u docker -t drupal bash -c "cd /var/www/html && ./bin/paratest --processes=4"
+          docker exec -u docker -t drupal bash -c "cd /var/www/html && ./bin/paratest --processes=4 ${{ env.LOCALGOV_DRUPAL_PROJECT_PATH }}"

js/address_change.js

@@ -22,6 +22,12 @@
     // Reset the form.
     resetButton.click(function () {
       resetAddressLookUpForm(addressLookupElement, $(this), 'hard');
+
+      // Hide manual entry button if asked for.
+      if (typeof drupalSettings.centralHub.isManualAddressEntryBtnAlwaysVisible !== 'undefined' && drupalSettings.centralHub.isManualAddressEntryBtnAlwaysVisible) {
+        var manualButton = addressLookupElement.parent().find('.js-manual-address');
+        manualButton.show();
+      }
     });
 
     // Append the reset button.
@@ -30,6 +36,7 @@
 
   /**
    * Reset Address Lookup Form.
+   *
    * @param {jQuery} addressLookupElement
    *   Address lookup element.
    * @param {jQuery} resetButton
@@ -149,6 +156,8 @@
         var selectList = selectListContainer.find('.js-address-select');
         var error = selectListContainer.find('.js-address-error');
         var resetButton = addressLookupElement.find('.js-reset-address');
+        var manualButton = addressLookupElement.find('.js-manual-address');
+        var manualAddressContainer = addressLookupElement.find('+ .js-address-entry-container');
         var ajaxProgressElement = addressLookupElement.find('.ajax-progress');
 
         // This ajac was either not initiated by the address lookup,
@@ -157,6 +166,12 @@
           return;
         }
 
+        // Unhide the manual entry button only when manual address entry fields
+        // are hidden.
+        if (typeof settings.centralHub.isManualAddressEntryBtnAlwaysVisible !== 'undefined' && !settings.centralHub.isManualAddressEntryBtnAlwaysVisible && manualAddressContainer.is(':hidden')) {
+          manualButton.show();
+        }
+
         // If there has been a search.
         if ((selectList.find('option').length > 0 && searchElement.val().length > 0) || error.length > 0) {
           searchButton.removeClass('js-searching');

js/address_select.js

@@ -5,7 +5,8 @@
 (function ($, Drupal) {
 
   /**
-   * Add manual entry button
+   * Adds manual entry button.
+   *
    * @param {jQuery} centralHubElement
    *   Centralhub address element.
    */
@@ -29,28 +30,35 @@
   }
 
   /**
-   * Hide manual address form
+   * Hide manual address form.
+   *
    * @param  {jQuery} centralHubElement
    *   Central hub address lookup element.
    * @param  {String} type
    *   'soft' = Do not clear the address values.
    *            (used when an address is selected)
    *   'hard' = Clear the address values.
+   * @param {Object} settings
+   *   drupalSettings.
    */
-  function hideManualAddress(centralHubElement, type) {
+  function hideManualAddress(centralHubElement, type, settings) {
     var manualAddressContainer = centralHubElement.find('.js-address-entry-container');
     var manualButton = centralHubElement.find('.js-manual-address');
     var addressSelectContainer = centralHubElement.find('.js-address-select-container');
     manualAddressContainer.addClass('hidden');
-    if (type == 'hard') {
 
+    if (type == 'hard') {
       // Clear all values.
       manualAddressContainer.find('input').val('');
 
       // Trigger change events so UPRN and extra fields are cleared.
       manualAddressContainer.find('input').first().trigger('change');
     }
-    manualButton.removeClass('hidden');
+
+    // Hide manual entry button if asked for.
+    if (typeof settings.centralHub.isManualAddressEntryBtnAlwaysVisible !== 'undefined' && !settings.centralHub.isManualAddressEntryBtnAlwaysVisible) {
+      manualButton.hide();
+    }
   }
 
   /**
@@ -67,7 +75,7 @@
     var addressError = addressSelectContainer.find('.js-address-error');
     manualAddressContainer.removeClass('hidden');
     // manualAddressContainer.find('input').val('');
-    manualButton.addClass('hidden');
+    manualButton.hide();
     // addressSelectContainer.addClass('hidden');
     // addressSelect.val('0');
     // Clear the search element when entering a manual address.
@@ -171,7 +179,7 @@
       showManualAddress(centralHubElement);
     } else if ($(this).val() == 0) {
       // If choosing the empty option, clear out the address fields.
-      hideManualAddress(centralHubElement, 'hard');
+      hideManualAddress(centralHubElement, 'hard', drupalSettings);
     }
   };
 
@@ -202,15 +210,17 @@
       $('.js-webform-type-localgov-webform-uk-address', context).once('localgov-address-webform').each(function () {
         var centralHubElement = $(this);
         addManualEntryButton(centralHubElement);
+
         // Hide the manual address element, if it has no values.
         if (!isManualAddressEntered(centralHubElement)) {
-          hideManualAddress(centralHubElement, 'soft');
+          hideManualAddress(centralHubElement, 'soft', settings);
         }
+
         // centralHubElement.find('.js-address-searchstring').change(function() {
         //   hideManualAddress(centralHubElement, 'hard');
         // });
         centralHubElement.find('.js-reset-address').click(function () {
-          hideManualAddress(centralHubElement, 'hard');
+          hideManualAddress(centralHubElement, 'hard', settings);
         });
         hideAddressSearchErrors(centralHubElement);
       });

localgov_forms.module

@@ -5,8 +5,6 @@
  * Hook implementations.
  */
 
-module_load_include('inc', 'webform', 'includes/webform.theme.template');
-
 /**
  * Implements hook_theme().
  */
@@ -29,6 +27,8 @@ function localgov_forms_theme() {
  */
 function template_preprocess_localgov_forms_uk_address(array &$variables) {
   // Here you can get the composite element and alter it.
+  Drupal::moduleHandler()->loadInclude('webform', 'inc', 'includes/webform.theme.template');
+
   _template_preprocess_webform_composite($variables);
 }
 

modules/localgov_forms_date/css/date.css

@@ -0,0 +1,40 @@
+.localgov-forms-date {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.localgov-forms-date div[class*="-day"] {
+  margin-left: 0em;
+  flex: 1;
+  max-width: 100%;
+  margin-top: 0.5em;
+  margin-right: 0.5em;
+}
+
+.localgov-forms-date div[class*="-month"] {
+  flex: 2;
+  margin: 0.5em;
+  max-width: 100%;
+}
+
+.localgov-forms-date div[class*="-year"] {
+  flex: 3;
+  max-width: 100%;
+  margin: 0.5em;
+}
+
+.localgov-forms-date > .form-item--error-message {
+  flex: 0 0 100%;
+}
+
+@media screen and (min-width: 64rem) {
+  .localgov-forms-date div[class*="-day"] {
+    max-width: 6%;
+  }
+  .localgov-forms-date div[class*="-month"] {
+    max-width: 6%;
+  }
+  .localgov-forms-date div[class*="-year"] {
+    max-width: 9%;
+  }
+}

modules/localgov_forms_date/localgov_forms_date.libraries.yml

@@ -0,0 +1,5 @@
+localgov_forms_date:
+  version: VERSION
+  css:
+    theme:
+      css/date.css: {}