Contacts list

// src/components/patterns/further-questions/contacts-list/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/further-questions/contacts-list
additionalProperties: false
required:
  - list
properties:
  list:
    type: array
    items:
      type: object
      properties:
        label:
          type: string
        type:
          type: string
        url:
          type: string
          format: uri-reference
      required:
        - label
        - type
        - url

// src/components/patterns/further-questions/contacts-list/mocks.yaml

list:
  - type: mail
    label: E-Mail
    url: foerderer@greenpeace.de
  - type: phone
    label: Telefon
    url: 040 859 849 21

// src/components/patterns/further-questions/contacts-list/contacts-list.html.twig

<ul class="ContactsList">
  {% for item in list %}
    {% if item.type == "mail" %}
      {% set href_type = "mailto:" %}
    {% elseif item.type == "phone" %}
      {% set href_type = "tel:" %}
    {% else %}
      {% set href_type = "" %}
    {% endif %}
    <li class="ContactsList-item">
      <span class="ContactsList-type u-typo-copy-bold">
        {% include "@elements/icon/icon.html.twig" with {
          name: item.type,
          class: "ContactsList-icon"
        } only %}
        {{ item.label }}
      </span>
        <a class="ContactsList-link u-brandLink u-typo-link" href="{{ href_type }}{{ item.url|replace({' ': ''}) }}">
          {% if item.type == "phone" %}
            {{ item.url|replace({' ': '&nbsp;'}) }}
          {% else %}
            {{ item.url }}
          {% endif %}
        </a>
    </li>
  {% endfor %}
</ul>