dialog

Dialog

The dialog uses the popover API. The <dialog id="{id}"> can be opened or closed by adding popovertarget="{id}" to a <button>.

Information

Folder
src/components/elements/dialog

Files

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

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/dialog
additionalProperties: false
type: object
required:
  - close_label
  - content
  - id
  - title
properties:
  close_label:
    type: string
  content:
    type: string
    format: html
  id:
    type: string
  title:
    type: string
  open_label:
    type: string
  is_modal:
    type: boolean
Mocks 
// src/components/elements/dialog/mocks.yaml

close_label: Close
content:
  $tpl: patterns/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_label: open
title: The dialog heading
$variants:
  - $name: non-modal dialog
    is_modal: false
Template 
// src/components/elements/dialog/dialog.twig

{% set dialog_id = id ~ "-dialog" %}

<cd-dialog id="{{ id }}">
	{% if open_label %}
		<button popovertarget="{{ dialog_id }}">{{ open_label }}</button>
	{% endif %}
	<dialog
		class="Dialog"
		aria-labelledby="{{ id }}-title"
		popover
		id="{{ dialog_id }}"
		{% if is_modal|default(true) %}data-modal="true"{% endif %}
	>
		<header class="Dialog-header">
			<h2 class="Dialog-heading" id="{{ id }}-title">{{ title }}</h2>
			<button class="Dialog-close" type="button" popovertarget="{{ dialog_id }}" aria-label="{{ close_label }}">
				{% include "@elements/icon/icon.twig" with {
					name: "close",
				} only %}
			</button>
		</header>
		<div class="Dialog-content">
			{{ content }}
		</div>
	</dialog>
</cd-dialog>

Variants

default
Open
non-modal dialog
Open