[YGO-160] Grid columns buttons alignment.

modules/custom/openy_field_faq/openy_field_faq.module

@@ -0,0 +1,20 @@
+<?php
+
+/**
+ * @file
+ * Contains openy_field_faq.module.
+ */
+
+/**
+ * Implements hook_theme().
+ */
+function openy_field_faq_theme() {
+  return [
+    'openy_faq_item' => [
+      'variables' => [
+        'question' => '',
+        'answer' => '',
+      ],
+    ],
+  ];
+}

modules/custom/openy_field_faq/src/Plugin/Field/FieldFormatter/FaqDefault.php

@@ -30,28 +30,9 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
         '#format' => 'full_html',
       ];
       $elements[$delta] = [
-        'question' => [
-          '#type' => 'html_tag',
-          '#tag' => 'div',
-          '#attributes' => [
-            'class' => [
-              'field-question',
-            ],
-          ],
-          '#value' => $item->question,
-        ],
-        'answer' => [
-          '#type' => 'html_tag',
-          '#tag' => 'div',
-          '#attributes' => [
-            'class' => [
-              'field-answer',
-            ],
-          ],
-          '#value' => render($answer),
-        ],
-        '#prefix' => '<div class="paragraph--type--faq-item">',
-        '#suffix' => '</div>',
+        '#theme' => 'openy_faq_item',
+        '#question' => $item->question,
+        '#answer' => render($answer),
       ];
     }
 

modules/custom/openy_field_faq/templates/openy-faq-item.html.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a FAQ item.
+ *
+ * Available variables:
+ * - question: The text that will be used as a header FAQ item.
+ * - answer: The text that will be used as a body FAQ item.
+ *
+ * @see template_preprocess_openy_faq_item()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="paragraph--type--faq-item hide">
+  <div class="field-question">
+    {{- question -}}
+  </div>
+  <div class="field-answer">
+    {{- answer -}}
+  </div>
+</div>

modules/openy_features/openy_prgf/modules/openy_prgf_faq/js/paragraph.js

@@ -11,13 +11,13 @@
 
         // Question click event.
         $( '.field-question', wrapper ).on( 'click', function() {
-          var answer = $( '.field-answer', wrapper );
+          $( '.field-answer', wrapper ).toggle(200);
 
-          if ( answer.is( ':hidden') ) {
-            answer.slideDown( 200 );
+          if (wrapper.hasClass('hide')) {
+            wrapper.removeClass('hide').addClass('show');
           }
           else {
-            answer.slideUp( 200 );
+            wrapper.removeClass('show').addClass('hide');
           }
         });
 

themes/openy_themes/openy_carnation/dist/js/hb-location-finder-override.js

@@ -28,7 +28,6 @@
           // Save created element in plugin.
           this.element = $markup.find('input');
         };
-        Drupal.homeBranch.plugins[key].settings.locationsList = '.paragraph--type--prgf-location-finder .locations-list';
       }
     }
   }

themes/openy_themes/openy_carnation/openy_carnation.theme

@@ -324,11 +324,6 @@ function openy_carnation_preprocess_paragraph(array &$variables) {
   if ($variables['paragraph']->getType() == HBLocationFinder::PRGF_TYPE) {
     // Fix theming for hb_location_finder plugin for Open Y Carnation theme.
     $variables['#attached']['library'][] = 'openy_carnation/hb_location_finder_override';
-
-    $hb_plugin_service = Drupal::service('plugin.manager.home_branch_library');
-    $hb_plugin_service->attachHbLibrarySettings($variables, 'hb_location_finder', [
-      'locationsList' => '.paragraph--type--prgf-location-finder .locations-list',
-    ]);
   }
 }
 

themes/openy_themes/openy_carnation/src/scss/_base.scss

@@ -29,6 +29,7 @@
 @import "modules/columns";
 @import "modules/dialog";
 @import "modules/events";
+@import "modules/faq";
 @import "modules/footer";
 @import "modules/forms";
 @import "modules/gallery";

themes/openy_themes/openy_carnation/src/scss/modules/_faq.scss

