feat: add safe prop to links which allows easy bypassing of the `re…

…l="noopener noreferrer"` which is now default
maxholman · Jan 17, 2023 · 9dadf37 · 9dadf37
1 parent b299ef8
commit 9dadf37
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/lib/buttons.tsx b/lib/buttons.tsx
@@ -13,6 +13,7 @@ import {
 import { Box, BoxBasedComponentProps } from './core.js';
 import type { Align } from './layout.css.js';
 import { Inline } from './layout.js';
+import { differentOriginLinkProps } from './links.js';
 import { Tone, toneVariants } from './tone.css.js';
 import type { Merge } from './types.js';
 
@@ -33,7 +34,9 @@ export type ButtonProps = PropsWithChildren<
 
 export type ButtonLinkProps = Merge<
   BoxBasedComponentProps<'a'>,
-  ButtonCommonProps
+  ButtonCommonProps & {
+    safe?: boolean;
+  }
 >;
 
 export type ButtonIconProps = Merge<
@@ -46,7 +49,7 @@ export type ButtonIconProps = Merge<
 >;
 
 const ButtonInternal: FC<
-  Merge<BoxBasedComponentProps<'button' | 'a' | 'span'>, ButtonCommonProps>
+  Merge<BoxBasedComponentProps<'button' | 'a'>, ButtonCommonProps>
 > = ({
   component = 'button',
   variant = 'standard',
@@ -95,8 +98,16 @@ export const Button: FC<
   Merge<BoxBasedComponentProps<'button'>, ButtonProps>
 > = (props) => <ButtonInternal {...props} />;
 
-export const ButtonLink: FC<ButtonLinkProps> = (props) => (
-  <ButtonInternal component={'href' in props ? 'a' : 'span'} {...props} />
+export const ButtonLink: FC<ButtonLinkProps> = ({
+  component = 'a',
+  safe = true,
+  ...props
+}) => (
+  <ButtonInternal
+    component={component}
+    {...(safe && props.href && differentOriginLinkProps(props.href))}
+    {...props}
+  />
 );
 
 export const ButtonIcon: FC<

diff --git a/lib/forms.tsx b/lib/forms.tsx
@@ -11,7 +11,6 @@ import {
   ReactNode,
   SelectHTMLAttributes,
   TextareaHTMLAttributes,
-  useId,
 } from 'react';
 import { useStringLikeDetector } from './context.js';
 import {
@@ -30,6 +29,7 @@ import {
   formInputSelectWrapperSingle,
   inputLabelStyle,
 } from './forms.css.js';
+import { useIdWithDefault } from './hooks/use-id-with-default.js';
 import { Block, BlockProps, Inline } from './layout.js';
 import type { Tone } from './tone.css.js';
 import type { Merge } from './types.js';
@@ -45,7 +45,7 @@ type CommonFormInputProps = {
     'radio' | 'checkbox'
   >;
   className?: ClassValue;
-  label: ReactNode;
+  label?: ReactNode;
   description?: ReactNode;
   secondaryLabel?: ReactNode;
   tertiaryLabel?: ReactNode;

diff --git a/lib/links.tsx b/lib/links.tsx
@@ -12,17 +12,28 @@ export type TextLinkProps = PropsWithChildren<
   Merge<BoxBasedComponentProps<'a'>, TextLinkCommonProps>
 >;
 
+export function differentOriginLinkProps(href: string) {
+  if (typeof window !== 'undefined') {
+    const testUrl = new URL(href, window.location.origin);
+    if (testUrl.origin !== window.location.origin) {
+      return { target: '_blank', rel: 'noopener noreferrer' };
+    }
+  }
+  return null;
+}
 
 export const TextLink: FC<TextLinkProps> = ({
   component = 'a',
   children,
   className,
   weight = 'standard',
+  safe = true,
   ...props
 }) => (
   <Box
     component={component}
     className={[linkStyleVariant[weight], className]}
+    {...(safe && props.href && differentOriginLinkProps(props.href))}
     {...props}
   >
     {children}