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 Ripple header page to understand the header 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 Ripple header page to understand the header 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 Ripple header page to understand the header 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 Ripple header page to understand the header 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'] = [