status-messages

// src/components/elements/status-messages/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/status-messages
additionalProperties: false
type: object
required:
  - headings
  - list
properties:
  headings:
    type: object
    properties:
      status:
        type: string
      warning:
        type: string
      error:
        type: string
  list:
    type: array
    items:
      type: object
      properties:
        type:
          type: string
          enum:
            - status
            - warning
            - error
        messages:
          type: array
          items:
            type: string

// src/components/elements/status-messages/mocks.yaml

headings:
  status: Status
  warning: Warning
  error: Error
list:
  - type: status
    messages:
      - >-
        Laborum consequat <strong>labore aliqua</strong> do pariatur magna
        aliquip irure in ea.
      - >-
        Culpa <a href="/">occaecat officia</a> magna aliqua <em>fugiat
        aliqua</em> ut id.
  - type: warning
    messages:
      - >-
        Laborum consequat <strong>labore aliqua</strong> do pariatur magna
        aliquip irure in ea.
      - >-
        Culpa <a href="/">occaecat officia</a> magna aliqua <em>fugiat
        aliqua</em> ut id.
  - type: error
    messages:
      - >-
        Laborum consequat <strong>labore aliqua</strong> do pariatur magna
        aliquip irure in ea.
      - >-
        Culpa <a href="/">occaecat officia</a> magna aliqua <em>fugiat
        aliqua</em> ut id.

// src/components/elements/status-messages/status-messages.twig

<section class="StatusMessages">
	{% for entry in list %}
		<div
			class="StatusMessages-container StatusMessages-container--{{ entry.type }}"
			role="{{ entry.type == "error" ? "alert" : "status" }}"
		>
			{% set content %}
				{% if headings[entry.type] %}
					<h2 class="h5">{{ headings[entry.type] }}</h2>
				{% endif %}

				{% if entry.messages|length > 1 %}
					<ul class="StatusMessages-content">
						{% for message in entry.messages %}
							<li>
								<p>{{ message|raw }}</p>
							</li>
						{% endfor %}
					</ul>
				{% else %}
					<div class="StatusMessages-content">
						{{ entry.messages|first|raw }}
					</div>
				{% endif %}
			{% endset %}

			{% include "@patterns/rich-text/rich-text.twig" with {
				content: content,
			} only %}
		</div>
	{% endfor %}
</section>