feat(card): complete card component

.storybook/preview.js

@@ -30,6 +30,7 @@ const loaderFn = () => {
 		require("../src/components/Avatar/avatar.stories.mdx"),
 		require("../src/components/Badge/badge.stories.mdx"),
 		require("../src/components/Button/button.stories.mdx"),
+		require("../src/components/Card/card.stories.mdx"),
 		require("../src/components/Carousel/carousel.stories.mdx"),
 		require("../src/components/Input/input.stories.mdx"),
 		require("../src/components/InputNumber/inputnumber.stories.mdx"),
@@ -53,6 +54,7 @@ const loaderFn = () => {
 		require("../src/components/Progress/progress.stories.mdx"),
 		require("../src/components/Popconfirm/popconfirm.stories.mdx"),
 		require("../src/components/Message/message.stories.mdx"),
+		require("../src/components/I18n/i18n.stories.mdx"),
 		require("../src/components/Transition/transition.stories.mdx"),
 		require("../src/hooks/useForm.stories.mdx"),
 		require("../src/hooks/useClickOutside.stories.mdx"),

package.json

@@ -100,6 +100,7 @@
     "gulp-typescript": "^6.0.0-alpha.1",
     "husky": "^4.2.5",
     "node-sass": "^4.14.1",
+    "np": "^6.2.5",
     "plop": "^2.7.1",
     "react": "^16.13.1",
     "react-docgen-typescript-loader": "^3.7.2",
@@ -129,5 +130,10 @@
     "dist/esm/**/*.scss",
     "dist/cjs/**/*.scss",
     "dist/*.css"
-  ]
+  ],
+  "np": {
+    "yolo":true,
+    "contents": "dist",
+    "preview":true
+}
 }

plop-template/componentStories.hbs

@@ -1,7 +1,7 @@
 import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
 import  {{name}}  from './{{lowerCase name}}';
 
-<Meta title='DISPLAY |{{name}} ' component={ {{name}}}/>
+<Meta title='DISPLAY |{{name}} ' component={ {{name}} }/>
 
 <br/>
 

plop-template/componentStyle.hbs

@@ -1 +0,0 @@
-_

src/components/Avatar/avatar.tsx

@@ -1,7 +1,7 @@
 import React, { FC, DOMAttributes } from "react";
 import classNames from "classnames";
 
