feat(Link): 新增 link 组件

site/site.config.mjs

@@ -73,6 +73,12 @@ export default {
           path: '/react/components/icon',
           component: () => import('tdesign-react/icon/icon.md'),
         },
+        {
+          title: 'Link 文字',
+          name: 'link',
+          path: '/react/components/link',
+          component: () => import('tdesign-react/link/link.md'),
+        },
       ],
     },
     {

src/link/Link.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import React from 'react';
+import useConfig from '../hooks/useConfig';
+import { TdLinkProps } from './type';
+
+export interface LinkProps extends TdLinkProps, Omit<React.HTMLAttributes<HTMLAnchorElement>, 'children'> {}
+
+const Link = React.forwardRef(
+  (
+    {
+      children,
+      className,
+      underline,
+      prefixIcon,
+      suffixIcon,
+      theme = 'default',
+      disabled,
+      hover = 'underline',
+      ...props
+    }: LinkProps,
+    ref: React.RefObject<HTMLAnchorElement>,
+  ) => {
+    const { classPrefix } = useConfig();
+
+    const handleClick = () => {
+      console.log('a');
+    };
+    return (
+      <a
+        {...props}
+        ref={ref}
+        className={classNames(
+          className,
+          [`${classPrefix}-link`, `${classPrefix}-link--theme-${theme}`, `${classPrefix}-link--hover-${hover}`],
+          {
+            [`${classPrefix}-is-underline`]: !!underline,
+            [`${classPrefix}-is-disabled`]: !!disabled,
+          },
+        )}
+        onClick={handleClick}
+      >
+        <span className={classNames([`${classPrefix}-link__prefix-icon`])}>{prefixIcon}</span>
+        {children}
+        <span className={classNames([`${classPrefix}-link__suffix-icon`])}>{suffixIcon}</span>
+      </a>
+    );
+  },
+);
+
+Link.displayName = 'Link';
+
+export default Link;

src/link/README.md

@@ -0,0 +1,3 @@
+:: BASE_DOC ::
+
+:: BASE_PROPS ::

src/link/__tests__/link.test.tsx

@@ -0,0 +1,4 @@
+import { testExamples } from '@test/utils';
+
+// 测试组件代码 Example 快照
+testExamples(__dirname);

src/link/_example/base.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Link from '../Link';
+
+export default function LinkExample() {
+  return (
+    <Link hover="color" theme="default">
+      查看链接
+    </Link>
+  );
+}

src/link/_example/disabled.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { JumpIcon } from 'tdesign-icons-react';
+import { Space } from 'tdesign-react';
+import Link from '../Link';
+
+export default function LinkExample() {
+  return (
+    <Space>
+      <Link theme="default" disabled>
+        查看链接
+      </Link>
+      <Link theme="primary" underline disabled>
+        查看链接
+      </Link>
+      <Link theme="danger" hover="color" disabled>
+        查看链接
+      </Link>
+      <Link theme="warning" hover="underline" disabled>
+        查看链接
+      </Link>
+      <Link theme="success" disabled suffixIcon={<JumpIcon />}>
+        查看链接
+      </Link>
+    </Space>
+  );
+}

src/link/_example/hover.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Space } from 'tdesign-react';
+import Link from '../Link';
+
+export default function LinkExample() {
+  return (
+    <>
+      <Space>
+        <Link theme="default" hover="underline">
+          跳转链接
+        </Link>
+        <Link theme="primary" hover="underline">
+          跳转链接
+        </Link>
+        <Link theme="danger" hover="underline">
+          跳转链接
+        </Link>
+        <Link theme="warning" hover="underline">
+          跳转链接
+        </Link>
+        <Link theme="success" hover="underline">
+          跳转链接
+        </Link>
+      </Space>
+      <Space>
+        <Link theme="default" hover="color">
+          跳转链接
+        </Link>
+        <Link theme="primary" hover="color">
+          跳转链接
+        </Link>
+        <Link theme="danger" hover="color">
+          跳转链接
+        </Link>
+        <Link theme="warning" hover="color">
+          跳转链接
+        </Link>
+        <Link theme="success" hover="color">
+          跳转链接
+        </Link>
+      </Space>
+      <Space>
+        <Link theme="default" hover="color" underline>
+          跳转链接
+        </Link>
+        <Link theme="primary" hover="color" underline>
+          跳转链接
+        </Link>
+        <Link theme="danger" hover="color" underline>
+          跳转链接
+        </Link>
+        <Link theme="warning" hover="color" underline>
+          跳转链接
+        </Link>
+        <Link theme="success" hover="color" underline>
+          跳转链接
+        </Link>
+      </Space>
+    </>
+  );
+}

