sample files from a smithsonian project

templates/fields/field--node--field-date--teaser-small.html.twig

@@ -0,0 +1,20 @@
+{% if label_display == 'visually_hidden' %}
+  <div{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</div>
+{% endif %}
+{% if multiple %}
+  <div{{ attributes }}>
+    {% for item in items %}
+      {% include '@components/teaser/teaser--small/_teaser-eyebrow.twig' with {
+        drupal_attributes: item.attributes|without('class'),
+        teaser_eyebrow: item.content,
+      } %}
+    {% endfor %}
+  </div>
+{% else %}
+  {% for item in items %}
+    {% include '@components/teaser/teaser--small/_teaser-eyebrow.twig' with {
+      drupal_attributes: attributes|without('class'),
+      teaser_eyebrow: item.content,
+    } %}
+  {% endfor %}
+{% endif %}

templates/fields/field--node--field-daterange--teaser.html.twig

@@ -0,0 +1,26 @@
+{% macro display_date(date_content, attributes) %}
+  {% set rendered = date_content|render|striptags|trim %}
+  {% set dates = rendered|split(',') %}
+  {% include '@components/teaser/teaser--event/_teaser-date.twig' with {
+    teaser_start: dates.0|trim,
+    teaser_end: dates|length > 1 ? dates.1|trim : false,
+    drupal_attributes: attributes|without('class'),
+    modifier_classes: attributes.class|join(' ')|trim
+  } %}
+{% endmacro %}
+
+{% if label_display == 'visually_hidden' %}
+  <div{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</div>
+{% endif %}
+
+{% if multiple %}
+  <div{{ attributes }}>
+    {% for item in items %}
+      {{ _self.display_date(item.content, item.attributes) }}
+    {% endfor %}
+  </div>
+{% else %}
+  {% for item in items %}
+    {{ _self.display_date(item.content, attributes) }}
+  {% endfor %}
+{% endif %}

templates/fields/field--node--field-location--teaser.html.twig

@@ -0,0 +1,22 @@
+{% if label_display == 'visually_hidden' %}
+  <div{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</div>
+{% endif %}
+{% if multiple %}
+  <div{{ attributes }}>
+    {% for item in items %}
+      {% include '@components/teaser/teaser--event/_teaser-location.twig' with {
+        drupal_attributes: item.attributes|without('class'),
+        teaser_location: item.content,
+        teaser_location_label: not label_hidden ? label : false,
+      } %}
+    {% endfor %}
+  </div>
+{% else %}
+  {% for item in items %}
+    {% include '@components/teaser/teaser--event/_teaser-location.twig' with {
+      drupal_attributes: attributes|without('class'),
+      teaser_location: item.content,
+      teaser_location_label: not label_hidden ? label : false,
+    } %}
+  {% endfor %}
+{% endif %}

templates/fields/field--node--field-summary--teaser-list.html.twig

@@ -0,0 +1,20 @@
+{% if label_display == 'visually_hidden' %}
+  <div{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</div>
+{% endif %}
+{% if multiple %}
+  <div{{ attributes }}>
+    {% for item in items %}
+      {% include '@components/teaser/_teaser-body.twig' with {
+        drupal_attributes: item.attributes|without('class'),
+        teaser_body: item.content,
+      } %}
+    {% endfor %}
+  </div>
+{% else %}
+  {% for item in items %}
+    {% include '@components/teaser/_teaser-body.twig' with {
+      drupal_attributes: attributes|without('class'),
+      teaser_body: item.content,
+    } %}
+  {% endfor %}
+{% endif %}

templates/fields/field--paragraph--field-description.html.twig

@@ -0,0 +1,32 @@
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes }}>
+      {% for item in items %}
+        <p{{ item.attributes }}>{{ item.content }}</p>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <p{{ attributes }}>{{ item.content }}</p>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes }}>
+    <h3{{ title_attributes.addClass(title_classes) }}>{{ label }}</h3>
+    {% if multiple %}
+      <div>
+    {% endif %}
+    {% for item in items %}
+      <p{{ item.attributes }}>{{ item.content }}</p>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

templates/fields/field--text-long.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()
+ */
+
+ @TODO: THIS CAN BE REMOVED IF BEM CLASSES CAN BE APPLIED IN WYSIWYG
+#}
+
+{% include directory ~ "/templates/fields/_field-wysiwyg.twig" %}

templates/fields/field--text-with-summary.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()
+ */
+
+ @TODO: THIS CAN BE REMOVED IF WYWSIWYG BEM CLASSES CAN BE APPLIED
+#}
+
+{% include directory ~ "/templates/fields/_field-wysiwyg.twig" %}

templates/fields/field.html.twig

@@ -0,0 +1,70 @@
+{#
+/**
+ * @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()
+ */
+#}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes }}>
+      {% for item in items %}
+        <div{{ item.attributes }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div>
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}