From c8e2dbd4145db55dbe0cc9ef2effa63e265e4aff Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Fri, 23 Dec 2022 14:28:40 -0500 Subject: [PATCH 01/82] EPAD8-1981 initial work to get Layout Paragraphs working more smoothly with our custom code --- services/drupal/composer.json | 1 + services/drupal/composer.lock | 62 ++++++++++++++++++- .../modules/custom/epa_core/epa_core.module | 5 +- .../templates/epa-column-layout.twig | 36 +++++------ 4 files changed, 81 insertions(+), 23 deletions(-) diff --git a/services/drupal/composer.json b/services/drupal/composer.json index 59fd7ebf97..435c96f42d 100644 --- a/services/drupal/composer.json +++ b/services/drupal/composer.json @@ -271,6 +271,7 @@ "drupal/layout_builder_iframe_modal": "^1.0", "drupal/layout_builder_modal": "^1.0", "drupal/layout_builder_restrictions": "^2.7", + "drupal/layout_paragraphs": "^2.0", "drupal/linked_field": "^1.3", "drupal/linkit": "^5.0-beta12", "drupal/linkit_telephone": "^1.0@dev", diff --git a/services/drupal/composer.lock b/services/drupal/composer.lock index 5cbaeee220..f96e15fb77 100644 --- a/services/drupal/composer.lock +++ b/services/drupal/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "d523272b018cd704338b943ace6d2b8f", + "content-hash": "d540aa33400e35faa70c877d332f2324", "packages": [ { "name": "algolia/places", @@ -6686,6 +6686,64 @@ "source": "https://git.drupalcode.org/project/layout_builder_restrictions" } }, + { + "name": "drupal/layout_paragraphs", + "version": "2.0.2", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/layout_paragraphs.git", + "reference": "2.0.2" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/layout_paragraphs-2.0.2.zip", + "reference": "2.0.2", + "shasum": "5157a05120d81f0978093ddbdf92c3ead2e11010" + }, + "require": { + "drupal/core": "^9.1 || ^10", + "drupal/paragraphs": "^1.6" + }, + "require-dev": { + "drupal/block_field": "~1.0", + "drupal/entity_usage": "2.x-dev", + "drupal/paragraphs-paragraphs_library": "*" + }, + "type": "drupal-module", + "extra": { + "drupal": { + "version": "2.0.2", + "datestamp": "1671393681", + "security-coverage": { + "status": "covered", + "message": "Covered by Drupal's security advisory policy" + } + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "license": [ + "GPL-2.0+" + ], + "authors": [ + { + "name": "itamair", + "homepage": "https://www.drupal.org/user/1179076" + }, + { + "name": "justin2pin", + "homepage": "https://www.drupal.org/user/278450" + } + ], + "description": "Layout Paragraphs", + "homepage": "https://www.drupal.org/project/layout_paragraphs", + "keywords": [ + "Drupal" + ], + "support": { + "source": "http://cgit.drupalcode.org/layout_paragraphs", + "issues": "https://www.drupal.org/project/issues/layout_paragraphs" + } + }, { "name": "drupal/linked_field", "version": "1.3.0", @@ -20829,5 +20887,5 @@ "ext-pdo": "1.0.0", "php": "8.0" }, - "plugin-api-version": "2.2.0" + "plugin-api-version": "2.3.0" } 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 2739361708..df5d1ab2a7 100644 --- a/services/drupal/web/modules/custom/epa_core/epa_core.module +++ b/services/drupal/web/modules/custom/epa_core/epa_core.module @@ -98,7 +98,10 @@ function epa_core_form_node_form_alter(&$form, FormStateInterface $form_state, $ $submit_copy = $form['actions']['submit']; $submit_copy['#group'] = 'revision_information'; $submit_copy['#weight'] = 100; - $form['revision_information']['submit_copy'] = $submit_copy; + $form['revision_information']['actions'] = [ + '#type' => "actions", + 'submit' => $submit_copy, + ]; } switch ($form_id) { diff --git a/services/drupal/web/modules/custom/epa_layouts/templates/epa-column-layout.twig b/services/drupal/web/modules/custom/epa_layouts/templates/epa-column-layout.twig index 849cd62b98..b3e9695d51 100644 --- a/services/drupal/web/modules/custom/epa_layouts/templates/epa-column-layout.twig +++ b/services/drupal/web/modules/custom/epa_layouts/templates/epa-column-layout.twig @@ -1,22 +1,18 @@ {% set columns = 0 %} -{% set content_first = content.first|render %} -{% set content_second = content.second|render %} -{% set content_third = content.third|render %} -{% set content_fourth = content.fourth|render %} -{% if content_first %} +{% if content.first %} {% set columns = columns + 1 %} {% endif %} -{% if content_second %} +{% if content.second %} {% set columns = columns + 1 %} {% endif %} -{% if content_third %} +{% if content.third %} {% set columns = columns + 1 %} {% endif %} -{% if content_fourth %} +{% if content.fourth %} {% set columns = columns + 1 %} {% endif %} @@ -29,25 +25,25 @@ ] %} - {% if content_first %} - {{ content_first }} + {% if content.first %} + {{ content.first }} {% endif %} - {% if content_second %} - {{ content_second }} + {% if content.second %} + {{ content.second }} {% endif %} - {% if content_third %} - {{ content_third }} + {% if content.third %} + {{ content.third }} {% endif %} - {% if content_fourth %} - {{ content_fourth }} + {% if content.fourth %} + {{ content.fourth }} {% endif %} {% else %} - {{ content_first }} - {{ content_second }} - {{ content_third }} - {{ content_fourth }} + {{ content.first }} + {{ content.second }} + {{ content.third }} + {{ content.fourth }} {% endif %} From 2842760a16427fb0995d354015cec8d4f94e6a5e Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Fri, 23 Dec 2022 15:48:51 -0500 Subject: [PATCH 02/82] EPAD8-1981 initial configuration of section paragraph and new wide content field --- ...ity_form_display.node.web_area.default.yml | 38 ++++-- ...ity_view_display.node.web_area.default.yml | 27 ++++ ...entity_view_display.node.web_area.full.yml | 2 + ...entity_view_display.node.web_area.link.yml | 2 + ...iew_display.node.web_area.search_index.yml | 2 + ...tity_view_display.node.web_area.teaser.yml | 2 + ...ntity_view_display.node.web_area.token.yml | 2 + .../drupal/config/sync/core.extension.yml | 1 + ...field.node.web_area.field_wide_content.yml | 117 ++++++++++++++++++ .../field.storage.node.field_wide_content.yml | 21 ++++ .../sync/layout_paragraphs.modal_settings.yml | 5 + .../sync/layout_paragraphs.settings.yml | 7 ++ .../paragraphs.paragraphs_type.section.yml | 16 +++ .../sync/search_api.index.news_releases.yml | 2 +- .../sync/search_api.index.perspectives.yml | 2 +- services/drupal/config/sync/system.mail.yml | 1 + .../epa_layouts/epa_layouts.layouts.yml | 10 ++ .../epa_layouts/layouts/epa-section.html.twig | 25 ++++ 18 files changed, 267 insertions(+), 15 deletions(-) create mode 100644 services/drupal/config/sync/field.field.node.web_area.field_wide_content.yml create mode 100644 services/drupal/config/sync/field.storage.node.field_wide_content.yml create mode 100644 services/drupal/config/sync/layout_paragraphs.modal_settings.yml create mode 100644 services/drupal/config/sync/layout_paragraphs.settings.yml create mode 100644 services/drupal/config/sync/paragraphs.paragraphs_type.section.yml create mode 100644 services/drupal/web/modules/custom/epa_layouts/layouts/epa-section.html.twig diff --git a/services/drupal/config/sync/core.entity_form_display.node.web_area.default.yml b/services/drupal/config/sync/core.entity_form_display.node.web_area.default.yml index e493dbdb12..03d6ef91cf 100644 --- a/services/drupal/config/sync/core.entity_form_display.node.web_area.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.node.web_area.default.yml @@ -20,6 +20,7 @@ dependencies: - field.field.node.web_area.field_scheduled_transition - field.field.node.web_area.field_search_text - field.field.node.web_area.field_type + - field.field.node.web_area.field_wide_content - field.field.node.web_area.layout_builder__layout - node.type.web_area - workflows.workflow.epa_default @@ -28,6 +29,7 @@ dependencies: - datetime - entitygroupfield - field_group + - layout_paragraphs - paragraphs - shs third_party_settings: @@ -89,7 +91,7 @@ third_party_settings: label: 'Additional Fields' region: content parent_name: '' - weight: 5 + weight: 6 format_type: tabs format_settings: classes: '' @@ -102,7 +104,7 @@ mode: default content: created: type: datetime_timestamp - weight: 7 + weight: 8 region: content settings: { } third_party_settings: { } @@ -130,7 +132,7 @@ content: third_party_settings: { } field_channel: type: options_buttons - weight: 13 + weight: 14 region: content settings: { } third_party_settings: { } @@ -149,7 +151,7 @@ content: maxlength_js_truncate_html: false field_env_laws_regs_and_treaties: type: options_shs - weight: 15 + weight: 16 region: content settings: display_node_count: false @@ -165,7 +167,7 @@ content: third_party_settings: { } field_geographic_locations: type: options_shs - weight: 14 + weight: 15 region: content settings: display_node_count: false @@ -175,7 +177,7 @@ content: third_party_settings: { } field_keywords: type: entity_reference_autocomplete_tags - weight: 11 + weight: 12 region: content settings: match_operator: CONTAINS @@ -228,10 +230,20 @@ content: third_party_settings: { } field_type: type: options_select - weight: 12 + weight: 13 region: content settings: { } third_party_settings: { } + field_wide_content: + type: layout_paragraphs + weight: 5 + region: content + settings: + preview_view_mode: default + nesting_depth: 0 + require_layouts: 1 + empty_message: '' + third_party_settings: { } langcode: type: language_select weight: 3 @@ -241,27 +253,27 @@ content: third_party_settings: { } moderation_state: type: moderation_state_default - weight: 11 + weight: 12 region: content settings: { } third_party_settings: { } promote: type: boolean_checkbox - weight: 8 + weight: 9 region: content settings: display_label: true third_party_settings: { } status: type: boolean_checkbox - weight: 10 + weight: 11 region: content settings: display_label: true third_party_settings: { } sticky: type: boolean_checkbox - weight: 9 + weight: 10 region: content settings: display_label: true @@ -276,7 +288,7 @@ content: third_party_settings: { } uid: type: entity_reference_autocomplete - weight: 6 + weight: 7 region: content settings: match_operator: CONTAINS @@ -285,7 +297,7 @@ content: placeholder: '' third_party_settings: { } url_redirects: - weight: 12 + weight: 13 region: content settings: { } third_party_settings: { } diff --git a/services/drupal/config/sync/core.entity_view_display.node.web_area.default.yml b/services/drupal/config/sync/core.entity_view_display.node.web_area.default.yml index 40fe5d61fa..4f306bd8ec 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.web_area.default.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.web_area.default.yml @@ -20,6 +20,7 @@ dependencies: - field.field.node.web_area.field_scheduled_transition - field.field.node.web_area.field_search_text - field.field.node.web_area.field_type + - field.field.node.web_area.field_wide_content - field.field.node.web_area.layout_builder__layout - node.type.web_area module: @@ -75,6 +76,23 @@ third_party_settings: token: '' weight: 0 additional: { } + 476e0f5c-5396-47dd-9ee0-e7703afbd437: + uuid: 476e0f5c-5396-47dd-9ee0-e7703afbd437 + region: main + configuration: + id: 'field_block:node:web_area:field_wide_content' + label_display: '0' + context_mapping: + entity: layout_builder.entity + formatter: + type: entity_reference_revisions_entity_view + label: above + settings: + view_mode: default + link: '' + third_party_settings: { } + weight: 1 + additional: { } third_party_settings: { } layout_builder_restrictions: allowed_block_categories: @@ -261,6 +279,15 @@ content: third_party_settings: { } weight: 106 region: content + field_wide_content: + type: entity_reference_revisions_entity_view + label: above + settings: + view_mode: default + link: '' + third_party_settings: { } + weight: 136 + region: main links: settings: { } third_party_settings: { } diff --git a/services/drupal/config/sync/core.entity_view_display.node.web_area.full.yml b/services/drupal/config/sync/core.entity_view_display.node.web_area.full.yml index 449474fcac..ca605a9dcd 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.web_area.full.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.web_area.full.yml @@ -21,6 +21,7 @@ dependencies: - field.field.node.web_area.field_scheduled_transition - field.field.node.web_area.field_search_text - field.field.node.web_area.field_type + - field.field.node.web_area.field_wide_content - field.field.node.web_area.layout_builder__layout - node.type.web_area module: @@ -211,6 +212,7 @@ hidden: field_banner: true field_last_published: true field_search_text: true + field_wide_content: true langcode: true layout_builder__layout: true search_api_excerpt: true diff --git a/services/drupal/config/sync/core.entity_view_display.node.web_area.link.yml b/services/drupal/config/sync/core.entity_view_display.node.web_area.link.yml index 6e92992234..e872ee379f 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.web_area.link.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.web_area.link.yml @@ -21,6 +21,7 @@ dependencies: - field.field.node.web_area.field_scheduled_transition - field.field.node.web_area.field_search_text - field.field.node.web_area.field_type + - field.field.node.web_area.field_wide_content - field.field.node.web_area.layout_builder__layout - node.type.web_area module: @@ -94,6 +95,7 @@ hidden: field_scheduled_transition: true field_search_text: true field_type: true + field_wide_content: true langcode: true layout_builder__layout: true links: true diff --git a/services/drupal/config/sync/core.entity_view_display.node.web_area.search_index.yml b/services/drupal/config/sync/core.entity_view_display.node.web_area.search_index.yml index 6646e3bb04..2fcb92d73a 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.web_area.search_index.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.web_area.search_index.yml @@ -21,6 +21,7 @@ dependencies: - field.field.node.web_area.field_scheduled_transition - field.field.node.web_area.field_search_text - field.field.node.web_area.field_type + - field.field.node.web_area.field_wide_content - field.field.node.web_area.layout_builder__layout - node.type.web_area module: @@ -111,6 +112,7 @@ hidden: field_scheduled_transition: true field_search_text: true field_type: true + field_wide_content: true langcode: true layout_builder__layout: true links: true diff --git a/services/drupal/config/sync/core.entity_view_display.node.web_area.teaser.yml b/services/drupal/config/sync/core.entity_view_display.node.web_area.teaser.yml index bf6e3c7b34..628bb345fe 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.web_area.teaser.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.web_area.teaser.yml @@ -21,6 +21,7 @@ dependencies: - field.field.node.web_area.field_scheduled_transition - field.field.node.web_area.field_search_text - field.field.node.web_area.field_type + - field.field.node.web_area.field_wide_content - field.field.node.web_area.layout_builder__layout - node.type.web_area module: @@ -58,6 +59,7 @@ hidden: field_scheduled_transition: true field_search_text: true field_type: true + field_wide_content: true langcode: true layout_builder__layout: true links: true diff --git a/services/drupal/config/sync/core.entity_view_display.node.web_area.token.yml b/services/drupal/config/sync/core.entity_view_display.node.web_area.token.yml index e771bad929..512cdf9b7a 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.web_area.token.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.web_area.token.yml @@ -21,6 +21,7 @@ dependencies: - field.field.node.web_area.field_scheduled_transition - field.field.node.web_area.field_search_text - field.field.node.web_area.field_type + - field.field.node.web_area.field_wide_content - field.field.node.web_area.layout_builder__layout - node.type.web_area module: @@ -199,5 +200,6 @@ hidden: content_moderation_control: true entitygroupfield: true field_search_text: true + field_wide_content: true layout_builder__layout: true search_api_excerpt: true diff --git a/services/drupal/config/sync/core.extension.yml b/services/drupal/config/sync/core.extension.yml index 1b66a6ff44..f16b9b6812 100644 --- a/services/drupal/config/sync/core.extension.yml +++ b/services/drupal/config/sync/core.extension.yml @@ -116,6 +116,7 @@ module: layout_builder_iframe_modal: 0 layout_builder_restrictions: 0 layout_discovery: 0 + layout_paragraphs: 0 link: 0 linkit: 0 linkit_telephone: 0 diff --git a/services/drupal/config/sync/field.field.node.web_area.field_wide_content.yml b/services/drupal/config/sync/field.field.node.web_area.field_wide_content.yml new file mode 100644 index 0000000000..ea69ceff97 --- /dev/null +++ b/services/drupal/config/sync/field.field.node.web_area.field_wide_content.yml @@ -0,0 +1,117 @@ +uuid: c01f5dfe-8338-4caf-b506-5331a504dc7a +langcode: en +status: true +dependencies: + config: + - field.storage.node.field_wide_content + - node.type.web_area + - paragraphs.paragraphs_type.before_after_swipe_component + - paragraphs.paragraphs_type.box + - paragraphs.paragraphs_type.card_group + - paragraphs.paragraphs_type.dynamic_list + - paragraphs.paragraphs_type.from_library + - paragraphs.paragraphs_type.header + - paragraphs.paragraphs_type.html + - paragraphs.paragraphs_type.link_list + - paragraphs.paragraphs_type.section + - paragraphs.paragraphs_type.slideshow + module: + - custom_add_another + - entity_reference_revisions +third_party_settings: + custom_add_another: + custom_add_another: '' + custom_remove: '' +id: node.web_area.field_wide_content +field_name: field_wide_content +entity_type: node +bundle: web_area +label: 'Wide Content' +description: '' +required: false +translatable: false +default_value: { } +default_value_callback: '' +settings: + handler: 'default:paragraph' + handler_settings: + target_bundles: + before_after_swipe_component: before_after_swipe_component + box: box + card_group: card_group + dynamic_list: dynamic_list + from_library: from_library + header: header + html: html + link_list: link_list + section: section + slideshow: slideshow + negate: 0 + target_bundles_drag_drop: + applicants_or_respondents: + weight: 22 + enabled: false + author: + weight: 23 + enabled: false + banner: + weight: 24 + enabled: false + banner_slide: + weight: 25 + enabled: false + before_after_swipe_component: + weight: 26 + enabled: true + box: + weight: 27 + enabled: true + card: + weight: 28 + enabled: false + card_group: + weight: 29 + enabled: true + cfr: + weight: 30 + enabled: false + docket: + weight: 31 + enabled: false + dynamic_list: + weight: 32 + enabled: true + frc: + weight: 33 + enabled: false + from_library: + weight: 34 + enabled: true + header: + weight: 35 + enabled: true + html: + weight: 36 + enabled: true + legal_authorities: + weight: 37 + enabled: false + link_list: + weight: 38 + enabled: true + locations_of_prop_actions: + weight: 39 + enabled: false + press_officers: + weight: 40 + enabled: false + section: + weight: 42 + enabled: true + slide: + weight: 41 + enabled: false + slideshow: + weight: 42 + enabled: true +field_type: entity_reference_revisions diff --git a/services/drupal/config/sync/field.storage.node.field_wide_content.yml b/services/drupal/config/sync/field.storage.node.field_wide_content.yml new file mode 100644 index 0000000000..21ed24cd92 --- /dev/null +++ b/services/drupal/config/sync/field.storage.node.field_wide_content.yml @@ -0,0 +1,21 @@ +uuid: d9cb3ee8-a106-4c7e-8589-a1263d58fd6e +langcode: en +status: true +dependencies: + module: + - entity_reference_revisions + - node + - paragraphs +id: node.field_wide_content +field_name: field_wide_content +entity_type: node +type: entity_reference_revisions +settings: + target_type: paragraph +module: entity_reference_revisions +locked: false +cardinality: -1 +translatable: true +indexes: { } +persist_with_no_fields: false +custom_storage: false diff --git a/services/drupal/config/sync/layout_paragraphs.modal_settings.yml b/services/drupal/config/sync/layout_paragraphs.modal_settings.yml new file mode 100644 index 0000000000..a249e02acc --- /dev/null +++ b/services/drupal/config/sync/layout_paragraphs.modal_settings.yml @@ -0,0 +1,5 @@ +_core: + default_config_hash: z9zmTNfo1bY0sbqYp1OAvqSynu_DXDRdJoZhi7oiS0I +width: 90% +height: auto +autoresize: true diff --git a/services/drupal/config/sync/layout_paragraphs.settings.yml b/services/drupal/config/sync/layout_paragraphs.settings.yml new file mode 100644 index 0000000000..e5ac1baf07 --- /dev/null +++ b/services/drupal/config/sync/layout_paragraphs.settings.yml @@ -0,0 +1,7 @@ +_core: + default_config_hash: HBy2Jf-2HHsgvIjldhAl07r9vuy879dsx6Cm_LpbPrw +show_paragraph_labels: 0 +show_layout_labels: 0 +paragraph_behaviors_label: Behaviors +paragraph_behaviors_position: -99 +empty_message: 'No components to add.' diff --git a/services/drupal/config/sync/paragraphs.paragraphs_type.section.yml b/services/drupal/config/sync/paragraphs.paragraphs_type.section.yml new file mode 100644 index 0000000000..929aed380b --- /dev/null +++ b/services/drupal/config/sync/paragraphs.paragraphs_type.section.yml @@ -0,0 +1,16 @@ +uuid: 3b1e88a6-82fb-433d-81b9-65b691eb3165 +langcode: en +status: true +dependencies: + module: + - layout_paragraphs +id: section +label: Section +icon_uuid: null +icon_default: null +description: '' +behavior_plugins: + layout_paragraphs: + enabled: true + available_layouts: + layout_onecol: 'One column' diff --git a/services/drupal/config/sync/search_api.index.news_releases.yml b/services/drupal/config/sync/search_api.index.news_releases.yml index 8934da2fce..d03b0d3664 100644 --- a/services/drupal/config/sync/search_api.index.news_releases.yml +++ b/services/drupal/config/sync/search_api.index.news_releases.yml @@ -93,7 +93,7 @@ field_settings: type: text configuration: roles: - anonymous: anonymous + - anonymous view_mode: 'entity:node': news_release: search_index diff --git a/services/drupal/config/sync/search_api.index.perspectives.yml b/services/drupal/config/sync/search_api.index.perspectives.yml index 9ed81c080b..425e1057f7 100644 --- a/services/drupal/config/sync/search_api.index.perspectives.yml +++ b/services/drupal/config/sync/search_api.index.perspectives.yml @@ -88,7 +88,7 @@ field_settings: type: text configuration: roles: - anonymous: anonymous + - anonymous view_mode: 'entity:node': perspective: search_index diff --git a/services/drupal/config/sync/system.mail.yml b/services/drupal/config/sync/system.mail.yml index ca57f8ee65..68e9719d92 100644 --- a/services/drupal/config/sync/system.mail.yml +++ b/services/drupal/config/sync/system.mail.yml @@ -2,3 +2,4 @@ _core: default_config_hash: rYgt7uhPafP2ngaN_ZUPFuyI4KdE0zU868zLNSlzKoE interface: default: SMTPMailSystem + webform: webform_php_mail diff --git a/services/drupal/web/modules/custom/epa_layouts/epa_layouts.layouts.yml b/services/drupal/web/modules/custom/epa_layouts/epa_layouts.layouts.yml index 6847f98953..7ff4163a37 100644 --- a/services/drupal/web/modules/custom/epa_layouts/epa_layouts.layouts.yml +++ b/services/drupal/web/modules/custom/epa_layouts/epa_layouts.layouts.yml @@ -1,3 +1,13 @@ +epa_section: + label: 'Section' + category: 'EPA' + template: layouts/epa-section + default_region: main + regions: + main: + label: Section + icon_map: + - [main] epa_one_column: label: 'One column' category: 'EPA' diff --git a/services/drupal/web/modules/custom/epa_layouts/layouts/epa-section.html.twig b/services/drupal/web/modules/custom/epa_layouts/layouts/epa-section.html.twig new file mode 100644 index 0000000000..f36a53bcc2 --- /dev/null +++ b/services/drupal/web/modules/custom/epa_layouts/layouts/epa-section.html.twig @@ -0,0 +1,25 @@ +{# +/** + * @file + * Default theme implementation to display a one-column layout. + * + * Available variables: + * - content: The content for this layout. + * - attributes: HTML attributes for the layout
. + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'layout', + 'layout--onecol', +] +%} +{% if content %} + +
+ {{ content.content }} +
+
+{% endif %} From 02cada33082da96d9912969aeee9f83fa4d43de4 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Fri, 23 Dec 2022 16:07:08 -0500 Subject: [PATCH 03/82] EPAD8-1981 add configurable classes to section layout and ensure new field is output in layout builder --- services/drupal/composer.json | 1 + services/drupal/composer.lock | 54 ++++++++++++++++++- ...ity_view_display.node.web_area.default.yml | 22 ++++++-- .../drupal/config/sync/core.extension.yml | 1 + .../paragraphs.paragraphs_type.section.yml | 2 +- .../custom/epa_layouts/epa_layouts.info.yml | 1 + .../epa_layouts/epa_layouts.layouts.yml | 9 ++++ .../epa_layouts/layouts/epa-section.html.twig | 20 ++++--- 8 files changed, 94 insertions(+), 16 deletions(-) diff --git a/services/drupal/composer.json b/services/drupal/composer.json index 435c96f42d..feb54029dc 100644 --- a/services/drupal/composer.json +++ b/services/drupal/composer.json @@ -272,6 +272,7 @@ "drupal/layout_builder_modal": "^1.0", "drupal/layout_builder_restrictions": "^2.7", "drupal/layout_paragraphs": "^2.0", + "drupal/layout_section_classes": "^1.3", "drupal/linked_field": "^1.3", "drupal/linkit": "^5.0-beta12", "drupal/linkit_telephone": "^1.0@dev", diff --git a/services/drupal/composer.lock b/services/drupal/composer.lock index f96e15fb77..dff771ae35 100644 --- a/services/drupal/composer.lock +++ b/services/drupal/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "d540aa33400e35faa70c877d332f2324", + "content-hash": "e61602be38d8f2c82cf84dd8df4eacf2", "packages": [ { "name": "algolia/places", @@ -6744,6 +6744,58 @@ "issues": "https://www.drupal.org/project/issues/layout_paragraphs" } }, + { + "name": "drupal/layout_section_classes", + "version": "1.3.0", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/layout_section_classes.git", + "reference": "8.x-1.3" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/layout_section_classes-8.x-1.3.zip", + "reference": "8.x-1.3", + "shasum": "77d7f09eb3f73fb84dd607c487fa8722fd400060" + }, + "require": { + "drupal/core": "^8.8 || ^9 || ^10" + }, + "type": "drupal-module", + "extra": { + "drupal": { + "version": "8.x-1.3", + "datestamp": "1668742882", + "security-coverage": { + "status": "covered", + "message": "Covered by Drupal's security advisory policy" + } + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "license": [ + "GPL-2.0-or-later" + ], + "authors": [ + { + "name": "larowlan", + "homepage": "https://www.drupal.org/user/395439" + }, + { + "name": "rikki_iki", + "homepage": "https://www.drupal.org/user/1068918" + }, + { + "name": "Sam152", + "homepage": "https://www.drupal.org/user/1485048" + } + ], + "description": "Allow you to add classes to layout builder sections.", + "homepage": "https://www.drupal.org/project/layout_section_classes", + "support": { + "source": "https://git.drupalcode.org/project/layout_section_classes" + } + }, { "name": "drupal/linked_field", "version": "1.3.0", diff --git a/services/drupal/config/sync/core.entity_view_display.node.web_area.default.yml b/services/drupal/config/sync/core.entity_view_display.node.web_area.default.yml index 4f306bd8ec..3d3819e783 100644 --- a/services/drupal/config/sync/core.entity_view_display.node.web_area.default.yml +++ b/services/drupal/config/sync/core.entity_view_display.node.web_area.default.yml @@ -81,16 +81,31 @@ third_party_settings: region: main configuration: id: 'field_block:node:web_area:field_wide_content' + label: 'Wide Content' label_display: '0' + provider: layout_builder context_mapping: entity: layout_builder.entity + view_mode: view_mode formatter: type: entity_reference_revisions_entity_view - label: above + label: hidden settings: view_mode: default - link: '' - third_party_settings: { } + third_party_settings: + linked_field: + linked: 0 + type: field + destination: + field: '' + custom: '' + advanced: + title: '' + target: '' + class: '' + rel: '' + text: '' + token: '' weight: 1 additional: { } third_party_settings: { } @@ -127,6 +142,7 @@ third_party_settings: 'Chaos Tools': { } 'Content fields': - 'field_block:node:web_area:field_paragraphs' + - 'field_block:node:web_area:field_wide_content' 'Custom block types': { } 'Custom blocks': { } 'EPA Alerts': { } diff --git a/services/drupal/config/sync/core.extension.yml b/services/drupal/config/sync/core.extension.yml index f16b9b6812..2779fa4160 100644 --- a/services/drupal/config/sync/core.extension.yml +++ b/services/drupal/config/sync/core.extension.yml @@ -117,6 +117,7 @@ module: layout_builder_restrictions: 0 layout_discovery: 0 layout_paragraphs: 0 + layout_section_classes: 0 link: 0 linkit: 0 linkit_telephone: 0 diff --git a/services/drupal/config/sync/paragraphs.paragraphs_type.section.yml b/services/drupal/config/sync/paragraphs.paragraphs_type.section.yml index 929aed380b..f541dd4611 100644 --- a/services/drupal/config/sync/paragraphs.paragraphs_type.section.yml +++ b/services/drupal/config/sync/paragraphs.paragraphs_type.section.yml @@ -13,4 +13,4 @@ behavior_plugins: layout_paragraphs: enabled: true available_layouts: - layout_onecol: 'One column' + epa_section: Section diff --git a/services/drupal/web/modules/custom/epa_layouts/epa_layouts.info.yml b/services/drupal/web/modules/custom/epa_layouts/epa_layouts.info.yml index 6251f5736b..75ccdd0a9f 100644 --- a/services/drupal/web/modules/custom/epa_layouts/epa_layouts.info.yml +++ b/services/drupal/web/modules/custom/epa_layouts/epa_layouts.info.yml @@ -6,3 +6,4 @@ package: EPA dependencies: - drupal:layout_builder - drupal:layout_discovery + - layout_section_classes:layout_section_classes diff --git a/services/drupal/web/modules/custom/epa_layouts/epa_layouts.layouts.yml b/services/drupal/web/modules/custom/epa_layouts/epa_layouts.layouts.yml index 7ff4163a37..981c1d3812 100644 --- a/services/drupal/web/modules/custom/epa_layouts/epa_layouts.layouts.yml +++ b/services/drupal/web/modules/custom/epa_layouts/epa_layouts.layouts.yml @@ -2,6 +2,15 @@ epa_section: label: 'Section' category: 'EPA' template: layouts/epa-section + classes: + color: + label: 'Color' + multiple: false + required: true + options: + 'default': 'Default (white)' + 'light': 'Light (gray)' + 'dark': 'Dark (blue)' default_region: main regions: main: diff --git a/services/drupal/web/modules/custom/epa_layouts/layouts/epa-section.html.twig b/services/drupal/web/modules/custom/epa_layouts/layouts/epa-section.html.twig index f36a53bcc2..d82caf6671 100644 --- a/services/drupal/web/modules/custom/epa_layouts/layouts/epa-section.html.twig +++ b/services/drupal/web/modules/custom/epa_layouts/layouts/epa-section.html.twig @@ -1,25 +1,23 @@ {# /** * @file - * Default theme implementation to display a one-column layout. - * - * Available variables: - * - content: The content for this layout. - * - attributes: HTML attributes for the layout
. - * - * @ingroup themeable + * Template for a generic layout. */ #} {% set classes = [ 'layout', - 'layout--onecol', + 'layout--' ~ layout.id|clean_class, ] %} {% if content %} -
- {{ content.content }} -
+ {% for region in layout.getRegionNames %} + {% if content[region] %} +
+ {{ content[region] }} +
+ {% endif %} + {% endfor %}
{% endif %} From 903a8c81fe37e93b3954e2563ff857ac0e2aa321 Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Thu, 23 Feb 2023 13:28:23 -0700 Subject: [PATCH 04/82] before / after swipe with touch --- .../before-after-swipe/_before-after-swipe.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss index fe0bac3507..01a463f1f2 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss @@ -58,11 +58,11 @@ $before-after-swipe-button-size: rem(44px); .before-after-swipe__slider { align-items: center; - appearance: none; background: transparent; display: none; justify-content: center; margin: 0; + opacity: 0; outline: none; transition: all 0.2s; z-index: 3; @@ -82,6 +82,14 @@ $before-after-swipe-button-size: rem(44px); &::-webkit-slider-thumb { @include before-after-swipe__slider-thumb(); } + + &::-moz-range-track { + min-height: 45px; + } + + &::-webkit-slider-runnable-track { + min-height: 45px; + } } .before-after-swipe__slider-button { From f1ebf93e503ffb96220719393cf042b9f1b23613 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Mon, 27 Feb 2023 13:55:21 -0500 Subject: [PATCH 05/82] EPAD8-1978: Update to use button size variable --- .../05-components/before-after-swipe/_before-after-swipe.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss index 01a463f1f2..e07330548d 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss @@ -84,11 +84,11 @@ $before-after-swipe-button-size: rem(44px); } &::-moz-range-track { - min-height: 45px; + min-height: $before-after-swipe-button-size; } &::-webkit-slider-runnable-track { - min-height: 45px; + min-height: $before-after-swipe-button-size; } } From cbbb3f678c0fd2766692afe21b3699159625604e Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Thu, 2 Mar 2023 20:39:27 -0700 Subject: [PATCH 06/82] epd8-2015 add restricted class --- .../_patterns/02-base/02-html-elements/26-media/_img.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/02-base/02-html-elements/26-media/_img.scss b/services/drupal/web/themes/epa_theme/source/_patterns/02-base/02-html-elements/26-media/_img.scss index 84a7a0e3ac..ae914cb58f 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/02-base/02-html-elements/26-media/_img.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/02-base/02-html-elements/26-media/_img.scss @@ -12,4 +12,8 @@ img { max-width: 100% !important; page-break-inside: avoid; } + + &.restricted-img { + pointer-events: none; + } } From 744a086c01d7fb47a0f2794f9da1489aeaad1d88 Mon Sep 17 00:00:00 2001 From: Sarah Proper Date: Mon, 6 Mar 2023 09:21:45 -0700 Subject: [PATCH 07/82] EPAD8-1978 give slider thumb a defined width & height --- .../05-components/before-after-swipe/_before-after-swipe.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss index e07330548d..c568f86e21 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss @@ -51,9 +51,9 @@ $before-after-swipe-button-size: rem(44px); background: transparent; border: 0; cursor: pointer; - height: 100%; + height: $before-after-swipe-button-size; outline: 0; - width: $before-after-swipe-border-size; + width: $before-after-swipe-button-size; } .before-after-swipe__slider { From 7a1a80d14b6a1a5ddf90ab00ad5049cf30e9ab9f Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Mon, 6 Mar 2023 12:55:12 -0500 Subject: [PATCH 08/82] EPAD8-2015 add the restricted-img class to image tags --- .../web/themes/epa_theme/includes/media.inc | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/services/drupal/web/themes/epa_theme/includes/media.inc b/services/drupal/web/themes/epa_theme/includes/media.inc index 8aa21e301c..0d93ad970c 100644 --- a/services/drupal/web/themes/epa_theme/includes/media.inc +++ b/services/drupal/web/themes/epa_theme/includes/media.inc @@ -57,6 +57,23 @@ function epa_theme_preprocess_responsive_image(&$vars) { if ($vars['responsive_image_style_id'] == 'responsive_box_image') { $vars['img_element']['#attributes']['class'][] = 'box__image'; } + + // Load file by filename + // array. + if ($file = \Drupal::entityTypeManager() + ->getStorage('file') + ->loadByProperties(['uri' => $vars['uri']])) { + $fid = array_shift($file)->fid->value; + + if ($media = \Drupal::entityTypeManager() + ->getStorage('media') + ->loadByProperties(['field_media_image' => $fid])) { + $media = array_shift($media); + if ($media->field_banner_image_restricted->value == 'restricted') { + $vars['img_element']['#attributes']['class'][] = 'restricted-img'; + } + } + } } /** From 375cf5a4f81ef2c13fd92ee565c7b70da39f3ece Mon Sep 17 00:00:00 2001 From: Robbie Edwards Date: Mon, 13 Mar 2023 15:56:18 -0700 Subject: [PATCH 09/82] EPAD8-1824: Change header & menu color,rename mobile menu button --- .../epa_theme/source/_patterns/04-layouts/header/_header.scss | 3 +++ .../epa_theme/source/_patterns/04-layouts/header/header.twig | 2 +- .../_patterns/05-components/menu/menu--main/_menu--main.scss | 2 +- .../source/_patterns/05-components/nav/nav--epa/_nav--epa.scss | 2 +- .../source/_patterns/05-components/site-logo/_site-logo.scss | 2 +- 5 files changed, 7 insertions(+), 4 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss index 500b2b4be5..1022b17472 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss @@ -4,6 +4,7 @@ @use '../../00-config' as *; .l-header { + background: gesso-brand(blue, base); position: relative; z-index: 2; } @@ -24,6 +25,8 @@ .l-header__menu-button { margin-right: 0 !important; + padding-bottom: 0 !important; + padding-top: 0 !important; width: auto !important; @include at-media($theme-header-min-width) { diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig index 3512966840..789497df66 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig @@ -8,7 +8,7 @@ 'content': 'Logo', } %} {% endblock %} - +
{% block search %} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/menu/menu--main/_menu--main.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/menu/menu--main/_menu--main.scss index 98dcf711ba..743adceaf7 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/menu/menu--main/_menu--main.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/menu/menu--main/_menu--main.scss @@ -6,7 +6,7 @@ .menu--main { @include list-clean(); - background: gesso-brand(blue, base); + background: gesso-grayscale(gray-6); color: gesso-grayscale(white); @include at-media($theme-header-min-width) { diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/nav/nav--epa/_nav--epa.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/nav/nav--epa/_nav--epa.scss index b044deda53..3da0877feb 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/nav/nav--epa/_nav--epa.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/nav/nav--epa/_nav--epa.scss @@ -7,7 +7,7 @@ width: 18rem; @include at-media($theme-header-min-width) { - background: gesso-brand(blue, base); + background: gesso-grayscale(gray-6); float: none; width: auto; } diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/site-logo/_site-logo.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/site-logo/_site-logo.scss index 6e65a2f689..8a7d834bd2 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/site-logo/_site-logo.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/site-logo/_site-logo.scss @@ -41,7 +41,7 @@ $logo-width: 1060px; } .site-logo__svg { - fill: currentColor; + fill: gesso-grayscale(white); height: 100%; position: absolute; } From 7c4185a57b5c704d3f1f8726f260d1ba219a7ad6 Mon Sep 17 00:00:00 2001 From: Robbie Edwards Date: Tue, 14 Mar 2023 09:48:16 -0700 Subject: [PATCH 10/82] EPAD8-1824: Tweak margin and paddings --- .../_patterns/04-layouts/header/_header.scss | 5 ++ .../block--public-alerts-block.html.twig | 46 +++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 services/drupal/web/themes/epa_theme/templates/block/block--public-alerts-block.html.twig diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss index 1022b17472..597c37c235 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss @@ -5,8 +5,13 @@ .l-header { background: gesso-brand(blue, base); + padding-bottom: rem(gesso-spacing(3)); position: relative; z-index: 2; + + @include breakpoint(gesso-breakpoint(desktop)) { + padding-bottom: 0; + } } .l-header__navbar { diff --git a/services/drupal/web/themes/epa_theme/templates/block/block--public-alerts-block.html.twig b/services/drupal/web/themes/epa_theme/templates/block/block--public-alerts-block.html.twig new file mode 100644 index 0000000000..8772417a7e --- /dev/null +++ b/services/drupal/web/themes/epa_theme/templates/block/block--public-alerts-block.html.twig @@ -0,0 +1,46 @@ +{# + /** + * @file + * Theme override to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + */ +#} + +{% set classes = [ + 'block', + 'block--provider-' ~ configuration.provider|clean_class, + 'block--id-' ~ plugin_id|clean_class, + 'margin-0', +] %} + +{% set attributes = attributes.addClass(classes) %} + +{% embed '@components/block/block.twig' with { + 'hide_wrapper': not logged_in, + 'has_constrain': false, + 'title_prefix': title_prefix, + 'title_suffix': title_suffix, + 'label': label is not empty ? label : false, +} %} + + {% block content %} + {{ content }} + {% endblock %} + +{% endembed %} From f000d75c6fd0c582262347f0c7313e335543f94a Mon Sep 17 00:00:00 2001 From: Robbie Edwards Date: Tue, 14 Mar 2023 12:18:10 -0700 Subject: [PATCH 11/82] EPAD8-1824: Change header buttons and nav to new blue variant background colors --- .../00-config/config.design-tokens.yml | 7 +++++++ .../_patterns/04-layouts/header/header.twig | 2 +- .../_patterns/05-components/_index.scss | 1 + .../_toggle-admin/toggle-admin.twig | 2 +- .../button/button--dark/_button--dark.scss | 21 +++++++++++++++++++ .../button/button--dark/button--dark.md | 15 +++++++++++++ .../button/button--dark/button--dark.twig | 10 +++++++++ .../button/button--dark/button--dark.yml | 6 ++++++ .../menu/menu--main/_menu--main.scss | 4 ++-- .../05-components/nav/nav--epa/_nav--epa.scss | 2 +- .../search/search--epa/search--epa.twig | 2 +- 11 files changed, 66 insertions(+), 6 deletions(-) create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/_button--dark.scss create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.md create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.twig create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.yml diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/00-config/config.design-tokens.yml b/services/drupal/web/themes/epa_theme/source/_patterns/00-config/config.design-tokens.yml index fc88bb0432..35b5b4c67c 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/00-config/config.design-tokens.yml +++ b/services/drupal/web/themes/epa_theme/source/_patterns/00-config/config.design-tokens.yml @@ -403,6 +403,13 @@ gesso: text: grayscale.white text-hover: grayscale.white text-active: grayscale.white + dark: + background: brand.blue.dark + background-hover: brand.blue.dark-1 + background-active: brand.blue.dark-1 + text: grayscale.white + text-hover: grayscale.white + text-active: grayscale.white secondary: background: uswds.accent-cool.base background-hover: uswds.accent-cool.dark diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig index 789497df66..60fae3628c 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig @@ -8,7 +8,7 @@ 'content': 'Logo', } %} {% endblock %} - +
{% block search %} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_index.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_index.scss index c64b77a6bd..19120a4e53 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_index.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_index.scss @@ -11,6 +11,7 @@ @forward 'box'; @forward 'button/button'; @forward 'button/button--danger/button--danger'; +@forward 'button/button--dark/button--dark'; @forward 'button-group'; @forward 'definition/definition'; @forward 'document/document'; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_toggle-admin/toggle-admin.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_toggle-admin/toggle-admin.twig index 1f644cd937..fe237705b9 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_toggle-admin/toggle-admin.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_toggle-admin/toggle-admin.twig @@ -1,7 +1,7 @@ {{ attach_library('epa_theme/toggle_admin') }} {% set classes = [ - 'js-toggle-admin', + 'button--dark js-toggle-admin', modifier_classes ? modifier_classes, ]|join(' ')|trim %} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/_button--dark.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/_button--dark.scss new file mode 100644 index 0000000000..8e3c8b971d --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/_button--dark.scss @@ -0,0 +1,21 @@ +// @file +// Styles for a Danger Button. + +@use '../../../00-config' as *; + +// Drupal outputs this class on buttons that can delete content. +.button--dark { + background-color: gesso-color(button, dark, background); + color: gesso-color(button, dark, text); + + &:hover, + &:focus { + background-color: gesso-color(button, dark, background-hover); + color: gesso-color(button, dark, text-hover); + } + + &:active { + background-color: gesso-color(button, dark, background-active); + color: gesso-color(button, dark, text-active); + } +} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.md b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.md new file mode 100644 index 0000000000..6b16075bb7 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.md @@ -0,0 +1,15 @@ +--- +el: .button--dark +title: Dark Button +state: complete +--- + +Drupal outputs this class on buttons that can delete content. + +__Variables:__ +* is_button_tag: [boolean] Whether to output as a button element. +* is_demo: [boolean] Whether to show extra demo examples. +* is_disabled: [boolean] Whether this button is disabled. Not used for links. +* modifier_classes: [string] Classes to modify the default component styling. +* url: [string] URL of the button. +* text: [string] Text of the button. diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.twig new file mode 100644 index 0000000000..2407ed56e6 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.twig @@ -0,0 +1,10 @@ +{% set classes = [ + 'button--dark', + modifier_classes ? modifier_classes, +]|join(' ')|trim %} + +{% include '@components/button/button.twig' with { + 'url': url, + 'text': text, + 'modifier_classes': classes, +} %} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.yml b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.yml new file mode 100644 index 0000000000..5ae46c06ff --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.yml @@ -0,0 +1,6 @@ +--- +is_button_tag: true +is_demo: true +url: '#' +text: 'Dark Button' +text_demo: 'Dark Link Button' diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/menu/menu--main/_menu--main.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/menu/menu--main/_menu--main.scss index 743adceaf7..1849c31833 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/menu/menu--main/_menu--main.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/menu/menu--main/_menu--main.scss @@ -6,7 +6,7 @@ .menu--main { @include list-clean(); - background: gesso-grayscale(gray-6); + background: gesso-brand(blue, dark); color: gesso-grayscale(white); @include at-media($theme-header-min-width) { @@ -42,7 +42,7 @@ &:hover, &:focus, &[aria-expanded='true'] { - background: gesso-brand(blue, dark); + background: gesso-brand(blue, dark-1); } @include at-media($theme-header-min-width) { diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/nav/nav--epa/_nav--epa.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/nav/nav--epa/_nav--epa.scss index 3da0877feb..956283819e 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/nav/nav--epa/_nav--epa.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/nav/nav--epa/_nav--epa.scss @@ -7,7 +7,7 @@ width: 18rem; @include at-media($theme-header-min-width) { - background: gesso-grayscale(gray-6); + background: gesso-brand(blue, dark); float: none; width: auto; } diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/search/search--epa/search--epa.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/search/search--epa/search--epa.twig index 18a8efffa0..c560ea13d9 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/search/search--epa/search--epa.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/search/search--epa/search--epa.twig @@ -9,7 +9,7 @@
- +
{% block search %} From 34d4c8fa38c96a0e7bcf339c671e20d1c9f1dd45 Mon Sep 17 00:00:00 2001 From: Josh Wagner Date: Wed, 22 Mar 2023 15:30:33 -0400 Subject: [PATCH 41/82] [EPAD8-1977] add section backgrounds --- .../source/_patterns/04-layouts/_index.scss | 1 + .../04-layouts/section/_section.scss | 51 +++++++++++++++++++ .../image-gallery/image-gallery.scss | 5 +- .../templates/layout/epa-section.html.twig | 25 +++++++++ 4 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss create mode 100644 services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/_index.scss b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/_index.scss index 075ef14cab..07e6a01337 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/_index.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/_index.scss @@ -5,6 +5,7 @@ @forward 'grid'; @forward 'header/header'; @forward 'page/page'; +@forward 'section/section'; @forward 'sidebar/sidebar'; @forward 'sidebar/sidebar--reversed/sidebar--reversed'; @forward 'sidebar-first/sidebar-first'; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss new file mode 100644 index 0000000000..68ec9be930 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss @@ -0,0 +1,51 @@ +// @file +// Styles for the EPA Section Layout. + +@use '../../00-config' as *; + +.layout--epa-section { + &.dark { + background-color: color('primary-darker'); + + /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */ + .layout__region--main { + > h1, + > h2, + > h3, + > h4, + > h5, + > h6 { + // TODO: This should use a theme-able color, + // and should probably default to white + color: color('accent-cool'); + } + + > p { + color: color($theme-text-reverse-color); + } + + > * > a { + color: color($theme-link-reverse-color); + + &:hover { + color: color($theme-link-reverse-hover-color); + } + + &:active { + color: color($theme-link-reverse-active-color); + } + } + } + /* stylelint-enable selector-max-compound-selectors, max-nesting-depth */ + } + &.light { + background-color: color('base-lightest'); + } + + .layout__region--main { + > div { + margin-bottom: 2rem; + margin-top: 2rem; + } + } +} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss index 8bdf9223bc..9561dea416 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss @@ -77,7 +77,7 @@ $image-gallery-button-size: 44px; } %image-gallery__button { - background: gesso-grayscale(white); + background: transparent; border: 0; bottom: 0; box-shadow: 0; @@ -108,7 +108,8 @@ $image-gallery-button-size: 44px; .image-gallery__prev, .image-gallery__next { - .usa-dark-background & { + .usa-dark-background &, + .dark & { background: transparent; svg { diff --git a/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig b/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig new file mode 100644 index 0000000000..5252d9e61c --- /dev/null +++ b/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig @@ -0,0 +1,25 @@ +{# +/** + * @file + * Template for a generic layout. + */ +#} +{% + set classes = [ + 'layout', + 'layout--' ~ layout.id|clean_class, + 'u-full-width', +] +%} +{{ dd(_context) }} +{% if content %} + + {% for region in layout.getRegionNames %} + {% if content[region] %} +
+ {{ content[region] }} +
+ {% endif %} + {% endfor %} +
+{% endif %} From 978d2ab9498c75302443224e00194870c1b2c9ae Mon Sep 17 00:00:00 2001 From: Josh Wagner Date: Wed, 22 Mar 2023 16:37:37 -0400 Subject: [PATCH 42/82] [EPAD8-1977] refactor to use section component, update dark mode --- .../04-layouts/section/_section.scss | 40 ++----------------- .../image-gallery/image-gallery.scss | 2 +- .../templates/layout/epa-section.html.twig | 30 +++++++++----- 3 files changed, 24 insertions(+), 48 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss index 68ec9be930..309b39f94d 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss @@ -4,42 +4,10 @@ @use '../../00-config' as *; .layout--epa-section { - &.dark { - background-color: color('primary-darker'); - - /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */ - .layout__region--main { - > h1, - > h2, - > h3, - > h4, - > h5, - > h6 { - // TODO: This should use a theme-able color, - // and should probably default to white - color: color('accent-cool'); - } - - > p { - color: color($theme-text-reverse-color); - } - - > * > a { - color: color($theme-link-reverse-color); - - &:hover { - color: color($theme-link-reverse-hover-color); - } - - &:active { - color: color($theme-link-reverse-active-color); - } - } - } - /* stylelint-enable selector-max-compound-selectors, max-nesting-depth */ - } - &.light { - background-color: color('base-lightest'); + .usa-section--light, + .usa-section--dark { + padding-bottom: 2rem; + padding-top: 2rem; } .layout__region--main { diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss index 9561dea416..9ba36922ac 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss @@ -109,7 +109,7 @@ $image-gallery-button-size: 44px; .image-gallery__prev, .image-gallery__next { .usa-dark-background &, - .dark & { + .usa-section--dark & { background: transparent; svg { diff --git a/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig b/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig index 5252d9e61c..610e7a73cb 100644 --- a/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig @@ -9,17 +9,25 @@ 'layout', 'layout--' ~ layout.id|clean_class, 'u-full-width', -] + attributes.hasClass('dark') ? 'usa-section--dark usa-dark-background' : '', + attributes.hasClass('light') ? 'usa-section--light' : '', +]|join(' ')|trim %} -{{ dd(_context) }} + +{% set section_content %} + {% for region in layout.getRegionNames %} + {% if content[region] %} +
+ {{ content[region] }} +
+ {% endif %} + {% endfor %} +{% endset %} + {% if content %} - - {% for region in layout.getRegionNames %} - {% if content[region] %} -
- {{ content[region] }} -
- {% endif %} - {% endfor %} -
+ {% include '@layouts/section/section.twig' with { + modifier_classes: classes, + content: section_content, + has_constrain: true, + } %} {% endif %} From e66fbe80c3cf7f11b35b9f9191ce385cd3c1f708 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Wed, 22 Mar 2023 12:46:49 -0400 Subject: [PATCH 43/82] EPAD8-2082: Update mobile menu button to match USWDS --- .../source/_patterns/04-layouts/header/_header.scss | 9 --------- .../source/_patterns/04-layouts/header/header.twig | 2 +- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss index 500b2b4be5..6757d2c357 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss @@ -21,12 +21,3 @@ display: flex; justify-content: space-between; } - -.l-header__menu-button { - margin-right: 0 !important; - width: auto !important; - - @include at-media($theme-header-min-width) { - display: none !important; - } -} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig index 3512966840..b4d7bb7c7b 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig @@ -8,7 +8,7 @@ 'content': 'Logo', } %} {% endblock %} - +
{% block search %} From 98733b587e20865ca2c19f73ebaa1dcfc55eb4f0 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Wed, 22 Mar 2023 17:57:35 -0400 Subject: [PATCH 44/82] EPAD8-2088: Update caniuse browser list --- .../drupal/web/themes/epa_theme/package-lock.json | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/package-lock.json b/services/drupal/web/themes/epa_theme/package-lock.json index 574ca0692f..97f9deca25 100644 --- a/services/drupal/web/themes/epa_theme/package-lock.json +++ b/services/drupal/web/themes/epa_theme/package-lock.json @@ -2748,12 +2748,6 @@ "update-browserslist-db": "^1.0.10" } }, - "caniuse-lite": { - "version": "1.0.30001464", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001464.tgz", - "integrity": "sha512-oww27MtUmusatpRpCGSOneQk2/l5czXANDSFvsc7VuOQ86s3ANhZetpwXNf1zY/zdfP63Xvjz325DAdAoES13g==", - "dev": true - }, "core-js-compat": { "version": "3.29.0", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.29.0.tgz", @@ -5530,9 +5524,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001361", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001361.tgz", - "integrity": "sha512-ybhCrjNtkFji1/Wto6SSJKkWk6kZgVQsDq5QI83SafsF6FXv2JB4df9eEdH6g8sdGgqTXrFLjAxqBGgYoU3azQ==", + "version": "1.0.30001469", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz", + "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==", "dev": true }, "capture-stack-trace": { From 96619b74bed9e5667538edae79fe876e06339609 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 10:54:07 -0400 Subject: [PATCH 45/82] EPAD8-1977: Fix Before/After Swipe styles when inside a dark background --- .../05-components/before-after-swipe/_before-after-swipe.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss index fe0bac3507..7f6b714a99 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/before-after-swipe/_before-after-swipe.scss @@ -88,6 +88,7 @@ $before-after-swipe-button-size: rem(44px); align-items: center; background-color: #fff; border-radius: 50%; + color: gesso-color(text, primary); display: none; font-size: rem(28px); height: $before-after-swipe-button-size; From e61e42ff26265b329a693a661f77c5d280d4e757 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 13:30:11 -0400 Subject: [PATCH 46/82] EPAD8-1977: Update color token backups to match USWDS 3.x --- .../source/_patterns/00-config/config.design-tokens.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/00-config/config.design-tokens.yml b/services/drupal/web/themes/epa_theme/source/_patterns/00-config/config.design-tokens.yml index fc88bb0432..8fe29cc349 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/00-config/config.design-tokens.yml +++ b/services/drupal/web/themes/epa_theme/source/_patterns/00-config/config.design-tokens.yml @@ -141,7 +141,7 @@ gesso: white: '#fff' gray-1: !sass sass: 'color(gray-cool-5)' - fallback: '#f0f0f0' + fallback: '#edeff0' gray-2: !sass sass: 'color(gray-cool-10)' fallback: '#dfe1e2' @@ -159,7 +159,7 @@ gesso: fallback: '#3d4551' gray-7: !sass sass: 'color(gray-90)' - fallback: '#1b1b1b' + fallback: '#1c1d1f' black: '#000' uswds: base: From e43f837b069d5f1193c500dfb2c6e2b290a4b009 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 13:31:34 -0400 Subject: [PATCH 47/82] EPAD8-1977: Fix highlight styles when inside a dark background --- services/drupal/web/themes/epa_theme/source/_data/data.yml | 2 +- .../_patterns/05-components/highlight/_highlight.scss | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_data/data.yml b/services/drupal/web/themes/epa_theme/source/_data/data.yml index 029ea00f02..62d3aefb0c 100644 --- a/services/drupal/web/themes/epa_theme/source/_data/data.yml +++ b/services/drupal/web/themes/epa_theme/source/_data/data.yml @@ -11,7 +11,7 @@ body: |-

Heading Level 2

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

-

Heading Level 3

+

Highlight Heading Level 3

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
    • diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/highlight/_highlight.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/highlight/_highlight.scss index 4fc8603435..b3c6cd078e 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/highlight/_highlight.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/highlight/_highlight.scss @@ -10,8 +10,13 @@ h5, h6 { // stylelint-disable-next-line selector-no-qualifying-type &.highlight { - background-color: gesso-brand(aqua, light-1); + background-color: rgba(gesso-brand(aqua, light), 0.29); display: flow-root; padding: rem(units(1)) rem(units(2)); + + // stylelint-disable-next-line selector-no-qualifying-type + .usa-dark-background & { + color: gesso-grayscale(white); + } } } From 8c6a4709425875abb4ce5ead2d4e94017467e7e9 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 15:28:09 -0400 Subject: [PATCH 48/82] EPAD8-1977: Add styles for visited external and protected links --- .../images/external-link--purple.svg | 2 + .../themes/epa_theme/images/lock--purple.svg | 1 + .../external-link/_external-link.scss | 50 ++++++++++++++++--- 3 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 services/drupal/web/themes/epa_theme/images/external-link--purple.svg create mode 100644 services/drupal/web/themes/epa_theme/images/lock--purple.svg diff --git a/services/drupal/web/themes/epa_theme/images/external-link--purple.svg b/services/drupal/web/themes/epa_theme/images/external-link--purple.svg new file mode 100644 index 0000000000..60aba8aaf9 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/images/external-link--purple.svg @@ -0,0 +1,2 @@ + + diff --git a/services/drupal/web/themes/epa_theme/images/lock--purple.svg b/services/drupal/web/themes/epa_theme/images/lock--purple.svg new file mode 100644 index 0000000000..f5360c68c2 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/images/lock--purple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/external-link/_external-link.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/external-link/_external-link.scss index addcdfaefd..27b8aa5916 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/external-link/_external-link.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/external-link/_external-link.scss @@ -16,6 +16,12 @@ width: 1em; } + &:visited { + &::after { + @include svg-background(external-link--purple); + } + } + &:hover, &:focus, &:active { @@ -30,6 +36,8 @@ &::after { @include svg-background(external-link--white); } + + &:visited, &:hover, &:focus, &:active { @@ -45,6 +53,13 @@ &::after { @include svg-background(external-link--blue-base); } + + &:visited { + &::after { + @include svg-background(external-link--purple); + } + } + &:hover, &:focus, &:active { @@ -58,6 +73,8 @@ &::after { @include svg-background(external-link--gray-2); } + + &:visited, &:hover, &:focus, &:active { @@ -71,6 +88,8 @@ &::after { @include svg-background(external-link--gray-7); } + + &:visited, &:hover, &:focus, &:active { @@ -94,6 +113,12 @@ width: 1em; } + &:visited { + &::after { + @include svg-background(lock--purple); + } + } + &:hover, &:focus, &:active { @@ -108,6 +133,8 @@ &::after { @include svg-background(lock--white); } + + &:visited, &:hover, &:focus, &:active { @@ -123,6 +150,13 @@ &::after { @include svg-background(lock--blue-base); } + + &:visited { + &::after { + @include svg-background(lock--purple); + } + } + &:hover, &:focus, &:active { @@ -136,6 +170,8 @@ &::after { @include svg-background(lock--gray-2); } + + &:visited, &:hover, &:focus, &:active { @@ -149,6 +185,8 @@ &::after { @include svg-background(lock--gray-7); } + + &:visited, &:hover, &:focus, &:active { @@ -159,22 +197,20 @@ } } -/* -repeated code in the following, as putting them in the same block breaks -the string literal in the $external-urls variable - */ +// Repeated code in the following, as putting them in the same block breaks the +// string literal in the $external-urls variable. -/* stylelint-disable-next-line selector-no-qualifying-type */ +// stylelint-disable-next-line selector-no-qualifying-type html.no-js a#{$external-urls} { @extend %external-link; } -/* stylelint-disable-next-line selector-no-qualifying-type */ +// stylelint-disable-next-line selector-no-qualifying-type html.no-js .external-link { @extend %external-link; } -/* stylelint-disable-next-line selector-no-qualifying-type */ +// stylelint-disable-next-line selector-no-qualifying-type html.no-js body a#{$intranet-urls} { @extend %protected-link; } From 6fb7352ce4b63f24fd25be138d386aa4b354e9e4 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 15:36:21 -0400 Subject: [PATCH 49/82] EPAD8-1977: Update comments to match coding standards --- .../_patterns/02-base/03-extendables/_dark-bg-links.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_dark-bg-links.scss b/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_dark-bg-links.scss index 7008ff48b6..026998d69e 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_dark-bg-links.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_dark-bg-links.scss @@ -10,7 +10,7 @@ color: gesso-grayscale(gray-2); &::after { - /* stylelint-disable-next-line selector-no-qualifying-type */ + // stylelint-disable-next-line selector-no-qualifying-type html.no-js & { @include svg-background-important(external-link--gray-2); } @@ -23,7 +23,7 @@ color: gesso-grayscale(white); &::after { - /* stylelint-disable-next-line selector-no-qualifying-type */ + // stylelint-disable-next-line selector-no-qualifying-type html.no-js & { @include svg-background-important(external-link--white); } From e9e1e15cb515856f079a5a54301199ae747fe980 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 17:24:06 -0400 Subject: [PATCH 50/82] EPAD8-1977: Add extendable light-bg-link placeholder --- .../02-base/03-extendables/_index.scss | 1 + .../03-extendables/_light-bg-links.scss | 69 +++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_light-bg-links.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_index.scss b/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_index.scss index f50cb4d38e..35883990fd 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_index.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_index.scss @@ -1,3 +1,4 @@ @forward 'accessibility'; @forward 'clearfix'; @forward 'dark-bg-links'; +@forward 'light-bg-links'; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_light-bg-links.scss b/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_light-bg-links.scss new file mode 100644 index 0000000000..71d298c5bd --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/02-base/03-extendables/_light-bg-links.scss @@ -0,0 +1,69 @@ +// @file +// Light Background Links + +@use '../../00-config' as *; + +// Light background with default link colors. +%light-bg-link { + color: gesso-color(text, link); + + &:link { + color: gesso-color(text, link); + + &::after { + // stylelint-disable-next-line selector-no-qualifying-type + html.no-js & { + @include svg-background(external-link--blue-base); + } + } + } + + &:visited { + color: gesso-color(text, link-visited); + + &::after { + // stylelint-disable-next-line selector-no-qualifying-type + html.no-js & { + @include svg-background-important(external-link--purple); + } + } + + // stylelint-disable-next-line selector-max-compound-selectors, max-nesting-depth + span { + color: gesso-color(text, link-visited); + } + } + + &:hover, + &:focus { + color: gesso-color(text, link-hover); + + &::after { + // stylelint-disable-next-line selector-no-qualifying-type + html.no-js & { + @include svg-background(external-link--blue-dark); + } + } + + // stylelint-disable-next-line selector-max-compound-selectors, max-nesting-depth + span { + color: gesso-color(text, link-hover); + } + } + + &:active { + color: gesso-color(text, link-active); + + &::after { + // stylelint-disable-next-line selector-no-qualifying-type + html.no-js & { + @include svg-background(external-link--blue-dark); + } + } + + // stylelint-disable-next-line selector-max-compound-selectors, max-nesting-depth + span { + color: gesso-color(text, link-active); + } + } +} From 6f16a83684512a79822ad420aa8fd26fd2b2ec01 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 17:26:47 -0400 Subject: [PATCH 51/82] EPAD8-1977: Fix special box styles when inside a dark background --- .../themes/epa_theme/source/_data/data.yml | 6 +-- .../box/box--special/_box--special.scss | 47 ++++--------------- 2 files changed, 13 insertions(+), 40 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_data/data.yml b/services/drupal/web/themes/epa_theme/source/_data/data.yml index 62d3aefb0c..17aee502df 100644 --- a/services/drupal/web/themes/epa_theme/source/_data/data.yml +++ b/services/drupal/web/themes/epa_theme/source/_data/data.yml @@ -94,15 +94,15 @@ body: |-

    Boxes

    -

    Related Information

    +

    Related Information Box

    This is an example of a related info box floated to the right.

    A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

    This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

    -
    -

    Related Information

    +
    +

    Special Box

    This is an example of a related info box floated to the left.

    diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/box/box--special/_box--special.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/box/box--special/_box--special.scss index 313cdd7cf9..aa7cdbc5c1 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/box/box--special/_box--special.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/box/box--special/_box--special.scss @@ -2,7 +2,8 @@ // Styles for a Special Box. @use '../../../00-config' as *; -@use '../../../02-base' as *; +@use '../../../02-base/02-html-elements/13-headings/headings' as *; +@use '../../../02-base/03-extendables' as *; .box--special { background: gesso-grayscale(gray-1); @@ -21,6 +22,7 @@ > .box__title { @extend %h3; + color: gesso-color(text, primary); } > .box__image, @@ -45,46 +47,17 @@ .usa-dark-background & { color: gesso-color(text, primary); + a:not(.usa-button, .button) { + @extend %light-bg-link; + } + p, span { color: gesso-color(text, primary); } + } - a { - color: gesso-color(text, link); - - &:visited { - color: gesso-color(text, link-visited); - - // stylelint-disable-next-line selector-max-compound-selectors, max-nesting-depth - span { - color: gesso-color(text, link-visited); - } - } - - &:hover, - &:focus { - color: gesso-color(text, link-hover); - - // stylelint-disable-next-line selector-max-compound-selectors, max-nesting-depth - span { - color: gesso-color(text, link-hover); - } - } - - &:active { - color: gesso-color(text, link-active); - - // stylelint-disable-next-line selector-max-compound-selectors, max-nesting-depth - span { - color: gesso-color(text, link-active); - } - } - - // stylelint-disable-next-line selector-max-compound-selectors - span { - color: gesso-color(text, link); - } - } + .usa-section--light & { + background: gesso-grayscale(white); } } From 8a0894b0d25f0dcbffe473d75e9d782a6f5b392a Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 17:27:45 -0400 Subject: [PATCH 52/82] EPAD8-1977: Tweak card group spacing --- .../source/_patterns/03-uswds/card-group/_card-group.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss index 91a81980f8..89ded1f9d1 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss @@ -2,6 +2,10 @@ @use 'usa-card' as *; .usa-card-group { + * + & { + margin-top: rem(gesso-spacing(4)); + } + .usa-card--flag:nth-child(even) { @extend .usa-card--media-right; } From ff9e241edfbdda1e40e10c6577fc06fa75caefb4 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 17:29:25 -0400 Subject: [PATCH 53/82] EPAD8-1977: Fix USWDS card styles when inside a dark background --- .../source/_patterns/03-uswds/_index.scss | 1 + .../source/_patterns/03-uswds/card/_card.scss | 22 +++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card/_card.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss index a7ba25ce22..d160864c2f 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss @@ -5,6 +5,7 @@ @forward 'button/button--inverse/button--inverse'; @forward 'button/button--outline/button--outline'; @forward 'button/button--unstyled/button--unstyled'; +@forward 'card/card'; @forward 'card-group/card-group'; @forward 'dark-background/dark-background'; @forward 'hero/hero'; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card/_card.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card/_card.scss new file mode 100644 index 0000000000..94052d22c2 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card/_card.scss @@ -0,0 +1,22 @@ +@use '../../00-config' as *; +@use '../../02-base/03-extendables' as *; + +// Additional styles needed to work within dark backgrounds. +.usa-dark-background { + .usa-card { + color: gesso-color(text, primary); + + a:not(.usa-button, .button) { + @extend %light-bg-link; + } + + p, + span { + color: gesso-color(text, primary); + } + } + + .usa-card__heading { + color: gesso-color(text, primary); + } +} From b3b5a7c572019e995ff05ff99b5b89d3938051be Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 17:49:08 -0400 Subject: [PATCH 54/82] EPAD8-1977: Tweak spacing of content inside sections --- .../source/_patterns/03-uswds/section/_section.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/_section.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/_section.scss index b5830d8483..ac9266e4b8 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/_section.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/_section.scss @@ -1,3 +1,8 @@ .usa-section { overflow: auto; + + > :last-child, + > .l-constrain > :last-child { + margin-bottom: 0; + } } From 73399cd20a0eb256d5f5944b8ea8a6c7a5765980 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 17:51:15 -0400 Subject: [PATCH 55/82] EPAD8-1977: Refactor USWDS dark background and section styles --- .../source/_patterns/03-uswds/_index.scss | 1 - .../dark-background/_dark-background.scss | 33 +++++++++++++++- .../dark-background/dark-background.md | 2 +- .../section/section--dark/_section--dark.scss | 39 ------------------- .../section/section--dark/section--dark.twig | 1 + 5 files changed, 34 insertions(+), 42 deletions(-) delete mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/section--dark/_section--dark.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss index d160864c2f..175e755409 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss @@ -13,7 +13,6 @@ @forward 'modal/modal'; @forward 'nav/nav'; @forward 'section/section'; -@forward 'section/section--dark/section--dark'; @forward 'site-alert/site-alert'; @forward 'summary-box/summary-box'; @forward 'table/table'; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/_dark-background.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/_dark-background.scss index 1047d473c3..b151d276fb 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/_dark-background.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/_dark-background.scss @@ -1,8 +1,39 @@ @use '../../00-config' as *; @use '../../02-base/03-extendables' as *; -.usa-section--dark { +.usa-dark-background { + color: gesso-grayscale(white); + a { @extend %dark-bg-link; } + + table { + caption { + color: gesso-grayscale(white); + } + + // stylelint-disable selector-max-compound-selectors, max-nesting-depth + &:not(.usa-table--unstyled) { + thead a, + tbody a { + color: gesso-color(text, link); + -webkit-text-decoration-skip: objects; + + &:visited { + color: gesso-color(text, link-visited); + } + + &:hover, + &:focus { + color: gesso-color(text, link-hover); + } + + &:active { + color: gesso-color(text, link-active); + } + } + } + // stylelint-enable selector-max-compound-selectors, max-nesting-depth + } } diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/dark-background.md b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/dark-background.md index c120234323..13b5ab816a 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/dark-background.md +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/dark-background.md @@ -1,7 +1,7 @@ --- el: .usa-dark-background title: Dark Background -state: inreview +state: complete --- __Variables:__ diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/section--dark/_section--dark.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/section--dark/_section--dark.scss deleted file mode 100644 index 39dcda843e..0000000000 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/section--dark/_section--dark.scss +++ /dev/null @@ -1,39 +0,0 @@ -@use '../../../00-config' as *; -@use '../../../02-base/03-extendables' as *; - -.usa-dark-background { - color: gesso-grayscale(white); - - a { - @extend %dark-bg-link; - } - - table { - caption { - color: gesso-grayscale(white); - } - - /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */ - &:not(.usa-table--unstyled) { - thead a, - tbody a { - color: gesso-color(text, link); - -webkit-text-decoration-skip: objects; - - &:visited { - color: gesso-color(text, link-visited); - } - - &:hover, - &:focus { - color: gesso-color(text, link-hover); - } - - &:active { - color: gesso-color(text, link-active); - } - } - } - /* stylelint-enable selector-max-compound-selectors, max-nesting-depth */ - } -} diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/section--dark/section--dark.twig b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/section--dark/section--dark.twig index bf04ef0fa0..93753165f8 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/section--dark/section--dark.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/section--dark/section--dark.twig @@ -1,5 +1,6 @@ {% set classes = [ 'usa-section--dark', + 'usa-dark-background', modifier_classes ? modifier_classes, ]|join(' ')|trim %} From 86b3170a387c7d9cff7e07a4b4c55f8bae7be66f Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 17:53:39 -0400 Subject: [PATCH 56/82] EPAD8-1977: Update default spacing of components to match USWDS 3.x --- .../02-html-elements/16-blockquote/_blockquote.scss | 4 ++-- .../source/_patterns/05-components/box/_box.scss | 6 ++++-- .../_patterns/05-components/figure/_figure.scss | 8 +++++++- .../05-components/image-gallery/image-gallery.scss | 11 ++++++++--- .../_patterns/05-components/rss-feed/rss-feed.scss | 2 +- .../source/_patterns/05-components/teaser/teaser.scss | 4 ++-- 6 files changed, 24 insertions(+), 11 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/02-base/02-html-elements/16-blockquote/_blockquote.scss b/services/drupal/web/themes/epa_theme/source/_patterns/02-base/02-html-elements/16-blockquote/_blockquote.scss index 4c39f1efa7..2153c379f7 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/02-base/02-html-elements/16-blockquote/_blockquote.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/02-base/02-html-elements/16-blockquote/_blockquote.scss @@ -9,7 +9,7 @@ $blockquote-cite-divider-color: gesso-color(ui, generic, border); @include display-text-style(blockquote); border-left: rem(units(1)) solid gesso-brand(aqua, base); clear: both; - margin: 0 0 rem(gesso-spacing(3)); + margin: 0 0 rem(gesso-spacing(4)); padding: rem(units($theme-alert-padding-x)) 0 rem(units($theme-alert-padding-x)) rem(units($theme-alert-padding-x)); @@ -19,7 +19,7 @@ $blockquote-cite-divider-color: gesso-color(ui, generic, border); // Add top margin when preceded by another element. * + & { - margin-top: rem(gesso-spacing(3)); + margin-top: rem(gesso-spacing(4)); } } diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/box/_box.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/box/_box.scss index c2d12a0328..d52002a677 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/box/_box.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/box/_box.scss @@ -6,19 +6,21 @@ @use '../external-link/external-link--image/external-link--image' as *; .box { - margin-bottom: rem(units(3)); + margin-bottom: rem(units(4)); max-width: 100%; overflow: auto; @include breakpoint(gesso-breakpoint(tablet)) { &.u-align-left, &.u-align-right { + margin-bottom: rem(units(3)); + margin-top: 0; width: 33%; } } * + & { - margin-top: rem(units(2)); + margin-top: rem(units(4)); } &.has-image-header { diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/figure/_figure.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/figure/_figure.scss index 6d1d7999aa..96e0fde69d 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/figure/_figure.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/figure/_figure.scss @@ -6,7 +6,7 @@ .figure { display: table; - margin-bottom: rem(units(3)); + margin-bottom: rem(units(4)); max-width: 100%; position: relative; table-layout: fixed; @@ -15,10 +15,16 @@ @include breakpoint(gesso-breakpoint(tablet)) { &.u-align-left, &.u-align-right { + margin-bottom: rem(units(3)); + margin-top: 0; max-width: calc(50% - #{rem(gesso-get-map(gutter-width))}); } } + * + & { + margin-top: rem(units(4)); + } + &.is-centered { clear: both; margin-left: auto; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss index 9ba36922ac..82e20de26f 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/image-gallery/image-gallery.scss @@ -9,14 +9,18 @@ $image-gallery-button-size: 44px; .image-gallery { clear: both; - margin-bottom: rem(units(3)); + margin-bottom: rem(units(4)); margin-left: auto; margin-right: auto; max-width: rem(640px + $image-gallery-button-size * 2); padding: 0 rem($image-gallery-button-size); position: relative; - /* stylelint-disable */ + * + & { + margin-top: rem(gesso-spacing(4)); + } + + // stylelint-disable &.gallery_small, &.gallery_small_tall { max-width: rem(320px + $image-gallery-button-size * 2); @@ -26,7 +30,7 @@ $image-gallery-button-size: 44px; &.gallery_large_tall { max-width: rem(960px + $image-gallery-button-size * 2); } - /* stylelint-enable */ + // stylelint-enable } .image-gallery__title { @@ -88,6 +92,7 @@ $image-gallery-button-size: 44px; top: 0; width: rem($image-gallery-button-size); + &:visited, &:hover, &:focus, &:active { diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/rss-feed/rss-feed.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/rss-feed/rss-feed.scss index fdbec7f186..8388e9233b 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/rss-feed/rss-feed.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/rss-feed/rss-feed.scss @@ -5,5 +5,5 @@ .rss-feed { display: inline-block; - margin-top: rem(gesso-spacing(3)); + margin-top: rem(gesso-spacing(4)); } diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/teaser/teaser.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/teaser/teaser.scss index 8d58277baf..039d03beb2 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/teaser/teaser.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/teaser/teaser.scss @@ -5,7 +5,7 @@ @use '../../02-base' as *; .teaser { - margin-bottom: rem(gesso-spacing(3)); + margin-bottom: rem(gesso-spacing(4)); > :last-child { margin-bottom: 0; @@ -13,7 +13,7 @@ & + & { border-top: 1px solid gesso-grayscale(gray-2); - padding-top: rem(gesso-spacing(3)); + padding-top: rem(gesso-spacing(4)); } } From 1a71284c0d2f1aac1aaa72496305eb6e3c3b5d27 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 17:59:35 -0400 Subject: [PATCH 57/82] EPAD8-1977: Remove unnecessary styles --- .../source/_patterns/04-layouts/_index.scss | 1 - .../04-layouts/section/_section.scss | 19 ------------------- 2 files changed, 20 deletions(-) delete mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/_index.scss b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/_index.scss index 07e6a01337..075ef14cab 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/_index.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/_index.scss @@ -5,7 +5,6 @@ @forward 'grid'; @forward 'header/header'; @forward 'page/page'; -@forward 'section/section'; @forward 'sidebar/sidebar'; @forward 'sidebar/sidebar--reversed/sidebar--reversed'; @forward 'sidebar-first/sidebar-first'; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss deleted file mode 100644 index 309b39f94d..0000000000 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/section/_section.scss +++ /dev/null @@ -1,19 +0,0 @@ -// @file -// Styles for the EPA Section Layout. - -@use '../../00-config' as *; - -.layout--epa-section { - .usa-section--light, - .usa-section--dark { - padding-bottom: 2rem; - padding-top: 2rem; - } - - .layout__region--main { - > div { - margin-bottom: 2rem; - margin-top: 2rem; - } - } -} From 7bc08edd8aefae19e32f1c153fbb7bbbb014a662 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 18:19:25 -0400 Subject: [PATCH 58/82] EPAD8-1977: Update default spacing of components to match USWDS 3.x --- .../templates/views/views-view--dynamic-content-list.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/drupal/web/themes/epa_theme/templates/views/views-view--dynamic-content-list.html.twig b/services/drupal/web/themes/epa_theme/templates/views/views-view--dynamic-content-list.html.twig index fd779585cd..3024e18fc5 100644 --- a/services/drupal/web/themes/epa_theme/templates/views/views-view--dynamic-content-list.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/views/views-view--dynamic-content-list.html.twig @@ -31,7 +31,7 @@ 'view--' ~ id|clean_class, 'view--display-' ~ display_id, dom_id ? 'js-view-dom-id-' ~ dom_id, - 'margin-bottom-5', + 'margin-bottom-4', ] %} {% set attributes = attributes.addClass(classes) %} From 2424fc46e0751971465363de72f748dc4e2cf45e Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Thu, 23 Mar 2023 18:21:08 -0400 Subject: [PATCH 59/82] EPAD8-1977: Theme section layout paragraph --- .../field--entity-reference-revisions.html.twig | 10 ++++++++++ .../field/field--field-wide-content.html.twig | 10 ++++++++++ ...ld--node--field-wide-content--web-area.html.twig | 12 ++++++++++++ .../templates/layout/epa-section.html.twig | 13 ++++--------- 4 files changed, 36 insertions(+), 9 deletions(-) create mode 100644 services/drupal/web/themes/epa_theme/templates/field/field--entity-reference-revisions.html.twig create mode 100644 services/drupal/web/themes/epa_theme/templates/field/field--field-wide-content.html.twig create mode 100644 services/drupal/web/themes/epa_theme/templates/field/field--node--field-wide-content--web-area.html.twig diff --git a/services/drupal/web/themes/epa_theme/templates/field/field--entity-reference-revisions.html.twig b/services/drupal/web/themes/epa_theme/templates/field/field--entity-reference-revisions.html.twig new file mode 100644 index 0000000000..9d83d58f5a --- /dev/null +++ b/services/drupal/web/themes/epa_theme/templates/field/field--entity-reference-revisions.html.twig @@ -0,0 +1,10 @@ +{# +/** + * @file + * Theme override for a field. + */ +#} + +{% for item in items %} + {{ item.content }} +{% endfor %} diff --git a/services/drupal/web/themes/epa_theme/templates/field/field--field-wide-content.html.twig b/services/drupal/web/themes/epa_theme/templates/field/field--field-wide-content.html.twig new file mode 100644 index 0000000000..9d83d58f5a --- /dev/null +++ b/services/drupal/web/themes/epa_theme/templates/field/field--field-wide-content.html.twig @@ -0,0 +1,10 @@ +{# +/** + * @file + * Theme override for a field. + */ +#} + +{% for item in items %} + {{ item.content }} +{% endfor %} diff --git a/services/drupal/web/themes/epa_theme/templates/field/field--node--field-wide-content--web-area.html.twig b/services/drupal/web/themes/epa_theme/templates/field/field--node--field-wide-content--web-area.html.twig new file mode 100644 index 0000000000..25de8a60a8 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/templates/field/field--node--field-wide-content--web-area.html.twig @@ -0,0 +1,12 @@ +{# +/** + * @file + * Theme override for a field. + */ +#} + +
    + {% for item in items %} + {{ item.content }} +{% endfor %} +
    diff --git a/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig b/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig index 610e7a73cb..0c273eef38 100644 --- a/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/layout/epa-section.html.twig @@ -6,20 +6,15 @@ #} {% set classes = [ - 'layout', - 'layout--' ~ layout.id|clean_class, - 'u-full-width', - attributes.hasClass('dark') ? 'usa-section--dark usa-dark-background' : '', - attributes.hasClass('light') ? 'usa-section--light' : '', -]|join(' ')|trim + attributes.hasClass('dark') ? 'usa-section--dark usa-dark-background' : '', + attributes.hasClass('light') ? 'usa-section--light' : '', + ]|join(' ')|trim %} {% set section_content %} {% for region in layout.getRegionNames %} {% if content[region] %} -
    - {{ content[region] }} -
    + {{ content[region] }} {% endif %} {% endfor %} {% endset %} From f4c9c20b72dcaf1819b99822ad569ada0e416a6f Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Fri, 24 Mar 2023 15:57:10 -0400 Subject: [PATCH 60/82] EPAD8-1977: Update demo body content --- .../themes/epa_theme/source/_data/data.yml | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_data/data.yml b/services/drupal/web/themes/epa_theme/source/_data/data.yml index 17aee502df..fcc5153af6 100644 --- a/services/drupal/web/themes/epa_theme/source/_data/data.yml +++ b/services/drupal/web/themes/epa_theme/source/_data/data.yml @@ -7,7 +7,7 @@ site_name: 'US EPA' site_slogan: 'United States Environmental Protection Agency' site_logo: 'https://fpoimg.com/250x100?text=Logo' body: |- -

    This is the body content, which can contain HTML markup. There is no limit to how long this content can be. it could have both internal and external links.

    +

    This is the body content, which can contain HTML markup. There is no limit to how long this content can be. It could have both internal and external links.

    Heading Level 2

    A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

    This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

    @@ -96,17 +96,19 @@ body: |-

    Related Information Box

    -

    This is an example of a related info box floated to the right.

    +

    This is an example of a related info box floated to the right. It could have both internal and external links.

    A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

    This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

    +

    A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

    Special Box

    -

    This is an example of a related info box floated to the left.

    +

    This is an example of a related info box floated to the left. It could have both internal and external links.

    +

    This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

    A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

    This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

    @@ -128,6 +130,7 @@ body: |-

    A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

    This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

    +

    A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

    Small @@ -136,6 +139,7 @@ body: |- This is an example of a small image with a caption floated to the left.
    +

    This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

    A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

    This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

    @@ -154,35 +158,42 @@ body: |- This is an example of a large image with a caption centered on the page.
    -
    -
    Image Gallery
    -
    - - +
    +
    Image Gallery Title
    +
    + +
    -
    -
      +
      +
      • -
        Small Gallery
        +
        Medium Gallery
        First image with an optional caption
      • -
        Small Gallery
        +
        Medium Gallery
        +
        -
      • -
        Small Gallery
        +
        Medium Gallery
        Third image with an optional caption, which might be really long
      • -
        Small Gallery
        +
        Medium Gallery
        +
      @@ -217,6 +228,7 @@ body: |-

      A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

      This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

      +

      A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

      @@ -227,6 +239,7 @@ body: |- This is an example of a small video with a caption floated to the left.
      +

      This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

      A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

      This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

      From 79bc2d08187d77f6096bcdce48ac58c917812077 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Fri, 24 Mar 2023 15:57:54 -0400 Subject: [PATCH 61/82] EPAD8-1977: Update demo card group content --- .../03-uswds/card-group/card-group.yml | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/card-group.yml b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/card-group.yml index 95499c700a..b72024827b 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/card-group.yml +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/card-group.yml @@ -1,29 +1,29 @@ is_demo: true cards: - - title: Basic Card + - title: First Card content: |-

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

      - media: 'A placeholder image' + media: 'A placeholder image' layout_classes: tablet:grid-col-4 - button_text: 'Visit Florida Keys' - url: '#' - - title: Basic Card + button_text: 'Button Text' + button_url: '#0' + - title: Second Card content: |- -

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

      - media: 'A placeholder image' +

      Etiam vitae sodales metus. Fusce id orci dignissim, efficitur risus eget, tempus odio. Donec lectus ante, auctor eget cursus sed, convallis quis magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris mattis tellus bibendum aliquet malesuada.

      + media: 'A placeholder image' modifier_classes: tablet:grid-col-4 - button_text: 'Visit Florida Keys' - url: '#' - - title: Basic Card + button_text: 'Button Text' + button_url: '#0' + - title: Third Card content: |- -

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

      - media: 'A placeholder image' +

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

      + media: 'A placeholder image' layout_classes: tablet:grid-col-4 - button_text: 'Visit Florida Keys' - url: '#' - - title: Basic Card + button_text: 'Button Text' + button_url: '#0' + - title: Fourth Card content: |- -

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

      - media: 'A placeholder image' +

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore possimus similique nemo odit doloremque laudantium?

      + media: 'A placeholder image' layout_classes: tablet:grid-col-4 modifier_classes: usa-card--header-first From 7eb034e0ddbd4c33255738f69ba3fb6a5f98bb6b Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Fri, 24 Mar 2023 15:58:29 -0400 Subject: [PATCH 62/82] EPAD8-1977: Update demo dark background content --- .../dark-background/dark-background.twig | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/dark-background.twig b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/dark-background.twig index 8eed8630b8..76cfabe3ef 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/dark-background.twig +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/dark-background.twig @@ -2,6 +2,58 @@ {% block content %}
      {{ body }} +

      Buttons

      +

      + {% include '@uswds/button/button.twig' with { + is_demo: true, + text: 'Button', + text_demo: 'Link Button', + } %} +

      +

      + {% include '@uswds/button/button--unstyled/button--unstyled.twig' with { + is_demo: true, + text: 'Unstyled Button', + text_demo: 'Unstyled Link Button', + } %} +

      +

      + {% include '@uswds/button/button--outline/button--outline.twig' with { + is_demo: true, + text: 'Outline Button', + text_demo: 'Outline Link Button', + } %} +

      +

      Cards

      + {% include '@uswds/card-group/card-group.twig' with { + is_demo: true, + cards: [ + { + title: 'First Card', + content: '

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

      ', + media: 'A placeholder image', + layout_classes: 'tablet:grid-col-4', + button_text: 'Button Text', + button_url: '#0', + }, + { + title: 'Second Card', + content: '

      Etiam vitae sodales metus. Fusce id orci dignissim, efficitur risus eget, tempus odio. Donec lectus ante, auctor eget cursus sed, convallis quis magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris mattis tellus bibendum aliquet malesuada.

      ', + media: 'A placeholder image', + layout_classes: 'tablet:grid-col-4', + button_text: 'Button Text', + button_url: '#0', + }, + { + title: 'Third Card', + content: '

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

      ', + media: 'A placeholder image', + layout_classes: 'tablet:grid-col-4', + button_text: 'Button Text', + button_url: '#0', + }, + ], + } %}
      {% endblock %}
    From 41fd54d0307acd91baf37678461516f002f32c28 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Fri, 24 Mar 2023 16:47:49 -0400 Subject: [PATCH 63/82] EPAD8-1977: Fix outline button styles when inside a dark background --- .../button/button--outline/_button--outline.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/button--outline/_button--outline.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/button--outline/_button--outline.scss index 999dfa583a..71615e20a4 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/button--outline/_button--outline.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/button--outline/_button--outline.scss @@ -4,4 +4,18 @@ &:focus { color: color(blue-warm-80v); } + + .usa-dark-background & { + box-shadow: inset 0 0 0 2px gesso-grayscale(gray-2); + + &:hover, + &:focus, + &:active { + box-shadow: inset 0 0 0 2px gesso-grayscale(white); + } + + &:disabled { + box-shadow: inset 0 0 0 2px gesso-grayscale(gray-2); + } + } } From 6d62449af2eed22067aaac848ed1e145051329fc Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Fri, 24 Mar 2023 17:32:49 -0400 Subject: [PATCH 64/82] EPAD8-1977: Fix links in dark backgrounds --- .../_patterns/03-uswds/dark-background/_dark-background.scss | 4 ---- .../_patterns/05-components/definition/_definition.scss | 2 +- .../source/_patterns/05-components/footer/_footer.scss | 2 +- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/_dark-background.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/_dark-background.scss index b151d276fb..560d440a1b 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/_dark-background.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/dark-background/_dark-background.scss @@ -4,10 +4,6 @@ .usa-dark-background { color: gesso-grayscale(white); - a { - @extend %dark-bg-link; - } - table { caption { color: gesso-grayscale(white); diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/_definition.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/_definition.scss index 7638edb0cf..28112cbe2a 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/_definition.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/definition/_definition.scss @@ -42,7 +42,7 @@ position: absolute; z-index: 1; - a { + a:not(.usa-button, .button) { @extend %dark-bg-link; } } diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/footer/_footer.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/footer/_footer.scss index 6fdb76e82a..061ef40ec0 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/footer/_footer.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/footer/_footer.scss @@ -13,7 +13,7 @@ $bp-footer-columns: 700px; min-height: rem(100px) + rem(gesso-spacing(10)); padding: rem(gesso-spacing(5)) 0; - a { + a:not(.usa-button, .button) { @extend %dark-bg-link; } } From 5c36bab530a84bc058b218f21430d5d611f55cbb Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Fri, 24 Mar 2023 17:33:10 -0400 Subject: [PATCH 65/82] EPAD8-1977: Fix buttons in dark background --- .../source/_patterns/03-uswds/button/_button.scss | 15 +++++++++++++++ .../button/button--outline/_button--outline.scss | 7 +++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/_button.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/_button.scss index d92f462c46..3a37d09c9a 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/_button.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/_button.scss @@ -4,4 +4,19 @@ &:focus { color: gesso-grayscale(white); } + + .usa-dark-background + &:not(.usa-button--outline, .usa-button--unstyled):disabled { + background-color: gesso-grayscale(gray-4); + color: gesso-grayscale(gray-3); + + &:link, + &:visited, + &:hover, + &:focus, + &:active { + background-color: gesso-grayscale(gray-4); + color: gesso-grayscale(gray-3); + } + } } diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/button--outline/_button--outline.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/button--outline/_button--outline.scss index 71615e20a4..ee64ca298c 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/button--outline/_button--outline.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/button/button--outline/_button--outline.scss @@ -14,8 +14,11 @@ box-shadow: inset 0 0 0 2px gesso-grayscale(white); } - &:disabled { - box-shadow: inset 0 0 0 2px gesso-grayscale(gray-2); + &:disabled, + &:disabled:hover, + &:disabled:focus { + box-shadow: inset 0 0 0 2px gesso-grayscale(gray-4); + color: gesso-grayscale(gray-4); } } } From e8261e5e9cad7cbc7c1417f5c4ea179051e939df Mon Sep 17 00:00:00 2001 From: Robbie Edwards Date: Mon, 27 Mar 2023 16:37:50 -0700 Subject: [PATCH 66/82] EPAD8-1883: Align crd images left or right based on backend selections --- .../themes/epa_theme/includes/paragraph.inc | 11 +++++++++++ .../03-uswds/card-group/_card-group.scss | 18 +++++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/services/drupal/web/themes/epa_theme/includes/paragraph.inc b/services/drupal/web/themes/epa_theme/includes/paragraph.inc index b1c098144d..da5236eb3c 100644 --- a/services/drupal/web/themes/epa_theme/includes/paragraph.inc +++ b/services/drupal/web/themes/epa_theme/includes/paragraph.inc @@ -50,4 +50,15 @@ function epa_theme_preprocess_paragraph__card(&$variables) { $variables['modifier_classes'] .= ' usa-card--media-right'; } } + + if (!$card->get('field_flag_card_alignment')->isEmpty() && + $card->get('field_flag_card_alignment')->value == 'default' && + $style == 'flag' ) { + if (!isset($variables['modifier_classes'])) { + $variables['modifier_classes'] = 'usa-card--media-left'; + } + else { + $variables['modifier_classes'] .= ' usa-card--media-left'; + } + } } diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss index 91a81980f8..ad0ca07d6d 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss @@ -2,7 +2,23 @@ @use 'usa-card' as *; .usa-card-group { - .usa-card--flag:nth-child(even) { + .usa-card--flag:nth-child(even):not(.usa-card--media-left) { @extend .usa-card--media-right; } + + @include breakpoint-min(gesso-breakpoint(tablet)) { + .usa-card--flag.usa-card--media-left { + .usa-card__media { + left: 0; + right: auto; + } + + .usa-card__header, + .usa-card__body, + .usa-card__footer { + margin-left: rem(240px); + margin-right: 0; + } + } + } } From 8b455efb6f240bc44ff81362639fb29765fd9e97 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Tue, 28 Mar 2023 12:06:44 -0400 Subject: [PATCH 67/82] EPAD8-2081 swap out comment due date facet for Computed Comment Due Date --- ...block.public_notices_comments_due_date.yml | 23 ------------------ ...lic_notices_computed_comments_due_date.yml | 24 +++++++++++++++++++ ...ic_notices_computed_comments_due_date.yml} | 14 +++++++---- ...iews-view--search-public-notices.html.twig | 2 +- 4 files changed, 35 insertions(+), 28 deletions(-) delete mode 100644 services/drupal/config/sync/block.block.public_notices_comments_due_date.yml create mode 100644 services/drupal/config/sync/block.block.public_notices_computed_comments_due_date.yml rename services/drupal/config/sync/{facets.facet.public_notices_comments_due_date.yml => facets.facet.public_notices_computed_comments_due_date.yml} (83%) diff --git a/services/drupal/config/sync/block.block.public_notices_comments_due_date.yml b/services/drupal/config/sync/block.block.public_notices_comments_due_date.yml deleted file mode 100644 index 9f544b16a7..0000000000 --- a/services/drupal/config/sync/block.block.public_notices_comments_due_date.yml +++ /dev/null @@ -1,23 +0,0 @@ -uuid: 2aba218f-3015-4b8d-b7a4-ff3d771872c2 -langcode: en -status: true -dependencies: - config: - - facets.facet.public_notices_comments_due_date - module: - - facets - theme: - - epa_theme -id: public_notices_comments_due_date -theme: epa_theme -region: disabled -weight: 0 -provider: null -plugin: 'facet_block:public_notices_comments_due_date' -settings: - id: 'facet_block:public_notices_comments_due_date' - label: 'Comments Due Date' - label_display: visible - provider: facets - block_id: public_notices_comments_due_date -visibility: { } diff --git a/services/drupal/config/sync/block.block.public_notices_computed_comments_due_date.yml b/services/drupal/config/sync/block.block.public_notices_computed_comments_due_date.yml new file mode 100644 index 0000000000..cb0eb4ada0 --- /dev/null +++ b/services/drupal/config/sync/block.block.public_notices_computed_comments_due_date.yml @@ -0,0 +1,24 @@ +uuid: 8bdc47f5-fb03-4c6f-998c-24a6e94307ed +langcode: en +status: true +dependencies: + config: + - facets.facet.public_notices_computed_comments_due_date + module: + - facets + theme: + - epa_theme +id: public_notices_computed_comments_due_date +theme: epa_theme +region: disabled +weight: 0 +provider: null +plugin: 'facet_block:public_notices_computed_comments_due_date' +settings: + id: 'facet_block:public_notices_computed_comments_due_date' + label: 'Comments Due Date' + label_display: visible + provider: facets + context_mapping: { } + block_id: public_notices_computed_comments_due_date +visibility: { } diff --git a/services/drupal/config/sync/facets.facet.public_notices_comments_due_date.yml b/services/drupal/config/sync/facets.facet.public_notices_computed_comments_due_date.yml similarity index 83% rename from services/drupal/config/sync/facets.facet.public_notices_comments_due_date.yml rename to services/drupal/config/sync/facets.facet.public_notices_computed_comments_due_date.yml index 71c417b9cf..2c5893beb6 100644 --- a/services/drupal/config/sync/facets.facet.public_notices_comments_due_date.yml +++ b/services/drupal/config/sync/facets.facet.public_notices_computed_comments_due_date.yml @@ -1,4 +1,4 @@ -uuid: 8d140d96-b06f-4eca-a080-5be09bb9d139 +uuid: 31e3a8c3-1b82-406e-b1a6-569b4b6ae985 langcode: en status: true dependencies: @@ -11,15 +11,15 @@ dependencies: third_party_settings: facets_pretty_paths: coder: default_coder -id: public_notices_comments_due_date -name: 'Comments Due Date' +id: public_notices_computed_comments_due_date +name: 'Computed Comments Due Date' weight: 0 min_count: 1 missing: false missing_label: others url_alias: field_computed_comments_due_date facet_source_id: 'search_api:views_page__search_public_notices__page_1' -field_identifier: field_comments_due_date +field_identifier: field_computed_comments_due_date query_operator: or hard_limit: 0 exclude: false @@ -61,6 +61,12 @@ processor_configs: date_display: actual_date granularity: 5 date_format: '' + hierarchy: false + hierarchy_processor: + processor_id: hierarchy_processor + weights: + build: 100 + settings: { } raw_value_widget_order: processor_id: raw_value_widget_order weights: diff --git a/services/drupal/web/themes/epa_theme/templates/views/views-view--search-public-notices.html.twig b/services/drupal/web/themes/epa_theme/templates/views/views-view--search-public-notices.html.twig index a85e450256..5b60187a90 100644 --- a/services/drupal/web/themes/epa_theme/templates/views/views-view--search-public-notices.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/views/views-view--search-public-notices.html.twig @@ -44,7 +44,7 @@ {{ drupal_entity('block', 'public_notices_location_of_prop_action', check_access=false) }} {{ drupal_entity('block', 'public_notices_program_or_statute', check_access=false) }} {{ drupal_entity('block', 'public_notices_proposed_actions', check_access=false) }} - {{ drupal_entity('block', 'public_notices_comments_due_date', check_access=false) }} + {{ drupal_entity('block', 'public_notices_computed_comments_due_date', check_access=false) }} {%- endset -%}

    {{ 'Filter By:'|t }}

    From e0942374fa3e6c05dadcbd0f938c71a4ade47e43 Mon Sep 17 00:00:00 2001 From: Robbie Edwards Date: Tue, 28 Mar 2023 09:54:08 -0700 Subject: [PATCH 68/82] EPAD8-1882:FED work for Media First and Inset options --- .../templates/paragraph/paragraph--card.html.twig | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--card.html.twig b/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--card.html.twig index 74932a3049..2fe79afe35 100755 --- a/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--card.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--card.html.twig @@ -25,10 +25,21 @@ */ #} +{% set paragraph_parent = paragraph.getParentEntity() %} + +{% if paragraph_parent.field_title_placement.0.value == 'header-first' %} + {% set title_first = 'usa-card--header-first' %} +{% endif %} +{% if paragraph_parent.field_image_style.0.value == 'inset' %} + {% set media_indent = 'usa-card__media--inset' %} +{% endif %} + {% include '@uswds/card/card.twig' with { 'title': content.field_title|field_value, 'content': content.field_body|field_value, 'media': content.field_media_image|field_value, 'button_url': content.field_link[0]['#url'], 'button_text': paragraph.field_link.title, + 'modifier_classes': title_first ? title_first : '', + 'media_modifier_classes': media_indent ? media_indent : '', } %} From a170aeff903b761b29d88ed374e56974d79522c7 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Tue, 28 Mar 2023 14:23:41 -0400 Subject: [PATCH 69/82] EPAD8-1883: Remove unnecessary styles --- .../source/_patterns/03-uswds/_index.scss | 1 - .../03-uswds/card-group/_card-group.scss | 24 ------------------- 2 files changed, 25 deletions(-) delete mode 100644 services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss index a7ba25ce22..07f0dbf4b3 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/_index.scss @@ -5,7 +5,6 @@ @forward 'button/button--inverse/button--inverse'; @forward 'button/button--outline/button--outline'; @forward 'button/button--unstyled/button--unstyled'; -@forward 'card-group/card-group'; @forward 'dark-background/dark-background'; @forward 'hero/hero'; @forward 'input/input'; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss deleted file mode 100644 index ad0ca07d6d..0000000000 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/card-group/_card-group.scss +++ /dev/null @@ -1,24 +0,0 @@ -@use '../../00-config' as *; -@use 'usa-card' as *; - -.usa-card-group { - .usa-card--flag:nth-child(even):not(.usa-card--media-left) { - @extend .usa-card--media-right; - } - - @include breakpoint-min(gesso-breakpoint(tablet)) { - .usa-card--flag.usa-card--media-left { - .usa-card__media { - left: 0; - right: auto; - } - - .usa-card__header, - .usa-card__body, - .usa-card__footer { - margin-left: rem(240px); - margin-right: 0; - } - } - } -} From f3371eba7c40bdb008b1216a66cdf36bb45ebbf0 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Tue, 28 Mar 2023 14:24:25 -0400 Subject: [PATCH 70/82] EPAD8-1883: Refactor how alignment classes are added to flag cards --- .../web/themes/epa_theme/includes/field.inc | 7 +++ .../themes/epa_theme/includes/paragraph.inc | 56 ++++++++++++------- 2 files changed, 44 insertions(+), 19 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/includes/field.inc b/services/drupal/web/themes/epa_theme/includes/field.inc index edabc99a77..f31fba0240 100644 --- a/services/drupal/web/themes/epa_theme/includes/field.inc +++ b/services/drupal/web/themes/epa_theme/includes/field.inc @@ -29,4 +29,11 @@ function epa_theme_preprocess_field(&$variables) { ]); } } + + // Add index to individual paragraphs. + if ($variables['field_type'] == 'entity_reference_revisions' && $variables['element']['#items']->getItemDefinition()->getSetting('target_type') == 'paragraph') { + foreach ($variables['items'] as $idx => $item) { + $variables['items'][$idx]['content']['#paragraph']->index = $idx; + } + } } diff --git a/services/drupal/web/themes/epa_theme/includes/paragraph.inc b/services/drupal/web/themes/epa_theme/includes/paragraph.inc index da5236eb3c..4ae18dffb8 100644 --- a/services/drupal/web/themes/epa_theme/includes/paragraph.inc +++ b/services/drupal/web/themes/epa_theme/includes/paragraph.inc @@ -38,27 +38,45 @@ function epa_theme_preprocess_paragraph__card(&$variables) { // If flag is set, pass to card template. $variables['flag'] = $style == 'flag'; - // If the 'flag layout' field is set to right and we've chosen to display as - // the flag type, add modifier class to the card. - if (!$card->get('field_flag_card_alignment')->isEmpty() && - $card->get('field_flag_card_alignment')->value == 'right' && - $style == 'flag' ) { - if (!isset($variables['modifier_classes'])) { - $variables['modifier_classes'] = 'usa-card--media-right'; + // If the 'flag layout' field is set, add modifier classes to the card. + if ($style == 'flag') { + if ($card->get('field_flag_card_alignment')->isEmpty()) { + // Add left/right classes based on paragraph index if alignment isn’t + // already set. + if($card->index % 2 == 0) { + if (!isset($variables['modifier_classes'])) { + $variables['modifier_classes'] = 'usa-card--media-left'; + } + else { + $variables['modifier_classes'] .= ' usa-card--media-left'; + } + } + else{ + if (!isset($variables['modifier_classes'])) { + $variables['modifier_classes'] = 'usa-card--media-right'; + } + else { + $variables['modifier_classes'] .= ' usa-card--media-right'; + } + } } else { - $variables['modifier_classes'] .= ' usa-card--media-right'; - } - } - - if (!$card->get('field_flag_card_alignment')->isEmpty() && - $card->get('field_flag_card_alignment')->value == 'default' && - $style == 'flag' ) { - if (!isset($variables['modifier_classes'])) { - $variables['modifier_classes'] = 'usa-card--media-left'; - } - else { - $variables['modifier_classes'] .= ' usa-card--media-left'; + if ($card->get('field_flag_card_alignment')->value == 'right') { + if (!isset($variables['modifier_classes'])) { + $variables['modifier_classes'] = 'usa-card--media-right'; + } + else { + $variables['modifier_classes'] .= ' usa-card--media-right'; + } + } + else { + if (!isset($variables['modifier_classes'])) { + $variables['modifier_classes'] = 'usa-card--media-left'; + } + else { + $variables['modifier_classes'] .= ' usa-card--media-left'; + } + } } } } From 588bad65f15e87966a01f01829e13e50eb0309b2 Mon Sep 17 00:00:00 2001 From: Dan Mouyard Date: Tue, 28 Mar 2023 18:33:13 -0400 Subject: [PATCH 71/82] EPAD8-1882: Fix how card modifier classes are added --- .../templates/paragraph/paragraph--card.html.twig | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--card.html.twig b/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--card.html.twig index 2fe79afe35..8e60bb9317 100755 --- a/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--card.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/paragraph/paragraph--card.html.twig @@ -28,10 +28,11 @@ {% set paragraph_parent = paragraph.getParentEntity() %} {% if paragraph_parent.field_title_placement.0.value == 'header-first' %} - {% set title_first = 'usa-card--header-first' %} + {% set modifier_classes = (modifier_classes ~ ' usa-card--header-first')|trim %} {% endif %} + {% if paragraph_parent.field_image_style.0.value == 'inset' %} - {% set media_indent = 'usa-card__media--inset' %} + {% set media_modifier_classes = 'usa-card__media--inset' %} {% endif %} {% include '@uswds/card/card.twig' with { @@ -40,6 +41,6 @@ 'media': content.field_media_image|field_value, 'button_url': content.field_link[0]['#url'], 'button_text': paragraph.field_link.title, - 'modifier_classes': title_first ? title_first : '', - 'media_modifier_classes': media_indent ? media_indent : '', + 'modifier_classes': modifier_classes, + 'media_modifier_classes': media_modifier_classes, } %} From 4d2462d81f2ff5b5a5aab56755ef3b8b0cae00e2 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Wed, 29 Mar 2023 16:32:15 -0400 Subject: [PATCH 72/82] EPAD8-1883 guard against missing paragraph items --- services/drupal/web/themes/epa_theme/includes/field.inc | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/services/drupal/web/themes/epa_theme/includes/field.inc b/services/drupal/web/themes/epa_theme/includes/field.inc index f31fba0240..f5a1e98327 100644 --- a/services/drupal/web/themes/epa_theme/includes/field.inc +++ b/services/drupal/web/themes/epa_theme/includes/field.inc @@ -32,8 +32,12 @@ function epa_theme_preprocess_field(&$variables) { // Add index to individual paragraphs. if ($variables['field_type'] == 'entity_reference_revisions' && $variables['element']['#items']->getItemDefinition()->getSetting('target_type') == 'paragraph') { + $delta = 0; foreach ($variables['items'] as $idx => $item) { - $variables['items'][$idx]['content']['#paragraph']->index = $idx; + if (!empty($variables['items'][$idx]['content']['#paragraph'])) { + $variables['items'][$idx]['content']['#paragraph']->index = $delta; + $delta++; + } } } } From c64fe9ff8d6a9d646ac8482466dae40ff22244d1 Mon Sep 17 00:00:00 2001 From: Michael Hessling Date: Wed, 29 Mar 2023 17:27:16 -0400 Subject: [PATCH 73/82] Update 508 link in Assertion --- .../drupal/web/modules/custom/epa_workflow/epa_workflow.module | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/drupal/web/modules/custom/epa_workflow/epa_workflow.module b/services/drupal/web/modules/custom/epa_workflow/epa_workflow.module index aa7d64d0fa..e2650941d1 100644 --- a/services/drupal/web/modules/custom/epa_workflow/epa_workflow.module +++ b/services/drupal/web/modules/custom/epa_workflow/epa_workflow.module @@ -640,7 +640,7 @@ function _epa_workflow_add_compliance_checkboxes(&$form) { $link_508 = Link::fromTextAndUrl( t('applicable Section 508 requirements'), - Url::fromUri('http://intranet.epa.gov/accessibility/checklist.html') + Url::fromUri('https://work.epa.gov/accessibility/create-accessible-content') ); $link_508 = $link_508->toString(); From 1c10fcc0cc70cd1d20bb111565a4158d9eb209b5 Mon Sep 17 00:00:00 2001 From: Michael Hessling Date: Wed, 29 Mar 2023 20:40:08 -0400 Subject: [PATCH 74/82] Add additional locations (MX,CA) to events --- .../config/sync/field.field.node.event.field_location.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/services/drupal/config/sync/field.field.node.event.field_location.yml b/services/drupal/config/sync/field.field.node.event.field_location.yml index c4c611c340..fe28d4b772 100644 --- a/services/drupal/config/sync/field.field.node.event.field_location.yml +++ b/services/drupal/config/sync/field.field.node.event.field_location.yml @@ -38,6 +38,8 @@ default_value: default_value_callback: '' settings: available_countries: + CA: CA + MX: MX US: US langcode_override: '' field_overrides: From 905ac176ada5961055a6cd33194bea5dd645de5d Mon Sep 17 00:00:00 2001 From: Michael Hessling Date: Wed, 29 Mar 2023 20:50:40 -0400 Subject: [PATCH 75/82] Adding MST Phoenix to event timezones --- .../config/sync/core.entity_form_display.node.event.default.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/services/drupal/config/sync/core.entity_form_display.node.event.default.yml b/services/drupal/config/sync/core.entity_form_display.node.event.default.yml index 8deeb8d27e..74705e7016 100644 --- a/services/drupal/config/sync/core.entity_form_display.node.event.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.node.event.default.yml @@ -168,6 +168,7 @@ content: - America/Halifax - America/Los_Angeles - America/New_York + - America/Phoenix - Pacific/Guam - Pacific/Honolulu - Pacific/Pago_Pago From a625d2b7831334c76013aa6e43b87c9083e10f92 Mon Sep 17 00:00:00 2001 From: Carson Oldson Date: Thu, 6 Apr 2023 16:15:49 -0500 Subject: [PATCH 76/82] [EPAD8-1882] Adjusting links in help text to point to pattern lab. --- .../sync/field.field.paragraph.card_group.field_image_style.yml | 2 +- .../field.field.paragraph.card_group.field_title_placement.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/services/drupal/config/sync/field.field.paragraph.card_group.field_image_style.yml b/services/drupal/config/sync/field.field.paragraph.card_group.field_image_style.yml index 1ec7fc2fdc..de2e9b43c1 100644 --- a/services/drupal/config/sync/field.field.paragraph.card_group.field_image_style.yml +++ b/services/drupal/config/sync/field.field.paragraph.card_group.field_image_style.yml @@ -17,7 +17,7 @@ field_name: field_image_style entity_type: paragraph bundle: card_group label: 'Image Style' -description: 'Set this to change how the media items will behave for all cards. Leaving as the "Default" setting will display the cards in the "Exdent" format. Choosing "Inset" will display the cards in the "Inset" format' +description: 'Set this to change how the media items will behave for all cards. Leaving as the "Default" setting will display the cards in the "Exdent" format. Choosing "Inset" will display the cards in the "Inset" format' required: true translatable: false default_value: diff --git a/services/drupal/config/sync/field.field.paragraph.card_group.field_title_placement.yml b/services/drupal/config/sync/field.field.paragraph.card_group.field_title_placement.yml index fc918a4b76..263aca89ed 100644 --- a/services/drupal/config/sync/field.field.paragraph.card_group.field_title_placement.yml +++ b/services/drupal/config/sync/field.field.paragraph.card_group.field_title_placement.yml @@ -17,7 +17,7 @@ field_name: field_title_placement entity_type: paragraph bundle: card_group label: 'Title Placement' -description: "This setting will adjust how the card headings will display for all cards. Leave as \"Default\" for standard behavior. Choose \"Title First\" to have them display like the \"Media with Header First\" mode.\r\nNote: If choosing the \"Flag (50/50)\" style option this will become unavailable and will display with the default title placement." +description: "This setting will adjust how the card headings will display for all cards. Leave as \"Default\" for standard behavior. Choose \"Title First\" to have them display like the \"Media with Header First\" mode.\r\nNote: If choosing the \"Flag (50/50)\" style option this will become unavailable and will display with the default title placement." required: true translatable: false default_value: From 60cf965287adc53b8bf18142566e8ebc8b75577a Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Mon, 10 Apr 2023 14:45:13 -0400 Subject: [PATCH 77/82] EPAD8-1883 add default alignment option to allow flip-flopping to continue to work --- .../field.field.paragraph.card.field_flag_card_alignment.yml | 2 +- .../field.storage.paragraph.field_flag_card_alignment.yml | 5 ++++- services/drupal/web/themes/epa_theme/includes/paragraph.inc | 4 ++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/services/drupal/config/sync/field.field.paragraph.card.field_flag_card_alignment.yml b/services/drupal/config/sync/field.field.paragraph.card.field_flag_card_alignment.yml index 53716c7411..ebabb858bd 100644 --- a/services/drupal/config/sync/field.field.paragraph.card.field_flag_card_alignment.yml +++ b/services/drupal/config/sync/field.field.paragraph.card.field_flag_card_alignment.yml @@ -17,7 +17,7 @@ field_name: field_flag_card_alignment entity_type: paragraph bundle: card label: 'Flag card alignment' -description: 'If the card group''s selected style is "Flag (50/50)" then this field controls how the card''s media displays. Either aligned left or aligned right. See Flag Layout Card.' +description: 'If the card group''s selected style is "Flag (50/50)" then this field controls how the card''s media displays. By default images are alternated left and right, but you can override that using this field. See Flag Layout Card.' required: true translatable: false default_value: diff --git a/services/drupal/config/sync/field.storage.paragraph.field_flag_card_alignment.yml b/services/drupal/config/sync/field.storage.paragraph.field_flag_card_alignment.yml index 4082ed3f61..8da6a606d3 100644 --- a/services/drupal/config/sync/field.storage.paragraph.field_flag_card_alignment.yml +++ b/services/drupal/config/sync/field.storage.paragraph.field_flag_card_alignment.yml @@ -13,7 +13,10 @@ settings: allowed_values: - value: default - label: 'Left align (default)' + label: Default + - + value: left + label: 'Left align' - value: right label: 'Right align' diff --git a/services/drupal/web/themes/epa_theme/includes/paragraph.inc b/services/drupal/web/themes/epa_theme/includes/paragraph.inc index 4ae18dffb8..0537822be4 100644 --- a/services/drupal/web/themes/epa_theme/includes/paragraph.inc +++ b/services/drupal/web/themes/epa_theme/includes/paragraph.inc @@ -40,7 +40,7 @@ function epa_theme_preprocess_paragraph__card(&$variables) { // If the 'flag layout' field is set, add modifier classes to the card. if ($style == 'flag') { - if ($card->get('field_flag_card_alignment')->isEmpty()) { + if ($card->get('field_flag_card_alignment')->isEmpty() || $card->get('field_flag_card_alignment')->value == 'default') { // Add left/right classes based on paragraph index if alignment isn’t // already set. if($card->index % 2 == 0) { @@ -69,7 +69,7 @@ function epa_theme_preprocess_paragraph__card(&$variables) { $variables['modifier_classes'] .= ' usa-card--media-right'; } } - else { + elseif($card->get('field_flag_card_alignment')->value == 'left') { if (!isset($variables['modifier_classes'])) { $variables['modifier_classes'] = 'usa-card--media-left'; } From 0c266357731c5c609967d5209767ea58c3848d1d Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Tue, 11 Apr 2023 11:47:25 -0400 Subject: [PATCH 78/82] Fix bad conflict resolution in patches file --- services/drupal/composer.patches.json | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/services/drupal/composer.patches.json b/services/drupal/composer.patches.json index 9aa9ff0fd3..c624301fc5 100644 --- a/services/drupal/composer.patches.json +++ b/services/drupal/composer.patches.json @@ -219,7 +219,8 @@ "Add classes to allow color-coding of revisions list": "https://www.drupal.org/files/issues/2021-12-03/diff-add_classes-3252547-2.patch" }, "drupal/entitygroupfield": { - "Limit available groups in widget to ones user has permission to.": "https://www.drupal.org/files/issues/2020-08-07/entitygroupfield-Autocomplete_permissions-3163814-4.patch" + "Limit available groups in widget to ones user has permission to.": "https://www.drupal.org/files/issues/2020-08-07/entitygroupfield-Autocomplete_permissions-3163814-4.patch", + "Claro Dropbuttons are missing classes" : "https://www.drupal.org/files/issues/2022-04-04/entitygroupfield-matching-expected-dropbutton-markup-3183134-6.patch" }, "drupal/environment_indicator": { "Allow specifying links to specific paths on the other environments": "https://www.drupal.org/files/issues/2022-10-07/environment_indicator-configure_switcher_path-3274102-6.patch" @@ -251,9 +252,6 @@ }, "drupal/coffee": { "Allow for easy search of node id": "patches/epa_coffee_node_url.patch" - }, - "drupal/entitygroupfield": { - "Claro Dropbuttons are missing classes" : "https://www.drupal.org/files/issues/2022-04-04/entitygroupfield-matching-expected-dropbutton-markup-3183134-6.patch" } } } From 83726f0fcc22a08d685f78a514212d1aa09229d3 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Thu, 13 Apr 2023 10:00:29 -0400 Subject: [PATCH 79/82] EPAD8-2081 fix comments due date facet label --- .../facets.facet.public_notices_computed_comments_due_date.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/drupal/config/sync/facets.facet.public_notices_computed_comments_due_date.yml b/services/drupal/config/sync/facets.facet.public_notices_computed_comments_due_date.yml index 2c5893beb6..3f42071d59 100644 --- a/services/drupal/config/sync/facets.facet.public_notices_computed_comments_due_date.yml +++ b/services/drupal/config/sync/facets.facet.public_notices_computed_comments_due_date.yml @@ -12,7 +12,7 @@ third_party_settings: facets_pretty_paths: coder: default_coder id: public_notices_computed_comments_due_date -name: 'Computed Comments Due Date' +name: 'Comments Due Date' weight: 0 min_count: 1 missing: false From fda716bcf0fd68b260e0f255c14edcf7a4baae75 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Thu, 13 Apr 2023 13:30:12 -0400 Subject: [PATCH 80/82] EPAD8-2116 hide legacy media caption and alignment fields --- ....entity_form_display.media.image.default.yml | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/services/drupal/config/sync/core.entity_form_display.media.image.default.yml b/services/drupal/config/sync/core.entity_form_display.media.image.default.yml index ca9b1810a5..d280257440 100644 --- a/services/drupal/config/sync/core.entity_form_display.media.image.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.media.image.default.yml @@ -13,7 +13,6 @@ dependencies: - media.type.image module: - focal_point - - text id: media.image.default targetEntityType: media bundle: image @@ -25,20 +24,6 @@ content: region: content settings: { } third_party_settings: { } - field_legacy_caption: - type: text_textarea - weight: 8 - region: content - settings: - rows: 5 - placeholder: '' - third_party_settings: { } - field_legacy_image_alignment: - type: options_select - weight: 7 - region: content - settings: { } - third_party_settings: { } field_limit_file_accessibility: type: options_buttons weight: 6 @@ -88,6 +73,8 @@ content: hidden: created: true entitygroupfield: true + field_legacy_caption: true + field_legacy_image_alignment: true path: true status: true uid: true From 613caba93a71a40a9f528b2c4babd2a5e8d40070 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Tue, 18 Apr 2023 10:48:40 -0400 Subject: [PATCH 81/82] Fixing bad merge conflict resolution --- .../modules/custom/epa_core/epa_core.module | 18 ------------------ 1 file changed, 18 deletions(-) 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 f0b7a8780a..99d81a43ab 100644 --- a/services/drupal/web/modules/custom/epa_core/epa_core.module +++ b/services/drupal/web/modules/custom/epa_core/epa_core.module @@ -643,24 +643,6 @@ function epa_core_field_widget_paragraphs_form_alter(&$element, \Drupal\Core\For } } - - // Show/hide the "Flag alignment" field if the parent card group's 'Card Style' - // is set to the 'flag' option. - if ($element['#paragraph_type'] == 'card') { - /** @var \Drupal\field\Entity\FieldConfig $field_definition */ - $dependee_field_name = 'field_card_style'; - // Need to build specific selector to handle multiple card groups. - $selector = sprintf(':input[name="%s[%d][subform][%s]"]', $element['#field_parents'][0], $element['#field_parents'][1], $dependee_field_name); - $element['subform']['field_flag_card_alignment']['#states'] = [ - 'visible' => [ - $selector => ['value' => 'flag'], - ], - 'invisible' => [ - $selector => ['value' => 'default'], - ], - ]; - } -} /** * Implements hook_entity_bundle_field_info_alter(). */ From 9dac94d43062e7c34f3dc289fc9154bdbd6d1d72 Mon Sep 17 00:00:00 2001 From: Aaron Zinck Date: Wed, 19 Apr 2023 09:55:43 -0400 Subject: [PATCH 82/82] EPAD8-2100 show more helpful publish date help text when publish date has passed --- .../modules/custom/epa_workflow/epa_workflow.module | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/services/drupal/web/modules/custom/epa_workflow/epa_workflow.module b/services/drupal/web/modules/custom/epa_workflow/epa_workflow.module index e2650941d1..9ac322951f 100644 --- a/services/drupal/web/modules/custom/epa_workflow/epa_workflow.module +++ b/services/drupal/web/modules/custom/epa_workflow/epa_workflow.module @@ -803,12 +803,19 @@ function epa_workflow_form_revision_overview_form_alter(&$form, FormStateInterfa // Is in the “Draft, approved” state. if ($latest_revision_moderation_state == 'draft_approved') { - $message = '
    The revision will publish on ' . $latest_formatted_date_time . '.'; + $message = t('
    The revision will publish on %date.',['%date' => $latest_formatted_date_time]); $form['node_revisions_table'][0]['revision']['#context']['message']['#markup'] .= $message; } // Is in any other draft state. elseif ($latest_revision_moderation_state == 'draft' || $latest_revision_moderation_state == 'draft_needs_review') { - $message = '
    The revision is scheduled to publish on ' . $latest_formatted_date_time . ', but will only do so if this draft is approved. Currently, the draft is NOT approved.'; + // If publish date is in the future give user some guidance. + if ($latest_revision->field_publish_date->date->getTimestamp() > time()) { + $message = t('
    The revision is scheduled to publish on %date, but will only do so if this draft is approved. Currently, the draft is NOT approved.', ['%date' => $latest_formatted_date_time]); + } + // If publish date is in the past indicate the draft will publish immediately. + else { + $message = t('
    Since the scheduled publish date has already passed, this draft will publish immediately if it is approved. Remove or change the publish date if you do not wish for that to occur.'); + } $form['node_revisions_table'][0]['revision']['#context']['message']['#markup'] .= $message; } }