EPAD8-2243: In-page navigation

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: ''
@@ -112,7 +113,7 @@ mode: default
 content:
   created:
     type: datetime_timestamp
-    weight: 8
+    weight: 9
     region: content
     settings: {  }
     third_party_settings: {  }
@@ -171,6 +172,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
@@ -197,7 +205,7 @@ content:
     third_party_settings: {  }
   field_meta_tags:
     type: metatag_firehose
-    weight: 15
+    weight: 16
     region: content
     settings:
       sidebar: true
@@ -279,7 +287,7 @@ content:
     third_party_settings: {  }
   field_wide_template:
     type: boolean_checkbox
-    weight: 5
+    weight: 6
     region: content
     settings:
       display_label: true
@@ -293,32 +301,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
@@ -333,7 +341,7 @@ content:
     third_party_settings: {  }
   uid:
     type: entity_reference_autocomplete
-    weight: 7
+    weight: 8
     region: content
     settings:
       match_operator: CONTAINS
@@ -342,7 +350,7 @@ content:
       placeholder: ''
     third_party_settings: {  }
   url_redirects:
-    weight: 14
+    weight: 15
     region: content
     settings: {  }
     third_party_settings: {  }

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

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

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

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

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

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: 'This feature is recommended for long pages that contain lots of content. Enabling this option will add a set of links to the page that automatically link to all H2 and H3 headings on your page, including any H2 and H3 headings inside cards, dynamic links, and other paragraphs. 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

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

services/drupal/web/modules/custom/epa_core/epa_core.module

@@ -132,6 +132,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':

services/drupal/web/themes/epa_theme/package.json

@@ -67,7 +67,7 @@
     "component": "node lib/component.js"
   },
   "dependencies": {
-    "@uswds/uswds": "3.4.1",
+    "@uswds/uswds": "3.9.0",
     "domready": "^1.0.8",
     "svgxuse": "^1.2.6",
     "tablesort": "5.3.0",

services/drupal/web/themes/epa_theme/source/_patterns/00-config/config.design-tokens.yml

@@ -70,9 +70,10 @@ uswds:
   color-info: 'cyan-30v'
   color-info-dark: 'cyan-40v'
   color-info-darker: 'blue-cool-60'
-  color-disabled-light: 'gray-10'
-  color-disabled: 'gray-20'
-  color-disabled-dark: 'gray-30'
+  color-disabled-lighter: 'gray-20'
+  color-disabled-light: 'gray-40'
+  color-disabled: 'gray-50'
+  color-disabled-dark: 'gray-70'
   link-color: 'primary'
   link-visited-color: 'violet-70v'
   link-hover-color: 'primary-dark'
@@ -323,15 +324,18 @@ gesso:
           sass: 'color($theme-color-info-darker)'
           fallback: '#2e6276'
       disabled:
+        lighter: !sass
+          sass: 'color($theme-color-disabled-lighter)'
+          fallback: '#c9c9c9'
         light: !sass
           sass: 'color($theme-color-disabled-light)'
-          fallback: '#e6e6e6'
+          fallback: '#919191'
         base: !sass
           sass: 'color($theme-color-disabled)'
-          fallback: '#c9c9c9'
+          fallback: '#757575'
         dark: !sass
           sass: 'color($theme-color-disabled-dark)'
-          fallback: '#adadad'
+          fallback: '#454545'
   box-shadow:
     0: none
     1: !sass

services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/summary-box/_summary-box.scss

@@ -2,6 +2,7 @@
 @use '../../02-base/03-extendables' as *;
 
 .usa-summary-box {
+  margin-bottom: rem(units(4));
   overflow: visible;
 
   &::before,