Feature/link

src/components/link/index.md

@@ -0,0 +1,77 @@
+---
+group:
+  title: 基础组件
+---
+
+## Link
+
+### Type
+
+```tsx
+import React from 'react'
+import { Link } from 'umaso'
+
+export default () => <div>
+  <Link>默认</Link>
+  <Link type="primary">测试</Link>
+  <Link type="success">测试</Link>
+  <Link type="warning">测试</Link>
+  <Link type="danger">测试</Link>
+  <Link type="info">测试</Link>
+</div>
+```
+
+### Disabled
+
+```tsx
+import React from 'react'
+import { Link } from 'umaso'
+
+export default () => <div>
+  <Link disabled>默认</Link>
+  <Link type="primary" disabled>测试</Link>
+  <Link type="success" disabled>测试</Link>
+  <Link type="warning" disabled>测试</Link>
+  <Link type="danger" disabled>测试</Link>
+  <Link type="info" disabled>测试</Link>
+</div>
+```
+
+### 文字下划线
+
+```tsx
+import React from 'react'
+import { Link } from 'umaso'
+
+export default () => <div>
+  <Link>百度</Link>
+  <Link href="https://www.baidu.com" underline={false}>百度</Link>
+</div>
+```
+
+
+### Link跳转
+
+```tsx
+import React from 'react'
+import { Link } from 'umaso'
+
+export default () => <div>
+  <Link href="https://www.baidu.com">百度</Link>
+</div>
+```
+
+### Slot
+
+```tsx
+import React from 'react'
+import { Link } from 'umaso'
+
+export default () => <div>
+  <Link>
+    <span>这是个props.children</span>
+  </Link>
+</div>
+```
+
+<API />

src/components/link/index.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import type { ReactTestRendererJSON } from 'react-test-renderer'
+import renderer from 'react-test-renderer'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import Link from './index'
+
+interface LinkAttr {
+  content: string
+  href?: string
+  disabled?: boolean
+  underline?: boolean
+}
+
+const attr: LinkAttr = {
+  content: '链接文案',
+  href: 'https://baidu.com',
+  disabled: true,
+  underline: true,
+}
+
+describe('test link component', () => {
+  it('link type', () => {
+    const comp = renderer.create(<Link type="primary"> link component</Link>)
+
+    const { type, props } = comp.toJSON() as ReactTestRendererJSON
+    expect(type).toBe('a')
+    expect(props.className).toContain('el-link--primary')
+  })
+
+  it('test link disable', () => {
+    const comp = renderer.create(<Link disabled={attr.disabled}>link disabled</Link>)
+    const { props } = comp.toJSON() as ReactTestRendererJSON
+    expect(props.className).toContain('is-disabled')
+  })
+
+  it('test link underline', () => {
+    const comp = renderer.create(<Link underline={attr.underline}>link underline</Link>)
+    const { props } = comp.toJSON() as ReactTestRendererJSON
+    expect(props.className).toContain('is-underline')
+  })
+  it('test link underline', () => {
+    const comp = renderer.create(<Link underline={false}>link underline</Link>)
+    const { props } = comp.toJSON() as ReactTestRendererJSON
+    expect(props.className).not.toContain('is-underline')
+  })
+
+  it('test href props', () => {
+    const url = 'https://github.com/course-dasheng/umaso'
+    const comp = renderer.create(<Link href={url}>link underline</Link>)
+    const { props } = comp.toJSON() as ReactTestRendererJSON
+    expect(props.href).toEqual(url)
+  })
+
+  it('test link slot', () => {
+    function Content(props: { desc: string }) {
+      return <span>this is content, {props.desc}</span>
+    }
+
+    render(
+    <Link type="primary">
+        <Content desc="children component" />
+    </Link>)
+
+    expect(screen.getByText(/children component/i)).toBeInTheDocument()
+  })
+})
+

src/components/link/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import classNames from 'classnames'
+import '../../theme/src/link.scss'
+
+interface LinkProps {
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  children?: React.ReactNode
+  disabled?: boolean
+  href?: string
+  underline?: boolean | undefined
+}
+
+export default function Link(props: LinkProps) {
+  const { type, disabled, underline } = props
+  const prefix = 'el-link'
+  const classes = classNames(
+    prefix,
+    {
+      [`${prefix}--${type}`]: type,
+      'is-disabled': disabled,
+      'is-underline': underline !== false,
+    },
+  )
+
+  return <a href={props.href ? props.href : 'javascript:;'}
+    className={classes} >
+    { props.children }
+  </a>
+}

src/index.ts

@@ -1,3 +1,4 @@
 export { default as Button } from './components/button/'
 export { default as Tag } from './components/tag'
+export { default as Link } from './components/link/'
 export { ElHeader, ElAside, ElMain, ElFooter, ElContainer } from './components/container/'