social-share

// src/components/patterns/social-share/social-share.twig

{{ attach_library("circle_dot/pattern-social-share") }}

{% set social_share_config = {
	services: [
		{
			name: "linkedin",
			label: "LinkedIn",
			url: "https://www.linkedin.com/sharing/share-offsite/?url={{ url }}",
		},
		{
			name: "facebook",
			label: "Facebook",
			url: "https://www.facebook.com/sharer/sharer.php?u={{ url }}",
		},
		{
			name: "twitter",
			label: "Twitter",
			url: "https://twitter.com/intent/tweet?url={{ url }}",
		},
		{
			name: "whatsapp",
			label: "WhatsApp",
			url: "https://wa.me/?text={{ url }}",
		},
		{
			name: "mail",
			label: "E-Mail",
			url: "mailto:?subject=Hier ist ein interessanter Artikel für Sie&body={{ url }}",
		},
	],
} %}

{% set social_share_card_id = "social-share-card-" ~ random() %}

<social-share class="SocialShare">
	{# TODO: Translate #}
	{% include "@elements/button/button.twig" with {
		additional_attributes: [["aria-expanded", "false"], ["aria-controls", social_share_card_id], ["aria-haspopup", "dialog"]],
		classes: ["SocialShare-toggle", "js-SocialShare-toggle"],
		label: "Artikel teilen",
		icon: "chevron",
		icon_position: "right",
		modifiers: ["quaternary"],
	} only %}

	<div class="SocialShare-card js-SocialShare-card" id="{{ social_share_card_id }}" tabindex="-1" hidden>
		<ul class="SocialShare-list">
			{% for service in social_share_config.services %}
				<li class="SocialShare-item">
					<a class="SocialShare-link" href="{{ service.url }}" target="_blank" rel="noopener noreferrer">
						{% include "@elements/icon/icon.twig" with {
						name: service.name,
					} only %}
						{{ service.label }}
					</a>
				</li>
			{% endfor %}
		</ul>
	</div>
</social-share>