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
        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
      required:
        - first_name
        - last_name

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

$hidden: true
$variants:
  - $name: default
    contact_persons:
      - first_name: Erika
        last_name: Musterfrau
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
  - $name: only name
    contact_persons:
      - first_name: Erika
        last_name: Musterfrau
  - $name: with headline
    headline: Contact Headline
    contact_persons:
      - first_name: Erika
        last_name: Musterfrau
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        twitter:
          title: Erica Musterfrau
          url: url
  - $name: with image
    headline: Contact Headline
    contact_persons:
      - first_name: Erika
        last_name: Musterfrau
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        twitter:
          title: Erica Musterfrau
          url: url
        image:
          $ref: elements/image
          $tpl: elements/image
          width: 496
          height: 330
  - $name: with short bio
    contact_persons:
      - first_name: Erika
        last_name: Musterfrau
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        twitter:
          title: Erica Musterfrau
          url: url
        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: Erika
        last_name: Musterfrau
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        twitter:
          title: Erica Musterfrau
          url: url
        image:
          $ref: elements/image
          $tpl: elements/image
          width: 496
          height: 330
        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: Erika
        last_name: Musterfrau
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        twitter:
          title: Erica Musterfrau
          url: url
        image:
          $ref: elements/image
          $tpl: elements/image
          width: 496
          height: 330
        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: Erika
        last_name: Musterfrau
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        twitter:
          title: Erica Musterfrau
          url: url
        image:
          $ref: elements/image
          $tpl: elements/image
          width: 496
          height: 330
      - first_name: Erika
        last_name: Musterfrau
        position: Musterabteilung oder Musterfunktion
        email: erika.musterfrau@greenpeace.de
        phone_number: '04085984921'
        twitter:
          title: Erica Musterfrau
          url: url

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

{% set first_h_level = headline ? 3 : 2 %}
{% set second_h_level = headline ? 4 : 3 %}

<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 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 %}

        <article class="ContactPersons-person u-grid
          {%- if image %} ContactPersons-person--hasImage{% endif -%}
          {%- if bio %} ContactPersons-person--hasBio{% endif -%}"
        >
          {%- if image %}
            <div class="ContactPersons-image">{{ image|raw }}</div>
          {% endif -%}
          <div class="ContactPersons-personalData">
            <div class="ContactPersons-about">
              <h{{ first_h_level }} class="u-typo-headline4">{{ 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 -%}
            </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 -%}
          </div>
        </article>
      {% endfor -%}
    </div>
  </div>
</div>