Lightbox

// src/components/elements/lightbox/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/lightbox
additionalProperties: false
required:
  - title
  - id
properties:
  title:
    type: string
  copy:
    type: string
    format: html
  footer:
    type: string
  link:
    type: object
    properties:
      label:
        type: string
      url:
        type: string
        format: uri-reference
  image:
    type: object
    properties:
      width:
        type: number
      height:
        type: number
      src:
        type: string
        format: uri-reference
      alt:
        type: string
  id:
    type: string
  class:
    type: string
  hide_opener:
    type: boolean
  hide_close_button:
    type: boolean
  data_attributes:
    type: object
  clickable_overlay:
    type: boolean
  wide:
    type: boolean

// src/components/elements/lightbox/mocks.yaml

$hidden: true
id: id
clickable_overlay: true
$variants:
  - $name: with opener and image
    title: Lorem ipsum dolor sit amet.
    copy: >-
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad blanditiis
      commodi culpa dignissimos est id ipsam labore, modi molestiae nostrum odio
      quibusdam quis repudiandae totam voluptate! Libero modi, natus placeat
      quae quas quidem unde vel veniam! Amet cum dolores harum inventore itaque
      nesciunt praesentium quis. Beatae non optio voluptatem voluptatum!
    link:
      label: – Lorem ipsum dolor sit amet, consectetur adipisicing.
      url: url
    image:
      width: 63
      height: 63
      src: https://via.placeholder.com/480x270
      alt: Accountable Now
    footer: Lorem ipsum dolor sit amet.
  - $name: with opener and without image
    title: Unterschrift wurde bestätigt!
    copy: Vielen Dank fürs Mitmachen. Wollen Sie noch mehr tun?
    link:
      label: – Dann unterstützen Sie Greenpeace jetzt auch mit ihrer Spende!
      url: url
  - $name: without opener
    title: title
    copy: copy
    hide_opener: true

// src/components/elements/lightbox/lightbox.html.twig

{#
  Only when there is an opener element, the javascript functionality gets applied
#}

<div class="Lightbox{% if not hide_opener %} js-Lightbox{% endif %}{% if class %} {{ class }}{% endif %}"{% for attribute in data_attributes %} data-{{ attribute.key }}="{{ attribute.value }}"{% endfor %}>
  {% if not hide_opener %}
    {% block opener %}
      <button class="js-Lightbox-opener" type="button">Click to open lightbox</button>
    {% endblock %}
  {% endif %}
  <span class="Lightbox-overlay{% if clickable_overlay %} js-Lightbox-overlay{% endif %}"></span>
  <div class="Lightbox-content{% if wide %} Lightbox-content--wide{% endif %}" role="dialog" aria-labelledby="Lightbox-title-{{ id }}" aria-describedby="Lightbox-copy-{{ id }}" aria-modal="true">
    {% if not hide_close_button %}
      <button class="Lightbox-closeButton js-Lightbox-closeButton u-typo-copy-bold u-brandLink" type="button">
        Schließen
        {% include "@elements/icon/icon.html.twig" with {
          name: "cross",
          class: "Lightbox-closeIcon"
        } only %}
      </button>
    {% endif %}
    {% if image %}
      <img class="Lightbox-img" alt="{{ image.alt }}" height="{{ image.height }}" width="{{ image.width }}" src="{{ image.src }}">
    {% endif %}
    {% if title %}
      <p id="Lightbox-title-{{ id }}" class="Lightbox-title js-Lightbox-title u-typo-headline5">{{ title }}</p>
    {% endif %}
    {% if rendered_content %}
      {{ rendered_content }}
    {% endif %}
    {% if copy %}
      <div id="Lightbox-copy-{{ id }}" class="Lightbox-copy js-Lightbox-copy Rte">{{ copy|raw }}</div>
    {% endif %}
    {% if link %}
      <{% if link.url %}a href="{{ link.url }}" {% else %}button type="button" {% endif %}class="Lightbox-link js-Lightbox-link u-typo-copy-bold u-brandLink">{{ link.label }}</{% if link.url %}a{% else %}button{% endif %}>
    {% endif %}
    {% if footer %}
      <div class="Lightbox-footer Rte">{{ footer }}</div>
    {% endif %}
  </div>
</div>