alert-box

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

$schema: http://json-schema.org/draft-07/schema
$id: elements/alert-box
type: object
required:
  - message
additionalProperties: false
properties:
  action_icon:
    type: object
    additionalProperties: false
    required:
      - name
    properties:
      name:
        type: string
      position:
        type: string
        enum:
          - start
          - end
        default: end
  has_action:
    type: boolean
    default: false
  dismissible:
    type: boolean
    default: false
  title:
    type: string
  message:
    type: string
  style:
    type: string
    enum:
      - primary
      - secondary
    default: primary
  tone:
    type: string
    enum:
      - critical
      - info
      - success
      - warning
    default: info

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

message: >-
  This is an alert box. It can be used to display important information to the
  user.
$variants:
  - $name: 'Tone: success'
    tone: success
  - $name: 'Tone: warning'
    tone: warning
  - $name: 'Tone: critical'
    tone: critical
  - $name: Dismissable
    dismissible: true
  - $name: With Title
    title: General Notice
  - $name: 'Tone: success'
    title: Success Notice
    tone: success
  - $name: 'Tone: warning'
    title: Warning Notice
    tone: warning
  - $name: 'Tone: critical'
    title: Critical Notice
    tone: critical
  - $name: Dismissable
    dismissible: true
    title: General Notice

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

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

{% set id = "alertbox-" ~ random() %}
{% set has_title = title is defined and title is not empty %}
{% set current_tone = tone ?? 'info' %}

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

{% set dismissible_button %}
<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>
{% endset %}

{% set icon %}
{% include "@elements/icon/icon.twig" with {
		classes: ["AlertBox-icon"],
		name: icons[current_tone],
	} only %}
{% endset %}

{% if has_title %}
	<section aria-labelledby="{{ id }}" class="AlertBox-section AlertBox-style--{{ style ?? 'primary' }}">
		<header class="AlertBox-sectionHeader AlertBox-tone--{{ current_tone }}">
			<h2 id="{{ id }}" class="AlertBox-title">
				{{ icon }}
				{{ title }}
			</h2>

			{% if dismissible %}
				{{ dismissible_button }}
			{% endif %}
		</header>
		<span class="AlertBox-message">{{ message }}</span>
	</section>
{% else %}
	<div class="AlertBox AlertBox-style--{{ style ?? 'primary' }} AlertBox-tone--{{ current_tone }}">
		<span class="AlertBox-message">
			{{ icon }}
			{{ message }}
		</span>

		{% if dismissible %}
			{{ dismissible_button }}
		{% endif %}
	</div>
{% endif %}