Contact Channel

// src/components/patterns/contact-persons/contact-channel/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/contact-persons/contact-channel
additionalProperties: false
properties:
  title:
    type: string
  icon:
    type: string
  link:
    type: object
    properties:
      title:
        type: string
      url:
        type: string
        format: uri-reference

// src/components/patterns/contact-persons/contact-channel/mocks.yaml

$hidden: true
$variants:
  - $name: Mail
    title: E-Mail
    icon: mail
    link:
      title: erika.musterfrau@greenpeace.de
      url: erika.musterfrau@greenpeace.de
  - $name: Phone
    title: Telefon
    icon: phone
    link:
      title: '04012456'
      url: '04012456'
  - $name: Twitter
    title: Twitter
    icon: twitter-outline
    link:
      title: Erika Musterfrau
      url: url

// src/components/patterns/contact-persons/contact-channel/contact-channel.html.twig

{% if icon == "mail" %}
  {% set type = "mailto:" %}
{% elseif icon == "phone" %}
  {% set type = "tel:" %}
{% elseif icon == "twitter-outline" %}
  {% set target = 'target="_blank" rel="noopener"' %}
{% endif %}

{% set href = type ? type ~ link.url : link.url %}

<li class="ContactChannel">
  <p class="ContactChannel-title u-typo-copy-bold">
    {% include "@elements/icon/icon.html.twig" with {
      name: icon,
      class: "ContactChannel-icon"
    } only %}
    {{ title }}
  </p>
  <a class="ContactChannel-link u-typo-copy-bold u-brandLink" href="{{ href|replace({' ': ''}) }}"{% if target %} {{ target }}{% endif %}>
    {{ link.title }}
  </a>
</li>