Replace 'palletes' with 'colours' which is a bit more intuitive and is also spelt correctly.

This commit is contained in:
Brabli
2023-05-30 17:18:33 +01:00
parent b66e7821a7
commit 633e4a284e
7 changed files with 50 additions and 52 deletions

View File

@@ -14,7 +14,7 @@ Example config:
pcm_icon: pcm_icon:
directories: directories:
- '%kernel.project_dir%/public/icons' - '%kernel.project_dir%/public/icons'
palletes: colours:
primary: primary:
fill: 'fill-primary' fill: 'fill-primary'
stroke: 'stroke-primary' stroke: 'stroke-primary'
@@ -33,10 +33,10 @@ pcm_icon:
`directories` - Which directories to look in for icons. `directories` - Which directories to look in for icons.
`palletes` - Custom colour palletes to use when colouring icons. Because this extension relies on Tailwind classes for colouring we must specify all the classes. This is annoyingly verbose, but you can just copy this template: `colours` - Custom colours to use when colouring icons. Because this extension relies on Tailwind classes for colouring we must specify all the classes. This is a bit awkward, but you can just copy this template replacing COLOUR as appropriate:
```yaml ```yaml
PALLETE_NAME: COLOUR:
fill: 'fill-COLOUR' fill: 'fill-COLOUR'
stroke: 'stroke-COLOUR' stroke: 'stroke-COLOUR'
fill-hover: 'hover:fill-COLOUR' fill-hover: 'hover:fill-COLOUR'
@@ -53,7 +53,7 @@ PALLETE_NAME:
`size (int)` Size of the icon in pixels `size (int)` Size of the icon in pixels
`colour (string)` Name of the main colour pallete to use. Defaults to `"primary"`, which is a pallete that uses the project's primary colour. If however you are not using `primary` to set a Tailwind primary colour in your project, you can instead set the default colour of the icon by changing what colour classes the primary pallete uses. EG: `colour (string)` Name of the colour to use. Defaults to `primary` as it assumes you have a Tailwind colour set up called `primary`. If however you are not using `primary` to set a Tailwind primary colour in your project, you can instead set the default colour of the icon by changing what colour classes the primary colour uses. EG:
```yaml ```yaml
primary: primary:
fill: 'fill-purple-700' fill: 'fill-purple-700'
@@ -64,9 +64,9 @@ primary:
stroke-group-hover: 'group-hover:stroke-purple-700' stroke-group-hover: 'group-hover:stroke-purple-700'
``` ```
`hover (string)` Name of the colour pallete to use when the icon is hovered over `hover (string)` Name of the colour to use when the icon is hovered over
`classes (string[])` Additional classes to add to the icon. This can cause Tailwind class collisions, so use with caution if at all. `classes (string[])` Additional classes to add to the icon. This can cause Tailwind class collisions, so only use it as a last resort.
## Reminders ## Reminders
Remember to add `./config/packages/*.yaml` as a value in your Tailwind config content array if it does not already exist. This will ensure Tailwind classes inside of the config file get compiled. Remember to add `./config/packages/*.yaml` as a value in your Tailwind config content array if it does not already exist. This will ensure Tailwind classes inside of the config file get compiled.

View File

@@ -2,18 +2,16 @@ when@dev:
pcm_icon: pcm_icon:
directories: directories:
- '%kernel.project_dir%/public/icons' - '%kernel.project_dir%/public/icons'
palletes: [] colours: []
when@prod: when@prod:
pcm_icon: pcm_icon:
directories: directories:
- '%kernel.project_dir%/public/icons' - '%kernel.project_dir%/public/icons'
palletes: [] colours: []
when@test: when@test:
pcm_icon: pcm_icon:
directories: directories:
- '%kernel.project_dir%/tests/icons' - '%kernel.project_dir%/tests/icons'
palletes: colours: []
- []

View File

@@ -19,7 +19,7 @@ class Configuration implements ConfigurationInterface
->arrayNode('directories') ->arrayNode('directories')
->scalarPrototype()->end() ->scalarPrototype()->end()
->end() ->end()
->arrayNode('palletes') // Akshewally it is defined ->arrayNode('colours') // Akshewally it is defined
->variablePrototype()->end() ->variablePrototype()->end()
->end() ->end()
->end() ->end()

View File

@@ -26,6 +26,6 @@ class PcmIconExtension extends Extension
$definition = $container->getDefinition('pcm_icon.icon_extension'); $definition = $container->getDefinition('pcm_icon.icon_extension');
$definition->addArgument($config['directories']); $definition->addArgument($config['directories']);
$definition->addArgument($config['palletes']); $definition->addArgument($config['colours']);
} }
} }

View File

