Contact Persons

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

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/contact-persons
additionalProperties: false
required:
  - contact_persons
properties:
  headline:
    type: string
  contact_persons:
    type: array
    items:
      type: object
      additionalProperties: false
      properties:
        image:
          type: string
          format: html
        image_copyright:
          type: string
        first_name:
          type: string
        last_name:
          type: string
        position:
          type: string
        short_bio:
          type: string
        phone_number:
          type: string
        email:
          type: string
        twitter:
          type: object
          properties:
            url:
              type: string
              format: uri-reference
            title:
              type: string
        social_networks:
          type: array
          items:
            type: object
            properties:
              url:
                type: string
                format: uri-reference
              title:
                type: string
      required:
        - first_name
        - last_name

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

$hidden: true
$variants:
  - $name: default
    contact_persons:
      - first_name: Kristina
        last_name: Oberhäuser
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
  - $name: only name
    contact_persons:
      - first_name: Kristina
        last_name: Oberhäuser
  - $name: with headline
    headline: Contact Headline
    contact_persons:
      - first_name: Kristina
        last_name: Oberhäuser
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
  - $name: with image
    headline: Contact Headline
    contact_persons:
      - first_name: Kristina
        last_name: Oberhäuser
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/720
          width: 720
          height: 720
        image_copyright: © Greenpeace
        social_networks:
          - url: url
            title: instagram
          - url: url
            title: facebook
  - $name: with short bio
    contact_persons:
      - first_name: Kristina
        last_name: Oberhäuser
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        short_bio: >-
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores.
  - $name: with image and short bio
    headline: Contact Headline
    contact_persons:
      - first_name: Kristina
        last_name: Oberhäuser
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/720
          width: 720
          height: 720
        image_copyright: © Greenpeace
        short_bio: >-
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores.
  - $name: with multiple contact persons
    headline: Contact Headline
    contact_persons:
      - first_name: Kristina
        last_name: Oberhäuser
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/720
          width: 720
          height: 720
        image_copyright: © Greenpeace
        short_bio: >-
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores.
      - first_name: Kristina
        last_name: Oberhäuser
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        image:
          $ref: elements/image
          $tpl: elements/image
          src: https://via.placeholder.com/720
          width: 720
          height: 720
        image_copyright: © Greenpeace
      - first_name: Kristina
        last_name: Oberhäuser
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'

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

{% set first_h_level = headline ? 3 : 2 %}
{% set second_h_level = headline ? 4 : 3 %}
{% if profile_node %}
  {% set first_h_level = 1 %}
  {% set second_h_level = 2 %}
{% endif %}
{% if headline_level_from_ui %}
  {% set first_h_level = headline_level_from_ui %}
  {% set second_h_level = headline_level_from_ui %}
{% endif %}
<div class="ContactPersons">
  {%- if headline %}
    <h2 class="ContactPersons-headline u-container u-typo-headline3">{{ headline }}</h2>
  {% endif -%}
  <div class="ContactPersons-inner">
    <div class="u-container">
      {%- for contact_person in contact_persons %}
        {% set name = contact_person.first_name ~ " " ~ contact_person.last_name %}
        {% set position = contact_person.position %}
        {% set image = contact_person.image %}
        {% set image_copyright = contact_person.image_copyright %}
        {% set bio = contact_person.short_bio %}
        {% set mail = contact_person.email %}
        {% set phone = contact_person.phone_number %}
        {% set twitter = contact_person.twitter %}
        {% set has_contact = mail or phone or twitter %}
        {% set social_networks = contact_person.social_networks %}
        <article class="ContactPersons-person u-grid">
          <div class="ContactPersons-about">
            <h{{ first_h_level }} class="u-typo-headline4-desktop-headline3-mobile">{{ name }}</h{{ first_h_level }}>
            {%- if position %}
              <p class="ContactPersons-position">{{ position }}</p>
            {% endif -%}
            {%- if bio %}
              <h{{ second_h_level }} class="ContactPersons-bioHeadline u-typo-headline5">About</h{{ second_h_level }}>
              <p class="ContactPersons-bioText">{{ bio }}</p>
            {% endif -%}
            {% if social_networks %}
              <div class="ContactPersons-socialNetworks ContactPersons-socialNetworks--desktop">
                <h{{ second_h_level }} class="ContactPersons-socialNetworksHeadline u-typo-headline5">Folgen</h{{ second_h_level }}>
                <ul class="ContactPersons-socialNetworksList">
                  {% for social_network in social_networks %}
                    {% if social_network %}
                      <li class="ContactPersons-socialNetworkItem">
                        <a class="ContactPersons-socialNetworklink" href="{{ social_network.url }}" target="_blank" rel="noopener">
                          {% include "@elements/icon/icon.html.twig" with {
                            name: social_network.title,
                            class: "ContactPersons-socialNetworkIcon"
                          } only %}
                          <span class="u-hiddenVisually">{{ social_network.title }}</span>
                        </a>
                      </li>
                    {% endif %}
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
          </div>
          {%- if has_contact %}
            <div class="ContactPersons-contact">
              <h{{ second_h_level }} class="ContactPersons-contactHeadline u-typo-headline5">Kontakt</h{{ second_h_level }}>
              <ul class="ContactPersons-contactList">
                {%- if mail %}
                  {% include "@patterns/contact-persons/contact-channel/contact-channel.html.twig" with {
                    title: "E-Mail",
                    icon: "mail",
                    link: {title: mail, url: mail}
                  } only %}
                {% endif -%}
                {%- if phone %}
                  {% include "@patterns/contact-persons/contact-channel/contact-channel.html.twig" with {
                    title: "Telefon",
                    icon: "phone",
                    link: {title: phone, url: phone}
                  } only %}
                {% endif -%}
                {%- if twitter %}
                  {% include "@patterns/contact-persons/contact-channel/contact-channel.html.twig" with {
                    title: "Twitter",
                    icon: "twitter-outline",
                    link: {title: twitter.title, url: twitter.url}
                  } only %}
                {% endif -%}
              </ul>
            </div>
          {% endif -%}
          {%- if image %}
            <div class="ContactPersons-image">
              <span class="ContactPersons-decoration"></span>
              <span class="ContactPersons-decoration"></span>
              {{ image|raw }}
              {% if image_copyright %}<figcaption class="ContactPersons-copyright u-typo-copy-small">{{ image_copyright }}</figcaption> {% endif %}
            </div>
          {% endif -%}
          {% if social_networks %}
            <div class="ContactPersons-socialNetworks ContactPersons-socialNetworks--mobile">
              <h{{ second_h_level }} class="ContactPersons-socialNetworksHeadline u-typo-headline5">Folgen</h{{ second_h_level }}>
              <ul class="ContactPersons-socialNetworksList">
                {% for social_network in social_networks %}
                  {% if social_network %}
                    <li class="ContactPersons-socialNetworkItem">
                      <a class="ContactPersons-socialNetworklink" href="{{ social_network.url }}" target="_blank" rel="noopener">
                        {% include "@elements/icon/icon.html.twig" with {
                          name: social_network.title,
                          class: "ContactPersons-socialNetworkIcon"
                        } only %}
                        <span class="u-hiddenVisually">{{ social_network.title }}</span>
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </article>
      {% endfor -%}
    </div>
  </div>
</div>