feat(link): add link component (#443)

* feat(link): add link  component

* feat(link): 更新快照

* test: update csr and ssr snap

* fix: fix cr

---------

Co-authored-by: magicalyao <shichengyao@tencent.com>
Co-authored-by: anlyyao <anly_yaw@163.com>

site/mobile/mobile.config.js

@@ -222,5 +222,10 @@ export default {
       name: 'result',
       component: () => import('tdesign-mobile-react/result/_example/index.tsx'),
     },
+    {
+      title: 'Link 链接',
+      name: 'link',
+      component: () => import('tdesign-mobile-react/link/_example/index.tsx'),
+    },
   ],
 };

site/web/site.config.js

@@ -40,13 +40,18 @@ export default {
           path: '/mobile-react/components/fab',
           component: () => import('tdesign-mobile-react/fab/fab.md'),
         },
-
         {
           title: 'Icon 图标',
           name: 'icon',
           path: '/mobile-react/components/icon',
           component: () => import('tdesign-mobile-react/icon/icon.md'),
         },
+        {
+          title: 'Link 链接',
+          name: 'link',
+          path: '/mobile-react/components/link',
+          component: () => import('tdesign-mobile-react/link/link.md'),
+        },
       ],
     },
     {

src/index.ts

@@ -5,6 +5,7 @@ export * from './button';
 export * from './divider';
 export * from './fab';
 export * from './progress';
+export * from './link';
 
 /**
  * 导航（5个）

src/link/Link.tsx

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import React from 'react';
+import useConfig from '../_util/useConfig';
+import { TdLinkProps } from './type';
+import { StyledProps } from '../common';
+import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { linkDefaultProps } from './defaultProps';
+
+export interface LinkProps extends TdLinkProps, StyledProps {}
+
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+  const {
+    children,
+    content,
+    className,
+    underline,
+    prefixIcon,
+    suffixIcon,
+    theme,
+    disabled,
+    hover,
+    onClick,
+    href,
+    size,
+    ...otherProps
+  } = useDefaultProps<LinkProps>(props, linkDefaultProps);
+
+  const { classPrefix } = useConfig();
+
+  const childNode = content || children;
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (disabled) {
+      return;
+    }
+    onClick?.(e);
+  };
+
+  return (
+    <a
+      {...otherProps}
+      href={disabled || !href ? undefined : href}
+      ref={ref}
+      className={classNames(
+        className,
+        `${classPrefix}-link`,
+        `${classPrefix}-link--${size || 'medium'}`,
+        `${classPrefix}-link--${theme || 'default'}`,
+        {
+          [`${classPrefix}-link--underline`]: !!underline,
+          [`${classPrefix}-link--disabled`]: !!disabled,
+          [`${classPrefix}-link--hover`]: !!hover && !disabled,
+        },
+      )}
+      onClick={handleClick}
+    >
+      {prefixIcon && <span className={classNames([`${classPrefix}-link__prefix-icon`])}>{parseTNode(prefixIcon)}</span>}
+      {childNode && <span className={classNames([`${classPrefix}-link__content`])}>{parseTNode(childNode)}</span>}
+      {suffixIcon && <span className={classNames([`${classPrefix}-link__suffix-icon`])}>{parseTNode(suffixIcon)}</span>}
+    </a>
+  );
+});
+
+Link.displayName = 'Link';
+
+export default Link;

src/link/_example/base.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Link } from 'tdesign-mobile-react';
+
+import './style/index.less';
+
+export default function Base() {
+  return (
+    <div className="demo-content">
+      <Link href="/mobile-react/overview">跳转链接</Link>
+      <Link hover>跳转链接</Link>
+    </div>
+  );
+}

src/link/_example/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import BaseDemo from './base';
+import ThemeDemo from './theme';
+import SizeDemo from './linkSize';
+import UnderlineDemo from './underline';
+import PrefixDemo from './prefix';
+import SuffixDemo from './suffix';
+import StatusDemo from './status';
+
+import './style/index.less';
+
+export default function LinkDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="Link 链接" summary="当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。" />
+      <TDemoBlock title="01 组件类型" summary="基础文字链接">
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="下划线文字链接">
+        <UnderlineDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="前置图标文字链接">
+        <PrefixDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="后置图标文字链接">
+        <SuffixDemo />
+      </TDemoBlock>
+      <TDemoBlock title="02 组件状态" summary="不同主题">
+        <ThemeDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="禁用状态">
+        <StatusDemo />
+      </TDemoBlock>
+      <TDemoBlock title="03 组件样式" summary="链接尺寸">
+        <SizeDemo />
+      </TDemoBlock>
+    </div>
+  );
+}

src/link/_example/linkSize.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from 'tdesign-mobile-react';
+
+export default function Size() {
+  return (
+    <div className="demo-content">
+      <Link theme="primary" size="small">
+        S跳转链接
+      </Link>
+      <Link theme="primary" size="medium">
+        M跳转链接
+      </Link>
+      <Link theme="primary" size="large">
+        L跳转链接
+      </Link>
+    </div>
+  );
+}

src/link/_example/prefix.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { LinkIcon } from 'tdesign-icons-react';
+import { Link } from 'tdesign-mobile-react';
+
+export default function Prefix() {
+  return (
+    <div className="demo-content">
+      <Link theme="primary" underline hover prefixIcon={<LinkIcon />}>
+        跳转链接
+      </Link>
+      <Link underline hover prefixIcon={<LinkIcon />}>
+        跳转链接
+      </Link>
+    </div>
+  );
+}

src/link/_example/status.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from 'tdesign-mobile-react';
+import { JumpIcon } from 'tdesign-icons-react';
+
+import './style/index.less';
+
+export default function Status() {
+  return (
+    <>
+      <div className="demo-content">
+        <Link theme="primary" suffixIcon={<JumpIcon />} disabled>
+          跳转链接
+        </Link>
+        <Link suffixIcon={<JumpIcon />} disabled>
+          跳转链接
+        </Link>
+        <Link theme="danger" suffixIcon={<JumpIcon />} disabled>
+          跳转链接
+        </Link>
+      </div>
+      <div className="demo-content">
+        <Link theme="success" suffixIcon={<JumpIcon />} disabled>
+          跳转链接
+        </Link>
+        <Link theme="warning" suffixIcon={<JumpIcon />} disabled>
+          跳转链接
+        </Link>
+      </div>
+    </>
+  );
+}

src/link/_example/style/index.less

@@ -0,0 +1,8 @@
+.demo-content {
+  height: 48px;
+  background-color: var(--bg-color-demo, #fff);
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 6.4vw;
+  align-items: center;
+}

src/link/_example/suffix.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { JumpIcon } from 'tdesign-icons-react';
+import { Link } from 'tdesign-mobile-react';
+
+export default function Suffix() {
+  return (
+    <div className="demo-content">
+      <Link theme="primary" underline suffixIcon={<JumpIcon />}>
+        跳转链接
+      </Link>
+      <Link underline hover suffixIcon={<JumpIcon />}>
+        跳转链接
+      </Link>
+    </div>
+  );
+}

src/link/_example/theme.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link } from 'tdesign-mobile-react';
+import { JumpIcon } from 'tdesign-icons-react';
+
+import './style/index.less';
+
+export default function Theme() {
+  return (
+    <>
+      <div className="demo-content">
+        <Link theme="primary" suffixIcon={<JumpIcon />}>
+          跳转链接
+        </Link>
+        <Link suffixIcon={<JumpIcon />}>跳转链接</Link>
+        <Link theme="danger" suffixIcon={<JumpIcon />}>
+          跳转链接
+        </Link>
+      </div>
+      <div className="demo-content">
+        <Link theme="success" suffixIcon={<JumpIcon />}>
+          跳转链接
+        </Link>
+        <Link theme="warning" suffixIcon={<JumpIcon />}>
+          跳转链接
+        </Link>
+      </div>
+    </>
+  );
+}

src/link/_example/underline.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'tdesign-mobile-react';
+
+export default function Underline() {
+  return (
+    <div className="demo-content">
+      <Link theme="primary" underline>
+        跳转链接
+      </Link>
+      <Link underline hover>
+        跳转链接
+      </Link>
+    </div>
+  );
+}

src/link/defaultProps.ts

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

src/link/index.ts

@@ -0,0 +1,8 @@
+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,23 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Link Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，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-mobile-react/blob/develop/src/common.ts) | N
+disabled | Boolean | undefined | make link to be disabled | N
+hover | Boolean | - | \- | N
+href | String | - | \- | N
+prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-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-mobile-react/blob/develop/src/common.ts) | N
+suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-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,23 @@
+:: 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-mobile-react/blob/develop/src/common.ts) | N
+disabled | Boolean | undefined | 禁用链接。优先级：Link.disabled > Form.disabled | N
+hover | Boolean | - | 是否开启点击反馈 | N
+href | String | - | 跳转链接 | N
+prefixIcon | TElement | - | 前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+suffixIcon | TElement | - | 后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-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/mobile/components/link/v2/_index.less';