diff --git a/packages/smarthr-ui/src/components/Button/AnchorButton.tsx b/packages/smarthr-ui/src/components/Button/AnchorButton.tsx index e8f59b8ded..876da01193 100644 --- a/packages/smarthr-ui/src/components/Button/AnchorButton.tsx +++ b/packages/smarthr-ui/src/components/Button/AnchorButton.tsx @@ -20,6 +20,8 @@ export const AnchorButton = forwardRef { const styles = useMemo(() => anchorButton({ className }), [className]) + const actualRel = useMemo( + () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel), + [rel, target], + ) return ( diff --git a/packages/smarthr-ui/src/components/TextLink/TextLink.stories.tsx b/packages/smarthr-ui/src/components/TextLink/TextLink.stories.tsx index 51f5fae030..049704a4e0 100644 --- a/packages/smarthr-ui/src/components/TextLink/TextLink.stories.tsx +++ b/packages/smarthr-ui/src/components/TextLink/TextLink.stories.tsx @@ -26,6 +26,11 @@ export const All: StoryFn = () => ( 別タブで開くルートへのリンク +
  • + + 別タブで開くルートへのリンク(rel属性 なし) + +
  • 別タブで開くルートへのリンク(suffix なし) diff --git a/packages/smarthr-ui/src/components/TextLink/TextLink.tsx b/packages/smarthr-ui/src/components/TextLink/TextLink.tsx index 02b8995e25..457ed8c8d2 100644 --- a/packages/smarthr-ui/src/components/TextLink/TextLink.tsx +++ b/packages/smarthr-ui/src/components/TextLink/TextLink.tsx @@ -21,9 +21,12 @@ const textLink = tv({ suffixWrapper: 'shr-ms-0.25 shr-align-middle', }, }) +const { anchor, prefixWrapper, suffixWrapper } = textLink() +const prefixWrapperClassName = prefixWrapper() +const suffixWrapperClassName = suffixWrapper() export const TextLink = forwardRef( - ({ href, target, onClick, children, prefix, suffix, className, ...others }, ref) => { + ({ href, target, rel, onClick, children, prefix, suffix, className, ...others }, ref) => { const actualSuffix = useMemo(() => { if (target === '_blank' && suffix === undefined) { return @@ -41,6 +44,12 @@ export const TextLink = forwardRef( return undefined }, [href, onClick]) + const actualRel = useMemo( + () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel), + [rel, target], + ) + const anchorClassName = useMemo(() => anchor({ className }), [className]) + const actualOnClick = useMemo(() => { if (!onClick) { return undefined @@ -54,20 +63,19 @@ export const TextLink = forwardRef( } }, [href, onClick]) - const { anchor, prefixWrapper, suffixWrapper } = useMemo(() => textLink(), []) - return ( - {prefix && {prefix}} + {prefix && {prefix}} {children} - {actualSuffix && {actualSuffix}} + {actualSuffix && {actualSuffix}} ) },