From dceaedf1d75f2d90b2fde793a41d31279bc39690 Mon Sep 17 00:00:00 2001
From: James O'Toole <james.otoole@ubc.ca>
Date: Wed, 26 Jan 2022 10:16:41 -0800
Subject: [PATCH 1/2] Update ubc-paragraph--tabcordion.html.twig

Add check for vue, otherwise output bootstrap tabcordion (no styles included)
---
 .../ubc-paragraph--tabcordion.html.twig       | 94 +++++++++++++++----
 1 file changed, 78 insertions(+), 16 deletions(-)

diff --git a/ubc_paragraph_entities/templates/ubc-paragraph--tabcordion.html.twig b/ubc_paragraph_entities/templates/ubc-paragraph--tabcordion.html.twig
index 77e3afd..f3136af 100644
--- a/ubc_paragraph_entities/templates/ubc-paragraph--tabcordion.html.twig
+++ b/ubc_paragraph_entities/templates/ubc-paragraph--tabcordion.html.twig
@@ -38,6 +38,7 @@
  * @ingroup themeable
  */
 #}
+
 {% set layout_attributes = create_attribute() %}
 {%
   set classes = [
@@ -66,22 +67,83 @@
 
 {% block paragraph %}
 <div{{ attributes.addClass(classes) }}>
-  <tabs{{ layout_attributes.addClass(layout_classes, padding_classes) }}>
-  {% for key, value in paragraph.field_paragraph_tab.value %}
-    {% set tabid = paragraph.field_paragraph_tab[key].entity.id() %}
-    {% set tabtitle = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_title.value %}
-    {% set tabcontent = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_content.value|check_markup(paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_content.format) %}
+  {% if clf_vue %}
+    <tabs{{ layout_attributes.addClass(layout_classes, padding_classes) }}>
+    {% for key, value in paragraph.field_paragraph_tab.value %}
+      {% set tabid = paragraph.field_paragraph_tab[key].entity.id() %}
+      {% set tabtitle = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_title.value %}
+      {% set tabcontent = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_content.value|check_markup(paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_content.format) %}
+
+      {% if key == 0 %}
+      <tab name="{{ tabtitle }}" class="flow-root text-formatted" :selected="true">
+        {{ tabcontent }}
+      </tab>
+      {% else %}
+      <tab name="{{ tabtitle }}" class="flow-root text-formatted">
+        {{ tabcontent }}
+      </tab>
+      {% endif %}
+    {% endfor %}
+    </tabs>
+  {% else %}
+    <div{{ layout_attributes.addClass(layout_classes, padding_classes) }}>
+      <ul class="nav nav-tabs tabcordion__links" role="tablist">
+        {% for key, value in paragraph.field_paragraph_tab.value %}
+          {% set tabid = paragraph.field_paragraph_tab[key].entity.id() %}
+          {% set tabtitle = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_title.value %}
+
+          {% if key == 0 %}
+            <li class="nav-item tabcordion__tab" role="presentation">
+              <button id="tab-{{ tabid }}" data-bs-target="#pane-{{ tabid }}" class="nav-link active" data-bs-toggle="tab" role="tab" type="button" aria-controls="tab-{{ tabid }}" aria-selected="true">{{ tabtitle }}</button>
+            </li>
+          {% else %}
+            <li class="nav-item tabcordion__tab">
+              <button id="tab-{{ tabid }}" data-bs-target="#pane-{{ tabid }}" class="nav-link" data-bs-toggle="tab" role="tab" type="button" aria-controls="tab-{{ tabid }}" aria-selected="false">{{ tabtitle }}</button>
+            </li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+
+      <div class="tab-content">
+        {% for key, value in paragraph.field_paragraph_tab.value %}
+          {% set tabid = paragraph.field_paragraph_tab[key].entity.id() %}
+          {% set tabtitle = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_title.value %}
+          {% set tabcontent = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_content.value|check_markup(paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_content.format) %}
 
-    {% if key == 0 %}
-    <tab name="{{ tabtitle }}" class="flow-root text-formatted" :selected="true">
-      {{ tabcontent }}
-    </tab>
-    {% else %}
-    <tab name="{{ tabtitle }}" class="flow-root text-formatted">
-      {{ tabcontent }}
-    </tab>
-    {% endif %}
-  {% endfor %}
-  </tabs>
+          {% if key == 0 %}
+          <div id="pane-{{ tabid }}" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-{{ tabid }}">
+            <div class="card-header" role="tab" id="heading-{{ tabid }}">
+              <h5 class="my-0">
+                <button class="tabcordion__heading" data-bs-toggle="collapse" data-bs-target="#collapse-{{ tabid }}" aria-expanded="false" aria-controls="collapse-{{ tabid }}" type="button">
+                  {{ tabtitle }}
+                </button>
+              </h5>
+            </div>
+            <div id="collapse-{{ tabid }}" class="collapse show fade tabcordion__content" data-parent="#content" role="tabpanel" aria-labelledby="heading-{{ tabid }}">
+              <div class="flow-root text-formatted">
+                {{ tabcontent }}
+              </div>
+            </div>
+          </div>
+          {% else %}
+          <div id="pane-{{ tabid }}" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-{{ tabid }}">
+            <div class="card-header" role="tab" id="heading-{{ tabid }}">
+              <h5 class="my-0">
+                <button class="collapsed tabcordion__heading" data-bs-toggle="collapse" data-bs-target="#collapse-{{ tabid }}" aria-expanded="false" aria-controls="collapse-{{ tabid }}" type="button">
+                  {{ tabtitle }}
+                </button>
+              </h5>
+            </div>
+            <div id="collapse-{{ tabid }}" class="collapse fade tabcordion__content" data-parent="#content" role="tabpanel" aria-labelledby="heading-{{ tabid }}">
+              <div class="flow-root text-formatted">
+                {{ tabcontent }}
+              </div>
+            </div>
+          </div>
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
 </div>
 {% endblock paragraph %}

From 84a67c244c36bab73643416636c927e263364048 Mon Sep 17 00:00:00 2001
From: James O'Toole <james.otoole@ubc.ca>
Date: Wed, 26 Jan 2022 10:28:00 -0800
Subject: [PATCH 2/2] Update slideshow template to load vanilla version if vue
 isn't present, remove unneeded submodule

---
 ...c-paragraph-bootstrap--slideshow.html.twig | 102 ---------------
 ...-paragraph-bootstrap--tabcordion.html.twig | 120 ------------------
 .../ubc_paragraph_entities_bootstrap.info.yml |   8 --
 .../ubc_paragraph_entities_bootstrap.module   |  34 -----
 .../ubc-paragraph--slideshow.html.twig        |  21 ++-
 5 files changed, 15 insertions(+), 270 deletions(-)
 delete mode 100644 ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/templates/ubc-paragraph-bootstrap--slideshow.html.twig
 delete mode 100644 ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/templates/ubc-paragraph-bootstrap--tabcordion.html.twig
 delete mode 100644 ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/ubc_paragraph_entities_bootstrap.info.yml
 delete mode 100644 ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/ubc_paragraph_entities_bootstrap.module

diff --git a/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/templates/ubc-paragraph-bootstrap--slideshow.html.twig b/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/templates/ubc-paragraph-bootstrap--slideshow.html.twig
deleted file mode 100644
index 7214c50..0000000
--- a/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/templates/ubc-paragraph-bootstrap--slideshow.html.twig
+++ /dev/null
@@ -1,102 +0,0 @@
-{#
-/**
- * @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
- */
-#}
-{% extends "@ubc_paragraph_entities/ubc-paragraph--slideshow.html.twig" %}
-
-{% set layout_attributes = create_attribute() %}
-{% set header_attributes = create_attribute() %}
-{% set title_attributes = create_attribute() %}
-{%
-  set classes = [
-    'paragraph',
-    'paragraph--type--' ~ paragraph.bundle|clean_class,
-    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
-    paragraph.field_region_vertical_spacing.0.entity.field_class.value ? paragraph.field_region_vertical_spacing.0.entity.field_class.value|clean_class,
-    paragraph.field_region_vertical_spacing.1.entity.field_class.value ? paragraph.field_region_vertical_spacing.1.entity.field_class.value|clean_class,
-  ]
-%}
-{%
-  set layout_classes = [
-    paragraph.field_region_width.0.entity.field_class.value ? paragraph.field_region_width.0.entity.field_class.value,
-  ]
-%}
-{%
-  set header_classes = [
-    '',
-  ]
-%}
-{%
-  set title_classes = [
-    'mt-0',
-    'pb-2',
-    'h3',
-  ]
-%}
-
-{% if paragraph.field_region_width.0.entity.field_class.value is empty %}
-  {%
-    set padding_classes = [
-      'px-5',
-      'md--px-4',
-    ]
-  %}
-{% endif %}
-{# add as variable to prevent multiple calls #}
-{%
-  set region_title = paragraph.field_paragraph_group_title.value
-%}
-
-{% block paragraph %}
-{{ attach_library('kraken/tiny-slider') }}
-<section{{ attributes.addClass(classes) }}>
-  {% if region_title|length > 0 %}
-  <header{{ header_attributes.addClass(header_classes, layout_classes,padding_classes) }}>
-    <h2{{ title_attributes.addClass(title_classes) }}>{{ region_title }}</h2>
-  </header>
-  {% endif %}
-  <div{{ layout_attributes.addClass(layout_classes) }}>
-    <div class="slideshow">
-      {% block content %}
-        {{ content.field_slide }}
-      {% endblock %}
-    </div>
-  </div>
-</section>
-{% endblock paragraph %}
diff --git a/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/templates/ubc-paragraph-bootstrap--tabcordion.html.twig b/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/templates/ubc-paragraph-bootstrap--tabcordion.html.twig
deleted file mode 100644
index 22ccc85..0000000
--- a/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/templates/ubc-paragraph-bootstrap--tabcordion.html.twig
+++ /dev/null
@@ -1,120 +0,0 @@
-{#
-/**
- * @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
- */
-#}
-{% extends "@ubc_paragraph_entities/ubc-paragraph--tabcordion.html.twig" %}
-
-{% set layout_attributes = create_attribute() %}
-{%
-  set newclasses = [
-    'paragraph',
-    'paragraph--type--' ~ paragraph.bundle|clean_class,
-    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
-    'tabcordion',
-    'tabcordion-bootsrap',
-    paragraph.field_region_vertical_spacing.0.entity.field_class.value ? paragraph.field_region_vertical_spacing.0.entity.field_class.value|clean_class,
-    paragraph.field_region_vertical_spacing.1.entity.field_class.value ? paragraph.field_region_vertical_spacing.1.entity.field_class.value|clean_class,
-  ]
-%}
-{%
-  set layout_classes = [
-    paragraph.field_region_width.0.entity.field_class.value ? paragraph.field_region_width.0.entity.field_class.value,
-  ]
-%}
-
-{% if paragraph.field_region_width.0.entity.field_class.value is empty %}
-  {%
-    set padding_classes = [
-      'px-5',
-      'md--px-4',
-    ]
-  %}
-{% endif %}
-
-{% block paragraph %}
-<div{{ attributes.addClass(newclasses) }}>
-  <div{{ layout_attributes.addClass(layout_classes, padding_classes) }}>
-    <nav class="tabs tabcordion__tabs">
-      <ul class="nav nav-tabs tabcordion__links" role="tablist">
-      {% for key, value in paragraph.field_paragraph_tab.value %}
-        {% set tabid = paragraph.field_paragraph_tab[key].entity.id() %}
-        {% set tabtitle = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_title.value %}
-        {% set tabtitle_clean = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_title.value|clean_class %}
-
-        {% if key == 0 %}
-          <li class="nav-item tabcordion__tab" role="presentation">
-            <button class="nav-link active tabcordion__tab" id="nav-{{ tabtitle_clean }}-tab" data-bs-toggle="tab" data-bs-target="#nav-{{ tabtitle_clean }}" type="button" role="tab" aria-controls="nav-{{ tabtitle_clean }}" aria-selected="true">
-              {{ tabtitle }}
-            </button>
-          </li>
-          {% else %}
-          <li class="nav-item tabcordion__tab" role="presentation">
-            <button class="nav-link tabcordion__tab" id="nav-{{ tabtitle_clean }}-tab" data-bs-toggle="tab" data-bs-target="#nav-{{ tabtitle_clean }}" type="button" role="tab" aria-controls="nav-{{ tabtitle_clean }}" aria-selected="false">
-              {{ tabtitle }}
-            </button>
-          </li>
-        {% endif %}
-      {% endfor %}
-      </ul>
-    </nav>
-    <div class="tab-content tabs-details tabcordion__content-wrapper">
-      {% for key, value in paragraph.field_paragraph_tab.value %}
-        {% set tabtitle = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_title.value %}
-        {% set tabtitle_clean = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_title.value|clean_class %}
-        {% set tabcontent = paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_content.value|check_markup(paragraph.field_paragraph_tab[key].entity.field_paragraph_tab_content.format) %}
-        {% if key == 0 %}
-          <button class="tabcordion__heading" type="button" data-bs-toggle="collapse" data-bs-target="#nav-{{ tabtitle_clean }}">
-            {{ tabtitle }}
-          </button>
-          <div class="flow-root tab-pane fade show active text-formatted tabcordion__content" id="nav-{{ tabtitle_clean }}" role="tabpanel" aria-labelledby="nav-{{ tabtitle_clean }}-tab">
-            {{ tabcontent }}
-          </div>
-          {% else %}
-          <button class="tabcordion__heading collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav-{{ tabtitle_clean }}">
-            {{ tabtitle }}
-          </button>
-          <div class="flow-root tab-pane fade text-formatted tabcordion__content" id="nav-{{ tabtitle_clean }}" role="tabpanel" aria-labelledby="nav-{{ tabtitle_clean }}-tab">
-            {{ tabcontent }}
-          </div>
-        {% endif %}
-      {% endfor %}
-    </div>
-  </div>
-</div>
-{% endblock paragraph %}
diff --git a/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/ubc_paragraph_entities_bootstrap.info.yml b/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/ubc_paragraph_entities_bootstrap.info.yml
deleted file mode 100644
index 92f0f26..0000000
--- a/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/ubc_paragraph_entities_bootstrap.info.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-name: UBC Paragraph Entities - Bootstrap
-type: module
-description: This module adds custom templates to paragraph entities that replicate Bootstrap 5 markup.
-package: UBC Web Services
-dependencies:
-  - ubc_paragraph_entities:ubc_paragraph_entities
-core: '8.x'
-core_version_requirement: ^8 || ^9
diff --git a/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/ubc_paragraph_entities_bootstrap.module b/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/ubc_paragraph_entities_bootstrap.module
deleted file mode 100644
index ac2643b..0000000
--- a/ubc_paragraph_entities/modules/ubc_paragraph_entities_bootstrap/ubc_paragraph_entities_bootstrap.module
+++ /dev/null
@@ -1,34 +0,0 @@
-<?php
-
-/**
- * Implements HOOK_theme_suggestions_HOOK_alter
- */
-function ubc_paragraph_entities_bootstrap_theme_suggestions_paragraph_alter(&$suggestions, array $variables) {
-  $suggestions = array();
-  $paragraph = $variables['elements']['#paragraph'];
-  $sanitized_view_mode = strtr($variables['elements']['#view_mode'], '.', '_');
-  $type = $paragraph->getType();
-
-  $suggestions[] = 'ubc_paragraph__' . $sanitized_view_mode;
-  $suggestions[] = 'ubc_paragraph_bootstrap__' . $sanitized_view_mode;
-  $suggestions[] = 'ubc_paragraph__' . $type;
-  $suggestions[] = 'ubc_paragraph_bootstrap__' . $type;
-  $suggestions[] = 'ubc_paragraph__' . $type . '__' . $sanitized_view_mode;
-  $suggestions[] = 'ubc_paragraph_bootstrap__' . $type . '__' . $sanitized_view_mode;
-
-  return $suggestions;
-}
-
-/**
- * Implements hook_theme().
- */
-function ubc_paragraph_entities_bootstrap_theme($existing, $type, $theme, $path) {
-  return [
-    'ubc_paragraph_bootstrap__tabcordion' => [
-      'base hook' => 'paragraph'
-    ],
-    'ubc_paragraph_bootstrap__slideshow' => [
-      'base hook' => 'paragraph'
-    ],
-  ];
-}
diff --git a/ubc_paragraph_entities/templates/ubc-paragraph--slideshow.html.twig b/ubc_paragraph_entities/templates/ubc-paragraph--slideshow.html.twig
index 46693a5..b8220ff 100644
--- a/ubc_paragraph_entities/templates/ubc-paragraph--slideshow.html.twig
+++ b/ubc_paragraph_entities/templates/ubc-paragraph--slideshow.html.twig
@@ -89,12 +89,21 @@
   </header>
   {% endif %}
   <div{{ layout_attributes.addClass(layout_classes) }}>
-    <tiny-slider speed="200" items="1" slide-by="page"
-      mouse-drag center auto-width gutter="0" edge-padding="0">
-      {% block content %}
-        {{ content.field_slide }}
-      {% endblock %}
-    </tiny-slider>
+    {% if clf_vue %}
+      <tiny-slider speed="200" items="1" slide-by="page"
+        mouse-drag center auto-width gutter="0" edge-padding="0">
+        {% block content %}
+          {{ content.field_slide }}
+        {% endblock %}
+      </tiny-slider>
+    {% else %}
+      {{ attach_library('kraken/tiny-slider') }}
+      <div class="slideshow">
+        {% block content %}
+          {{ content.field_slide }}
+        {% endblock %}
+      </div>
+    {% endif %}
   </div>
 </section>
 {% endblock paragraph %}