Add cursor pointer class on hover

README.md

@@ -1,3 +1,22 @@
 # PCM Icon Bundle
 
 # WIP DON'T USE YET
+
+Example config:
+```yml
+pcm_icon:
+    directories:
+        - '%kernel.project_dir%/public/icons'
+    palletes:
+        primary:
+            stroke: 'stroke-primary'
+            fill: 'fill-primary'
+        white:
+            stroke: 'stroke-white'
+            fill: 'fill-white'
+        red:
+            stroke: 'stroke-red-400'
+            fill: 'fill-red-400'
+```
+
+Remember to add './config/packages/*.yaml' as a value in your Tailwind config content array.

config/services.yaml

@@ -6,16 +6,6 @@ services:
     pcm_icon.icon_extension:
         public: true
         class: Pcm\IconBundle\Twig\Functions\IconExtension
-        args:
-            directories:
-                - '%kernel.project_dir%/public/icons'
-            palletes:
-                - primary:
-                    stroke: stroke-primary,
-                    fill: fill-primary
-                - white:
-                    stroke: stroke-white,
-                    fill: fill-white
 
     Pcm\IconBundle\Twig\Functions\IconExtension:
         public: false

src/Twig/Functions/IconExtension.php

@@ -16,7 +16,8 @@ final class IconExtension extends AbstractExtension
         'icon' => null,
         'title' => null,
         'size' => self::DEFAULT_SIZE,
-        'colour' => 'primary'
+        'colour' => 'primary',
+        'hover' => null
     ];
 
     public function __construct(private array $directories, private array $palletes)
@@ -62,10 +63,11 @@ final class IconExtension extends AbstractExtension
      * @param array $options
      * ```
      * $options = [
-     *     'icon'   => (string) Which icon to use
+     *     'icon'   => (string)  Which icon to use
      *     '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 pallete
+     *     'hover'  => (?string) Hover colour pallete
      * ]
      * ```
      */
@@ -77,10 +79,18 @@ final class IconExtension extends AbstractExtension
         $rawSvgMarkup = $this->getSvgMarkup($iconFilepath);
         $cleanSvgMarkup = $this->cleanSvgMarkup($rawSvgMarkup);
 
-        $mainPallete = $this->getMainPallete($options['colour']);
+        $mainPallete = $this->getPallete($options['colour']);
+
+
+        $colourClasses = "{$mainPallete['stroke']} {$mainPallete['fill']}";
+
+        if (null !== $options['hover']) {
+            $hoverPallete = $this->getPallete($options['hover']);
+            $colourClasses .= " cursor-pointer hover:{$hoverPallete['stroke']} hover:{$hoverPallete['fill']} group-hover:{$hoverPallete['stroke']} group-hover:{$hoverPallete['fill']}";
+        }
 
         $xml = new \SimpleXMLElement($cleanSvgMarkup);
-        $xml = $this->addAttributeToXmlElement($xml, 'class', $mainPallete['stroke'] . ' ' . $mainPallete['fill']);
+        $xml = $this->addAttributeToXmlElement($xml, 'class', $colourClasses);
         $markup = $this->removeXMLDeclaration($xml->saveXML());
 
         if ($this->isNonEmptyString($options['title']))
@@ -126,7 +136,7 @@ final class IconExtension extends AbstractExtension
         return preg_replace('/<title>.*<\/title>/', '', $markup);
     }
 
-    private function getMainPallete(string $palleteName): array
+    private function getPallete(string $palleteName): array
     {
         if (array_key_exists($palleteName, $this->palletes))
             return $this->palletes[$palleteName];
@@ -179,25 +189,15 @@ final class IconExtension extends AbstractExtension
 
     private function removeBlackStrokeAttributes(string $content): string
     {
-        return preg_replace('/stroke="\s*(#0{6}|#000|rgb\(\s*0,\s*0,\s*0\s*\)|black)\s*"/', '', $content);
+        return preg_replace('/stroke(=|:)"?\s*(#0{6}|#000|rgb\(\s*0,\s*0,\s*0\s*\)|black)\s*"?/', '', $content);
     }
 
     private function removeBlackFillAttributes(string $content): string
     {
-        return preg_replace('/fill="\s*(#0{6}|#000|rgb\(\s*0,\s*0,\s*0\s*\)|black)\s*"/', '', $content);
+        return preg_replace('/fill(=|:)"?\s*(#0{6}|#000|rgb\(\s*0,\s*0,\s*0\s*\)|black)\s*"?/', '', $content);
     }
 }
 
 class IconNotFound extends \Exception {};
 
 class PalleteNotFound extends \Exception {};
