CTA Changes #422 (#457)

Co-authored-by: Eric Rasmussen <ericrasmussen1@gmail.com>

config/sync/field.field.block_content.cta.b_cta_summary.yml

@@ -11,7 +11,7 @@ dependencies:
 third_party_settings:
   allowed_formats:
     allowed_formats:
-      - block_body
+      - minimal
 _core:
   default_config_hash: nbZQ0zuHR-G4d9u6zBOwktlVA9OjIrERCiF3V_mBQLc
 id: block_content.cta.b_cta_summary

web/modules/custom/features/herbie_builder_page/config/install/field.field.block_content.cta.b_cta_summary.yml

@@ -10,7 +10,7 @@ dependencies:
 third_party_settings:
   allowed_formats:
     allowed_formats:
-      - block_body
+      - minimal
 id: block_content.cta.b_cta_summary
 field_name: b_cta_summary
 entity_type: block_content

web/themes/custom/unl_five_herbie/css/theme/block/cta.css

@@ -1,15 +1,13 @@
-
-/* This file might not be needed consult with Ryan/Eric on Monday*/
-/* h2, p, */
-/* :nth-child() */
-
-/* This won't work because it applies it to every block, if the section background is scarlet */
-
-/* div.unl-bg-scarlet div.unl-bg-scarlet h2, div.unl-bg-scarlet  div.unl-bg-scarlet p{
-  color: rgb(0, 112, 211);
-} */
-
-/* div.unl-bg-scarlet div.unl-bg-scarlet h2, div.unl-bg-scarlet div.unl-bg-scarlet p{
-  color: rgb(5, 0, 255);
-} */
-
+.unlcms-cta-link-width {
+  min-width: 75%;
+}
+
+/* dcf-mb-0 */
+.unlcms-cta-title h2 {
+  margin-bottom: 0 !important;
+}
+
+/* dcf-w-max-lg */
+.unlcms_cta_summary {
+  max-width: 42.0923889211rem !important;
+}

web/themes/custom/unl_five_herbie/templates/block/block--block-content-cta.html.twig

@@ -1,3 +1,4 @@
+{{ attach_library('unl_five_herbie/cta') }}
 {% set attributes = attributes ?: create_attribute() %}
 {% set card_classes = ['dcf-col-100%', 'dcf-grid-thirds@md', 'dcf-col-gap-6', 'dcf-row-gap-3', 'dcf-p-6'] %}
 {{ attach_library('unl_five_herbie/cta') }}
@@ -6,14 +7,16 @@
   {{ title_prefix }}
   {{ title_suffix }}
   {% block cta_title %}
-    <div class="dcf-d-flex dcf-ai-center dcf-jc-center dcf-uppercase">
+    <div class="unlcms-cta-title dcf-d-flex dcf-ai-center dcf-jc-center dcf-uppercase">
       {{ content.b_cta_title }}
     </div>
   {% endblock %}
 
   {% block cta_summary %}
     <div class="dcf-d-flex dcf-ai-center dcf-jc-center dcf-pt-2 dcf-pb-2 dcf-txt-center">
-      {{ content.b_cta_summary }}
+      <div class='unlcms_cta_summary'>
+        {{ content.b_cta_summary }}
+      </div>
     </div>
   {% endblock %}
 

web/themes/custom/unl_five_herbie/templates/field/field--block-content--b-cta-link--cta.html.twig

@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+{% for item in items %}
+  {{ item.content }}
+{% endfor %}

web/themes/custom/unl_five_herbie/templates/field/field--block-content--b-cta-summary--cta.html.twig

@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+{% for item in items %}
+  {{ item.content }}
+{% endfor %}

web/themes/custom/unl_five_herbie/templates/field/field--block-content--b-cta-title--cta.html.twig

@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+{% for item in items %}
+  {{ item.content }}
+{% endfor %}

web/themes/custom/unl_five_herbie/unl_five_herbie.libraries.yml

@@ -99,3 +99,4 @@ cta:
     theme:
       css/theme/block/cta.css: {}
 
+

web/themes/custom/unl_five_herbie/unl_five_herbie.theme

@@ -174,15 +174,15 @@ function unl_five_herbie_preprocess_field(&$variables) {
   $ctaFields = array('b_cta_link', 'b_cta_summary', 'b_cta_title');
 
   if (in_array($field_name, $ctaFields)) {
+    $block_background = $variables['element']['#object']->__get('#block_lbs');
     $block_background = $variables['element']['#object']->__get('#block_lbs');
     switch ($field_name) {
       case 'b_cta_link':
         foreach ($variables['items'] as $key => $item) {
           if(in_array("block_background_style_brand", $block_background) ||in_array("block_background_style_dark", $block_background) ) {
-          $variables['items'][$key]['content']['#options']['attributes']['class'][] = 'dcf-btn dcf-btn-inverse-primary dcf-uppercase';
-          }
-          else {
-          $variables['items'][$key]['content']['#options']['attributes']['class'][] = 'dcf-btn dcf-btn-primary dcf-uppercase';
+            $variables['items'][$key]['content']['#options']['attributes']['class'][] = 'dcf-btn dcf-btn-inverse-primary dcf-uppercase dcf-d-block unlcms-cta-link-width';
+          } else {
+            $variables['items'][$key]['content']['#options']['attributes']['class'][] = 'dcf-btn dcf-btn-primary dcf-uppercase dcf-d-block unlcms-cta-link-width';
           }
         }
         break;