-interface AvatarProps extends DOMAttributes<HTMLDivElement> {
+export interface AvatarProps extends DOMAttributes<HTMLDivElement> {
 	/** 大小*/
 	size?: "lg" | "sm" | "default";
 	/** 圆形 */

src/components/Card/_style.scss

@@ -0,0 +1,27 @@
+.bigbear-card-wrapper{
+    padding:$card-wrapper-padding;
+    .bigbear-card-img{
+        width:100%;
+        padding:$card-wrapper-padding;
+        >img{
+            width: 100%;
+        }
+    }
+    .bigbear-card-bottom{
+        padding:$card-wrapper-padding;
+        .bigbear-card-btitle{
+            font-size: $font-size-lg;
+            font-weight: $font-weight-bold;
+
+        }
+    }
+    .bigbear-card-id{
+        display: flex;
+        justify-content:flex-start;
+        align-items: center;
+        .bigbear-card-text{
+            flex:1;
+            margin-left: $card-wrapper-padding *2 ;
+        }
+    }
+}

src/components/Card/card.stories.mdx

@@ -0,0 +1,85 @@
+import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
+import  Card  from './card';
+import Icon from '../Icon';
+import Button from '../Button'
+
+<Meta title='DISPLAY |Card 卡片' component={ Card }/>
+
+<br/>
+
+# Card 卡片
+<br/>
+
+## 基本使用
+
+<Preview>
+    <Story name='default'>
+        <Card 
+        img={<img 
+        src='http://n.sinaimg.cn/tech/5_img/upload/598c9e2d/153/w572h381/20200622/af00-ivffpct3576810.jpg'> 
+        </img>}
+        style={{width:'300px'}}
+        bottomTitle='日偏食'
+        bottomDescription='当地时间2020年6月21日，全球多国上演“超级日环食”奇观，这次日环食是本世纪迄今为止最壮观的一次。太阳将有超过99%的面积被月球遮住，只剩下一圈金边，非常罕见，又被称为“金边日食”。'
+        ></Card>
+    </Story>
+</Preview>
+
+## color&elevate
+
+<Preview>
+    <Story name='default2'>
+        <Card 
+        img={<img 
+        src='http://n.sinaimg.cn/tech/5_img/upload/598c9e2d/153/w572h381/20200622/af00-ivffpct3576810.jpg'> 
+        </img>}
+        cardType='primary'
+        elevateCard='wrapper'
+
+        imgType='danger'
+        bottomType='info'
+        style={{width:'300px'}}
+        bottomTitle='日偏食'
+        bottomDescription='当地时间2020年6月21日，全球多国上演“超级日环食”奇观，这次日环食是本世纪迄今为止最壮观的一次。太阳将有超过99%的面积被月球遮住，只剩下一圈金边，非常罕见，又被称为“金边日食”。'
+        ></Card>
+    </Story>
+</Preview>
+
+## id
+
+<Preview>
+    <Story name='default3'>
+        <Card 
+            avatarProps={{
+                children:<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>,
+                round:true
+
+                }}
+            type='id'
+            idText={<div >
+                    <div style={{fontWeight:700}}>yehuozhili</div>
+                    <div>bigbear-ui</div>
+                </div>}
+
+        style={{width:'300px'}}
+        >
+        <div style={{display:'flex',alignItem:'center',justifyContent:'space-evenly'}}>
+            <Button>
+            <Icon icon='coffee'></Icon>
+            </Button>
+              <Button>
+            <Icon icon='user'></Icon>
+            </Button>
+              <Button>
+            <Icon icon='bookmark'></Icon>
+            </Button>
+        </div>
+        </Card>
+    </Story>
+</Preview>
+
+
+
+## 属性详情
+
+<Props of={ Card }/>

src/components/Card/card.tsx

@@ -0,0 +1,105 @@
+import React, { PropsWithChildren, ReactNode, CSSProperties } from "react";
+import classNames from "classnames";
+import Avatar from "../Avatar";
+import { AvatarProps } from "../Avatar/avatar";
+export type normalType =
+	| "primary"
+	| "default"
+	| "danger"
+	| "secondary"
+	| "success"
+	| "info"
+	| "light"
+	| "warning"
+	| "dark";
+
+export interface CardProps {
+	/** 卡片类型结构 */
+	type?: "default" | "id";
+	/** 是*/
+	style?: CSSProperties;
+	/** 显示的图片 */
+	img?: ReactNode;
+	/** 头像传参，参考avatar组件*/
+	avatarProps?: PropsWithChildren<AvatarProps>;
+	/** 头像旁区域 */
+	idText?: ReactNode;
+	/** 底部标题，也可以通过children自定义 */
+	bottomTitle?: ReactNode;
+	/** 底部描述，也可以通过children自定义 */
+	bottomDescription?: ReactNode;
+	/** 卡片底座颜色 */
+	cardType?: normalType;
+	/** 卡片底座凹凸 */
+	elevateCard?: "block" | "wrapper";
+	/** 卡片上部颜色 */
+	imgType?: normalType;
+	/** 卡片上部凹凸 */
+	elevateImg?: "block" | "wrapper";
+	/** 卡片底部颜色 */
+	bottomType?: normalType;
+	/** 卡片底部凹凸 */
+	elevateBottom?: "block" | "wrapper";
+	/** 外部容器额外类名 */
+	className?: string;
+}
+
+function Card(props: PropsWithChildren<CardProps>) {
+	const {
+		type,
+		style,
+		img,
+		cardType,
+		imgType,
+		className,
+		bottomType,
+		elevateCard,
+		elevateImg,
+		elevateBottom,
+		children,
+		bottomTitle,
+		bottomDescription,
+		avatarProps,
+		idText
+	} = props;
+	const wrapperClass = classNames("bigbear-card-wrapper", className, {
+		[`bigbear-layout-${elevateCard}-${cardType}`]: cardType
+	});
+	const imgClass = classNames("bigbear-card-img", {
+		[`bigbear-layout-${elevateImg}-${imgType}`]: imgType
+	});
+	const bottomClass = classNames("bigbear-card-bottom", {
+		[`bigbear-layout-${elevateBottom}-${bottomType}`]: bottomType
+	});
+	return (
+		<div className={wrapperClass} style={style}>
+			<div className={imgClass}>
+				{type === "default" && img}
+
+				{type === "id" && (
+					<div className="bigbear-card-id">
+						<Avatar {...avatarProps}></Avatar>
+						<div className="bigbear-card-text">{idText}</div>
+					</div>
+				)}
+			</div>
+			<div className={bottomClass}>
+				<div className="bigbear-card-btitle">{bottomTitle}</div>
+				<div className="bigbear-card-bsubs">{bottomDescription}</div>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+Card.defaultProps = {
+	type: "default",
+	cardType: "default",
+	elevateCard: "block",
+	imgType: "default",
+	elevateImg: "block",
+	bottomType: "default",
+	elevateBottom: "block"
+};
+
+export default Card;

src/components/Card/index.tsx

@@ -0,0 +1,3 @@
+import Card from "./card";
+
+export default Card;

src/index.tsx

@@ -29,6 +29,8 @@ export { default as Row } from "./components/Grid";
 export { Col } from "./components/Grid";
 export { default as Upload } from "./components/Upload";
 export { default as InputNumber } from "./components/InputNumber";
+export { default as Card } from "./components/Card";
+export { default as I18n } from "./components/I18n";
 
 export { default as useClickOutside } from "./hooks/useClickOutside";
 export { default as useDebounce } from "./hooks/useDebounce";

src/styles/_variables.scss

@@ -396,4 +396,8 @@ $media-width-sm:576px;
 $media-width-md:768px;
 $media-width-lg:992px;
 $media-width-xl:1200px;
-$media-width-xxl:1600px;
+$media-width-xxl:1600px;
+
+
+//card
+$card-wrapper-padding:10px;

src/styles/index.scss

@@ -86,4 +86,7 @@
 @import "../components/Upload/style";
 
 //inputnumber
-@import "../components/InputNumber/style"
+@import "../components/InputNumber/style";
+
+//card
+@import "../components/Card/style";