From f3a0ee43e07eacb9c9bcdd6fecd76ca2f08e5a5d Mon Sep 17 00:00:00 2001
From: Yeni Atencio <47239456+yeniatencio@users.noreply.github.com>
Date: Wed, 8 Jan 2025 17:28:45 +1100
Subject: [PATCH] [SD-558]updated help text and change labels (#566)

* Fixed hook update, visibility and default values on landing page and publication
---
 ...form_display.node.landing_page.default.yml |  2 +-
 ...ing_page.field_landing_page_hero_theme.yml | 10 ++--
 ...age.node.field_landing_page_hero_theme.yml |  4 +-
 .../tests/behat/features/fields.feature       | 49 +++++++++++++++++++
 .../tide_landing_page.install                 | 40 +++++++++++++++
 .../tide_landing_page.module                  | 46 +++++++++++++++--
 ..._form_display.node.publication.default.yml |  2 +-
 ..._display.node.publication_page.default.yml |  2 +-
 ...lication.field_landing_page_hero_theme.yml | 10 ++--
 ...ion_page.field_landing_page_hero_theme.yml | 10 ++--
 .../tide_publication/tide_publication.module  | 13 ++---
 11 files changed, 160 insertions(+), 28 deletions(-)

diff --git a/modules/tide_landing_page/config/install/core.entity_form_display.node.landing_page.default.yml b/modules/tide_landing_page/config/install/core.entity_form_display.node.landing_page.default.yml
index 257d59f0c..a088b7375 100644
--- a/modules/tide_landing_page/config/install/core.entity_form_display.node.landing_page.default.yml
+++ b/modules/tide_landing_page/config/install/core.entity_form_display.node.landing_page.default.yml
@@ -223,8 +223,8 @@ third_party_settings:
       label: 'Customised Header'
       parent_name: group_section_header
       children:
-        - field_landing_page_hero_image
         - field_landing_page_hero_theme
+        - field_landing_page_hero_image
         - field_landing_page_hero_logo
         - field_graphical_image
         - field_bottom_graphical_image
diff --git a/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml b/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml
index 087e8ca17..e79189c12 100644
--- a/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml
+++ b/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml
@@ -10,11 +10,13 @@ id: node.landing_page.field_landing_page_hero_theme
 field_name: field_landing_page_hero_theme
 entity_type: node
 bundle: landing_page
-label: Here image theme
-description: 'If your hero image is mostly dark, apply the dark theme. This changes how the page title is displayed.'
-required: false
+label: Page title display style
+description: 'By default the page title will display in the site’s primary colour. If you choose ‘Reverse blocked text’ the heading and introduction text will be white with a coloured block behind the text (the site’s ‘accent contrast’ and ‘accent alternate’ colours). See <a href="https://ripple.sdp.vic.gov.au/design-system/components/header">Ripple header page to understand the header </a>component design.'
+required: true
 translatable: false
-default_value: {  }
+default_value:
+  -
+    value: light
 default_value_callback: ''
 settings: {  }
 field_type: list_string
diff --git a/modules/tide_landing_page/config/install/field.storage.node.field_landing_page_hero_theme.yml b/modules/tide_landing_page/config/install/field.storage.node.field_landing_page_hero_theme.yml
index dca3701b4..4a0101329 100644
--- a/modules/tide_landing_page/config/install/field.storage.node.field_landing_page_hero_theme.yml
+++ b/modules/tide_landing_page/config/install/field.storage.node.field_landing_page_hero_theme.yml
@@ -12,10 +12,10 @@ settings:
   allowed_values:
     -
       value: dark
-      label: Dark
+      label: Reverse blocked text
     -
       value: light
-      label: Light
+      label: Default
   allowed_values_function: ''
 module: options
 locked: false
diff --git a/modules/tide_landing_page/tests/behat/features/fields.feature b/modules/tide_landing_page/tests/behat/features/fields.feature
index 53568ea26..0f8881237 100644
--- a/modules/tide_landing_page/tests/behat/features/fields.feature
+++ b/modules/tide_landing_page/tests/behat/features/fields.feature
@@ -35,6 +35,8 @@ Feature: Fields for Landing Page content type
     And the "#edit-field-bottom-graphical-image" element should contain "Bottom Corner Graphic"
     And I should see an "input#edit-field-bottom-graphical-image-entity-browser-target" element
 
+    And I should see a "select#edit-field-landing-page-hero-theme" element
+
     And I click on the horizontal tab "Header extras"
     And I should see text matching "Header components"
     And I press the "edit-field-landing-page-header-add-more-add-modal-form-area-add-more" button
@@ -164,6 +166,8 @@ Feature: Fields for Landing Page content type
     And the "#edit-field-bottom-graphical-image" element should contain "Bottom Corner Graphic"
     And I should see an "input#edit-field-bottom-graphical-image-entity-browser-target" element
 
+    And I should see a "select#edit-field-landing-page-hero-theme" element
+
     And I click on the horizontal tab "Header extras"
     And I should see text matching "Header components"
     And I press the "edit-field-landing-page-header-add-more-add-modal-form-area-add-more" button
@@ -300,3 +304,48 @@ Feature: Fields for Landing Page content type
     # This field can be "seen" but not visible.
     And I see field "field_landing_page_component[0][subform][field_customise][value]"
     And save screenshot
+
+
+@api @javascript
+  Scenario: Selecting Corner graphics value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-corner" element
+    And I select "corner" from "edit-header-style-options-corner"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Default"
+    And save screenshot
+
+ @api @javascript
+  Scenario: Selecting Default appearance value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-default" element
+    And I select "corner" from "edit-header-style-options-default"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Default"
+    And save screenshot
+
+@api @javascript
+  Scenario: Selecting Full-width background image value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-fullwidtht" element
+    And I select "corner" from "edit-header-style-options-fullwidth"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Reverse blocked text"
+    And save screenshot
+
+@api @javascript
+  Scenario: Selecting Call to action banner value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-cta" element
+    And I select "corner" from "edit-header-style-options-cta"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Default"
+    And save screenshot
diff --git a/modules/tide_landing_page/tide_landing_page.install b/modules/tide_landing_page/tide_landing_page.install
index de73d8b3d..eda33cafa 100644
--- a/modules/tide_landing_page/tide_landing_page.install
+++ b/modules/tide_landing_page/tide_landing_page.install
@@ -203,3 +203,43 @@ function tide_landing_page_update_10107() {
   $tide_update_helper = \Drupal::service('tide_core.entity_update_helper');
   $tide_update_helper->revert('field_config', 'paragraph.key_journeys.field_paragraph_title');
 }
+
+/**
+ * Set field `field_landing_page_hero_theme` to mandatory, description, label.
+ */
+function tide_landing_page_update_10108() {
+  $bundles = [
+    'landing_page',
+    'publication',
+    'publication_page',
+  ];
+
+  foreach ($bundles as $bundle) {
+    $field = FieldConfig::loadByName('node', $bundle, 'field_landing_page_hero_theme');
+    if (!empty($field)) {
+      $field->setLabel('Page title display style');
+      $field->setRequired(TRUE);
+      $field->setDefaultValue('light');
+      $field->setDescription('By default the page title will display in the site’s primary colour. If you choose ‘Reverse blocked text’ the heading and introduction text will be white with a coloured block behind the text (the site’s ‘accent contrast’ and ‘accent alternate’ colours). See <a href="https://ripple.sdp.vic.gov.au/design-system/components/header">Ripple header page to understand the header </a>component design.');
+      $field->save();
+    }
+  }
+}
+
+/**
+ * Set label options for `field_landing_page_hero_theme`.
+ */
+function tide_landing_page_update_10109() {
+  $config = \Drupal::configFactory()->getEditable('field.storage.node.field_landing_page_hero_theme');
+  $allowed_values = $config->get('settings.allowed_values');
+  foreach ($allowed_values as $key => $allowed_value) {
+    if ($allowed_value['label'] === 'Dark') {
+      $allowed_values[$key]['label'] = 'Reverse blocked text';
+    }
+    elseif ($allowed_value['label'] === 'Light') {
+      $allowed_values[$key]['label'] = 'Default';
+    }
+  }
+  $config->set('settings.allowed_values', $allowed_values);
+  $config->save();
+}
diff --git a/modules/tide_landing_page/tide_landing_page.module b/modules/tide_landing_page/tide_landing_page.module
index fe1d0196b..2d59732ae 100644
--- a/modules/tide_landing_page/tide_landing_page.module
+++ b/modules/tide_landing_page/tide_landing_page.module
@@ -5,6 +5,8 @@
  * Tide Landing Page module functionality.
  */
 
+use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\Core\Ajax\InvokeCommand;
 use Drupal\Core\Cache\Cache;
 use Drupal\Core\Field\WidgetBase;
 use Drupal\Core\Form\FormStateInterface;
@@ -117,11 +119,6 @@ function tide_landing_page_form_node_form_alter(&$form, FormStateInterface $form
       $form['field_landing_page_hero_image']['widget']['field_show_hero_image_caption'] = $form['field_show_hero_image_caption'];
       unset($form['field_show_hero_image_caption']);
     }
-    // Move Hero Image theme to Hero Image field group.
-    if (isset($form['field_landing_page_hero_theme']) && isset($form['field_landing_page_hero_image']['widget'])) {
-      $form['field_landing_page_hero_image']['widget']['field_landing_page_hero_theme'] = $form['field_landing_page_hero_theme'];
-      unset($form['field_landing_page_hero_theme']);
-    }
 
     // @todo the below block needs to be in a proper widget alter.
     if (isset($form['field_landing_page_component']['widget'][0])) {
@@ -371,6 +368,34 @@ function tide_landing_page_field_widget_single_element_paragraphs_form_alter(&$e
   }
 }
 
+/**
+ * Function to set value to Hero image theme.
+ *
+ * @param array $form
+ *   The form.
+ * @param Drupal\Core\Form\FormStateInterface $form_state
+ *   The form state.
+ *
+ * @return Drupal\Core\Ajax\AjaxResponse
+ *   The response.
+ */
+function tide_landing_page_set_value_hero_image_theme(array $form, FormStateInterface $form_state): AjaxResponse {
+  $response = new AjaxResponse();
+  $value = $form_state->getValue('_header_style_options');
+  if ($value === 'fullwidth') {
+    return $response->addCommand(new InvokeCommand(
+      '#edit-field-landing-page-hero-theme',
+      'val',
+      ['dark']
+    ));
+  }
+  return $response->addCommand(new InvokeCommand(
+    '#edit-field-landing-page-hero-theme',
+    'val',
+    ['light']
+  ));
+}
+
 /**
  * Node form #process callback.
  *
@@ -405,6 +430,16 @@ function _tide_landing_page_form_node_form_process(array $form, FormStateInterfa
       'corner' => t('Corner graphics'),
       'cta' => t('Call to action banner'),
     ],
+    '#ajax' => [
+      'callback' => 'tide_landing_page_set_value_hero_image_theme',
+    ],
+  ];
+
+  $form['field_landing_page_hero_theme']['#states']['disabled'] = [
+    ':input[name="_header_style_options"]' => [
+      ['value' => 'fullwidth'],
+      ['value' => 'cta'],
+    ],
   ];
 
   $form['field_landing_page_hero_image']['#states']['visible'] = [
@@ -413,6 +448,7 @@ function _tide_landing_page_form_node_form_process(array $form, FormStateInterfa
       ['value' => 'cta'],
     ],
   ];
+
   $form['field_graphical_image']['#states']['visible'] = [
     ':input[name="_header_style_options"]' => ['value' => 'corner'],
   ];
diff --git a/modules/tide_publication/config/install/core.entity_form_display.node.publication.default.yml b/modules/tide_publication/config/install/core.entity_form_display.node.publication.default.yml
index 76843c195..019d29b8d 100644
--- a/modules/tide_publication/config/install/core.entity_form_display.node.publication.default.yml
+++ b/modules/tide_publication/config/install/core.entity_form_display.node.publication.default.yml
@@ -133,8 +133,8 @@ third_party_settings:
       label: 'Customised Header'
       parent_name: group_section_header
       children:
-        - field_landing_page_hero_image
         - field_landing_page_hero_theme
+        - field_landing_page_hero_image
       format_type: tab
       format_settings:
         description: ''
diff --git a/modules/tide_publication/config/install/core.entity_form_display.node.publication_page.default.yml b/modules/tide_publication/config/install/core.entity_form_display.node.publication_page.default.yml
index a1a808a0c..6d99612e6 100644
--- a/modules/tide_publication/config/install/core.entity_form_display.node.publication_page.default.yml
+++ b/modules/tide_publication/config/install/core.entity_form_display.node.publication_page.default.yml
@@ -126,8 +126,8 @@ third_party_settings:
       label: 'Customised Header'
       parent_name: group_section_header
       children:
-        - field_landing_page_hero_image
         - field_landing_page_hero_theme
+        - field_landing_page_hero_image
       format_type: tab
       format_settings:
         description: ''
diff --git a/modules/tide_publication/config/install/field.field.node.publication.field_landing_page_hero_theme.yml b/modules/tide_publication/config/install/field.field.node.publication.field_landing_page_hero_theme.yml
index de8ea2328..24c69d439 100644
--- a/modules/tide_publication/config/install/field.field.node.publication.field_landing_page_hero_theme.yml
+++ b/modules/tide_publication/config/install/field.field.node.publication.field_landing_page_hero_theme.yml
@@ -10,11 +10,13 @@ id: node.publication.field_landing_page_hero_theme
 field_name: field_landing_page_hero_theme
 entity_type: node
 bundle: publication
-label: 'Hero image theme'
-description: 'If your hero image is mostly dark, apply the dark theme. This changes how the page title is displayed.'
-required: false
+label: 'Page title display style'
+description: 'By default the page title will display in the site’s primary colour. If you choose ‘Reverse blocked text’ the heading and introduction text will be white with a coloured block behind the text (the site’s ‘accent contrast’ and ‘accent alternate’ colours). See <a href="https://ripple.sdp.vic.gov.au/design-system/components/header">Ripple header page to understand the header </a>component design.'
+required: true
 translatable: true
-default_value: {  }
+default_value:
+  -
+    value: light
 default_value_callback: ''
 settings: {  }
 field_type: list_string
diff --git a/modules/tide_publication/config/install/field.field.node.publication_page.field_landing_page_hero_theme.yml b/modules/tide_publication/config/install/field.field.node.publication_page.field_landing_page_hero_theme.yml
index dc48f7135..6c4fc2800 100644
--- a/modules/tide_publication/config/install/field.field.node.publication_page.field_landing_page_hero_theme.yml
+++ b/modules/tide_publication/config/install/field.field.node.publication_page.field_landing_page_hero_theme.yml
@@ -10,11 +10,13 @@ id: node.publication_page.field_landing_page_hero_theme
 field_name: field_landing_page_hero_theme
 entity_type: node
 bundle: publication_page
-label: 'Hero image theme'
-description: 'If your hero image is mostly dark, apply the dark theme. This changes how the page title is displayed.'
-required: false
+label: 'Page title display style'
+description: 'By default the page title will display in the site’s primary colour. If you choose ‘Reverse blocked text’ the heading and introduction text will be white with a coloured block behind the text (the site’s ‘accent contrast’ and ‘accent alternate’ colours). See <a href="https://ripple.sdp.vic.gov.au/design-system/components/header">Ripple header page to understand the header </a>component design.'
+required: true
 translatable: true
-default_value: {  }
+default_value:
+  -
+    value: light
 default_value_callback: ''
 settings: {  }
 field_type: list_string
diff --git a/modules/tide_publication/tide_publication.module b/modules/tide_publication/tide_publication.module
index 7dd65b6e5..322d63e7d 100644
--- a/modules/tide_publication/tide_publication.module
+++ b/modules/tide_publication/tide_publication.module
@@ -72,12 +72,6 @@ function tide_publication_form_node_form_alter(&$form, FormStateInterface $form_
 
     $form['#process'][] = '_tide_publication_form_node_form_process';
 
-    // Move Hero Image theme to Hero Image field group.
-    if (isset($form['field_landing_page_hero_theme']) && isset($form['field_landing_page_hero_image']['widget'])) {
-      $form['field_landing_page_hero_image']['widget']['field_landing_page_hero_theme'] = $form['field_landing_page_hero_theme'];
-      unset($form['field_landing_page_hero_theme']);
-    }
-
     // Add conditional field for show table of content.
     if (isset($form['field_node_display_headings'])) {
       $form['field_node_display_headings']['#states'] = [
@@ -126,6 +120,13 @@ function _tide_publication_form_node_form_process(array $form, FormStateInterfac
       'default' => t('Default appearance'),
       'fullwidth' => t('Full-width  background image'),
     ],
+    '#ajax' => [
+      'callback' => 'tide_landing_page_set_value_hero_image_theme',
+    ],
+  ];
+
+  $form['field_landing_page_hero_theme']['#states']['enabled'] = [
+    ':input[name="_header_style_options"]' => ['value' => 'corner'],
   ];
 
   $form['field_landing_page_hero_image']['#states']['visible'] = [