sample files from a smithsonian project

templates/paragraphs/paragraph--accordion.html.twig

@@ -0,0 +1,12 @@
+{{ attach_library('cdesai_emulsify/accordion') }}
+
+{% set hidden = content.field_hide.0['#markup'] == 'Yes' ? true : false %}
+
+{% if not hidden %}
+  {% include "@components/accordion/accordion-group.twig" with {
+    modifier_classes: content.field_tabs|field_value|length > 5 ? 'accordion-group--small' : false,
+    accordion_group_items: content.field_tabs|field_value,
+    accordion_group_title: content.field_title|field_value,
+    accordion_group_intro: content.field_description|field_value,
+  }%}
+{% endif %}

templates/paragraphs/paragraph--aside.html.twig

@@ -0,0 +1,11 @@
+{{ attach_library('cdesai_emulsify/aside') }}
+
+{% set alignment_class %}
+  aside--{{ content.field_alignment.0['#markup']|lower }}
+{% endset %}
+
+{% include "@components/aside/aside.twig" with {
+  modifier_classes: alignment_class,
+  aside_title: content.field_title|field_value,
+  aside_content: content.field_body|field_value
+}%}

templates/paragraphs/paragraph--horizontal-tabs.html.twig

@@ -0,0 +1,26 @@
+{% set classes = [
+  'l-paragraph',
+] %}
+
+<div{{ attributes.addClass(classes) }}>
+  <div class="l-constrain">
+    {% embed '@components/horizontal-tabs/horizontal-tabs.twig' with {
+      modifier_classes: content.tab_titles|length <= 3 ? 'horizontal-tabs--large' : false,
+      alignment_class: content.tab_titles|length <= 2 ? 'justify-evenly' : false,
+      horizontal_tabs_label: content.field_label|field_value,
+      horizontal_tabs_title: content.field_title|field_value,
+      horizontal_tabs_subtitle: content.field_description|field_value
+    }%}
+
+      {% block tablist %}
+        {{ content.tab_titles }}
+      {% endblock %}
+
+      {% block tab_panels %}
+        {{ content.field_tabs|field_value }}
+      {% endblock %}
+
+    {% endembed %}
+  </div>
+</div>
+ 

templates/paragraphs/paragraph--media--media-gallery.html.twig

@@ -0,0 +1,7 @@
+{{ attach_library('cdesai_emulsify/gallery') }}
+
+{% include "@components/gallery/gallery.twig" with {
+  gallery_title: content.field_title|field_value,
+  gallery_subtitle: content.field_description|field_value,
+  gallery_items: content.field_slides|field_value
+}%}

templates/paragraphs/paragraph.html.twig

@@ -0,0 +1,48 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a paragraph.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   - id: The paragraph ID.
+ *   - bundle: The type of the paragraph, for example, "image" or "text".
+ *   - authorid: The user ID of the paragraph author.
+ *   - createdtime: Formatted creation date. Preprocess functions can
+ *     reformat it by calling format_date() with the desired parameters on
+ *     $variables['paragraph']->getCreatedTime().
+ * - 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.bundle|clean_class
+  ]
+%}
+
+<div{{ attributes.addClass(classes) }}>
+  {{ content }}
+</div>