Social networks

// src/components/template-components/footer/social-networks/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /template-components/footer/social-networks
additionalProperties: false
properties:
  tracking_class:
    type: string

// src/components/template-components/footer/social-networks/social-networks.html.twig

{% set links = [
  {
    "label": "facebook",
    "url": "https://www.facebook.com/greenpeace.de?ref=hl"
  },
  {
    "label": "youtube",
    "url": "https://www.youtube.com/user/GreenpeaceDE"
  },
  {
    "label": "linkedin",
    "url": "https://de.linkedin.com/company/greenpeace-deutschland"
  },
  {
    "label": "whatsapp",
    "url": "https://whatsapp.com/channel/0029VaF825cGOj9s7gW06V2o"
  },
  {
    "label": "instagram",
    "url": "https://www.instagram.com/greenpeace.de"
  }
] %}

<div class="SocialNetworks{% if class %} {{ class }}{% endif %}">
  <p class="SocialNetworks-title u-typo-copy-small-bold">Folge uns:</p>
  <ul class="SocialNetworks-list">
    {% for item in links %}
      <li class="SocialNetworks-network">
        <a href="{{ item.url }}" class="SocialNetworks-networkLink SocialNetworks-networkLink--{{ item.label }}{% if tracking_class %} {{ tracking_class }}{% endif %}" title="{{ item.label }}" target="_blank" rel="noopener">
          {% include "@elements/icon/icon.html.twig" with {
            name: item.label,
            class: "SocialNetworks-icon"
          } only %}
          <span class="u-hiddenVisually SocialNetworks-accessibleText">{{ item.label }}</span>
        </a>
      </li>
    {% endfor %}
  </ul>
</div>