-
-// class="stroke-neutral-400 fill-neutral-400"
-
-// hover:stroke-ses-highlight
-// group-hover:stroke-ses-highlight
-
-// hover:fill-ses-highlight
-// group-hover:fill-ses-highlight
-
-// cursor-pointer

tests/Twig/Functions/IconExtensionTest.php

@@ -200,6 +200,15 @@ class IconExtensionTest extends TestCase
         $this->assertDoesNotMatchRegularExpression('/stroke="\s*rgb\(0,\s*0,\s*0\)\s*"/', $content);
     }
 
+    public function testBlackStrokeStylesAreRemoved(): void
+    {
+        $content = $this->icon->renderIcon(['icon' => self::ICON]);
+        $this->assertDoesNotMatchRegularExpression('/stroke:\s*#000\s*/', $content);
+        $this->assertDoesNotMatchRegularExpression('/stroke:\s*#000000\s*/', $content);
+        $this->assertDoesNotMatchRegularExpression('/stroke:\s*black\s*/', $content);
+        $this->assertDoesNotMatchRegularExpression('/stroke:\s*rgb\(0,\s*0,\s*0\)\s*/', $content);
+    }
+
     public function testBlackFillAttributeValuesAreRemoved(): void
     {
         $content = $this->icon->renderIcon(['icon' => self::ICON]);
@@ -209,7 +218,16 @@ class IconExtensionTest extends TestCase
         $this->assertDoesNotMatchRegularExpression('/fill="\s*rgb\(0,\s*0,\s*0\)\s*"/', $content);
     }
 
-    public function testThrowsIfPalleteIsNotFound(): void
+    public function testBlackFillStylesAreRemoved(): void
+    {
+        $content = $this->icon->renderIcon(['icon' => self::ICON]);
+        $this->assertDoesNotMatchRegularExpression('/fill:\s*#000\s*/', $content);
+        $this->assertDoesNotMatchRegularExpression('/fill:\s*#000000\s*/', $content);
+        $this->assertDoesNotMatchRegularExpression('/fill:\s*black\s*/', $content);
+        $this->assertDoesNotMatchRegularExpression('/fill:\s*rgb\(0,\s*0,\s*0\)\s*/', $content);
+    }
+
+    public function testThrowsIfColourPalleteIsNotFound(): void
     {
         $this->expectException(PalleteNotFound::class);
         $this->icon->renderIcon(['icon' => self::ICON, 'colour' => 'red']);
@@ -222,5 +240,31 @@ class IconExtensionTest extends TestCase
         $this->assertMatchesRegularExpression('/<svg.*?class=".*?stroke-white?.*>/', $contents);
     }
 
+    public function testThrowsIfHoverPalleteIsNotFound(): void
+    {
+        $this->expectException(PalleteNotFound::class);
+        $this->icon->renderIcon(['icon' => self::ICON, 'hover' => 'red']);
+    }
 
+    public function testSvgClassContainsHoverPalleteClasses(): void
+    {
+        $contents = $this->icon->renderIcon(['icon' => self::ICON, 'hover' => 'white']);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*cursor-pointer.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*hover:fill-white.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*hover:stroke-white.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*group-hover:fill-white.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*group-hover:stroke-white.*".*>/', $contents);
+    }
+
+    public function testSvgClassContainsHoverAndColourPalleteClasses(): void
+    {
+        $contents = $this->icon->renderIcon(['icon' => self::ICON, 'hover' => 'white', 'colour' => 'primary']);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*fill-primary.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*stroke-primary.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*cursor-pointer.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*hover:fill-white.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*hover:stroke-white.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*group-hover:fill-white.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*group-hover:stroke-white.*".*>/', $contents);
+    }
 }

tests/icons/test.svg

@@ -6,4 +6,5 @@
     <line fill="black"></line>
     <line x1="256" y1="112" x2="256" y2="400" width="101" height="101" style="fill: none; stroke: rgb(0,0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"></line>
     <line x1="400" y1="256" x2="112" y2="256" width="102" height="102" style="fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"></line>
+    <polyline points="112 244 256 100 400 244" style="fill:#000;fill:#000000;fill: black;fill:rgb(0,0,0);stroke:#000;stroke:#000000;stroke:black;stroke:rgb(0, 0, 0);stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/>
 </svg>