dialog

Dialog

The dialog can be opened by adding data-dialog="<ID>" to a <button>. Alternatively it can also be rendered open by default by passing open: true.

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
  open:
    type: boolean
  title:
    type: string
  hidden_title:
    type: boolean
  full_size_mobile:
    type: boolean
    description: >-
      Full size on mobile (used to display images in the biggest possible size
      on mobile)
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: true
title: The dialog heading
$variants:
  - $name: Full size on mobile
    full_size_mobile: true
Template 
// src/components/elements/dialog/dialog.twig

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

Variants

default
Open

The dialog heading

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.

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.

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.
Full size on mobile
Open

The dialog heading

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.

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.

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.