feat(card): pro-card support Group and Divider (ant-design#992)

* feat: add divider and group

* chore(card): update card snapshot

* chore(card): move sub components to dir

* chore(card): sub components

packages/card/src/card.md

@@ -61,6 +61,12 @@ group:
 
 <code src="./demos/gutter.tsx" background="#f0f2f5" />
 
+### 分组展示
+
+你可以嵌套卡片组件来将内容分组, 以及 `Divider` 子组件来分隔这些内容。
+
+<code src="./demos/divider.tsx" background="#f0f2f5" />
+
 ### 标题带分割线
 
 当添加分隔线时会自动增加标题的高度与内容区域分开。
@@ -164,3 +170,11 @@ group:
 | key | 对应 activeKey，用于标定是否选中和 dom 更新，一定不要重复，不然会造成表现异常 | `string` | - |
 | tab | 选项卡头显示文字 | `ReactNode` | - |
 | disabled | 不可用 | `boolean` | false |
+
+### ProCard.Divider
+
+用于在将内容进行分组时进行分隔。
+
+### ProCard.Group
+
+属性同 ProCard，会取消卡片内容边距，用于将多个卡片进行分组。

packages/card/src/components/CardLoading/index.less

@@ -0,0 +1,40 @@
+@import (reference) '~antd/lib/style/themes/default';
+@pro-card-prefix-cls: ~'@{ant-prefix}-pro-card';
+
+@gradient-min: fade(@card-skeleton-bg, 20%);
+@gradient-max: fade(@card-skeleton-bg, 40%);
+
+.@{pro-card-prefix-cls} {
+  &-loading {
+    overflow: hidden;
+  }
+
+  &-loading &-body {
+    user-select: none;
+  }
+
+  &-loading-content {
+    p {
+      margin: 0;
+    }
+  }
+
+  &-loading-block {
+    height: 14px;
+    margin: 4px 0;
+    background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
+    background-size: 600% 600%;
+    border-radius: @card-radius;
+    animation: card-loading 1.4s ease infinite;
+  }
+}
+
+@keyframes card-loading {
+  0%,
+  100% {
+    background-position: 0 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}

packages/card/src/cardLoading.tsx → packages/card/src/components/CardLoading/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Row, Col } from 'antd';
 
-import './style/index.less';
+import './index.less';
 
 type CardLoadingProps = {
   /**

packages/card/src/components/Divider/index.less

@@ -0,0 +1,13 @@
+@import (reference) '~antd/lib/style/themes/default';
+@pro-card-prefix-cls: ~'@{ant-prefix}-pro-card';
+
+.@{pro-card-prefix-cls} {
+  // 分隔线
+  &-divider {
+    &-line {
+      width: @border-width-base;
+      margin: @padding-lg @padding-xs;
+      background-color: @border-color-split;
+    }
+  }
+}

packages/card/src/components/Divider/index.tsx

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+import { ConfigProvider } from 'antd';
+import classNames from 'classnames';
+
+import './index.less';
+
+export interface ProCardDividerProps {
+  /**
+   * @description 自定义前缀
+   * @ignore
+   */
+  prefixCls?: string;
+  /**
+   * @description 样式
+   * @ignore
+   */
+  style?: React.CSSProperties;
+  /**
+   * @description className
+   * @ignore
+   */
+  className?: string;
+}
+
+const ProCardDivider: React.FC<ProCardDividerProps> = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-card-divider');
+
+  const { className, style = {}, children } = props;
+
+  const classString = classNames(prefixCls, className, {
+    [`${prefixCls}-line`]: children === undefined,
+  });
+
+  return (
+    <div className={classString} style={style}>
+      {children}
+    </div>
+  );
+};
+
+export default ProCardDivider;

packages/card/src/components/TabPane/index.less

