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:
      error:
        type: string
      info:
        type: string
      status:
        type: string
      success:
        type: string
  list:
    type: array
    items:
      type: object
      properties:
        type:
          type: string
          enum:
            - error
            - info
            - status
            - success
        messages:
          type: array
          items:
            type: string

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

headings:
  error: Error
  info: Info
  status: Status
  success: Success
list:
  - type: success
    messages:
      - Laborum consequat labore aliqua do pariatur magna aliquip irure in ea.
      - Culpa occaecat officia magna aliqua fugiat aliqua ut id.
  - type: error
    messages:
      - Laborum consequat labore aliqua do pariatur magna aliquip irure in ea.
      - Culpa occaecat officia magna aliqua fugiat aliqua ut id.
  - type: status
    messages:
      - Laborum consequat labore aliqua do pariatur magna aliquip irure in ea.
      - Culpa occaecat officia magna aliqua fugiat aliqua ut id.

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

<div class="StatusMessages">
	{% for entry in list %}
		<div class="StatusMessages-container StatusMessages-container--{{ entry.type }}"{% if entry.type == "error" %} role="alert"{% endif %}>
				<div class="StatusMessages-messages">
					{% set content %}
						{% if headings[entry.type] %}
							<p class="StatusMessages-heading">
								{{ headings[entry.type] }}
							</p>
						{% endif %}
						{% if entry.messages|length > 1 %}
							<ul>
								{% for message in entry.messages %}
									<li>
										<p>{{ message|raw }}</p>
									</li>
								{% endfor %}
							</ul>
						{% else %}
							<p>{{ entry.messages|first|raw }}</p>
						{% endif %}
					{% endset %}
					{% include "@patterns/rich-text/rich-text.twig" with {
						content: content
					} only %}
				</div>
		</div>
	{% endfor %}
</div>