diff --git a/packages/core/src/components/Link.tsx b/packages/core/src/components/Link.tsx index bf4f3e68a3c..b0e295b9eca 100644 --- a/packages/core/src/components/Link.tsx +++ b/packages/core/src/components/Link.tsx @@ -1,5 +1,5 @@ import cn from "classnames"; -import React from "react"; +import React, { useId } from "react"; import { PolymorphicPropsWithRef, PolymorphicRef } from "../polymorphism"; export type LinkProps = @@ -26,15 +26,23 @@ export const Link = React.forwardRef(function Link< } = props; const Component = as; + const srId = useId(); + return ( {children} + {external && ( + + )} ); }); diff --git a/packages/jokul/src/components/link/Link.tsx b/packages/jokul/src/components/link/Link.tsx index e37371ce04f..649b5f7e12f 100644 --- a/packages/jokul/src/components/link/Link.tsx +++ b/packages/jokul/src/components/link/Link.tsx @@ -1,5 +1,5 @@ import { clsx } from "clsx"; -import React from "react"; +import React, { useId } from "react"; import { PolymorphicPropsWithRef, PolymorphicRef, @@ -29,15 +29,23 @@ export const Link = React.forwardRef(function Link< } = props; const Component = as; + const srId = useId(); + return ( {children} + {external && ( + + )} ); }); diff --git a/packages/jokul/src/components/link/documentation/LinkExample.tsx b/packages/jokul/src/components/link/documentation/LinkExample.tsx index fc4fd8e06c9..ddfb48f68c4 100644 --- a/packages/jokul/src/components/link/documentation/LinkExample.tsx +++ b/packages/jokul/src/components/link/documentation/LinkExample.tsx @@ -2,13 +2,18 @@ import { ExampleComponentProps, ExampleKnobsProps } from "doc-utils/index.js"; import React, { FC } from "react"; import { Link } from "../Link.js"; -export const knobs: ExampleKnobsProps = {}; +export const knobs: ExampleKnobsProps = { + boolProps: ["Ekstern"], +}; -export const LinkExample: FC = () => { +export const LinkExample: FC = ({ boolValues }) => { + const external = boolValues?.["Ekstern"]; /* -- EXAMPLE CODE START -- */ return (
- Lenke + + Lenke +
); /* -- EXAMPLE CODE END -- */