Merge pull request #386 from iCHEF/feature/show_error_msg_on_section

[Section] 支援顯示錯誤訊息
iCHEF · Sep 29, 2022 · 558abda · 558abda
2 parents d32b4ab + 2c3e460
commit 558abda
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 10 deletions.
diff --git a/packages/core/src/List.js b/packages/core/src/List.js
@@ -8,6 +8,7 @@ import icBEM from './utils/icBEM';
 
 import Section from './Section';
 import ListSpacingContext from './contexts/listSpacing';
+import { statusPropTypes } from './mixins/withStatus';
 
 export const COMPONENT_NAME = prefixClass('list');
 const ROOT_BEM = icBEM(COMPONENT_NAME);
@@ -31,6 +32,8 @@ function List({
   title,
   desc,
   titleSize,
+  status,
+  errorMsg,
   // React props
   className,
   children,
@@ -50,6 +53,8 @@ function List({
             title={title}
             titleSize={titleSize}
             desc={desc}
+            errorMsg={errorMsg}
+            status={status}
             bodySpacing={false}
             verticalSpacing={spacing || !!title}
             {...otherProps}
@@ -82,6 +87,8 @@ List.propTypes = {
 
   /** `<Section>` prop */
   titleSize: PropTypes.string,
+  status: statusPropTypes.status,
+  errorMsg: statusPropTypes.errorMsg,
 };
 
 List.defaultProps = {
@@ -90,6 +97,8 @@ List.defaultProps = {
   title: undefined,
   desc: undefined,
   titleSize: undefined,
+  status: undefined,
+  errorMsg: undefined,
 };
 
 // For `<ListRow>` to check if `nestedList` is a `<List>.

diff --git a/packages/core/src/Section.js b/packages/core/src/Section.js
@@ -5,14 +5,16 @@ import classNames from 'classnames';
 import icBEM from './utils/icBEM';
 import prefixClass from './utils/prefixClass';
 import './styles/Section.scss';
+import { STATUS_CODE } from './StatusIcon';
+import { statusPropTypes } from './mixins/withStatus';
 
 export const COMPONENT_NAME = prefixClass('section');
 const ROOT_BEM = icBEM(COMPONENT_NAME);
 export const BEM = {
   root: ROOT_BEM,
   title: ROOT_BEM.element('title'),
   body: ROOT_BEM.element('body'),
-  desc: ROOT_BEM.element('desc'),
+  footer: ROOT_BEM.element('footer'),
   titleRightArea: ROOT_BEM.element('title-right-area'),
 };
 
@@ -21,6 +23,8 @@ function Section({
   titleSize,
   titleRightArea,
   desc,
+  status,
+  errorMsg,
   verticalSpacing, // add margin to above and below <Section>
   bodySpacing, // add padding to body for components that are not row-based
   // React props
@@ -32,6 +36,7 @@ function Section({
   const rootClassName = classNames(
     BEM.root
       .modifier('no-margin', !verticalSpacing)
+      .modifier('error', status === STATUS_CODE.ERROR)
       .toString(),
     className,
   );
@@ -53,9 +58,13 @@ function Section({
       )}
     </div>
   );
-  const descArea = desc && (
-    <div className={BEM.desc.toString()}>
-      {desc}
+
+  const hasFooter = desc || errorMsg;
+
+  const footer = hasFooter && (
+    <div className={BEM.footer.toString()}>
+      {desc && <div>{desc}</div>}
+      {errorMsg && <div>{errorMsg}</div>}
     </div>
   );
 
@@ -65,7 +74,7 @@ function Section({
       <div className={bodyClassName}>
         {children}
       </div>
-      {descArea}
+      {footer}
     </div>
   );
 }
@@ -77,6 +86,8 @@ Section.propTypes = {
   bodySpacing: PropTypes.bool,
   titleSize: PropTypes.oneOf(['base', 'small']),
   titleRightArea: PropTypes.node,
+  status: statusPropTypes.status,
+  errorMsg: statusPropTypes.errorMsg,
 };
 
 Section.defaultProps = {
@@ -86,6 +97,8 @@ Section.defaultProps = {
   bodySpacing: true,
   titleSize: 'base',
   titleRightArea: undefined,
+  status: undefined,
+  errorMsg: undefined,
 };
 
 export default Section;
diff --git a/packages/core/src/__tests__/Section.test.js b/packages/core/src/__tests__/Section.test.js
@@ -22,11 +22,20 @@ it('renders title in <div> only when specified', () => {
 
 it('renders desc in <div> only when specified', () => {
   const wrapper = shallow(<Section>Foo</Section>);
-  expect(wrapper.find(`.${SECTION_BEM.desc}`).exists()).toBeFalsy();
+  expect(wrapper.find(`.${SECTION_BEM.footer}`).exists()).toBeFalsy();
 
   wrapper.setProps({ desc: 'Bar' });
-  expect(wrapper.find(`.${SECTION_BEM.desc}`)).toHaveLength(1);
-  expect(wrapper.find(`.${SECTION_BEM.desc}`).text()).toBe('Bar');
+  expect(wrapper.find(`.${SECTION_BEM.footer}`)).toHaveLength(1);
+  expect(wrapper.find(`.${SECTION_BEM.footer}`).text()).toContain('Bar');
+});
+
+it('renders errorMsg in <div> only when specified', () => {
+  const wrapper = shallow(<Section>Foo</Section>);
+  expect(wrapper.find(`.${SECTION_BEM.footer}`).exists()).toBeFalsy();
+
+  wrapper.setProps({ errorMsg: 'Bar' });
+  expect(wrapper.find(`.${SECTION_BEM.footer}`)).toHaveLength(1);
+  expect(wrapper.find(`.${SECTION_BEM.footer}`).text()).toContain('Bar');
 });
 
 it('renders children in a section body', () => {

diff --git a/packages/core/src/styles/Section.scss b/packages/core/src/styles/Section.scss
@@ -10,7 +10,7 @@ $component-name: #{$prefix}-section;
   //  Elements
   // --------------------
   &__title,
-  &__desc {
+  &__footer {
     white-space: pre-wrap;
     margin-left: rem($section-horizontal-padding);
     margin-right: rem($section-horizontal-padding);
@@ -47,7 +47,7 @@ $component-name: #{$prefix}-section;
     flex-shrink: 0;
   }
 
-  &__desc {
+  &__footer {
     @include small-text;
     // take padding from row layout as reference
     padding-top: rem(2px);
@@ -68,4 +68,11 @@ $component-name: #{$prefix}-section;
     margin-top: 0;
     margin-bottom: 0;
   }
+
+  &--error {
+    .#{$component-name}__body,
+    .#{$component-name}__footer {
+      color: #d94e41;
+    }
+  }
 }