Add actual badge classes to bundle
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
<div class="text-2xl {{ this.colour == 'red' ? 'text-red-700' : 'text-blue-700' }}">
|
<div class="{{ this.finalClasses }}">
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
46
src/Enum/Badge.php
Normal file
46
src/Enum/Badge.php
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
namespace Pcm\BadgeBundle\Enum;
|
||||||
|
|
||||||
|
use Pcm\BadgeBundle\Model\BadgePalette;
|
||||||
|
|
||||||
|
enum Badge
|
||||||
|
{
|
||||||
|
case AMBER;
|
||||||
|
case BLACK;
|
||||||
|
case BLUE;
|
||||||
|
case DEFAULT;
|
||||||
|
case FOREST;
|
||||||
|
case GREEN;
|
||||||
|
case GREY;
|
||||||
|
case MAROON;
|
||||||
|
case OCHRE;
|
||||||
|
case ORANGE;
|
||||||
|
case RED;
|
||||||
|
case ROSE;
|
||||||
|
case STRIPE;
|
||||||
|
case YELLOW;
|
||||||
|
|
||||||
|
public function getPalette(): BadgePalette
|
||||||
|
{
|
||||||
|
return match ($this) {
|
||||||
|
$this::RED => new BadgePalette('text-red-600', 'border-red-600', 'bg-red-600'),
|
||||||
|
$this::MAROON => new BadgePalette('text-red-900', 'border-red-900', 'bg-red-900'),
|
||||||
|
$this::BLUE => new BadgePalette('text-sky-700', 'border-sky-700', 'bg-sky-700'),
|
||||||
|
$this::FOREST => new BadgePalette('text-green-800', 'border-green-800', 'bg-green-800'),
|
||||||
|
$this::GREEN => new BadgePalette('text-green-600', 'border-green-600', 'bg-green-600'),
|
||||||
|
$this::OCHRE => new BadgePalette('text-yellow-800', 'border-yellow-800', 'bg-yellow-800'),
|
||||||
|
$this::ORANGE => new BadgePalette('text-orange-500', 'border-orange-500', 'bg-orange-500'),
|
||||||
|
$this::AMBER => new BadgePalette('text-amber-500', 'border-amber-500', 'bg-amber-500'),
|
||||||
|
$this::ROSE => new BadgePalette('text-rose-600', 'border-rose-600', 'bg-rose-600'),
|
||||||
|
$this::GREY => new BadgePalette('text-neutral-400', 'border-neutral-400', 'bg-neutral-400'),
|
||||||
|
$this::YELLOW => new BadgePalette('text-yellow-500', 'border-yellow-500', 'bg-yellow-500'),
|
||||||
|
$this::STRIPE => new BadgePalette('text-indigo-500', 'border-indigo-500', 'bg-indigo-500'),
|
||||||
|
$this::BLACK => new BadgePalette('text-zinc-100', 'border-zinc-900', 'bg-zinc-900'),
|
||||||
|
$this::DEFAULT => new BadgePalette('text-primary', 'border-primary', 'bg-primary'),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
16
src/Interface/BadgeableInterface.php
Normal file
16
src/Interface/BadgeableInterface.php
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
namespace Pcm\BadgeBundle\Interface;
|
||||||
|
|
||||||
|
use Pcm\BadgeBundle\Enum\Badge;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enables this class to be rendered as a badge using the Badge and BadgeOutline Twig components.
|
||||||
|
*/
|
||||||
|
interface BadgeableInterface
|
||||||
|
{
|
||||||
|
public function getBadgeColour(): Badge;
|
||||||
|
}
|
||||||
|
|
||||||
19
src/Model/BadgePalette.php
Normal file
19
src/Model/BadgePalette.php
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
namespace Pcm\BadgeBundle\Model;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Contains the main colour classes for a badge.
|
||||||
|
*/
|
||||||
|
final readonly class BadgePalette
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* @param string $textColourClass Text colour Tailwind class
|
||||||
|
* @param string $borderColourClass Border colour Tailwind class
|
||||||
|
* @param string $backgroundColourClass Background colour Tailwind class
|
||||||
|
*/
|
||||||
|
public function __construct(public string $textColourClass, public string $borderColourClass, public string $backgroundColourClass)
|
||||||
|
{}
|
||||||
|
}
|
||||||
@@ -4,11 +4,21 @@ declare(strict_types=1);
|
|||||||
|
|
||||||
namespace Pcm\BadgeBundle\Twig\Component;
|
namespace Pcm\BadgeBundle\Twig\Component;
|
||||||
|
|
||||||
|
use Pcm\BadgeBundle\Interface\BadgeableInterface;
|
||||||
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
|
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
|
||||||
|
|
||||||
#[AsTwigComponent(name: 'Pcm:Badge', template: "@PcmBadge/components/Badge.html.twig")]
|
#[AsTwigComponent(name: 'Pcm:Badge', template: "@PcmBadge/components/Badge.html.twig")]
|
||||||
final class Badge
|
final class Badge
|
||||||
{
|
{
|
||||||
public string $colour;
|
public string $baseClasses = 'rounded text-xs px-2 py-1 border min-w-max';
|
||||||
|
|
||||||
|
public string $finalClasses = '';
|
||||||
|
|
||||||
|
public function mount(BadgeableInterface $object): void
|
||||||
|
{
|
||||||
|
$palette = $object->getBadgeColour()->getPalette();
|
||||||
|
|
||||||
|
$this->finalClasses = sprintf('text-white %s %s %s', $palette->borderColourClass, $palette->backgroundColourClass, $this->baseClasses);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user