@@ -20,29 +20,29 @@ final class IconExtension extends AbstractExtension
'classes' => [], 'classes' => [],
]; ];
public function __construct(private array $directories, private array $palletes) public function __construct(private array $directories, private array $colours)
{ {
if (empty($this->palletes)) { if (empty($this->colours)) {
throw new \InvalidArgumentException('Palletes array must contain at least one pallet!'); throw new \InvalidArgumentException('Colours array must contain at least one colour!');
} }
$palletesContainNonarray = array_reduce($this->palletes, $coloursContainsNonArray = array_reduce($this->colours,
fn($notArray, $path) => $notArray || !is_array($path)); fn($notArray, $path) => $notArray || !is_array($path));
if ($palletesContainNonarray) { if ($coloursContainsNonArray) {
throw new \TypeError('Palletes array must only contain arrays!'); throw new \TypeError('Colours array must only contain arrays!');
} }
foreach ($this->palletes as $pallete) { foreach ($this->colours as $colour) {
if (!( if (!(
array_key_exists('stroke', $pallete) && array_key_exists('stroke', $colour) &&
array_key_exists('fill', $pallete) && array_key_exists('fill', $colour) &&
array_key_exists('fill-hover', $pallete) && array_key_exists('fill-hover', $colour) &&
array_key_exists('stroke-hover', $pallete) && array_key_exists('stroke-hover', $colour) &&
array_key_exists('fill-group-hover', $pallete) && array_key_exists('fill-group-hover', $colour) &&
array_key_exists('stroke-group-hover', $pallete)) array_key_exists('stroke-group-hover', $colour))
) { ) {
throw new \Exception('Palletes must contain a "stroke" and "fill" key!'); throw new \Exception('Colours must contain a "stroke" and "fill" key!');
} }
} }
} }
@@ -66,8 +66,8 @@ final class IconExtension extends AbstractExtension
* 'icon' => (string) REQUIRED Which icon to use * 'icon' => (string) REQUIRED Which icon to use
* 'title' => (?string) Text to appear on mouse hover * 'title' => (?string) Text to appear on mouse hover
* 'size' => (int) Height and width in px * 'size' => (int) Height and width in px
* 'colour' => (string) Main colour pallete * 'colour' => (string) Main colour
* 'hover' => (?string) Hover colour pallete * 'hover' => (?string) Hover colour
* 'classes' => (array) Additional classes to add to the icon. * 'classes' => (array) Additional classes to add to the icon.
* Use with caution as this can potentially * Use with caution as this can potentially
* cause Tailwind class conflicts! * cause Tailwind class conflicts!
@@ -159,24 +159,24 @@ final class IconExtension extends AbstractExtension
private function getColourClasses(string $primaryColour, ?string $hoverColour): string private function getColourClasses(string $primaryColour, ?string $hoverColour): string
{ {
$mainPallete = $this->getPallete($primaryColour); $mainColour = $this->getColour($primaryColour);
$colourClasses = "{$mainPallete['stroke']} {$mainPallete['fill']}"; $colourClasses = "{$mainColour['stroke']} {$mainColour['fill']}";
if (null !== $hoverColour) { if (null !== $hoverColour) {
$hoverPallete = $this->getPallete($hoverColour); $hoverColour = $this->getColour($hoverColour);
$colourClasses .= " cursor-pointer {$hoverPallete['stroke-hover']} {$hoverPallete['fill-hover']} {$hoverPallete['stroke-group-hover']} {$hoverPallete['fill-group-hover']}"; $colourClasses .= " cursor-pointer {$hoverColour['stroke-hover']} {$hoverColour['fill-hover']} {$hoverColour['stroke-group-hover']} {$hoverColour['fill-group-hover']}";
} }
return $colourClasses; return $colourClasses;
} }
private function getPallete(string $palleteName): array private function getColour(string $colourName): array
{ {
if (array_key_exists($palleteName, $this->palletes)) { if (array_key_exists($colourName, $this->colours)) {
return $this->palletes[$palleteName]; return $this->colours[$colourName];
} }
throw new PalleteNotFound("The pallete '$palleteName' was not found!"); throw new ColourNotFound("The colour \"$colourName\" was not found!");
} }
private function addClassesToSvg(string $svg, string $classes): string private function addClassesToSvg(string $svg, string $classes): string
@@ -239,4 +239,4 @@ final class IconExtension extends AbstractExtension
class IconNotFound extends \Exception {}; class IconNotFound extends \Exception {};
class PalleteNotFound extends \Exception {}; class ColourNotFound extends \Exception {};

View File

