From ae69ba90b362908e39f525715dd91394ec67c9cc Mon Sep 17 00:00:00 2001 From: Candice Date: Mon, 26 Feb 2024 19:08:03 -0500 Subject: [PATCH 1/9] D4G-63: Create CTA and add fields. --- ...ity_form_display.paragraph.cta.default.yml | 44 ++++++++++++++++++ ...ity_view_display.paragraph.cta.default.yml | 45 +++++++++++++++++++ .../field.field.paragraph.cta.field_body.yml | 24 ++++++++++ .../field.field.paragraph.cta.field_link.yml | 23 ++++++++++ .../field.field.paragraph.cta.field_title.yml | 19 ++++++++ .../field.storage.paragraph.field_body.yml | 19 ++++++++ .../field.storage.paragraph.field_link.yml | 19 ++++++++ .../paragraphs.paragraphs_type.cta.yml | 10 +++++ 8 files changed, 203 insertions(+) create mode 100644 config/default/core.entity_form_display.paragraph.cta.default.yml create mode 100644 config/default/core.entity_view_display.paragraph.cta.default.yml create mode 100644 config/default/field.field.paragraph.cta.field_body.yml create mode 100644 config/default/field.field.paragraph.cta.field_link.yml create mode 100644 config/default/field.field.paragraph.cta.field_title.yml create mode 100644 config/default/field.storage.paragraph.field_body.yml create mode 100644 config/default/field.storage.paragraph.field_link.yml create mode 100644 config/default/paragraphs.paragraphs_type.cta.yml diff --git a/config/default/core.entity_form_display.paragraph.cta.default.yml b/config/default/core.entity_form_display.paragraph.cta.default.yml new file mode 100644 index 00000000..d853b948 --- /dev/null +++ b/config/default/core.entity_form_display.paragraph.cta.default.yml @@ -0,0 +1,44 @@ +uuid: 1c7b8286-095a-4dbc-b3b9-7f3683bc509d +langcode: en +status: true +dependencies: + config: + - field.field.paragraph.cta.field_body + - field.field.paragraph.cta.field_link + - field.field.paragraph.cta.field_title + - paragraphs.paragraphs_type.cta + module: + - link + - text +id: paragraph.cta.default +targetEntityType: paragraph +bundle: cta +mode: default +content: + field_body: + type: text_textarea + weight: 1 + region: content + settings: + rows: 5 + placeholder: '' + third_party_settings: { } + field_link: + type: link_default + weight: 2 + region: content + settings: + placeholder_url: '' + placeholder_title: '' + third_party_settings: { } + field_title: + type: string_textfield + weight: 0 + region: content + settings: + size: 60 + placeholder: '' + third_party_settings: { } +hidden: + created: true + status: true diff --git a/config/default/core.entity_view_display.paragraph.cta.default.yml b/config/default/core.entity_view_display.paragraph.cta.default.yml new file mode 100644 index 00000000..74608b62 --- /dev/null +++ b/config/default/core.entity_view_display.paragraph.cta.default.yml @@ -0,0 +1,45 @@ +uuid: eaef19bd-617a-4ac0-883a-c39c03859158 +langcode: en +status: true +dependencies: + config: + - field.field.paragraph.cta.field_body + - field.field.paragraph.cta.field_link + - field.field.paragraph.cta.field_title + - paragraphs.paragraphs_type.cta + module: + - link + - text +id: paragraph.cta.default +targetEntityType: paragraph +bundle: cta +mode: default +content: + field_body: + type: text_default + label: hidden + settings: { } + third_party_settings: { } + weight: 1 + region: content + field_link: + type: link_separate + label: hidden + settings: + trim_length: 80 + url_only: false + url_plain: false + rel: '' + target: '' + third_party_settings: { } + weight: 2 + region: content + field_title: + type: string + label: hidden + settings: + link_to_entity: false + third_party_settings: { } + weight: 0 + region: content +hidden: { } diff --git a/config/default/field.field.paragraph.cta.field_body.yml b/config/default/field.field.paragraph.cta.field_body.yml new file mode 100644 index 00000000..3e3b59ec --- /dev/null +++ b/config/default/field.field.paragraph.cta.field_body.yml @@ -0,0 +1,24 @@ +uuid: 5b299156-55e3-4db8-be22-d1bbe5427e72 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_body + - filter.format.full + - paragraphs.paragraphs_type.cta + module: + - text +id: paragraph.cta.field_body +field_name: field_body +entity_type: paragraph +bundle: cta +label: Body +description: '' +required: false +translatable: false +default_value: { } +default_value_callback: '' +settings: + allowed_formats: + - full +field_type: text_long diff --git a/config/default/field.field.paragraph.cta.field_link.yml b/config/default/field.field.paragraph.cta.field_link.yml new file mode 100644 index 00000000..ae5857b0 --- /dev/null +++ b/config/default/field.field.paragraph.cta.field_link.yml @@ -0,0 +1,23 @@ +uuid: da023021-3a82-4e7e-a46f-63eb5905d486 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_link + - paragraphs.paragraphs_type.cta + module: + - link +id: paragraph.cta.field_link +field_name: field_link +entity_type: paragraph +bundle: cta +label: Link +description: '' +required: false +translatable: false +default_value: { } +default_value_callback: '' +settings: + title: 2 + link_type: 17 +field_type: link diff --git a/config/default/field.field.paragraph.cta.field_title.yml b/config/default/field.field.paragraph.cta.field_title.yml new file mode 100644 index 00000000..ae37bdc4 --- /dev/null +++ b/config/default/field.field.paragraph.cta.field_title.yml @@ -0,0 +1,19 @@ +uuid: 7ed3b82e-b2b4-421a-a220-4536e0b79486 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_title + - paragraphs.paragraphs_type.cta +id: paragraph.cta.field_title +field_name: field_title +entity_type: paragraph +bundle: cta +label: Title +description: '' +required: false +translatable: false +default_value: { } +default_value_callback: '' +settings: { } +field_type: string diff --git a/config/default/field.storage.paragraph.field_body.yml b/config/default/field.storage.paragraph.field_body.yml new file mode 100644 index 00000000..b77b1ce2 --- /dev/null +++ b/config/default/field.storage.paragraph.field_body.yml @@ -0,0 +1,19 @@ +uuid: 74e7285b-36e0-4039-8f11-3df35acb4101 +langcode: en +status: true +dependencies: + module: + - paragraphs + - text +id: paragraph.field_body +field_name: field_body +entity_type: paragraph +type: text_long +settings: { } +module: text +locked: false +cardinality: 1 +translatable: true +indexes: { } +persist_with_no_fields: false +custom_storage: false diff --git a/config/default/field.storage.paragraph.field_link.yml b/config/default/field.storage.paragraph.field_link.yml new file mode 100644 index 00000000..d337f3f6 --- /dev/null +++ b/config/default/field.storage.paragraph.field_link.yml @@ -0,0 +1,19 @@ +uuid: 1c9f9399-63a4-4123-815b-0f99a7d9a764 +langcode: en +status: true +dependencies: + module: + - link + - paragraphs +id: paragraph.field_link +field_name: field_link +entity_type: paragraph +type: link +settings: { } +module: link +locked: false +cardinality: 1 +translatable: true +indexes: { } +persist_with_no_fields: false +custom_storage: false diff --git a/config/default/paragraphs.paragraphs_type.cta.yml b/config/default/paragraphs.paragraphs_type.cta.yml new file mode 100644 index 00000000..3a78f635 --- /dev/null +++ b/config/default/paragraphs.paragraphs_type.cta.yml @@ -0,0 +1,10 @@ +uuid: aba47437-a28d-4cc7-973b-3cd355911252 +langcode: en +status: true +dependencies: { } +id: cta +label: CTA +icon_uuid: null +icon_default: null +description: '' +behavior_plugins: { } From f388788a7859c14768250c1a9f7f7a935578ae83 Mon Sep 17 00:00:00 2001 From: Candice Date: Mon, 26 Feb 2024 19:08:24 -0500 Subject: [PATCH 2/9] D4G-63: Add styles to library. --- docroot/themes/custom/drupal4gov/drupal4gov.libraries.yml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docroot/themes/custom/drupal4gov/drupal4gov.libraries.yml b/docroot/themes/custom/drupal4gov/drupal4gov.libraries.yml index 25828527..f7e3929d 100644 --- a/docroot/themes/custom/drupal4gov/drupal4gov.libraries.yml +++ b/docroot/themes/custom/drupal4gov/drupal4gov.libraries.yml @@ -24,3 +24,8 @@ drupal.message: components/messages/messages.theme.js: {} dependencies: - drupal4gov/messages + +paragraph--cta: + css: + base: + components/paragraph--cta/paragraph--cta.css: {} From 622bd1a19fd186bb20a107c008bb15dc5c68405e Mon Sep 17 00:00:00 2001 From: Candice Date: Mon, 26 Feb 2024 19:08:55 -0500 Subject: [PATCH 3/9] D4G-63: Add twig, scss, and css files. --- .../paragraph--cta/paragraph--cta.css | 3 + .../paragraph--cta/paragraph--cta.scss | 1 + .../paragraphs/paragraph--cta.html.twig | 56 +++++++++++++++++++ .../templates/paragraphs/paragraph.html.twig | 55 ++++++++++++++++++ 4 files changed, 115 insertions(+) create mode 100644 docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css create mode 100644 docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss create mode 100644 docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig create mode 100644 docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph.html.twig diff --git a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css new file mode 100644 index 00000000..9d0e9e1f --- /dev/null +++ b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css @@ -0,0 +1,3 @@ +.paragraph--type--cta { + border: 2px solid hotpink; +} \ No newline at end of file diff --git a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss new file mode 100644 index 00000000..f66ae23f --- /dev/null +++ b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss @@ -0,0 +1 @@ +.paragraph--type--cta { border: 2px solid hotpink; } diff --git a/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig new file mode 100644 index 00000000..aa5031b0 --- /dev/null +++ b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig @@ -0,0 +1,56 @@ +{# +/** + * @file + * Default theme implementation to display a paragraph. + * + * Available variables: + * - paragraph: Full paragraph entity. + * Only method names starting with "get", "has", or "is" and a few common + * methods such as "id", "label", and "bundle" are available. For example: + * - paragraph.getCreatedTime() will return the paragraph creation timestamp. + * - paragraph.id(): The paragraph ID. + * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text". + * - paragraph.getOwnerId(): The user ID of the paragraph author. + * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties + * and methods for the paragraph object. + * - content: All paragraph items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given child element. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - paragraphs: The current template type (also known as a "theming hook"). + * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an + * "Image" it would result in "paragraphs--type--image". Note that the machine + * name will often be in a short form of the human readable label. + * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a + * preview would result in: "paragraphs--view-mode--preview", and + * default: "paragraphs--view-mode--default". + * - view_mode: View mode; for example, "preview" or "full". + * - logged_in: Flag for authenticated user status. Will be true when the + * current user is a logged-in member. + * - is_admin: Flag for admin user status. Will be true when the current user + * is an administrator. + * + * @see template_preprocess_paragraph() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'paragraph', + 'paragraph--type--' ~ paragraph.bundle|clean_class, + view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, + not paragraph.isPublished() ? 'paragraph--unpublished' + ] +%} +{{ attach_library('drupal4gov/paragraph--cta') }} +{% block paragraph %} + + {% block content %} + {{ content }} + {% endblock %} + +{% endblock paragraph %} diff --git a/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph.html.twig b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph.html.twig new file mode 100644 index 00000000..fa3ba93f --- /dev/null +++ b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph.html.twig @@ -0,0 +1,55 @@ +{# +/** + * @file + * Default theme implementation to display a paragraph. + * + * Available variables: + * - paragraph: Full paragraph entity. + * Only method names starting with "get", "has", or "is" and a few common + * methods such as "id", "label", and "bundle" are available. For example: + * - paragraph.getCreatedTime() will return the paragraph creation timestamp. + * - paragraph.id(): The paragraph ID. + * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text". + * - paragraph.getOwnerId(): The user ID of the paragraph author. + * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties + * and methods for the paragraph object. + * - content: All paragraph items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given child element. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - paragraphs: The current template type (also known as a "theming hook"). + * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an + * "Image" it would result in "paragraphs--type--image". Note that the machine + * name will often be in a short form of the human readable label. + * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a + * preview would result in: "paragraphs--view-mode--preview", and + * default: "paragraphs--view-mode--default". + * - view_mode: View mode; for example, "preview" or "full". + * - logged_in: Flag for authenticated user status. Will be true when the + * current user is a logged-in member. + * - is_admin: Flag for admin user status. Will be true when the current user + * is an administrator. + * + * @see template_preprocess_paragraph() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'paragraph', + 'paragraph--type--' ~ paragraph.bundle|clean_class, + view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, + not paragraph.isPublished() ? 'paragraph--unpublished' + ] +%} +{% block paragraph %} + + {% block content %} + {{ content }} + {% endblock %} + +{% endblock paragraph %} From 6792ba690651a4bdf0dea34e9a94cc49e75e419e Mon Sep 17 00:00:00 2001 From: Candice Date: Mon, 26 Feb 2024 19:15:01 -0500 Subject: [PATCH 4/9] D4G-63: Update for classes and fields. --- .../templates/paragraphs/paragraph--cta.html.twig | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig index aa5031b0..e101acd3 100644 --- a/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig +++ b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig @@ -50,7 +50,14 @@ {% block paragraph %} {% block content %} - {{ content }} +
+
+ {{ content|without('field_link') }} +
+
+ {{ content.field_link }} +
+
{% endblock %} {% endblock paragraph %} From d0ef2327bba62e3ab2862b12e55b825594a3d476 Mon Sep 17 00:00:00 2001 From: Candice Date: Wed, 28 Feb 2024 11:52:46 -0500 Subject: [PATCH 5/9] D4G-63: Adding styling, update link to button. --- .../paragraph--cta/paragraph--cta.css | 12 +++++++++++- .../paragraph--cta/paragraph--cta.scss | 17 ++++++++++++++++- .../paragraphs/paragraph--cta.html.twig | 2 +- 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css index 9d0e9e1f..fe8a1a52 100644 --- a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css +++ b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css @@ -1,3 +1,13 @@ .paragraph--type--cta { - border: 2px solid hotpink; + border: 2px solid lime; +} +.paragraph--type--cta .cta--wrapper { + display: flex; + flex-direction: row; +} +.paragraph--type--cta .wrapper-left { + flex: 1 0 auto; +} +.paragraph--type--cta .wrapper-right { + flex: 1 0 auto; } \ No newline at end of file diff --git a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss index f66ae23f..00b3d389 100644 --- a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss +++ b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss @@ -1 +1,16 @@ -.paragraph--type--cta { border: 2px solid hotpink; } +.paragraph--type--cta { + border: 2px solid lime; + + .cta--wrapper { + display: flex; + flex-direction: row; + } + + .wrapper-left { + flex: 1 0 auto; + } + + .wrapper-right { + flex: 1 0 auto; + } +} diff --git a/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig index e101acd3..d10144b9 100644 --- a/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig +++ b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig @@ -55,7 +55,7 @@ {{ content|without('field_link') }}
- {{ content.field_link }} + {{ content.field_link[0]['#title'] }}
{% endblock %} From 292564adf03323de69870426a10a01182a287afc Mon Sep 17 00:00:00 2001 From: Candice Date: Wed, 28 Feb 2024 11:54:45 -0500 Subject: [PATCH 6/9] D4G-63: Install color_field. --- composer.json | 1 + composer.lock | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 1 deletion(-) diff --git a/composer.json b/composer.json index 8a4aa618..90867ca3 100755 --- a/composer.json +++ b/composer.json @@ -21,6 +21,7 @@ "drupal/acquia_purge": "^1.3", "drupal/address": "~1.0", "drupal/admin_toolbar": "^3.4", + "drupal/color_field": "^3.0", "drupal/config_ignore": "^2.4", "drupal/config_split": "^1.9", "drupal/core-composer-scaffold": "^10", diff --git a/composer.lock b/composer.lock index 74d78a4c..a8b21d48 100644 --- a/composer.lock +++ b/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": "d7f461f6537318e3593741ec104c6400", + "content-hash": "a4642f8281694a7450a28ed890aa4601", "packages": [ { "name": "acquia/acquia-cms-starterkit", @@ -2492,6 +2492,58 @@ "issues": "https://www.drupal.org/project/issues/admin_toolbar" } }, + { + "name": "drupal/color_field", + "version": "3.0.0", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/color_field.git", + "reference": "3.0.0" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/color_field-3.0.0.zip", + "reference": "3.0.0", + "shasum": "7a72fde925bc777b292aef7afa4ceb98d46cc0b5" + }, + "require": { + "drupal/core": "^9 || ^10" + }, + "require-dev": { + "drupal/token": "*" + }, + "type": "drupal-module", + "extra": { + "drupal": { + "version": "3.0.0", + "datestamp": "1671324231", + "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": "NickDickinsonWilde", + "homepage": "https://www.drupal.org/user/3094661" + }, + { + "name": "targoo", + "homepage": "https://www.drupal.org/user/431910" + } + ], + "description": "Provides a color field type to store the color value and opacity.", + "homepage": "https://www.drupal.org/project/color_field", + "support": { + "source": "https://git.drupalcode.org/project/color_field", + "error": "require-dev.drupal/feeds : invalid version constraint (Could not parse version constraint : Invalid version string \"\")" + } + }, { "name": "drupal/config_filter", "version": "1.10.0", From f1596d2c517d620b837909949b44a3e690c508fd Mon Sep 17 00:00:00 2001 From: Candice Date: Wed, 28 Feb 2024 11:56:44 -0500 Subject: [PATCH 7/9] D4G-63: Enable module. --- config/default/core.extension.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/config/default/core.extension.yml b/config/default/core.extension.yml index 05cde5e1..0f32842e 100644 --- a/config/default/core.extension.yml +++ b/config/default/core.extension.yml @@ -9,6 +9,7 @@ module: block_content: 0 breakpoint: 0 ckeditor5: 0 + color_field: 0 config: 0 config_filter: 0 config_ignore: 0 From dca8febd37dea70d709d32cffa958631afb5969e Mon Sep 17 00:00:00 2001 From: Candice Date: Wed, 28 Feb 2024 12:05:56 -0500 Subject: [PATCH 8/9] D4G-63: Add color to background. --- ...ity_form_display.paragraph.cta.default.yml | 15 ++++++++++--- ...ity_view_display.paragraph.cta.default.yml | 11 ++++++++++ ...d.paragraph.cta.field_background_color.yml | 22 +++++++++++++++++++ ...orage.paragraph.field_background_color.yml | 20 +++++++++++++++++ .../paragraph--cta/paragraph--cta.css | 6 ++--- .../paragraph--cta/paragraph--cta.scss | 5 +++-- .../paragraphs/paragraph--cta.html.twig | 4 ++-- 7 files changed, 73 insertions(+), 10 deletions(-) create mode 100644 config/default/field.field.paragraph.cta.field_background_color.yml create mode 100644 config/default/field.storage.paragraph.field_background_color.yml diff --git a/config/default/core.entity_form_display.paragraph.cta.default.yml b/config/default/core.entity_form_display.paragraph.cta.default.yml index d853b948..7e10937e 100644 --- a/config/default/core.entity_form_display.paragraph.cta.default.yml +++ b/config/default/core.entity_form_display.paragraph.cta.default.yml @@ -3,11 +3,13 @@ langcode: en status: true dependencies: config: + - field.field.paragraph.cta.field_background_color - field.field.paragraph.cta.field_body - field.field.paragraph.cta.field_link - field.field.paragraph.cta.field_title - paragraphs.paragraphs_type.cta module: + - color_field - link - text id: paragraph.cta.default @@ -15,9 +17,16 @@ targetEntityType: paragraph bundle: cta mode: default content: + field_background_color: + type: color_field_widget_box + weight: 0 + region: content + settings: + default_colors: '#ac725e,#d06b64,#f83a22,#fa573c,#ff7537,#ffad46,#42d692,#16a765,#7bd148,#b3dc6c,#fbe983,#92e1c0,#9fe1e7,#9fc6e7,#4986e7,#9a9cff,#b99aff,#c2c2c2,#cabdbf,#cca6ac,#f691b2,#cd74e6,#a47ae2' + third_party_settings: { } field_body: type: text_textarea - weight: 1 + weight: 2 region: content settings: rows: 5 @@ -25,7 +34,7 @@ content: third_party_settings: { } field_link: type: link_default - weight: 2 + weight: 3 region: content settings: placeholder_url: '' @@ -33,7 +42,7 @@ content: third_party_settings: { } field_title: type: string_textfield - weight: 0 + weight: 1 region: content settings: size: 60 diff --git a/config/default/core.entity_view_display.paragraph.cta.default.yml b/config/default/core.entity_view_display.paragraph.cta.default.yml index 74608b62..b3752804 100644 --- a/config/default/core.entity_view_display.paragraph.cta.default.yml +++ b/config/default/core.entity_view_display.paragraph.cta.default.yml @@ -3,11 +3,13 @@ langcode: en status: true dependencies: config: + - field.field.paragraph.cta.field_background_color - field.field.paragraph.cta.field_body - field.field.paragraph.cta.field_link - field.field.paragraph.cta.field_title - paragraphs.paragraphs_type.cta module: + - color_field - link - text id: paragraph.cta.default @@ -15,6 +17,15 @@ targetEntityType: paragraph bundle: cta mode: default content: + field_background_color: + type: color_field_formatter_text + label: hidden + settings: + format: hex + opacity: true + third_party_settings: { } + weight: 3 + region: content field_body: type: text_default label: hidden diff --git a/config/default/field.field.paragraph.cta.field_background_color.yml b/config/default/field.field.paragraph.cta.field_background_color.yml new file mode 100644 index 00000000..52758c68 --- /dev/null +++ b/config/default/field.field.paragraph.cta.field_background_color.yml @@ -0,0 +1,22 @@ +uuid: 2ac55eab-5f61-482a-b345-302d0b36635d +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_background_color + - paragraphs.paragraphs_type.cta + module: + - color_field +id: paragraph.cta.field_background_color +field_name: field_background_color +entity_type: paragraph +bundle: cta +label: 'Background Color' +description: '' +required: false +translatable: false +default_value: { } +default_value_callback: '' +settings: + opacity: 0 +field_type: color_field_type diff --git a/config/default/field.storage.paragraph.field_background_color.yml b/config/default/field.storage.paragraph.field_background_color.yml new file mode 100644 index 00000000..2d589e22 --- /dev/null +++ b/config/default/field.storage.paragraph.field_background_color.yml @@ -0,0 +1,20 @@ +uuid: fb8caee7-c61c-43cd-bd6e-17d04de56e2e +langcode: en +status: true +dependencies: + module: + - color_field + - paragraphs +id: paragraph.field_background_color +field_name: field_background_color +entity_type: paragraph +type: color_field_type +settings: + format: '#HEXHEX' +module: color_field +locked: false +cardinality: 1 +translatable: true +indexes: { } +persist_with_no_fields: false +custom_storage: false diff --git a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css index fe8a1a52..6644a181 100644 --- a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css +++ b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css @@ -1,13 +1,13 @@ -.paragraph--type--cta { - border: 2px solid lime; -} .paragraph--type--cta .cta--wrapper { display: flex; flex-direction: row; + padding: 25px; } .paragraph--type--cta .wrapper-left { flex: 1 0 auto; } .paragraph--type--cta .wrapper-right { + display: flex; + align-items: center; flex: 1 0 auto; } \ No newline at end of file diff --git a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss index 00b3d389..3f4493df 100644 --- a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss +++ b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss @@ -1,9 +1,8 @@ .paragraph--type--cta { - border: 2px solid lime; - .cta--wrapper { display: flex; flex-direction: row; + padding: 25px; } .wrapper-left { @@ -11,6 +10,8 @@ } .wrapper-right { + display: flex; + align-items: center; flex: 1 0 auto; } } diff --git a/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig index d10144b9..38d8baf2 100644 --- a/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig +++ b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig @@ -48,11 +48,11 @@ %} {{ attach_library('drupal4gov/paragraph--cta') }} {% block paragraph %} - + {% block content %}
- {{ content|without('field_link') }} + {{ content|without('field_link', 'field_background_color') }}
{{ content.field_link[0]['#title'] }} From a5f713ae2bfcc03800e9d2121a5e4585abc01efe Mon Sep 17 00:00:00 2001 From: Candice Date: Wed, 28 Feb 2024 12:13:59 -0500 Subject: [PATCH 9/9] D4G-63: Add border radius, bump padding. --- .../components/paragraph--cta/paragraph--cta.css | 13 +++++++++++-- .../components/paragraph--cta/paragraph--cta.scss | 12 ++++++++++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css index 6644a181..ce1f78d8 100644 --- a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css +++ b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css @@ -1,13 +1,22 @@ +.paragraph--type--cta { + border-radius: 45px; +} .paragraph--type--cta .cta--wrapper { display: flex; flex-direction: row; - padding: 25px; + padding: 50px 75px; + -moz-column-gap: 40px; + column-gap: 40px; } .paragraph--type--cta .wrapper-left { - flex: 1 0 auto; + flex: 1 1 auto; } .paragraph--type--cta .wrapper-right { display: flex; align-items: center; flex: 1 0 auto; +} +.paragraph--type--cta .field--name-field-title { + font-weight: 800; + font-size: var(--h2); } \ No newline at end of file diff --git a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss index 3f4493df..bbe4f067 100644 --- a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss +++ b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss @@ -1,12 +1,15 @@ .paragraph--type--cta { + border-radius: 45px; + .cta--wrapper { display: flex; flex-direction: row; - padding: 25px; + padding: 50px 75px; + column-gap: 40px; } .wrapper-left { - flex: 1 0 auto; + flex: 1 1 auto; } .wrapper-right { @@ -14,4 +17,9 @@ align-items: center; flex: 1 0 auto; } + + .field--name-field-title { + font-weight: 800; + font-size: var(--h2); + } }