docs: display anchors with icons using anchor icon prop

dnbexperience · Oct 26, 2023 · 53d19f1 · 53d19f1
1 parent 0b5dfa7
commit 53d19f1
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 12 deletions.
diff --git a/...b-design-system-portal/src/docs/design-system/changelog/info-about-releases.mdx b/...b-design-system-portal/src/docs/design-system/changelog/info-about-releases.mdx
@@ -1,4 +1,4 @@
 import GithubLogo from 'Docs/contribute/assets/github-logo.js'
 import { Icon } from '@dnb/eufemia/src'
 
-You may also be interested in [details about releases](/uilib/releases) and have a look at the [<Icon icon={GithubLogo} size="default" /> **GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/).
+You may also be interested in [details about releases](/uilib/releases) and have a look at the [<Icon icon={GithubLogo} size="default" />**GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases.mdx b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases.mdx
@@ -11,7 +11,7 @@ import { Icon } from '@dnb/eufemia/src'
 
 # Releases and versions
 
-You may also have a look at the [<Icon icon={GithubLogo} size="default" /> **GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/).
+You may also have a look at the [<Icon icon={GithubLogo} size="default" />**GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/).
 
 Here you find an overview of all major releases (versions) and changes, including migration guides:
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/info/about-watching-releases.mdx b/packages/dnb-design-system-portal/src/docs/uilib/info/about-watching-releases.mdx
@@ -4,6 +4,6 @@ import { Icon } from '@dnb/eufemia/src'
 
 ## The Eufemia Repository
 
-The `@dnb/eufemia` is hosted as a sub package inside the [**<Icon icon={EufemiaLogo} size="large" /> Eufemia Repository**](https://github.com/dnbexperience/eufemia) on GitHub.
+The `@dnb/eufemia` is hosted as a sub package inside the [<Icon icon={EufemiaLogo} size="large" />**Eufemia Repository**](https://github.com/dnbexperience/eufemia) on GitHub.
 
-You can also enable [<Icon icon={GithubLogo} size="default" /> notification about upcoming releases](https://help.github.com/articles/watching-and-unwatching-releases-for-a-repository/).
+You can also enable [<Icon icon={GithubLogo} size="default" />notification about upcoming releases](https://help.github.com/articles/watching-and-unwatching-releases-for-a-repository/).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps.mdx
@@ -18,7 +18,7 @@ Check out the `@dnb/eufemia` **[Installation documentation](/uilib/usage/#instal
 
 ## Demo Apps
 
-You find some [Demo Apps](/uilib/getting-started/demos) as well as some setup examples: [<Icon icon={GithubLogo} size="default" /> **eufemia-examples**/packages/...](https://github.com/dnbexperience/eufemia-examples/tree/main/packages)
+You find some [Demo Apps](/uilib/getting-started/demos) as well as some setup examples: [<Icon icon={GithubLogo} size="default" />**eufemia-examples**/packages/...](https://github.com/dnbexperience/eufemia-examples/tree/main/packages)
 
 ## Be continued
 

diff --git a/packages/dnb-design-system-portal/src/shared/tags/index.tsx b/packages/dnb-design-system-portal/src/shared/tags/index.tsx
@@ -5,7 +5,17 @@
 import React from 'react'
 import CodeBlock from './CodeBlock'
 import { Checkbox, Input } from '@dnb/eufemia/src/components'
-import { Ul, Ol, Dl, Li, P, Hr, Blockquote, Code } from '@dnb/eufemia/src'
+import {
+  Ul,
+  Ol,
+  Dl,
+  Li,
+  P,
+  Hr,
+  Blockquote,
+  Code,
+  Icon,
+} from '@dnb/eufemia/src'
 import Table from './Table'
 // import Img from './Img'
 import Anchor from './Anchor'
@@ -40,11 +50,21 @@ export const basicComponents = {
       </Copy>
     )
   },
-  a: Anchor as React.DetailedHTMLFactory<
-    React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  >,
-  anchor: Anchor,
+
+  a: (props) => {
+    if (props?.children[0]?.type === Icon) {
+      // If first children is a Icon, we pass it to Anchor's icon property and sets is position to left
+      const { children } = props
+      const [icon, ...restChildren] = children
+      return (
+        <Anchor icon={icon} iconPosition="left" {...props}>
+          {restChildren}
+        </Anchor>
+      )
+    }
+
+    return <Anchor {...props} />
+  },
 }
 
 export default {
@@ -61,7 +81,9 @@ export default {
     }
   },
 
-  link: Anchor,
+  link: (props) => {
+    return <Anchor {...props} />
+  },
   input: ({ type, ...rest }) => {
     switch (type) {
       case 'checkbox':