@@ -0,0 +1,48 @@
+.paragraph--type--faq {
+  .paragraph--type--faq-item {
+    position: relative;
+    border: none;
+
+    .field-question {
+      padding: 10px 30px;
+      background-color: $dark-blue;
+      border-top-right-radius: 5px;
+      border-top-left-radius: 5px;
+      font-size: 18px;
+
+      .icon-wrapper {
+        color: $white;
+        padding-right: 30px;
+
+        .fa-minus {
+          display: none;
+        }
+        .fa-plus {
+          display: inline-block;
+        }
+      }
+    }
+
+    .field-answer {
+      padding: 30px;
+      background-color: rgba($gray-400, .11);
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+
+    &.hide {
+      .field-question {
+        border-radius: 5px;
+      }
+    }
+
+    &.show .field-question {
+      .fa-minus {
+        display: inline-block;
+      }
+      .fa-plus {
+        display: none;
+      }
+    }
+  }
+}

themes/openy_themes/openy_carnation/src/scss/modules/_location.scss

@@ -217,16 +217,13 @@
 
   .views-row {
     display: flex;
+    flex-grow: 0;
     flex-basis: 100%;
 
-    @media (min-width: 600px) and (max-width: 1025px) {
+    @media (min-width: 600px) {
       flex-basis: 50%;
     }
 
-    @media (min-width: 1025px) {
-      flex-basis: 33.33%;
-    }
-
     .node--view-mode-teaser {
       flex-basis: 100%;
       align-self: stretch;
@@ -244,3 +241,15 @@
     font-weight: bold;
   }
 }
+
+.one-column-clean.landing-content, .landing-content.one-column {
+  .locations-list {
+    .views-row__wrapper {
+      .views-row {
+        @media (min-width: 1025px) {
+          flex-basis: 33.33%;
+        }
+      }
+    }
+  }
+}

themes/openy_themes/openy_carnation/templates/modules/openy-faq-item.html.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a FAQ item.
+ *
+ * Available variables:
+ * - question: The text that will be used as a header FAQ item.
+ * - answer: The text that will be used as a body FAQ item.
+ *
+ * @see template_preprocess_openy_faq_item()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="paragraph--type--faq-item hide">
+  <div class="field-question">
+    <span class="icon-wrapper">
+      <i class="fas fa-plus"></i>
+      <i class="fas fa-minus"></i>
+    </span>
+    <span>
+      {{- question -}}
+    </span>
+  </div>
+  <div class="field-answer">
+    {{- answer -}}
+  </div>
+</div>

themes/openy_themes/openy_carnation/templates/paragraph/paragraph--grid-columns.html.twig

@@ -62,7 +62,7 @@ set classes = [
       {% endif %}
       <div class="text pb-5" data-mh="grid-col-group-text">{{ content.field_prgf_grid_clm_description }}</div>
       <div class="image-prgf-grid">{{ content.field_image }}</div>
-      <div class="more-link"><span>{{ content.field_prgf_clm_link }} {{ content.field_link_attribute }}</span></div>
+      <div class="more-link d-flex justify-content-center"><span>{{ content.field_prgf_clm_link }} {{ content.field_link_attribute }}</span></div>
     </div>
   </div>
 </div>

themes/openy_themes/openy_carnation/templates/paragraph/paragraph--grid-content--default.html.twig

@@ -54,7 +54,7 @@ set classes = [
 {% elseif grid_style == '3' %}
   {% set item_class = 'col-lg-4' %}
 {% elseif grid_style == '4' %}
-  {% set item_class = 'col-lg-3' %}
+  {% set item_class = 'col-lg-6 col-xl-3' %}
 {% endif %}
 <div{{ attributes.addClass(classes) }}>
   {% for key, item in content.field_grid_columns %}

themes/openy_themes/openy_carnation/templates/views/views-view-unformatted--locations.html.twig

@@ -21,20 +21,10 @@
   <h3>{{ title }}</h3>
 {% endif %}
 
-{% set cols = 2 | default(2) %}
-{% for row in rows %}
-{%
-  set row_classes = [
-    default_row_class ? 'd-flex flex-column flex-lg-row',
-  ]
-%}
-{% if loop.index0 % cols == 0 %}
-  <div{{ row.attributes.addClass(row_classes) }}>
-  {% endif %}
-  <div class="col-12 col-lg-6 mb-4">
-    {{ row.content }}
-  </div>
-  {% if (loop.index0 % cols == cols - 1 or loop.last) %}
-  </div>
-{% endif %}
-{% endfor %}
+<div{{ attributes.addClass('row views-row__wrapper') }}>
+  {% for row in rows %}
+    <div class="col mb-4 views-row">
+      {{ row.content }}
+    </div>
+  {% endfor %}
+</div>