Update <Text /> to forwardRef and support href for links

near · Nov 8, 2024 · c252d6e · c252d6e
1 parent 77aeac8
commit c252d6e
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 57 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ReactElement } from 'react';
+import type { ComponentProps, ComponentPropsWithRef, ReactElement } from 'react';
 import { forwardRef } from 'react';
 
 import { usePagodaUi } from '../context/PagodaUi';
@@ -13,7 +13,7 @@ type Props = Omit<ComponentPropsWithRef<'button'>, 'size'> & {
   count?: number;
   fill?: Fill;
   href?: string;
-  target?: ComponentPropsWithRef<'a'>['target'];
+  target?: ComponentProps<'a'>['target'];
   icon?: ReactElement;
   iconLeft?: ReactElement;
   iconRight?: ReactElement;

diff --git a/src/components/Text.README.md b/src/components/Text.README.md
@@ -10,6 +10,8 @@ import { Text } from '~/components/lib/Text';
 <Text size="text-xs">My Text</Text>
 <Text as="h1">My Text</Text>
 <Text as="h2" size="text-s" color="red-8">My Text</Text>
+<Text href="/foo/bar">My Text</Text>
+<Text href="/foo/bar" target="_blank">My Text</Text>
 ```
 
 ## Line Clamp

diff --git a/src/components/Text.module.scss b/src/components/Text.module.scss
@@ -1,3 +1,11 @@
+a.text {
+  &:hover,
+  &:focus-visible {
+    color: var(--violet-11) !important;
+    text-decoration: underline;
+  }
+}
+
 .text {
   text-wrap: pretty;
   text-underline-offset: 0.2em;
@@ -17,11 +25,9 @@
   a > & {
     display: inline;
   }
-
   a:has(&) {
     line-height: 0;
   }
-
   &[role='button']:hover,
   &[role='button']:focus-visible,
   [role='button']:hover > &,

diff --git a/src/components/Text.tsx b/src/components/Text.tsx
@@ -1,5 +1,6 @@
-import { type CSSProperties, type MouseEventHandler, type ReactNode } from 'react';
+import { ComponentProps, ComponentPropsWithRef, type CSSProperties, forwardRef } from 'react';
 
+import { usePagodaUi } from '../context/PagodaUi';
 import { type ThemeColor, type ThemeFontSize } from '../utils/theme';
 import s from './Text.module.scss';
 
@@ -17,71 +18,78 @@ const defaultSizes: Record<Tag, ThemeFontSize> = {
   label: 'text-base',
 };
 
-type Props = {
+type Props = Omit<ComponentPropsWithRef<'p'>, 'color'> & {
   as?: Tag;
-  children: ReactNode;
   clampLines?: number;
-  className?: string;
   clickableHighlight?: boolean;
   color?: ThemeColor;
   decoration?: CSSProperties['textDecoration'];
   family?: 'standard' | 'monospace';
   forceWordBreak?: boolean;
-  id?: string;
+  href?: string;
+  target?: ComponentProps<'a'>['target'];
   size?: ThemeFontSize;
   sizePhone?: ThemeFontSize;
   sizeTablet?: ThemeFontSize;
-  style?: CSSProperties;
   noWrap?: boolean;
-  onClick?: MouseEventHandler<HTMLElement>;
   weight?: string | number;
   uppercase?: boolean;
 };
 
-export const Text = ({
-  as = 'p',
-  children,
-  clampLines,
-  className = '',
-  clickableHighlight,
-  color,
-  decoration,
-  family,
-  forceWordBreak,
-  size,
-  style,
-  weight,
-  noWrap,
-  onClick,
-  uppercase,
-  ...props
-}: Props) => {
-  const Tag = as;
-  const defaultSize = defaultSizes[as];
+export const Text = forwardRef<HTMLParagraphElement, Props>(
+  (
+    {
+      as = 'p',
+      children,
+      clampLines,
+      className = '',
+      clickableHighlight,
+      color,
+      decoration,
+      family,
+      forceWordBreak,
+      size,
+      style,
+      weight,
+      noWrap,
+      onClick,
+      uppercase,
+      ...props
+    },
+    ref,
+  ) => {
+    const Tag = as;
+    const defaultSize = defaultSizes[as];
+    const { Link } = usePagodaUi();
+    const Element: any = props.href ? Link : Tag;
 
-  return (
-    <Tag
-      className={`${s.text} ${className}`}
-      data-clamp-lines={clampLines}
-      data-size={size ?? defaultSize}
-      data-clickable-highlight={clickableHighlight}
-      data-family={family}
-      role={onClick ? 'button' : undefined}
-      tabIndex={onClick ? 0 : undefined}
-      style={{
-        color: color ? (color === 'current' ? 'currentColor' : `var(--${color})`) : undefined,
-        textDecoration: decoration,
-        fontWeight: weight,
-        WebkitLineClamp: clampLines,
-        whiteSpace: noWrap ? 'nowrap' : undefined,
-        wordBreak: forceWordBreak ? 'break-word' : undefined,
-        textTransform: uppercase ? 'uppercase' : undefined,
-        ...style,
-      }}
-      onClick={onClick}
-      {...props}
-    >
-      {children}
-    </Tag>
-  );
-};
+    return (
+      <Element
+        className={`${s.text} ${className}`}
+        data-clamp-lines={clampLines}
+        data-size={size ?? defaultSize}
+        data-clickable-highlight={clickableHighlight}
+        data-family={family}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+        style={{
+          color: color ? (color === 'current' ? 'currentColor' : `var(--${color})`) : undefined,
+          textDecoration: decoration,
+          fontWeight: weight,
+          WebkitLineClamp: clampLines,
+          whiteSpace: noWrap ? 'nowrap' : undefined,
+          wordBreak: forceWordBreak ? 'break-word' : undefined,
+          textTransform: uppercase ? 'uppercase' : undefined,
+          ...style,
+        }}
+        onClick={onClick}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Element>
+    );
+  },
+);
+
+Text.displayName = 'Text';