fix(blockheader): change some review comment and different font-size (#481)

* fix(blockheader): change some review comment and different font-size

* fix(copy): change copy demo

Author: LuckyFBB

src/blockHeader/__tests__/blockHeader.test.tsx

@@ -79,16 +79,19 @@ describe('test BlockHeader render', () => {
         expect(getByText('说明文字')).toHaveClass('title__description');
         expect(getByText('Icon')).toBeTruthy();
     });
-    test('should render BlockHeader background success', () => {
+    test('should render BlockHeader background false success', () => {
         const props = { title: '测试1', background: false };
         const { container } = render(<BlockHeader {...props} />);
         const wrap = container.firstChild;
-        expect(wrap!.firstChild).not.toHaveClass(`background`);
+        expect(wrap!.firstChild).not.toHaveClass(`dtc-block-header__title--background`);
     });
-    test('should render BlockHeader className when isSmall is small', () => {
+    test('should render BlockHeader className when size is small', () => {
         const { container, getByText } = render(<BlockHeader {...props2} />);
         const wrap = container.firstChild!;
         expect(wrap).toHaveClass(`${prefixCls} test__className`);
+        expect(wrap.firstChild).toHaveClass(
+            `dtc-block-header__title dtc-block-header__title--small dtc-block-header__title--background`
+        );
         expect(getByText('标题2')).toHaveClass('title__text');
         expect(getByText('说明文字')).toHaveClass('title__description');
         expect(getByText('Icon')).toBeTruthy();
@@ -97,16 +100,17 @@ describe('test BlockHeader render', () => {
     test('should render BlockHeader tooltip success', () => {
         const { container } = render(<BlockHeader {...props3} />);
         const wrap = container.firstChild!;
-        const afterTitleWrap = wrap.firstChild!.firstChild!.lastChild;
-        expect(afterTitleWrap!.firstChild).toHaveClass('anticon-question-circle');
+        const tooltipWrap = wrap.firstChild!.firstChild!.lastChild;
+        expect(tooltipWrap!.firstChild).toHaveClass('anticon-question-circle');
     });
 
-    test('should render BlockHeader tooltip and desc success', () => {
+    test('should render BlockHeader description success', () => {
         const { container } = render(<BlockHeader {...props4} />);
         const wrap = container.firstChild!;
-        const afterTitleWrap = wrap.firstChild!.firstChild!.lastChild;
-        expect(afterTitleWrap).toHaveTextContent('说明文字');
+        const description = wrap.firstChild!.firstChild!.lastChild;
+        expect(description).toHaveTextContent('说明文字');
     });
+
     test('should render BlockHeader correct dom length', () => {
         const { container } = render(<BlockHeader title="分类级别" addonBefore="" />);
         const titleBoxWrap = container.firstChild!.firstChild!.firstChild;
@@ -118,6 +122,7 @@ describe('test BlockHeader render', () => {
         const titleBoxWrap1 = container1.firstChild!.firstChild!.firstChild;
         expect(titleBoxWrap1!.childNodes.length).toEqual(3);
     });
+
     test('should render BlockHeader correct margin-bottom', () => {
         const { container: noStyle } = render(<BlockHeader title="分类级别" addonBefore="" />);
         expect(noStyle.querySelector('.dtc-block-header')).not.toHaveAttribute('style');

src/blockHeader/demos/basic.tsx

@@ -44,8 +44,8 @@ export default () => {
                 size={size}
                 title="分类标题"
                 background={showBackground}
-                tooltip={tooltip && '这里展示问号提示'}
-                description={description && '提示说明文字'}
+                tooltip={tooltip ? '这里展示问号提示' : ''}
+                description={description ? '提示说明文字' : ''}
             />
         </div>
     );

src/blockHeader/style.scss

@@ -7,25 +7,25 @@ $card_prefix: "dtc-block-header";
         align-items: center;
         justify-content: space-between;
         &--large {
-            .#{$card_prefix}-title-box {
+            .title__box {
                 line-height: 24px;
-                .#{$card_prefix}-title {
+                .title__text {
                     font-size: 16px;
                 }
             }
         }
         &--middle {
-            .#{$card_prefix}-title-box {
+            .title__box {
                 line-height: 22px;
-                .#{$card_prefix}-title {
+                .title__text {
                     font-size: 14px;
                 }
             }
         }
         &--small {
-            .#{$card_prefix}-title-box {
+            .title__box {
                 line-height: 20px;
-                .#{$card_prefix}-title {
+                .title__text {
                     font-size: 12px;
                 }
             }

src/copy/demos/basic.tsx

@@ -19,8 +19,8 @@ export default () => {
                 <p>{text}</p>
             </div>
             <div>
-                <BlockHeader title={`使用 ()=>React.ReactNode`} background={false} size="small" />
-                <Copy text={text} tooltip={() => `使用 ()=>React.ReactNode，复制该文本`} />
+                <BlockHeader title={`使用 () => React.ReactNode`} background={false} size="small" />
+                <Copy text={text} tooltip={() => `使用 () => React.ReactNode，复制该文本`} />
                 <p>{text}</p>
             </div>
         </Space>