style(link): links with external icon (always after the label) to inl… (

#1678) Closing multiple old www-denhaag-nl branches; closes #1675 #1674 #1672 #1620 #1602 #1631 #1587 #1659 #1628
nl-design-system · Feb 13, 2025 · b80ce6b · b80ce6b
1 parent a74e12d
commit b80ce6b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 34 deletions.
diff --git a/components/Link/src/index.scss b/components/Link/src/index.scss
@@ -74,6 +74,15 @@
   }
 }
 
+.denhaag-link:has(.denhaag-link__label ~ .denhaag-icon),
+.denhaag-link--external:has(.denhaag-link__label ~ .denhaag-icon) {
+  display: inline;
+
+  .denhaag-icon {
+    margin-inline-start: var(--denhaag-link-icon-gap, var(--denhaag-space-2xs));
+  }
+}
+
 .denhaag-link--disabled,
 .denhaag-link--disabled--hover,
 .denhaag-link--disabled:hover {

diff --git a/components/LinkGroup/src/stories/bem.stories.mdx b/components/LinkGroup/src/stories/bem.stories.mdx
@@ -83,23 +83,6 @@ import readme from "../../README.md";
             href="https://nl-design-system.github.io/denhaag/"
             className="denhaag-link denhaag-link--with-icon denhaag-link--with-icon-start"
           >
-            <svg
-              width="1em"
-              height="1em"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              className="denhaag-icon"
-              focusable="false"
-              aria-hidden="true"
-              shapeRendering="auto"
-            >
-              <path
-                d="M12.293 5.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L16.586 13H5a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                fill="currentColor"
-              ></path>
-            </svg>
-            <span className="denhaag-link__label">Inburgeren en naturaliseren</span>
             <svg
               width="1em"
               height="1em"
@@ -116,6 +99,7 @@ import readme from "../../README.md";
                 fill="currentColor"
               ></path>
             </svg>
+            <span className="denhaag-link__label">Inburgeren en naturaliseren</span>
           </a>
         </li>
         <li className="denhaag-link-group__list-item">
@@ -219,23 +203,6 @@ import readme from "../../README.md";
             href="https://nl-design-system.github.io/denhaag/"
             className="denhaag-link denhaag-link--with-icon denhaag-link--with-icon-start"
           >
-            <svg
-              width="1em"
-              height="1em"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              className="denhaag-icon"
-              focusable="false"
-              aria-hidden="true"
-              shapeRendering="auto"
-            >
-              <path
-                d="M12.293 5.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L16.586 13H5a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                fill="currentColor"
-              ></path>
-            </svg>
-            <span className="denhaag-link__label">Parkeerplaats voor huisartsen en verloskundigen</span>
             <svg
               width="1em"
               height="1em"
@@ -252,6 +219,7 @@ import readme from "../../README.md";
                 fill="currentColor"
               ></path>
             </svg>
+            <span className="denhaag-link__label">Parkeerplaats voor huisartsen en verloskundigen</span>
           </a>
         </li>
       </ul>