feat: add typography

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-vant",
-  "version": "0.0.22",
+  "version": "0.0.25",
   "description": "React Mobile UI Components base on Vant UI",
   "repository": "https://github.com/3lang3/react-vant.git",
   "main": "lib/index.js",

src/index.ts

@@ -2,6 +2,7 @@ export { default as Button } from './button';
 export { default as Badge } from './badge';
 export { default as Field } from './field';
 export { default as Flex } from './flex';
+export { default as Typography } from './typography';
 export { default as Cell } from './cell';
 export { default as Icon } from './icon';
 export { default as Image } from './image';

src/styles/mixins/ellipsis.less

@@ -1,5 +1,5 @@
 .multi-ellipsis(@lines) {
-  display: -webkit-box;
+  display: -webkit-box !important;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: @lines;

src/styles/themes/default.less

@@ -61,11 +61,16 @@
 @font-size-lg: 16 * @hd;
 @font-size-xl: 18 * @hd;
 @font-size-xxl: 20 * @hd;
+@font-size-xxxl: 24 * @hd;
 @font-weight-bold: 500;
 @line-height-xs: 14 * @hd;
 @line-height-sm: 18 * @hd;
 @line-height-md: 20 * @hd;
 @line-height-lg: 22 * @hd;
+@line-height-xl: 24 * @hd;
+@line-height-xxl: 28 * @hd;
+@line-height-xxxl: 32 * @hd;
+
 @base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial,
   Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
 @price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
@@ -806,3 +811,6 @@
 // PasswordInput
 @password-input-color: @blue;
 @password-border-color: @gray-darv-1;
+
+// Typography
+@typography-base-color: @gray-8;

src/swipe/PropsType.ts

@@ -18,5 +18,5 @@ export interface SwipeProps extends BaseTypeProps {
 }
 
 export type SwipeStatic = {
-  Item: ForwardRefExoticComponent<{ index: number }>;
+  Item: ForwardRefExoticComponent<{ index?: number; children: React.ReactNode }>;
 };

src/swipe/SwipeItem.tsx

@@ -6,7 +6,7 @@ import { createNamespace } from '../utils';
 
 const [bem] = createNamespace('swipe-item');
 
-const SwipeItem = forwardRef<{}, { index: number }>((props, ref) => {
+const SwipeItem = forwardRef<{}, { index?: number }>((props, ref) => {
   const context = useContext(SwipeContext);
 
   const [state, setState] = useState({

src/typography/PropsType.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+
+export interface TypographyProps extends BaseTypeProps {
+  type?: 'danger' | 'secondary' | 'light' | 'primary' | 'success' | 'warning';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  level?: 1 | 2 | 3 | 4 | 5;
+  disabled?: boolean;
+  delete?: boolean;
+  underline?: boolean;
+  center?: boolean;
+  strong?: boolean;
+  ellipsis?: boolean | number;
+  onClick?: () => void;
+  children?: string | number | React.ReactNode;
+}

src/typography/README.md

@@ -0,0 +1,55 @@
+# Typography 文本
+
+### 介绍
+
+文本的基本格式。
+
+
+### 引入
+
+```js
+import { Typography } from 'react-vant';
+```
+
+## 代码演示
+
+### 基础用法
+
+```jsx
+<Typography.Text>这是一条文本</Typography.Text>
+<Typography.Title>这是一条标题</Typography.Title>
+<Typography.Link>这是一条链接</Typography.Link>
+```
+
+### 类型
+
+设置 `type` 属性后，文本会展示不同的 ui 状态。
+
+```jsx
+<Typography.Text type="danger">这是一条文本</Typography.Text>
+<Typography.Text type="primary">这是一条文本</Typography.Text>
+<Typography.Text type="warning">这是一条文本</Typography.Text>
+<Typography.Text type="secondary">这是一条文本</Typography.Text>
+```
+
+## API
+
+### Typography.Text Typography.Link Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 文本类型，可选值`danger` ` secondary` `light` `primary` `success` `warning ` | _string_ | - |
+| size | 文本大小，可选值`xs` `sm` `md` `lg` `xl` `xxl` | _boolean_ | `md` |
+| disabled | 禁用文本 | _boolean_ | `false` |
+| ellipsis | 文本省略 | _boolean_ _number_ | `false` |
+| delete | 添加删除线样式 | _boolean_ | `false` |
+| underline | 添加下划线样式 | _boolean_ | `false` |
+| center | 文本居中 | _boolean_ | `false` |
+| strong | 文本加粗 | _boolean_ | `false` |
+| onClick | 点击事件 | _function_ | - |
+
+### Typography.Title Props
+
+| 参数  | 说明                                           | 类型     | 默认值 |
+| ----- | ---------------------------------------------- | -------- | ------ |
+| level | 重要程度，可选值` number:``1 ` `2` `3` `4` `5` | _number_ | `4`    |

src/typography/demo/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Typography } from 'react-vant';
+import { components } from 'site-mobile-demo';
+import './style.less';
+
+export default (): React.ReactNode => {
+  const { DemoBlock, DemoSection } = components;
+  return (
+    <DemoSection className="demo-badge">
+      <DemoBlock title="文本">
+        <Typography.Text>
+          In the process of <Typography.Text type="danger">internal</Typography.Text>{' '}
+          <Typography.Text delete>desktop</Typography.Text>applications development,
+          <Typography.Text type="primary"> many different</Typography.Text> design specs and{' '}
+          <Typography.Text underline>implementations</Typography.Text>would be{' '}
+          <Typography.Text type="warning">involved</Typography.Text>
+        </Typography.Text>
+      </DemoBlock>
+      <DemoBlock title="不同类型">
+        <Typography.Text type="danger">这是一条文本</Typography.Text>
+        <Typography.Text type="primary">这是一条文本</Typography.Text>
+        <Typography.Text type="warning">这是一条文本</Typography.Text>
+        <Typography.Text type="secondary">这是一条文本</Typography.Text>
+      </DemoBlock>
+      <DemoBlock title="文本省略">
+        <Typography.Text ellipsis>
+          In the process of internal desktop applications development, many different design specs
+          and implementations would be involved
+        </Typography.Text>
+      </DemoBlock>
+      <DemoBlock title="多行文本省略">
+        <Typography.Text ellipsis={2}>
+          In the process of internal desktop applications development, many different design specs
+          and implementations would be involved
+        </Typography.Text>
+      </DemoBlock>
+      <DemoBlock title="标题">
+        <Typography.Title level={1}>一级测试标题</Typography.Title>
+        <Typography.Title level={2}>二级测试标题</Typography.Title>
+        <Typography.Title level={3}>三级测试标题</Typography.Title>
+        <Typography.Title level={4}>四级测试标题</Typography.Title>
+        <Typography.Title level={5}>五级测试标题</Typography.Title>
+      </DemoBlock>
+      <DemoBlock title="链接">
+        <Typography.Link>测试Link</Typography.Link>
+      </DemoBlock>
+    </DemoSection>
+  );
+};

src/typography/demo/style.less

@@ -0,0 +1,17 @@
+@import '../../styles/themes/default.less';
+
+.demo-typography {
+  background: #fff;
+
+  .vant-doc-demo-block {
+    padding: 0 @padding-md;
+  }
+
+  .vant-doc-demo-block__title {
+    padding-left: 0;
+  }
+
+  &-row {
+    margin-bottom: @padding-sm;
+  }
+}

src/typography/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import classnames from 'classnames';
+import { TypographyProps } from './PropsType';
+import { createNamespace } from '../utils';
+
+const [bem] = createNamespace('typography');
+
+const TypographyContent: React.FC<TypographyProps & { renderType: string }> = ({
+  type,
+  size = 'md',
+  level,
+  center,
+  ellipsis,
+  className,
+  children,
+  strong,
+  underline,
+  disabled,
+  renderType,
+  delete: del,
+  ...props
+}) => {
+  const elli = ellipsis === true ? 1 : ellipsis;
+  return (
+    <div
+      className={classnames(
+        className,
+        bem([
+          type,
+          size,
+          renderType,
+          {
+            center,
+            strong,
+            underline,
+            disabled,
+            delete: del,
+            [`l${level}`]: renderType === 'title' && level,
+          },
+        ]),
+        {
+          'rv-ellipsis': elli === 1,
+          [`rv-multi-ellipsis--l${elli}`]: elli && elli > 1,
+        },
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+const Typography = {
+  Text: (props) => <TypographyContent renderType="text" {...props} />,
+  Title: (props) => <TypographyContent renderType="title" level={4} {...props} />,
+  Link: (props: Omit<TypographyProps, 'title'>) => (
+    <TypographyContent renderType="link" {...props} />
+  ),
+} as {
+  Text: React.FC<Omit<TypographyProps, 'level'>>;
+  Title: React.FC<TypographyProps>;
+  Link: React.FC<Omit<TypographyProps, 'level'>>;
+};
+
+export default Typography;

src/typography/style/index.less

@@ -0,0 +1,108 @@
+@import '../../styles/themes/default.less';
+
+.rv-typography {
+  color: @gray-8;
+  word-wrap: break-word;
+
+  &--xs {
+    font-size: @font-size-xs;
+    line-height: @line-height-xs;
+  }
+  &--sm {
+    font-size: @font-size-sm;
+    line-height: @line-height-sm;
+  }
+  &--md,
+  &--5 {
+    font-size: @font-size-md;
+    line-height: @line-height-md;
+  }
+
+  &--lg,
+  &--l4 {
+    font-size: @font-size-lg;
+    line-height: @line-height-lg;
+  }
+  &--xl,
+  &--l3 {
+    font-size: @font-size-xl;
+    line-height: @line-height-xl;
+  }
+  &--xxl,
+  &--l2 {
+    font-size: @font-size-xxl;
+    line-height: @line-height-xxl;
+  }
+
+  &--primary {
+    color: @brand-color;
+  }
+  &--danger {
+    color: @red;
+  }
+  &--success {
+    color: @green;
+  }
+  &--secondary {
+    color: @gray-6;
+  }
+  &--light {
+    color: @white;
+  }
+  &--warning {
+    color: @orange;
+  }
+  &--disabled {
+    color: @gray-5;
+    cursor: not-allowed;
+  }
+  &--underline {
+    text-decoration: underline;
+  }
+  &--delete {
+    text-decoration: line-through;
+  }
+
+  &--text {
+    display: inline-block;
+
+    &.rv-ellipsis {
+      display: block;
+    }
+  }
+
+  &--title {
+    font-weight: bold;
+  }
+
+  &--l1 {
+    margin-bottom: 25px;
+    font-size: @font-size-xxl;
+    line-height: @line-height-xxl;
+  }
+  &--l2 {
+    margin-bottom: 20px;
+  }
+  &--l3 {
+    margin-bottom: 15px;
+  }
+  &--l4 {
+    margin-bottom: 10px;
+  }
+  &--l5 {
+    margin-bottom: 6px;
+  }
+
+  &--link {
+    color: @blue;
+    cursor: pointer;
+  }
+
+  &--center {
+    text-align: center;
+  }
+
+  &--strong {
+    font-weight: bold;
+  }
+}

vant.config.js

@@ -79,6 +79,10 @@ module.exports = {
                 path: 'button',
                 title: 'Button 按钮',
               },
+              {
+                path: 'typography',
+                title: 'Typography 文本',
+              },
               {
                 path: 'cell',
                 title: 'Cell 单元格',