@@ -0,0 +1,58 @@
+@import (reference) '~antd/lib/style/themes/default';
+@pro-card-prefix-cls: ~'@{ant-prefix}-pro-card';
+
+.@{pro-card-prefix-cls} {
+  &-tabs {
+    // 上
+    .@{ant-prefix}-tabs-top > .@{ant-prefix}-tabs-nav {
+      margin-bottom: 0;
+      .@{ant-prefix}-tabs-nav-list {
+        padding-left: @padding-md;
+        margin-top: @margin-xs;
+      }
+    }
+
+    // 下
+    .@{ant-prefix}-tabs-bottom > .@{ant-prefix}-tabs-nav {
+      margin-top: 0;
+      .@{ant-prefix}-tabs-nav-list {
+        padding-left: @padding-md;
+      }
+    }
+
+    // 左
+    .@{ant-prefix}-tabs-left {
+      .@{ant-prefix}-tabs-content-holder {
+        .@{ant-prefix}-tabs-content {
+          .@{ant-prefix}-tabs-tabpane {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+    // 直接子元素才设置
+    .@{ant-prefix}-tabs-left > .@{ant-prefix}-tabs-nav {
+      margin-right: 0;
+      .@{ant-prefix}-tabs-nav-list {
+        padding-top: @padding-md;
+      }
+    }
+
+    // 右
+    .@{ant-prefix}-tabs-right {
+      .@{ant-prefix}-tabs-content-holder {
+        .@{ant-prefix}-tabs-content {
+          .@{ant-prefix}-tabs-tabpane {
+            padding-right: 0;
+          }
+        }
+      }
+    }
+    // 直接子元素
+    .@{ant-prefix}-tabs-right > .@{ant-prefix}-tabs-nav {
+      .@{ant-prefix}-tabs-nav-list {
+        padding-top: @padding-md;
+      }
+    }
+  }
+}

packages/card/src/tabPane.tsx → packages/card/src/components/TabPane/index.tsx

@@ -2,9 +2,8 @@ import React, { useContext } from 'react';
 import { Tabs, ConfigProvider } from 'antd';
 import { TabPaneProps } from 'antd/lib/tabs';
 import classNames from 'classnames';
-
-import './style/index.less';
-import ProCard, { ProCardProps } from './index';
+import './index.less';
+import ProCard, { ProCardProps } from '../../index';
 
 export interface ProCardTabPaneProps extends TabPaneProps, ProCardProps {
   key?: string;

packages/card/src/demos/divider.tsx

@@ -0,0 +1,31 @@
+/**
+ * uuid: ff1e143f
+ * title: 分组指标
+ */
+
+import React from 'react';
+import { Statistic } from 'antd';
+import ProCard from '@ant-design/pro-card';
+
+const { Divider } = ProCard;
+
+export default () => {
+  return (
+    <ProCard.Group title="核心指标">
+      <ProCard>
+        <Statistic title="今日UV" value={79.0} precision={2} />
+      </ProCard>
+      <Divider />
+      <ProCard>
+        <Statistic title="冻结金额" value={112893.0} precision={2} />
+      </ProCard>
+      <Divider />
+      <ProCard>
+        <Statistic title="信息完整度" value={93} suffix="/ 100" />
+      </ProCard>
+      <ProCard>
+        <Statistic title="冻结金额" value={112893.0} />
+      </ProCard>
+    </ProCard.Group>
+  );
+};

packages/card/src/index.tsx

@@ -1,19 +1,22 @@
-import React, { ReactNode, useContext } from 'react';
+import React, { PropsWithChildren, ReactNode, useContext } from 'react';
 import { Grid, Tabs, ConfigProvider } from 'antd';
 import { RightOutlined } from '@ant-design/icons';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { LabelIconTip } from '@ant-design/pro-utils';
 import classNames from 'classnames';
 import { TabsProps } from 'antd/lib/tabs';
-import CardLoading from './cardLoading';
-import TabPane from './tabPane';
+import CardLoading from './components/CardLoading';
+import Divider from './components/Divider';
+import TabPane from './components/TabPane';
 import './style/index.less';
 
 const { useBreakpoint } = Grid;
 
 type ProCardType = React.FC<ProCardProps> & {
   isProCard: boolean;
   TabPane: typeof TabPane;
+  Divider: typeof Divider;
+  Group: typeof Group;
 };
 
 type ProCardChildType = React.ReactElement<ProCardProps, ProCardType>;
@@ -334,7 +337,13 @@ const ProCard: ProCardType = (props) => {
   );
 };
 
+const Group = (props: PropsWithChildren<ProCardProps>) => (
+  <ProCard bodyStyle={{ padding: 0 }} {...props} />
+);
+
 ProCard.isProCard = true;
 ProCard.TabPane = TabPane;
+ProCard.Divider = Divider;
+ProCard.Group = Group;
 
 export default ProCard;