From b9339bf964d53edd17c7565a0ae5c802b24b49bd Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Mon, 16 Sep 2024 13:45:28 -0400 Subject: [PATCH 01/10] EPAD8-2243 adding in-page-navigation field to basic pages --- ....entity_form_display.node.page.default.yml | 30 ++++++++++++------- ....entity_view_display.node.page.default.yml | 11 +++++++ ...ore.entity_view_display.node.page.link.yml | 2 ++ ...ty_view_display.node.page.search_index.yml | 2 ++ ...e.entity_view_display.node.page.teaser.yml | 2 ++ ...re.entity_view_display.node.page.token.yml | 2 ++ ...eld.node.page.field_in_page_navigation.yml | 21 +++++++++++++ ....storage.node.field_in_page_navigation.yml | 18 +++++++++++ .../modules/custom/epa_core/epa_core.module | 4 +++ 9 files changed, 81 insertions(+), 11 deletions(-) create mode 100644 services/drupal/config/sync/field.field.node.page.field_in_page_navigation.yml create mode 100644 services/drupal/config/sync/field.storage.node.field_in_page_navigation.yml diff --git a/services/drupal/config/sync/core.entity_form_display.node.page.default.yml b/services/drupal/config/sync/core.entity_form_display.node.page.default.yml index 45d5fd92f0..bc819ac177 100644 --- a/services/drupal/config/sync/core.entity_form_display.node.page.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.node.page.default.yml @@ -9,6 +9,7 @@ dependencies: - field.field.node.page.field_expiration_date - field.field.node.page.field_geographic_locations - field.field.node.page.field_hublinks + - field.field.node.page.field_in_page_navigation - field.field.node.page.field_is_searchable_collection - field.field.node.page.field_keywords - field.field.node.page.field_language @@ -46,7 +47,7 @@ third_party_settings: label: 'Additional Fields' region: content parent_name: '' - weight: 6 + weight: 7 format_type: tabs format_settings: classes: '' @@ -110,7 +111,7 @@ mode: default content: created: type: datetime_timestamp - weight: 8 + weight: 9 region: content settings: { } third_party_settings: { } @@ -169,6 +170,13 @@ content: create_new_levels: false force_deepest: false third_party_settings: { } + field_in_page_navigation: + type: boolean_checkbox + weight: 5 + region: content + settings: + display_label: true + third_party_settings: { } field_keywords: type: entity_reference_autocomplete_tags weight: 11 @@ -195,7 +203,7 @@ content: third_party_settings: { } field_meta_tags: type: metatag_firehose - weight: 15 + weight: 16 region: content settings: sidebar: true @@ -275,7 +283,7 @@ content: third_party_settings: { } field_wide_template: type: boolean_checkbox - weight: 5 + weight: 6 region: content settings: display_label: true @@ -289,32 +297,32 @@ content: third_party_settings: { } moderation_state: type: moderation_state_default - weight: 13 + weight: 14 region: content settings: { } third_party_settings: { } promote: type: boolean_checkbox - weight: 10 + weight: 11 region: content settings: display_label: true third_party_settings: { } simple_sitemap: - weight: 9 + weight: 10 region: content settings: { } third_party_settings: { } status: type: boolean_checkbox - weight: 12 + weight: 13 region: content settings: display_label: true third_party_settings: { } sticky: type: boolean_checkbox - weight: 11 + weight: 12 region: content settings: display_label: true @@ -329,7 +337,7 @@ content: third_party_settings: { } uid: type: entity_reference_autocomplete - weight: 7 + weight: 8 region: content settings: match_operator: CONTAINS @@ -338,7 +346,7 @@ content: placeholder: '' third_party_settings: { } url_redirects: - weight: 14 + weight: 15 region: content settings: { } third_party_settings: { } diff --git a/services/drupal/config/sync/core.entity_view_display.node.page.default.yml b/services/drupal/config/sync/core.entity_view_display.node.page.default.yml index 9a38f0391c..1555061044 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.page.default.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.page.default.yml @@ -9,6 +9,7 @@ dependencies: - field.field.node.page.field_expiration_date - field.field.node.page.field_geographic_locations - field.field.node.page.field_hublinks + - field.field.node.page.field_in_page_navigation - field.field.node.page.field_is_searchable_collection - field.field.node.page.field_keywords - field.field.node.page.field_language @@ -233,6 +234,16 @@ content: third_party_settings: { } weight: 130 region: content + field_in_page_navigation: + type: boolean + label: above + settings: + format: default + format_custom_false: '' + format_custom_true: '' + third_party_settings: { } + weight: 142 + region: main field_is_searchable_collection: type: boolean label: above diff --git a/services/drupal/config/sync/core.entity_view_display.node.page.link.yml b/services/drupal/config/sync/core.entity_view_display.node.page.link.yml index b230f743fd..c996899d46 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.page.link.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.page.link.yml @@ -10,6 +10,7 @@ dependencies: - field.field.node.page.field_expiration_date - field.field.node.page.field_geographic_locations - field.field.node.page.field_hublinks + - field.field.node.page.field_in_page_navigation - field.field.node.page.field_is_searchable_collection - field.field.node.page.field_keywords - field.field.node.page.field_language @@ -94,6 +95,7 @@ hidden: field_expiration_date: true field_geographic_locations: true field_hublinks: true + field_in_page_navigation: true field_is_searchable_collection: true field_keywords: true field_language: true diff --git a/services/drupal/config/sync/core.entity_view_display.node.page.search_index.yml b/services/drupal/config/sync/core.entity_view_display.node.page.search_index.yml index 205272f36b..16ea4495fb 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.page.search_index.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.page.search_index.yml @@ -10,6 +10,7 @@ dependencies: - field.field.node.page.field_expiration_date - field.field.node.page.field_geographic_locations - field.field.node.page.field_hublinks + - field.field.node.page.field_in_page_navigation - field.field.node.page.field_is_searchable_collection - field.field.node.page.field_keywords - field.field.node.page.field_language @@ -113,6 +114,7 @@ hidden: field_expiration_date: true field_geographic_locations: true field_hublinks: true + field_in_page_navigation: true field_is_searchable_collection: true field_keywords: true field_language: true diff --git a/services/drupal/config/sync/core.entity_view_display.node.page.teaser.yml b/services/drupal/config/sync/core.entity_view_display.node.page.teaser.yml index bde2434b9c..ae74d4f7ef 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.page.teaser.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.page.teaser.yml @@ -10,6 +10,7 @@ dependencies: - field.field.node.page.field_expiration_date - field.field.node.page.field_geographic_locations - field.field.node.page.field_hublinks + - field.field.node.page.field_in_page_navigation - field.field.node.page.field_is_searchable_collection - field.field.node.page.field_keywords - field.field.node.page.field_language @@ -50,6 +51,7 @@ hidden: field_expiration_date: true field_geographic_locations: true field_hublinks: true + field_in_page_navigation: true field_is_searchable_collection: true field_keywords: true field_language: true diff --git a/services/drupal/config/sync/core.entity_view_display.node.page.token.yml b/services/drupal/config/sync/core.entity_view_display.node.page.token.yml index dce5349280..4aeb07c52d 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.page.token.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.page.token.yml @@ -10,6 +10,7 @@ dependencies: - field.field.node.page.field_expiration_date - field.field.node.page.field_geographic_locations - field.field.node.page.field_hublinks + - field.field.node.page.field_in_page_navigation - field.field.node.page.field_is_searchable_collection - field.field.node.page.field_keywords - field.field.node.page.field_language @@ -218,6 +219,7 @@ content: hidden: content_moderation_control: true field_hublinks: true + field_in_page_navigation: true field_meta_tags: true field_owning_office: true field_search_text: true diff --git a/services/drupal/config/sync/field.field.node.page.field_in_page_navigation.yml b/services/drupal/config/sync/field.field.node.page.field_in_page_navigation.yml new file mode 100644 index 0000000000..7b7967a44b --- /dev/null +++ b/services/drupal/config/sync/field.field.node.page.field_in_page_navigation.yml @@ -0,0 +1,21 @@ +uuid: abc09aab-260b-42e6-9902-2c5c53b9f3d4 +langcode: en +status: true +dependencies: + config: + - field.storage.node.field_in_page_navigation + - node.type.page +id: node.page.field_in_page_navigation +field_name: field_in_page_navigation +entity_type: node +bundle: page +label: 'In-page navigation' +description: 'Enabling this will add a set of links to the page that automatically link to your H2- and H3-level headers. Enabling this is recommended on long pages containing a large amount of content to help readers navigate the page. Note that this is not compatible with the Wide Template, so if the Wide Template (below) is selected this setting will be ignored.' +required: false +translatable: false +default_value: { } +default_value_callback: '' +settings: + on_label: 'On' + off_label: 'Off' +field_type: boolean diff --git a/services/drupal/config/sync/field.storage.node.field_in_page_navigation.yml b/services/drupal/config/sync/field.storage.node.field_in_page_navigation.yml new file mode 100644 index 0000000000..582d092653 --- /dev/null +++ b/services/drupal/config/sync/field.storage.node.field_in_page_navigation.yml @@ -0,0 +1,18 @@ +uuid: efe69af1-7b76-4be1-8d30-4838feedba8b +langcode: en +status: true +dependencies: + module: + - node +id: node.field_in_page_navigation +field_name: field_in_page_navigation +entity_type: node +type: boolean +settings: { } +module: core +locked: false +cardinality: 1 +translatable: true +indexes: { } +persist_with_no_fields: false +custom_storage: false diff --git a/services/drupal/web/modules/custom/epa_core/epa_core.module b/services/drupal/web/modules/custom/epa_core/epa_core.module index 8c0159b605..1399a1ad4d 100644 --- a/services/drupal/web/modules/custom/epa_core/epa_core.module +++ b/services/drupal/web/modules/custom/epa_core/epa_core.module @@ -119,6 +119,10 @@ function epa_core_form_node_form_alter(&$form, FormStateInterface $form_state, $ // Change the "Revision log message" label to say "Revision notes". $form['revision_log']['widget'][0]['value']['#title'] = t("Revision notes"); + if (isset($form['field_in_page_navigation'])) { + $form['field_in_page_navigation']['#states']['!enabled']['input[name="field_wide_template[value]"]'] = ['checked' => TRUE]; + } + switch ($form_id) { case 'node_news_release_form': case 'node_news_release_edit_form': From 1825b2b0e280ffdc7066ed6153c81697d8c05cd1 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Mon, 23 Sep 2024 15:47:53 -0400 Subject: [PATCH 02/10] EPAD8-2243: Add USWDS in-page navigation to page layout --- .../_patterns/04-layouts/page/_page.scss | 13 +++++ .../_patterns/04-layouts/page/page.twig | 18 ++++++ .../source/_patterns/04-layouts/page/page.yml | 1 + .../detail-pages/page-with-in-page-nav.md | 4 ++ .../detail-pages/page-with-in-page-nav.twig | 1 + .../detail-pages/page-with-in-page-nav.yml | 12 ++++ .../page-with-sidenav-and-in-page-nav.md | 4 ++ .../page-with-sidenav-and-in-page-nav.twig | 1 + .../page-with-sidenav-and-in-page-nav.yml | 56 +++++++++++++++++++ .../detail-pages/page-with-sidenav.twig | 4 ++ .../detail-pages/page-with-sidenav.yml | 1 + .../06-templates/detail-pages/page.twig | 4 ++ .../06-templates/detail-pages/page.yml | 2 + .../web/themes/epa_theme/source/styles.scss | 1 + .../templates/content/node--full.html.twig | 3 +- 15 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.md create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.twig create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.yml create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.md create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.twig create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.yml diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/_page.scss b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/_page.scss index bcd763d3df..58060e0ff5 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/_page.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/_page.scss @@ -131,3 +131,16 @@ width: 100%; } } + +// USWDS in-page navigation overrides: + +// Needs to match .usa-in-page-nav-container main in +// _usa-in-page-navigation.scss +.usa-in-page-nav-main { + max-width: units($theme-in-page-nav-main-content-max-width); + width: 100%; +} + +.usa-in-page-nav { + margin-top: 0; +} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/page.twig b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/page.twig index e7f1f615b3..10eeafb7ed 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/page.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/page.twig @@ -25,11 +25,29 @@ {% endif %} + {% if has_in_page_nav %} +
+ +
+ {% endif %} + {% block content %} {% include '@layouts/_sample-content/sample-content.twig' with { 'content': 'Page Content', } %} {% endblock %} + + {% if has_in_page_nav %} +
+
+ {% endif %} + {% if has_footer %} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/page.yml b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/page.yml index d105f64fb2..95f689c16e 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/page.yml +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/page/page.yml @@ -1,4 +1,5 @@ --- modifier_classes: '' has_header: true +has_in_page_nav: true has_footer: true diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.md b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.md new file mode 100644 index 0000000000..1b9f0ac05e --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.md @@ -0,0 +1,4 @@ +--- +title: Page with In-page Navigation +state: complete +--- diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.twig b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.twig new file mode 100644 index 0000000000..b5e583e6b3 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.twig @@ -0,0 +1 @@ +{% extends '@templates/detail-pages/page.twig' %} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.yml b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.yml new file mode 100644 index 0000000000..266e35d02e --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-in-page-nav.yml @@ -0,0 +1,12 @@ +--- +title: 'Page Title' +has_in_page_nav: true +header_info: '' +contact_link: 'Contact Us' diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.md b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.md new file mode 100644 index 0000000000..fcd4fce954 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.md @@ -0,0 +1,4 @@ +--- +title: Page with Sidenav and In-page Navigation +state: complete +--- diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.twig b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.twig new file mode 100644 index 0000000000..a9241d6532 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.twig @@ -0,0 +1 @@ +{% extends '@templates/detail-pages/page-with-sidenav.twig' %} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.yml b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.yml new file mode 100644 index 0000000000..c2efce8e16 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav-and-in-page-nav.yml @@ -0,0 +1,56 @@ +--- +title: 'Page Title' +has_in_page_nav: true +has_sidenav: true +header_info: '' +contact_link: 'Contact Us' +sidenav: |- + diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav.twig b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav.twig index dffc154ec8..40dbd8f8d1 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav.twig @@ -29,6 +29,7 @@ {% endset %} {% embed '@layouts/page/page.twig' with { + 'has_in_page_nav': has_in_page_nav, 'has_header': has_header, 'has_footer': has_footer, 'modifier_classes': 'page-has-sidebar', @@ -40,6 +41,9 @@ {% block contact %} {% endblock %} + {% block in_page_nav %} + {% endblock %} + {% block content %} {{ content }} {% endblock %} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav.yml b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav.yml index 5bdd226cc6..84352ec2f2 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav.yml +++ b/services/drupal/web/themes/epa_theme/source/_patterns/06-templates/detail-pages/page-with-sidenav.yml @@ -1,5 +1,6 @@ --- title: 'Page Title' +has_in_page_nav: false has_sidenav: true header_info: '