IBX-7844: Tag component (#50)

Author: albozek

src/bundle/Resources/views/themes/standard/design_system/components/tag.html.twig

@@ -0,0 +1,53 @@
+{% set tag_classes =
+    html_cva(
+        base: html_classes(
+            'ids-tag',
+            {
+                'ids-tag--dark': isDark,
+            },
+        ),
+        variants: {
+            type: {
+                primary: 'ids-tag--primary',
+                success: 'ids-tag--success',
+                info: 'ids-tag--info',
+                warning: 'ids-tag--warning',
+                error: 'ids-tag--error',
+                neutral: 'ids-tag--neutral',
+                'icon-tag': 'ids-tag--icon-tag',
+                'primary-alt': 'ids-tag--primary-alt',
+                'success-ghost': 'ids-tag--success-ghost',
+                'error-ghost': 'ids-tag--error-ghost',
+                'neutral-ghost': 'ids-tag--neutral-ghost',
+            },
+            size: {
+                medium: 'ids-tag--medium',
+                small: 'ids-tag--small',
+            },
+        },
+    )
+%}
+
+<div
+    class="{{
+        tag_classes.apply(
+            {
+                type,
+                size
+            },
+            attributes.render('class')
+        )
+    }}"
+>
+    {% if is_ghost_type %}
+        <div class="ids-tag__ghost-dot"></div>
+    {% endif %}
+    {% if icon %}
+        <div class="ids-tag__icon">
+            <twig:ibexa:icon name="{{ icon }}" size="small" />
+        </div>
+    {% endif %}
+    <div className="ids-tag__content">
+        {{ block('content') }}
+    </div>
+</div>

src/lib/Twig/Components/Tag.php

@@ -0,0 +1,63 @@
+<?php
+
+/**
+ * @copyright Copyright (C) Ibexa AS. All rights reserved.
+ * @license For full copyright and license information view LICENSE file distributed with this source code.
+ */
+declare(strict_types=1);
+
+namespace Ibexa\DesignSystemTwig\Twig\Components;
+
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+use Symfony\UX\TwigComponent\Attribute\PreMount;
+
+#[AsTwigComponent('ibexa:tag')]
+final class Tag
+{
+    public string $size = 'medium';
+
+    public string $type = 'primary';
+
+    public bool $isDark = false;
+
+    public string $icon = '';
+
+    /** @var string[] */
+    private static array $ghostTypes = ['success-ghost', 'error-ghost', 'neutral-ghost'];
+
+    /**
+     * @param array<string, mixed> $props
+     *
+     * @return array<string, mixed>
+     */
+    #[PreMount]
+    public function validate(array $props): array
+    {
+        $resolver = new OptionsResolver();
+        $resolver->setIgnoreUndefined();
+        $resolver
+            ->define('size')
+            ->allowedValues('small', 'medium')
+            ->default('medium');
+        $resolver
+            ->define('type')
+            ->allowedValues('primary', 'primary-alt', 'info', 'success', 'warning', 'error', 'neutral', 'icon-tag', ...self::$ghostTypes);
+        $resolver
+            ->define('icon')
+            ->allowedTypes('string');
+        $resolver
+            ->define('isDark')
+            ->allowedTypes('bool')
+            ->default(false);
+
+        return $resolver->resolve($props) + $props;
+    }
+
+    #[ExposeInTemplate('is_ghost_type')]
+    public function isGhostType(): bool
+    {
+        return in_array($this->type, self::$ghostTypes);
+    }
+}