Tags component

Taxonomy are Drupal entities just like Nodes, blocks, etc. This means we can create view modes and custom templates so we can integrate them with Drupal. Currently we don't have a component for displaying tags. Having a dedicated component for tags will allow us to individually style them and will allow for more effective integration with Drupal. Let's quickly build one.

Build a component for the tags

The tags component is going to be a little unusual compared to other components we've built. The main reason for the way this component will be built is how Drupal handles templates for taxonomy terms and vocabularies. We will see more about this when we integrate the tag components with Drupal.

1. Inside src/patterns/components/ create a new folder called tags

2. Inside the tags folder create a new file called tag-item.twig (we will first create a component for a single tag item).

   1. Since we wouldn't want to display only a single tag item in Pattern Lab, let's hide it by creating a new file called tag-item.md Inside the markdown file add the following code: --- hidden: true ---

   2. Using a markdown file with the same name of the pattern you wish to hide will hide the pattern in Pattern Lab. The pattern is still available if we need to use it in another component.

3. Add the following code inside tag-item.twig

tag-item.twig

<span{% if attributes %} class="{{ attributes.class }}"{% endif %}
  {{- attributes ? attributes|without(class) -}}>
  {{ title_prefix }}
  <a href="{{ url }}" class="tag__link">
    {{ name }}
  </a>
  {{ title_suffix }}
</span>

1. Now inside the tags folder create the following files with the following code:

tags.json

{
  "items": [
    {
      "name": "Frashion",
      "url": "#"
    },
    {
      "name": "Sports",
      "url": "#"
    },
    {
      "name": "Health",
      "url": "#"
    }
  ]
}

tags.twig

{{ attach_library('training_theme/tags') }}

<ul class="tags{{ modifier ? ' ' ~ modifier }}
  {{- attributes ? ' ' ~ attributes.class -}}"
  {{- attributes ? attributes|without(class) -}}>
  {% for item in items %}
    <li class="tag__item">
      {% block tag_item %}
        {%
          include '@training_theme/tags/tag-item.twig' with {
            "name": item.name,
            "url": item.url
          } only
        %}
      {% endblock %}
    </li>
  {% endfor %}
</ul>

• Notice we are including the single tag item while we look through the items array.

tags.scss

// Import site utilities
@import '../../global/utils/init';

.tags {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag__item {
  align-items: center;
  color: $color-gray-dark;
  display: flex;
  justify-content: center;
  line-height: 1;
  margin-right: 7px;

  a {
    background-color: $color-button-gray;
    color: $color-gray-dark;
    display: block;
    font-size: 1.3rem;
    line-height: 1.2;
    padding: 6px 12px;
    border-radius: 50vh;
    overflow: hidden;
    text-decoration: none;
    transition: background-color 0.2s ease;

    &:hover,
    &:focus {
      background-color: darken($color-button-gray, 5%);
    }
  }
}

• If you save your changes and compile your code you should see a list of tags in Pattern Lab. Let's integrate this component with Drupal now to fix our tags inside the card of blog posts.

Don't forget to create the Drupal library for the tags.

Updated the card

Now that we have a component for tags, let's modify the card so we make use of it. Here's the full card.twig code which now uses an include for the tags.

card.twig

{{ attach_library('training_theme/card') }}

<article class="card{{ modifier ? ' ' ~ modifier }}
  {{- attributes ? ' ' ~ attributes.class -}}"
  {{- attributes ? attributes|without(class) -}}>

  {# Date for featured content cards. #}
  {% if 'card--wide' in modifier %}
    <div class="card__featured--date">
      {% block featured_date %}
        {{ date }}
      {% endblock featured_date %}
    </div>
  {% endif %}

  {% if image %}
    <div class="card__media">
      {{ image }}
    </div>
  {% endif %}

  <div class="card__content">
    {% if heading %}
      {{ title_prefix }}
      {%
        include '@training_theme/heading/heading.twig' with {
          heading: heading
        } only
      %}
      {{ title_suffix }}
    {% endif %}

    {# Date for regular content cards. #}
    {% if 'card--wide' not in modifier %}
      <div class="eyebrow card__date">
        {% block card_date %}
          {{ date }}
        {% endblock card_date %}
      </div>
    {% endif %}

    {% if category %}
      <div class="eyebrow card__category">
        {{ category }}
      </div>
    {% endif %}

    {% if body_text %}
      <div class="card__body">
        {{ body_text }}
      </div>
    {% endif %}

    {% block tags %}
      {% if tags %}
        {%
          include '@training_theme/tags/tags.twig' with {
            "items": tags
          } only
        %}
      {% endif %}
    {% endblock tags %}

    {% block author %}
      {% if author %}
        {%
          include '@training_theme/author/author.twig' with {
            "author": author
          } only
        %}
      {% endif %}
    {% endblock author %}
  </div>
</article>