cookie-consent

// src/components/template-components/cookie-consent/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: patterns/cookie-consent

// src/components/template-components/cookie-consent/cookie-consent.twig

{{ attach_library('finstral_global/template-components-cookie-consent') }}

{% set options = [{
  disabled: true,
	id: "consent-option-necessary",
  name: "necessary",
	label: "cookie_consent.label.necessary"|t
}, {
	id: "consent-option-preferences",
  name: "preferences",
	label: "cookie_consent.label.preferences"|t
}, {
	id: "consent-option-statistics",
	name: "statistics",
	label: "cookie_consent.label.statistics"|t
}, {
	id: "consent-option-marketing",
	name: "marketing",
	label: "cookie_consent.label.marketing"|t
}] %}


<cookie-consent
	class="u-container CookieConsent"
	error-msg="{{ "cookie_consent.error_message"|t }}"
	success-msg="{{ "cookie_consent.success_message"|t }}"
>
	<aside aria-label="{{ "cookie_consent.heading"|t }}" class="CookieConsent-container">
		{% include "@elements/notecard/notecard.twig" with {
			classes: ["CookieConsent-feedbackMsg"],
			hidden: true,
			text: "",
		} only %}

		<p class="CookieConsent-status" role="status">
			{{ "cookie_consent.consent_status"|t }}
			<span id="active-statuses"></span>
		</p>

		<ul class="CookieConsent-options">
			{% for option in options %}
				<li class="CookieConsent-option">
					<label class="CookieConsent-optionLabel" for="{{ option.id }}">
						{% include "@elements/form-element/option/option.twig" with {
							disabled: option.disabled,
							id: option.id,
							name: option.name,
							type: "checkbox",
							value: option.name
						} only %}
						<span>{{ option.label }}</span>
					</label>
				</li>
			{% endfor %}
		</ul>

		{% include "@elements/button/button.twig" with {
			classes: ["CookieConsent-button"],
			label: "cookie_consent.button_label"|t
		} only %}
	</aside>
</cookie-consent>