Fix(web-twig): Revert reuse icon viewBox, but set it to correct value…

…s #DS-429
lmc-eu · Oct 26, 2022 · f0cbb78 · f0cbb78
1 parent 95b676f
commit f0cbb78
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 12 deletions.
diff --git a/packages/web-twig/src/Twig/SvgExtension.php b/packages/web-twig/src/Twig/SvgExtension.php
@@ -28,8 +28,12 @@ class SvgExtension extends AbstractExtension
 
     private const ATTR_ID = 'id';
 
+    private const ATTR_HEIGHT = 'height';
+
     private const ATTR_VIEWBOX = 'viewBox';
 
+    private const ATTR_WIDTH = 'width';
+
     /**
      * @var array<string,SimpleXMLElement|false>
      */
@@ -197,11 +201,35 @@ private function makeReusableSVG(string $iconId, SimpleXMLElement $regularSvg)
 
         if ($attributes !== null && $reuseSvg instanceof SimpleXMLElement) {
             foreach ($attributes as $key => $value) {
-              if ($key === self::ATTR_ID) {
-                $reuseSvg->addChild('use')->addAttribute('href', '#' . $iconId);
-              } elseif ($key !== self::ATTR_VIEWBOX) {
-                $reuseSvg->addAttribute((string) $key, (string) $value);
-              }
+                if ($key === self::ATTR_ID) {
+                    $reuseAttributes = $reuseSvg->attributes();
+                    $viewBoxAttributeName = self::ATTR_VIEWBOX;
+                    $heightAttributeName = self::ATTR_HEIGHT;
+                    $widthAttributeName = self::ATTR_WIDTH;
+                    $regularWidth = isset($regularSvg->attributes()->$widthAttributeName) ? (string) $regularSvg->attributes()->$widthAttributeName : null;
+                    $regularHeight = isset($regularSvg->attributes()->$heightAttributeName) ? (string) $regularSvg->attributes()->$heightAttributeName : null;
+                    $viewBoxAttributeValue = isset($regularSvg->attributes()->$viewBoxAttributeName) ? (string) $regularSvg->attributes()->$viewBoxAttributeName : null;
+
+                    if ($regularWidth && $regularHeight) {
+                        $viewBoxAttributeValue = sprintf(
+                            '0 0 %s %s',
+                            preg_replace('/[^0-9]/', '', $regularWidth),
+                            preg_replace('/[^0-9]/', '', $regularHeight)
+                        );
+                    }
+
+                    if ($viewBoxAttributeValue) {
+                        if (isset($reuseAttributes->$viewBoxAttributeName)) {
+                            $reuseAttributes->$viewBoxAttributeName = $viewBoxAttributeValue;
+                        } else {
+                            $reuseSvg->addAttribute($viewBoxAttributeName, $viewBoxAttributeValue);
+                        }
+                    }
+
+                    $reuseSvg->addChild('use')->addAttribute('href', '#' . $iconId);
+                } elseif ($key !== self::ATTR_VIEWBOX) {
+                    $reuseSvg->addAttribute((string) $key, (string) $value);
+                }
             }
         }
 

diff --git a/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set alertDefault.twig__1.html b/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set alertDefault.twig__1.html
@@ -16,13 +16,13 @@
 </div>
 </div>
 <div class="Alert Alert--informative" role="alert">
-  <svg width="24" height="24" fill="none" aria-hidden="true"><use href="#71b5e17370f608a6d61d19a2af18fcf8"></use></svg>
+  <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true"><use href="#71b5e17370f608a6d61d19a2af18fcf8"></use></svg>
 
   <div>  Message
 </div>
 </div>
 <div class="Alert Alert--informative Alert--center" role="alert">
-  <svg width="24" height="24" fill="none" aria-hidden="true"><use href="#71b5e17370f608a6d61d19a2af18fcf8"></use></svg>
+  <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true"><use href="#71b5e17370f608a6d61d19a2af18fcf8"></use></svg>
 
   <div>  Message
 </div>

