【WIP】feat(Typography): add component

packages/components/paragraph/README.en-US.md

@@ -0,0 +1,62 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Paragraph Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+content | String | - | content of paragraph | N
+ellipsis | Boolean / Object | false | add ellipsis style。Typescript: `boolean \| TypographyEllipsis `，[Text API Documents](./text?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/paragraph/type.ts) | N
+
+### Paragraph Slots
+
+name | Description
+-- | --
+content | content of paragraph
+
+
+### Text Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+code | Boolean | false | add code style | N
+content | String | - | content of text | N
+copyable | Boolean | false | Typescript: `boolean \| TypographyCopyable ` `interface TypographyCopyable { text?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/text/type.ts) | N
+delete | Boolean | false | add delete line style | N
+disabled | Boolean | false | add disabled style | N
+ellipsis | Boolean / Object | false | add ellipsis style。Typescript: `boolean \| TypographyEllipsis ` `interface TypographyEllipsis { collapsible?: boolean; expandable?: boolean; row?: number;}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/text/type.ts) | N
+italic | Boolean | false | add italic style | N
+keyboard | Boolean | false | add keyboard style | N
+mark | String / Boolean | false | add mark style | N
+strong | Boolean | false | add bold style | N
+theme | String | - | theme of text。options: primary/secondary/success/warning/error | N
+underline | Boolean | false | add underline style | N
+
+### Text Slots
+
+name | Description
+-- | --
+content | content of text
+
+
+### Title Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+content | String | - | content of title | N
+ellipsis | Boolean / Object | false | add ellipsis style。Typescript: `boolean \| TypographyEllipsis `，[Text API Documents](./text?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/title/type.ts) | N
+level | String | h1 | level of title。options: h1/h2/h3/h4/h5/h6 | N
+
+### Title Slots
+
+name | Description
+-- | --
+content | content of title

packages/components/paragraph/README.md

@@ -0,0 +1,100 @@
+---
+title: Typography 排版
+description: 排版用于文本基础编排和样式，使用排版组件，可以快速完成页面中的文本内容制作，同时配合其他组件完成暗黑明亮模式切换等风格统一的需求
+isComponent: true
+spline: base
+---
+
+
+<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
+    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
+  </svg>
+  该组件于 1.15.0 版本上线，请留意版本。
+</div>
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-83%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-paragraph": "tdesign-miniprogram/paragraph/paragraph",
+  "t-text": "tdesign-miniprogram/text/text",
+  "t-title": "tdesign-miniprogram/title/title"
+}
+```
+
+## 代码演示
+
+<a href="xxx" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
+
+<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
+<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
+</blockquote>
+
+### 基础使用
+
+{{ base }}
+
+## API
+
+
+### Paragraph Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+content | String | - | 段落内容 | N
+ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis `，[Text API Documents](./text?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/paragraph/type.ts) | N
+
+### Paragraph Slots
+
+名称 | 描述
+-- | --
+content | 自定义 `content` 显示内容
+
+
+### Text Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+code | Boolean | false | 是否添加代码样式 | N
+content | String | - | 文本内容 | N
+copyable | Boolean | false | 是否可复制。TS 类型：`boolean \| TypographyCopyable ` `interface TypographyCopyable { text?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/text/type.ts) | N
+delete | Boolean | false | 是否添加删除线样式 | N
+disabled | Boolean | false | 是否添加不可用样式 | N
+ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis ` `interface TypographyEllipsis { collapsible?: boolean; expandable?: boolean; row?: number;}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/text/type.ts) | N
+italic | Boolean | false | 文本是否为斜体 | N
+keyboard | Boolean | false | 是否添加键盘样式 | N
+mark | String / Boolean | false | 是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9 | N
+strong | Boolean | false | 文本是否加粗 | N
+theme | String | - | 主题。可选项：primary/secondary/success/warning/error | N
+underline | Boolean | false | 是否添加下划线样式 | N
+
+### Text Slots
+
+名称 | 描述
+-- | --
+content | 自定义 `content` 显示内容
+
+
+### Title Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+content | String | - | 段落内容 | N
+ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis `，[Text API Documents](./text?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/title/type.ts) | N
+level | String | h1 | 标题等级。可选项：h1/h2/h3/h4/h5/h6 | N
+
+### Title Slots
+
+名称 | 描述
+-- | --
+content | 自定义 `content` 显示内容

packages/components/paragraph/__test__/__snapshots__/demo.test.js.snap

