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

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/dialog
additionalProperties: false
type: object
required:
  - id
  - title
properties:
  content:
    type: string
    format: html
  id:
    type: string
  open:
    type: boolean
  title:
    type: string
  hidden_title:
    type: boolean
  iframe_src:
    type: string
    format: uri-reference

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

content:
  $tpl: elements/rich-text
  content: >-
    <p>Aute duis qui id aliquip ea labore laborum sunt est. Aliquip veniam nisi
    incididunt cillum. Quis ad sit qui cillum do nostrud adipisicing proident.
    Qui sunt proident culpa officia laborum ullamco anim et consequat ex ex
    dolor sunt. Enim pariatur aliquip ipsum culpa veniam tempor cupidatat in
    duis quis. Ullamco laboris nulla amet aliqua irure est id irure sunt. Qui
    deserunt incididunt tempor non ea proident.</p> <p>Qui est nisi est pariatur
    cupidatat cillum proident anim consequat irure est sit nulla. Deserunt
    commodo velit ipsum dolor incididunt aliqua voluptate velit. In ad esse id
    sint nisi commodo ut enim. Cillum laboris incididunt esse consequat
    consequat id cupidatat.</p> <p>Mollit mollit pariatur officia proident amet
    velit proident quis nulla. Nisi esse eu do duis qui irure mollit sint sint
    ad aute irure sit. Eiusmod velit reprehenderit velit ad esse. Nostrud ut id
    eiusmod pariatur anim consectetur reprehenderit est fugiat voluptate est
    elit. Tempor exercitation velit reprehenderit magna nisi deserunt. Laborum
    cillum esse velit do eu eu. Nulla ea laborum sit ipsum ut ullamco ea
    consectetur excepteur.</p>
id: dialog
open: true
title: The dialog heading
$variants:
  - $name: Application form iframe
    iframe_src: /component?file=elements/form&variation=Application%20form
    content: null
    title: Application form
    hidden_title: true
    id: application-form

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

<dialog class="Dialog js-Dialog{% if iframe_src %} Dialog--withIframe{% endif %}" id="{{ id }}"{% if open %} open{% endif %} aria-labelledby="{{ id }}-title">
	<header class="Dialog-header">
		<form method="dialog">
			<button class="Dialog-close" type="submit" aria-label="{{ "dialog.closeButton"|tc }}">
				{% include "@elements/icon/icon.twig" with {
					name: "close",
				} only %}
			</button>
		</form>
		<h2 class="Dialog-heading{% if hidden_title %} u-hiddenVisually{% endif %}" id="{{ id }}-title">{{ title }}</h2>
	</header>
	<div class="Dialog-content js-Dialog-content">
		{% if content %}
			{{ content|raw }}
		{% endif %}
		{% if iframe_src %}
			<iframe src="{{ iframe_src }}" title="{{ title }}" class="Dialog-iframe js-Dialog-iframe" id="{{ id }}-iframe"></iframe>
		{% endif %}
	</div>
</dialog>