diff --git a/services/drupal/composer.json b/services/drupal/composer.json index b609de3764..b983e91162 100644 --- a/services/drupal/composer.json +++ b/services/drupal/composer.json @@ -275,6 +275,8 @@ "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/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 f76e47a32c..76e916f22e 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": "6ee2144391950fce4b415d7c6001f114", + "content-hash": "f90e70b30e2847b3e54c9ee75439570e", "packages": [ { "name": "algolia/places", @@ -6240,6 +6240,10 @@ "name": "Kristiaan Van den Eynde", "homepage": "https://www.drupal.org/u/kristiaanvandeneynde", "role": "Maintainer" + }, + { + "name": "kristiaanvandeneynde", + "homepage": "https://www.drupal.org/user/1345130" } ], "description": "This module allows you to group users, content and other entities", @@ -6608,6 +6612,10 @@ "name": "Chris Charlton", "homepage": "https://www.drupal.org/user/17089" }, + { + "name": "heddn", + "homepage": "https://www.drupal.org/user/1463982" + }, { "name": "Sam152", "homepage": "https://www.drupal.org/user/1485048" @@ -6978,6 +6986,116 @@ "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/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", @@ -7071,6 +7189,10 @@ { "name": "johnwebdev", "homepage": "https://www.drupal.org/user/3331569" + }, + { + "name": "mark_fullmer", + "homepage": "https://www.drupal.org/user/2612816" } ], "description": "Linkit - Enriched linking experience", @@ -7332,6 +7454,10 @@ "name": "dawehner", "homepage": "https://www.drupal.org/user/99340" }, + { + "name": "hbrokmeier", + "homepage": "https://www.drupal.org/user/3736246" + }, { "name": "hipp2bsquare", "homepage": "https://www.drupal.org/user/2473076" @@ -10378,14 +10504,18 @@ "GPL-2.0-or-later" ], "authors": [ - { - "name": "RobLoach", - "homepage": "https://www.drupal.org/user/61114" - }, { "name": "colan", "homepage": "https://www.drupal.org/user/58704" }, + { + "name": "heddn", + "homepage": "https://www.drupal.org/user/1463982" + }, + { + "name": "RobLoach", + "homepage": "https://www.drupal.org/user/61114" + }, { "name": "vasike", "homepage": "https://www.drupal.org/user/156237" @@ -10435,14 +10565,14 @@ "GPL-2.0-or-later" ], "authors": [ - { - "name": "Etroid", - "homepage": "https://www.drupal.org/user/3048985" - }, { "name": "angrytoast", "homepage": "https://www.drupal.org/user/2468092" }, + { + "name": "Etroid", + "homepage": "https://www.drupal.org/user/3048985" + }, { "name": "iamEAP", "homepage": "https://www.drupal.org/user/1467594" @@ -10455,6 +10585,10 @@ "name": "nehajyoti", "homepage": "https://www.drupal.org/user/2804915" }, + { + "name": "podarok", + "homepage": "https://www.drupal.org/user/116002" + }, { "name": "sumitmadan", "homepage": "https://www.drupal.org/user/1538790" @@ -10737,7 +10871,7 @@ "homepage": "https://www.drupal.org/user/2229066" }, { - "name": "kent@passingphase.nz", + "name": "NewZeal", "homepage": "https://www.drupal.org/user/93571" }, { 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 bea5448d92..3cad0c5db5 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 @@ -22,6 +22,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 @@ -30,6 +31,7 @@ dependencies: - datetime - entitygroupfield - field_group + - layout_paragraphs - metatag - paragraphs - shs @@ -93,7 +95,7 @@ third_party_settings: label: 'Additional Fields' region: content parent_name: '' - weight: 5 + weight: 6 format_type: tabs format_settings: classes: '' @@ -106,7 +108,7 @@ mode: default content: created: type: datetime_timestamp - weight: 7 + weight: 8 region: content settings: { } third_party_settings: { } @@ -134,7 +136,7 @@ content: third_party_settings: { } field_channel: type: options_buttons - weight: 13 + weight: 14 region: content settings: { } third_party_settings: { } @@ -153,7 +155,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 @@ -169,7 +171,7 @@ content: third_party_settings: { } field_geographic_locations: type: options_shs - weight: 14 + weight: 15 region: content settings: display_node_count: false @@ -179,7 +181,7 @@ content: third_party_settings: { } field_keywords: type: entity_reference_autocomplete_tags - weight: 11 + weight: 12 region: content settings: match_operator: CONTAINS @@ -249,10 +251,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 @@ -262,27 +274,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 @@ -297,7 +309,7 @@ content: third_party_settings: { } uid: type: entity_reference_autocomplete - weight: 6 + weight: 7 region: content settings: match_operator: CONTAINS @@ -306,7 +318,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_form_display.paragraph.card_group.default.yml b/services/drupal/config/sync/core.entity_form_display.paragraph.card_group.default.yml index 24a5e31184..eeb12213d6 100644 --- a/services/drupal/config/sync/core.entity_form_display.paragraph.card_group.default.yml +++ b/services/drupal/config/sync/core.entity_form_display.paragraph.card_group.default.yml @@ -5,6 +5,8 @@ dependencies: config: - field.field.paragraph.card_group.field_card_style - field.field.paragraph.card_group.field_cards + - field.field.paragraph.card_group.field_image_style + - field.field.paragraph.card_group.field_title_placement - paragraphs.paragraphs_type.card_group module: - paragraphs @@ -21,7 +23,7 @@ content: third_party_settings: { } field_cards: type: paragraphs - weight: 1 + weight: 3 region: content settings: title: Card @@ -38,6 +40,18 @@ content: collapse_edit_all: collapse_edit_all duplicate: duplicate third_party_settings: { } + field_image_style: + type: options_select + weight: 1 + region: content + settings: { } + third_party_settings: { } + field_title_placement: + type: options_select + weight: 2 + region: content + settings: { } + third_party_settings: { } hidden: created: true status: true 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 5f9f5f1eb7..127c9d7949 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 @@ -22,6 +22,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: @@ -78,6 +79,38 @@ 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: 'Wide Content' + label_display: '0' + provider: layout_builder + context_mapping: + entity: layout_builder.entity + view_mode: view_mode + formatter: + type: layout_paragraphs + label: hidden + settings: + view_mode: default + third_party_settings: + linked_field: + linked: 0 + type: field + destination: + field: '' + custom: '' + advanced: + title: '' + target: '' + class: '' + rel: '' + text: '' + token: '' + weight: 1 + additional: { } 4908b795-23aa-4ee8-8a52-dce89dfcd636: uuid: 4908b795-23aa-4ee8-8a52-dce89dfcd636 region: main @@ -91,7 +124,7 @@ third_party_settings: label: above settings: { } third_party_settings: { } - weight: 1 + weight: 2 additional: { } third_party_settings: { } layout_builder_restrictions: @@ -127,6 +160,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': { } @@ -294,6 +328,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 fd581e2195..a231beee2f 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 @@ -23,6 +23,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: @@ -215,6 +216,7 @@ hidden: field_meta_tags: true field_owning_office: 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 232b724d2e..8f83747e54 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 @@ -23,6 +23,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: @@ -98,6 +99,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 369396e351..938176e947 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 @@ -23,6 +23,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: @@ -115,6 +116,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 935218dae3..a7bbcb62e1 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 @@ -23,6 +23,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: @@ -62,6 +63,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 7e0dd4e3c7..9e5be22da4 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 @@ -23,6 +23,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: @@ -203,5 +204,6 @@ hidden: field_meta_tags: true field_owning_office: 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.entity_view_display.paragraph.card_group.default.yml b/services/drupal/config/sync/core.entity_view_display.paragraph.card_group.default.yml index 4a0237a464..6af8f2dfec 100644 --- a/services/drupal/config/sync/core.entity_view_display.paragraph.card_group.default.yml +++ b/services/drupal/config/sync/core.entity_view_display.paragraph.card_group.default.yml @@ -5,6 +5,8 @@ dependencies: config: - field.field.paragraph.card_group.field_card_style - field.field.paragraph.card_group.field_cards + - field.field.paragraph.card_group.field_image_style + - field.field.paragraph.card_group.field_title_placement - paragraphs.paragraphs_type.card_group module: - entity_reference_revisions @@ -30,5 +32,19 @@ content: third_party_settings: { } weight: 0 region: content + field_image_style: + type: list_key + label: hidden + settings: { } + third_party_settings: { } + weight: 3 + region: content + field_title_placement: + type: list_key + label: hidden + settings: { } + third_party_settings: { } + weight: 4 + region: content hidden: search_api_excerpt: true diff --git a/services/drupal/config/sync/core.extension.yml b/services/drupal/config/sync/core.extension.yml index 622602e50c..9e3f4f939a 100644 --- a/services/drupal/config/sync/core.extension.yml +++ b/services/drupal/config/sync/core.extension.yml @@ -118,6 +118,8 @@ module: layout_builder_iframe_modal: 0 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/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.field.paragraph.card_group.field_image_style.yml b/services/drupal/config/sync/field.field.paragraph.card_group.field_image_style.yml new file mode 100644 index 0000000000..de2e9b43c1 --- /dev/null +++ b/services/drupal/config/sync/field.field.paragraph.card_group.field_image_style.yml @@ -0,0 +1,28 @@ +uuid: d1e79643-90d1-4d08-8644-2feeb835f486 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_image_style + - paragraphs.paragraphs_type.card_group + module: + - custom_add_another + - options +third_party_settings: + custom_add_another: + custom_add_another: '' + custom_remove: '' +id: paragraph.card_group.field_image_style +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' +required: true +translatable: false +default_value: + - + value: exdent +default_value_callback: '' +settings: { } +field_type: list_string 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 new file mode 100644 index 0000000000..263aca89ed --- /dev/null +++ b/services/drupal/config/sync/field.field.paragraph.card_group.field_title_placement.yml @@ -0,0 +1,28 @@ +uuid: da8f8bd1-988a-43a8-a669-d96f855abce1 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_title_placement + - paragraphs.paragraphs_type.card_group + module: + - custom_add_another + - options +third_party_settings: + custom_add_another: + custom_add_another: '' + custom_remove: '' +id: paragraph.card_group.field_title_placement +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." +required: true +translatable: false +default_value: + - + value: media-first +default_value_callback: '' +settings: { } +field_type: list_string 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/field.storage.paragraph.field_image_style.yml b/services/drupal/config/sync/field.storage.paragraph.field_image_style.yml new file mode 100644 index 0000000000..4bd5c694bd --- /dev/null +++ b/services/drupal/config/sync/field.storage.paragraph.field_image_style.yml @@ -0,0 +1,27 @@ +uuid: 11a73ba7-f394-494a-826f-5a84f5bdf8cb +langcode: en +status: true +dependencies: + module: + - options + - paragraphs +id: paragraph.field_image_style +field_name: field_image_style +entity_type: paragraph +type: list_string +settings: + allowed_values: + - + value: exdent + label: 'Exdent (default)' + - + value: inset + label: Inset + allowed_values_function: '' +module: options +locked: false +cardinality: 1 +translatable: true +indexes: { } +persist_with_no_fields: false +custom_storage: false diff --git a/services/drupal/config/sync/field.storage.paragraph.field_title_placement.yml b/services/drupal/config/sync/field.storage.paragraph.field_title_placement.yml new file mode 100644 index 0000000000..3658c70a27 --- /dev/null +++ b/services/drupal/config/sync/field.storage.paragraph.field_title_placement.yml @@ -0,0 +1,27 @@ +uuid: eb74098d-af4b-4674-a7ac-ecc656c255f2 +langcode: en +status: true +dependencies: + module: + - options + - paragraphs +id: paragraph.field_title_placement +field_name: field_title_placement +entity_type: paragraph +type: list_string +settings: + allowed_values: + - + value: media-first + label: 'Image first (default)' + - + value: header-first + label: 'Title first' + allowed_values_function: '' +module: options +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..f541dd4611 --- /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: + epa_section: Section 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 99b037baf7..99d81a43ab 100644 --- a/services/drupal/web/modules/custom/epa_core/epa_core.module +++ b/services/drupal/web/modules/custom/epa_core/epa_core.module @@ -99,7 +99,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, + ]; } // Change the "Revision log message" label to say "Revision notes". @@ -603,6 +606,25 @@ function epa_core_field_widget_paragraphs_form_alter(&$element, \Drupal\Core\For return; } + // Show/hide the "Title Placement" field if 'Card Style' is set to the 'flag' option. + if ($element['#paragraph_type'] == 'card_group') { + /** @var \Drupal\field\Entity\FieldConfig $field_definition */ + $field_definition = $context['items']->getFieldDefinition(); + $paragraph_entity_reference_field_name = $field_definition->getName(); + $dependee_field_name = 'field_card_style'; + // Need to build specific selector to handle multiple card groups. + $selector = sprintf(':input[name="%s[%d][subform][%s]"]', $paragraph_entity_reference_field_name, $element['#delta'], $dependee_field_name); + + $element['subform']['field_title_placement']['#states'] = [ + 'visible' => [ + $selector => ['value' => 'default'] + ], + 'invisible' => [ + $selector => ['value' => 'flag'] + ], + ]; + } + // 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') { @@ -620,6 +642,7 @@ function epa_core_field_widget_paragraphs_form_alter(&$element, \Drupal\Core\For ]; } } + /** * Implements hook_entity_bundle_field_info_alter(). */ 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 6847f98953..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 @@ -1,3 +1,22 @@ +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: + 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..d82caf6671 --- /dev/null +++ b/services/drupal/web/modules/custom/epa_layouts/layouts/epa-section.html.twig @@ -0,0 +1,23 @@ +{# +/** + * @file + * Template for a generic layout. + */ +#} +{% + set classes = [ + 'layout', + 'layout--' ~ layout.id|clean_class, +] +%} +{% if content %} + + {% for region in layout.getRegionNames %} + {% if content[region] %} +
+ {{ content[region] }} +
+ {% endif %} + {% endfor %} + +{% endif %} 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 %} 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/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'; + } + } + } } /** 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..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,11 +7,11 @@ 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.

-

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.
    • @@ -94,19 +94,21 @@ body: |-

    Boxes

    -

    Related Information

    +

    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.

    -
    -

    Related Information

    +

    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.

      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..3148268e10 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: @@ -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/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/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..dae023eac8 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,9 @@ img { max-width: 100% !important; page-break-inside: avoid; } + + // stylelint-disable-next-line selector-no-qualifying-type + &.restricted-img { + pointer-events: none; + } } 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); } 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); + } + } +} 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 c8a52c1bc6..0ead18e83a 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 @@ -1,6 +1,7 @@ @forward 'alert/alert'; @forward 'banner/banner'; @forward 'button'; +@forward 'card/card'; @forward 'dark-background/dark-background'; @forward 'hero/hero'; @forward 'input/input'; 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 999dfa583a..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 @@ -4,4 +4,21 @@ &: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, + &:disabled:hover, + &:disabled:focus { + box-shadow: inset 0 0 0 2px gesso-grayscale(gray-4); + color: gesso-grayscale(gray-4); + } + } } 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 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); + } +} 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..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 @@ -1,8 +1,35 @@ @use '../../00-config' as *; @use '../../02-base/03-extendables' as *; -.usa-section--dark { - a { - @extend %dark-bg-link; +.usa-dark-background { + color: gesso-grayscale(white); + + 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/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 %}
    diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/_index.scss b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/_index.scss index 32c8d78aab..d603f47270 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/_index.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/section/_index.scss @@ -1,2 +1 @@ @forward 'section'; -@forward 'section--dark/section--dark'; 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; + } } 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 %} 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 6757d2c357..fddbad55f0 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,8 +4,14 @@ @use '../../00-config' as *; .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/source/_patterns/04-layouts/header/header.twig b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/header.twig index b4d7bb7c7b..46f1d1861e 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/_toggle-admin/toggle-admin.twig b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_toggle-admin/toggle-admin.twig index 1f644cd937..01a82afb18 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,6 +1,7 @@ {{ attach_library('epa_theme/toggle_admin') }} {% set classes = [ + 'button--dark', 'js-toggle-admin', modifier_classes ? modifier_classes, ]|join(' ')|trim %} 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..eb3bbd68b2 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,18 +51,18 @@ $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 { 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,12 +82,21 @@ $before-after-swipe-button-size: rem(44px); &::-webkit-slider-thumb { @include before-after-swipe__slider-thumb(); } + + &::-moz-range-track { + min-height: $before-after-swipe-button-size; + } + + &::-webkit-slider-runnable-track { + min-height: $before-after-swipe-button-size; + } } .before-after-swipe__slider-button { 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; 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/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); } } diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/_index.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/_index.scss index 3779575530..8065d17081 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/_index.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/_index.scss @@ -1,2 +1,3 @@ @forward 'button'; @forward 'button--danger/button--danger'; +@forward 'button--dark/button--dark'; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--danger/button--danger.yml b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--danger/button--danger.yml index 173aa52882..04f739f016 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--danger/button--danger.yml +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--danger/button--danger.yml @@ -1,6 +1,6 @@ --- is_button_tag: true is_demo: true -url: '#' +url: '#0' text: 'Danger Button' text_demo: 'Danger Link Button' 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..92c0ba4cec --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/_button--dark.scss @@ -0,0 +1,20 @@ +// @file +// Styles for a Dark Button. + +@use '../../../00-config' as *; + +.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..9fb8a08813 --- /dev/null +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button--dark/button--dark.md @@ -0,0 +1,13 @@ +--- +el: .button--dark +title: Dark Button +state: complete +--- + +__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..41ad668d3a --- /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: '#0' +text: 'Dark Button' +text_demo: 'Dark Link Button' diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button.yml b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button.yml index 0d68c73ff0..0c177fa2f2 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button.yml +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/button/button.yml @@ -2,7 +2,7 @@ is_button_tag: true is_demo: true is_disabled: false -url: '#' +url: '#0' text: 'Button' text_demo: 'Link Button' modifier_classes: '' 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/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; } 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/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; } } 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); + } } } 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..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 { @@ -77,7 +81,7 @@ $image-gallery-button-size: 44px; } %image-gallery__button { - background: gesso-grayscale(white); + background: transparent; border: 0; bottom: 0; box-shadow: 0; @@ -88,6 +92,7 @@ $image-gallery-button-size: 44px; top: 0; width: rem($image-gallery-button-size); + &:visited, &:hover, &:focus, &:active { @@ -108,7 +113,8 @@ $image-gallery-button-size: 44px; .image-gallery__prev, .image-gallery__next { - .usa-dark-background & { + .usa-dark-background &, + .usa-section--dark & { background: transparent; svg { 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..54c12b1d0e 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-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); + text-decoration: underline; } @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..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-brand(blue, base); + background: gesso-brand(blue, dark); float: none; width: auto; } 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/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 @@
    -