From 5dca297fdff21aa39fe31ae034af8380633f769d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B9=A4=E4=BB=99?= <guoyunhe.gyh@alibaba-inc.com>
Date: Mon, 29 Jul 2024 14:52:03 +0800
Subject: [PATCH] feat(Card): icon prop

---
 src/components/card/card.less           |  1 +
 src/components/card/card.patch.less     |  6 ++++++
 src/components/card/card.tsx            | 12 +++++++++---
 src/components/card/demos/demo1.tsx     | 14 +++++---------
 src/components/card/index.en.md         |  2 ++
 src/components/card/index.zh.md         |  2 ++
 src/components/card/tests/card.test.tsx | 25 +++++++++++--------------
 7 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/components/card/card.less b/src/components/card/card.less
index 9b16b8f1a5..ba31f08a36 100644
--- a/src/components/card/card.less
+++ b/src/components/card/card.less
@@ -9,6 +9,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: var(--adm-card-header-gap, 8px);
     box-sizing: border-box;
     padding: var(--adm-card-header-padding-block, 12px) 0;
     &:not(:last-child) {
diff --git a/src/components/card/card.patch.less b/src/components/card/card.patch.less
index 06d9083701..a1b2aa81a6 100644
--- a/src/components/card/card.patch.less
+++ b/src/components/card/card.patch.less
@@ -12,6 +12,12 @@
     &-title {
       font-size: 15px;
     }
+    &-icon {
+      margin-right: 8px;
+    }
+    &-extra {
+      margin-left: 8px;
+    }
   }
   &-body {
     padding: 12px 0;
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index b503beb25a..992de61950 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -1,12 +1,13 @@
-import React from 'react'
-import type { FC, ReactNode, CSSProperties } from 'react'
 import classNames from 'classnames'
+import type { CSSProperties, FC, ReactNode } from 'react'
+import React from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 const classPrefix = `adm-card`
 
 export type CardProps = {
   title?: ReactNode
+  icon?: ReactNode
   extra?: ReactNode
   headerStyle?: CSSProperties
   headerClassName?: string
@@ -29,8 +30,13 @@ export const Card: FC<CardProps> = props => {
         style={props.headerStyle}
         onClick={props.onHeaderClick}
       >
+        {props.icon && (
+          <div className={`${classPrefix}-header-icon`}>{props.icon}</div>
+        )}
         <div className={`${classPrefix}-header-title`}>{props.title}</div>
-        {props.extra}
+        {props.extra && (
+          <div className={`${classPrefix}-header-extra`}>{props.extra}</div>
+        )}
       </div>
     )
   }
diff --git a/src/components/card/demos/demo1.tsx b/src/components/card/demos/demo1.tsx
index b90cc02cdd..58c612d06d 100644
--- a/src/components/card/demos/demo1.tsx
+++ b/src/components/card/demos/demo1.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Card, Toast, Button } from 'antd-mobile'
-import { DemoBlock } from 'demos'
+import { Button, Card, Toast } from 'antd-mobile'
 import { AntOutline, RightOutline } from 'antd-mobile-icons'
+import { DemoBlock } from 'demos'
+import React from 'react'
 
 import styles from './demo1.less'
 