@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paragraph Paragraph base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="typography-example"
+  >
+    <t-typography-text
+      content="TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。"
+    />
+  </wx-view>
+</base>
+`;
+
+exports[`Paragraph Paragraph combination demo works fine 1`] = `
+<combination>
+  <wx-view
+    class="typography-example typography-example--inline"
+  >
+    <t-typography-title
+      content="What is TDesign"
+    />
+    <t-typography-text
+      content="TDesign is an enterprise-level design system accumulated by Tencent's various business teams."
+      mark="{{true}}"
+    />
+    <t-typography-paragraph>
+      <t-typography-text
+        strong="{{true}}"
+      >
+
+      TDesign features a unified design values, consistent design language, and visual style, helping users form
+      continuous and coherent perceptions of the experience.
+
+      </t-typography-text>
+
+    Based on this, TDesign offers out-typography-of-the-box UI component libraries, design guidelines, and design
+    assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it
+    facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.
+
+    </t-typography-paragraph>
+    <t-typography-title>
+      Comprehensive
+    </t-typography-title>
+    <t-typography-paragraph>
+
+    TDesign Support
+
+      <t-typography-text
+        code="{{true}}"
+      >
+        Vue 2
+      </t-typography-text>
+      , 
+      <t-typography-text
+        code="{{true}}"
+      >
+        Vue 3
+      </t-typography-text>
+      ,
+
+      <t-typography-text
+        code="{{true}}"
+      >
+        React
+      </t-typography-text>
+
+    components for Desktop Application and
+
+      <t-typography-text
+        code="{{true}}"
+      >
+        Vue 3
+      </t-typography-text>
+      ,
+
+      <t-typography-text
+        code="{{true}}"
+      >
+        Wechat MiniProgram
+      </t-typography-text>
+
+    components for Mobile Application.
+
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <wx-view>
+        • Features
+      </wx-view>
+      <wx-view>
+        • Comprehensive
+      </wx-view>
+      <wx-view
+        style="padding-left: 24rpx"
+      >
+        • Consistency
+      </wx-view>
+      <wx-view
+        style="padding-left: 24rpx"
+      >
+        • Usability
+      </wx-view>
+      <wx-view>
+        • Join TDesign
+      </wx-view>
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <wx-view>
+        1. Features
+      </wx-view>
+      <wx-view>
+        2. Comprehensive
+      </wx-view>
+      <wx-view
+        style="padding-left: 24rpx"
+      >
+        1. Consistency
+      </wx-view>
+      <wx-view
+        style="padding-left: 24rpx"
+      >
+        2. Usability
+      </wx-view>
+      <wx-view>
+        3. Join TDesign
+      </wx-view>
+    </t-typography-paragraph>
+  </wx-view>
+</combination>
+`;
+
+exports[`Paragraph Paragraph copyable demo works fine 1`] = `
+<copyable>
+  <wx-view
+    class="typography-example"
+  >
+    <t-typography-text
+      content="This is a copyable text."
+      copyable="{{true}}"
+    />
+  </wx-view>
+</copyable>
+`;
+
+exports[`Paragraph Paragraph ellipsis demo works fine 1`] = `
+<ellipsis>
+  <wx-view
+    class="typography-example typography-example--border"
+  >
+    <t-typography-paragraph
+      content="TDesign 秉承开放的设计理念从创立之初就采用开源协作的方式进行设计和开发。协作方案讨论、组件设计以及 API 设计，包括源代码在内均在公司内部完全开放，赢得了内部开发者和设计师的广泛关注。TDesign 遵循平等、开放、严格的原则，不论参与者的角色如何。"
+      ellipsis="{{true}}"
+    />
+  </wx-view>
+  <wx-view
+    class="typography-example"
+  >
+    <t-typography-paragraph
+      content="TDesign 秉承开放的设计理念从创立之初就采用开源协作的方式进行设计和开发。协作方案讨论、组件设计以及 API 设计，包括源代码在内均在公司内部完全开放，赢得了内部开发者和设计师的广泛关注。TDesign 遵循平等、开放、严格的原则，不论参与者的角色如何。"
+      ellipsis="{{
+        Object {
+          "collapsible": true,
+          "expandable": true,
+          "row": 2,
+        }
+      }}"
+    />
+  </wx-view>
+</ellipsis>
+`;
+
+exports[`Paragraph Paragraph theme demo works fine 1`] = `
+<theme>
+  <wx-view
+    class="typography-example typography-example--theme"
+  >
+    <t-typography-text
+      content="常规"
+      theme="primary"
+    />
+    <t-typography-text
+      content="主色"
+      theme="secondary"
+    />
+    <t-typography-text
+      content="成功"
+      theme="success"
+    />
+    <t-typography-text
+      content="警告"
+      theme="warning"
+    />
+    <t-typography-text
+      content="错误"
+      theme="error"
+    />
+    <t-typography-text
+      content="标记"
+      mark="{{true}}"
+    />
+  </wx-view>
+</theme>
+`;

packages/components/paragraph/__test__/demo.test.js

@@ -0,0 +1,19 @@
+/**
+ * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
+ */
+
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+const mapper = ['base', 'combination', 'copyable', 'ellipsis', 'theme'];
+
+describe('Paragraph', () => {
+  mapper.forEach((demoName) => {
+    it(`Paragraph ${demoName} demo works fine`, () => {
+      const id = load(path.resolve(__dirname, `../../paragraph/_example/${demoName}/index`), demoName);
+      const container = simulate.render(id);
+      container.attach(document.createElement('parent-wrapper'));
+      expect(container.toJSON()).toMatchSnapshot();
+    });
+  });
+});

packages/components/paragraph/_example/base/index.js

@@ -0,0 +1 @@
+Component({});

packages/components/paragraph/_example/base/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "t-typography-text": "tdesign-miniprogram/text/text"
+  }
+}