@@ -48,7 +48,7 @@ class ConfigurationTest extends TestCase
'./', './',
], ],
'palletes' => [ 'colours' => [
'primary' => [ 'primary' => [
'fill' => 'fill-primary', 'fill' => 'fill-primary',
'stroke' => 'stroke-primary', 'stroke' => 'stroke-primary',

View File

@@ -6,14 +6,14 @@ namespace Pcm\IconBundle\Tests\Twig\Functions;
use Pcm\IconBundle\Twig\Functions\IconExtension; use Pcm\IconBundle\Twig\Functions\IconExtension;
use Pcm\IconBundle\Twig\Functions\IconNotFound; use Pcm\IconBundle\Twig\Functions\IconNotFound;
use Pcm\IconBundle\Twig\Functions\PalleteNotFound; use Pcm\IconBundle\Twig\Functions\ColourNotFound;
use PHPUnit\Framework\TestCase; use PHPUnit\Framework\TestCase;
class IconExtensionTest extends TestCase class IconExtensionTest extends TestCase
{ {
private const ICON = 'test'; private const ICON = 'test';
private const PALLETES = [ private const COLOURS = [
'primary' => [ 'primary' => [
'fill' => 'fill-primary', 'fill' => 'fill-primary',
'stroke' => 'stroke-primary', 'stroke' => 'stroke-primary',
@@ -39,7 +39,7 @@ class IconExtensionTest extends TestCase
protected function setUp(): void protected function setUp(): void
{ {
$this->icon = new IconExtension(['tests/icons'], self::PALLETES); $this->icon = new IconExtension(['tests/icons'], self::COLOURS);
} }
public function testInstanceOf(): void public function testInstanceOf(): void
@@ -151,19 +151,19 @@ class IconExtensionTest extends TestCase
$this->assertSame(1, $timesMatched); $this->assertSame(1, $timesMatched);
} }
public function testThrowsIfPalletsIsEmpty(): void public function testThrowsIfColoursIsEmpty(): void
{ {
$this->expectException(\InvalidArgumentException::class); $this->expectException(\InvalidArgumentException::class);
new IconExtension(['/'], []); new IconExtension(['/'], []);
} }
public function testThrowsIfPalletesContainsNonArray(): void public function testThrowsIfColoursContainsNonArray(): void
{ {
$this->expectException(\TypeError::class); $this->expectException(\TypeError::class);
new IconExtension(['/'], [99]); new IconExtension(['/'], [99]);
} }
public function testThrowsIfPalletesContainsNonArrayInbetweenArrays(): void public function testThrowsIfColoursContainsNonArrayInbetweenArrays(): void
{ {
$this->expectException(\TypeError::class); $this->expectException(\TypeError::class);
new IconExtension(['/'], [[], 99, []]); new IconExtension(['/'], [[], 99, []]);
@@ -241,26 +241,26 @@ class IconExtensionTest extends TestCase
$this->assertDoesNotMatchRegularExpression('/fill:\s*rgb\(0,\s*0,\s*0\)\s*/', $content); $this->assertDoesNotMatchRegularExpression('/fill:\s*rgb\(0,\s*0,\s*0\)\s*/', $content);
} }
public function testThrowsIfColourPalleteIsNotFound(): void public function testThrowsIfColourIsNotFound(): void
{ {
$this->expectException(PalleteNotFound::class); $this->expectException(ColourNotFound::class);
$this->icon->renderIcon(['icon' => self::ICON, 'colour' => 'red']); $this->icon->renderIcon(['icon' => self::ICON, 'colour' => 'red']);
} }
public function testSvgClassContainsPalleteClasses(): void public function testSvgClassContainsColourClasses(): void
{ {
$contents = $this->icon->renderIcon(['icon' => self::ICON, 'colour' => 'white']); $contents = $this->icon->renderIcon(['icon' => self::ICON, 'colour' => 'white']);
$this->assertMatchesRegularExpression('/<svg.*?class=".*?fill-white.*?>/', $contents); $this->assertMatchesRegularExpression('/<svg.*?class=".*?fill-white.*?>/', $contents);
$this->assertMatchesRegularExpression('/<svg.*?class=".*?stroke-white?.*>/', $contents); $this->assertMatchesRegularExpression('/<svg.*?class=".*?stroke-white?.*>/', $contents);
} }
public function testThrowsIfHoverPalleteIsNotFound(): void public function testThrowsIfHoverColourIsNotFound(): void
{ {
$this->expectException(PalleteNotFound::class); $this->expectException(ColourNotFound::class);
$this->icon->renderIcon(['icon' => self::ICON, 'hover' => 'red']); $this->icon->renderIcon(['icon' => self::ICON, 'hover' => 'red']);
} }
public function testSvgClassContainsHoverPalleteClasses(): void public function testSvgClassContainsHoverColourClasses(): void
{ {
$contents = $this->icon->renderIcon(['icon' => self::ICON, 'hover' => 'white']); $contents = $this->icon->renderIcon(['icon' => self::ICON, 'hover' => 'white']);
$this->assertMatchesRegularExpression('/<svg.+class=".*cursor-pointer.*".*>/', $contents); $this->assertMatchesRegularExpression('/<svg.+class=".*cursor-pointer.*".*>/', $contents);
@@ -270,7 +270,7 @@ class IconExtensionTest extends TestCase
$this->assertMatchesRegularExpression('/<svg.+class=".*group-hover:stroke-white.*".*>/', $contents); $this->assertMatchesRegularExpression('/<svg.+class=".*group-hover:stroke-white.*".*>/', $contents);
} }
public function testSvgClassContainsHoverAndColourPalleteClasses(): void public function testSvgClassContainsHoverAndColourClasses(): void
{ {
$contents = $this->icon->renderIcon(['icon' => self::ICON, 'hover' => 'white', 'colour' => 'primary']); $contents = $this->icon->renderIcon(['icon' => self::ICON, 'hover' => 'white', 'colour' => 'primary']);
$this->assertMatchesRegularExpression('/<svg.+class=".*fill-primary.*".*>/', $contents); $this->assertMatchesRegularExpression('/<svg.+class=".*fill-primary.*".*>/', $contents);