// src/components/elements/dialog/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/dialog
additionalProperties: false
type: object
required:
  - id
  - dialog_headline
properties:
  id:
    type: string
  dialog_headline:
    type: string
    format: html
  dialog_subline:
    type: string
  dialog_copy:
    type: string
    format: html
  dialog_button:
    $ref: /elements/button
  dialog_image:
    type: string
    format: html
  is_open:
    type: boolean

// src/components/elements/dialog/mocks.yaml

id: dialog-id
is_open: true
dialog_headline: >-
  Hier steht eine <span class="Stage-supporter is-hidden"></span> längere
  Headline mit drei Zeilen Textinhalt
dialog_subline: Das ist eine optionale Subline.
dialog_copy: >-
  <p>Nisi ullamco tempor tempor nulla labore ad labore sit eu duis. Ut et esse
  cupidatat consequat ea exercitation. Nisi ullamco tempor tempor nulla labore
  ad labore sit eu duis. Ut et esse cupidatat cons.</p>
dialog_image:
  $ref: elements/image#stage
  $tpl: elements/image
  id: 30
dialog_button:
  label: Weitere Infos zu Meeren
  url: '#url'

// src/components/elements/dialog/dialog.html.twig

<dialog id="{{ id }}" class="Dialog">
  <button type="button" class="Dialog-close" onclick="this.closest('dialog').close();">
    Schließen
    {% include "@elements/icon/icon.html.twig" with {
      name: "cross"
    } only %}
  </button>
  <div class="Dialog-content">
    {% include "@patterns/stage/stage.html.twig" with {
      headline: dialog_headline,
      subline: dialog_subline,
      copy: dialog_copy,
      button: dialog_button,
      image: dialog_image,
    } only %}
  </div>
</dialog>

{% if is_open %}
  <script>
    document.getElementById("{{ id }}").showModal();
  </script>
{% endif %}

<script>
  document.getElementById("{{ id }}").querySelector('.Stage-button').onclick = function() { this.closest('dialog').close(); };
</script>