@@ -35,12 +35,8 @@ export default () => {
 
       <DemoBlock title='自定义卡片内容' background='gray'>
         <Card
-          title={
-            <div style={{ fontWeight: 'normal' }}>
-              <AntOutline style={{ marginRight: '4px', color: '#1677ff' }} />
-              卡片标题
-            </div>
-          }
+          icon={<AntOutline style={{ color: '#1677ff' }} />}
+          title={<div style={{ fontWeight: 'normal' }}>卡片标题</div>}
           extra={<RightOutline />}
           onBodyClick={onBodyClick}
           onHeaderClick={onHeaderClick}
diff --git a/src/components/card/index.en.md b/src/components/card/index.en.md
index 796910b8ae..fdbfad1bbf 100644
--- a/src/components/card/index.en.md
+++ b/src/components/card/index.en.md
@@ -21,6 +21,7 @@ It can carry text, lists, pictures, paragraphs, etc., which is convenient for us
 | extra | The right area of the header | `ReactNode` | - |
 | headerClassName | The custom class name of the header | `string` | - |
 | headerStyle | The custom style of the header | `React.CSSProperties` | - |
+| icon | The left icon of the header | `ReactNode` | - |
 | onBodyClick | The click event of the body area | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onClick | The click event of the Card | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | The click event of the header area | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
@@ -34,5 +35,6 @@ It can carry text, lists, pictures, paragraphs, etc., which is convenient for us
 | `--adm-card-padding-inline` | Horizontal padding of the card. | `12px` | `--adm-card-padding-inline` |
 | `--adm-card-header-border-width` | Bottom border width of the card header. | `0.5px` | `--adm-card-header-border-width` |
 | `--adm-card-header-border-color` | Bottom border color of the card header. | `var(--adm-color-border)` | `--adm-card-header-border-color` |
+| `--adm-card-header-gap` | Horizontal gap of the card header. | `8px` | `--adm-card-header-gap` |
 | `--adm-card-header-padding-block` | Vertical of the card header. | `12px` | `--adm-card-header-padding-block` |
 | `--adm-card-body-padding-block` | Vertical padding of the card body. | `12px` | `--adm-card-body-padding-block` |
diff --git a/src/components/card/index.zh.md b/src/components/card/index.zh.md
index 5de22c6af8..6c73b4fcde 100644
--- a/src/components/card/index.zh.md
+++ b/src/components/card/index.zh.md
@@ -21,6 +21,7 @@
 | extra | header 右边区域 | `ReactNode` | - |
 | headerClassName | header 自定义类名 | `string` | - |
 | headerStyle | header 自定义样式 | `React.CSSProperties` | - |
+| icon | header 左边图标 | `ReactNode` | - |
 | onBodyClick | body 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onClick | 卡片点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | header 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
@@ -34,5 +35,6 @@
 | `--adm-card-padding-inline` | 水平内边距 | `12px` | `--adm-card-padding-inline` |
 | `--adm-card-header-border-width` | header 分割线宽度 | `0.5px` | `--adm-card-header-border-width` |
 | `--adm-card-header-border-color` | header 分割线颜色 | `var(--adm-color-border)` | `--adm-card-header-border-color` |
+| `--adm-card-header-gap` | header 水平间隙 | `8px` | `--adm-card-header-gap` |
 | `--adm-card-header-padding-block` | header 垂直内边距 | `12px` | `--adm-card-header-padding-block` |
 | `--adm-card-body-padding-block` | body 垂直内边距 | `12px` | `--adm-card-body-padding-block` |
diff --git a/src/components/card/tests/card.test.tsx b/src/components/card/tests/card.test.tsx
index abbe34c125..aee38c49f5 100644
--- a/src/components/card/tests/card.test.tsx
+++ b/src/components/card/tests/card.test.tsx
@@ -1,6 +1,6 @@
+import { RightOutline } from 'antd-mobile-icons'
 import * as React from 'react'
 import { fireEvent, render, testA11y, waitFor } from 'testing'
-import { AppOutline, RightOutline } from 'antd-mobile-icons'
 import Card from '../'
 
 const classPrefix = `adm-card`
@@ -10,9 +10,9 @@ it('passes a11y test', async () => {
 })
 
 test('renders with title', () => {
-  const { getByText } = render(<Card title='title'>Card</Card>)
+  const { getByText } = render(<Card title='title'>body</Card>)
   expect(getByText('title')).toHaveClass(`${classPrefix}-header-title`)
-  expect(getByText('Card')).toHaveClass(`${classPrefix}-body`)
+  expect(getByText('body')).toHaveClass(`${classPrefix}-body`)
 })
 
 test('renders with event', async () => {
@@ -21,24 +21,21 @@ test('renders with event', async () => {
 
   const { getByText } = render(
     <Card
-      title={
-        <div style={{ fontWeight: 'normal' }}>
-          <AppOutline style={{ marginRight: '4px', color: '#1677ff' }} />
-          卡片标题
-        </div>
-      }
+      icon={'icon'}
+      title={'title'}
       extra={<RightOutline />}
       onBodyClick={onBodyClick}
       onHeaderClick={onHeaderClick}
     >
-      Card
+      body
     </Card>
   )
-  fireEvent.click(getByText('卡片标题'))
+  fireEvent.click(getByText('title'))
+  fireEvent.click(getByText('icon'))
   await waitFor(() => {
-    expect(onHeaderClick).toBeCalledTimes(1)
+    expect(onHeaderClick).toBeCalledTimes(2)
   })
-  fireEvent.click(getByText('Card'))
+  fireEvent.click(getByText('body'))
   await waitFor(() => {
     expect(onBodyClick).toBeCalledTimes(1)
   })
@@ -46,7 +43,7 @@ test('renders with event', async () => {
 
 test('renders without children', async () => {
   const { getByTestId } = render(
-    <Card title={'标题'} data-testid='test-card-id' />
+    <Card title={'title'} data-testid='test-card-id' />
   )
   expect(getByTestId('test-card-id')).not.toHaveClass(`${classPrefix}-body`)
 })