src/link/_example/icon.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { JumpIcon, LinkIcon } from 'tdesign-icons-react';
+import { Space } from 'tdesign-react';
+import Link from '../Link';
+
+export default function LinkExample() {
+  return (
+    <Space>
+      <Link theme="default" prefixIcon={<LinkIcon />}>
+        跳转链接
+      </Link>
+      <Link theme="primary" underline href="https://tdesign.tencent.com/" target="_self" prefixIcon={<LinkIcon />}>
+        跳转链接
+      </Link>
+      <Link theme="danger" underline href="https://tdesign.tencent.com/" target="_self" prefixIcon={<JumpIcon />}>
+        跳转链接
+      </Link>
+      <Link
+        theme="warning"
+        underline
+        href="https://tdesign.tencent.com/"
+        target="_self"
+        prefixIcon={<JumpIcon />}
+        disabled
+      >
+        跳转链接
+      </Link>
+    </Space>
+  );
+}

src/link/_example/size.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Space } from 'tdesign-react';
+import Link from '../Link';
+
+export default function LinkExample() {
+  return (
+    <>
+      <Space>
+        <Link theme="default" size="small">
+          查看链接
+        </Link>
+        <Link hover="underline">查看链接</Link>
+      </Space>
+    </>
+  );
+}

src/link/_example/theme.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Space } from 'tdesign-react';
+import Link from '../Link';
+
+export default function LinkExample() {
+  return (
+    <Space>
+      <Link theme="default">跳转链接</Link>
+      <Link theme="primary">跳转链接</Link>
+      <Link theme="danger">跳转链接</Link>
+      <Link theme="warning">跳转链接</Link>
+      <Link theme="success">跳转链接</Link>
+    </Space>
+  );
+}

src/link/_example/underline.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Space } from 'tdesign-react';
+import Link from '../Link';
+
+export default function LinkExample() {
+  return (
+    <Space>
+      <Link theme="default" underline>
+        跳转链接
+      </Link>
+      <Link theme="primary" underline>
+        跳转链接
+      </Link>
+      <Link theme="danger" underline>
+        跳转链接
+      </Link>
+      <Link theme="warning" underline>
+        跳转链接
+      </Link>
+      <Link theme="success" underline>
+        跳转链接
+      </Link>
+    </Space>
+  );
+}

src/link/defaultProps.ts

@@ -0,0 +1,7 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdLinkProps } from './type';
+
+export const linkDefaultProps: TdLinkProps = { hover: 'underline', size: 'medium', theme: 'default' };

src/link/index.ts

@@ -0,0 +1,9 @@
+import _Link from './Link';
+
+import './style/index.js';
+
+export type { LinkProps } from './Link';
+
+export const Link = _Link;
+
+export default Link;

src/link/link.en-US.md

@@ -0,0 +1,21 @@
+:: BASE_DOC ::
+
+## API
+### Link Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+children | TNode | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+disabled | Boolean | - | make link to be disabled | N
+hover | String | underline | hover link style。options：color/underline | N
+href | String | - | \- | N
+prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+target | String | - | target is an attribute of `<a>` | N
+theme | String | default | options：default/primary/danger/warning/success | N
+underline | Boolean | - | \- | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>click event, it won't trigger when it's disabled | N

src/link/link.md

@@ -0,0 +1,21 @@
+:: BASE_DOC ::
+
+## API
+### Link Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+children | TNode | - | 链接内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | 链接内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+disabled | Boolean | - | 禁用链接 | N
+hover | String | underline | 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法。可选项：color/underline | N
+href | String | - | 跳转链接 | N
+prefixIcon | TElement | - | 前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+suffixIcon | TElement | - | 后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+target | String | - | 跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同 | N
+theme | String | default | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+underline | Boolean | - | 普通状态是否显示链接下划线 | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击事件，禁用状态不会触发点击事件 | N

src/link/style/css.js

@@ -0,0 +1 @@
+import './index.css';

src/link/style/index.js

@@ -0,0 +1 @@
+import '../../_common/style/web/components/link/_index.less';

src/link/type.ts

@@ -0,0 +1,64 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, TElement, SizeEnum } from '../common';
+import { MouseEvent } from 'react';
+
+export interface TdLinkProps {
+  /**
+   * 链接内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 链接内容
+   */
+  content?: TNode;
+  /**
+   * 禁用链接
+   */
+  disabled?: boolean;
+  /**
+   * 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法
+   * @default underline
+   */
+  hover?: 'color' | 'underline';
+  /**
+   * 跳转链接
+   * @default ''
+   */
+  href?: string;
+  /**
+   * 前置图标
+   */
+  prefixIcon?: TElement;
+  /**
+   * 尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 后置图标
+   */
+  suffixIcon?: TElement;
+  /**
+   * 跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同
+   * @default ''
+   */
+  target?: string;
+  /**
+   * 组件风格，依次为默认色、品牌色、危险色、警告色、成功色
+   * @default default
+   */
+  theme?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+  /**
+   * 普通状态是否显示链接下划线
+   */
+  underline?: boolean;
+  /**
+   * 点击事件，禁用状态不会触发点击事件
+   */
+  onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+}