From 53d19f1dc707bc17c18500b30f62aa074ed942b6 Mon Sep 17 00:00:00 2001 From: -l Date: Thu, 26 Oct 2023 15:35:04 +0200 Subject: [PATCH] docs: display anchors with icons using anchor icon prop --- .../changelog/info-about-releases.mdx | 2 +- .../src/docs/uilib/about-the-lib/releases.mdx | 2 +- .../uilib/info/about-watching-releases.mdx | 4 +-- .../src/docs/uilib/usage/first-steps.mdx | 2 +- .../src/shared/tags/index.tsx | 36 +++++++++++++++---- 5 files changed, 34 insertions(+), 12 deletions(-) diff --git a/packages/dnb-design-system-portal/src/docs/design-system/changelog/info-about-releases.mdx b/packages/dnb-design-system-portal/src/docs/design-system/changelog/info-about-releases.mdx index 8edac88af19..0747ab32af7 100644 --- a/packages/dnb-design-system-portal/src/docs/design-system/changelog/info-about-releases.mdx +++ b/packages/dnb-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 [ **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 [**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 index 861e7713afe..6c8889eedb8 100644 --- 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 [ **GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/). +You may also have a look at the [**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 index 626a06a3800..c32c72968f7 100644 --- 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 [** Eufemia Repository**](https://github.com/dnbexperience/eufemia) on GitHub. +The `@dnb/eufemia` is hosted as a sub package inside the [**Eufemia Repository**](https://github.com/dnbexperience/eufemia) on GitHub. -You can also enable [ notification about upcoming releases](https://help.github.com/articles/watching-and-unwatching-releases-for-a-repository/). +You can also enable [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 index 38666164a6d..7937ae246a9 100644 --- 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: [ **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: [**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 index acee265344a..22cae052359 100644 --- 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 = { ) }, - a: Anchor as React.DetailedHTMLFactory< - React.AnchorHTMLAttributes, - 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 ( + + {restChildren} + + ) + } + + return + }, } export default { @@ -61,7 +81,9 @@ export default { } }, - link: Anchor, + link: (props) => { + return + }, input: ({ type, ...rest }) => { switch (type) { case 'checkbox':