alert-box

// src/components/elements/alert-box/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: https://finstral.com/elements/alert-box
type: object
required:
  - end_date
  - message
  - start_date
properties:
  dismissible:
    type: boolean
  end_date:
    type: string
  message:
    type: string
  start_date:
    type: string
  tone:
    type: string
    enum:
      - critical
      - info
      - success
      - warning

// src/components/elements/alert-box/mocks.yaml

dismissible: false
end_date: '2024-12-24T00:00:00Z'
message: >-
  Due to maintenance work, the Finstral Cloud will be unavailable from 7 am to
  12 noon on 23.12.24. We apologise for any inconvenience caused. Thank you for
  your understanding!
start_date: '2024-12-18T00:00:00Z'
tone: warning

// src/components/elements/alert-box/alert-box.twig

{{ attach_library('finstral_global/element-alert-box') }}

{# returns the value of tone if it is defined and not null, 'info' otherwise #}
{% set current_tone = tone ?? "info" %}

{# The fallback dates are temporary and should be removed when used as a general purpose component.
   see: https://factorial-io.atlassian.net/browse/FINSTRAL-464 #}
{% set current_end_date = end_date ?? "2025-02-28T00:00:00Z" %}
{% set current_start_date = start_date ?? "2025-02-24T00:00:00Z" %}

{% set icons = {
	"critical": "error",
	"info": "info",
	"success": "check_circle",
	"warning": "warning",
} %}

<alert-box
	class="AlertBox AlertBox--{{ current_tone }}"
	start-date="{{ current_start_date }}"
	end-date="{{ current_end_date }}"
	{# if the dismissible variable is set, the dismissible attribute is added to the alert box #}
	{% if dismissible %} dismissible {% endif %}
	hidden>
		<div class="AlertBox-messageContainer">
			<div class="AlertBox-icon">
				{% include "@elements/icon/icon.twig" with {
					name: icons[current_tone],
				} only %}
			</div>
			<span class="AlertBox-message">{{ message }}</span>
		</div>

		{# @TODO: The dismissible functionality is not yet implemented #}
		{% if dismissible %}
			<button class="AlertBox-close" type="button">
			<span class="visually-hidden">{{ "global.close_button"|tc }}</span>
				{% include "@elements/icon/icon.twig" with {
					name: "close",
				} only %}
			</button>
		{% endif %}
</alert-box>