Migrate Link component from useStyles to useDefinition

Fix pre-existing variant default from 'body' to 'body-medium' to match
actual CSS selectors. Add missing 'info' color to docs-ui props definition.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

docs-ui/src/app/components/link/props-definition.tsx

@@ -38,7 +38,7 @@ export const linkPropDefs: Record<string, PropDef> = {
       'body-small',
       'body-x-small',
     ],
-    default: 'body',
+    default: 'body-medium',
     responsive: true,
     description:
       'Typography style. Title variants for headings, body for paragraph text.',
@@ -56,7 +56,7 @@ export const linkPropDefs: Record<string, PropDef> = {
   },
   color: {
     type: 'enum',
-    values: ['primary', 'secondary', 'danger', 'warning', 'success'],
+    values: ['primary', 'secondary', 'danger', 'warning', 'success', 'info'],
     default: 'primary',
     responsive: true,
     description:

packages/ui/src/components/Link/Link.tsx

@@ -16,52 +16,22 @@
 
 import { forwardRef, useRef } from 'react';
 import { useLink } from 'react-aria';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles';
-import { LinkDefinition } from './definition';
 import type { LinkProps } from './types';
+import { useDefinition } from '../../hooks/useDefinition';
+import { LinkDefinition } from './definition';
 import { InternalLinkProvider } from '../InternalLinkProvider';
-import styles from './Link.module.css';
 
 const LinkInternal = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const { classNames, dataAttributes, cleanedProps } = useStyles(
+  const { ownProps, restProps, dataAttributes } = useDefinition(
     LinkDefinition,
-    {
-      variant: 'body',
-      weight: 'regular',
-      color: 'primary',
-      ...props,
-    },
+    props,
   );
-
-  const {
-    className,
-    href,
-    title,
-    children,
-    onPress,
-    variant,
-    weight,
-    color,
-    truncate,
-    standalone,
-    slot,
-    ...restProps
-  } = cleanedProps;
+  const { classes, title, children } = ownProps;
 
   const internalRef = useRef<HTMLAnchorElement>(null);
   const linkRef = (ref || internalRef) as React.RefObject<HTMLAnchorElement>;
 
-  // Use useLink hook to get link props
-  // For internal links, this will use the RouterProvider's navigate function
-  const { linkProps } = useLink(
-    {
-      href,
-      onPress,
-      ...restProps,
-    },
-    linkRef,
-  );
+  const { linkProps } = useLink(restProps, linkRef);
 
   return (
     <a
@@ -69,9 +39,8 @@ const LinkInternal = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
       {...dataAttributes}
       {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
       ref={linkRef}
-      href={href}
       title={title}
-      className={clsx(classNames.root, styles[classNames.root], className)}
+      className={classes.root}
     >
       {children}
     </a>

packages/ui/src/components/Link/definition.ts

@@ -14,28 +14,27 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { LinkOwnProps } from './types';
+import styles from './Link.module.css';
 
 /**
  * Component definition for Link
  * @public
  */
-export const LinkDefinition = {
+export const LinkDefinition = defineComponent<LinkOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-Link',
   },
-  dataAttributes: {
-    variant: ['subtitle', 'body', 'caption', 'label'] as const,
-    weight: ['regular', 'bold'] as const,
-    color: [
-      'primary',
-      'secondary',
-      'danger',
-      'warning',
-      'success',
-      'info',
-    ] as const,
-    truncate: [true, false] as const,
-    standalone: [true, false] as const,
+  propDefs: {
+    variant: { dataAttribute: true, default: 'body-medium' },
+    weight: { dataAttribute: true, default: 'regular' },
+    color: { dataAttribute: true, default: 'primary' },
+    truncate: { dataAttribute: true },
+    standalone: { dataAttribute: true },
+    title: {},
+    children: {},
+    className: {},
   },
-} as const satisfies ComponentDefinition;
+});

packages/ui/src/components/Link/index.ts

@@ -16,4 +16,4 @@
 
 export { Link } from './Link';
 export { LinkDefinition } from './definition';
-export type { LinkProps } from './types';
+export type { LinkOwnProps, LinkProps } from './types';

packages/ui/src/components/Link/types.ts

@@ -25,7 +25,7 @@ import type { LinkProps as AriaLinkProps } from 'react-aria-components';
 import type { ReactNode } from 'react';
 
 /** @public */
-export interface LinkProps extends AriaLinkProps {
+export type LinkOwnProps = {
   variant?: TextVariants | Partial<Record<Breakpoint, TextVariants>>;
   weight?: TextWeights | Partial<Record<Breakpoint, TextWeights>>;
   color?:
@@ -34,10 +34,12 @@ export interface LinkProps extends AriaLinkProps {
     | Partial<Record<Breakpoint, TextColors | TextColorStatus>>;
   truncate?: boolean;
   standalone?: boolean;
-
-  // This is used to set the title attribute on the link
   title?: string;
-
-  // This is used to set the children of the link
   children?: ReactNode;
-}
+  className?: string;
+};
+
+/** @public */
+export interface LinkProps
+  extends Omit<AriaLinkProps, 'children' | 'className'>,
+    LinkOwnProps {}