diff --git a/.../__snapshots__/ComponentsSnapshotTest__test with data set breadcrumbsDefault.twig__1.html b/.../__snapshots__/ComponentsSnapshotTest__test with data set breadcrumbsDefault.twig__1.html
@@ -5,16 +5,16 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="82a17c5baa08e4d4af9894ef5019acde" aria-hidden="true"><path d="M9.29006 7.05475C8.90006 7.44475 8.90006 8.07475 9.29006 8.46475L13.1701 12.3447L9.29006 16.2247C8.90006 16.6147 8.90006 17.2447 9.29006 17.6347C9.68006 18.0247 10.3101 18.0247 10.7001 17.6347L15.2901 13.0447C15.6801 12.6547 15.6801 12.0247 15.2901 11.6347L10.7001 7.04475C10.3201 6.66475 9.68006 6.66475 9.29006 7.05475Z" fill="#132930"></path></svg><a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a>
 </li>
 <li class="d-none d-tablet-flex">
-<svg width="24" height="24" fill="none" aria-hidden="true"><use href="#82a17c5baa08e4d4af9894ef5019acde"></use></svg><a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a>
+<svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true"><use href="#82a17c5baa08e4d4af9894ef5019acde"></use></svg><a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a>
 </li>
 <li class="d-tablet-none">
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="913a41f9b0ad333a62863a72cd8e504d" aria-hidden="true"><path d="M14.71 7.05471C14.32 6.66471 13.69 6.66471 13.3 7.05471L8.70998 11.6447C8.31998 12.0347 8.31998 12.6647 8.70998 13.0547L13.3 17.6447C13.69 18.0347 14.32 18.0347 14.71 17.6447C15.1 17.2547 15.1 16.6247 14.71 16.2347L10.83 12.3447L14.71 8.46471C15.1 8.07471 15.09 7.43471 14.71 7.05471Z" fill="#132930"></path></svg><a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
 </li>
 <li class="d-none d-tablet-flex">
-<svg width="24" height="24" fill="none" aria-hidden="true"><use href="#82a17c5baa08e4d4af9894ef5019acde"></use></svg><a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
+<svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true"><use href="#82a17c5baa08e4d4af9894ef5019acde"></use></svg><a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
 </li>
 <li class="d-none d-tablet-flex">
-<svg width="24" height="24" fill="none" aria-hidden="true"><use href="#82a17c5baa08e4d4af9894ef5019acde"></use></svg><a aria-current="page" href="#currentUrl" class="link-secondary">Current page</a>
+<svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true"><use href="#82a17c5baa08e4d4af9894ef5019acde"></use></svg><a aria-current="page" href="#currentUrl" class="link-secondary">Current page</a>
 </li>
 </ol></nav>
 </body></html>
diff --git a/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set modalDefault.twig__1.html b/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set modalDefault.twig__1.html
@@ -20,7 +20,7 @@
   <div class="Modal__content">
     <div class="Modal__dialog">
       <div class="Modal__header">
-        <button aria-controls="modal-example-dismiss" aria-expanded="false" data-dismiss="modal" data-target="#modal-example-dismiss" class="Button Button--tertiary Button--medium Button--square" type="button">          <svg width="24" height="24" fill="none" aria-hidden="true"><use href="#5cf4a361209150b84108c93d7bf13d46"></use></svg>
+        <button aria-controls="modal-example-dismiss" aria-expanded="false" data-dismiss="modal" data-target="#modal-example-dismiss" class="Button Button--tertiary Button--medium Button--square" type="button">          <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true"><use href="#5cf4a361209150b84108c93d7bf13d46"></use></svg>
 
           <span class="accessibility-hidden">Dismiss</span>
         </button>

diff --git a/packages/web-twig/tests/fixtures/test_reusable.svg b/packages/web-twig/tests/fixtures/test_reusable.svg