Add noHovering and Card.Grid (#6748)

* Add noHovering prop for Card

* Add Card.Grid

* fix snapshot

* change default card grid percent

components/card/Grid.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export interface CardGridProps {
+  prefixCls?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export default (props: CardGridProps) => {
+  const { prefixCls = 'ant-card', className, ...others } = props;
+  const classString = classNames(`${prefixCls}-grid`, className);
+  return <div {...others} className={classString} />;
+};

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -73,7 +73,70 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/card/demo/grid.md correctly 1`] = `
+exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
+<div
+  class="ant-card ant-card-bordered ant-card-no-hovering"
+>
+  <div
+    class="ant-card-head"
+  >
+    <h3
+      class="ant-card-head-title"
+    >
+      卡片标题
+    </h3>
+  </div>
+  <div
+    class="ant-card-body"
+    style="padding:0;"
+  >
+    <div
+      class="ant-card-grid"
+      style="width:25%;text-align:center;"
+    >
+      卡片内容
+    </div>
+    <div
+      class="ant-card-grid"
+      style="width:25%;text-align:center;"
+    >
+      卡片内容
+    </div>
+    <div
+      class="ant-card-grid"
+      style="width:25%;text-align:center;"
+    >
+      卡片内容
+    </div>
+    <div
+      class="ant-card-grid"
+      style="width:25%;text-align:center;"
+    >
+      卡片内容
+    </div>
+    <div
+      class="ant-card-grid"
+      style="width:25%;text-align:center;"
+    >
+      卡片内容
+    </div>
+    <div
+      class="ant-card-grid"
+      style="width:25%;text-align:center;"
+    >
+      卡片内容
+    </div>
+    <div
+      class="ant-card-grid"
+      style="width:25%;text-align:center;"
+    >
+      卡片内容
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
 <div
   style="background:#ECECEC;padding:30px;"
 >

components/card/demo/grid-card.md

@@ -0,0 +1,35 @@
+---
+order: 6
+title:
+  zh-CN: 网格型内嵌卡片
+  en-US: Grid card
+---
+
+## zh-CN
+
+一种常见的卡片内容区隔模式。
+
+## en-US
+
+Grid style card content.
+
+````jsx
+import { Card } from 'antd';
+
+const gridStyle = {
+  width: '25%',
+  textAlign: 'center',
+};
+
+ReactDOM.render(
+  <Card title="卡片标题" noHovering bodyStyle={{ padding: 0 }}>
+    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
+    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
+    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
+    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
+    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
+    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
+    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
+  </Card>
+, mountNode);
+````

components/card/demo/in-column.md

@@ -2,7 +2,7 @@
 order: 4
 title:
   zh-CN: 栅格卡片
-  en-US: Grid card
+  en-US: Card in column
 ---
 
 ## zh-CN
@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-Cards usually cooperate with grid layout in overview page.
+Cards usually cooperate with grid column layout in overview page.
 
 ````jsx
 import { Card, Col, Row } from 'antd';

components/card/index.en-US.md

@@ -17,10 +17,20 @@ A card can be used to display content related to a single subject. The content c
 <Card title="Card title">Card content</Card>
 ```
 
+### Card
+
 | Property     | Description           | Type     | Default       |
 |----------|----------------|----------|--------------|
 | title    | Card title | string\|ReactNode   |  -  |
 | extra    | Content to render in the top-right corner of the card | string\|ReactNode   | - |
 | bordered | Toggles rendering of the border around the card | boolean   |  true  |
 | bodyStyle | Inline style to apply to the card content | object   |  -  |
+| noHovering | Whether to be hovering when mouse over | boolean | true |
 | loading | Shows a loading indicator while the contents of the card are being fetched | boolean   |  false  |
+
+### Card.Grid
+
+Property | Description | Type | Default
+---------|-------------|------|---------
+className | className of container | string | -
+style | style object of container | object | -

components/card/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import Grid from './Grid';
 
 export interface CardProps {
   prefixCls?: string;
@@ -9,20 +10,22 @@ export interface CardProps {
   bodyStyle?: React.CSSProperties;
   style?: React.CSSProperties;
   loading?: boolean;
+  noHovering?: boolean;
   children?: any;
   id?: string;
   className?: string;
 }
 
-export default (props: CardProps) => {
+const Card = (props: CardProps) => {
   const {
-    prefixCls = 'ant-card', className, extra, bodyStyle,
+    prefixCls = 'ant-card', className, extra, bodyStyle, noHovering,
     title, loading, bordered = true, ...others,
   } = props;
   let children = props.children;
   const classString = classNames(prefixCls, className, {
     [`${prefixCls}-loading`]: loading,
     [`${prefixCls}-bordered`]: bordered,
+    [`${prefixCls}-no-hovering`]: noHovering,
   });
 
   if (loading) {
@@ -73,3 +76,7 @@ export default (props: CardProps) => {
     </div>
   );
 };
+
+(Card as any).Grid = Grid;
+
+export default Card;

components/card/index.zh-CN.md

@@ -18,10 +18,20 @@ cols: 1
 <Card title="卡片标题">卡片内容</Card>
 ```
 
+### Card
+
 | 参数     | 说明           | 类型     | 默认值       |
 |----------|----------------|----------|--------------|
 | title    | 卡片标题 | string\|ReactNode   |  -  |
 | extra    | 卡片右上角的操作区域 | string\|ReactNode   | - |
 | bordered | 是否有边框 | boolean   |  true  |
 | bodyStyle | 内容区域自定义样式 | object   |  -  |
+| noHovering | 鼠标移过时是否浮起 | boolean | true |
 | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean   |  false  |
+
+### Card.Grid
+
+Property | Description | Type | Default
+---------|-------------|------|---------
+className | 网格容器类名 | string | -
+style | 定义网格容器类名的样式 | object | -

components/card/style/index.less

@@ -1,4 +1,5 @@
 @import "../../style/themes/default";
+@import "../../style/mixins/index";
 
 @card-prefix-cls: ~"@{ant-prefix}-card";
 
@@ -9,7 +10,7 @@
   position: relative;
   transition: all .3s;
 
-  &:hover {
+  &:not(&-no-hovering):hover {
     box-shadow: @box-shadow-base;
     border-color: transparent;
   }
@@ -45,7 +46,9 @@
   }
 
   &-body {
-    padding: 24px;
+    padding: 24.5px;
+    margin: -0.5px;
+    .clearfix;
   }
 
   &-loading &-body {
@@ -61,6 +64,21 @@
 	  animation: card-loading 1.4s ease infinite;
     background-size: 600% 600%;
   }
+
+  &-grid {
+    border-radius: 0;
+    border: 0;
+    box-shadow: 0 0 0 0.5px @border-color-split, 0 0 0 0.5px @border-color-split inset;
+    width: 33.33%;
+    float: left;
+    padding: 24px;
+    transition: all .3s;
+    &:hover {
+      position: relative;
+      z-index: 1;
+      box-shadow: @box-shadow-base;
+    }
+  }
 }
 
 @keyframes card-loading {