Alert组件

docs/index.mdx

@@ -11,7 +11,7 @@ import Alert from '../src/Alert';
 
 ## 入门示例
 
-<Alert message="提示信息"  showIcon />
+<Alert message="提示信息"  />
 
 ## 设置显示关闭按钮
 

package.json

@@ -86,6 +86,7 @@
     "docz-theme-default": "^1.2.0",
     "gh-pages": "^2.2.0",
     "husky": "^4.0.1",
+    "jest-styled-components": "^6.3.4",
     "lint-staged": "^9.5.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",

src/Alert.spec.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Alert from './Alert';
+
+afterEach(cleanup);
+
+test('关闭动画结束后触发的回调函数', () => {
+  // 测试首次渲染和 effect
+  const { getByTestId } = render(<Alert />);
+
+  const label = getByTestId('label');
+  const button = getByTestId('button');
+
+  // expect(label).toHaveTextContent('You clicked 0 times');
+  // expect(document.title).toBe('You clicked 0 times');
+
+  // 测试第二次渲染和 effect
+  fireEvent.click(button);
+  // expect(label).toHaveTextContent('You clicked 1 times');
+  expect(document.body).toBeNull();
+});

src/Alert.tsx

@@ -41,6 +41,7 @@ body{
 const Div = styled.div<{
   description?: React.ReactNode;
   showIcon?: boolean;
+  type?: 'info' | 'success' | 'warning' | 'error';
 }>`
   position: relative;
   padding: ${(props) =>
@@ -49,12 +50,19 @@ const Div = styled.div<{
       ? '15px 34px 15px 64px'
       : props.showIcon && !props.description
       ? '8px 34px 8px 37px'
-      : '8px 34px 15px 15px'};
+      : '8px 34px 8px 15px'};
   color: rgba(0, 0, 0, 0.65);
   line-height: 1.5;
   border-radius: 4px;
-  background-color: ${(props) => props.theme.palette.background.default};
-  border: 1px solid ${(props) => props.theme.palette.primary[100]};
+  background-color: ${(props) =>
+    props.theme.palette.type === 'light'
+      ? props.theme.palette[props.type || 'info'][50]
+      : props.theme.palette[props.type || 'info'][200]};
+  border: 1px solid
+    ${(props) =>
+      props.theme.palette.type === 'light'
+        ? props.theme.palette[props.type || 'info'][100]
+        : props.theme.palette[props.type || 'info'][300]};
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
@@ -200,10 +208,13 @@ function Alert(props: Props) {
         <Div
           showIcon={showIcon}
           description={description}
+          type={type}
           className={className}
         >
           {showIcon ? (
-            <DenseIcon description={description}>{iconNode}</DenseIcon>
+            <DenseIcon description={description} color={type}>
+              {iconNode}
+            </DenseIcon>
           ) : null}
           <div>
             <Span description={description}>{message}</Span>

yarn.lock

@@ -4087,7 +4087,7 @@ css.escape@^1.5.1:
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
   integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
 
-css@^2.2.3:
+css@^2.2.3, css@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
   integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
@@ -7553,6 +7553,13 @@ jest-snapshot@^24.9.0:
     pretty-format "^24.9.0"
     semver "^6.2.0"
 
+jest-styled-components@^6.3.4:
+  version "6.3.4"
+  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-6.3.4.tgz#64de9c0ceae14f311248734c79dcc66b447f90f1"
+  integrity sha512-dc32l0/6n3FtsILODpvKNz6SLg50OmbJ/3r3oRh9jc2VIPPGZT5jWv7BKIcNCYH7E38ZK7uejNl3zJsCOIenng==
+  dependencies:
+    css "^2.2.4"
+
 jest-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"