uswds_paragraph_components-1.0.x-dev/templates/paragraph--uswds-3-columns.html.twig

{#
/**
 * @file
 * Default theme implementation to display a paragraph in USWDS Paragraph Components.
 *
 * 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
 */
#}

{# The template default set classes. #}
{# Sets Paragraph ID as class. #}
{%
  set classes = [
  'paragraph',
  'paragraph--type--' ~ paragraph.bundle|clean_class,
  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  'paragraph--id--' ~ paragraph.id.value,
  'grid-container',
]
%}

{% if content.field_grid_gap['#items'].getString() %}
  {% set grid_gap = ' grid-gap' %}
{% endif %}

{# Prints div with classes, and content without Width and Background. #}
<div{{ attributes.addClass(classes) }}>
  <div class="grid-row{{ grid_gap }}">

    {% set first_column_grid_class = [] %}
    {% set second_column_grid_class = [] %}
    {% set third_column_grid_class = [] %}

    {% for key, item in content.field_uswds_3_column_breakpoints if key|first != '#' %}
      {% set values = content.field_uswds_3_column_breakpoints[key]['#paragraph'] %}
      {% set breakpoint = values.field_uswds_breakpoints.entity.name.value %}
      {% set column = values.field_3_column_grid.value|raw %}

      {% if breakpoint and column %}
        {% set first_column_grid_class = first_column_grid_class|merge([
          '3-6-3' == column ? breakpoint ~ ':grid-col-3',
          '8-2-2' == column ? breakpoint ~ ':grid-col-8',
          'auto' == column ? breakpoint ~ ':grid-col-auto',
          'even' == column ? breakpoint ~ ':grid-col-4',
          '100' == column ? breakpoint ~ ':grid-col-12',
        ])
        %}

        {% set second_column_grid_class = second_column_grid_class|merge([
          '3-6-3' == column ? breakpoint ~ ':grid-col-6',
          '8-2-2' == column ? breakpoint ~ ':grid-col-2',
          'auto' == column ? breakpoint ~ ':grid-col-auto',
          'even' == column ? breakpoint ~ ':grid-col-4',
          '100' == column ? breakpoint ~ ':grid-col-12',
        ])
        %}

        {% set third_column_grid_class = third_column_grid_class|merge([
          '3-6-3' == column ? breakpoint ~ ':grid-col-3',
          '8-2-2' == column ? breakpoint ~ ':grid-col-2',
          'auto' == column ? breakpoint ~ ':grid-col-auto',
          'even' == column ? breakpoint ~ ':grid-col-4',
          '100' == column ? breakpoint ~ ':grid-col-12',
        ])
        %}
      {% endif %}
    {% endfor %}

    {% set default = [
      'grid-col-4',
    ]
    %}

    {% for key, item in content.field_3_column_content if key|first != '#' %}
      {% set column = content.field_3_column_content.0 %}

      {% if loop.index == 1 %}
        {% set column_attributes = create_attribute() %}
        <div{{ column_attributes.addClass(first_column_grid_class).addClass(default) }}>
          {{ item }}
        </div>

      {% elseif loop.index == 2 %}
        {% set column_attributes = create_attribute() %}
        <div{{ column_attributes.addClass(second_column_grid_class).addClass(default) }}>
          {{ item }}
        </div>

      {% elseif loop.index == 3 %}
        {% set column_attributes = create_attribute() %}
        <div{{ column_attributes.addClass(third_column_grid_class).addClass(default) }}>
          {{ item }}
        </div>
      {% endif %}
    {%- endfor -%}
  </div>
</div>