D4G-63: Example Paragraph

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",

config/default/core.entity_form_display.paragraph.cta.default.yml

@@ -0,0 +1,53 @@
+uuid: 1c7b8286-095a-4dbc-b3b9-7f3683bc509d
+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
+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: 2
+    region: content
+    settings:
+      rows: 5
+      placeholder: ''
+    third_party_settings: {  }
+  field_link:
+    type: link_default
+    weight: 3
+    region: content
+    settings:
+      placeholder_url: ''
+      placeholder_title: ''
+    third_party_settings: {  }
+  field_title:
+    type: string_textfield
+    weight: 1
+    region: content
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true

config/default/core.entity_view_display.paragraph.cta.default.yml

@@ -0,0 +1,56 @@
+uuid: eaef19bd-617a-4ac0-883a-c39c03859158
+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
+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
+    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: {  }

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

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

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

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

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

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

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

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

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: {  }

docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css

@@ -0,0 +1,22 @@
+.paragraph--type--cta {
+  border-radius: 45px;
+}
+.paragraph--type--cta .cta--wrapper {
+  display: flex;
+  flex-direction: row;
+  padding: 50px 75px;
+  -moz-column-gap: 40px;
+       column-gap: 40px;
+}
+.paragraph--type--cta .wrapper-left {
+  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);
+}